/*
|--------------------------------------------------------------------------
| Home Page (templates/home.php)
|--------------------------------------------------------------------------
|
| Page-specific styling for the Home page's `.yo-home` scope — hero
| illustration/icons/sparkle animation, award-spotlight and category-chip
| cards, promo banner, horizontal slider. Shared tokens/utilities live in
| design-tokens.css instead; both load together via $pageStylesMap in
| includes/layouts/header.php.
|--------------------------------------------------------------------------
*/

.yo-home {
    --yo-navy-dark: #0F172A;
    --yo-navy-surface: #1E293B;
    --yo-gold: #D97706;
    --yo-gold-light: #FEF3C7;
    --yo-amber: #F59E0B;
    --yo-bronze: #EA580C;
    --yo-bg-subtle: #F1F5F9;
    --yo-border-subtle: #E2E8F0;
    --yo-border-strong: #CBD5E1;
    --yo-text-primary: #0F172A;
    --yo-text-muted: #64748B;

    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    color: var(--yo-text-primary);
}

.yo-home h1,
.yo-home h2,
.yo-home h3,
.yo-home .yo-serif {
    font-family: 'Source Serif 4', Georgia, serif;
}

/*
 * The site's shared stylesheet has a generic `section, .section`
 * rule that paints every <section> element with a background
 * color and 30px 0 padding (visible in devtools on the plain
 * <section> wrapper around each block below — Hero, Browse
 * Categories, Explore Latest Awards, etc.). That's a sitewide
 * default meant for other templates, not this page's own design,
 * so both are overridden here rather than edited at the source
 * (that stylesheet is shared by every other page) — background
 * cleared entirely, padding tightened to 18px 0. Cards inside
 * each section (.yo-card, .yo-hero, .yo-mini-card, .yo-promo,
 * .yo-slide-card) keep their own explicit backgrounds/spacing —
 * only the plain <section> wrapper's inherited styles are
 * touched.
 */
.yo-home > section {
    background: transparent !important;
    padding: 18px 0 !important;
}

.yo-btn-navy:active {
    transform: scale(.97);
}

/*
 * Compact "more latest awards" row card, used just below the main
 * 4-column spotlight grid in Explore Latest Awards & Prizes — a
 * thumbnail + title/category/date + chevron, so a few more of the
 * newest awards can surface without the vertical weight of a full
 * spotlight card each. The thumbnail sits flush against the
 * card's top/left/bottom edges (no padding around the image) —
 * only the text side gets breathing room — so `overflow: hidden`
 * on the card itself is what keeps the flush image's square
 * corners from poking past the card's own rounded corners,
 * instead of rounding the image separately.
 */
.yo-mini-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--yo-border-subtle);
    border-radius: 1rem;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}

.yo-mini-card:hover {
    border-color: var(--yo-gold);
    box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .2);
}

.yo-mini-thumb {
    width: 96px;
    flex-shrink: 0;
    background: var(--yo-bg-subtle);
    align-self: stretch;
}

/* The hero keeps its own card look (Bootstrap's .border utility,
   applied directly on the element in the markup below) — only the
   plain <section> WRAPPING it (and every other section on the
   page) had its inherited sitewide background stripped, above.
   Background is a very light warm tint (#fff8f6) rather than
   Bootstrap's .bg-white utility now, set here instead of via a
   markup class so it can't be beaten by .bg-white's !important. */
.yo-hero {
    position: relative;
    border-radius: 1.75rem;
    background: #fff8f6;
}

/*
 * Decorative award-icon wash filling the ENTIRE .yo-hero
 * background — a scalloped rosette medal with a center star and
 * two ribbon tails (the same silhouette as the brand's award
 * artwork, not the earlier plain diamond-and-circle glyph),
 * scattered via <use> at different spots/sizes/rotations, plus a
 * few small sparkle accents between them. Everything is filled
 * from one very light gradient/tint built off the site's #EA580C
 * bronze token — lighter than the first pass of this treatment —
 * so it reads as soft background texture rather than a competing
 * graphic. Sits behind the text (z-index: 0) — the text column
 * below gets z-index: 1 so it's never obscured.
 *
 * overflow: hidden + a matching border-radius live HERE (on the
 * decorative layer itself) rather than on .yo-hero — the SVG's own
 * rectangular box would otherwise show square corners poking past
 * .yo-hero's rounded ones. .yo-hero itself used to carry
 * `overflow: hidden` for exactly that reason, but that also clipped
 * anything else absolutely positioned inside it — including the
 * live-search results dropdown (includes/partials/search-form.php),
 * which rendered inside .yo-hero and needs to overflow BELOW it.
 * The SVG already clips its own <use> icons to its viewBox by
 * default (the UA stylesheet's overflow: hidden on root <svg>), so
 * this scoped rule is all that was ever needed for the rounded-
 * corner look.
 */
.yo-hero-icons {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.yo-hero-icons svg {
    width: 100%;
    height: 100%;
}

.yo-hero-icon {
    transform-box: fill-box;
    transform-origin: center;
    animation: yo-hero-icon-float 6s ease-in-out infinite;
}

.yo-hero-icon--2 { animation-duration: 7s; animation-delay: .6s; }
.yo-hero-icon--3 { animation-duration: 5.5s; animation-delay: 1.2s; }
.yo-hero-icon--4 { animation-duration: 8s; animation-delay: .3s; }
.yo-hero-icon--5 { animation-duration: 6.5s; animation-delay: 1.6s; }
.yo-hero-icon--6 { animation-duration: 7.5s; animation-delay: .9s; }

@keyframes yo-hero-icon-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(4deg); }
}

.yo-hero-sparkle {
    transform-box: fill-box;
    transform-origin: center;
    animation: yo-hero-sparkle-twinkle 3s ease-in-out infinite;
}

.yo-hero-sparkle--2 { animation-duration: 3.6s; animation-delay: .4s; }
.yo-hero-sparkle--3 { animation-duration: 2.6s; animation-delay: .9s; }
.yo-hero-sparkle--4 { animation-duration: 3.2s; animation-delay: 1.3s; }

@keyframes yo-hero-sparkle-twinkle {
    0%, 100% { opacity: .15; transform: scale(.85); }
    50%      { opacity: .55; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .yo-hero-icon,
    .yo-hero-sparkle {
        animation: none;
    }
}

.yo-chip {
    border: 1px solid var(--yo-border-subtle);
    border-radius: 1.25rem;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.yo-chip:hover {
    border-color: var(--yo-gold);
    box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .25);
}

.yo-chip-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f75815;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.yo-spotlight-media {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.yo-spotlight-media img {
    transition: transform .4s;
}

.yo-card:hover .yo-spotlight-media img {
    transform: scale(1.06);
}

.yo-spotlight-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, .75), rgba(15, 23, 42, .05) 55%, transparent);
}

.yo-promo {
    background: var(--yo-navy-dark);
    border-radius: 1.75rem;
    position: relative;
    overflow: hidden;
}

.yo-promo-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(217, 119, 6, .25);
    filter: blur(70px);
    top: -90px;
    right: -90px;
    pointer-events: none;
}

/*
 * Sized so exactly 4 cards fill the track's own width on desktop
 * (3 gaps of the track's gap-4 / 1.5rem, divided out of 100%) —
 * the rest scroll into view via the prev/next buttons instead of
 * a 5th card peeking in at the edge. min-width is the floor for
 * narrow/mobile viewports, where showing fewer, more legible
 * cards at a time and scrolling more is the right tradeoff.
 */
.yo-slide-card {
    width: calc((100% - (3 * 1.5rem)) / 4);
    min-width: 220px;
    max-width: 300px;
    height: 520px;
    border-radius: 1.5rem;
    overflow: hidden;
    position: relative;
    background: var(--yo-navy-dark);
    flex-shrink: 0;
    scroll-snap-align: start;
}

/*
 * Mobile: one full card in view at a time instead of the 1.5-card
 * peek the desktop sizing above produces on narrow viewports —
 * the peeking edge read as an unfinished layout rather than an
 * intentional "swipe for more" affordance.
 */
@media (max-width: 767.98px) {
    .yo-slide-card {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

/*
 * width/height/object-fit carry !important as a local guard: this
 * block is scoped to .yo-home, but an <img> is also a common
 * target for a site-wide global reset (e.g. img{max-width:100%;
 * height:auto}) that could otherwise win by load order and let
 * the photo distort/stretch to fill the taller 520px card instead
 * of being cropped to it.
 */
.yo-slide-card img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    transition: transform .4s;
}

.yo-slide-card:hover img {
    transform: scale(1.06);
}

.yo-slide-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, .95), rgba(15, 23, 42, .35) 55%, transparent);
}

.yo-slide-body {
    position: relative;
    z-index: 1;
    color: #fff;
    padding: 1.1rem;
}

.yo-scroll-track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.yo-scroll-track::-webkit-scrollbar {
    display: none;
}

.yo-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--yo-border-subtle);
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, border-color .2s;
}

.yo-nav-btn:hover {
    background: var(--yo-gold-light);
    color: var(--yo-gold);
    border-color: var(--yo-gold);
}

/*
 * Compact "dot" pair used to move the prev/next controls below
 * the card on mobile (see the header nav-btn wrapper's d-lg-flex
 * and this row's d-lg-none below) -- smaller and closer together
 * than the desktop .yo-nav-btn pair so the two read as a single
 * small pagination-style control under the card rather than a
 * second full-size button row.
 */
.yo-nav-btn-dot {
    width: 30px;
    height: 30px;
    font-size: .75rem;
}