/*
 * Album photos redesign (ms05 pages) — self-contained, no dependency on the modern
 * styles.css. Two parts: (1) a modern restyle of the album thumbnail grid, and
 * (2) the immersive full-screen lightbox opened by album-viewer.js.
 */

/* ------------------------------------------------------------------ *
 * 0. Album page chrome (this stylesheet only loads on the album page)
 * ------------------------------------------------------------------ */

/* Album title */
#content h1 {
    color: #14141a;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.1;
    margin: 6px 0 14px;
}

/* Album meta header: logo + coverage + byline + date on one clean row */
#content > section > header {
    align-items: center;
    border-bottom: 1px solid #e4e4e8;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
}
#content > section > header .share { display: none; }
#content > section > header figure.meet.logo,
#content > section > header figure.author {
    margin: 0;
    flex: 0 0 auto;
}
#content > section > header figure.meet.logo img,
#content > section > header figure.author img {
    border-radius: 8px;
    height: 46px;
    width: 46px;
    object-fit: cover;
    display: block;
}
#content > section > header .coverage a.meet {
    color: #000062;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
#content > section > header .byline {
    color: #55555c;
    font-size: 14px;
}
#content > section > header .byline a { color: #55555c; }
#content > section > header .published {
    color: #8a8a92;
    font-size: 13px;
    margin-left: auto;
}

/* Filter row: Event Folders + Athlete side by side.
   flex-start (not flex-end) so both labels sit on the same baseline regardless of
   any height difference between the two controls. */
#frmFilter {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 16px;
}

/* Both filter fields share one sizing rule so they are always equal width and
   wrap together — divergent max-widths here are what knocked them out of
   alignment previously. */
.field.dropdown,
.album-search-field {
    flex: 1 1 300px;
    margin: 0;
    max-width: 420px;
    min-width: 0;
}

/* Identical labels (same size, weight and spacing → same baseline). */
.field.dropdown label,
.album-search-field > label {
    color: #8a8a92;
    display: block;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    line-height: 1.2;
    margin: 0 0 6px;
    text-transform: uppercase;
}

/* Legacy ms05 renders its own chevron icon inside .input; hide it or it stacks on
   top of the custom SVG chevron below (the "double arrow"). */
.field.dropdown .input .fa,
.field.dropdown .input i { display: none !important; }

/* IMPORTANT: ms05 (default.css) draws the visible box on the `.input` WRAPPER
   (`div.field div.input { border: solid 1px #141414 }`) and forces
   `border: 0 !important` on the select itself at a higher specificity than we can
   reach. So the wrapper — not the select — has to carry the border/radius here,
   otherwise the dropdown keeps its hard black square box while the search input
   is soft grey and rounded. */
.field.dropdown .input {
    background: #fff !important;
    border: 1px solid #cfcfd6 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    height: 44px !important;
    line-height: normal !important;
    overflow: hidden;
    padding: 0 !important;
    position: relative;
}
.field.dropdown .input:focus-within {
    border-color: #000062 !important;
    box-shadow: 0 0 0 2px #000062 !important;
}

/* The select sits transparent inside that wrapper and carries the custom chevron.
   ms05's height/line-height (32px) are not !important, so these win. */
.field.dropdown select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%236b6b76'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-position: right 14px center !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    color: #14141a !important;
    display: block !important;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    height: 42px !important;
    line-height: 42px !important;
    margin: 0 !important;
    outline: none !important;
    padding: 0 40px 0 14px !important;
    width: 100% !important;
}

/* Search input — matched to the wrapper box above, pixel for pixel. */
.album-search-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #fff !important;
    border: 1px solid #cfcfd6 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    color: #14141a !important;
    display: block !important;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    height: 44px !important;
    line-height: normal !important;
    margin: 0 !important;
    padding: 0 34px 0 14px !important;
    width: 100% !important;
}
.album-search-input:focus-visible {
    border-color: #000062 !important;
    outline: 2px solid #000062 !important;
    outline-offset: 2px;
}

.album-search { position: relative; }
/* Legacy ms05 styles buttons inside .field with selectors more specific than a
   single class, which both forced this button visible when empty and stretched it
   to a 240x16 box across the input's text area (it sets `left`, and with our
   `right` also set the width resolved to the gap between them). The visible "x"
   therefore sat mid-field and was not where the clickable box was. Scope these
   rules under #content so they win on specificity rather than on !important
   alone, and pin an explicit square hit target in the corner. */
#content .album-search button.album-search-clear {
    align-items: center;
    background: none !important;
    border: 0 !important;
    bottom: auto !important;
    box-shadow: none !important;
    color: #8a8a92 !important;
    cursor: pointer;
    display: none !important;
    font-size: 20px !important;
    height: 30px !important;
    justify-content: center;
    left: auto !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    right: 7px !important;
    top: 50% !important;
    transform: translateY(-50%);
    width: 30px !important;
    z-index: 3;
}
/* Only shown by album-viewer.js when there is something to clear. */
#content .album-search button.album-search-clear.is-shown { display: flex !important; }
#content .album-search button.album-search-clear:hover { color: #14141a; }
#content .album-search-results {
    background: #fff;
    border: 1px solid #d0d0d6;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    display: none;
    left: 0;
    list-style: none;
    margin: 4px 0 0;
    max-height: 330px;
    overflow-y: auto;
    padding: 4px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
}
#content .album-search-results.is-open { display: block; }
#content .album-search-results.opens-up {
    bottom: 100%;
    margin: 0 0 4px;
    top: auto;
}
#content .album-search-results > li {
    list-style: none;
    margin: 0;
    width: auto;
}
#content .album-search-item {
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    padding: 8px 10px;
}
.album-search-item:hover,
.album-search-item.is-active { background: #f2f2f6; }
.album-search-item.is-active { box-shadow: inset 3px 0 #000062; }
.ass-badge {
    border-radius: 3px;
    color: #fff;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 3px 6px;
    text-transform: uppercase;
}
.ass-badge.ass-team { background: #000062; }
.ass-badge.ass-athlete { background: #6b6b76; }
.ass-name {
    color: #14141a;
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ass-count { color: #8a8a92; flex: 0 0 auto; font-size: 12px; font-weight: 600; }
.album-search-none { color: #8a8a92; font-size: 13px; padding: 10px; }

/* "Your athletes & teams here" — personalized quick-filter chips (the album's
   tagged entities the logged-in user follows). Mirrors calendar/results "my" surfacing. */
.album-following {
    background: #f6f6fa;
    border: 1px solid #e4e4e8;
    border-radius: 10px;
    margin-bottom: 16px;
    padding: 12px 14px;
}
.album-following-label {
    color: #55555c;
    display: block;
    font: 700 11px/1 "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.album-following-label .fa { color: #f5a623; margin-right: 4px; }
.album-following-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none !important;
    margin: 0;
    padding: 0;
}
/* ms05 sets list-style + padding on li elsewhere, which shows a stray bullet
   next to each chip — reset on the item itself, not just the list. */
.album-following-chips > li {
    background: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
.album-following-chips > li::before,
.album-following-chips > li::marker { content: none !important; }
.album-chip {
    align-items: center;
    background: #fff;
    border: 1px solid #cfcfd6;
    border-radius: 999px;
    color: #14141a;
    display: inline-flex;
    font: 600 13px/1 "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    gap: 7px;
    padding: 8px 13px;
    text-decoration: none;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.album-chip .fa { color: #000062; font-size: 12px; }
.album-chip-name { white-space: nowrap; }
.album-chip-count {
    background: #ececf2;
    border-radius: 999px;
    color: #55555c;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
}
.album-chip:hover { border-color: #000062; color: #000062; }
.album-chip.is-active { background: #000062; border-color: #000062; color: #fff; }
.album-chip.is-active .fa,
.album-chip.is-active .album-chip-count { color: #fff; }
.album-chip.is-active .album-chip-count { background: rgba(255, 255, 255, 0.22); }
.album-chip-clear { border-style: dashed; }
.album-chip-clear .fa { color: #8a8a92; }

/* ------------------------------------------------------------------ *
 * Free-user (paywall funnel) view
 * ------------------------------------------------------------------ *
 * paywall.css absolutely positions #proCallToAction at top:28px/z-index:10,
 * which lands it directly on top of the filter row and makes the folder
 * dropdown and athlete/team search unclickable for free users. The album page
 * wants the opposite: browse the thumbnails, filter freely, and hit the join
 * prompt only on click-through to a full-size photo (the grid anchors already
 * point at /join when funnelled, and the original/download routes are gated
 * server-side). So drop it back into normal flow between the filters and the
 * grid — this exposes no additional content, it only unblocks the controls.
 *
 * paywall.css loads after this file, so these selectors are deliberately more
 * specific than its `.blurry #proCallToAction` rather than using !important.
 */
#content section.blurry {
    min-height: 0;
    padding: 0;
}
#content section.blurry #proCallToAction {
    left: auto;
    margin: 0 auto 20px;
    max-width: 600px;
    position: static;
    top: auto;
    width: 100%;
}

/* paywall.css draws `.blurry::after` as a full-height fade overlay
   (position:absolute; width/height:100%; z-index:2) across the whole section.
   For a short article/table teaser that is the point, but here it covers the
   entire album — including the filter row — and silently swallows every click,
   so logged-out users cannot use the folder dropdown or the athlete/team search
   at all. The album grid is deliberately browsable by free users, so the fade
   has no purpose on this page: remove it and keep the controls in their own
   stacking context above anything else the funnel adds. */
#content section.blurry::after {
    content: none !important;
    display: none !important;
}
/* Only the filter nav gets lifted — NOT nav.pagination. Matching every direct
   nav put the pagination in the same stacking layer, and being later in the DOM
   it painted its "Page N of M" text straight through the search dropdown. */
#content section.blurry > nav:not(.pagination) {
    position: relative;
    z-index: 5;
}

/* Pagination — pill buttons */
nav.pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}
/* Only the direct nav links (First/Prev/Next/Last) are pills — not the folder link
   nested inside .current. */
nav.pagination > a {
    align-items: center;
    background: #fff;
    border: 1px solid #cfcfd6;
    border-radius: 999px;
    color: #000062;
    display: inline-flex;
    font: 700 13px/1 "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    gap: 6px;
    padding: 8px 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
nav.pagination > a:hover { background: #000062; border-color: #000062; color: #fff; }
nav.pagination .current {
    color: #55555c;
    font-size: 13px;
    margin-left: auto;
}
nav.pagination .current a {
    color: #000062;
    font-weight: 700;
    text-decoration: none;
}
nav.pagination .current a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * 1. Album thumbnail grid
 * ------------------------------------------------------------------ */
ul.thumbnails.photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 18px 0;
    padding: 0;
}

ul.thumbnails.photos > li {
    margin: 0;
    padding: 0;
    width: auto;
}

ul.thumbnails.photos > li.adSlot {
    grid-column: 1 / -1;
    height: auto;
    min-height: 250px;
    width: 100%;
}

ul.thumbnails.photos > li > a {
    background: #1a1a1e;
    border-radius: 6px;
    display: block;
    overflow: hidden;
    position: relative;
    aspect-ratio: 3 / 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
}

ul.thumbnails.photos > li > a:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

ul.thumbnails.photos > li > a > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

.team-photo-locked::after {
    background: rgba(0, 0, 98, 0.92);
    border-radius: 999px;
    color: #fff;
    content: "PRO";
    font: 700 10px/1 "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    letter-spacing: 0.5px;
    padding: 6px 9px;
    position: absolute;
    right: 8px;
    text-transform: uppercase;
    top: 8px;
}

.team-photo-paywall {
    align-items: center;
    background: #f4f4f8;
    border: 1px solid #d7d7df;
    border-radius: 6px;
    color: #303038;
    display: flex;
    font: 600 14px/1.4 "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    gap: 14px;
    justify-content: space-between;
    margin: 12px 0 16px;
    padding: 12px 14px;
}

.team-photo-paywall a {
    background: #000062;
    border-radius: 999px;
    color: #fff;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 14px;
    text-decoration: none;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 * 2. Immersive lightbox
 * ------------------------------------------------------------------ */
html.pv-lock { overflow: hidden; }

.pv-overlay {
    --pv-bar: rgba(18, 18, 22, 0.95);
    --pv-line: rgba(255, 255, 255, 0.14);
    --pv-navy: #000062;
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #0e0e12;
    color: #fff;
    flex-direction: column;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}
.pv-overlay.is-open { display: flex; }

.pv-sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Top bar */
.pv-topbar {
    align-items: center;
    background: var(--pv-bar);
    border-bottom: 1px solid var(--pv-line);
    display: flex;
    flex: 0 0 auto;
    gap: 16px;
    padding: 12px 20px;
}
.pv-titlewrap { display: flex; flex-direction: column; min-width: 0; }
.pv-title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv-position,
.pv-quality {
    color: #a9a9b3;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    margin-top: 3px;
    text-transform: uppercase;
}
.pv-quality { margin-top: 1px; }
.pv-quality.is-pending::before {
    animation: pv-spin 0.8s linear infinite;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    border-top-color: #fff;
    content: "";
    display: inline-block;
    height: 8px;
    margin-right: 5px;
    vertical-align: 1px;
    width: 8px;
}

.pv-actions { align-items: center; display: flex; gap: 8px; margin-left: auto; }
.pv-btn {
    align-items: center;
    background: transparent;
    border: 1px solid var(--pv-line);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: 700 13px/1 "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    gap: 7px;
    letter-spacing: 0.3px;
    padding: 9px 15px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
    white-space: nowrap;
}
.pv-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.pv-btn svg { height: 16px; width: 16px; }
.pv-btn.pv-icon { border-radius: 50%; padding: 9px; }
.pv-btn.pv-download { background: #fff; border-color: #fff; color: var(--pv-navy); }
.pv-btn.pv-download:hover { background: #e7e7ef; border-color: #e7e7ef; }
.pv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Stage */
.pv-stagewrap {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-height: 0;
    position: relative;
}
.pv-stage {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
}
.pv-image {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}
.pv-overlay.is-loading .pv-image { opacity: 0.25; }
.pv-spinner {
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    height: 34px;
    width: 34px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -17px 0 0 -17px;
    animation: pv-spin 0.8s linear infinite;
    display: none;
}
.pv-overlay.is-loading .pv-spinner { display: block; }
@keyframes pv-spin { to { transform: rotate(360deg); } }

.pv-notice {
    background: rgba(18, 18, 22, 0.88);
    border: 1px solid var(--pv-line);
    border-radius: 6px;
    bottom: 64px;
    color: #fff;
    display: none;
    font-size: 13px;
    left: 50%;
    margin: 0;
    max-width: 520px;
    padding: 9px 12px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    z-index: 3;
}

.pv-caption {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    bottom: 0;
    color: #fff;
    font-size: 13px;
    left: 0;
    line-height: 1.5;
    padding: 30px 22px 16px;
    position: absolute;
    right: 0;
}

/* Nav arrows */
.pv-nav {
    align-items: center;
    background: rgba(20, 20, 24, 0.55);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 50px;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.14s ease;
    width: 50px;
    z-index: 2;
}
.pv-nav:hover { background: rgba(0, 0, 0, 0.85); }
.pv-nav svg { height: 26px; width: 26px; }
.pv-prev { left: 18px; }
.pv-next { right: 18px; }

/* Thumbnail rail */
.pv-thumbs {
    background: var(--pv-bar);
    border-top: 1px solid var(--pv-line);
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 16px;
    scrollbar-width: thin;
}
.pv-thumb {
    background: none;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    flex: 0 0 auto;
    height: 60px;
    opacity: 0.5;
    overflow: hidden;
    padding: 0;
    transition: opacity 0.14s ease, border-color 0.14s ease;
    width: 104px;
}
.pv-thumb:hover { opacity: 0.85; }
.pv-thumb.is-active { border-color: #fff; opacity: 1; }
.pv-thumb img { height: 100%; width: 100%; object-fit: cover; display: block; }

/* Mobile */
@media (max-width: 767px) {
    ul.thumbnails.photos { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .pv-topbar { gap: 8px; padding: 10px 12px; }
    .pv-title {
        font-size: 15px;
        line-height: 1.15;
        max-width: 42vw;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }
    .pv-btn { padding: 9px; border-radius: 50%; }
    .pv-btn span { display: none; }
    .pv-btn.pv-fs { display: none; }
    .pv-nav { height: 42px; width: 42px; }
    .pv-thumb { height: 48px; width: 84px; }
}