/* ===================================================================
   Sport theme - matchday
   Version: 1.0.1
   Author: Reveloni
   For: CMS 6.0.2+

   Characteristics: the visual language shared by football, volleyball
   and basketball - chalk court markings, a floodlit scoreboard and a
   squad number on every shirt. The theme never picks a discipline: the
   three page-card placeholders rotate a football, a volleyball and a
   basketball, all drawn in pure CSS, so any club sees its own sport.

   The admin colour scheme becomes the CLUB COLOUR: kit stripes, squad
   numbers, scoreboard glow and buttons all take it, which means the same
   theme serves a red, a blue and a yellow club without touching the CSS.
   The base surface stays chalk-neutral on purpose - no green turf, no
   hardwood parquet - so no sport is favoured.

   Light mode is a daytime court; dark mode is a night game under the
   floodlights: navy-black, glowing chalk lines, brighter club colour.

   Signature devices, all pure CSS: the scoreboard hero (LED dot matrix
   over a dark panel), centre-circle and halfway-line court markings,
   touchline double rules under headings, diagonal kit stripes on the
   header and footer bands, and squad-number counters on the cards.

   Changelog:
     1.0.1 - The dropdown menu opened but stayed invisible: overflow:hidden on
             the header (added to clip the kit stripes) clipped it away. The
             stripes are painted by an inset ::before and never overflow, so
             the rule is gone. Header logo enlarged to 80px (56px on mobile)
             to match Aurora Plus, and the mobile dropdown is now anchored
             under the hamburger button rather than a hard-coded top offset.
     1.0.0 - Initial release. Built with auto-fit grids, .page-card-image
             styled as the image itself, and the crop-safe gallery pipeline
             from day one (a lone content image spans the width; portraits
             and squares crop to 4:3 instead of collapsing or stretching).
   =================================================================== */

/* === RESET === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === PALETTE ===
   Engine injects --primary / --secondary / --accent on :root (inline).
   --sp-club is the club colour (from --primary); --sp-led is the
   scoreboard glow (from --accent). The scoreboard panel stays dark in
   BOTH modes - a real scoreboard does. */
:root {
    /* Chalk-neutral court surfaces */
    --sp-surface: #f2f4f7;
    --sp-surface-raised: #ffffff;
    --sp-surface-deep: #e4e8ee;

    /* Ink */
    --sp-ink: #12161d;
    --sp-ink-soft: #4a5364;
    --sp-ink-faint: #8a93a3;

    /* Club colour + scoreboard LED */
    --sp-club: color-mix(in srgb, var(--primary, #1f4fd8) 72%, #1a3fae);
    --sp-club-bright: color-mix(in srgb, var(--primary, #3f6ff0) 60%, #3f6ff0);
    --sp-club-soft: color-mix(in srgb, var(--sp-club) 14%, transparent);
    --sp-led: color-mix(in srgb, var(--accent, #ffb23f) 78%, #ffb23f);

    /* Court markings */
    --sp-line: color-mix(in srgb, var(--sp-ink) 20%, transparent);
    --sp-line-soft: color-mix(in srgb, var(--sp-ink) 10%, transparent);

    /* The scoreboard is dark in both modes */
    --sp-board: #10141b;
    --sp-board-edge: #262d39;
    --sp-board-text: #f3f6fa;

    /* Ball colours (canonical, so each sport stays recognisable) */
    --sp-ball-white: #fbfcfd;
    --sp-ball-dark: #171b22;
    --sp-ball-orange: #d9762a;

    --sp-shadow-sm: 0 2px 6px rgba(18, 22, 29, 0.08);
    --sp-shadow-md: 0 10px 28px rgba(18, 22, 29, 0.13);
    --sp-shadow-lg: 0 20px 50px rgba(18, 22, 29, 0.18);

    --sp-radius: 10px;
    --sp-radius-lg: 16px;
    --sp-pill: 999px;

    --sp-transition: 0.3s cubic-bezier(0.3, 0, 0.2, 1);

    --font-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif;
    --font-number: 'Teko', 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: 'Barlow', 'Segoe UI', 'Helvetica Neue', sans-serif;

    /* Aliases some engine snippets rely on */
    --text: var(--sp-ink);
    --text-light: var(--sp-ink-soft);
}

/* Night game under the floodlights */
[data-theme="dark"] {
    --sp-surface: #0b0f16;
    --sp-surface-raised: #131924;
    --sp-surface-deep: #080c12;

    --sp-ink: #eef2f7;
    --sp-ink-soft: #a3aebe;
    --sp-ink-faint: #6c7688;

    --sp-club: color-mix(in srgb, var(--primary, #4d7bff) 68%, #4d7bff);
    --sp-club-bright: color-mix(in srgb, var(--primary, #7ea0ff) 60%, #7ea0ff);
    --sp-club-soft: color-mix(in srgb, var(--sp-club) 18%, transparent);
    --sp-led: color-mix(in srgb, var(--accent, #ffc25c) 80%, #ffc25c);

    /* Chalk lines glow under the lights */
    --sp-line: color-mix(in srgb, #ffffff 30%, transparent);
    --sp-line-soft: color-mix(in srgb, #ffffff 14%, transparent);

    --sp-board: #070a0f;
    --sp-board-edge: #2b3444;
    --sp-board-text: #f3f6fa;

    --sp-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.5);
    --sp-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.6);
    --sp-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.7);
}

/* === BASE === */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--sp-ink);
    background: var(--sp-surface);
    transition: background var(--sp-transition), color var(--sp-transition);
}

::selection {
    background: var(--sp-club-soft);
    color: var(--sp-ink);
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

img {
    max-width: 100%;
}

/* === ANIMATIONS (CMS framework) === */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(var(--animation-offset, 20px));
    transition: opacity 0.6s ease, transform 0.6s ease;
}

body.js-ready[data-animations-enabled="true"] .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

body:not([data-animations-enabled="true"]) .animate-on-scroll {
    opacity: 1;
    transform: none;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--sp-ink);
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--sp-club);
    text-decoration: none;
    transition: color var(--sp-transition);
}

a:hover {
    color: var(--sp-club-bright);
}

/* Stadium lettering for labels and UI */
.site-title,
.breadcrumbs,
.btn,
.cta-button,
.page-card-link,
.footer-section h3,
.hamburger-btn,
.form-group label,
.lightbox-counter {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* === HEADER - kit stripes band === */
header {
    background: var(--sp-surface-raised);
    border-bottom: 3px solid var(--sp-club);
    position: relative;
    z-index: 100;
    /* No overflow:hidden here (fixed in 1.0.1): it clipped the dropdown menu,
       which is positioned outside the header box. The kit stripes below are
       painted by an inset ::before, so they never overflow anyway. */
    transition: background var(--sp-transition);
}

/* Diagonal kit stripes, like a shirt or a scarf */
header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        115deg,
        var(--sp-club-soft) 0 14px,
        transparent 14px 40px
    );
    opacity: 0.55;
    pointer-events: none;
}

/* The dropdown anchors to this box: `top: 100%` is then the bottom of the
   header bar, whatever height the logo gives it. */
header .container {
    position: relative;
}

.header-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0;
    gap: 1rem;
}

.logo-container img {
    /* 80px to match Aurora Plus / Classic / Boutique (1.0.x) */
    height: 80px;
    width: auto;
    display: block;
}

.site-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0.04em;
    color: var(--sp-ink);
}

/* === NAV / HAMBURGER === */
nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}

.hamburger-menu {
    /* static on purpose: the header container is the anchor */
    position: static;
}

.hamburger-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--sp-club);
    border: none;
    border-radius: var(--sp-pill);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.84rem;
    padding: 0.6rem 1.3rem;
    cursor: pointer;
    box-shadow: var(--sp-shadow-sm);
    transition: background var(--sp-transition), transform var(--sp-transition);
}

.hamburger-btn:hover {
    background: var(--sp-club-bright);
    transform: translateY(-1px);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    /* Anchor here is .header-content (it must stay positioned so the kit
       stripes sit behind it), whose right edge already matches the button. */
    right: 0;
    min-width: 252px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--sp-surface-raised);
    border: 1px solid var(--sp-line);
    border-top: 3px solid var(--sp-club);
    border-radius: var(--sp-radius);
    box-shadow: var(--sp-shadow-lg);
    z-index: 300;
}

.dropdown-menu.active {
    display: block;
}

.dropdown-menu ul {
    display: block;
    padding: 0.5rem 0;
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 0.62rem 1.4rem;
    color: var(--sp-ink);
    font-size: 0.98rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background var(--sp-transition), border-color var(--sp-transition), color var(--sp-transition);
}

.dropdown-menu a:hover {
    background: var(--sp-club-soft);
    border-left-color: var(--sp-club);
}

.dropdown-menu a.active {
    border-left-color: var(--sp-led);
    color: var(--sp-club);
}

/* === BREADCRUMBS === */
.breadcrumbs {
    background: var(--sp-surface-deep);
    border-bottom: 1px solid var(--sp-line-soft);
    font-size: 0.76rem;
}

.breadcrumbs .container {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.breadcrumbs a {
    color: var(--sp-ink-soft);
}

.breadcrumbs a:hover {
    color: var(--sp-club);
}

.breadcrumbs span {
    color: var(--sp-club);
}

.breadcrumbs strong {
    color: var(--sp-ink);
}

/* === HERO - the scoreboard === */
.hero {
    position: relative;
    padding: 5.25rem 1.5rem 5rem;
    text-align: center;
    background: var(--sp-surface);
    overflow: hidden;
}

/* Court markings: centre circle + halfway line */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        /* halfway line */
        linear-gradient(var(--sp-line), var(--sp-line)) center bottom 0 / 2px 100% no-repeat,
        /* centre circle */
        radial-gradient(circle at 50% 50%,
            transparent 0 148px,
            var(--sp-line) 148px 150px,
            transparent 150px),
        /* centre spot */
        radial-gradient(circle at 50% 50%, var(--sp-line) 0 5px, transparent 5px);
    opacity: 0.85;
    pointer-events: none;
}

.hero .container {
    position: relative;
    z-index: 1;
    max-width: 860px;
    padding: 3.5rem 2.75rem 3.25rem;
    border-radius: var(--sp-radius-lg);
    /* the scoreboard panel: dark in both modes, with an LED dot matrix */
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.05) 0 1px, transparent 1.4px) 0 0 / 7px 7px,
        var(--sp-board);
    border: 1px solid var(--sp-board-edge);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 0 4px var(--sp-club-soft),
        var(--sp-shadow-lg);
}

/* Glowing club-colour strip across the top of the board */
.hero .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 3px;
    border-radius: var(--sp-pill);
    background: var(--sp-club-bright);
    box-shadow: 0 0 14px var(--sp-club-bright);
}

.hero h1 {
    font-size: clamp(2.4rem, 6.5vw, 4.4rem);
    color: var(--sp-board-text);
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
    text-shadow: 0 0 26px rgba(255, 255, 255, 0.12);
}

/* Scoreboard LED underline */
.hero h1::after {
    content: '';
    display: block;
    width: 132px;
    height: 6px;
    margin: 1.35rem auto 0;
    border-radius: var(--sp-pill);
    background: var(--sp-led);
    box-shadow: 0 0 16px var(--sp-led);
}

.hero p {
    font-size: 1.14rem;
    color: rgba(243, 246, 250, 0.78);
    max-width: 54ch;
    margin: 0 auto 1.35rem;
}

/* === HERO WITH BACKGROUND IMAGE - floodlit pitch === */
.hero--has-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5.5rem 2rem;
    margin: 1.25rem auto 0;
    max-width: 1180px;
    border-radius: var(--sp-radius-lg);
    border-bottom: 4px solid var(--sp-club);
}

.hero--has-bg::before {
    display: none;
}

.hero--has-bg .container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.hero--has-bg .container::before {
    display: none;
}

.hero--has-bg .hero-bg-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.hero--has-bg .hero-bg-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero--has-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(8, 12, 18, 0.28) 0%, rgba(8, 12, 18, 0.68) 100%);
}

.hero--overlay-none::after   { background: linear-gradient(180deg, transparent 0%, rgba(8, 12, 18, 0.28) 100%); }
.hero--overlay-light::after  { background: linear-gradient(180deg, rgba(8, 12, 18, 0.12) 0%, rgba(8, 12, 18, 0.44) 100%); }
.hero--overlay-medium::after { background: linear-gradient(180deg, rgba(8, 12, 18, 0.28) 0%, rgba(8, 12, 18, 0.68) 100%); }
.hero--overlay-strong::after { background: linear-gradient(180deg, rgba(8, 12, 18, 0.48) 0%, rgba(8, 12, 18, 0.82) 100%); }

.hero--has-bg h1 {
    color: #fff;
    text-shadow: 0 3px 22px rgba(0, 0, 0, 0.6);
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
}

.hero--has-bg p {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}

/* === BUTTONS === */
.btn,
.cta-button {
    display: inline-block;
    background: var(--sp-club);
    border: none;
    border-radius: var(--sp-pill);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.88rem;
    padding: 0.85rem 2.2rem;
    cursor: pointer;
    box-shadow: var(--sp-shadow-sm);
    transition: background var(--sp-transition), transform var(--sp-transition), box-shadow var(--sp-transition);
}

.btn:hover,
.cta-button:hover {
    background: var(--sp-club-bright);
    transform: translateY(-2px);
    box-shadow: var(--sp-shadow-md);
}

.cta-button {
    margin-top: 0.8rem;
}

.hero--has-bg .cta-button {
    background: var(--sp-led);
    color: var(--sp-board);
}

.hero--has-bg .cta-button:hover {
    background: #fff;
    color: var(--sp-board);
}

/* === CONTENT === */
main {
    background: var(--sp-surface);
}

.content-section {
    padding: 3.25rem 0;
}

.content-section h1 {
    font-size: clamp(2rem, 4.4vw, 3rem);
    margin-bottom: 1.25rem;
}

.content-section h2 {
    font-size: 1.85rem;
    margin: 2.25rem 0 1rem;
}

/* Touchline: a double white rule, as painted on a court */
.content-section h2::after {
    content: '';
    display: block;
    width: 96px;
    height: 7px;
    margin-top: 0.6rem;
    border-radius: var(--sp-pill);
    background:
        linear-gradient(var(--sp-club), var(--sp-club)) left top / 100% 3px no-repeat,
        linear-gradient(var(--sp-led), var(--sp-led)) left bottom / 44% 3px no-repeat;
}

.content-section h3 {
    font-size: 1.35rem;
    margin: 1.8rem 0 0.7rem;
}

.content-section ul,
.content-section ol {
    margin: 0 0 1.15rem 1.5rem;
}

.content-section ul li::marker {
    content: '\25B8  ';
    color: var(--sp-club);
}

.content-section ol li::marker {
    color: var(--sp-club);
    font-family: var(--font-number);
}

.content-section blockquote {
    margin: 1.85rem 0;
    padding: 1.15rem 1.5rem;
    background: var(--sp-surface-raised);
    border-left: 4px solid var(--sp-club);
    border-radius: var(--sp-radius);
    color: var(--sp-ink-soft);
    box-shadow: var(--sp-shadow-sm);
}

/* === PAGE CARDS - squad sheet === */
.page-cards-grid {
    display: grid;
    /* auto-fit: a lone subpage fills the row, pairs split it evenly */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.25rem;
    margin: 2.5rem 0;
    counter-reset: squad;
}

.page-card {
    counter-increment: squad;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--sp-surface-raised);
    border: 1px solid var(--sp-line-soft);
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    box-shadow: var(--sp-shadow-sm);
    transition: transform var(--sp-transition), box-shadow var(--sp-transition);
}

/* Squad number, printed like the back of a shirt */
.page-card::before {
    content: counter(squad, decimal-leading-zero);
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    z-index: 3;
    font-family: var(--font-number);
    font-size: 2rem;
    line-height: 1;
    font-weight: 600;
    color: #fff;
    padding: 0.35rem 0.7rem 0.15rem;
    border-radius: var(--sp-radius);
    background: var(--sp-club);
    box-shadow: var(--sp-shadow-sm);
}

.page-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sp-shadow-md);
}

/* The engine puts .page-card-image on the element ITSELF: an <img> for a
   thumbnail (optionally inside an unclassed <picture>), or a <div> for the
   placeholder. Style it as the image - object-fit is a no-op on the div. */
.page-card-image {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: center;
    background: var(--sp-surface-deep);
    border-bottom: 3px solid var(--sp-club);
}

/* <picture> carries no class; make it a block so the image spans the card */
.page-card > picture {
    display: block;
    line-height: 0;
}

img.page-card-image {
    filter: saturate(1.02);
    transition: filter var(--sp-transition);
}

.page-card:hover img.page-card-image {
    filter: saturate(1.12);
}

/* --- Placeholders: three balls, one per sport, rotating by position --- */
.page-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 120% 90% at 50% 120%, var(--sp-club-soft), transparent 70%),
        var(--sp-surface-deep);
}

/* Hide the engine emoji */
.page-card-placeholder span {
    display: none;
}

/* Court arc behind every ball */
.page-card-placeholder::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -46px;
    transform: translateX(-50%);
    width: 240px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid var(--sp-line);
    border-bottom-color: transparent;
    opacity: 0.7;
}

/* --- Ball 1: FOOTBALL - white sphere, dark pentagon, seams --- */
.page-card:nth-child(3n+1) .page-card-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background:
        /* seams radiating from the central pentagon */
        repeating-conic-gradient(from 18deg at 50% 50%,
            var(--sp-ball-dark) 0deg 1.6deg, transparent 1.6deg 72deg),
        /* central pentagon (approximated by a small dark disc + spokes) */
        radial-gradient(circle at 50% 50%, var(--sp-ball-dark) 0 17px, transparent 17px),
        /* the ball itself */
        radial-gradient(circle at 38% 32%, #ffffff 0%, var(--sp-ball-white) 55%, #dde2e8 100%);
    box-shadow: inset -6px -8px 16px rgba(0, 0, 0, 0.18), var(--sp-shadow-md);
    border: 1px solid rgba(23, 27, 34, 0.18);
}

/* --- Ball 2: VOLLEYBALL - curved bands, club colour on white --- */
.page-card:nth-child(3n+2) .page-card-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background:
        /* three curved bands, drawn as offset ring arcs */
        radial-gradient(circle at 150% 50%, transparent 0 62px, var(--sp-club) 62px 68px, transparent 68px),
        radial-gradient(circle at -50% 50%, transparent 0 62px, var(--sp-club) 62px 68px, transparent 68px),
        radial-gradient(circle at 50% 150%, transparent 0 62px, var(--sp-led) 62px 68px, transparent 68px),
        radial-gradient(circle at 38% 32%, #ffffff 0%, var(--sp-ball-white) 58%, #dfe4ea 100%);
    box-shadow: inset -6px -8px 16px rgba(0, 0, 0, 0.14), var(--sp-shadow-md);
    border: 1px solid rgba(23, 27, 34, 0.14);
}

/* --- Ball 3: BASKETBALL - orange sphere with four seams --- */
.page-card:nth-child(3n) .page-card-placeholder::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background:
        /* vertical + horizontal seams */
        linear-gradient(var(--sp-ball-dark), var(--sp-ball-dark)) center / 2.5px 100% no-repeat,
        linear-gradient(var(--sp-ball-dark), var(--sp-ball-dark)) center / 100% 2.5px no-repeat,
        /* the two curved side seams */
        radial-gradient(circle at 128% 50%, transparent 0 58px, var(--sp-ball-dark) 58px 61px, transparent 61px),
        radial-gradient(circle at -28% 50%, transparent 0 58px, var(--sp-ball-dark) 58px 61px, transparent 61px),
        radial-gradient(circle at 38% 32%, #e89150 0%, var(--sp-ball-orange) 58%, #a8541a 100%);
    box-shadow: inset -6px -8px 16px rgba(0, 0, 0, 0.24), var(--sp-shadow-md);
    border: 1px solid rgba(23, 27, 34, 0.22);
}

.page-card-content {
    padding: 1.7rem 1.6rem 1.6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-card h3,
.page-card-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    margin-bottom: 0.65rem;
    color: var(--sp-ink);
}

.page-card-excerpt {
    color: var(--sp-ink-soft);
    font-size: 1rem;
    flex: 1;
    margin-bottom: 1.1rem;
}

.page-card-link {
    align-self: flex-start;
    color: var(--sp-club);
    font-size: 0.8rem;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--sp-club-soft);
    transition: color var(--sp-transition), border-color var(--sp-transition);
}

.page-card-link:hover {
    color: var(--sp-club-bright);
    border-color: currentColor;
}

/* === GALLERY === */
.gallery-grid {
    display: grid;
    /* auto-fit so one image spans the width and pairs split it evenly */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.75rem;
    margin: 2.25rem 0 2.75rem;
}

.gallery-item {
    position: relative;
    cursor: pointer;
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    background: var(--sp-surface-deep);
    box-shadow: var(--sp-shadow-sm);
    transition: transform var(--sp-transition), box-shadow var(--sp-transition);
}

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--sp-shadow-md);
}

/* Club-colour bar sliding in from the bottom on hover */
.gallery-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--sp-club);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--sp-transition);
    z-index: 2;
}

.gallery-item:hover::after {
    transform: scaleX(1);
}

/* The 4:3 window carries the ratio; the child fills it. Explicit
   height:auto overrides the engine's height attribute so portraits and
   squares crop to 4:3 instead of collapsing into vertical strips. */
.gallery-item > img,
.gallery-item > picture {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    overflow: hidden;
    transition: transform 0.5s ease;
}

.gallery-item > img {
    object-fit: cover;
}

.gallery-item > picture img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item source {
    display: none;
}

.gallery-item:hover > img,
.gallery-item:hover > picture {
    transform: scale(1.04);
}

/* === LIGHTBOX === */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 9, 14, 0.95);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 88vw;
    max-height: 84vh;
    border-radius: var(--sp-radius);
    border-bottom: 4px solid var(--sp-club);
    box-shadow: 0 26px 74px rgba(0, 0, 0, 0.65);
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: var(--sp-club);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-display);
    cursor: pointer;
    box-shadow: var(--sp-shadow-md);
    transition: background var(--sp-transition), transform var(--sp-transition);
}

.lightbox-close:hover,
.lightbox-nav:hover {
    background: var(--sp-club-bright);
    transform: scale(1.08);
}

.lightbox-close {
    top: 1.5rem;
    right: 1.7rem;
    width: 46px;
    height: 46px;
    font-size: 1.35rem;
    line-height: 1;
}

.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
}

.lightbox-nav:hover {
    transform: translateY(-50%) scale(1.08);
}

.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

.lightbox-counter {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--sp-led);
    font-family: var(--font-number);
    font-size: 1.1rem;
    letter-spacing: 0.2em;
}

/* === PRICE TAG - scoreboard chip === */
.price-tag {
    display: inline-block;
    position: relative;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.05) 0 1px, transparent 1.4px) 0 0 / 6px 6px,
        var(--sp-board);
    border: 1px solid var(--sp-board-edge);
    border-radius: var(--sp-radius);
    color: var(--sp-led);
    font-family: var(--font-number);
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 0.6rem 1.5rem 0.4rem;
    margin: 0.9rem 0 1.1rem;
    text-shadow: 0 0 14px var(--sp-led);
    box-shadow: var(--sp-shadow-sm);
}

a.price-tag:hover {
    color: #fff;
    text-shadow: 0 0 16px #fff;
}

/* === TESTIMONIALS - fan quotes === */
.testimonials-grid {
    display: grid;
    /* auto-fit for consistent stretching with one or two testimonials */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.25rem;
    margin: 2.5rem 0;
}

.testimonial-card {
    position: relative;
    background: var(--sp-surface-raised);
    border-radius: var(--sp-radius-lg);
    padding: 2rem 1.7rem 1.6rem;
    box-shadow: var(--sp-shadow-sm);
    overflow: hidden;
    transition: transform var(--sp-transition), box-shadow var(--sp-transition);
}

/* Kit stripe across the top of the quote card */
.testimonial-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: repeating-linear-gradient(
        115deg,
        var(--sp-club) 0 12px,
        var(--sp-club-bright) 12px 24px
    );
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sp-shadow-md);
}

.testimonial-rating {
    color: var(--sp-led);
    letter-spacing: 0.18em;
    margin-bottom: 0.6rem;
    font-size: 0.95rem;
}

.testimonial-text {
    color: var(--sp-ink-soft);
    margin-bottom: 0.9rem;
}

.testimonial-author {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--sp-ink);
}

.testimonial-author::before {
    content: '\2014\00a0';
    color: var(--sp-club);
}

/* === CONTACT FORM === */
.contact-form {
    max-width: 680px;
    margin: 2.75rem auto;
    background: var(--sp-surface-raised);
    border-radius: var(--sp-radius-lg);
    border-top: 4px solid var(--sp-club);
    padding: 2.6rem 2.3rem;
    box-shadow: var(--sp-shadow-md);
}

.contact-form h2 {
    text-align: center;
}

.contact-form h2::after {
    margin-left: auto;
    margin-right: auto;
}

.form-group {
    margin-bottom: 1.35rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.74rem;
    color: var(--sp-ink-soft);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: var(--sp-surface);
    border: 2px solid var(--sp-line-soft);
    border-radius: var(--sp-radius);
    color: var(--sp-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.75rem 0.95rem;
    transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}

.form-group textarea {
    min-height: 155px;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--sp-club);
    box-shadow: 0 0 0 4px var(--sp-club-soft);
}

/* === ALERTS === */
.error,
.success {
    border-radius: var(--sp-radius);
    padding: 0.9rem 1.2rem;
    margin-bottom: 1.25rem;
    font-size: 0.98rem;
    border-left: 4px solid;
}

.error {
    background: color-mix(in srgb, #d34632 12%, var(--sp-surface-raised));
    border-color: #d34632;
    color: color-mix(in srgb, #a8321f 76%, var(--sp-ink));
}

.success {
    background: color-mix(in srgb, #2e9e5b 12%, var(--sp-surface-raised));
    border-color: #2e9e5b;
    color: var(--sp-ink);
}

/* === FOOTER - stadium band === */
footer {
    position: relative;
    background: var(--sp-board);
    color: rgba(243, 246, 250, 0.72);
    margin-top: 3.5rem;
    overflow: hidden;
}

/* Kit stripes, echoing the header */
footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        115deg,
        rgba(255, 255, 255, 0.035) 0 14px,
        transparent 14px 40px
    );
    pointer-events: none;
}

/* Glowing club line at the very top */
footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--sp-club);
    box-shadow: 0 0 18px var(--sp-club);
}

.footer-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 2.25rem;
    padding: 3rem 0 2.25rem;
}

.footer-section h3 {
    font-size: 0.86rem;
    color: #fff;
    margin-bottom: 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--sp-club);
}

.footer-section p {
    margin-bottom: 0.45rem;
    font-size: 0.98rem;
}

.footer-section a {
    color: rgba(243, 246, 250, 0.72);
}

.footer-section a:hover {
    color: var(--sp-led);
}

.footer-menu {
    list-style: none;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 0.4rem;
}

.social-links {
    display: flex;
    gap: 0.7rem;
    margin-top: 0.6rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    transition: background var(--sp-transition), transform var(--sp-transition);
}

.social-links a:hover {
    background: var(--sp-club);
    transform: translateY(-2px);
}

.copyright {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    padding: 1.1rem 0 1.3rem;
    text-align: center;
    font-size: 0.84rem;
    color: rgba(243, 246, 250, 0.5);
}

/* Centre spot above the imprint */
.copyright::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 auto 0.7rem;
    border-radius: 50%;
    background: var(--sp-led);
    box-shadow: 0 0 12px var(--sp-led);
}

/* === DARK MODE TOGGLE - floodlight switch === */
.dark-mode-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1200;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--sp-club);
    box-shadow: var(--sp-shadow-md), 0 0 0 4px var(--sp-club-soft);
    cursor: pointer;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--sp-transition), background var(--sp-transition);
}

.dark-mode-toggle::before {
    content: '\25D0';
    font-size: 1.3rem;
    line-height: 1;
    color: #fff;
}

html[data-theme="dark"] .dark-mode-toggle::before {
    content: '\25D1';
    color: var(--sp-led);
}

.dark-mode-toggle:hover {
    transform: translateY(-2px) scale(1.05);
    background: var(--sp-club-bright);
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
    .hero {
        padding: 3.75rem 1rem 3.5rem;
    }

    .hero .container {
        padding: 2.5rem 1.5rem 2.25rem;
    }

    .hero--has-bg {
        min-height: 46vh;
        margin: 1rem 1rem 0;
    }

    .page-cards-grid,
    .testimonials-grid {
        gap: 1.85rem;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 1rem;
    }

    .header-content {
        padding: 0.85rem 0;
    }

    .site-title {
        font-size: 1.3rem;
    }

    .dropdown-menu {
        /* Position and top come from the base rule (anchored to
           .header-content); on small screens the menu spans its full width. */
        left: 0;
        right: 0;
        min-width: 0;
        max-height: 70vh;
    }

    .logo-container img {
        height: 56px;
    }

    .hero h1 {
        font-size: 2.3rem;
    }

    /* the centre circle would overflow a narrow screen */
    .hero::before {
        opacity: 0.5;
    }

    .content-section {
        padding: 2.25rem 0;
    }

    .gallery-grid {
        /* auto-fit here too, tighter columns on small screens */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1.25rem;
    }

    .page-card::before {
        font-size: 1.6rem;
    }

    .contact-form {
        padding: 1.9rem 1.3rem;
    }

    .lightbox-nav {
        width: 44px;
        height: 44px;
    }

    .lightbox-prev { left: 0.6rem; }
    .lightbox-next { right: 0.6rem; }

    .dark-mode-toggle {
        bottom: 1.1rem;
        right: 1.1rem;
        width: 44px;
        height: 44px;
    }

    .footer-content {
        gap: 1.75rem;
        padding: 2.25rem 0 1.75rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .animate-on-scroll,
    .page-card,
    .gallery-item,
    .gallery-item > img,
    .gallery-item > picture,
    .testimonial-card,
    .dark-mode-toggle {
        transition: none;
    }
}