/* ============================================================
   DETAILS PAGE
   ============================================================ */

.details-page {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
}


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

.details-hero {
    position: relative;
    padding:
        clamp(7rem, 15vw, 11rem)
        1.5rem
        clamp(5rem, 10vw, 8rem);

    text-align: center;
}

.details-hero__inner {
    width: min(100%, 900px);
    margin: 0 auto;
}

.details-hero__title {
    margin: 1.25rem 0 1.5rem;

    color: var(--ivory);

    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: 0.02em;
}

.details-hero__intro {
    width: min(100%, 560px);
    margin: 0 auto;

    color: var(--text-muted);

    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.9;
    letter-spacing: 0.04em;
}


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

.details-content {
    width: min(100%, 1050px);
    margin: 0 auto;

    padding:
        0 1.5rem
        clamp(5rem, 10vw, 9rem);
}


/* ============================================================
   CARD
   ============================================================ */

.details-card {
    position: relative;

    display: grid;
    grid-template-columns: 4rem 1fr;
    gap: 2rem;

    padding:
        clamp(2.5rem, 5vw, 4.5rem)
        0;

    border-top:
        1px solid rgba(182, 154, 98, 0.22);
}

.details-card:last-child {
    border-bottom:
        1px solid rgba(182, 154, 98, 0.22);
}


/* ============================================================
   NUMBER
   ============================================================ */

.details-card__number {
    padding-top: 0.15rem;

    color:
        rgba(182, 154, 98, 0.65);

    font-family: var(--font-serif);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.16em;
}


/* ============================================================
   MAIN
   ============================================================ */

.details-card__main {
    min-width: 0;
}

.details-card .section-label {
    display: block;
    margin-bottom: 0.85rem;

    color: var(--gold-light);

    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.2em;
}

.details-card__title {
    margin: 0;

    color: var(--ivory);

    font-family: var(--font-serif);
    font-size: clamp(1.35rem, 3vw, 2.1rem);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.02em;
}


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

.details-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    max-width: 600px;

    margin-top: 1.75rem;

    color: var(--text-muted);

    font-family: var(--font-sans);
    font-size: 0.72rem;
    line-height: 1.9;
    letter-spacing: 0.03em;
}

.details-card__content p {
    margin: 0 0 0.5rem;
}

.details-card__content strong {
    color: var(--ivory);

    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.04em;
}

.details-card__content span {
    margin-top: 0.2rem;

    color: var(--text-muted);

    font-size: 0.65rem;
    letter-spacing: 0.12em;
}


/* ============================================================
   COMING SOON
   ============================================================ */

.details-card__coming-soon {
    margin-top: 1.75rem;
    padding-left: 1rem;

    border-left:
        1px solid rgba(201, 161, 163, 0.55);
}

.details-card__coming-soon span {
    display: block;

    color: var(--pink-soft);

    font-family: var(--font-sans);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.22em;
}

.details-card__coming-soon p {
    max-width: 520px;

    margin: 0.65rem 0 0;

    color: var(--text-muted);

    font-family: var(--font-sans);
    font-size: 0.68rem;
    line-height: 1.8;
    letter-spacing: 0.025em;
}


/* ============================================================
   HOVER
   ============================================================ */

.details-card {
    transition:
        border-color 400ms var(--ease-soft);
}

.details-card:hover {
    border-top-color:
        rgba(182, 154, 98, 0.4);
}

.details-card:last-child:hover {
    border-bottom-color:
        rgba(182, 154, 98, 0.4);
}


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

@media (max-width: 640px) {

    .details-hero {
        padding:
            6rem 1.25rem
            4.5rem;
    }

    .details-hero__title {
        font-size: clamp(1.9rem, 9vw, 2.7rem);
    }

    .details-hero__intro {
        font-size: 0.68rem;
        line-height: 1.8;
    }

    .details-content {
        padding:
            0 1.25rem
            5rem;
    }

    .details-card {
        grid-template-columns: 2rem 1fr;
        gap: 1rem;

        padding:
            2.5rem 0;
    }

    .details-card__number {
        font-size: 0.58rem;
    }

    .details-card__title {
        font-size: 1.3rem;
    }

    .details-card__content {
        margin-top: 1.4rem;
        font-size: 0.68rem;
    }

    .details-card__coming-soon {
        margin-top: 1.4rem;
    }

    .details-card__coming-soon p {
        font-size: 0.64rem;
    }
}