/*
|--------------------------------------------------------------------------
| HOME — QUEBRADA EL AMOLADERO
|--------------------------------------------------------------------------
|
| Componente:
| patterns/home-quebrada.php
|
| Responsabilidad exclusiva:
| - layout sección
| - título
| - descripción
| - texto destacado
| - CTA
| - ilustración
|
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   SECTION
   ========================================================================== */

.amoladero-quebrada {
    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        var(--amoladero-light);

    color:
        var(--amoladero-primary);
}


.amoladero-quebrada__inner {
    width:
        min(
            calc(100% - (var(--amoladero-gutter) * 2)),
            var(--amoladero-container)
        );

    margin-inline: auto;

    padding-top:
        clamp(72px, 7vw, 116px);
}


/* ==========================================================================
   GRID
   ========================================================================== */

.amoladero-quebrada__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(340px, 1.1fr);

    align-items: end;

    gap:
        clamp(48px, 7vw, 120px);

    width: 100%;
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.amoladero-quebrada__content {
    align-self: center;

    width: 100%;
    max-width: 590px;

    padding-bottom:
        clamp(58px, 6vw, 92px);
}


/* ==========================================================================
   TITLE
   ========================================================================== */

.amoladero-quebrada__title {
    max-width: 520px;

    margin:
        0 0
        clamp(24px, 2.2vw, 36px);

    color:
        var(--amoladero-primary);

    font-family:
        var(--amoladero-font-display);

    font-size:
        clamp(3.2rem, 4.8vw, 5.8rem);

    font-weight: 400;

    line-height: 0.88;

    letter-spacing:
        -0.02em;

    text-transform:
        uppercase;

    text-wrap:
        balance;
}


/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.amoladero-quebrada__description {
    max-width: 570px;

    margin:
        0 0 20px;

    color:
        var(--amoladero-primary);

    font-family:
        var(--amoladero-font-body);

    font-size:
        clamp(0.95rem, 1vw, 1.1rem);

    font-weight: 400;

    line-height: 1.5;
}


/* ==========================================================================
   HIGHLIGHT
   ========================================================================== */

.amoladero-quebrada__highlight {
    max-width: 560px;

    margin:
        0 0
        clamp(30px, 3vw, 44px);

    color:
        var(--amoladero-deep);

    font-family:
        var(--amoladero-font-heavy);

    font-size:
        clamp(0.74rem, 0.8vw, 0.9rem);

    font-weight: 800;

    line-height: 1.4;

    text-transform:
        uppercase;
}


/* ==========================================================================
   CTA
   ========================================================================== */

.amoladero-quebrada__actions {
    display: flex;

    justify-content: center;

    width: 100%;

    margin: 0;
}


.amoladero-quebrada__actions
.wp-block-button {
    margin: 0;
}


.amoladero-quebrada__actions
.wp-block-button__link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width:
        clamp(160px, 14vw, 215px);

    min-height: 44px;

    padding:
        12px 34px;

    border: 0;

    border-radius:
        var(--amoladero-radius-pill);

    background:
        var(--amoladero-accent);

    color:
        var(--amoladero-white);

    font-family:
        var(--amoladero-font-heavy);

    font-size:
        0.76rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing:
        0.02em;

    text-decoration: none;

    text-transform:
        uppercase;

    transition:
        background 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;
}


.amoladero-quebrada__actions
.wp-block-button__link:hover {
    background:
        var(--amoladero-primary);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px
        rgba(0, 89, 79, 0.15);
}


/* ==========================================================================
   ILLUSTRATION
   ========================================================================== */

.amoladero-quebrada__media {
    align-self: end;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    min-width: 0;

    margin: 0;
}


.amoladero-quebrada__image {
    width: 100%;

    margin: 0;

    line-height: 0;
}


.amoladero-quebrada__image img {
    display: block;

    width:
        min(100%, 560px);

    max-height:
        620px;

    margin:
        0 auto;

    object-fit:
        contain;

    object-position:
        center bottom;
}


/*
 * Especialmente útil cuando usemos
 * la ilustración original en SVG.
 */
.amoladero-quebrada__image img[src$=".svg"] {
    width:
        min(100%, 560px);

    height: auto;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1024px) {

    .amoladero-quebrada__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(290px, 0.82fr);

        gap:
            clamp(36px, 5vw, 64px);
    }


    .amoladero-quebrada__title {
        font-size:
            clamp(3rem, 6vw, 5rem);
    }


    .amoladero-quebrada__image img {
        width:
            min(100%, 430px);

        max-height:
            520px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .amoladero-quebrada__inner {
        width:
            min(
                calc(100% - (var(--amoladero-gutter) * 2)),
                var(--amoladero-container)
            );

        padding-top:
            58px;
    }


    .amoladero-quebrada__grid {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 38px;
    }


    .amoladero-quebrada__content {
        order: 1;

        max-width: none;

        padding-bottom: 0;
    }


    .amoladero-quebrada__media {
        order: 2;

        width: 100%;
    }


    .amoladero-quebrada__title {
        max-width: 100%;

        margin-bottom: 22px;

        font-size:
            clamp(3rem, 13vw, 4.7rem);

        line-height: 0.9;
    }


    .amoladero-quebrada__description,
    .amoladero-quebrada__highlight {
        max-width: none;
    }


    .amoladero-quebrada__actions {
        justify-content: center;
    }


    .amoladero-quebrada__image img {
        width:
            min(88vw, 400px);

        max-height:
            460px;

        margin-inline:
            auto;
    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    .amoladero-quebrada__inner {
        padding-top:
            52px;
    }


    .amoladero-quebrada__title {
        font-size:
            clamp(2.75rem, 13vw, 4.1rem);
    }


    .amoladero-quebrada__description {
        font-size:
            0.96rem;
    }


    .amoladero-quebrada__image img {
        width:
            min(92vw, 360px);
    }

}