/*
|--------------------------------------------------------------------------
| Award Page (templates/award.php)
|--------------------------------------------------------------------------
|
| Page-specific styling for the Award page's `.yo-award` scope — hero
| photo, quick info panel, sidebar widgets, winners table/accordion
| overrides for the shared award-records.php/award-chart.php/award-faq.php
| partials. Shared tokens and cross-page utility classes (.yo-badge,
| .yo-card, .yo-quick-link, etc.) live in design-tokens.css instead;
| both load together via $pageStylesMap in includes/layouts/header.php.
|--------------------------------------------------------------------------
*/

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

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

.yo-award h1,
.yo-award h2,
.yo-award h3,
.yo-award .yo-serif {
    font-family: 'Source Serif 4', Georgia, serif;
    color: var(--yo-navy-dark);
}

/*
 * award-records.php/segment-cards.php/award-chart.php/award-faq.php
 * each wrap themselves in a section or plain wrapper element — the
 * site's shared stylesheet paints every plain section AND every
 * .bg-light element with its own background/padding, meant for
 * other (non-redesigned) templates. Both neutralized here rather
 * than at the source (shared by every other page). Descendant
 * selectors, not direct-child like Home/Category used, since these
 * partials sit several levels deep inside this page's own layout.
 */
.yo-award section,
.yo-award .bg-light {
    background: transparent !important;
}

.yo-award section {
    padding: 18px 0 !important;
}

/*
 * includes/partials/breadcrumb.php's own <nav> always carries
 * mb-4 (shared by every template, not edited directly here) — on
 * this page specifically, the extra bottom margin is dropped so
 * the breadcrumb sits closer to the heading right below it.
 */
.yo-award nav.mb-4 {
    margin-bottom: 0 !important;
}

    /*
 * The large hero photo — the one visual element unique to an
 * individual award page (category pages have no equivalent).
 * Responsive height instead of a fixed one so it scales down
 * gracefully on narrow viewports rather than cropping heavily.
 */
.yo-award-hero-media {
    position: relative;
    height: clamp(220px, 32vw, 420px);
    overflow: hidden;
    border-radius: 1.25rem;
}

.yo-award-hero-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

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

/* Rating stars + publish/updated/read-time strip, both overlaid
   bottom-left on the hero photo, stacked (rating row above the meta
   row) in one flex-column wrapper — see .yo-award-hero-bottom-stack
   in templates/award.php and segment.php. Sits inside the ::after
   gradient above, so plain white text reads clearly without its own
   extra background — see .yo-rating-widget--overlay (assets/css/
   rating.css) for the rating row's matching treatment. */
.yo-award-hero-bottom-stack {
    max-width: calc(100% - 2rem);
}

.yo-award-hero-meta {
    max-width: 100%;
}

.yo-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
    font-size: .78rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    white-space: nowrap;
}

.yo-hero-meta-item i {
    color: var(--yo-gold-light);
    font-size: .85rem;
}

@media (max-width: 576px) {
    .yo-hero-meta-item {
        font-size: .72rem;
    }

    /* On phone widths the three items (Published/Updated/read
       time) no longer wrap onto a second line over the hero photo
       — instead the strip scrolls horizontally, same touch-scroll
       treatment as the Quick Links row further down this page. */
    .yo-award-hero-meta {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .yo-award-hero-meta::-webkit-scrollbar {
        display: none;
    }
}

/*
 * Quick Information matches the hero photo's own height on desktop
 * (same clamp() as .yo-award-hero-media, so the two columns line
 * up edge to edge) and scrolls its own content — the inner
 * .table-responsive, not the card itself, so the card's rounded
 * corners still clip cleanly — instead of growing taller than the
 * image when an award has a lot of fields. Scoped to the >=992px
 * breakpoint where the two actually sit side by side (col-lg-8/
 * col-lg-4) — on mobile, where they stack, Quick Information is
 * left to size naturally rather than being cropped into an
 * unnecessary scroll box.
 */
@media (min-width: 992px) {
    .yo-award-quick-info {
        height: clamp(220px, 32vw, 420px);
        display: flex;
        flex-direction: column;
    }

    .yo-award-quick-info .table-responsive {
        flex: 1 1 auto;
        min-height: 0;
        /*
         * !important: the general .yo-award .table-responsive rule
         * further down (winners table styling) sets a plain
         * `overflow: hidden` at equal selector specificity — this
         * narrow override needs to win regardless of the two
         * rules' order in the stylesheet.
         */
        overflow-y: auto !important;
    }
}

/* =====================================================
   SIDEBAR (includes/partials/sidebar.php) — restyled to
   match Category's own yo-mini-card / yo-chip language
   instead of the plain Bootstrap .card each widget's
   shared partial (award-card-horizontal.php "stacked"
   layout, category-card.php "sidebar" variant) renders
   by default elsewhere on the site.
===================================================== */

/* "widget-title" is a plain <small>/<h3> in the shared
   partial — restyled here to read like this page's own
   section headings instead of a generic label. */
.yo-award .widget-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 700;
    color: var(--yo-navy-dark);
    font-size: 1.05rem;
    text-transform: none;
    letter-spacing: normal;
    display: block;
    margin-bottom: .75rem;
}

/* award-card-horizontal.php's "stacked" article + category-
   card.php's "sidebar" .card — both plain bordered Bootstrap
   cards by default, softened to the same yo-card treatment. */
.yo-award .card,
.yo-award article.border {
    border-color: var(--yo-border-subtle) !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
    transition: box-shadow .2s, border-color .2s;
}

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

.yo-award article.border img {
    border-radius: .65rem !important;
}

.yo-award .card .text-danger {
    color: var(--yo-gold) !important;
}

/* category-card.php's circular category-chip avatar keeps its
   own inline orange background; this just tightens its row
   spacing to match Category page's chip grid gap. */
.yo-award .row-cols-2 > .col {
    margin-bottom: .25rem;
}

/* =====================================================
   MAIN CONTENT — winners table (award-records.php /
   segment-cards.php) + chart (award-chart.php)

   Full visual pass on award-records.php's own markup, all via
   scoped overrides (that shared partial is reused by
   templates/segment.php too, so its HTML itself isn't touched —
   same discipline as every other shared partial on this page):
   a card-like scrollable wrapper with a custom scrollbar, a
   sticky label row, pill-styled filter inputs, circular winner-
   photo avatars in place of the old square thumbnails, tidier
   row padding/borders, gold-accented "Also won" links, and a
   pill Load More button matching .yo-btn-navy.
===================================================== */

.yo-award .table-responsive {
    border-color: var(--yo-border-subtle) !important;
    border-radius: 1.25rem;
    overflow: auto;
    box-shadow: 0 12px 28px -20px rgba(15, 23, 42, .18);
    scrollbar-width: thin;
    scrollbar-color: var(--yo-border-subtle) var(--yo-bg-subtle);
}

.yo-award .table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.yo-award .table-responsive::-webkit-scrollbar-track {
    background: var(--yo-bg-subtle);
}

.yo-award .table-responsive::-webkit-scrollbar-thumb {
    background: var(--yo-border-subtle);
    border-radius: 999px;
}

.yo-award .table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--yo-gold);
}

.yo-award .responsive-table {
    --bs-table-border-color: var(--yo-border-subtle);
    font-size: .92rem;
}

.yo-award .responsive-table > :not(caption) > * > * {
    padding: .85rem 1rem;
}

.yo-award thead.table-light,
.yo-award .table > thead {
    background: var(--yo-bg-subtle) !important;
}

.yo-award .table-active > * {
    background-color: var(--yo-bg-subtle) !important;
    color: var(--yo-navy-dark) !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 2;
}

.yo-award .table-light > * {
    background-color: #fff !important;
}

.yo-award .column-filter {
    border-radius: 999px;
    border-color: var(--yo-border-subtle);
    font-size: .8rem;
    padding: .35rem .85rem;
}

.yo-award .column-filter:focus {
    border-color: var(--yo-gold);
    box-shadow: 0 0 0 .2rem var(--yo-gold-light);
}

.yo-award .table-hover > tbody > tr:hover > * {
    background-color: var(--yo-gold-light) !important;
}

.yo-award .award-row.block-row > td {
    background-color: var(--yo-bg-subtle);
    color: var(--yo-text-muted);
    font-size: .85rem;
}

/* Winner photo — a circular avatar (matching the site's other
   avatar treatments: Home's chip row, Category's overview icon)
   in place of the old flat square thumbnail, and shrunk slightly
   so it reads as a table-row avatar rather than a card image.
   Sized on a fixed wrapper <span> (not the <img> itself) so the
   circle stays uniform no matter each source photo's own
   dimensions/aspect ratio — the img is forced to fill the
   wrapper via object-fit rather than fighting its own inline
   width/height attributes with !important overrides. */
.yo-award .responsive-table .yo-award-avatar {
    display: inline-block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--yo-border-subtle);
    background: var(--yo-bg-subtle);
    vertical-align: middle;
    flex: 0 0 auto;
}

.yo-award .responsive-table .yo-award-avatar + .yo-award-avatar {
    margin-left: .35rem;
}

.yo-award .responsive-table .yo-award-avatar img.rounded-1 {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    display: block;
}

@media (max-width: 576px) {
    .yo-award .responsive-table .yo-award-avatar {
        width: 40px;
        height: 40px;
    }
}

.yo-award .responsive-table .text-muted a {
    color: var(--yo-text-muted);
    text-decoration: none;
    border-bottom: 1px dashed var(--yo-border-subtle);
}

.yo-award .responsive-table .text-muted a:hover {
    color: var(--yo-gold);
    border-color: var(--yo-gold);
}

.yo-award #loadMoreBtn {
    border-radius: 999px !important;
    font-weight: 600;
    padding: .6rem 1.75rem;
    transition: background .2s, transform .15s;
}

.yo-award #loadMoreBtn:hover {
    background-color: #d9490c !important;
}

/* =====================================================
   SEGMENT CARDS (segment-cards.php / card-segment.php's
   'grid' variant, only ever rendered from this page) —
   horizontal listing-card layout, shortened: a slimmer
   image column with a save-toggle pinned to its top-left
   corner, a compact content column (title, smaller overview
   snippet, reward stat line), and a plain muted
   view-details arrow tucked into the column's bottom-right
   corner instead of a bordered top-right button. No more
   Award For badge/divider row, so the card sits noticeably
   shorter than the first pass.
===================================================== */

/* =====================================================
   FAQ ACCORDION (award-faq.php) — full visual match with
   the rest of the page's card/eyebrow language, not just
   a color swap: spaced-out rounded items instead of the
   default flush Bootstrap accordion stack.
===================================================== */

.yo-award .accordion-item {
    border: 1px solid var(--yo-border-subtle) !important;
    border-radius: 1rem !important;
    overflow: hidden;
    margin-bottom: .75rem;
}

.yo-award .accordion-item:last-child {
    margin-bottom: 0;
}

.yo-award .accordion-button {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 700;
    font-size: .95rem;
    color: var(--yo-navy-dark);
}

.yo-award .accordion-button:not(.collapsed) {
    background-color: var(--yo-gold-light);
    color: var(--yo-gold);
    box-shadow: none;
}

.yo-award .accordion-button:focus {
    box-shadow: none;
    border-color: var(--yo-border-subtle);
}

.yo-award .accordion-button::after {
    filter: sepia(60%) saturate(400%) hue-rotate(345deg) brightness(.9);
}

.yo-award .accordion-body {
    font-size: .9rem;
    color: var(--yo-text-muted);
}