/* =========================================================
   EL REY
   ABOUT PAGE
========================================================= */

.about-page {
    background: #f6f0e7;
}

.about-wrapper {
    width: min(90%, 1200px);
    margin: 0 auto;
}


/* =========================================================
   HERO
========================================================= */

.about-hero {
    min-height: 760px;

    padding:
        calc(var(--header-height) + 100px)
        7%
        100px;

    position: relative;

    display: flex;
    align-items: center;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(8, 8, 8, .95) 0%,
            rgba(16, 8, 9, .82) 48%,
            rgba(74, 18, 29, .45) 100%
        ),
        url("images/menu/hero-food.jpg");

    background-size: cover;

    background-position: center;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.5),
            transparent 50%
        );
}

.about-hero-content {
    width: min(1200px, 100%);

    margin: 0 auto;

    position: relative;

    z-index: 2;
}

.about-eyebrow {
    color: var(--gold-light);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .24em;

    text-transform: uppercase;
}

.about-hero h1 {
    max-width: 900px;

    margin-top: 22px;

    font-family: var(--serif);

    font-size:
        clamp(5rem, 10vw, 9rem);

    font-weight: 500;

    line-height: .86;

    letter-spacing: -.045em;
}

.about-hero h1 span {
    display: block;

    color: var(--gold-light);

    font-style: italic;
}

.about-hero-description {
    max-width: 560px;

    margin-top: 35px;

    color: rgba(255,255,255,.67);

    font-size: 1.05rem;

    line-height: 1.8;
}

.about-scroll-link {
    margin-top: 38px;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    color: #ffffff;

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.about-scroll-link span {
    color: var(--gold-light);

    font-size: 1.1rem;
}

.about-hero-word {
    position: absolute;

    right: -30px;

    bottom: -80px;

    color: rgba(255,255,255,.025);

    font-family: var(--serif);

    font-size:
        clamp(15rem, 30vw, 30rem);

    font-weight: 700;

    user-select: none;
}


/* =========================================================
   INTRO
========================================================= */

.about-intro {
    padding: 120px 0;

    background: #f6f0e7;
}

.about-intro-grid {
    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 120px;
}

.about-intro-heading h2 {
    margin-top: 15px;

    font-family: var(--serif);

    font-size:
        clamp(3.7rem, 6vw, 6rem);

    font-weight: 500;

    line-height: .95;
}

.about-intro-heading h2 span {
    display: block;

    color: var(--wine);

    font-style: italic;
}

.about-intro-copy {
    padding-top: 35px;
}

.about-intro-copy p {
    max-width: 620px;

    margin-bottom: 24px;

    color: #6c665f;

    font-size: .98rem;

    line-height: 1.85;
}

.about-intro-copy .about-lead {
    color: #26221f;

    font-family: var(--serif);

    font-size: 1.55rem;

    line-height: 1.55;
}


/* =========================================================
   FAMILY STORY
========================================================= */

.family-story-section {
    min-height: 750px;

    display: grid;

    grid-template-columns: 1.15fr .85fr;

    background: #ffffff;
}

.family-story-image {
    min-height: 750px;

    position: relative;

    background-size: cover;

    background-position: center;
}

.image-caption {
    position: absolute;

    left: 40px;

    bottom: 35px;

    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}

.image-caption span {
    padding: 9px 12px;

    color: #ffffff;

    background: rgba(0,0,0,.55);

    backdrop-filter: blur(7px);

    font-size: .57rem;

    font-weight: 700;

    letter-spacing: .15em;
}

.family-story-content {
    padding:
        100px
        clamp(45px, 7vw, 110px);

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.family-story-content h2 {
    margin-top: 14px;

    font-family: var(--serif);

    font-size:
        clamp(3.4rem, 5vw, 5.2rem);

    font-weight: 500;

    line-height: .98;
}

.family-story-content h2 span {
    display: block;

    color: var(--wine);

    font-style: italic;
}

.family-story-content p {
    max-width: 520px;

    margin-top: 24px;

    color: var(--gray);

    line-height: 1.85;
}

.family-story-content .btn {
    align-self: flex-start;

    margin-top: 35px;
}


/* =========================================================
   HISTORY
========================================================= */

.history-section {
    padding: 120px 0;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0d0d0d,
            #171113
        );
}

.history-heading {
    max-width: 720px;

    margin-bottom: 80px;
}

.history-heading h2 {
    margin-top: 15px;

    font-family: var(--serif);

    font-size:
        clamp(4rem, 7vw, 6.5rem);

    font-weight: 500;

    line-height: .92;
}

.history-heading h2 span {
    display: block;

    color: var(--gold-light);

    font-style: italic;
}

.history-heading > p:last-child {
    max-width: 520px;

    margin-top: 25px;

    color: rgba(255,255,255,.5);

    line-height: 1.8;
}


/* TIMELINE */

.history-timeline {
    border-top:
        1px solid rgba(255,255,255,.12);
}

.history-item {
    min-height: 240px;

    display: grid;

    grid-template-columns:
        150px 1px 1fr;

    gap: 45px;

    padding: 45px 0;

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

.history-year {
    color: var(--gold-light);

    font-family: var(--serif);

    font-size: 2.1rem;
}

.history-line {
    background:
        rgba(255,255,255,.15);
}

.history-content {
    max-width: 720px;
}

.history-content > span {
    color: rgba(255,255,255,.4);

    font-size: .6rem;

    font-weight: 700;

    letter-spacing: .15em;
}

.history-content h3 {
    margin-top: 11px;

    font-family: var(--serif);

    font-size: 2rem;

    font-weight: 500;
}

.history-content p {
    margin-top: 14px;

    color: rgba(255,255,255,.55);

    line-height: 1.8;
}


/* =========================================================
   CULTURE
========================================================= */

.culture-section {
    padding: 120px 0;

    background: #f6f0e7;
}

.culture-heading {
    margin-bottom: 55px;
}

.culture-heading h2 {
    margin-top: 12px;

    font-family: var(--serif);

    font-size:
        clamp(3.5rem, 6vw, 5.5rem);

    font-weight: 500;

    line-height: .96;
}

.culture-heading h2 span {
    display: block;

    color: var(--wine);

    font-style: italic;
}

.culture-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.culture-card {
    background: #ffffff;

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.culture-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 25px 55px
        rgba(0,0,0,.1);
}

.culture-image {
    height: 330px;

    background-size: cover;

    background-position: center;
}

.culture-content {
    padding: 30px;
}

.culture-content > span {
    color: var(--wine);

    font-size: .58rem;

    font-weight: 700;

    letter-spacing: .15em;
}

.culture-content h3 {
    margin-top: 13px;

    font-family: var(--serif);

    font-size: 1.75rem;

    font-weight: 500;
}

.culture-content p {
    margin-top: 12px;

    color: var(--gray);

    font-size: .9rem;

    line-height: 1.7;
}


/* =========================================================
   VALUES
========================================================= */

.about-values {
    padding: 120px 0;

    color: #ffffff;

    background: var(--wine-dark);
}

.about-values-heading {
    margin-bottom: 65px;
}

.about-values-heading h2 {
    margin-top: 13px;

    font-family: var(--serif);

    font-size:
        clamp(3.6rem, 6vw, 5.6rem);

    font-weight: 500;

    line-height: .96;
}

.about-values-heading h2 span {
    display: block;

    color: var(--gold-light);

    font-style: italic;
}

.about-values-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);
}

.about-value {
    min-height: 280px;

    padding: 35px 30px;

    border-top:
        1px solid rgba(255,255,255,.15);

    border-right:
        1px solid rgba(255,255,255,.15);
}

.about-value:last-child {
    border-right: 0;
}

.about-value-number {
    color: var(--gold-light);

    font-family: var(--serif);

    font-size: 1rem;
}

.about-value h3 {
    margin-top: 45px;

    font-family: var(--serif);

    font-size: 1.7rem;

    font-weight: 500;
}

.about-value p {
    margin-top: 15px;

    color: rgba(255,255,255,.55);

    font-size: .9rem;

    line-height: 1.7;
}


/* =========================================================
   QUOTE
========================================================= */

.about-quote-section {
    min-height: 600px;

    padding: 100px 7%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    text-align: center;

    background: #eee3d4;
}

.about-quote-content {
    max-width: 950px;

    position: relative;

    z-index: 2;
}

.about-quote-content blockquote {
    margin-top: 25px;

    font-family: var(--serif);

    font-size:
        clamp(3rem, 6vw, 5.5rem);

    font-weight: 500;

    line-height: 1.06;
}

.about-quote-content blockquote span {
    display: block;

    color: var(--wine);

    font-style: italic;
}

.about-quote-content > p:last-child {
    margin-top: 35px;

    color: #777068;

    font-size: .65rem;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.about-quote-decoration {
    position: absolute;

    left: 50%;

    top: 38%;

    transform: translate(-50%, -50%);

    color: rgba(124,31,45,.06);

    font-family: Georgia, serif;

    font-size: 38rem;

    line-height: 1;

    user-select: none;
}


/* =========================================================
   VISIT
========================================================= */

.about-visit {
    min-height: 680px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    background: #111111;
}

.about-visit-left {
    padding:
        100px
        clamp(40px, 7vw, 100px);

    display: flex;

    flex-direction: column;

    justify-content: center;

    color: #ffffff;
}

.about-visit-left h2 {
    margin-top: 14px;

    font-family: var(--serif);

    font-size:
        clamp(3.4rem, 5.5vw, 5.4rem);

    font-weight: 500;

    line-height: .96;
}

.about-visit-left h2 span {
    display: block;

    color: var(--gold-light);

    font-style: italic;
}

.about-visit-left > p:not(.section-label) {
    max-width: 520px;

    margin-top: 24px;

    color: rgba(255,255,255,.56);

    line-height: 1.8;
}

.about-visit-details {
    margin-top: 42px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;
}

.about-visit-details span {
    color: var(--gold-light);

    font-size: .58rem;

    font-weight: 700;

    letter-spacing: .14em;
}

.about-visit-details p {
    margin-top: 9px;

    color: rgba(255,255,255,.68);

    font-size: .88rem;

    line-height: 1.7;
}

.about-visit-buttons {
    margin-top: 40px;

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

.about-outline-button {
    color: #ffffff;

    border:
        1px solid rgba(255,255,255,.4);

    background: transparent;
}

.about-outline-button:hover {
    background: #ffffff;

    color: #111111;
}

.about-visit-image {
    min-height: 680px;

    background-size: cover;

    background-position: center;
}


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

@media (max-width: 1050px) {

    .about-intro-grid {
        gap: 65px;
    }

    .family-story-section {
        grid-template-columns: 1fr 1fr;
    }

    .culture-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .culture-card:last-child {
        grid-column:
            span 2;
    }

    .about-values-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .about-value:nth-child(2) {
        border-right: 0;
    }

}


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

@media (max-width: 720px) {


    /* HERO */

    .about-hero {
        min-height: 670px;

        padding:
            calc(
                var(--header-height)
                + 80px
            )
            6%
            80px;

        background-position: center;
    }

    .about-hero h1 {
        font-size:
            clamp(
                4.1rem,
                20vw,
                6rem
            );
    }


    /* INTRO */

    .about-intro {
        padding: 80px 0;
    }

    .about-intro-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .about-intro-copy {
        padding-top: 0;
    }

    .about-intro-copy .about-lead {
        font-size: 1.35rem;
    }


    /* FAMILY STORY */

    .family-story-section {
        grid-template-columns: 1fr;
    }

    .family-story-image {
        min-height: 470px;
    }

    .family-story-content {
        padding: 70px 6%;
    }


    /* HISTORY */

    .history-section {
        padding: 80px 0;
    }

    .history-heading {
        margin-bottom: 55px;
    }

    .history-item {
        min-height: auto;

        grid-template-columns:
            80px 1fr;

        gap: 25px;

        padding: 35px 0;
    }

    .history-line {
        display: none;
    }

    .history-year {
        font-size: 1.4rem;
    }

    .history-content h3 {
        font-size: 1.55rem;
    }


    /* CULTURE */

    .culture-section {
        padding: 80px 0;
    }

    .culture-grid {
        grid-template-columns: 1fr;
    }

    .culture-card:last-child {
        grid-column: auto;
    }

    .culture-image {
        height: 290px;
    }


    /* VALUES */

    .about-values {
        padding: 80px 0;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
    }

    .about-value {
        min-height: 210px;

        border-right: 0;

        padding: 30px 0;
    }

    .about-value h3 {
        margin-top: 30px;
    }


    /* QUOTE */

    .about-quote-section {
        min-height: 520px;

        padding: 75px 6%;
    }


    /* VISIT */

    .about-visit {
        grid-template-columns: 1fr;
    }

    .about-visit-left {
        padding: 75px 6%;
    }

    .about-visit-details {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .about-visit-buttons {
        flex-direction: column;
    }

    .about-visit-buttons .btn {
        width: 100%;
    }

    .about-visit-image {
        min-height: 450px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 430px) {

    .about-hero h1 {
        font-size: 4rem;
    }

    .history-item {
        grid-template-columns: 1fr;
    }

    .history-year {
        margin-bottom: -10px;
    }

    .image-caption {
        left: 20px;

        bottom: 20px;
    }

}