/* =============================================================================
   Saronic Chamber Music Festival — base stylesheet
   Ported from the legacy WordPress `saronic` theme (see docs/design.md).
   Mobile-first; desktop adjustments layer on at 770px and up.
   ============================================================================= */

/* Fonts — Open Sans, self-hosted woff2 (latin + greek subsets, weights 400/800). */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* latin */
  src: url('/fonts/open-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* greek */
  src: url('/fonts/open-sans-400-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  /* latin */
  src: url('/fonts/open-sans-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  /* greek */
  src: url('/fonts/open-sans-800-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

/* -----------------------------------------------------------------------------
   Design tokens
   ----------------------------------------------------------------------------- */
:root {
  /* Palette (docs/design.md) */
  --color-navy: #173e7a; /* brand / primary */
  --color-blue: #3369bb; /* links / secondary */
  --color-gold: #bfa17a; /* accent — large/decorative use only (fails AA as body text on white) */

  --color-white: #fff;
  --color-grey-50: #f1f1f1;
  --color-grey-100: #eee;
  --color-grey-300: #ccc;
  --color-grey-500: #999;
  --color-grey-700: #666;
  --color-ink: #111; /* body text */
  --color-black: #000;

  --color-highlight: #fff9c0;
  --color-highlight-warm: #fff5e9;

  /* Semantic roles */
  --color-bg: #fff5e8; /* warm cream page background */
  --color-bg-band: #f5e5cf; /* slightly darker cream for full-bleed section bands */
  --color-bg-alt: var(--color-grey-50);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-grey-700);
  --color-heading: var(--color-navy);
  --color-link: var(--color-blue);
  --color-link-hover: var(--color-navy);
  --color-border: var(--color-grey-300);
  --color-accent: var(--color-gold);
  /* Hairline divider lines — a soft golden-yellow in the same family as the
     gold accent (#bfa17a), lightened, so separators read warm and gilded. */
  --color-line: #d8bf8a;

  /* Header / footer surfaces */
  /* Header matches the cream page background; the navy logo + text sit on it. */
  --color-header-bg: var(--color-bg);
  --color-header-text: var(--color-navy);
  --color-footer-bg: var(--color-navy);
  --color-footer-text: var(--color-white);

  /* Buttons (brand blue fills, per design.md) */
  --color-btn-bg: var(--color-blue);
  --color-btn-bg-hover: var(--color-navy);
  --color-btn-text: var(--color-white);

  /* Focus ring — high contrast for keyboard users */
  --color-focus: #ffbf47;

  /* Typography */
  --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-size-base: 16px; /* root/body font size */
  --line-height-base: 1.6;
  --font-weight-normal: 400;
  --font-weight-bold: 800;

  /* Layout */
  --content-width: 1100px; /* centred content column */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
}

/* -----------------------------------------------------------------------------
   Reset / base
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* contain full-bleed (100vw) sections like the hero banner */
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
a:hover,
a:focus {
  color: var(--color-link-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-md);
  color: var(--color-heading);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}
h1 {
  font-size: 2em; /* 200% */
}
h2 {
  font-size: 1.6em; /* 160% */
}
h3 {
  font-size: 1.3em; /* 130% */
}
h4 {
  font-size: 1.1em; /* 110% */
}

p {
  margin: 0 0 var(--space-md);
}

small,
.text-small {
  font-size: 0.85em; /* ~85% */
}

mark {
  background-color: var(--color-highlight);
  color: var(--color-ink);
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-lg) 0;
}

/* Visible focus styles for keyboard users (WCAG 2.1 AA) */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Skip link + screen-reader utilities
   ----------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-navy);
  color: var(--color-white);
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-family: inherit;
  font-size: 1em;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.btn:hover,
.btn:focus {
  background-color: var(--color-btn-bg-hover);
  color: var(--color-btn-text);
}
.btn--sm {
  padding: 0.3em 0.8em;
  font-size: 0.85em;
}
.btn--lg {
  padding: 0.7em 1.4em;
  font-size: 1.1em;
  border-radius: 3px;
}
.btn--ticket {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.btn__icon {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}

/* Pre-sale notice shown in place of the booking UI / Book Tickets button until
   ticket sales open (see views/components.tsx TicketsOnSaleNote). */
.tickets-on-sale {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  color: var(--color-text-muted);
  font-weight: 600;
}
.tickets-on-sale .btn__icon {
  color: var(--color-blue);
}

/* -----------------------------------------------------------------------------
   Header
   ----------------------------------------------------------------------------- */
.site-header {
  /* Transparent so the home hero's bow + wave banner — pulled up behind the
     header — shows through the header band. The header background already
     matched the cream page colour (--color-header-bg), so this is visually
     identical on every page that doesn't have the banner. */
  background-color: transparent;
  color: var(--color-header-text);
  /* Positioned above the banner so the logo, nav and language switcher paint
     on top of the artwork (readable) instead of being crossed or clipped by
     it. The banner itself is pointer-events:none, so links stay clickable. */
  position: relative;
  z-index: 1;
}
.site-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.site-brand {
  color: var(--color-header-text);
  text-decoration: none;
  display: inline-block;
  line-height: 0; /* avoid inline-image descender gap */
}
.site-brand__logo {
  display: block;
  width: clamp(170px, 26vw, 220px);
  height: auto; /* aspect ratio reserved via width/height attrs — no CLS */
}

/* Burger toggle (mobile only) */
.nav-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-sm);
  background: none;
  border: none;
  color: var(--color-header-text);
  cursor: pointer;
  border-radius: 2px;
  line-height: 1;
}
.nav-toggle:hover,
.nav-toggle:focus {
  color: var(--color-blue);
}
.nav-toggle__icon {
  display: block;
  overflow: visible; /* let the rotated bars extend past the viewBox */
}
.nav-toggle__icon rect {
  transform-box: view-box;
  transform-origin: center; /* centre of the 22×16 viewBox = (11, 8) */
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Burger → cross when the menu is open: collapse the bars to centre,
   fade the middle one, and rotate the outer two into an X. */
.nav-toggle[aria-expanded="true"] .nav-toggle__icon rect:nth-child(1) {
  transform: rotate(45deg) translateY(7px);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon rect:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon rect:nth-child(3) {
  transform: rotate(-45deg) translateY(-7px);
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle__icon rect {
    transition: none;
  }
}

/* Collapsible panel: hidden on mobile by default, shown when toggled */
.site-header__collapsible {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
}
.site-header__collapsible.is-open {
  display: flex;
}

/* Primary nav */
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}
.site-nav__link {
  color: var(--color-header-text);
  text-decoration: none;
  font-weight: var(--font-weight-normal);
}
.site-nav__link:hover,
.site-nav__link:focus,
.site-nav__link.is-active {
  color: var(--color-blue);
}

/* Language switcher */
.lang-switcher__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-sm);
}
.lang-switcher__link {
  color: var(--color-header-text);
  text-decoration: none;
  font-weight: var(--font-weight-normal);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid transparent;
  border-radius: 2px;
}
.lang-switcher__link.is-active {
  border-color: var(--color-blue);
  color: var(--color-blue);
}
.lang-switcher__link:hover,
.lang-switcher__link:focus {
  color: var(--color-blue);
}

/* -----------------------------------------------------------------------------
   Main content
   ----------------------------------------------------------------------------- */
.site-main {
  outline: none; /* programmatic focus target (#main) — focus ring not needed */
}
.site-main__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

/* -----------------------------------------------------------------------------
   Newsletter form
   ----------------------------------------------------------------------------- */
.newsletter-form__label {
  display: block;
  margin-bottom: var(--space-xs);
}
.newsletter-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.newsletter-form__input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--space-sm);
  font-family: inherit;
  font-size: 1em;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background-color: var(--color-white);
  color: var(--color-ink);
}

/* -----------------------------------------------------------------------------
   Footer
   ----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   Sponsors band (cream background, above the navy footer)
   ----------------------------------------------------------------------------- */
.sponsors {
  max-width: var(--content-width);
  margin: var(--space-xl) auto 0;
  padding: 0 var(--space-md);
}
.sponsors__top,
.sponsors__bottom {
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
}
.sponsors__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 640px) {
  .sponsors__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .sponsors__group--auspices {
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-xl);
  }
}
.sponsors__label {
  margin: 0 0 var(--space-md);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-navy);
}
.sponsors__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-lg);
}
.sponsors__link {
  display: contents;
}
.sponsors__logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 56px;
  max-width: 140px;
  padding-right: var(--space-md);
}
.sponsors__logo--major {
  max-height: 48px;
  max-width: 340px;
}
.sponsors__logo--katheti {
  position: relative;
  top: 5px;
  padding-right: 0;
}
.sponsors__logo--livebio {
  max-height: 60px;
  max-width: 180px;
}


.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  margin-top: var(--space-xl);
}
.site-footer__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 640px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .site-footer__meta {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
  }
  .site-footer__links {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
  }
}
.site-footer__heading {
  color: var(--color-footer-text);
  font-size: 1.1em;
}
.site-footer a {
  color: var(--color-white);
}
.site-footer a:hover,
.site-footer a:focus {
  color: var(--color-accent);
}
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.site-footer__copyright {
  margin: 0;
  font-size: 0.85em;
  color: var(--color-grey-300);
}

/* -----------------------------------------------------------------------------
   Reduced motion
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   Breakpoints (479 / 770 / 1023px, mobile-first)
   ----------------------------------------------------------------------------- */

/* Small mobile and up — gentle spacing bump */
@media (min-width: 479px) {
  .site-main__inner {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}

/* Primary breakpoint — mobile ↔ desktop. Burger hidden; collapsible always visible. */
@media (min-width: 770px) {
  .nav-toggle {
    display: none;
  }
  .site-header__collapsible {
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-md);
    margin-left: auto;
    padding-bottom: 0;
  }
  .site-nav__list {
    flex-wrap: nowrap;
  }
}

/* Large screens — keep the content column centred with breathing room */
@media (min-width: 1023px) {
  .site-main__inner {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }
}

/* -----------------------------------------------------------------------------
   Public pages — hero, cards, detail pages
   ----------------------------------------------------------------------------- */
/* Full-bleed bow + wave banner at the top of each page. Breaks out of the
   centred content column to span the viewport, and pulls up to sit flush under
   the header (cancelling the content inner's top padding). */
/* Desktop only — hidden below the desktop breakpoint (see media query). */
.hero-banner {
  display: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  pointer-events: none; /* decorative — it overlaps the header, so let clicks pass through to the nav */
}
/* The artwork itself sits at the content width, centred. */
.hero-banner__svg {
  display: block;
  width: 100%;
  max-width: var(--content-width);
  height: auto;
  /* Reserve the box from the viewBox ratio (full: 1073x340) so the browser
     lays out the banner before the SVG arrives — no reflow, no layout shift,
     and the LCP element paints in its final position. */
  aspect-ratio: 1073 / 340;
  margin: 0 auto;
}
/* Header variant is the shorter two-line crop (viewBox 1073x152). */
.hero-banner--header .hero-banner__svg {
  aspect-ratio: 1073 / 152;
}
/* On screens wider than the content column, fill the bleed on each side with
   the artwork's edge content (#0f3d7b baked into the background images). */
.hero-banner::before,
.hero-banner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100vw - var(--content-width)) / 2 + 1px));
}
/* Left bleed: extend the straight staff lines + sea. Sampled from x≈15 (past
   the rounded line-ends, before the bow) so the lines keep full thickness. */
.hero-banner::before {
  left: 0;
  background-image: url('/images/bow-wave.svg');
  background-repeat: no-repeat;
  background-size: 100000px 100%;
  background-position: -1400px center;
}
/* Right bleed: continue the waves with a parametric tile of exactly one wave
   period (57.842 of the 1073 viewBox units) — mathematically periodic, so no
   drift. It's drawn opaque (cream behind) and extended ~22.7px back over the
   content, so the join between traced content and tile falls on a wave trough
   (x≈1050.9) where the slope is ~0 — there the residual is an invisible
   sub-pixel offset rather than a notch on a crest. background-position seats a
   trough exactly on that join. */
.hero-banner::after {
  right: 0;
  width: max(0px, calc((100vw - var(--content-width)) / 2 + 22.7px));
  background-color: var(--color-bg);
  background-image: url('/images/bow-wave-tile.svg');
  background-repeat: repeat-x;
  background-size: calc(var(--content-width) * 0.053907) 100%;
  background-position: -36.6px center;
}
/* Header variant: two-line version for non-home pages — swap the bleed images. */
.hero-banner--header {
  margin-bottom: var(--space-xl);
}
.hero-banner--header::before {
  background-image: url('/images/bow-wave-header.svg');
}
.hero-banner--header::after {
  background-image: url('/images/bow-wave-tile-header.svg');
}
/* Below the content width the svg fills the viewport (no bleed), and the fixed
   overlap above would no longer land on the trough — so drop the bleed fills. */
@media (max-width: 1099.98px) {
  .hero-banner::before,
  .hero-banner::after {
    display: none;
  }
}
@media (min-width: 1023px) {
  .hero-banner {
    display: block;
    /* Pull the bow + staff lines up behind the header (cancel the content
       inner's top padding, then 100px more) so the artwork overlaps the header
       band. The header is transparent and stacks above, so the bow shows
       through behind the logo/nav without clipping or crossing them. */
    margin-top: calc(-1 * var(--space-xl) - 100px);
  }
}

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) 0 0;
}
.hero__tagline {
  color: var(--color-text-muted);
  font-size: 1.1em;
  margin: 0 0 var(--space-xs);
}
.hero__title {
  color: var(--color-navy);
  margin: 0;
  order: -2;
}
.hero__dates {
  font-weight: var(--font-weight-bold);
  color: var(--color-blue);
  font-size: 1.2em;
  margin: 0;
  order: -1;
}
.hero__intro {
  max-width: 42rem;
  margin: 0;
}
.hero__cta {
  margin: 0;
}
.hero__cta .btn {
  display: flex;
  width: 100%;
  justify-content: center;
}
@media (min-width: 640px) {
  .hero {
    display: block;
  }
  .hero__title {
    margin-bottom: var(--space-sm);
  }
  .hero__dates {
    margin-bottom: var(--space-md);
  }
  .hero__intro {
    margin: 1em 0;
  }
  .hero__cta {
    float: right;
    margin: 0 0 var(--space-sm) var(--space-md);
  }
  .hero__cta .btn {
    display: inline-flex;
    width: auto;
  }
}

/* Homepage concerts + video — intro paragraphs stay tight (space-md); the
   sections get roomier, consistent separation (space-xl, ≥ 2× the para gap). */
.home-concerts {
  margin: var(--space-xl) 0 0;
}
.home-concerts--band {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-band);
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}
@media (min-width: 479px) {
  .home-concerts--band {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
}
@media (min-width: 1148px) {
  .home-concerts--band {
    padding-left: max(var(--space-lg), calc((100vw - var(--content-width)) / 2 + var(--space-lg)));
    padding-right: max(var(--space-lg), calc((100vw - var(--content-width)) / 2 + var(--space-lg)));
  }
}
.home-concerts__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.home-concerts__heading {
  margin: 0;
  font-size: 1.5rem;
  color: var(--color-heading);
}
.home-concerts__all {
  margin: var(--space-md) 0 0;
  font-weight: var(--font-weight-bold);
}
.home-concerts__nav {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}
.home-concerts__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-white);
  color: var(--color-navy);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.home-concerts__btn:hover {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}
.home-concerts__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.home-concerts__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.home-concerts__scroll:active {
  cursor: grabbing;
}
.home-concerts__scroll::-webkit-scrollbar {
  display: none;
}
.home-concerts .card-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-lg);
  margin: 0;
  width: max-content;
  padding-right: var(--space-md);
}
.home-concerts .card-grid .card {
  width: 300px;
  flex-shrink: 0;
}
/* Homepage donation band (between artists and video). Reuses the full-bleed
   --band background; .home-donate just supplies the top gap and inner layout. */
.home-donate {
  margin-top: var(--space-xl);
}
.home-donate__prompt {
  margin: 0 0 var(--space-md);
  max-width: 46rem;
}
.home-video {
  margin: var(--space-xl) 0 0;
  aspect-ratio: 16 / 9;
}
.home-video__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Card grids (concerts, artists, news, gallery albums, festivals) */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin: var(--space-md) 0 var(--space-xl);
}
@media (min-width: 560px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 880px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card {
  border: 1px solid var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  background: var(--color-white);
}
.card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card__link:hover .card__title,
.card__link:focus .card__title {
  color: var(--color-blue);
}
.card__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-grey-100);
}
.artist-card .card__media {
  aspect-ratio: 1 / 1;
}
.card__body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.card__title {
  margin: 0 0 var(--space-xs);
  font-size: 1.15em;
  color: var(--color-navy);
}
.card__meta {
  color: var(--color-text-muted);
  font-size: 0.9em;
  margin: 0 0 var(--space-xs);
}
.card__role {
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-xs);
}
.card__excerpt {
  margin: 0 0 var(--space-xs);
  color: var(--color-text);
}
.card__more {
  color: var(--color-blue);
  font-weight: var(--font-weight-bold);
}

/* Image placeholder (content image not yet uploaded) */
.media-placeholder {
  display: block;
  width: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--color-grey-100),
    var(--color-grey-100) 10px,
    var(--color-grey-50) 10px,
    var(--color-grey-50) 20px
  );
}

/* Detail pages */
.back-link {
  margin: 0 0 var(--space-md);
}
.back-link a {
  font-weight: var(--font-weight-bold);
}
.prose p {
  max-width: 42rem;
  margin: 0 0 var(--space-md);
}
.prose__figure {
  margin: var(--space-lg) 0;
  max-width: 480px;
}
.prose__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.artist-detail__role {
  font-weight: var(--font-weight-bold);
  color: var(--color-blue);
  font-size: 1.15em;
}
.artist-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.artist-detail__content > :first-child {
  margin-top: 0;
}
.artist-detail__photo {
  float: none;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0;
  border-radius: 3px;
}
@media (min-width: 640px) {
  .artist-detail__body {
    flex-direction: row;
    align-items: flex-start;
  }
  .artist-detail__photo {
    flex: 0 0 320px;
  }
}

/* Concert detail */
.concert-detail {
  display: flex;
  flex-direction: column;
}
.concert-detail .back-link {
  order: -4;
}
.concert-detail > h1 {
  order: -3;
}
.concert-detail__when {
  order: -2;
  font-weight: var(--font-weight-bold);
  font-size: 1.2em;
  color: var(--color-heading);
}
/* Concerts-list heading row: title with the Book Tickets action beside it. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-lg);
}
.page-head h1 {
  margin: 0;
}
.concert-detail__book {
  order: -1;
  margin: 0 0 var(--space-md);
}
.concert-detail__book .btn {
  display: flex;
  width: 100%;
  justify-content: center;
}
@media (min-width: 640px) {
  .concert-detail {
    display: block;
  }
  .concert-detail__book {
    float: right;
    margin: 0 0 var(--space-sm) var(--space-md);
  }
  .concert-detail__book .btn {
    display: inline-flex;
    width: auto;
  }
}
.concert-detail__cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
@media (min-width: 640px) {
  .concert-detail__cols {
    flex-direction: row;
  }
  .concert-detail__cols > section:first-child {
    flex: 7;
    min-width: 0;
  }
  .concert-detail__cols > section + section {
    flex: 3;
    min-width: 0;
  }
  .concert-detail__cols > section + section {
    border-left: 1px solid var(--color-border);
    padding-left: var(--space-lg);
  }
}
.concert-detail__programme {
  /* Keep the works list to a comfortable reading column, like body prose. */
  max-width: 42rem;
}
/* Tickets panel sits at the top, then floats to the right of the concert content. */
.concert-detail__tickets {
  order: -1;
  margin: 0 0 var(--space-md);
}
@media (min-width: 640px) {
  .concert-detail__tickets {
    float: right;
    width: 24rem;
    max-width: 46%;
    margin: 0 0 var(--space-md) var(--space-lg);
  }
  .concert-detail__map {
    clear: right;
  }
}
/* Ticket info: the blurb, with the venue seating plan (when set) to its right. */
.concert-detail__ticket-info {
  margin: 0 0 var(--space-md);
}
.concert-detail__ticket-info--has-map {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-md);
}
.concert-detail__ticket-info-text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.concert-detail__seat-map {
  flex: 0 0 auto;
  display: block;
  width: 9rem;
  max-width: 45%;
  line-height: 0;
}
.concert-detail__seat-map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
/* Optional per-ticket-class colour, shown as a small rounded square before the name. */
.colour-swatch {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.45em;
  vertical-align: -0.1em;
  border-radius: 3px;
}
.programme {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-lg);
}
.programme__work {
  margin-bottom: var(--space-sm);
}
.programme__composer {
  font-weight: var(--font-weight-bold);
}
.programme__title {
  /* Its own line, under the composer. */
  display: block;
}
.programme__movements {
  /* Preserve the one-movement-per-line layout from the admin textarea. */
  display: block;
  white-space: pre-line;
}
.programme__intermission {
  margin: var(--space-sm) 0;
  color: var(--color-text-muted);
  padding-left: 4rem;
}
.map-link {
  display: inline-block;
  font-weight: var(--font-weight-bold);
}
.concert-detail__map {
  max-width: 480px;
}
.concert-detail__venue-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.concert-detail__venue-header h3 {
  margin: 0 0 0.2em;
}
.concert-detail__venue-name {
  margin: 0;
  color: var(--color-text-muted);
}
.concert-detail__directions {
  flex-shrink: 0;
  align-self: center;
}
.concert-map {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 300px;
  border: 0;
  border-radius: 3px;
  display: block;
}

/* Ticket booking */
.booking {
  max-width: 34rem;
}
.booking__concert {
  font-weight: var(--font-weight-bold);
  color: var(--color-blue);
  margin: 0 0 var(--space-lg);
}
.booking__when {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}
.booking__empty {
  color: var(--color-text-muted);
}
.booking-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-md);
}
.booking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}
.booking-row__info {
  display: flex;
  flex-direction: column;
}
.booking-row__name {
  font-weight: var(--font-weight-bold);
}
.booking-row__price {
  color: var(--color-text-muted);
}
.booking-row__qty {
  font: inherit;
  min-width: 4rem;
  padding: var(--space-xs) calc(var(--space-xs) * 2 + 1em) var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-grey-300, #ccc);
  border-radius: 3px;
  background-color: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-xs) center;
  background-size: 1em 1em;
}
.booking-row__soldout {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
}
.booking-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--space-md) 0 var(--space-lg);
  font-size: 1.2em;
  font-weight: var(--font-weight-bold);
}
.booking-form__submit {
  display: block;
  width: 100%;
  justify-content: center;
}
.booking__note {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.95em;
}
.booking-confirm__ref {
  margin: var(--space-md) 0 var(--space-lg);
}
.form-error {
  background-color: #fdecec;
  color: #8a1f1f;
  padding: var(--space-sm) var(--space-md);
  border-radius: 3px;
  margin: 0 0 var(--space-md);
}
@media (min-width: 640px) {
  .booking-form__submit {
    display: inline-flex;
    width: auto;
  }
}

/* Gallery image grid */
.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
@media (min-width: 560px) {
  .image-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 880px) {
  .image-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.image-grid__item {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-grey-100);
}

/* Gallery videos (/gallery/) — responsive 16:9 YouTube embeds above the albums */
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
@media (min-width: 720px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.video-embed {
  aspect-ratio: 16 / 9;
  background: var(--color-grey-100);
  border-radius: 3px;
  overflow: hidden;
}
.video-embed__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Programme list (/programme/) */
.programme-list {
  list-style: none;
  padding: 0;
}
.programme-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-line);
}
.programme-list__date {
  color: var(--color-text-muted);
}

/* Contact form */
.contact-form {
  max-width: 36rem;
  margin-bottom: var(--space-lg);
}
.contact-form .field {
  margin-bottom: var(--space-md);
}
.contact-form label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: var(--font-weight-bold);
}
.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form textarea {
  width: 100%;
  padding: var(--space-sm);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: 2px;
}
.field--check label {
  font-weight: 400;
}
.form-success {
  color: #1b7a3d;
  font-weight: var(--font-weight-bold);
}

/* -----------------------------------------------------------------------------
   Free reservation + donation (booking page)
   ----------------------------------------------------------------------------- */
.booking-section {
  margin-bottom: var(--space-xl);
}
.booking-section > h2 {
  font-size: 1.3em;
}
/* Reservation + donation form fields mirror the contact form */
.reserve-form .field,
.donate-form .field {
  margin-bottom: var(--space-md);
}
.reserve-form label,
.donate-form label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: var(--font-weight-bold);
}
.reserve-form input[type='text'],
.reserve-form input[type='email'],
.donate-form input[type='number'] {
  width: 100%;
  max-width: 22rem;
  padding: var(--space-sm);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: 2px;
}
.donate {
  margin: var(--space-lg) 0;
  padding: var(--space-lg);
  background: var(--color-highlight-warm);
  border-radius: 6px;
}
.donate > h2 {
  font-size: 1.3em;
}
.donate-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.donate-preset[aria-pressed='true'] {
  background-color: var(--color-btn-bg-hover);
}

/* -----------------------------------------------------------------------------
   Multi-concert booking page (/book/): concert blocks, steppers, basket bar
   ----------------------------------------------------------------------------- */
.fbk-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fbk-concert {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-line);
}
.fbk-concert:first-child {
  border-top: 0;
}
.fbk-concert__head {
  margin-bottom: var(--space-sm);
}
/* Programme on the left, ticket table on the right (stacked on narrow screens). */
.fbk-concert__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .fbk-concert__body {
    flex-direction: row;
    align-items: flex-start;
  }
  .fbk-concert__body > .fbk-programme-open {
    flex: 1;
    min-width: 0;
    margin: 0;
  }
  .fbk-concert__body > .fbk-tickets-open {
    flex: 0 0 24rem;
    max-width: 46%;
    margin-left: auto;
  }
}
.fbk-concert__title {
  margin: 0;
  font-size: 1.25em;
}
.fbk-concert__when {
  margin: var(--space-xs) 0 0;
  color: var(--color-text-muted);
}
.fbk-concert__noticket {
  color: var(--color-text-muted);
}
.fbk-line__soldout {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
}

/* Always-open programme + tickets under each concert */
.fbk-programme-open {
  margin: var(--space-sm) 0 var(--space-md);
}
.fbk-block-h {
  font-size: 1em;
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
}

/* Ticket table (one per concert) */
.fbk-table-wrap {
  overflow-x: auto;
}
.fbk-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-sm);
}
.fbk-table th,
.fbk-table td {
  padding: var(--space-sm);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-grey-50);
}
.fbk-table thead th {
  font-size: 0.95em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.fbk-table__rowhead {
  font-weight: var(--font-weight-bold);
}
.fbk-table__cell {
  white-space: nowrap;
}
.fbk-table__price {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.9em;
  margin-bottom: var(--space-xs);
}
.fbk-table__cell--empty {
  color: var(--color-grey-300);
}
.fbk-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 3px;
  background: #fff;
}
.fbk-stepper__btn {
  width: 1.6rem;
  height: 1.6rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-link);
}
.fbk-stepper__btn--minus {
  color: var(--color-text-muted);
}
.fbk-stepper__btn:hover:not(:disabled),
.fbk-stepper__btn:focus-visible:not(:disabled) {
  background: var(--color-grey-50);
}
.fbk-stepper__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.fbk-stepper__out {
  min-width: 1.4rem;
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.fbk-table__addrow td {
  border-bottom: 0;
}
.fbk-table__addcell {
  text-align: right;
}

/* Sticky checkout bar */
.fbk-bar[hidden],
.fbk-drawer[hidden] {
  display: none;
}
.fbk-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--color-navy);
  color: #fff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
}
.fbk-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.fbk-bar__left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.fbk-bar__summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.fbk-bar__view,
.fbk-bar__more {
  color: #fff;
  text-decoration: underline;
  font-size: 0.95em;
  white-space: nowrap;
}
.fbk-bar__view:hover,
.fbk-bar__view:focus,
.fbk-bar__more:hover,
.fbk-bar__more:focus {
  color: #fff;
  text-decoration: none;
}
.fbk-bar__total {
  font-weight: var(--font-weight-bold);
  font-size: 1.15em;
}
.fbk-bar__checkout {
  flex: none;
  background: #ffc23d;
  color: var(--color-navy);
  font-weight: var(--font-weight-bold);
}
.fbk-bar__checkout:hover,
.fbk-bar__checkout:focus {
  background: #ffd16b;
  color: var(--color-navy);
}
body.fbk-has-bar {
  padding-bottom: 7rem;
}

/* Basket drawer */
.fbk-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: flex-end;
}
.fbk-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}
.fbk-drawer__panel {
  position: relative;
  width: min(28rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--color-bg);
  padding: var(--space-lg);
  box-shadow: -2px 0 16px rgba(0, 0, 0, 0.25);
}
.fbk-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fbk-drawer__head h2 {
  margin: 0;
}
.fbk-drawer__close {
  border: 0;
  background: transparent;
  font-size: 1.3em;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
}
.fbk-drawer__items {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0;
}
.fbk-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-line);
}
.fbk-drawer__item-label {
  flex: 1;
}
.fbk-drawer__item-price {
  white-space: nowrap;
  color: var(--color-text-muted);
}
.fbk-drawer__remove {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1em;
}
.fbk-drawer__total {
  display: flex;
  justify-content: space-between;
  font-weight: var(--font-weight-bold);
  font-size: 1.15em;
  margin: var(--space-md) 0;
}
.fbk-checkout__submit {
  display: block;
  width: 100%;
  justify-content: center;
}

/* Multi-concert confirmation list */
.fbk-confirm-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 var(--space-lg);
}
.fbk-confirm-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-line);
}
.fbk-confirm-row__ref {
  white-space: nowrap;
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   Cookie notice
   Fixed bottom banner shown until the visitor dismisses it (cookie_consent
   cookie). Hidden in the SSR HTML and revealed by scripts/cookie-banner.js when
   no consent cookie is present, so returning visitors never see a flash.
   ----------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Above the basket bar (60), below the basket drawer/modal (70) so the
     drawer's backdrop covers the notice while checking out. */
  z-index: 65;
  background-color: var(--color-navy);
  color: var(--color-white);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
  transform: translateY(100%);
  transition: transform 0.3s ease, bottom 0.2s ease;
}
.cookie-banner.is-visible {
  transform: translateY(0);
}
/* When the floating basket bar is present, lift the notice to sit above it so
   the checkout controls stay reachable. Matches the 7rem reserve used for the
   bar elsewhere (see body.fbk-has-bar). */
body.fbk-has-bar .cookie-banner {
  bottom: 7rem;
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
}
.cookie-banner__text {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.cookie-banner__link {
  color: var(--color-white);
  text-decoration: underline;
}
.cookie-banner__link:hover,
.cookie-banner__link:focus {
  color: var(--color-accent);
}
.cookie-banner__accept {
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: none;
  }
}