/*
|--------------------------------------------------------------------------
| Segment Page (templates/segment.php)
|--------------------------------------------------------------------------
|
| Page-specific styling for the Segment page's `.yo-segment` scope —
| mirrors award.php's own layout rule-for-rule (same shared partials:
| award-records.php/award-chart.php/award-faq.php/segment-sidebar.php)
| so a visitor moving between an Award page and its Segment pages sees
| one consistent design system. Shared tokens/utilities live in
| design-tokens.css instead; both load together via $pageStylesMap in
| includes/layouts/header.php.
|--------------------------------------------------------------------------
*/

.yo-segment {
    --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-segment h1,
.yo-segment h2,
.yo-segment h3,
.yo-segment .yo-serif {
    font-family: 'Source Serif 4', Georgia, serif;
    color: var(--yo-navy-dark);
}

.yo-segment section,
.yo-segment .bg-light {
    background: transparent !important;
}

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

.yo-segment nav.mb-4 {
    margin-bottom: 0 !important;
}

/*
 * The large hero photo, same treatment as award.php's own
 * .yo-award-hero-media.
 */
.yo-segment-hero-media {
    position: relative;
    height: clamp(220px, 32vw, 420px);
    overflow: hidden;
    border-radius: 1.25rem;
}

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

.yo-segment-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, bottom-left of the
   hero photo — same treatment as award.php's own
   .yo-award-hero-bottom-stack / .yo-award-hero-meta / .yo-hero-meta-item
   (unscoped token classes, like .yo-badge). */
.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 treatment as
       award.php's own — and its own Quick Links row further down. */
    .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 and scrolls its own content — same as award.php's own
   .yo-award-quick-info. */
@media (min-width: 992px) {
    .yo-segment-quick-info {
        height: clamp(220px, 32vw, 420px);
        display: flex;
        flex-direction: column;
    }

    .yo-segment-quick-info .table-responsive {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
    }
}

/* =====================================================
   SIDEBAR (includes/partials/segment-sidebar.php) —
   identical override set to award.php's own sidebar.php
   pass: same shared partials (award-card-horizontal.php
   "stacked", category-card.php "sidebar", card-segment.php
   "sidebar"), same plain Bootstrap .card default softened
   to the yo-card language.
===================================================== */

.yo-segment .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;
}

.yo-segment .card,
.yo-segment 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-segment .card:hover,
.yo-segment article.border:hover {
    border-color: var(--yo-gold) !important;
    box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .2);
}

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

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

.yo-segment .row-cols-2 > .col {
    margin-bottom: .25rem;
}

/* =====================================================
   MAIN CONTENT — records table (award-records.php) +
   chart (award-chart.php) — identical pass to award.php's
   own MAIN CONTENT section.
===================================================== */

.yo-segment .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-segment .table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

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

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

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

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

.yo-segment .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-segment .table-light > * {
    background-color: #fff !important;
}

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

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

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

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

/* Winner photo — a circular avatar, 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. */
.yo-segment .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-segment .responsive-table .yo-award-avatar + .yo-award-avatar {
    margin-left: .35rem;
}

.yo-segment .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-segment .responsive-table .yo-award-avatar {
        width: 40px;
        height: 40px;
    }
}

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

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

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

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

/* =====================================================
   FAQ ACCORDION (award-faq.php) — identical pass to
   award.php's own FAQ section (rendered here only when
   $faqs is non-empty).
===================================================== */

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

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

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

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

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

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

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