/* ***** blocks with video *** */

.block-content-block_cover_video {
    height: auto;
    position: relative; 
    margin-bottom: 0;

    .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        gap: 0; 
        align-items: start; 
        min-height: 550px; 
        position: relative; 
        padding: 0;
    }

    .field--name-body {
        position: absolute; 
        z-index: 14;
        background-color: rgba(0,0,0,0.6);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);

        width: 90%; 
        height: auto;
        top: auto; 
        left: 50%;
        bottom: 2%;
        transform: translate(-50%, -2%);
        
        border-radius: var(--br-m);
        padding: var(--margin-m) var(--margin-m); 
        box-shadow: 0 8px 25px rgba(0,0,0,0.2); 

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--margin-l);

        & > * {
            text-align: center;
        }

        &::after { 
            
        }

        h2 {
            max-width: 40ch; 
            padding: 0;
            line-height: 1;
            font-size:  var(--fc-h1);
            font-weight: var(--fw-extrabold);
            font-family: var(--ff-cursive2);
            color: var(--white);
            text-wrap: balance;
            margin-bottom: 0;

        }
    
        h3 {
            max-width: 40ch;
            padding: 0;
            font-size:  var(--fc-h2);
            font-weight: var(--fw-bold);
            font-family: var(--ff-sans1);
            color: var(--white);
            text-wrap: balance;
            margin-bottom: 0;

        }
    
        p {
            padding: 0;
            font-size:  var(--fc-p); 
            font-family: var(--ff-sans1);
            color: var(--gray-light2);
            max-width: 60ch;
            text-wrap: balance;
            margin-bottom: 0;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: var(--margin-xxs);

            li {
                font-size: var(--fc-p);
                color: var(--gray-light2);
                font-family: var(--ff-sans1);
                text-align: center;
                max-width: 80ch;
                text-wrap: balance;
            }
        }

        p strong, li strong, svg {
            color: var(--yellow);
            font-weight: var(--fw-bold);
            fill: var(--yellow);
        }
    }

    .field--name-field-block-cover-video {
        
        z-index: 12; 
        width: 100%; 
        height: 100%; 
        margin: 0 0 0 0;
        
        aspect-ratio: 16 / 9; 
        object-fit: cover;
        overflow: hidden;
        
        position: relative; 
        

        video {
            aspect-ratio: 16 / 9;
            width: 100%;
            height: 100%;
            object-fit: cover;
            overflow: hidden;
            border-radius: var(--br-m);
        } 
        
        &::after { 
            aspect-ratio: 16 / 9;
            width: 100%;
            height: 100%;
            object-fit: cover;
            overflow: hidden;
            background-color: var(--black2);
            opacity: 0.1;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            z-index: 16;
            border-radius: var(--br-m); /* Ensure overlay matches video border-radius */
        } 
    }
}


.block .button {

    border-radius: var(--br-s);
    font-weight: var(--fw-bold);
    font-family: var(--ff-sans1);
    padding: var(--margin-xs) var(--margin-l);
    text-decoration: none;
    font-size: var(--fc-p);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    text-wrap: balance;

    transition: all 0.3s ease-in-out;

    &:hover {
        transform: translateY(-2px) scale(1.02);
    }

    &.primary {
        color: var(--white);
        background: var(--blue-base);
        border: 1px solid var(--blue-base);

        &:hover {
            background-color: var(--blue-light-1);
            border-color: var(--blue-light-2);
        }
    }

    &.secondary {
        background-color: var(--blue-light-1);
        color: var(--white);
    }

    &.outline {
        background-color: transparent;
        color: var(--blue-base);
        border: 2px solid var(--blue-base);
        transition: all 0.3s ease-in-out;
    }
}


.block-content-block_cover_video p:has(a.button) {
    margin-bottom: 0;
    display: inline-block;
    width: auto;

    a.button {
        margin-right: var(--margin-l);
    }
}

@media all and (width <= 768px) {

    .block-content-block_cover_video {
    height: auto;
    position: relative; 
    margin-bottom: 0;

    .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
        height: 100%;
        gap: 0; 
        min-height: 550px; 
        position: relative; 
        padding: 0;
    }
    
    .field--name-field-block-cover-video {
            
            z-index: 12; 
            width: 100%; 
            height: 100%; 
            margin: 0 0 0 0;
            
            aspect-ratio: 9 / 16; 
            object-fit: cover;
            overflow: hidden;
            
            position: relative; 
            

            video {
                aspect-ratio: 9 / 16; 
                width: 100%;
                height: 100%;
                object-fit: cover;
                overflow: hidden;
                border-radius: var(--br-m);
            } 
            
            &::after { 
                aspect-ratio: 9 / 16; 
                width: 100%;
                height: 100%;
                object-fit: cover;
                overflow: hidden;
                background-color: var(--black2);
                opacity: 0.1;
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                z-index: 16;
                border-radius: var(--br-m); /* Ensure overlay matches video border-radius */
            } 
        }

        .field--name-body {
            width: 98%;
            top: auto; 
            left: 50%;
            bottom: 1%;
            transform: translate(-50%, 0%);

            background-color: rgba(0,0,0,0.5);
            backdrop-filter: blur(20px);

            ul li {
            font-size: var(--fc-small2);
            }
             
        }

    }   
}

/*  BLOCK COVER IMAGE */

.block-content-block_cover_image {
    height: auto;
    margin-top: var(--margin-l);

      .content {

        height: 100%;
        position: relative;
        padding: 0;

        .field--name-body {
            position: absolute;
            z-index: 6;
            background-color: transparent;
            height: auto;
            width: 60%;
            bottom: 10%;
            left: 50%;
            transform: translate(-50%, 10%);
            border-radius: var(--br-m) 0 0 var(--br-m);
            padding: var(--margin-l) var(--margin-l);

            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: var(--margin-m);
            backdrop-filter: blur(10px);

            &::before {
                position: absolute;
                content: '';
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--blue-dark-1);
                opacity: 0.7;
                z-index: 2;
                border-radius: var(--br-m) 0 0 var(--br-m);
            }

            & h2 {
                max-width: 40ch;    
                padding: 0;
                font-size:  var(--fc-h1);
                font-weight: var(--fw-semibold);
                font-family: var(--ff-sans2);
                line-height: 1;
                text-align: center;
                color: var(--white);
                text-shadow: 2px 2px 4px var(--c-black-transparent-2);
                text-transform: uppercase;
                text-wrap: balance;
                z-index: 7; 

            }                       


            & h3 {
                max-width: 40ch;

                padding: 0;
                font-size:  var(--fc-h2);
                font-weight: var(--fw-bold);
                font-family: var(--ff-sans1);
                line-height: 1;
                text-align: center;
                color: var(--grey-light-2);
                z-index: 7; 
                text-wrap: balance;
            }

            & p {
                padding: 0;
                font-size:  var(--fc-p2);
                font-family: var(--ff-sans2);
                line-height: 1.2;
                text-align: center;
                color: var(--grey-light-1);
                max-width: 60ch;
                z-index: 7;
                text-wrap: balance;
            }   

            & ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: row;
                gap: var(--margin-m);
                z-index: 7;

                li {
                    font-size: var(--fc-small);
                    color: var(--grey-light-2);
                    font-family: var(--ff-sans2);
                    text-align: center;
                    max-width: 80ch;
                    text-wrap: balance;
                    margin-bottom: 0;

                    a {
                      margin-bottom: 0;
                    }
                }

                li::before {
                    display: none;
                }
            }

          .button {
            border-radius: var(--br-m);
            background-color: var(--blue-base);
            color: var(--white);
            font-weight: var(--fw-bold);
            font-family: var(--ff-sans2);
            padding: var(--margin-s) var(--margin-m);
            text-decoration: none;
            font-size: var(--fc-p2);
            cursor: pointer;
            display: inline-block;

            transition: all 0.4s ease-in-out;

            &:hover {
                scale: 1.1;
            }

          &.primary {
              background-color: var(--accent-1);
              color: var(--blue-dark-2);
              
              box-shadow: 2px 4px 8px var(--c-black-transparent-3);
          }


          &.secondary {
              background-color: var(--c-white-transparent-1);
              color: var(--blue-base);
          }

          &.outline {
              background-color: var(--white-transparent-2);
              color: var(--blue-base);
              border: 2px solid var(--blue-base);
          }
      }

        }
        .field--type-image {
            position: relative;
            width: 100%;
            height: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            overflow: hidden;
            border-radius: var(--br-m);

            img {
                aspect-ratio: 16 / 9;
                object-fit: cover;
                width: 100%;
                height: 100%;
            } 
            
        }
        
    }
}


@media all and (width <= 768px) {

    .block-content-block_cover_image {
        .content {

          .field--name-body {
            position: relative;
            z-index: 6;
            background-color: var(--blue-dark-1);
            height: auto;
            width: 100%;
            bottom: auto;
            transform: translate(0, -10%);
            left: auto;
            border-radius: var(--br-m);
            padding: var(--margin-s) var(--margin-s);

            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: var(--margin-m);
            backdrop-filter: blur(0);

            &::before {
                position: relative;
                display: none;
                content: '';
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--blue-dark-1);
                opacity: 0.7;
                z-index: 2;
                border-radius: var(--br-m) 0 0 var(--br-m);
            }

            ul {

                display: flex;
                flex-direction: column;
                gap: var(--margin-m);
            }
            

            .button {
              display: block;
            }
        }
      }
    }   
}


/*  LANGUAGE SELECTOR BLOCK */

.block-language {
  width: fit-content;
  margin-left: auto;

  & > .content {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }


    nav {
        list-style: none;
        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: row;
        justify-items: flex-end;
        align-items: center;
        gap: var(--margin-s);

        .nav-link {
          text-transform: uppercase;
          font-weight: var(--fw-semibold);
          font-size: var(--fc-small2);
          padding: var(--margin-xs) var(--margin-s);
          line-height: 1;
          
          a {
            color: var(--grey-dark-1);
            font-weight: var(--fw-minibold);
          }

        &.is-active {
            a {
              color: var(--grey-light-1);
              font-weight: var(--fw-semibold);
            }
          }
        }
    }
}