/* ==========================================================
   SERGIO
   File: home-house.css
   Version: 1.5
   Purpose: Homepage House Section
========================================================== */

.house {
    margin-top: 2.5rem;
    background: #fff;
    color: #1c1c1c;
}

/* ==========================================================
   IMAGE
========================================================== */

.house-image-wrapper {
    margin: 0;
    overflow: hidden;
    background: #d8d0c4;
}

.house-image {
    display: block;
    width: 100%;
    height: auto;
}

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

.house-content {
    padding: 3.5rem 1.5rem 3.5rem;
    max-width: none;
}

.house-label {
    margin: 0 0 1.25rem;
    color: rgba(28, 28, 28, .62);

    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.house-title {
    margin: 0;
    max-width: 24rem;

    color: #1c1c1c;
    font-size: clamp(2.65rem, 11vw, 6rem);
    line-height: .88;
    font-weight: 300;
    letter-spacing: -.065em;
}

.house-intro {
    margin: 2.5rem 0 0 1rem;
    max-width: 19.5rem;

    color: rgba(28, 28, 28, .78);

    font-size: 1.1rem;
    line-height: 1.55;
    font-weight: 300;
    letter-spacing: -.025em;
}

.house-intro + .house-intro {
    margin-top: 2rem;
}

.house-link {
    display: inline-flex;
    align-items: center;
    gap: 1.75rem;

    margin-top: 3.25rem;

    color: #1c1c1c;
    text-decoration: none;

    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.house-link span:first-child {
    display: inline-block;
    padding-bottom: .45rem;

    border-bottom: 1px solid rgba(28, 28, 28, .28);
}

.house-link-arrow {
    font-size: 1rem;
    line-height: 1;
    transition: transform 400ms cubic-bezier(.23,1,.32,1);
}

@media (hover: hover) {

    .house-link:hover .house-link-arrow {
        transform: translateX(.25rem);
    }

}

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

@media (min-width: 768px) {

    .house-content {
        padding: 5.5rem 3.5rem 6rem;
    }

    .house-title {
        max-width: 34rem;
    }

    .house-intro {
        max-width: 24rem;
        font-size: 1.2rem;
    }

}

/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 1200px) {

    .house {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(28rem, 0.85fr);
        align-items: stretch;

        margin-top: 6rem;
    }

    .house-image-wrapper {
        min-height: 46rem;
    }

    .house-image {
        width: 100%;
        height: 100%;

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

    .house-content {
        display: flex;
        flex-direction: column;
        justify-content: center;

        max-width: none;
        padding: 6rem 4.5rem;
    }

    .house-title {
        max-width: 11ch;

        font-size: clamp(3.75rem, 4.6vw, 5.75rem);
        line-height: .92;
    }

    .house-intro {
        margin-left: 0;
        max-width: 25rem;
    }

}

/* ==========================================================
   REVEAL STAGGER
========================================================== */

.house-image-wrapper.reveal.is-visible {
    transition-delay: 0ms;
}

.house-label.reveal.is-visible {
    transition-delay: 50ms;
}

.house-title.reveal.is-visible {
    transition-delay: 100ms;
}

.house-intro.reveal.is-visible,
.house-intro-secondary.reveal.is-visible,
.house-link.reveal.is-visible {
    transition-delay: 200ms;
}

/* ==========================================================
   REVEAL EXIT STAGGER
========================================================== */

.house-image-wrapper.reveal.is-out {
    transition-delay: 0ms;
}

.house-label.reveal.is-out {
    transition-delay: 25ms;
}

.house-title.reveal.is-out {
    transition-delay: 50ms;
}

.house-intro.reveal.is-out,
.house-intro-secondary.reveal.is-out,
.house-link.reveal.is-out {
    transition-delay: 100ms;
}