/* Hero */

.hero {
    .hero-background {
        background: url('/assets/images/IMG1.png') 84%/cover;
    }

    .hero-content {
        background: rgba(0, 0, 0, .25);
    }

    .hero-main {
        padding: calc(10vh + 0.3787 * min(60vmin, 380px)) 5vw 10vh;
    }

    .hero-text {
        padding-top: 1rem;
        text-align: center;
        font-size: min(4vh, 24px);
        font-weight: 500;
        line-height: 1.125;

        h5 {
            font-family: 'Caveat Brush', sans-serif;
            font-size: 8vh;
            color: var(--les-dark-blue);
            margin-bottom: 0.75em;
        }

        p {
            margin: 0;
            font-size: 1em;
        }
    }

    &+.hero-bottom {
        height: 0px;

        .hero-banner {
            height: 11.46326vw;
            background: url('/assets/images/hero-banner.svg');
            position: relative;
        }
    }

    @media (min-width: 576px) and (orientation: landscape) {
        .hero-main {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

        .hero-text {
            padding: 0;
        }
    }

    @media (min-width: 768px) {
        .hero-content {
            background: linear-gradient(to right, var(--les-white), rgba(var(--les-white-rgb), 0) 70%);
        }

        .hero-main {
            display: flex;
            flex-direction: column;
            align-items: normal;
            padding: 16.7717vh 0 0 4vw;
        }

        .hero-text {
            width: 35vw;
            text-align: left;

            p {
                font-size: 4vh;
            }
        }
    }
}

/* Nosotros section */

.site-section.nosotros {
    padding-top: 75px;

    .grid {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.375rem;
    }

    .section-card {
        background: var(--les-variant-lightest-aqua);
        box-shadow: 0.5rem 0.5rem 1rem rgba(var(--les-black-rgb), 0.3);

        &:nth-child(1) {
            border-top-left-radius: 2rem 2rem;
            border-top-right-radius: 2rem 2rem;
        }

        &:nth-child(4) {
            border-bottom-left-radius: 2rem 2rem;
            border-bottom-right-radius: 2rem 2rem;
        }
    }

    @media (min-width: 576px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .section-card {
            &:nth-child(1) {
                border-top-right-radius: 0 0;
            }

            &:nth-child(2) {
                border-top-right-radius: 2rem 2rem;
            }

            &:nth-child(3) {
                border-bottom-left-radius: 2rem 2rem;
            }

            &:nth-child(4) {
                border-bottom-left-radius: 0 0;
            }
        }
    }

    @media (min-width: 992px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1200px) {
        .grid {
            grid-template-columns: repeat(4, 1fr);
        }

        .section-card {
            &:nth-child(1) {
                border-bottom-left-radius: 2rem 2rem;
            }

            &:nth-child(2) {
                border-top-right-radius: 0 0;
            }

            &:nth-child(3) {
                border-bottom-left-radius: 0 0;
            }

            &:nth-child(4) {
                border-top-right-radius: 2rem 2rem;
            }
        }
    }
}

/* Programas section */

.site-section.programas {
    .title-banner {
        width: calc(48vw + 4rem);
    }

    .grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .section-card {
        background: var(--les-variant-lightest-aqua);
        border-radius: 3rem 3rem;
        overflow: hidden;

        .card-img img,
        .card-img video {
            padding: 0;
        }
    }

    @media (min-width: 576px) {
        .card-img {
            aspect-ratio: 16 / 9;
        }
    }

    @media (min-width: 992px) {
        .grid {
            grid-template-columns: repeat(3, 1fr);
        }

        .card-img {
            aspect-ratio: 4 / 3;
        }
    }

    @media (min-width: 1200px) {
        .title-banner {
            width: 40rem;
        }
    }
}

/* Areas de desarrollo section */

.site-section.desarrollo {
    .title-banner {
        width: calc(32vw + 8rem);
    }

    .grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .section-card {
        .card-img {
            aspect-ratio: unset;

            img,
            video {
                object-fit: contain;
            }
        }

        .card-text p {
            color: var(--les-dark-blue);
        }
    }

    @media (min-width: 576px) {
        .grid {
            grid-template-columns: repeat(4, 1fr);
        }

        .section-card {
            grid-column-end: span 2;

            &:nth-last-child(1) {
                grid-column-start: -4;
            }
        }
    }

    @media (min-width: 768px) {
        .grid {
            grid-template-columns: repeat(6, 1fr);
        }

        .section-card:nth-last-child(2) {
            grid-column-start: -6;
        }
    }

    @media (min-width: 992px) {
        .grid {
            grid-template-columns: repeat(10, 1fr);
        }

        .section-card {
            grid-column-start: unset !important;
        }
    }

    @media (min-width: 1200px) {
        .title-banner {
            width: 32rem;
        }
    }
}

/* Lego education section */

.site-section.lego {
    background: url('/assets/images/fondo-lego.png') center/cover;
    border-top: solid 5px var(--les-aqua);

    .grid {
        gap: 5rem;
    }

    .section-group {
        justify-content: center;
        align-items: center;
        grid-column: span 4;
    }

    .section-title {
        width: 100%;
        max-width: 26rem;
    }

    .section-img {
        grid-column: span 4;
        border-top-right-radius: 5rem 5rem;
        border-bottom-left-radius: 5rem 5rem;

        img{
            object-position: 73%;
        }
    }

    .section-text p {
        font-size: 1.5rem;
    }

    @media (min-width: 992px) {
        .section-img  {
            height: 100%;
            width: 100%;
            grid-area: 1 / 1 / span 3 / span 3;
        }

        .section-group {
            grid-area: 2 / 4 / span 1 / span 3;
        }
    }
}

/* Vida Laboral section */

.site-section.vida-laboral {
    .section-background {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: min(50vh, 500px);
        padding: 1.5rem 2.5rem;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to right, rgba(var(--les-white-rgb), 0.5), rgba(var(--les-white-rgb), 0.5)),
            url('/assets/images/IMG6.png') center/cover;
    }
    
    .section-title {
        padding-bottom: 2.5rem;
    }

    .title-banner {
        width: calc(68vw + 3rem);
    }

    .section-text {
        grid-column: span 4;

        p {
            font-size: 1.5rem;
        }
    }

    @media (min-width: 992px) {
        .section-title {
            grid-column: span 6;
        }

        .section-background {
            background: linear-gradient(to right, var(--les-white) 20%, rgba(var(--les-white-rgb), 0) 70%), 
                url('/assets/images/IMG6.png') 50% 65%/cover;
            border-bottom-right-radius: 10rem 10rem;
        }

        .section-text {
            grid-area: 2 / 1 / span 1 / span 2;
        }
    }

    @media (min-width: 1200px) {
        .title-banner {
            width: 54rem;
        }
    }
}

/* Floristeria section */

.site-section.floristeria {
    padding: 100px 0;
    background-color: var(--les-variant-lightest-aqua);

    .grid {
        gap: 5rem;
    }

    .section-group {
        justify-content: center;
        align-items: center;
        grid-column: span 4;
    }

    .section-title {
        width: 100%;
        max-width: 26rem;
    }

    .section-img {
        grid-column: span 4;
        border-top-right-radius: 5rem 5rem;
        border-bottom-left-radius: 5rem 5rem;

        img{
            object-position: 73%;
        }
    }

    .section-text p {
        font-size: 1.5rem;
    }

    @media (min-width: 992px) {
        .section-img  {
            height: 100%;
            width: 100%;
            grid-area: 1 / 4 / span 3 / span 3;
        }

        .section-group {
            grid-area: 2 / 1 / span 1 / span 3;
        }
    }
}

/* Alimentos education section */

.site-section.alimentos {
    .grid {
        gap: 5rem;
    }

    .section-group {
        justify-content: center;
        align-items: center;
        grid-column: span 4;
    }

    .section-title {
        width: 100%;
        max-width: 26rem;
    }

    .section-img {
        grid-column: span 4;
        border-top-left-radius: 5rem 5rem;
        border-bottom-right-radius: 5rem 5rem;

        img{
            object-position: 73%;
        }
    }

    .section-text {
        p, li {
            font-size: 1.5rem;
            color: var(--les-dark-gray);
        }
    }

    @media (min-width: 992px) {
        .section-img  {
            height: 100%;
            width: 100%;
            grid-area: 1 / 1 / span 3 / span 3;
        }

        .section-group {
            grid-area: 2 / 4 / span 1 / span 3;
        }
    }
}

/* Enfoque section */

.site-section.enfoque {
    padding: 100px 0;
    background-color: var(--les-variant-lightest-aqua);

    .section-text p {
        font-size: 1.5rem;
        color: var(--les-dark-gray);
    }
}

/* Instalaciones section */

.site-section.instalaciones {
    .title-banner {
        width: calc(36vw + 3rem);
    }

    .grid {
        grid-template-columns: 1fr;
        align-items: stretch;
        row-gap: 5rem;
        column-gap: 3rem;
    }

    .section-img {
        position: relative;

        a:after,
        a:before {
            transition: 0.4s;
        }

        a:before {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -0.5em;
            margin-left: -0.5em;
            opacity: 0;
            color: var(--les-white);
            font-size: 3rem;
            z-index: 1;
        }

        a:after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            background-color: rgba(var(--les-dark-blue-rgb), 0.7);
            content: '';
        }

        a:hover:after,
        a:hover:before {
            opacity: 1;
        }
    }

    @media (min-width: 576px) {
        .section-img {
            aspect-ratio: 16 / 9;
        }
    }

    @media (min-width: 768px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .section-img {
            aspect-ratio: 1 / 1;
        }
    }

    @media (min-width: 992px) {
        .grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 1200px) {
        .title-banner {
            width: 30rem;
        }
    }
}

/* Contacto section */

.site-section.contacto {
    padding: 100px 0;
    background: var(--les-variant-lightest-aqua);

    .section-group {
        align-items: center;
    }

    form {
        width: 100%;
        max-width: 720px;

        label, button {
            text-transform: uppercase;
            font-weight: 600;
        }
    }
}

.site-section.colophon {
    padding: 100px 0;
    background: var(--les-dark-blue);

    .grid {
        row-gap: 1.5rem;
        grid-template-columns: 1fr;
        align-items: start;
    }

    .section-title, .intro, .direccion, .whatsapp, .socials , .section-map {
        grid-column: 1 / -1;
    }

    .section-title h1,
    .section-title h2,
    .section-title h3,
    .section-title h4,
    .section-title h5,
    .section-title h6 {
        color: var(--les-variant-light-aqua);
    }

    .section-pill {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr 100fr;
        grid-column: 1 / -1;
        gap: 1rem;
    }

    .pill-icon {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .pill-icon img {
        width: 1.75rem;
    }

    .pill-text {
        grid-area: 1 / 2 / span 1 / span 1;
    }

    .section-text p, .pill-text p {
        font-size: 1.5rem;
        color: var(--les-white);
    }

    .intro p {
        text-align: center;
    }

    .section-map {
        grid-column: 1 / -1;
        align-self: center;
    }

    @media (min-width: 576px) {
        .section-map {
            aspect-ratio: 16 / 9;
        }

        .intro p {
            text-align: start;
        }
    }

    @media (min-width: 768px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .whatsapp {
            grid-column-end: span 1;
        }

        .socials {
            grid-column-start: 2;
        }
    }

    @media (min-width: 992px) {
        .grid {
            grid-template-columns: repeat(4, 1fr);
        }

        .section-text p, .pill-text p {
            font-size: 2rem;
        }

        .pill-icon img {
            width: 2.5rem;
        }

        .section-title {
            grid-area: 2 / 1 / span 1 / span 2;
        }

        .intro {
            grid-area: 3 / 1 / span 1 / span 2;
        }

        .intro p {
            text-align: center;
        }

        .direccion {
            grid-area: 4 / 1 / span 1 / span 2;
        }

        .whatsapp {
            grid-area: 5 / 1 / span 1 / span 1;
        }

        .socials {
            grid-area: 5 / 2 / span 1 / span 1;
        }

        .section-map {
            aspect-ratio: 16 / 9;
            grid-area: 1 / 3 / span 6 / span 2;
        }
    }
}