/* ================================================================
   athletes.css — page-specific styles for athletes.php / athlete.php
   Requires: theme.css
   ================================================================ */

/* ── Narrow single-column layout (duplicated from results.css /
   coming-soon.css per this site's per-page-stylesheet convention —
   neither of those files is loaded on these two pages) ── */
.page-wrap-narrow {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}
/* Wider variant for athletes.php's results table specifically (more
   columns than the narrow profile/history layout athlete.php uses) —
   kept as its own class so athlete.php's page-wrap-narrow is untouched. */
.page-wrap-wide {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}
.page-body-simple {
    padding: 32px 0 60px;
}
.hero-inner-narrow {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
}

/* ── Hero stats (athlete.php profile header) ── */
.hero-stat-row { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 20px; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat-num {
    font-family: var(--font-display); font-weight: 800;
    font-size: 2rem; line-height: 1; color: var(--gold);
}
.hero-stat-label {
    font-size: 0.68rem; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--ink-soft); margin-top: 2px;
}

.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.8rem; font-weight: 600; color: var(--gold);
    text-decoration: none; margin-top: 20px; transition: opacity 0.12s;
}
.back-link:hover { opacity: 0.75; }

/* ── Filter bar ── */
.filter-bar {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 24px;
    background: var(--card-bg);
    border: 1px solid var(--rule); border-radius: var(--radius-lg);
    padding: 14px;
}
.filter-input,
.filter-select {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--rule-mid); border-radius: var(--radius);
    color: var(--ink); font-size: 0.82rem; font-family: var(--font-body);
    padding: 8px 10px; height: 38px;
    /* Tells the browser to render this control's native chrome (the
       select's dropdown popup, in particular) using dark UI colors
       instead of the OS default light popup — better cross-browser
       support than trying to force option colors alone. */
    color-scheme: dark;
}
.filter-select option {
    background: var(--card-bg);
    color: var(--ink);
}
.filter-input:focus,
.filter-select:focus { outline: none; border-color: var(--gold-rule); }
.filter-input::placeholder { color: var(--ink-soft); }
.filter-submit {
    font-family: var(--font-display); font-weight: 700;
    font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase;
    background: var(--gold-btn); color: #0a0900;
    border: none; border-radius: var(--radius);
    padding: 0 20px; height: 38px; cursor: pointer;
    transition: background 0.12s;
}
.filter-submit:hover { background: var(--gold-bright); }

/* ── Results table ── */
.results-table-wrap {
    overflow-x: auto;
    background: var(--card-bg);
    border: 1px solid var(--rule); border-radius: var(--radius-lg);
}
.results-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem;
    min-width: 860px;
}
.results-table thead th {
    text-align: left;
    font-family: var(--font-display); font-weight: 700;
    font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase;
    color: var(--gold); border-bottom: 1px solid var(--gold-rule);
    padding: 12px 14px; white-space: nowrap;
}
.results-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-mid); vertical-align: middle;
}
.results-table tbody tr:last-child td { border-bottom: none; }
.results-table tbody tr:hover td { background: rgba(255,255,255,0.02); }

.row-link { color: var(--ink); text-decoration: none; font-weight: 600; }
.row-link:hover { color: var(--gold); }
.row-sub { display: block; font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; }

.col-placing { text-align: right; white-space: nowrap; }
.placing-num { font-family: var(--font-display); font-weight: 700; color: var(--ink-mid); }
.placing-num.placing-top { color: var(--gold); }
.placing-pending { font-size: 0.75rem; color: var(--ink-soft); font-style: italic; }

.col-count { text-align: right; white-space: nowrap; color: var(--ink-soft); }

.overall-badge {
    display: inline-block;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 2px 6px; border-radius: 3px; white-space: nowrap; vertical-align: middle;
    margin-left: 6px; background: var(--gold-lt); color: var(--gold); border: 1px solid var(--gold-rule);
}
/* Pro Card icon sits to the left of the placing text, inside the same
   right-aligned col-placing cell — since it's the *first* thing in the
   cell rather than the last, the placing text itself (the actual thing
   that needs to line up row to row) still anchors to the same right
   edge whether or not a given row has the icon. */
.pro-card-icon {
    height: 16px; width: auto;
    vertical-align: middle; margin-right: 6px;
}

/* ── Pro Card summary panel (athlete.php only) — the headline achievement
   on this page, so it gets the boldest treatment: a gold gradient card
   with a glow, not just another info box. ── */
.pro-card-panel {
    background: linear-gradient(135deg, rgba(201,168,76,0.24) 0%, rgba(201,168,76,0.05) 100%);
    border: 2px solid var(--gold);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 28px;
    box-shadow: 0 4px 28px rgba(201,168,76,0.2), var(--shadow);
}
.pro-card-panel-title {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.6rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--gold-bright); margin-bottom: 16px;
}
.pro-card-panel-title .pro-card-icon {
    height: 38px; margin-right: 0;
    filter: drop-shadow(0 0 8px rgba(232,194,96,0.5));
}
.pro-card-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pro-card-list li {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
    font-size: 0.92rem;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--gold-rule); border-radius: var(--radius);
    padding: 10px 14px;
}
.pro-card-list li .pro-card-icon { height: 20px; margin-right: 2px; }
.pro-card-category { font-weight: 700; color: var(--ink); font-size: 0.98rem; }
.pro-card-sep { color: var(--gold); font-weight: 700; }
.pro-card-list .row-sub { display: inline; margin-top: 0; margin-left: 2px; }

/* Pro Card hero stat gets the gold-bright treatment instead of the
   standard gold hero-stat-num, so it pops among the other stats too. */
.hero-stat-num.pro-card-stat-num { color: var(--gold-bright); }

/* ── Pro ranking panel (athlete.php) ──
   Deliberately quieter than .pro-card-panel above: a flat card with a
   plain rule rather than the gold gradient and glow. The Pro Card is the
   headline achievement on this page and should stay the loudest thing on
   it; ranking is supporting information. ── */
.ranking-panel {
    background: var(--card-bg);
    border: 1px solid var(--rule-mid);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 28px;
}
.ranking-panel-title {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.25rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--gold); margin-bottom: 16px;
}
.ranking-panel-sub {
    font-family: var(--font-body); font-weight: 400; font-size: 0.72rem;
    text-transform: none; letter-spacing: 0; color: var(--ink-soft);
}
/* The age band (Open / Masters / Teen & Collegiate) sits beside the division
   in the panel title. Reads as a qualifier, not a second heading. */
.ranking-panel-band {
    font-size: 0.78rem; letter-spacing: 1px;
    color: var(--gold-bright); border: 1px solid var(--gold-rule);
    border-radius: 3px; padding: 2px 8px;
}
.ranking-prov {
    font-family: var(--font-body); font-weight: 600; font-size: 0.64rem;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--ink-soft); border: 1px solid var(--rule-mid);
    border-radius: 3px; padding: 1px 6px;
}

/* Dimmed means STALE — a pool whose last event was a previous season. It does
   NOT mean "lesser pool": a Masters rating is a current number about a real
   population, not a footnote to an Open one. */
.ranking-panel-secondary { opacity: 0.72; }
.ranking-panel-secondary .ranking-panel-title { color: var(--ink-mid); }
.ranking-panel-secondary .ranking-num { color: var(--ink-mid); }
.ranking-panel-secondary:hover { opacity: 1; }

.ranking-note-standalone {
    margin-top: -14px; margin-bottom: 28px;
}
.ranking-figures {
    display: flex; flex-wrap: wrap; gap: 28px 40px; margin-bottom: 18px;
}
.ranking-figure { display: flex; flex-direction: column; gap: 3px; }
.ranking-num {
    font-family: var(--font-display); font-weight: 800; font-size: 2rem;
    line-height: 1; color: var(--gold-bright);
}
.ranking-label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--ink-soft);
}
.ranking-medals { display: flex; gap: 12px; font-size: 1.15rem; color: var(--ink); }
/* An unrated pool's dash — deliberately not gold, so it doesn't read as a
   number that failed to load. */
.ranking-num-muted { color: var(--rule-mid); }
/* Default is the muted "peak NNNN" note; the signed season movement overrides
   it with delta-up/delta-down below, so those two rules must stay after this. */
.ranking-delta { font-size: 0.72rem; font-weight: 600; margin-top: 2px; color: var(--ink-soft); }
.delta-up   { color: #6abf69; }
.delta-down { color: #d98282; }

.hero-stat-num.rating-stat-num { color: var(--gold-bright); }

.ranking-class-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ranking-class-table th {
    text-align: left; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--ink-soft); font-weight: 600;
    padding: 6px 10px; border-bottom: 1px solid var(--rule-mid);
}
.ranking-class-table td {
    padding: 7px 10px; border-bottom: 1px solid var(--rule); color: var(--ink-mid);
}
.ranking-class-table tr:last-child td { border-bottom: none; }
.ranking-class-table td:first-child { color: var(--ink); font-weight: 600; }
.ranking-class-table .col-num,
.results-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.ranking-class-table th.col-num { text-align: right; }

.ranking-note {
    margin-top: 14px; font-size: 0.76rem; line-height: 1.55; color: var(--ink-soft);
}
.results-table .col-points { text-align: right; font-variant-numeric: tabular-nums; }
.points-none { color: var(--rule-mid); }

/* ── Pagination ── */
.pagination-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 18px; flex-wrap: wrap;
}
.page-link {
    font-size: 0.8rem; font-weight: 600; color: var(--gold);
    text-decoration: none; padding: 6px 12px; border-radius: var(--radius);
    border: 1px solid var(--gold-rule); transition: background 0.12s;
}
.page-link:hover { background: var(--gold-lt); }
.page-link-disabled {
    color: var(--ink-soft); border-color: var(--rule); cursor: default;
    opacity: 0.6;
}
.page-status { font-size: 0.78rem; color: var(--ink-soft); }

/* ── Responsive ── */
@media (max-width: 860px) {
    .filter-bar { grid-template-columns: 1fr 1fr; }
    .filter-submit { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .page-wrap-narrow,
    .page-wrap-wide { padding: 0 14px; }
    .filter-bar { grid-template-columns: 1fr; }

    /* .ranking-class-table (athlete.php) is the one table here not inside a
       .results-table-wrap, but it is width:100% with no min-width, so it
       SQUEEZES rather than overflows - six columns leave ~50px each and the
       Class labels wrap to three or four lines per row. Tightening the type
       and padding fixes the symptom without wrapping a table that never
       scrolls. */
    .ranking-class-table { font-size: 0.78rem; }
    .ranking-class-table th,
    .ranking-class-table td { padding: 6px 5px; }
}

/* ============================================================
   MEDIA
   Instagram links an athlete is tagged in, grouped by show.
   Only shows already listed in the competition history above can
   appear here - see the gate comment at the load site in
   athlete.php. Built on the same custom properties as everything
   else in this file so the theme carries over untouched.
   ============================================================ */
.athlete-media {
    background: var(--card-bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 18px 20px 14px;
    margin-top: 22px;
}
.media-h {
    font-family: var(--font-display);
    color: var(--gold);
    border-bottom: 1px solid var(--gold-rule);
    padding-bottom: 7px;
    margin: 0 0 14px;
    font-size: 1.05rem;
}
.media-show { margin-bottom: 16px; }
.media-show:last-of-type { margin-bottom: 4px; }
.media-show-hd {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.media-show-hd a {
    font-family: var(--font-display);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.92rem;
}
.media-show-hd a:hover { color: var(--gold); }
.media-show-date { color: var(--ink-soft); font-size: 0.76rem; }

/* 320px minimum is not arbitrary: Instagram's embed stops laying out properly
   below ~326px wide. On a phone the column goes full width, which clears it. */
.media-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.media-item {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}
/* Fixed height, because a plain iframe cannot self-size and we deliberately do
   not load Instagram's script to make it. Suits a square post; a tall portrait
   one is clipped, and the link below is how to see the whole thing. */
.media-embed {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
    background: var(--card-bg);
}
.media-item-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    text-decoration: none;
    color: var(--gold);
    font-size: 0.76rem;
    font-weight: 600;
    border-top: 1px solid var(--rule);
}
.media-item-icon { font-size: 1rem; line-height: 1; }
.media-item-cap {
    padding: 0 12px 11px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ink-mid);
    /* Stored plain and escaped on output, so the author's own line breaks
       are the only formatting there is. */
    white-space: pre-wrap;
    word-wrap: break-word;
}
.media-foot {
    color: var(--ink-soft);
    font-size: 0.72rem;
    line-height: 1.5;
    margin: 12px 0 0;
}