/* ==========================================================================
   BOOK PAGE
   Page-specific adjustments only.
   Shared cards, tags, buttons and grids come from common.css.
   ========================================================================== */


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

.inner-hero::before {
    background-image: url("../img/book1-banner.png");
}


/* ==========================================================================
   BOOK OPTIONS
   ========================================================================== */

.book-page>.tag+p,
.book-page>p {
    font-size: 15px;
    line-height: 1.75;
}

.book-next-steps {
    margin-top: 34px;
}

.book-page .ui-card {
    min-height: 260px;
}

.book-page .ui-card h3 {
    font-size: 30px;
}

.book-page .ui-card p {
    font-size: 14px;
}

.book-page-actions {
    gap: 12px;
}


/* ==========================================================================
   MOBILE PORTRAIT HERO
   ========================================================================== */

@media (max-width: 620px) {
    .inner-hero {
        min-height: 100svh;
        padding-bottom: 0;
        background: #9f6f4f;
    }

    .inner-hero::before {
        background-image: url("../img/book4-banner.png");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;

        filter:
            saturate(.96) contrast(.96) brightness(.98);
    }

    /*
     * A very light warm diffusion over the image,
     * followed by quiet support behind the title.
     */
    .inner-hero::after {
        background:
            linear-gradient(180deg,
                rgba(255, 247, 232, .10) 0%,
                rgba(255, 244, 226, .08) 48%,
                rgba(255, 241, 220, .04) 72%,
                rgba(255, 241, 220, 0) 82%),
            linear-gradient(180deg,
                rgba(45, 27, 18, 0) 58%,
                rgba(45, 27, 18, .10) 76%,
                rgba(38, 22, 15, .38) 100%);
    }

    .inner-hero-content {
        min-height: calc(100svh - 84px);
        display: grid;
        align-items: end;
        padding: 90px 0 22px;
    }

    .inner-hero-content>div {
        max-width: 315px;
    }

    .inner-title {
        max-width: 310px;
        margin: 0 0 8px;

        font-size: clamp(36px, 10.8vw, 43px);
        line-height: .94;
        letter-spacing: -.04em;

        text-shadow:
            0 2px 9px rgba(33, 18, 11, .44),
            0 14px 34px rgba(33, 18, 11, .24);
    }

    .inner-divider {
        display: none;
    }

    .inner-intro {
        max-width: 285px;
        margin: 0;

        font-size: 14px;
        line-height: 1.55;

        text-shadow:
            0 2px 8px rgba(33, 18, 11, .48);
    }

    .book-page .ui-card {
        min-height: 230px;
    }

    .book-page .ui-card h3 {
        font-size: 28px;
    }
}


/* ==========================================================================
   NARROW PHONES
   ========================================================================== */

@media (max-width: 520px) {
    .book-page-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .book-page-actions .btn {
        width: 100%;
    }
}