/*=========================================================
    EL LUGAR
=========================================================*/

.location{
    padding-block:120px;
}

/*=========================================================
    IMAGEN
=========================================================*/

.location-card{
    display:grid;

    grid-template-columns:500px minmax(0,1fr);

    align-items:center;

    gap:clamp(60px,7vw,110px);
}

.location-image-wrapper{
    position:relative;

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

    aspect-ratio:4/5;

    justify-self:start;

    overflow:hidden;
    isolation:isolate;

    border-radius:
        48% 52% 8px 8px /
        20% 20% 8px 8px;

    box-shadow:
        0 30px 70px rgba(71,19,31,.16);
}

.location-content{
    min-width:0;
}

/*=========================================================
    CROSSFADE DE DOS CAPAS
=========================================================*/

.location-fade-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    pointer-events:none;
}

/* Imagen que permanece como base */

.location-fade-current{
    z-index:1;
    opacity:1;
}

/* Imagen que entra lentamente encima */

.location-fade-next{
    z-index:2;

    opacity:0;

    transition:
        opacity 2.8s cubic-bezier(.45,0,.25,1);

    will-change:opacity;
}

.location-fade-next.is-visible{
    opacity:1;
}

/*
    Se usa unos milisegundos al intercambiar imágenes
    para devolver la capa superior a opacity:0 sin animación.
*/

.location-fade-next.no-transition{
    transition:none;
}

/*=========================================================
    SOMBREADO Y FECHA
=========================================================*/

.location-image-overlay{
    position:absolute;
    inset:0;

    z-index:3;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(45,18,23,.48) 100%
        );

    pointer-events:none;
}

.location-image-label{
    position:absolute;

    left:30px;
    bottom:28px;

    z-index:4;

    color:var(--blanco);

    font-size:.78rem;
    letter-spacing:4px;
    text-transform:uppercase;

    pointer-events:none;
}

@media (prefers-reduced-motion:reduce){

    .location-fade-next{
        transition:none;
    }

}

/*=========================================================
    INFORMACIÓN
=========================================================*/

.location-kicker{
    margin-bottom:12px;

    color:var(--plateado-dark);

    font-size:.78rem;
    letter-spacing:4px;
    text-transform:uppercase;
}

.location-name{
    color:var(--vino);

    font-family:var(--font-title);
    font-size:clamp(3.4rem, 7vw, 5.8rem);
    font-weight:500;
    line-height:.9;
}

.location-ranch{
    margin-top:12px;

    color:var(--texto);

    font-size:1.15rem;
    letter-spacing:2px;
}

.location-address{
    margin-bottom:20px;

    color:var(--vino);

    font-size:1.15rem;
    font-weight:600;
    letter-spacing:1px;
}

.location-description{
    margin-bottom:34px;

    color:var(--texto);

    font-size:1.1rem;
    line-height:1.8;
}

/*=========================================================
    RESPONSIVE
=========================================================*/

@media (max-width:850px){

    .location-card{
        grid-template-columns:1fr;

        gap:50px;
    }

    .location-image-wrapper{

    max-width:430px;

    width:100%;

    margin-inline:auto;

}

    .location-content{
        margin-inline:auto;

        text-align:center;
    }

    .location-content .divider-left{
        margin-inline:auto;
    }

}

@media (max-width:520px){

    .location-image-wrapper{
        min-height:430px;

        border-radius:
            46% 54% 8px 8px /
            15% 15% 8px 8px;
    }

    .location-name{
        font-size:3.7rem;
    }

}

.location-header-icon{

    margin:0 auto 24px;

    width:58px;

    opacity:.92;

}