/* Home page editorial polish — loaded only by Views/Home/Index.cshtml.
   Keeps legacy brand classes (text-grobold, text-populaire, text-dough) intact. */

/* ============================================================
   Hero
   ============================================================ */

.home-hero .hero-display {
    font-size: clamp(3.5rem, 11vw, 7.5rem);
    line-height: 0.95;
    letter-spacing: -0.015em;
    margin-bottom: var(--sp-5);
}

.home-hero .hero-lede {
    max-width: 55ch;
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: color-mix(in oklch, var(--cream) 92%, transparent);
}

.home-hero .hero-image {
    transition: transform var(--dur-slow) var(--ease-out);
    will-change: transform;
}

.home-hero:hover .hero-image,
.home-hero .hero-image:hover {
    transform: translateY(-8px) rotate(-1.5deg);
}

/* ============================================================
   Testimonials — card treatment with ember accent
   ============================================================ */

#testimonials .testimonial-block {
    background: color-mix(in oklch, var(--ink) 88%, var(--stone));
    padding: var(--sp-6);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--ember);
    height: 100%;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

#testimonials .testimonial-block:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

#testimonials .testimonial-block > i {
    margin-bottom: var(--sp-3);
}

#testimonials .testimonial-block > p:first-of-type strong {
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: var(--fs-sm);
    color: var(--ember);
}

#testimonials .testimonial-info p {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
}

/* One testimonial at a time, matching original Owl behavior.
   Inner card is centered and capped for readability. */
#testimonials .scroller {
    padding: var(--sp-2) 0 var(--sp-4);
    gap: 0;
}

#testimonials .scroller > .item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    justify-content: center;
    padding-inline: var(--sp-3);
}

#testimonials .scroller > .item > .testimonial-block {
    width: 100%;
    max-width: 820px;
}