/* ═══════════════════════════════════════════════════════════════════════════
 * sq-mobile-fixes.css — final mobile pass (loaded AFTER sq-v2 + sq-v3 + style)
 *
 * Targets concrete responsive bugs surfaced by audit + user reports:
 *   1. Form inputs / selects with hard min-widths causing horizontal scroll
 *   2. Search inputs with low-contrast text on dark surfaces
 *   3. Gallery row tiles too wide on 320–414px viewports
 *   4. Hardcoded YouTube / Instagram embed widths
 *   5. Tap targets < 44 × 44 px (WCAG 2.5.5)
 *   6. Hero / front-page sections with fixed min-height creating empty wells
 *   7. Footer column layout cramping on tablets
 *   8. Tables with no mobile font scaling
 *   9. Sticky header tap targets + actions visibility
 *
 * No overrides above 980px — that's the design viewport.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Universal: prevent horizontal page scroll EVER ─── */
html, body { overflow-x: hidden; max-width: 100%; }

/* ─── Tablets and below: container padding ─── */
@media (max-width: 980px) {
    .sq-container, .sq-container-wide { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
    /* Mobile menu drawer: ensure full width and proper padding */
    .sq-nav { padding: 16px 20px !important; max-height: calc(100vh - 64px); overflow-y: auto; }
    .sq-nav .sq-nav-list li a { padding: 14px 0; min-height: 48px; display: flex; align-items: center; }
    .sq-header-actions .btn { min-width: 44px; min-height: 44px; padding: 8px; }
}

/* ─── Phones: fix grids that don't collapse early enough ─── */
@media (max-width: 900px) {
    /* Front-page hero collapse */
    .sq-home-hero-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
    .sq-home-hero { min-height: auto !important; padding: 32px 0 48px !important; }

    /* Sponsors / external links 2-col on athlete page */
    .sq-profile-hero-inner [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr; gap: 32px"] {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ─── Phones: gallery row + photo cascade ─── */
@media (max-width: 640px) {
    .sq-gallery-row,
    .sq-profile-gallery {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 8px !important;
    }
    /* Athlete archive grid: 2 cols on small phones, was 4 */
    .sq-athletes-archive-grid,
    .sq-archive-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .sq-athlete-card .sq-ac-name { font-size: 14px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * ATHLETE CARD overlap fix — kill the legacy absolute-positioned rules
 * for .sq-ac-bottom + .sq-ac-stats that pile on top of each other when
 * BOTH render (current archive layout). Only the .sq-ac-info wrapper
 * should be absolute; its children flow vertically inside it.
 * ═══════════════════════════════════════════════════════════════════════ */
.sq-athlete-card.sq-ac .sq-ac-info {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    z-index: 2 !important;
    /* Ensure stacking context so children don't escape */
    pointer-events: none;
}
.sq-athlete-card.sq-ac .sq-ac-stats {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    background: transparent !important;
    border-radius: 0 !important;
    grid-template-columns: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sq-athlete-card.sq-ac .sq-ac-stat {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    line-height: 1 !important;
}
.sq-athlete-card.sq-ac .sq-ac-stat .v {
    display: inline-block !important;
    font-size: 15px !important;
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
.sq-athlete-card.sq-ac .sq-ac-stat .l {
    font-size: 9px !important;
    color: rgba(255,255,255,0.7) !important;
    margin-top: 2px !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.sq-athlete-card.sq-ac .sq-ac-bottom {
    position: static !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    margin-top: 4px !important;
    font-size: 10px !important;
    color: rgba(255,255,255,0.82) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Strong bottom gradient so text always reads against any photo */
.sq-athlete-card.sq-ac .sq-ac-frame::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
    background: linear-gradient(to top, rgba(6,7,10,0.92) 0%, rgba(6,7,10,0.45) 50%, transparent 100%);
    pointer-events: none; z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Latest Results banner — make less intrusive
 * ═══════════════════════════════════════════════════════════════════════ */
.sq-recent-banner {
    position: relative !important;       /* was sticky → no longer covers nav */
    top: auto !important;
    z-index: 5 !important;                /* below modals */
    background: linear-gradient(90deg, #0F1216 0%, #1D232B 50%, #0F1216 100%) !important;
}
.sq-recent-banner__inner { padding: 6px 16px !important; min-height: 32px; }
.sq-recent-banner__dismiss {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    color: #FFFFFF;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.sq-recent-banner__dismiss:hover { background: rgba(255,255,255,0.1); }

/* ═══════════════════════════════════════════════════════════════════════
 * Universal text-input contrast fix — sweep all input fields so we never
 * end up with black-on-black or white-on-white. Affects WordPress core
 * fields too (search, comment forms, login, etc.) Uses !important to
 * defeat ad-hoc inline <style> blocks scattered across page templates
 * (page-ask, page-share, the white-bg form-control reset in sq-v3, etc.)
 * that produce inconsistent contrast.
 *
 * Opt-out: add class .sq-input-light to any input/textarea/select that
 * really needs a white background (none currently use this).
 * ═══════════════════════════════════════════════════════════════════════ */
input[type=text], input[type=search], input[type=email], input[type=url],
input[type=password], input[type=tel], input[type=number], input[type=date],
input[type=time], input[type=datetime-local], input[type=month], input[type=week],
input:not([type]), textarea, select {
    background-color: #1c2028 !important;
    color: #f2efe8 !important;
    -webkit-text-fill-color: #f2efe8 !important;   /* iOS Safari + autofill */
    border: 1px solid rgba(255,255,255,0.18);
    caret-color: #f2efe8;
    -webkit-appearance: none; appearance: none;
}
input[type=text]:focus, input[type=search]:focus, input[type=email]:focus,
input[type=url]:focus, input[type=password]:focus, input[type=tel]:focus,
input[type=number]:focus, input[type=date]:focus, input[type=time]:focus,
input[type=datetime-local]:focus, input[type=month]:focus, input[type=week]:focus,
input:not([type]):focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--sq-copper, #C8843A);
    background-color: #232831 !important;
}
input::placeholder, textarea::placeholder { color: rgba(242,239,232,0.55) !important; opacity: 1; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgba(242,239,232,0.55) !important; }
input::-moz-placeholder, textarea::-moz-placeholder { color: rgba(242,239,232,0.55) !important; opacity: 1; }

/* Browser autofill overrides — Chrome/Edge/Safari force a yellowish white
   background on autofilled fields, which used to land black text on the
   dark theme. Pin both bg + text to the dark palette via the inset shadow
   trick (the only thing that actually defeats -webkit-autofill bg). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #1c2028 inset !important;
            box-shadow: 0 0 0 1000px #1c2028 inset !important;
    -webkit-text-fill-color: #f2efe8 !important;
    caret-color: #f2efe8 !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* Native date / number / select widget chrome (calendar icon, dropdown
   arrow, spinner) — invert so they're visible on dark backgrounds. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.85);
    cursor: pointer;
}
select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23f2efe8' d='M6 8 0 0h12z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
}

/* Opt-out class for the rare case a form intentionally needs a white field */
.sq-input-light input, .sq-input-light textarea, .sq-input-light select,
input.sq-input-light, textarea.sq-input-light, select.sq-input-light {
    background-color: #FFFFFF !important;
    color: #0A0B0D !important;
    -webkit-text-fill-color: #0A0B0D !important;
}

/* Override for inverted forms on light surfaces (e.g. WP admin) */
.wp-admin input, .wp-admin textarea, .wp-admin select { background-color: inherit !important; color: inherit !important; -webkit-text-fill-color: inherit !important; }

/* ─── Photo-first swipeable archive on phones ────────────────────────────
   On viewports under 540px the athletes archive becomes a single full-
   width photo card per scroll position with snap. This is the sensory
   upgrade for "muscular women" — one big face per scroll, IG-discovery
   style, instead of a 2-col grid of postage stamps. */
@media (max-width: 540px) {
    .sq-athletes-archive-grid,
    .sq-archive-grid {
        grid-template-columns: none !important;
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        padding-bottom: 16px;
        margin: 0 -16px !important;
        padding-left: 16px;
        padding-right: 16px;
    }
    .sq-athletes-archive-grid > a,
    .sq-archive-grid > a,
    .sq-archive-card {
        flex: 0 0 86vw !important;
        scroll-snap-align: center;
        max-width: 86vw !important;
    }
    .sq-archive-card .sq-ac-photo,
    .sq-athlete-card .sq-photo-frame {
        aspect-ratio: 4 / 5 !important;
    }
    .sq-archive-card .sq-ac-name {
        font-size: 22px !important;
        font-family: 'Anton', 'Bebas Neue', Impact, sans-serif !important;
        text-transform: uppercase;
        letter-spacing: -0.01em;
        line-height: 1;
    }
    /* Hint that there's more — left edge of next card peeks in */
    .sq-athletes-archive-grid::after,
    .sq-archive-grid::after {
        content: ''; flex: 0 0 1px;
    }
}

/* ─── Phones: footer 2-col then 1-col ─── */
@media (max-width: 640px) {
    .sq-footer-cols, .sq-footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}
@media (max-width: 420px) {
    .sq-footer-cols, .sq-footer-grid { grid-template-columns: 1fr !important; }
}

/* ─── Phones: tables get smaller font + tighter padding so they fit the scroll container ─── */
@media (max-width: 640px) {
    table.sq-results-table, table.sq-affiliate-table, table.sq-comparison-table,
    .sq-table table, .sq-results table {
        font-size: 12px !important;
    }
    table.sq-results-table th, table.sq-results-table td,
    table.sq-affiliate-table th, table.sq-affiliate-table td,
    table.sq-comparison-table th, table.sq-comparison-table td {
        padding: 6px 8px !important;
        white-space: normal !important;
    }
    /* Wrap long source URLs / federation names */
    table.sq-results-table td { word-break: break-word; }
}

/* ─── Phones: tap target floor 44×44 (WCAG 2.5.5) ─── */
@media (max-width: 980px) {
    .sq-ac-actions a, .sq-ac-actions button,
    .btn-sm, .sq-share-cbtn, .sq-iron-panel-stat,
    .sq-filter-btn, .sq-tier-tab {
        min-height: 44px;
        min-width: 44px;
    }
    .sq-share-cbtn { width: 44px !important; height: 44px !important; }
}

/* ─── Phones: YouTube / Instagram embeds responsive ─── */
@media (max-width: 640px) {
    .sq-gallery-row iframe,
    .sq-profile-gallery iframe,
    iframe[src*="youtube.com/embed"],
    iframe[src*="instagram.com"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
    iframe[src*="instagram.com"] {
        aspect-ratio: 4 / 5;
        max-width: 360px !important;
        min-height: 480px;
    }
}

/* ─── Phones: form inputs get 16px font (prevent iOS auto-zoom) ─── */
@media (max-width: 640px) {
    input[type=text], input[type=search], input[type=email], input[type=url],
    input[type=password], input[type=tel], textarea, select {
        font-size: 16px !important;
    }
}

/* ─── Phones: hide desktop-only chrome ─── */
@media (max-width: 640px) {
    .sq-header-actions .btn span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * H2H STAGE — full-bleed split-screen, fight-poster style
 * ═══════════════════════════════════════════════════════════════════════ */
.sq-h2h-stage {
    background: #06070A;
    margin-top: 0;
    padding: 0;
    position: relative;
}
.sq-h2h-stage-grid {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    grid-template-rows: minmax(560px, 78vh);
    gap: 0;
    position: relative;
    overflow: hidden;
}
.sq-h2h-stage-side {
    position: relative;
    display: block;
    background-color: #1A1D22;
    background-size: cover;
    background-position: center 18%;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: filter 0.4s ease;
}
.sq-h2h-stage-side:hover { filter: brightness(1.05); }
.sq-h2h-stage-side.is-placeholder {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(200,132,58,0.16) 0%, transparent 70%),
        linear-gradient(180deg, #1A1D22 0%, #0A0B0D 100%);
}
.sq-h2h-stage-mark {
    position: absolute; inset: 0; z-index: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(8rem, 18vw, 18rem);
    color: rgba(242,239,232,0.10);
    text-transform: uppercase;
}
.sq-h2h-stage-veil {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(to top,    rgba(6,7,10,0.92) 0%, rgba(6,7,10,0.40) 35%, rgba(6,7,10,0.05) 65%, transparent 85%),
        radial-gradient(ellipse at 50% 100%, rgba(139,26,26,0.20) 0%, transparent 70%);
}
.sq-h2h-stage-left  .sq-h2h-stage-veil {
    background:
        linear-gradient(to top,    rgba(6,7,10,0.92) 0%, rgba(6,7,10,0.40) 35%, rgba(6,7,10,0.05) 65%, transparent 85%),
        linear-gradient(to right,  rgba(6,7,10,0.20) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(139,26,26,0.20) 0%, transparent 70%);
}
.sq-h2h-stage-right .sq-h2h-stage-veil {
    background:
        linear-gradient(to top,    rgba(6,7,10,0.92) 0%, rgba(6,7,10,0.40) 35%, rgba(6,7,10,0.05) 65%, transparent 85%),
        linear-gradient(to left,   rgba(6,7,10,0.20) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(139,26,26,0.20) 0%, transparent 70%);
}
.sq-h2h-stage-content {
    position: absolute;
    left: 32px; right: 32px; bottom: 32px;
    z-index: 2;
    color: #FFFFFF;
}
.sq-h2h-stage-right .sq-h2h-stage-content { text-align: right; }
.sq-h2h-stage-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--sq-copper-hot, #E09B46);
    margin-bottom: 12px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.sq-h2h-stage-name {
    font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(2.6rem, 6vw, 6rem);
    line-height: 0.86;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0 4px 24px rgba(0,0,0,0.65);
    margin-bottom: 18px;
    word-break: break-word;
}
.sq-h2h-stage-score {
    display: inline-flex; align-items: baseline; gap: 10px;
    margin-bottom: 8px;
}
.sq-h2h-stage-score .lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
}
.sq-h2h-stage-score .val {
    font-family: var(--font-mono);
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 700;
    color: var(--sq-copper-hot, #E09B46);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.sq-h2h-stage-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.10em;
    color: rgba(255,255,255,0.78);
    text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
.sq-h2h-stage-badge {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 14px;
    background: var(--sq-blood, #B31B2E);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-radius: 2px;
    box-shadow: 0 4px 14px rgba(139,26,26,0.45);
}

/* Center VS divider — clipped diagonal between the two sides */
.sq-h2h-stage-vs {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #06070A 0%, #1A1D22 50%, #06070A 100%);
    padding: 0;
}
.sq-h2h-stage-vs .vs-line {
    width: 2px; flex: 1;
    background: linear-gradient(to bottom, transparent 0%, var(--sq-copper, #C8843A) 50%, transparent 100%);
    opacity: 0.65;
}
.sq-h2h-stage-vs .vs-mark {
    font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(3rem, 5vw, 5rem);
    color: var(--sq-copper-hot, #E09B46);
    letter-spacing: -0.02em;
    padding: 18px 4px;
    text-shadow: 0 0 24px rgba(200,132,58,0.5);
}

/* Tablet/mobile collapse */
@media (max-width: 980px) {
    .sq-h2h-stage-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 60vh 56px 60vh;
    }
    .sq-h2h-stage-vs {
        background: linear-gradient(90deg, #06070A 0%, #1A1D22 50%, #06070A 100%);
        flex-direction: row;
    }
    .sq-h2h-stage-vs .vs-line {
        width: auto; height: 2px; flex: 1;
        background: linear-gradient(to right, transparent 0%, var(--sq-copper, #C8843A) 50%, transparent 100%);
    }
    .sq-h2h-stage-content {
        left: 20px; right: 20px; bottom: 20px;
    }
    .sq-h2h-stage-right .sq-h2h-stage-content { text-align: left; }
    .sq-h2h-stage-name { font-size: clamp(2rem, 8vw, 3.2rem); }
}

/* ═══════════════════════════════════════════════════════════════════════
 * BANGER HERO (front-page) — 1 full-bleed athlete + 4 secondary tiles
 * ═══════════════════════════════════════════════════════════════════════ */
.sq-banger-hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: minmax(560px, 80vh);
    gap: 12px;
    margin-top: 24px;
}
.sq-banger-main {
    position: relative;
    display: block;
    background-color: #06070A;
    background-size: cover;
    background-position: center 20%;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
    border-radius: 4px;
}
.sq-banger-main::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    transition: background 0.6s ease;
}
.sq-banger-main:hover { transform: scale(1.005); }
.sq-banger-veil {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(to top,    rgba(6,7,10,0.92) 0%, rgba(6,7,10,0.45) 30%, rgba(6,7,10,0.05) 60%, transparent 80%),
        linear-gradient(to right,  rgba(6,7,10,0.50) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(139,26,26,0.22) 0%, transparent 70%);
}
.sq-banger-content {
    position: absolute;
    left: 32px; right: 32px; bottom: 32px;
    z-index: 2;
    color: #FFFFFF;
}
.sq-banger-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sq-copper-hot, #E09B46);
    margin-bottom: 14px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.sq-banger-name {
    font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
    font-weight: 400;
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 0.86;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow: 0 4px 24px rgba(0,0,0,0.65);
    margin-bottom: 14px;
}
.sq-banger-meta {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
.sq-banger-meta .sep { opacity: 0.5; padding: 0 8px; }
.sq-banger-score {
    position: absolute;
    top: 24px; right: 24px;
    z-index: 2;
    background: rgba(10,11,13,0.62);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(184,115,51,0.40);
    padding: 14px 20px;
    border-radius: 4px;
    color: #FFFFFF;
    text-align: center;
}
.sq-banger-score-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sq-copper-hot, #E09B46);
    margin-bottom: 4px;
}
.sq-banger-score-val {
    font-family: var(--font-mono);
    font-size: 36px; font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    line-height: 1;
}
.sq-banger-placeholder {
    position: absolute; inset: 0; z-index: 0;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(200,132,58,0.18) 0%, transparent 70%),
        linear-gradient(180deg, #1A1D22 0%, #06070A 100%);
}
.sq-banger-placeholder-mark {
    font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(8rem, 16vw, 16rem);
    line-height: 0.85;
    color: rgba(242,239,232,0.10);
    text-transform: uppercase;
    letter-spacing: -0.04em;
}

/* SECONDARY TILES — 2x2 grid alongside the main */
.sq-banger-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    height: 100%;
}
.sq-banger-tile {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: #1A1D22;
    background-size: cover;
    background-position: center 20%;
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
    transition: transform 0.4s ease;
}
.sq-banger-tile:hover { transform: scale(1.015); }
.sq-banger-tile-veil {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,7,10,0.85) 0%, rgba(6,7,10,0.30) 50%, transparent 80%);
}
.sq-banger-tile.is-placeholder {
    background:
        radial-gradient(ellipse at 50% 35%, rgba(200,132,58,0.14) 0%, transparent 70%),
        linear-gradient(180deg, #1A1D22 0%, #0A0B0D 100%);
}
.sq-banger-tile-mark {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
    font-size: 6rem;
    color: rgba(242,239,232,0.12);
    text-transform: uppercase;
    z-index: 0;
}
.sq-banger-tile-content {
    position: absolute;
    left: 16px; right: 16px; bottom: 14px;
    z-index: 2; color: #FFFFFF;
}
.sq-banger-tile-rank {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sq-copper-hot, #E09B46);
    margin-bottom: 4px;
}
.sq-banger-tile-name {
    font-family: 'Anton', 'Bebas Neue', Impact, sans-serif;
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55);
    margin-bottom: 4px;
}
.sq-banger-tile-score {
    font-family: var(--font-mono);
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* ── Tablet/mobile collapses ──────────────────────────────────────────── */
@media (max-width: 980px) {
    .sq-banger-hero {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(440px, 60vh) auto;
    }
    .sq-banger-content { left: 20px; right: 20px; bottom: 24px; }
    .sq-banger-score { top: 16px; right: 16px; padding: 10px 14px; }
    .sq-banger-score-val { font-size: 28px; }
    .sq-banger-secondary {
        grid-template-rows: 220px 220px;
        height: auto;
    }
}
@media (max-width: 540px) {
    .sq-banger-hero { gap: 8px; }
    .sq-banger-secondary { grid-template-rows: 180px 180px; gap: 8px; }
    .sq-banger-tile-name { font-size: 1.1rem; }
    .sq-banger-name { font-size: clamp(2.4rem, 12vw, 4rem); }
}

/* ─── Front-page hero mosaic: 6-cell asymmetric layout ──────────────────
   1 huge main + 2 medium + 3 small. On mobile collapses to a 2-col grid
   then 1-col on the smallest phones. */
.sq-hero-mosaic--six {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        "main med-a sm-a"
        "main med-a sm-b"
        "main med-b sm-c";
    gap: 8px;
    aspect-ratio: 16 / 10;
    max-height: 640px;
}
.sq-hero-mosaic--six .cell-main  { grid-area: main; }
.sq-hero-mosaic--six .cell-med-a { grid-area: med-a; }
.sq-hero-mosaic--six .cell-med-b { grid-area: med-b; }
.sq-hero-mosaic--six .cell-sm-a  { grid-area: sm-a; }
.sq-hero-mosaic--six .cell-sm-b  { grid-area: sm-b; }
.sq-hero-mosaic--six .cell-sm-c  { grid-area: sm-c; }

@media (max-width: 980px) {
    .sq-hero-mosaic--six {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(4, 1fr);
        grid-template-areas:
            "main main"
            "main main"
            "med-a med-b"
            "sm-a  sm-b";
        aspect-ratio: 4 / 5;
    }
    .sq-hero-mosaic--six .cell-sm-c { display: none; }
}
@media (max-width: 540px) {
    .sq-hero-mosaic--six {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1.6fr 1fr 1fr;
        grid-template-areas:
            "main main"
            "med-a med-b"
            "sm-a  sm-b";
        aspect-ratio: auto;
        max-height: none;
    }
}

/* ─── Phones: legacy 3-cell hero + featured grids stack to 1col ─── */
@media (max-width: 720px) {
    .sq-hero-mosaic:not(.sq-hero-mosaic--six) { grid-template-columns: 1fr !important; }
    .sq-featured-grid, .sq-recently-added { grid-template-columns: 1fr !important; }
}

/* ─── Phones: data freshness banner stays readable ─── */
@media (max-width: 640px) {
    .sq-data-freshness { font-size: 11px !important; padding: 8px 12px !important; flex-wrap: wrap; }
}

/* ─── Universal: kill any remaining inline width=320/280 px iframes from old templates ─── */
iframe[width="320"][height="180"],
iframe[width="280"][height="400"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
}

/* ─── Phones: H2H split screen stacks ─── */
@media (max-width: 820px) {
    .sq-h2h-split { grid-template-columns: 1fr !important; }
    .sq-h2h-vs { transform: rotate(90deg); }
}

/* ─── Gallery frame — proper aspect-ratio wrappers for embeds ─────────────
   The legacy gallery used <iframe width="320" height="180"> directly. On
   the responsive grid that produced "wide and short" videos (iframe stays
   180px tall while CSS stretched width to fill the cell). Wrapping inside
   a div with `aspect-ratio` + absolutely-positioned iframe fixes it.
   Also applies to Instagram embeds (4:5). */
.sq-gallery-frame {
    position: relative;
    width: 100%;
    background: #06070A;
    overflow: hidden;
    border-radius: 4px;
}
.sq-gallery-frame--16x9 { aspect-ratio: 16 / 9; }
.sq-gallery-frame--4x5  { aspect-ratio: 4 / 5; }
.sq-gallery-frame iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* ─── Photo credit overlay — small badge on hero/gallery photos that says
   where the photo came from (Hardcore FBB, Wikimedia, etc.). Bottom-right
   corner, mono small caps, semi-transparent so it doesn't fight the photo. */
.sq-photo-credit {
    position: absolute;
    bottom: 8px;
    right: 10px;
    z-index: 4;
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    background: rgba(10,11,13,0.55);
    padding: 4px 8px;
    border-radius: 2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-decoration: none;
    pointer-events: auto;
    transition: background 0.15s, color 0.15s;
}
.sq-photo-credit:hover {
    background: rgba(10,11,13,0.85);
    color: var(--sq-copper-hot, #E09B46);
}
.sq-photo-credit .lbl { opacity: 0.65; margin-right: 4px; }

/* ─── Phones: methodology / dossier prose narrower for readability ─── */
@media (max-width: 640px) {
    .sq-prose, .sq-dossier-body, .sq-guide-prose {
        font-size: 16px;
        line-height: 1.65;
    }
    .sq-prose h2, .sq-dossier-body h2 { font-size: 24px !important; line-height: 1.2; }
    .sq-prose h3, .sq-dossier-body h3 { font-size: 19px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * MOBILE PASS 2 (May 2026) — every defect surfaced by the user's mobile
 * screenshot batch:
 *   • Header stacking 3 rows (wordmark / hamburger / search)
 *   • Hero proof stat row clipped off-viewport
 *   • Andrea Shaw leaderboard hero — Iron Score panel + sibling cards clip
 *   • Recently Added 4-col grid never collapses on phone
 *   • Dossier preview card has a huge empty whitespace gap
 *   • "Found Something Wrong?" headline illegible on cream paper context
 *   • Head-to-Head picker has empty pre-form gap, athlete-B field clips
 *   • Competition list card "2026" mega-year overflows + cards clip right
 *   • Competition results table clips PLACE column on mobile
 *   • Sponsors/Find/Share 2-col bottom block doesn't collapse
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── HEADER (mobile): wordmark + hamburger on a single row ──────────────
   Defeats the sq-v3 `flex-direction: column` rule under 900px that was
   forcing 3 stacked rows. Search action moves into the open menu drawer
   so the header bar stays minimal and tap-friendly. */
@media (max-width: 980px) {
    .sq-header-inner {
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 16px !important;
        position: relative;
    }
    .sq-wordmark { flex: 0 0 auto; }
    .sq-wordmark .wm-1, .sq-wordmark .wm-2 { font-size: 18px !important; }
    .sq-wordmark .wm-rule { width: 18px !important; margin: 3px 0 !important; }
    .sq-menu-toggle { margin-left: auto !important; order: 99; }
    /* Hide the standalone search button outside the drawer; it reappears
       inside the menu when opened (rule below) */
    .sq-header-actions { display: none !important; }
    .sq-nav.is-open ~ .sq-header-actions,
    .sq-header .sq-nav.is-open + script + .sq-header-actions { display: flex !important; }
    /* Topline strip: never wrap mid-word. Allow horizontal scroll on
       narrow viewports rather than spawning a 2-line stack. */
    .sq-header-topline {
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sq-header-topline::-webkit-scrollbar { display: none; }
}

/* ─── HOMEPAGE HERO PROOF STATS — 4-up flex row reflows to 2x2 grid ─── */
@media (max-width: 720px) {
    .sq-hero-proof {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 24px !important;
        padding-top: 20px !important;
    }
    .sq-hero-proof-stat .val { font-size: 28px !important; }
    .sq-hero-proof-stat .lbl { font-size: 10px !important; letter-spacing: 0.12em !important; }
}

/* ─── RECENTLY ADDED + leaderboard "all athletes" 4-col grid ─────────────
   .sq-athlete-grid (homepage Recently Added strip) was repeat(4,1fr)
   without a mobile collapse, so the 3rd & 4th cards extended past the
   viewport edge. Reflow: 2-col on tablet, 1-col on phone. */
@media (max-width: 980px) {
    .sq-athlete-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
    }
}
@media (max-width: 720px) {
    .sq-athlete-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}
@media (max-width: 420px) {
    .sq-athlete-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ─── HOMEPAGE LEADERBOARD HERO (Andrea Shaw card + sibling tiles) ──────
   The hero photo card is sized correctly but the Iron Score side panel
   was floating off the right edge. Stack vertically below 720px. */
@media (max-width: 820px) {
    .sq-leader-hero,
    .sq-leader-banger {
        display: block !important;
        padding: 0 !important;
    }
    .sq-leader-hero .iron-panel,
    .sq-leader-banger .iron-panel,
    .sq-leader-hero .sq-iron-panel,
    .sq-leader-banger .sq-iron-panel {
        position: static !important;
        margin: 12px 16px !important;
        width: auto !important;
        max-width: none !important;
        right: auto !important;
        top: auto !important;
    }
}

/* ─── DOSSIER HOMEPAGE FEATURE CARD — kill the big empty whitespace
   between the eyebrow pills and the dossier title.

   Root cause: sq-v3 line 2020 forces `.sq-feature-image { aspect-ratio:
   16/10 !important }` on mobile, which beats sq-v3 line 1779-1784's
   `.sq-feature-no-image .sq-feature-image { aspect-ratio: auto }` (no
   `!important` there). When the dossier has no thumbnail, the empty
   placeholder is given a 16:10 box anyway, producing the giant cream
   void in the screenshot. Override with !important so the no-image
   placeholder shrink-wraps its inline-flex pill content. */
@media (max-width: 900px) {
    .sq-feature.sq-feature-no-image .sq-feature-image {
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 0 !important;
        background: transparent !important;
        margin-bottom: 8px;
    }
    .sq-feature.sq-feature-no-image .sq-feature-empty {
        width: auto;
    }
}

/* ─── HEAD-TO-HEAD PICKER (template-head-to-head.php) ──────────────────
   Desktop grid is `1fr auto 1fr auto` (A | VS | B | submit). On mobile
   stack to a single column with VS becoming a centered chip between
   A and B. Also tighten the hero padding so the form sits closer to
   the page title — no more giant empty gap. */
@media (max-width: 820px) {
    .sq-h2h-hero { padding: 28px 0 24px !important; }
    .sq-h2h-title { font-size: clamp(2.2rem, 11vw, 3.8rem) !important; line-height: 0.92 !important; }
    .sq-h2h-picker {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        max-width: 100% !important;
    }
    .sq-h2h-picker .sq-h2h-vs-chip {
        text-align: center;
        padding: 4px 0 !important;
        order: 0;
    }
    .sq-h2h-picker .sq-h2h-input,
    .sq-h2h-picker .field { width: 100%; max-width: 100%; box-sizing: border-box; }
}

/* ─── COMPETITION ARCHIVE CARDS (archive-sq_competition.php) ───────────
   Desktop grid is repeat(3,1fr). On phone collapse to 1 col and cap
   the giant "2026" year so it doesn't overflow the card vertically. */
@media (max-width: 980px) {
    .sq-comp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}
@media (max-width: 640px) {
    .sq-comp-grid {
        grid-template-columns: 1fr !important;
    }
    .sq-comp-year {
        font-size: 32px !important;
        bottom: 10px !important;
        right: 12px !important;
        line-height: 1 !important;
    }
    .sq-comp-body h3 { font-size: 18px !important; line-height: 1.15 !important; }
    .sq-comp-photo { aspect-ratio: 16/9 !important; }
}

/* ─── COMPETITION DETAIL HERO STAT ROW (single-sq_competition.php) ────
   ATHLETES / DIVISIONS / PRO CARDS / TROPHIES tiles need to wrap
   instead of horizontally scrolling off-screen. */
@media (max-width: 820px) {
    .sq-comp-hero-stats,
    .sq-event-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        overflow: visible !important;
    }
}

/* ─── ATHLETE COMPETITION RESULTS TABLE (single-sq_athlete.php) ───────
   .sq-results table has 5 columns and a fixed-width PLACE pill that
   forces horizontal overflow on phones. Wrap in a horizontal-scroll
   container so the user can scroll the TABLE without scrolling the
   page. Min-width keeps columns readable. */
@media (max-width: 820px) {
    .sq-results-wrap, table.sq-results, table.sq-results-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table.sq-results, table.sq-results-table {
        min-width: 560px;
        width: 100%;
    }
    table.sq-results th, table.sq-results td,
    table.sq-results-table th, table.sq-results-table td {
        white-space: nowrap;
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
}

/* ─── 2-COL SPONSORS / FIND / SHARE bottom block (single-sq_athlete) ──
   Inline style `display:grid;grid-template-columns:1fr 1fr;gap:32px`
   never collapses. Beat the inline style with !important + attribute
   selector. Already partially handled above for ≤900px — extend down
   to 720px and tighten the gap so blocks don't squish. */
@media (max-width: 820px) {
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    /* Long Wikipedia/IG link rows in the Find block — allow wrap */
    .sq-profile-hero-info a[href*="wikipedia"],
    .sq-profile-hero-info a[href*="instagram"] { word-break: break-word; }
    /* Share-this-card URL field — break the long URL instead of clipping */
    code#sq-athlete-share-url {
        white-space: normal !important;
        word-break: break-all !important;
        overflow-x: visible !important;
    }
}

/* ─── "FOUND SOMETHING WRONG?" CTA — defensive contrast ───────────────
   The methodology page card uses inline `background:var(--sq-ink-2)`,
   but renders as cream when wrapped in a paper section context. Pin a
   high-contrast pair so the headline stays legible regardless. */
section[style*="var(--sq-ink-2)"],
section[style*="var( --sq-ink-2 )"] {
    background: #13151A !important;
    color: #f2efe8 !important;
}
section[style*="var(--sq-ink-2)"] h1,
section[style*="var(--sq-ink-2)"] h2,
section[style*="var(--sq-ink-2)"] h3 { color: #f2efe8 !important; }
section[style*="var(--sq-ink-2)"] p { color: rgba(242,239,232,0.82) !important; }

/* ─── ATHLETE PROFILE NAME — never let "ANDREA SHAW" overflow on phone ── */
@media (max-width: 820px) {
    .sq-profile-hero-text .sq-profile-name {
        font-size: clamp(2.2rem, 9.5vw, 3.6rem) !important;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    .sq-profile-meta { font-size: 11px !important; flex-wrap: wrap; }
    .sq-profile-meta .sep { padding: 0 4px !important; }
    .sq-profile-actions { gap: 8px !important; flex-wrap: wrap; }
    .sq-profile-actions .btn { padding: 8px 14px !important; font-size: 12px !important; }
}

/* ─── BREADCRUMBS — wrap long athlete names instead of clipping ───── */
@media (max-width: 640px) {
    .sq-breadcrumbs {
        flex-wrap: wrap;
        font-size: 11px !important;
        line-height: 1.5;
        padding: 8px 0 !important;
    }
}