/* ===========================================================================
   Homepage hero banner
   ---------------------------------------------------------------------------
   Loaded only by templates/pages/home_v2.html, after index.min.css.

   The two slides are photographs: a bright wooden reading room and a dark
   blue forest. White body text over the first one failed contrast badly, so
   the scrim is strengthened here rather than in index.css (which is minified
   and shared).
   =========================================================================== */

.hero-slide .hero-overlay {
    background: linear-gradient(
        to top,
        rgba(8, 10, 14, .88) 0%,
        rgba(8, 10, 14, .62) 38%,
        rgba(8, 10, 14, .18) 72%,
        rgba(8, 10, 14, 0) 100%
    );
    padding: 40px 50px 52px;
}

.hero-slide .text-content {
    max-width: min(660px, 92%);
}

.hero-slide .text-content h2 {
    font-family: "Inter Tight", "Inter", system-ui, sans-serif;
    font-size: clamp(21px, 2.4vw, 32px);
    line-height: 1.16;
    letter-spacing: -.012em;
    margin-bottom: 8px;
    color: #ffffff;
    text-wrap: balance;
    /* The reading-room photo is bright behind the headline; the scrim alone is
       not enough at every viewport width. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.hero-slide .text-content p {
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.5;
    color: #f0ede6;
    max-width: 58ch;
    margin-bottom: 18px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* Call to action — a slide with no destination is a wasted banner. */
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: #ffffff;
    color: #0f1115;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}

.hero-cta:hover,
.hero-cta:focus-visible {
    background: #e7e9ec;
    color: #0f1115;
    text-decoration: none;
    transform: translateY(-1px);
}

.hero-cta svg {
    transition: transform .18s ease;
}

.hero-cta:hover svg {
    transform: translateX(3px);
}

@media (max-width: 767px) {
    .hero-slide .hero-overlay {
        padding: 20px 18px 40px;
    }

    .hero-slide .text-content {
        max-width: 100%;
    }

    .hero-slide .text-content h2 {
        font-size: 19px;
    }

    .hero-slide .text-content p {
        font-size: 12.5px;
        margin-bottom: 12px;
    }

    .hero-cta {
        padding: 9px 16px;
        font-size: 13px;
    }

    /* Keep the dots clear of the call to action. */
    .hero-swiper .swiper-pagination {
        bottom: 10px;
        right: 16px;
    }
}