/* ==========================================================================
   Championship homepage (/championship) — self-contained stylesheet.
   Fixed dark navy + gold "broadcast" design, no shared tokens with the rest
   of the site, no light/dark theme toggle (deliberate — see plan).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@font-face {
    font-family: 'Klavika Condensed';
    src: url('/font/Klavika%20Web%20Bold%20Condensed.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --cc-navy: #060d1a;
    --cc-navy-raised: #0e1a30;
    --cc-navy-border: rgba(255, 255, 255, 0.1);
    --cc-gold: #c9a227;
    --cc-gold-bright: #e8c547;
    --cc-green: #16c98d;
    --cc-green-ink: #04150f;
    --cc-white: #ffffff;
    --cc-off-white: #f4f5f7;
    --cc-ink: #ffffff;
    --cc-ink-muted: #9aa8c0;
    --cc-text: #10151f;
    --cc-text-muted: #566178;
    --cc-border-light: rgba(10, 22, 40, 0.1);
    --cc-under: #d13a3a;
    --cc-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Light theme — toggled via [data-theme="light"] on <html> (see theme-init.js,
   shared with the rest of the site). Only the flat-surface tokens flip; text
   sitting directly on hero/course photos uses --cc-white, which stays fixed,
   since a dark scrim under it is always present regardless of site theme. */
:root[data-theme="light"] {
    --cc-navy: #f3f4f7;
    --cc-navy-raised: #e6e8ed;
    --cc-navy-border: rgba(10, 22, 40, 0.12);
    --cc-ink: #10151f;
    --cc-ink-muted: #566178;
    --cc-shadow: 0 20px 50px rgba(10, 22, 40, 0.12);
}

* { box-sizing: border-box; }

/* Page canvas — theme-aware (dark navy in dark mode, light in light mode)
   so every content section actually darkens in dark mode, not just the
   hero/header/footer. The white "card" widgets (.cc-pgti-widget, gallery
   items, video cards, sponsor tiles) keep their own fixed-light background
   deliberately — they float on this canvas rather than going dark
   themselves, since their contents (photos, logos, arbitrary text) were
   built assuming a light backdrop. */
.cc-body {
    margin: 0;
    background: var(--cc-navy);
    color: var(--cc-ink);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.cc-body img { max-width: 100%; display: block; }

.cc-shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cc-btn-gold {
    background: var(--cc-gold);
    color: var(--cc-text);
}

.cc-btn-gold:hover { background: var(--cc-gold-bright); }

.cc-btn-outline {
    background: transparent;
    color: var(--cc-ink);
    border-color: rgba(255, 255, 255, 0.4);
}

.cc-btn-outline:hover { border-color: var(--cc-ink); }

.cc-tag {
    display: inline-block;
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cc-gold);
    margin-bottom: 0.6rem;
}

/* ==========================================================================
   Header
   ========================================================================== */

.cc-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cc-navy);
    border-bottom: 3px solid var(--cc-gold);
}

.cc-header.is-scrolled {
    box-shadow: var(--cc-shadow);
}

.cc-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.6rem 1.5rem;
    min-height: 68px;
}

.cc-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    min-width: 0;
    flex-shrink: 0;
}

.cc-brand-logo { height: 58px; width: auto; }

.cc-brand-title {
    display: block;
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cc-ink);
}

.cc-brand-sub {
    display: block;
    font-size: 0.85rem;
    color: var(--cc-ink-muted);
}

.cc-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: auto;
}

.cc-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--cc-ink-muted);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.cc-nav-link:hover,
.cc-nav-link.active { color: var(--cc-gold); }

.nav-caret { transition: transform 0.2s ease; opacity: 0.7; }

.nav-item-dropdown { position: relative; }

.nav-item-dropdown.open .nav-caret,
.nav-item-dropdown:hover .nav-caret { transform: rotate(180deg); }

.cc-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    min-width: 190px;
    background: var(--cc-navy-raised);
    border: 1px solid var(--cc-navy-border);
    border-top: 2px solid var(--cc-gold);
    box-shadow: var(--cc-shadow);
    padding: 0.4rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 60;
}

.nav-item-dropdown:hover .cc-nav-dropdown-menu,
.nav-item-dropdown:focus-within .cc-nav-dropdown-menu,
.nav-item-dropdown.open .cc-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cc-dropdown-link {
    display: block;
    padding: 0.6rem 1.1rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--cc-ink-muted);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.cc-dropdown-link:hover,
.cc-dropdown-link.active {
    color: var(--cc-gold);
    background: rgba(201, 162, 39, 0.08);
}

.cc-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cc-theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--cc-navy-raised);
    border: 1px solid var(--cc-navy-border);
    color: var(--cc-ink-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.cc-theme-toggle-btn:hover { color: var(--cc-green); border-color: var(--cc-green); }

.cc-theme-toggle-btn .icon-moon { display: none; }
:root[data-theme="light"] .cc-theme-toggle-btn .icon-sun { display: none; }
:root[data-theme="light"] .cc-theme-toggle-btn .icon-moon { display: block; }

.cc-nav-cta { padding: 0.6rem 1.1rem; font-size: 0.78rem; }

.cc-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--cc-navy-border);
    cursor: pointer;
}

.cc-burger .burger-bar {
    display: block;
    height: 2px;
    width: 18px;
    margin: 0 auto;
    background: var(--cc-ink);
}

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

.cc-hero {
    position: relative;
    background: var(--cc-navy);
}

.cc-hero-container {
    display: flex;
    width: 100%;
    height: 70vh;
    min-height: 520px;
    overflow: hidden;
    background: #060d1a;
}

.cc-hero-slider-wrap {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.cc-hero-full-width .cc-hero-slider {
    position: relative;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
}

.cc-hero-full-width .cc-hero-slide {
    position: absolute;
    inset: 0;
    display: none;
    height: 100%;
}

.cc-hero-full-width .cc-hero-slide.active {
    display: block;
}

.cc-hero-full-width .cc-hero-slide-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--cc-navy);
    z-index: 1;
}

.cc-hero-full-width .cc-hero-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: cc-image-zoom 10s ease-in-out infinite alternate;
}

.cc-hero-full-width .cc-hero-slide-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--cc-navy);
}

/* Left-weighted dark scrim on every slide — now that the text column sits on
   the left instead of being centered, it needs contrast against whatever's
   behind it (sky, buildings, footage), fading out toward the right so the
   photo/video still reads clearly there. Uses ::after (not ::before, which
   is deliberately disabled below) so it layers above the image/video but
   under both the crest badge (z-index 4) and the text (z-index 3). */
.cc-hero-full-width .cc-hero-slide-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(6, 13, 26, 0.75) 0%, rgba(6, 13, 26, 0.35) 45%, rgba(6, 13, 26, 0.05) 75%);
    z-index: 2;
    pointer-events: none;
}

/* The video slide's footage moves, so it needs a bit more contrast than a
   still photo does — slightly heavier at every stop. */
.cc-hero-full-width .cc-hero-slide-image-video::after {
    background: linear-gradient(90deg, rgba(6, 13, 26, 0.8) 0%, rgba(6, 13, 26, 0.4) 45%, rgba(6, 13, 26, 0.15) 75%);
}

/* No shadow over slide image */
.cc-hero-full-width .cc-hero-slide-image::before {
    display: none !important;
}

.cc-hero-full-width .cc-hero-slide-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    background: none !important;
    padding: 2rem 3rem 2rem 4rem;
    z-index: 3;
    pointer-events: none;
}

.cc-hero-full-width .cc-hero-slide-content a,
.cc-hero-full-width .cc-hero-slide-content button {
    pointer-events: auto;
}

/* Right Side: Participating Countries Ticker (Translucent Glassmorphism Sidebar) */
.cc-hero-marquee-col {
    width: 120px;
    flex-shrink: 0;
    background: rgba(6, 13, 26, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 1px solid var(--cc-navy-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 5;
    overflow: hidden;
}

.cc-marquee-header {
    background: rgba(6, 13, 26, 0.85);
    color: var(--cc-gold);
    text-align: center;
    padding: 0.85rem 0.25rem;
    border-bottom: 2px solid var(--cc-gold);
    z-index: 10;
}

.cc-marquee-header h3 {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cc-gold) !important;
}

.cc-marquee-scroll-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.cc-marquee-track {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.4rem;
    animation: cc-marquee-vertical 60s linear infinite;
}

.cc-marquee-track:hover {
    animation-play-state: paused;
}

.cc-marquee-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 0.4rem 0.2rem;
    gap: 0.25rem;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc-marquee-item:hover {
    border-color: var(--cc-gold);
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.05);
}

.cc-marquee-flag {
    width: 38px;
    height: 25px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    object-fit: cover;
    border-radius: 2px;
}

.cc-marquee-name {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--cc-white) !important;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95px;
}

@keyframes cc-marquee-vertical {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50%);
    }
}

.cc-hero-full-width .cc-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cc-gold) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    margin-bottom: 0.6rem;
}

/* Ornamental lines flanking the eyebrow text — decoration only, applies to
   every slide's eyebrow without needing per-slide markup. */
.cc-hero-full-width .cc-hero-eyebrow::before,
.cc-hero-full-width .cc-hero-eyebrow::after {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--cc-gold);
    opacity: 0.75;
}

.cc-hero-full-width .cc-hero-headline {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: clamp(2rem, 4.2vw, 3.6rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--cc-white) !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8);
    margin: 0 0 1.8rem;
    max-width: 640px;
    text-align: left;
}

.cc-hero-full-width .cc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: flex-start;
}

/* Motto line under the headline — vertical accent bar + italic quote */
.cc-hero-full-width .cc-hero-quote {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--cc-white);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    margin: 0 0 1.4rem;
}

.cc-hero-full-width .cc-hero-quote-bar {
    width: 3px;
    height: 20px;
    background: var(--cc-gold);
    flex-shrink: 0;
}

/* Secondary quick-link chip row beneath the main CTA */
.cc-hero-full-width .cc-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: flex-start;
    margin-top: 1.4rem;
}

.cc-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: rgba(6, 13, 26, 0.55);
    border: 1px solid var(--cc-navy-border);
    color: var(--cc-white);
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cc-hero-chip:hover {
    background: var(--cc-gold);
    color: var(--cc-text);
    border-color: var(--cc-gold);
}

.cc-hero-chip svg { flex-shrink: 0; }

/* Decorative corner-bracket frame around the whole hero (slider + countries
   ticker) — pure decoration, no interaction, echoes a framed/ceremonial look. */
.cc-hero-frame-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    z-index: 4;
    pointer-events: none;
    opacity: 0.6;
}

.cc-hero-frame-tl { top: 1.5rem; left: 1.5rem; border-top: 2px solid var(--cc-gold); border-left: 2px solid var(--cc-gold); }
.cc-hero-frame-tr { top: 1.5rem; right: 1.5rem; border-top: 2px solid var(--cc-gold); border-right: 2px solid var(--cc-gold); }
.cc-hero-frame-bl { bottom: 1.5rem; left: 1.5rem; border-bottom: 2px solid var(--cc-gold); border-left: 2px solid var(--cc-gold); }
.cc-hero-frame-br { bottom: 1.5rem; right: 1.5rem; border-bottom: 2px solid var(--cc-gold); border-right: 2px solid var(--cc-gold); }

.cc-hero-crest {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.92);
    padding: 0.4rem;
    z-index: 4;
}

.cc-hero-crest img { width: 100%; height: 100%; object-fit: contain; }

/* Fair Play Vote — floating button sitting at the bottom of the hero, just
   left of (i.e. immediately preceding) the .cc-hero-marquee-col "PARTICIPATING
   COUNTRY" ticker column (120px wide — see its rule above). It's a sibling
   of that column, not nested inside it, so it stays visible even under 980px
   where the ticker column is hidden entirely (see the media query below). A
   pulsing glow ring (disabled under prefers-reduced-motion, further down)
   draws the eye to it without needing a permanent label. */
.cc-hero-fairplay-btn {
    position: absolute;
    bottom: 1.5rem;
    right: 136px;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 0.65rem;
    background: var(--cc-green);
    color: var(--cc-green-ink);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, filter 0.2s ease;
    animation: cc-fairplay-btn-bob 2.4s ease-in-out infinite;
}

.cc-hero-fairplay-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--cc-green);
    pointer-events: none;
    animation: cc-fairplay-pulse-ring 1.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}

.cc-hero-fairplay-btn:hover {
    filter: brightness(1.08);
    transform: scale(1.08);
    animation-play-state: paused;
}

.cc-hero-fairplay-btn span {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    max-width: 70px;
}

@keyframes cc-fairplay-btn-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes cc-fairplay-pulse-ring {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.45); opacity: 0; }
}

@media (max-width: 980px) {
    .cc-hero-fairplay-btn {
        bottom: 1.25rem;
        right: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cc-hero-fairplay-btn,
    .cc-hero-fairplay-btn::before {
        animation: none;
    }
}

@keyframes cc-image-glow {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(22, 201, 141, 0); }
    50% { box-shadow: inset 0 0 70px 12px rgba(22, 201, 141, 0.35); }
}

@keyframes cc-image-zoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.14); }
}

@keyframes cc-shimmer-sweep {
    0% { background-position: 200% 0%; }
    55% { background-position: -40% 0%; }
    100% { background-position: -40% 0%; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-hero-slide-image,
    .cc-hero-slide-image::before,
    .cc-hero-slide-image img {
        animation: none;
    }
}

.cc-btn-green {
    background: var(--cc-green);
    color: var(--cc-green-ink);
}

.cc-btn-green:hover { background: var(--cc-gold-bright); color: var(--cc-text); }

.cc-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(6, 13, 26, 0.55);
    border: 1px solid var(--cc-navy-border);
    color: var(--cc-white);
    cursor: pointer;
    pointer-events: auto;
}

.cc-hero-arrow svg {
    pointer-events: none;
}

.cc-hero-arrow:hover { background: var(--cc-green); color: var(--cc-green-ink); }
.cc-hero-arrow-prev { left: 1rem; }
.cc-hero-arrow-next { right: 1rem; }

.cc-hero-dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 0.6rem;
    pointer-events: auto;
}

/* Rounded-rectangle "bar" dots — bigger than a plain circle, and the wider
   shape gives the video dot's icon room to sit without needing its own
   size override. */
.cc-hero-dot {
    width: 26px;
    height: 10px;
    padding: 0;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.cc-hero-dot.active { background: var(--cc-green); }

/* Video slide's dot swaps the plain bar for a play icon, so it reads as
   "this one's a video" at a glance instead of looking identical to the
   photo dots. */
.cc-hero-dot.cc-hero-dot-video {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-text);
}

.cc-hero-dot.cc-hero-dot-video.active { color: var(--cc-white); }

.cc-hero-dot-video svg {
    width: 8px;
    height: 8px;
    pointer-events: none;
}

/* ==========================================================================
   Hero row — hero slider paired side by side with a sidebar (Leaderboard +
   Countdown), inside the shared .cc-shell instead of full-bleed, so it can
   sit next to the sidebar column.
   ========================================================================== */

.cc-hero-row {
    display: grid;
    grid-template-columns: 2.3fr 1.1fr;
    gap: 1.5rem;
    padding: 1.5rem 0;
    align-items: start;
}

.cc-hero-main-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cc-hero-thumbnails {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.cc-hero-thumbnail-item {
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    background: none;
    border-radius: 4px;
    overflow: hidden;
    height: 64px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.cc-hero-thumbnail-item:hover {
    opacity: 1;
}

.cc-hero-thumbnail-item.active {
    border-color: var(--cc-gold);
    opacity: 1;
}

.cc-hero-thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* PGTI Card Widget styles — a fixed white card (--cc-white and --cc-off-white
   aren't redefined under :root[data-theme="light"], so they stay the same
   value in dark mode too). Everything inside it must use the matching fixed
   light-surface text and border tokens (--cc-text, --cc-text-muted,
   --cc-border-light) rather than the theme-flipping --cc-ink, --cc-ink-muted
   and --cc-navy-* ones — those are for content sitting on the (also
   theme-flipping) --cc-navy surface, and would go invisible here in dark
   mode (e.g. white text on this white card). */
.cc-pgti-widget {
    background: var(--cc-white);
    border: 1px solid var(--cc-border-light);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.cc-pgti-widget .cc-widget-header {
    background: #1a365d;
    color: var(--cc-white);
    padding: 0.6rem 1rem;
    border-bottom: 2px solid var(--cc-gold);
    text-align: left;
}

.cc-pgti-widget .cc-widget-header h2 {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0;
    text-transform: uppercase;
}

.cc-ranking-list {
    display: flex;
    flex-direction: column;
}

.cc-ranking-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--cc-border-light);
    gap: 0.75rem;
}

.cc-ranking-item:last-child {
    border-bottom: none;
}

.cc-rank-badge {
    background: #1a365d;
    color: var(--cc-white);
    width: 32px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-weight: 700;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.cc-rank-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cc-off-white);
    border: 1px solid var(--cc-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cc-rank-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-rank-avatar svg {
    width: 18px;
    height: 18px;
    color: var(--cc-text-muted);
}

.cc-rank-details {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}

.cc-rank-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cc-text);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.cc-rank-score {
    font-size: 0.75rem;
    color: var(--cc-gold);
    font-weight: 600;
}

.cc-rank-flag {
    width: 24px;
    height: 16px;
    border: 1px solid var(--cc-border-light);
    flex-shrink: 0;
}

.cc-rank-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-widget-footer {
    padding: 0.5rem 1rem;
    text-align: right;
    background: var(--cc-off-white);
    border-top: 1px solid var(--cc-border-light);
}

.cc-widget-footer a {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cc-gold);
    text-decoration: none;
}

.cc-widget-footer a:hover {
    text-decoration: underline;
}

/* Upcoming events countdown widget */
.cc-upcoming-content {
    padding: 0 !important;
    position: relative;
    background: var(--cc-navy-raised);
}

.cc-upcoming-ball-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 0;
}

.cc-golf-ball-svg {
    width: 110px;
    height: 110px;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));
}

.cc-upcoming-footer {
    background: var(--cc-gold);
    color: var(--cc-navy);
    padding: 0.6rem 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.cc-upcoming-meta {
    display: flex;
    flex-direction: column;
    max-width: 60%;
}

.cc-upcoming-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #060d1a !important;
}

.cc-upcoming-date {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(6, 13, 26, 0.8);
}

.cc-upcoming-countdown {
    background: #1a365d;
    color: var(--cc-white);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

/* PGTI Blue News bar header */
.cc-pgti-header-bar {
    background: #1a365d !important;
    border-bottom: 2px solid var(--cc-gold) !important;
    padding: 0.5rem 1rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 1.5rem !important;
    border-radius: 4px 4px 0 0;
}

.cc-pgti-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cc-pgti-header-icon {
    color: var(--cc-gold);
    display: flex;
    align-items: center;
}

.cc-pgti-header-bar .cc-section-title {
    color: var(--cc-white) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cc-pgti-header-bar .cc-section-head-link {
    color: var(--cc-gold) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ==========================================================================
   Event info ribbon
   ========================================================================== */

.cc-ribbon {
    background: var(--cc-gold);
}

.cc-ribbon-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.cc-ribbon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    padding: 1rem 1rem;
    border-left: 1px solid rgba(6, 13, 26, 0.15);
}

.cc-ribbon-item:first-child { border-left: none; }

.cc-ribbon-label {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(6, 13, 26, 0.65);
}

.cc-ribbon-value {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cc-text);
}

/* ==========================================================================
   Overview panel — standalone full-width now that Leaderboard lives in the
   hero-row sidebar instead of alongside it.
   ========================================================================== */

.cc-panel-overview {
    margin: 0 !important;
}

.cc-panel-overview .cc-panel-desc {
    max-width: 100% !important;
}

.cc-panel {
    position: relative;
    background: var(--cc-off-white);
    border: 1px solid var(--cc-border-light);
    border-top: 3px solid var(--cc-gold);
    padding: 2rem;
}

.cc-panel-dark {
    background: var(--cc-navy);
    border-color: var(--cc-navy-border);
    color: var(--cc-ink);
}

.cc-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.cc-panel-title {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
}

.cc-panel-dark .cc-panel-title { margin: 0; color: var(--cc-ink); }

.cc-panel-action {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cc-gold);
    text-decoration: none;
}

.cc-panel-eyebrow {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cc-text-muted);
    margin-bottom: 0.3rem;
}

.cc-panel-tagline {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--cc-text);
    margin: 0 0 1rem;
}

.cc-panel-desc {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--cc-text-muted);
    margin: 0 0 1.75rem;
}

.cc-stat-row {
    display: flex;
    gap: 1.75rem;
    flex-wrap: wrap;
}

.cc-stat-box { display: flex; flex-direction: column; }

.cc-stat-number {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--cc-text);
    line-height: 1;
}

.cc-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cc-text-muted);
    margin-top: 0.4rem;
    max-width: 90px;
}

.cc-panel-emblem {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    height: 70px;
    width: auto;
    opacity: 0.9;
}

.cc-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.cc-leaderboard-table th {
    text-align: left;
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-ink-muted);
    padding: 0 0.5rem 0.6rem;
    border-bottom: 1px solid var(--cc-navy-border);
}

.cc-leaderboard-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--cc-navy-border);
    color: var(--cc-ink);
}

.cc-leaderboard-pos {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-weight: 700;
}

.cc-leaderboard-flag { margin-right: 0.4rem; }

.cc-leaderboard-flag-img {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border: 1px solid var(--cc-navy-border);
    margin-right: 0.45rem;
    vertical-align: middle;
}

.cc-leader-row td { background: rgba(201, 162, 39, 0.1); }

/* Leader spotlight — the current tournament leader shown large above the
   ranked list (photo/flag + name + big score), the way tour sites like
   PGTI headline the winner before the compact standings table. Purely
   additive: the leader still also appears as row 1 of the table below. */
.cc-leader-spotlight {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
    background: rgba(201, 162, 39, 0.08);
    border: 1px solid rgba(201, 162, 39, 0.35);
}

.cc-leader-photo {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--cc-gold);
    background: var(--cc-navy-raised);
}

.cc-leader-photo img { width: 100%; height: 100%; object-fit: cover; }

.cc-leader-info { flex: 1; min-width: 0; }

.cc-leader-badge {
    display: block;
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cc-gold);
    margin-bottom: 0.2rem;
}

.cc-leader-name-row {
    display: flex;
    align-items: center;
}

.cc-leader-name {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cc-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-leader-score {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--cc-gold-bright);
    flex-shrink: 0;
    line-height: 1;
}

.cc-leaderboard-score {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-weight: 700;
}

.cc-leaderboard-score.is-under { color: var(--cc-gold-bright); }
.cc-leaderboard-score.is-over { color: var(--cc-ink-muted); }
.cc-leaderboard-score.is-even { color: var(--cc-ink); }

.cc-text-right { text-align: right; }
.cc-text-center { text-align: center; }
.cc-text-muted { color: var(--cc-ink-muted); }

/* ==========================================================================
   Course specifications
   ========================================================================== */

.cc-course-section { position: relative; }

.cc-course-media { position: absolute; inset: 0; }

.cc-course-img { width: 100%; height: 100%; object-fit: cover; }

.cc-course-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(6, 13, 26, 0.95) 30%, rgba(6, 13, 26, 0.55) 100%);
}

.cc-course-content {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: center;
}

.cc-course-stats-title {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cc-gold);
    margin: 0 0 1.25rem;
}

.cc-course-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.cc-course-stat { display: flex; flex-direction: column; }

.cc-course-stat-val {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--cc-white);
    line-height: 1;
}

.cc-course-stat-lbl {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.4rem;
}

.cc-course-title {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--cc-white);
    margin: 0 0 0.4rem;
}

.cc-course-subtitle {
    font-size: 1rem;
    font-weight: 500;
    color: var(--cc-gold-bright);
    margin: 0 0 1rem;
}

.cc-course-desc {
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 1.75rem;
    max-width: 560px;
}

/* ==========================================================================
   Generic content sections (News / Gallery / Sponsors)
   ========================================================================== */

.cc-section { padding: 4rem 0; }
/* Theme-aware alternating section shade (Gallery, etc.) — same light gray
   as before in light mode, dark navy in dark mode instead of staying stuck
   light (--cc-navy-raised isn't redefined for light mode much differently
   from the old fixed --cc-off-white, so light mode looks the same). */
.cc-section-alt { background: var(--cc-navy-raised); }

.cc-section-head { text-align: center; margin-bottom: 2.5rem; }

.cc-section-title {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--cc-ink);
    margin: 0;
}

/* ==========================================================================
   CISM history block — a full-width band (edge-to-edge background + gold
   top accent, same construction as .cc-ribbon right above it), not a boxed
   card: emblem, eyebrow, title, a short gold rule, then the History of CISM
   copy, all centered within the shared .cc-shell content width.
   ========================================================================== */
.cc-cism-history {
    position: relative;
    padding: 2.5rem 0 3rem;
    background: var(--cc-navy-raised);
    border-top: 3px solid var(--cc-gold);
    border-bottom: 1px solid var(--cc-navy-border);
    overflow: hidden;
    text-align: center;
}

/* Soft radial gold glow behind the emblem — purely decorative, sized to sit
   close behind the logo rather than opening up empty space above it. */
.cc-cism-history-glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 420px;
    height: 220px;
    background: radial-gradient(circle, rgba(201, 162, 39, 0.22) 0%, rgba(201, 162, 39, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.cc-cism-history-inner { position: relative; z-index: 1; }

.cc-cism-history-logo-btn {
    display: block;
    margin: 0 auto 1.1rem;
    padding: 0;
    background: none;
    border: none;
    cursor: zoom-in;
}

.cc-cism-history-logo {
    height: 92px;
    width: auto;
    margin: 0 auto;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
    transition: transform 0.25s ease;
}

.cc-cism-history-logo-btn:hover .cc-cism-history-logo,
.cc-cism-history-logo-btn:focus-visible .cc-cism-history-logo { transform: scale(1.06); }

.cc-cism-history-tag { margin-bottom: 0.6rem; }

.cc-cism-history-title { margin: 0 0 1rem; }

.cc-cism-history-rule {
    display: block;
    width: 64px;
    height: 3px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(90deg, transparent, var(--cc-gold), transparent);
}

.cc-cism-history-body {
    max-width: 100%;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--cc-ink-muted);
    text-align: justify;
    text-align-last: left;
}

.cc-cism-history-body + .cc-cism-history-body { margin-top: 1.25rem; }

@media (max-width: 640px) {
    .cc-cism-history { padding: 2rem 0 2.5rem; }
    .cc-cism-history-logo { height: 76px; }
}

.cc-section-head-link {
    display: inline-block;
    margin-top: 0.85rem;
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-gold);
    text-decoration: none;
    border-bottom: 1px solid var(--cc-gold);
    padding-bottom: 0.15rem;
}

.cc-empty { text-align: center; color: var(--cc-ink-muted); }

.cc-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.cc-news-card {
    display: flex;
    flex-direction: column;
    background: var(--cc-white);
    border: 1px solid var(--cc-border-light);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cc-news-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--cc-shadow);
}

.cc-news-image {
    position: relative;
    width: 100%;
    height: 170px;
    background: var(--cc-off-white);
}

.cc-news-image img { width: 100%; height: 100%; object-fit: cover; }

.cc-news-category {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background: var(--cc-gold);
    color: var(--cc-text);
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
}

.cc-news-body { padding: 1.1rem 1.2rem 1.4rem; }

.cc-news-date {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--cc-text-muted);
    margin-bottom: 0.4rem;
}

.cc-news-title {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: var(--cc-text);
    margin: 0 0 0.5rem;
}

.cc-news-excerpt {
    color: var(--cc-text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

.cc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.cc-gallery-item {
    position: relative;
    display: block;
    width: 100%;
    height: 200px;
    padding: 0;
    border: none;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--cc-navy);
}

.cc-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.cc-gallery-item:hover img { transform: scale(1.08); }

.cc-sponsor-group {
    width: 100%;
}

.cc-sponsor-group + .cc-sponsor-group {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px dashed var(--cc-border-light);
}

.cc-sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 1.5rem auto 0;
    padding: 0;
}

.cc-sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    width: 220px;
    max-width: 100%;
    padding: 1.25rem 1.75rem;
    background: var(--cc-white);
    border: 1px solid var(--cc-border-light);
    border-radius: 8px;
    text-decoration: none;
    color: var(--cc-text-muted);
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc-sponsor-logo:hover {
    opacity: 1;
    background: var(--cc-white);
    border-color: var(--cc-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.cc-sponsor-logo img {
    max-height: 52px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    transition: transform 0.25s ease;
}

.cc-sponsor-logo:hover img {
    transform: scale(1.05);
}

.cc-sponsor-logo span {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    color: var(--cc-text);
}

/* ==========================================================================
   Lightbox (self-contained — this page doesn't load the shared style.css)
   ========================================================================== */

.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(6, 13, 26, 0.94);
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.lightbox.is-open { display: flex; }

body.lightbox-open { overflow: hidden; }

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 1px solid var(--cc-navy-border);
}

/* Small assets (logos/emblems, via data-lightbox-compact on the trigger —
   see the CISM emblem button above and script.js's lightbox handler) open at
   a modest, standard "popup" size instead of stretching near-full-screen
   like gallery/news photos. Kept in sync with the same rule in style.css
   (this page loads championship.css only, not the shared stylesheet). */
.lightbox-image.lightbox-image-compact {
    max-width: min(420px, 85vw);
    max-height: min(420px, 70vh);
    padding: 1.5rem;
    background: var(--cc-navy-raised);
    border: 2px solid var(--cc-gold);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--cc-white);
    cursor: pointer;
}

.lightbox-close:hover { border-color: var(--cc-gold); color: var(--cc-gold); }

/* ==========================================================================
   Footer
   ========================================================================== */

.cc-footer { background: var(--cc-navy); color: var(--cc-ink-muted); }

.cc-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
}

.cc-footer-logo { height: 50px; margin-bottom: 1rem; }

.cc-footer-brand-name {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cc-ink);
    margin-bottom: 0.6rem;
}

.cc-footer-tagline { font-size: 0.85rem; line-height: 1.65; max-width: 340px; }

.cc-footer-heading {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-gold);
    margin: 0 0 0.9rem;
}

.cc-footer-links { list-style: none; margin: 0; padding: 0; }
.cc-footer-links li { margin-bottom: 0.55rem; }
.cc-footer-links a { color: var(--cc-ink-muted); text-decoration: none; font-size: 0.85rem; }
.cc-footer-links a:hover { color: var(--cc-gold); }

.cc-footer-address { font-style: normal; font-size: 0.85rem; line-height: 1.75; }

.cc-footer-social { display: flex; gap: 0.6rem; margin-top: 1.25rem; }

.cc-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--cc-navy-raised);
    border: 1px solid var(--cc-navy-border);
    color: var(--cc-ink-muted);
}

.cc-footer-social a:hover { color: var(--cc-gold); border-color: var(--cc-gold); }

.cc-footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--cc-navy-border);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1160px) {
    .cc-burger { display: flex; }

    .cc-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--cc-navy);
        border-bottom: 1px solid var(--cc-navy-border);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .cc-header.nav-open .cc-nav { max-height: 70vh; overflow-y: auto; }

    .cc-nav-link { padding: 0.85rem 1.5rem; width: 100%; }

    .cc-nav-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        border: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.03);
    }

    .nav-item-dropdown.open .cc-nav-dropdown-menu { display: block; }

    .cc-header-actions { margin-left: auto; }
    .cc-nav-cta { display: none; }
}

@media (max-width: 980px) {
    .cc-hero-row { grid-template-columns: 1fr; }
    .cc-course-content { grid-template-columns: 1fr; }
    .cc-footer-inner { grid-template-columns: 1fr 1fr; }

    .cc-hero-slider { min-height: 620px; }
    .cc-hero-dots { left: 50%; }
}

@media (max-width: 680px) {
    .cc-brand-logo { height: 44px; }
    .cc-hero-slider { min-height: 560px; }
    .cc-hero-full-width .cc-hero-slide-content { padding: 2rem 1.5rem; }
    .cc-ribbon-inner { grid-template-columns: 1fr; }
    .cc-ribbon-item { border-left: none; border-top: 1px solid rgba(6, 13, 26, 0.15); }
    .cc-ribbon-item:first-child { border-top: none; }
    .cc-footer-inner { grid-template-columns: 1fr; }
    .cc-sponsor-logo { width: 100%; max-width: 260px; }
    .cc-panel-emblem { display: none; }
}

.cc-main-grid {
    display: grid;
    /* minmax(0, ...) — not bare fr units — because a grid track's implicit
       min-width is "auto" (the min-content size of whatever's inside it).
       The Notices column has white-space:nowrap title/excerpt text (see
       .cc-notice-title-link/.cc-notice-excerpt-text below), so without this
       the 1fr/2.1fr tracks refuse to shrink below that nowrap text's full
       unwrapped width, pushing the whole row past the viewport on mobile
       instead of ever letting the text-overflow:ellipsis truncation engage. */
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    gap: 2rem;
    margin: 2.5rem 0;
    align-items: start;
}

.cc-main-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.cc-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.cc-main-col > *:first-child,
.cc-sidebar-col > *:first-child {
    margin-top: 0 !important;
}

.cc-sidebar-specs {
    background: var(--cc-navy-raised);
    border: 1px solid var(--cc-navy-border);
    border-radius: 4px;
    padding: 1.5rem;
}

.cc-sidebar-specs .cc-panel-title {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cc-gold);
    margin-bottom: 1.2rem;
    border-bottom: 2px solid var(--cc-navy-border);
    padding-bottom: 0.5rem;
}

.cc-live-badge-glow {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--cc-green);
    border-radius: 50%;
    margin-right: 0.5rem;
    box-shadow: 0 0 10px var(--cc-green);
    animation: cc-live-pulse 1.5s infinite;
}

@keyframes cc-live-pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(22, 201, 141, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(22, 201, 141, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(22, 201, 141, 0);
    }
}

/* Sponsors logo strip on a navy band, like PGTI. --cc-navy is theme-aware
   (dark navy in dark mode, near-white in light mode — see the :root vs
   :root[data-theme="light"] blocks above), so text on top of it must use
   the matching theme-aware --cc-ink tokens (also flip per theme) rather
   than --cc-white, which stays pure white in both themes and would go
   invisible against the light-mode background. */
/* Fixed light strip regardless of theme (--cc-off-white/--cc-border-light/
   --cc-text aren't redefined under :root[data-theme="light"], so they stay
   the same value in dark mode too) — uploaded sponsor logos are arbitrary
   artwork with unknown colors (some solid black, some bright), and a fixed
   light backdrop is the one background every logo reads clearly against,
   dark theme included. This also means the base .cc-sponsor-logo/
   .cc-sponsors-grid rules (already tuned for a light surface) apply as-is
   here with no per-slide dark-surface overrides needed. */
.cc-partners-section {
    background: var(--cc-off-white) !important;
    border-top: 1px solid var(--cc-border-light);
    border-bottom: 1px solid var(--cc-border-light);
    padding: 3rem 0;
}

.cc-partners-section .cc-section-title {
    color: var(--cc-text) !important;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

.cc-partners-section .cc-sponsor-logo:hover {
    background: var(--cc-white);
    transform: translateY(-3px);
}

@media (max-width: 980px) {
    .cc-main-grid,
    .cc-hero-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 1.5rem !important;
        margin: 1.5rem 0 !important;
    }
    
    .cc-hero-container {
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 480px !important;
    }
    
    .cc-hero-marquee-col {
        display: none !important;
    }
}

/* Matching heights for side-by-side News and Upcoming Events widgets */
.cc-news-widget-sidebar .cc-widget-content,
.cc-upcoming-widget .cc-widget-content {
    height: 330px !important;
    box-sizing: border-box;
    overflow: hidden;
}

/* Notices Sidebar Ticker List Styles */
.cc-notices-scroll-wrap {
    height: 100%;
    overflow: hidden !important;
    position: relative;
}

.cc-notices-scroll-wrap::-webkit-scrollbar {
    width: 4px;
}

.cc-notices-scroll-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.cc-notices-scroll-wrap::-webkit-scrollbar-thumb {
    background: var(--cc-navy-border);
    border-radius: 2px;
}

.cc-notices-scroll-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--cc-gold);
}

.cc-notices-list {
    display: flex;
    flex-direction: column;
    background: var(--cc-white);
}

.cc-notice-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--cc-border-light);
    gap: 0.75rem;
    transition: background-color 0.2s ease;
}

.cc-notice-item:last-child {
    border-bottom: none;
}

.cc-notice-item:hover {
    background: var(--cc-off-white);
}

.cc-notice-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #060d1a !important;
    width: 42px;
    height: 42px;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid #1e293b !important;
}

.cc-date-day {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    color: #ffffff !important;
}

.cc-date-month {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 0.15rem;
    color: var(--cc-gold) !important;
}

.cc-notice-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* same reason as .cc-main-grid above, one flex level in —
                     otherwise the nowrap title/excerpt below never actually
                     truncates, it just forces this row wider instead. */
    text-align: left;
    overflow: hidden;
}

.cc-notice-title-link {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cc-text);
    text-decoration: none;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-notice-title-link:hover {
    color: var(--cc-gold);
    text-decoration: underline;
}

.cc-notice-excerpt-text {
    font-size: 0.7rem;
    color: var(--cc-text-muted);
    margin: 0.15rem 0 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* News Horizontal Slider Styles */
.cc-news-slider-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.cc-news-slider-track {
    display: flex;
    gap: 0.85rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

.cc-news-card-compact {
    flex: 0 0 calc((100% - 1.7rem) / 3);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--cc-off-white);
    border: 1px solid var(--cc-border-light);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc-news-card-compact:hover {
    transform: translateY(-2px);
    border-color: var(--cc-gold);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.cc-news-image-compact {
    position: relative;
    height: 160px;
    width: 100%;
    overflow: hidden;
    background: var(--cc-navy);
}

.cc-news-image-compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.cc-news-card-compact:hover .cc-news-image-compact img {
    transform: scale(1.05);
}

.cc-news-category-compact {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    background: var(--cc-gold);
    color: var(--cc-text);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    z-index: 2;
}

.cc-news-body-compact {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.cc-news-date-compact {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--cc-text-muted);
}

.cc-news-title-compact {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--cc-text) !important;
    margin-top: 0.3rem;
    line-height: 1.35;
    max-height: 2.7em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cc-news-excerpt-compact {
    font-size: 0.7rem;
    color: var(--cc-text-muted);
    margin-top: 0.3rem;
    line-height: 1.35;
    max-height: 2.7em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cc-news-nav-btn:hover {
    background: rgba(255,255,255,0.25) !important;
    color: var(--cc-white) !important;
    border-color: var(--cc-gold) !important;
}

/* Responsive slider track overrides */
@media (max-width: 980px) {
    .cc-news-card-compact {
        flex: 0 0 calc((100% - 0.85rem) / 2) !important;
    }
}
@media (max-width: 580px) {
    .cc-news-card-compact {
        flex: 0 0 100% !important;
    }
}

/* Two distinct grid rows spacing rules */
.cc-main-grid-row1 {
    margin-bottom: 0.5rem !important;
}

.cc-main-grid-row2 {
    margin-top: 0 !important;
    margin-bottom: 2.5rem !important;
}

/* Reduce space between news/video slider content and header bar */
.cc-news-widget-sidebar .cc-pgti-header-bar,
.cc-video-widget .cc-pgti-header-bar {
    margin-bottom: 0 !important;
}

.cc-news-widget-sidebar .cc-widget-content,
.cc-video-widget .cc-widget-content {
    padding-top: 0.5rem !important;
}

/* Video Highlights Section Styles */
.cc-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.cc-video-card {
    background: var(--cc-white);
    border: 1px solid var(--cc-border-light);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.cc-video-card:hover {
    transform: translateY(-4px);
    border-color: var(--cc-gold);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.cc-video-thumbnail {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #000;
}

.cc-video-thumbnail img,
.cc-video-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.cc-video-card:hover .cc-video-thumbnail img,
.cc-video-card:hover .cc-video-thumbnail video {
    transform: scale(1.04);
}

.cc-video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 13, 26, 0.35);
    transition: background-color 0.3s ease;
}

.cc-video-card:hover .cc-video-play-overlay {
    background: rgba(6, 13, 26, 0.5);
}

.cc-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cc-gold);
    color: var(--cc-text);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(234, 179, 8, 0.4);
    transition: transform 0.25s, background-color 0.25s;
}

.cc-video-card:hover .cc-play-icon {
    transform: scale(1.1);
    background: var(--cc-white);
    color: var(--cc-text);
}

.cc-video-duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.4rem;
    border-radius: 2px;
}

/* Lightbox video modal player */
.cc-video-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.cc-video-modal.active {
    display: flex;
}

.cc-video-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 13, 26, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cc-video-modal-container {
    position: relative;
    width: 100%;
    max-width: 850px;
    background: #000;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--cc-navy-border);
    z-index: 10;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.cc-video-modal-close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.cc-video-modal-close:hover {
    color: var(--cc-gold);
}

.cc-video-modal-iframe-wrap {
    width: 100%;
    height: 100%;
}

.cc-video-modal-iframe-wrap iframe,
.cc-video-modal-iframe-wrap video {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
}

.cc-video-modal-iframe-wrap video {
    display: none;
}

/* Fair Play Vote QR modal — same fixed-overlay structure as .cc-video-modal
   above, but a light card (not a black video frame) since a QR code needs
   strong contrast against its background to stay scannable. */
.cc-fairplay-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.cc-fairplay-modal.active {
    display: flex;
}

.cc-fairplay-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(6, 13, 26, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cc-fairplay-modal-container {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: var(--cc-white);
    padding: 2rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.9rem;
    border: 1px solid var(--cc-navy-border);
}

.cc-fairplay-modal-close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}

.cc-fairplay-modal-close:hover {
    color: var(--cc-gold);
}

.cc-fairplay-modal-title {
    font-family: 'Klavika Condensed', 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cc-navy);
    margin: 0;
}

.cc-fairplay-modal-qr {
    display: block;
    width: 100%;
    max-width: 220px;
}

.cc-fairplay-modal-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.cc-fairplay-modal-hint {
    font-size: 0.82rem;
    color: var(--cc-text-muted);
    margin: 0;
}

@media (max-width: 980px) {
    .cc-video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .cc-video-grid {
        grid-template-columns: 1fr;
    }
    .cc-video-modal-close {
        top: 0.5rem;
        right: 0.5rem;
        background: rgba(0, 0, 0, 0.6);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }
}

/* Video Slider Ticker Styles */
.cc-video-slider-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.cc-video-slider-track {
    display: flex;
    gap: 0.75rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
}

/* Four cards per row on desktop; narrower breakpoints are overridden below */
.cc-video-slider-track .cc-video-card {
    flex: 0 0 calc((100% - 2.25rem) / 4);
    box-sizing: border-box;
}

/* Section head row: tag/title on the left, prev/next slider controls on the right */
.cc-video-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.cc-video-nav-buttons {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.cc-video-nav-btn {
    background: rgba(6, 13, 26, 0.06);
    border: 1px solid var(--cc-border-light);
    color: var(--cc-ink);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cc-video-nav-btn:hover {
    background: rgba(255,255,255,0.25) !important;
    color: var(--cc-white) !important;
    border-color: var(--cc-gold) !important;
}

.cc-video-more-wrap {
    text-align: center;
    margin-top: 2rem;
}

@media (max-width: 580px) {
    .cc-video-section-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 980px) {
    .cc-video-card {
        flex: 0 0 calc((100% - 1.5rem) / 3) !important;
    }
}

@media (max-width: 768px) {
    .cc-video-card {
        flex: 0 0 calc((100% - 0.75rem) / 2) !important;
    }
}

@media (max-width: 480px) {
    .cc-video-card {
        flex: 0 0 100% !important;
    }
}