/* Self-hosted Manrope, subsetted per script — inlined rather than @import-ed so the
   font request is not chained behind a second stylesheet round-trip. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/manrope-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:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/manrope-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}

/* ==========================================================================
   Blue Diamond Events — Design system
   Paleta je izvedena iz starog sajta (#154375 / #369DA2) radi prepoznatljivosti.
   ========================================================================== */

:root {
  --bde-navy-900: #06203a;
  --bde-navy-800: #0d3055;
  --bde-navy: #154375;
  --bde-navy-400: #2a6ab0;
  --bde-teal: #369da2;
  /* Brand teal darkened for text: #369da2 is only 3.23:1 on white, which fails AA for the
     small bold uppercase labels. This clears 4.5:1 on both surfaces — 5.33:1 on #fff and
     4.99:1 on the muted #f4f8fc. Use it for TEXT on light backgrounds; keep --bde-teal for
     graphics, where the bar is 3:1. */
  --bde-teal-700: #27767a;
  --bde-teal-300: #57c3c8;
  --bde-cyan: #8fd7f7;
  --bde-ice: #e6f7ff;
  --bde-gold: #f2a03d;
  --bde-gold-600: #dd8a24;

  --bde-ink: #16202b;
  --bde-muted: #5a6b7c;
  --bde-line: #e2e9f1;
  --bde-surface: #ffffff;
  --bde-surface-2: #f4f8fc;

  --bde-grad-brand: linear-gradient(135deg, var(--bde-navy) 0%, var(--bde-teal) 100%);
  --bde-grad-deep: linear-gradient(150deg, var(--bde-navy-900) 0%, var(--bde-navy) 55%, #1c6b7f 100%);
  --bde-grad-gold: linear-gradient(135deg, var(--bde-gold) 0%, var(--bde-gold-600) 100%);

  --bde-radius: 20px;
  --bde-radius-sm: 12px;
  --bde-shadow-sm: 0 2px 10px rgba(6, 32, 58, .06);
  --bde-shadow: 0 18px 40px -18px rgba(6, 32, 58, .28);
  --bde-shadow-lg: 0 34px 70px -28px rgba(6, 32, 58, .42);
  --bde-ease: cubic-bezier(.22, .61, .36, 1);

  /* Bootstrap overrides */
  --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--bde-ink);
  --bs-body-bg: var(--bde-surface);
  --bs-primary: var(--bde-navy);
  --bs-link-color-rgb: 21, 67, 117;
  --bs-border-color: var(--bde-line);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* WordPress admin traka.
   Vidi je SAMO ulogovani korisnik — posjetiocima se ništa od ovoga ne
   primjenjuje, jer WP tada ne dodaje klasu `admin-bar` ni #wpadminbar.

   Header je `position: fixed; top: 0`, pa ga admin traka prekriva za svojih
   32 px. Isto važi za mobilni offcanvas meni i za `scroll-padding-top`, bez
   kojeg sidra (#festivals, #contact…) slijeću ispod fiksnog headera.

   Prelomna tačka je 782px jer je to WP-ova sopstvena — ispod nje traka je
   visoka 46px. `position: fixed` je namjerno: WP je na mobilnom postavlja na
   `absolute`, pa bi inače na vrhu stranice header prekrio dugmad admin trake. */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .offcanvas-bde { top: 32px; }
body.admin-bar { --bde-adminbar: 32px; }
html:has(body.admin-bar) { scroll-padding-top: 124px; }

@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar .offcanvas-bde { top: 46px; }
  body.admin-bar { --bde-adminbar: 46px; }
  html:has(body.admin-bar) { scroll-padding-top: 138px; }
  #wpadminbar { position: fixed; }
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--bde-ink);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display-title { font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--bde-navy-900); }
p { color: var(--bde-muted); }
a { text-decoration: none; }

::selection { background: var(--bde-cyan); color: var(--bde-navy-900); }

/* Inline links inside body copy: navy on muted grey is only 1.83:1, so colour alone
   cannot mark them as links. Underline them; standalone link components opt out. */
.form-note a, .accordion-body a, .info-row .lang-note a {
  color: var(--bde-navy); text-decoration: underline;
  text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.form-note a:hover, .accordion-body a:hover { color: var(--bde-teal-700); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--bde-gold);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Containers that get focus programmatically (offcanvas, modal) should not flash a ring */
[tabindex="-1"]:focus-visible { outline: none; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 2000;
  background: #fff; color: var(--bde-navy); padding: .75rem 1.25rem;
  border-radius: 0 0 10px 10px; font-weight: 700; transition: top .2s var(--bde-ease);
}
.skip-link:focus { top: 0; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; line-height: 1.4; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bde-teal-700);
  text-wrap: balance;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--bde-grad-brand); border-radius: 2px; }
.eyebrow--light { color: var(--bde-cyan); }
.eyebrow--light::before { background: var(--bde-cyan); }
.eyebrow--center { justify-content: center; }

.section-title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); margin: .65rem 0 0; }
.section-lead { font-size: 1.075rem; max-width: 62ch; }
.text-gradient {
  background: linear-gradient(100deg, var(--bde-cyan) 0%, #ffffff 45%, var(--bde-cyan) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-brand {
  background: var(--bde-grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* A .row.g-5 uses a -24px negative margin while .container only pads 12px, so it
   spills 12px past the viewport. Keep the vertical rhythm, tame the horizontal gutter. */
.row.g-5 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 3rem; }

.section { padding: clamp(4rem, 2rem + 7vw, 7.5rem) 0; }
.section--tight { padding: clamp(3rem, 2rem + 4vw, 5rem) 0; }
.section--muted { background: var(--bde-surface-2); }

/* ---------- Buttons ---------- */
.btn-bde {
  --_bg: var(--bde-grad-gold);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.7rem; border-radius: 999px; border: 0;
  font-weight: 800; font-size: .97rem; letter-spacing: .01em;
  color: #fff; background: var(--_bg);
  box-shadow: 0 12px 26px -12px rgba(221, 138, 36, .85);
  transition: transform .25s var(--bde-ease), box-shadow .25s var(--bde-ease), filter .25s var(--bde-ease);
}
.btn-bde:hover, .btn-bde:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(221, 138, 36, .95); filter: saturate(1.08); }
.btn-bde svg { transition: transform .25s var(--bde-ease); }
.btn-bde:hover svg { transform: translateX(4px); }
.btn-bde--compact { padding: .72rem 1.35rem; font-size: .9rem; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.7rem; border-radius: 999px;
  font-weight: 700; font-size: .97rem; color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
  transition: background .25s var(--bde-ease), border-color .25s var(--bde-ease), transform .25s var(--bde-ease);
}
.btn-ghost:hover, .btn-ghost:focus-visible { color: #fff; background: rgba(255, 255, 255, .18); border-color: #fff; transform: translateY(-2px); }

.btn-outline-bde {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: 999px;
  font-weight: 800; font-size: .95rem; color: var(--bde-navy);
  border: 1.5px solid var(--bde-line); background: #fff;
  transition: all .25s var(--bde-ease);
}
.btn-outline-bde:hover, .btn-outline-bde:focus-visible {
  color: #fff; background: var(--bde-navy); border-color: var(--bde-navy);
  transform: translateY(-2px); box-shadow: var(--bde-shadow);
}
.btn-outline-bde svg { transition: transform .25s var(--bde-ease); }
.btn-outline-bde:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 1040;
  padding: .85rem 0;
  transition: background .3s var(--bde-ease), box-shadow .3s var(--bde-ease), padding .3s var(--bde-ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(6, 32, 58, .75) 0%, rgba(6, 32, 58, 0) 100%);
  pointer-events: none; transition: opacity .3s var(--bde-ease);
}
/* The scrim is absolutely positioned, so without this the static header content
   (logo, nav) paints underneath it. */
.site-header > .container { position: relative; z-index: 1; }
/* Stuck state stays dark: the logo has white lettering and would vanish on a white bar */
.site-header.is-stuck {
  background: rgba(6, 32, 58, .88);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 8px 30px -16px rgba(0, 0, 0, .8);
  padding: .45rem 0;
}
.site-header.is-stuck::before { opacity: 0; }

.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand img { height: 80px; width: auto; transition: height .3s var(--bde-ease); }
.site-header.is-stuck .brand img { height: 60px; }
.brand-name { display: none; }

.main-nav { display: flex; align-items: center; gap: .25rem; }
.main-nav a {
  position: relative; padding: .55rem .85rem; border-radius: 10px;
  font-size: .86rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .92); transition: color .2s var(--bde-ease), background .2s var(--bde-ease);
}
.main-nav a::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .3rem; height: 2px;
  background: var(--bde-gold); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--bde-ease);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { transform: scaleX(1); }

.lang-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .8rem; border-radius: 999px;
  font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3);
  transition: all .25s var(--bde-ease);
}
.lang-toggle:hover, .lang-toggle:focus-visible { background: rgba(255, 255, 255, .22); color: #fff; }
.lang-menu {
  border: 0; border-radius: 14px; padding: .5rem; min-width: 208px;
  box-shadow: var(--bde-shadow); background: #fff;
}
.lang-menu .dropdown-item {
  display: flex; align-items: center; gap: .6rem;
  border-radius: 9px; padding: .5rem .7rem; font-weight: 600; font-size: .95rem; color: var(--bde-ink);
}
.lang-menu .dropdown-item:hover, .lang-menu .dropdown-item:focus { background: var(--bde-ice); color: var(--bde-navy); }
.lang-menu .dropdown-item[aria-current="true"] { background: var(--bde-ice); color: var(--bde-navy); font-weight: 800; }
.flag { width: 22px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(6, 32, 58, .12); flex: 0 0 auto; }

.nav-burger {
  width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12); display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px; padding: 0;
}
.nav-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; }

.offcanvas-bde { background: var(--bde-navy-900); color: #fff; width: min(88vw, 360px); }
.offcanvas-bde .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, .12); justify-content: flex-end; align-items: center;
  /* As tall as the fixed header — logo (66px on a phone) plus its .85rem padding top and bottom
     — so the close button sits exactly where the burger the reader just pressed was, instead of
     23px above it. */
  min-height: calc(66px + 1.7rem);
}
.offcanvas-bde .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.offcanvas-bde .mobile-nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem .25rem; color: #fff; font-weight: 700; font-size: 1.05rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.offcanvas-bde .mobile-nav a:hover { color: var(--bde-cyan); }
.offcanvas-lang { display: flex; flex-wrap: wrap; gap: .5rem; }
.offcanvas-lang a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
}
/* Dark navy on cyan, not white on teal — white on teal is only 2.6:1 */
.offcanvas-lang a[aria-current="true"] { background: var(--bde-cyan); border-color: var(--bde-cyan); color: var(--bde-navy-900); }

/* Between the xl breakpoint and 1400px the six nav labels only just clear the
   language switcher and CTA. Translations run longer than English — Bulgarian,
   Greek and Spanish leave ~16px at 1200px — so tighten the bar in that band
   instead of dropping the desktop nav on 1280/1366 laptops. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .main-nav a { padding: .55rem .5rem; font-size: .8rem; letter-spacing: .05em; }
  .main-nav a::after { left: .5rem; right: .5rem; }
  .btn-bde--compact { padding: .65rem 1.05rem; font-size: .84rem; }
  .lang-toggle { padding: .42rem .65rem; font-size: .78rem; }
  .brand img { height: 68px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; display: flex; align-items: center;
  min-height: min(94svh, 900px); padding: 9rem 0 4rem; overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; animation: heroZoom 22s var(--bde-ease) forwards; }
@keyframes heroZoom { from { transform: scale(1.1); } to { transform: scale(1); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 12% 30%, rgba(6, 32, 58, .93) 0%, rgba(6, 32, 58, .55) 45%, rgba(6, 32, 58, .18) 75%),
    linear-gradient(180deg, rgba(6, 32, 58, .55) 0%, rgba(13, 48, 85, .55) 45%, rgba(6, 32, 58, .92) 100%);
}
.hero__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1rem .45rem .5rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(8px);
  color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .06em;
}
.hero__badge b { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: var(--bde-grad-gold); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.hero h1 { color: #fff; font-size: clamp(2.35rem, 1.1rem + 5vw, 4.6rem); margin: 1.2rem 0 0; text-wrap: balance; }
.hero__quote {
  margin: 1.1rem 0 0; max-width: 56ch;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); font-weight: 500; font-style: italic;
  color: rgba(255, 255, 255, .88);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

.hero__stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem;
  margin-top: 3.25rem; max-width: 720px;
}
@media (min-width: 768px) { .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  padding: 1rem 1.1rem; border-radius: 16px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px);
}
.stat__num { display: block; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 800; color: #fff; line-height: 1.1; }
.stat__label { display: block; margin-top: .2rem; font-size: .78rem; line-height: 1.25; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bde-cyan); }

/* Parked at the right edge: the stats grid is capped at 720px on the left, so the
   two can never collide however the copy wraps. */
.scroll-cue {
  position: absolute; right: 2.5rem; bottom: 1.6rem;
  display: inline-flex; flex-direction: column; align-items: center; gap: .35rem;
  color: rgba(255, 255, 255, .7); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
}
/* Only worth showing where it actually lands inside the viewport */
@media (max-height: 820px) { .scroll-cue { display: none !important; } }

/* Laptop-height screens: tighten the hero so the stats row stays above the fold */
@media (min-width: 992px) and (max-height: 820px) {
  .hero { padding-top: 7.5rem; padding-bottom: 2.5rem; }
  .hero__stats { margin-top: 2.25rem; }
}
.scroll-cue svg { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---------- About ---------- */
/* ---------- About: background motif ----------
   The same language as the sub-page hero — dot grid, brand glow and the concentric diamond
   from the logo — but in light values, so the section stops being a blank white block. All of
   it is CSS gradients on ::before/::after: no image request, nothing to lay out, no CLS. */
#about { position: relative; isolation: isolate; overflow: hidden; }
#about::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(circle, rgba(21, 67, 117, .075) 1px, transparent 1.4px),
    radial-gradient(58% 85% at 95% 4%, rgba(143, 215, 247, .38) 0%, transparent 62%),
    radial-gradient(48% 75% at 2% 98%, rgba(54, 157, 162, .16) 0%, transparent 60%);
  background-size: 22px 22px, 100% 100%, 100% 100%;
  /* keeps the motif at the edges and out from under the copy, where it would fight the text */
  -webkit-mask-image: radial-gradient(76% 62% at 46% 52%, transparent 0%, #000 76%);
          mask-image: radial-gradient(76% 62% at 46% 52%, transparent 0%, #000 76%);
}
#about::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -7%; top: 16%; width: 232px; height: 232px;
  transform: rotate(45deg); border-radius: 30px;
  background: linear-gradient(135deg, rgba(54, 157, 162, .10) 0%, rgba(54, 157, 162, 0) 62%);
  box-shadow:
    0 0 0 1px rgba(21, 67, 117, .09),
    0 0 0 48px rgba(21, 67, 117, .022),
    0 0 0 49px rgba(21, 67, 117, .07),
    0 0 0 104px rgba(21, 67, 117, .018),
    0 0 0 105px rgba(21, 67, 117, .045);
}
/* On a phone the section is one narrow column, so the diamond has to sit almost entirely off
   the right edge — placed any further in, its outlines cross the headline. */
@media (max-width: 991.98px) {
  #about::after { right: -48%; top: 2%; width: 150px; height: 150px; opacity: .5; }
  #about::before { background-size: 26px 26px, 100% 100%, 100% 100%; }
}

.about-card {
  /* Vertical padding is tighter than horizontal on purpose: it brings the card down to about
     the height of the copy column beside it, instead of overhanging it by 60px. */
  position: relative;
  padding: clamp(1.5rem, .9rem + 1.1vw, 1.9rem) clamp(1.75rem, 1rem + 2.5vw, 3rem);
  border-radius: 26px; background: #fff; border: 1px solid var(--bde-line);
  box-shadow: var(--bde-shadow);
}
.about-card::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 5px;
  border-radius: 0 0 26px 26px; background: var(--bde-grad-brand);
}
.about-lead { font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); color: var(--bde-navy-900); font-weight: 600; }
/* The text column is 770px wide at desktop, which runs to ~84 characters a line — past the
   point where the eye finds the next line reliably. The cap is in rem, not ch, so the lead and
   the body paragraphs share one right edge instead of each wrapping at its own font size. */
#about .col-lg-7 > * { max-width: 40rem; }

.feature { display: flex; gap: 1rem; }
.feature__icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; color: #fff; background: var(--bde-grad-brand);
  box-shadow: 0 10px 22px -12px rgba(21, 67, 117, .9);
  transition: transform .4s var(--bde-ease), box-shadow .4s var(--bde-ease);
}
/* The row is not a link, so the lift stays on the icon — enough to feel alive, not enough to
   read as "click me". */
.about-card:hover .feature:hover .feature__icon {
  transform: translateY(-4px); box-shadow: 0 18px 30px -14px rgba(21, 67, 117, .95);
}
.feature h3 { font-size: 1.05rem; margin: 0 0 .25rem; }
.feature p { margin: 0; font-size: .95rem; }

.founders {
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1.15rem 1.35rem; border-radius: 16px; background: var(--bde-ice);
  border: 1px solid #cfe9f7;
}
.founders > svg { flex: 0 0 auto; margin-top: .15rem; color: var(--bde-teal-700); }
.founders span { font-size: .95rem; color: var(--bde-navy); }


/* ---------- Festival cards ---------- */
.festival-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--bde-line); border-radius: var(--bde-radius);
  overflow: hidden; box-shadow: var(--bde-shadow-sm);
  transition: transform .35s var(--bde-ease), box-shadow .35s var(--bde-ease), border-color .35s var(--bde-ease);
}
.festival-card:hover, .festival-card:focus-within {
  transform: translateY(-8px); box-shadow: var(--bde-shadow-lg); border-color: transparent;
}
.festival-card__media { position: relative; aspect-ratio: 17 / 10; overflow: hidden; background: var(--bde-surface-2); }
.festival-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--bde-ease); }
.festival-card:hover .festival-card__media img { transform: scale(1.07); }
.festival-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 32, 58, 0) 45%, rgba(6, 32, 58, .55) 100%);
}
.date-badge {
  position: absolute; z-index: 2; left: 1rem; top: 1rem;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--bde-navy);
  font-size: .78rem; font-weight: 800; letter-spacing: .03em;
  box-shadow: 0 6px 18px -8px rgba(6, 32, 58, .6);
}
.date-badge svg { color: var(--bde-teal); }
.place-pill {
  position: absolute; z-index: 2; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .35rem;
  color: #fff; font-size: .82rem; font-weight: 700; text-shadow: 0 1px 8px rgba(6, 32, 58, .8);
}
.festival-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.25rem 1.3rem 1.4rem; }
.festival-card__kicker { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bde-teal-700); }
.festival-card__title { font-size: 1.12rem; line-height: 1.35; margin: .5rem 0 0; }
.festival-card__title a { color: var(--bde-navy-900); background-image: linear-gradient(var(--bde-teal), var(--bde-teal)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s var(--bde-ease), color .2s var(--bde-ease); }
.festival-card:hover .festival-card__title a { color: var(--bde-navy); background-size: 100% 2px; }
.festival-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.festival-card__meta { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.festival-card__cta { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--bde-navy); }
.festival-card:hover .festival-card__cta { color: var(--bde-gold-600); }
.festival-card__cta svg { transition: transform .3s var(--bde-ease); }
.festival-card:hover .festival-card__cta svg { transform: translateX(5px); }
.spots { font-size: .78rem; font-weight: 700; color: var(--bde-muted); display: inline-flex; align-items: center; gap: .35rem; }
.spots i { width: 8px; height: 8px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 4px rgba(47, 191, 113, .18); }

/* ---------- Festival availability states ----------
   Add one modifier class to .festival-card and set the matching .spots text:
     (none)                    → green dot,  "Applications open"
     .festival-card--limited   → amber dot,  "Few places left"
     .festival-card--full      → red ribbon, "Fully booked"
   For --full also add the ribbon markup and remainingAttendeeCapacity: 0 in the JSON-LD.  */

.ribbon { position: absolute; z-index: 4; top: 0; right: 0; width: 146px; height: 146px; overflow: hidden; pointer-events: none; }
.ribbon span {
  position: absolute; top: 38px; right: -52px; width: 206px; padding: .5rem 0;
  text-align: center; transform: rotate(45deg);
  /* Light end kept at #d93325 so white text clears 4.5:1 across the whole gradient */
  background: linear-gradient(135deg, #d93325 0%, #a81c12 100%);
  color: #fff; font-size: .84rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  box-shadow: 0 8px 20px -6px rgba(140, 20, 12, .8);
}

/* A booked-out festival stays legible but visibly steps back from the open ones */
.festival-card--full .festival-card__media img { filter: saturate(.5) brightness(.94); }
.festival-card--full:hover .festival-card__media img { transform: scale(1.03); }
.festival-card--full .spots { color: #bf2a1f; }
.festival-card--full .spots i { background: #d8382b; box-shadow: 0 0 0 4px rgba(216, 56, 43, .16); }
.festival-card--full .festival-card__cta { color: var(--bde-muted); }
.festival-card--full:hover .festival-card__cta { color: var(--bde-navy); }

.festival-card--limited .spots { color: var(--bde-gold-600); }
.festival-card--limited .spots i { background: var(--bde-gold); box-shadow: 0 0 0 4px rgba(242, 160, 61, .22); }

/* ---------- Video ---------- */
.video-section { position: relative; background: var(--bde-grad-deep); overflow: hidden; isolation: isolate; }
.video-section::before {
  content: ""; position: absolute; z-index: -1; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 60% at 30% 20%, rgba(143, 215, 247, .22) 0%, transparent 70%),
              radial-gradient(50% 50% at 85% 40%, rgba(54, 157, 162, .28) 0%, transparent 70%);
  filter: blur(10px);
}
.video-section h2, .video-section h3 { color: #fff; }
.video-section .section-lead { color: rgba(255, 255, 255, .78); }

/* Light-surface card by default (archive pages); the .video-section block below
   re-skins it for the dark homepage section. */
.video-card {
  position: relative; display: block; border-radius: 16px; overflow: hidden;
  background: #fff; border: 1px solid var(--bde-line); box-shadow: var(--bde-shadow-sm);
  transition: transform .35s var(--bde-ease), border-color .35s var(--bde-ease), box-shadow .35s var(--bde-ease);
}
.video-card:hover, .video-card:focus-visible { transform: translateY(-6px); border-color: transparent; box-shadow: var(--bde-shadow-lg); }
.video-card__media { position: relative; aspect-ratio: 33 / 20; overflow: hidden; }
.video-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--bde-ease), filter .4s var(--bde-ease); filter: saturate(.95); }
.video-card:hover .video-card__media img { transform: scale(1.08); filter: saturate(1.1); }
.video-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 32, 58, .06) 0%, rgba(6, 32, 58, .42) 100%); }
.play-btn {
  position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: var(--bde-navy); background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .8);
  transition: transform .35s var(--bde-ease), background .3s var(--bde-ease);
}
.video-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.12); background: #fff; }
.play-btn::before {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); opacity: 0; transform: scale(.85);
  transition: opacity .4s var(--bde-ease), transform .4s var(--bde-ease);
}
.video-card:hover .play-btn::before { opacity: 1; transform: scale(1); }
/* Below the image rather than over it: full festival titles run to two or three lines
   and would sit under the centred play button. */
.video-card__title {
  display: block; padding: .85rem 1rem 1rem;
  color: var(--bde-navy-900); font-size: .92rem; font-weight: 700; line-height: 1.4;
}
.video-card:hover .video-card__title { color: var(--bde-navy); }

/* Dark-section variant (homepage) */
.video-section .video-card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.video-section .video-card:hover, .video-section .video-card:focus-visible { border-color: rgba(143, 215, 247, .6); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .8); }
.video-section .video-card__title, .video-section .video-card:hover .video-card__title { color: #fff; }

/* ---------- Blog / Good to know ---------- */
.post-card {
  position: relative; display: block; height: 100%; border-radius: var(--bde-radius); overflow: hidden;
  box-shadow: var(--bde-shadow-sm);
  transition: transform .35s var(--bde-ease), box-shadow .35s var(--bde-ease);
}
.post-card:hover, .post-card:focus-visible { transform: translateY(-8px); box-shadow: var(--bde-shadow-lg); }
.post-card__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bde-surface-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--bde-ease); }
.post-card:hover .post-card__media img { transform: scale(1.08); }
.post-card__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.3rem; color: #fff;
  background: linear-gradient(180deg, rgba(6, 32, 58, 0) 30%, rgba(6, 32, 58, .55) 60%, rgba(6, 32, 58, .93) 100%);
}
.post-card__tag {
  align-self: flex-start; margin-bottom: .6rem; padding: .28rem .7rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(6px);
}
.post-card__title { color: #fff; font-size: 1.02rem; line-height: 1.35; margin: 0; }
.post-card__more { margin-top: .6rem; font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bde-cyan); display: inline-flex; align-items: center; gap: .4rem; }
.post-card:hover .post-card__more svg { transform: translateX(4px); }
.post-card__more svg { transition: transform .3s var(--bde-ease); }

/* ---------- Steps ---------- */
.step {
  position: relative; height: 100%; padding: 1.6rem 1.5rem;
  background: #fff; border: 1px solid var(--bde-line); border-radius: var(--bde-radius);
  transition: transform .3s var(--bde-ease), box-shadow .3s var(--bde-ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--bde-shadow); }
.step__num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  font-size: 1.05rem; font-weight: 800; color: #fff; background: var(--bde-grad-brand);
  box-shadow: 0 10px 20px -12px rgba(21, 67, 117, .9);
}
.step h3 { font-size: 1.05rem; margin: 1rem 0 .35rem; }
.step p { font-size: .95rem; margin: 0; }

/* ---------- FAQ ---------- */
.faq .accordion-item { border: 1px solid var(--bde-line); border-radius: 16px !important; margin-bottom: .75rem; overflow: hidden; background: #fff; }
.faq .accordion-button {
  font-weight: 800; font-size: 1.03rem; color: var(--bde-navy-900); padding: 1.15rem 1.3rem; background: #fff;
}
.faq .accordion-button:not(.collapsed) { color: var(--bde-navy); background: var(--bde-ice); box-shadow: none; }
.faq .accordion-button:focus { box-shadow: none; }
.faq .accordion-button::after {
  width: 1.1rem; height: 1.1rem; background-size: 1.1rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23154375'%3e%3cpath d='M8 3a.75.75 0 0 1 .75.75v3.5h3.5a.75.75 0 0 1 0 1.5h-3.5v3.5a.75.75 0 0 1-1.5 0v-3.5h-3.5a.75.75 0 0 1 0-1.5h3.5v-3.5A.75.75 0 0 1 8 3Z'/%3e%3c/svg%3e");
}
.faq .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }
.faq .accordion-body { padding: 1.3rem; color: var(--bde-muted); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: 28px; isolation: isolate;
  padding: clamp(2rem, 1rem + 4vw, 3.75rem);
  background: var(--bde-grad-brand); color: #fff;
}
.cta-band::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(60% 120% at 85% 10%, rgba(143, 215, 247, .35) 0%, transparent 60%),
              radial-gradient(50% 100% at 5% 100%, rgba(6, 32, 58, .45) 0%, transparent 60%);
}
.cta-band h2 { color: #fff; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); }
.cta-band p { color: rgba(255, 255, 255, .85); margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact-tile {
  display: flex; gap: .9rem; align-items: flex-start; height: 100%;
  padding: 1.35rem; border-radius: var(--bde-radius); background: #fff;
  border: 1px solid var(--bde-line); box-shadow: var(--bde-shadow-sm);
  transition: transform .3s var(--bde-ease), box-shadow .3s var(--bde-ease);
}
.contact-tile:hover { transform: translateY(-5px); box-shadow: var(--bde-shadow); }
.contact-tile__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--bde-navy); background: var(--bde-ice); }
.contact-tile h3 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bde-teal-700); margin: 0 0 .4rem; }
/* Break only at the <wbr> we place before the @, never mid-word */
.contact-tile a { display: block; color: var(--bde-navy-900); font-weight: 700; font-size: .97rem; line-height: 1.6; overflow-wrap: normal; }
.contact-tile a + a { margin-top: .15rem; }
.contact-tile a:hover { color: var(--bde-teal-700); }

.social-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.social-links a {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  transition: all .28s var(--bde-ease);
}
.social-links a:hover { background: var(--bde-teal); border-color: var(--bde-teal); transform: translateY(-3px); }

/* ---------- Footer ---------- */
.site-footer { background: var(--bde-navy-900); color: rgba(255, 255, 255, .78); padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0; }
/* The global `p { color: --bde-muted }` would otherwise put dark grey text on dark navy */
.site-footer p { color: rgba(255, 255, 255, .78); }
.site-footer h2, .site-footer h3 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.1rem; }
.site-footer a { color: rgba(255, 255, 255, .76); }
.site-footer a:hover { color: var(--bde-cyan); }
.footer-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
/* Not flex: a <wbr> inside the label would become its own flex item and the row gap
   would open a visible hole mid-address. Absolute bullet keeps it on the first line. */
.footer-nav a { display: inline-block; position: relative; padding-left: 1.1rem; font-size: .97rem; line-height: 1.45; }
.footer-nav a::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--bde-teal);
}
.footer-logo { height: 84px; width: auto; }
.footer-bottom { margin-top: 3rem; padding: 1.3rem 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .87rem; }
/* Link „Created by Digitality" stoji unutar rečenice, a boja mu je gotovo ista kao
   okolnom tekstu (1.05:1) — Lighthouse `link-in-text-block`. Podvlačenje ga čini
   prepoznatljivim i bez oslanjanja na boju. */
.footer-bottom a { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: from-font; }
.footer-bottom a:hover,
.footer-bottom a:focus-visible { text-decoration-thickness: 2px; }

/* ---------- Reveal on scroll ---------- */
/* Scoped to .js so content stays visible if JavaScript never runs (no-JS, crawlers, JS error) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--bde-ease), transform .7s var(--bde-ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  html { scroll-padding-top: 80px; }
  .hero { min-height: auto; padding: 7.5rem 0 3.5rem; text-align: left; }
  .brand img { height: 66px; }
  .site-header.is-stuck .brand img { height: 54px; }
}
@media (max-width: 767.98px) {
  .video-card__title { padding: .7rem .85rem .8rem; font-size: .87rem; }
  .play-btn { width: 46px; height: 46px; }
}

@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  .hero__actions .btn-bde, .hero__actions .btn-ghost { width: 100%; justify-content: center; }
  .btn-bde, .btn-ghost, .btn-outline-bde { padding: .85rem 1.4rem; }
  .stat { padding: .8rem .9rem; }
}

/* Print */
@media print {
  .site-header, .scroll-cue, .video-section, .cta-band { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   Sub-page components (archives + contact)
   ========================================================================== */

/* ---------- Page hero ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* Top padding only has to clear the ~107px fixed header, not restage the homepage hero */
  padding: clamp(7.25rem, 6.25rem + 2vw, 8.5rem) 0 clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  background: var(--bde-grad-deep); color: #fff;
}
.page-hero::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    /* dot grid — pure CSS, no image request */
    radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1.4px),
    radial-gradient(70% 110% at 84% 0%, rgba(143, 215, 247, .28) 0%, transparent 60%),
    radial-gradient(55% 100% at 2% 100%, rgba(54, 157, 162, .32) 0%, transparent 60%);
  background-size: 22px 22px, 100% 100%, 100% 100%;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 55%, transparent 92%);
          mask-image: linear-gradient(100deg, #000 0%, #000 55%, transparent 92%);
}
/* Concentric diamond outlines echoing the logo's faceted gem */
.page-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -3%; top: 50%; width: 268px; height: 268px;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(143, 215, 247, .14) 0%, rgba(143, 215, 247, 0) 62%);
  box-shadow:
    0 0 0 1px rgba(143, 215, 247, .18),
    0 0 0 54px rgba(143, 215, 247, .035),
    0 0 0 55px rgba(143, 215, 247, .12),
    0 0 0 116px rgba(143, 215, 247, .025),
    0 0 0 117px rgba(143, 215, 247, .07);
}
@media (max-width: 991.98px) {
  .page-hero::after { right: -32%; width: 200px; height: 200px; opacity: .7; }
}
/* The hero already carries the top breathing room, so the first section can start close */
.page-hero + .section { padding-top: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); }

.page-hero h1 { color: #fff; font-size: clamp(1.85rem, 1.25rem + 2.4vw, 2.9rem); margin: .5rem 0 0; text-wrap: balance; }
.page-hero .page-lead { margin: .8rem 0 0; max-width: 60ch; color: rgba(255, 255, 255, .8); font-size: 1rem; line-height: 1.6; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: .45rem .6rem; margin-top: 1.25rem; }
.page-hero__meta span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .8rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
}

/* ---------- Year / group heading ---------- */
.group-head { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.9rem; }
.group-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin: 0; white-space: nowrap; }
.group-head::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--bde-line), transparent); }
.group-head .count { font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bde-teal-700); white-space: nowrap; }

/* ---------- Filter chips ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2.5rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--bde-line);
  background: #fff; color: var(--bde-navy); font-size: .88rem; font-weight: 700;
  cursor: pointer; transition: all .25s var(--bde-ease);
}
.filter-chip:hover { border-color: var(--bde-teal); color: var(--bde-teal-700); }
.filter-chip[aria-pressed="true"] { background: var(--bde-navy); border-color: var(--bde-navy); color: #fff; }
.filter-chip .n { font-size: .78rem; opacity: .65; font-weight: 600; }
.filter-empty { padding: 3rem 0; text-align: center; color: var(--bde-muted); }

/* ---------- Gallery album card ---------- */
.album-card {
  position: relative; display: block; height: 100%; border-radius: var(--bde-radius); overflow: hidden;
  background: #fff; border: 1px solid var(--bde-line); box-shadow: var(--bde-shadow-sm);
  transition: transform .35s var(--bde-ease), box-shadow .35s var(--bde-ease), border-color .35s var(--bde-ease);
}
.album-card:hover, .album-card:focus-visible { transform: translateY(-7px); box-shadow: var(--bde-shadow-lg); border-color: transparent; }
.album-card__media { position: relative; aspect-ratio: 33 / 20; overflow: hidden; background: var(--bde-surface-2); }
.album-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--bde-ease); }
.album-card:hover .album-card__media img { transform: scale(1.07); }
.album-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 32, 58, .05) 0%, rgba(6, 32, 58, .5) 100%); }
.album-card__badge {
  position: absolute; z-index: 2; right: .8rem; top: .8rem;
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  color: var(--bde-navy); background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 16px -8px rgba(6, 32, 58, .7);
  transition: transform .3s var(--bde-ease);
}
.album-card:hover .album-card__badge { transform: scale(1.08); }
.album-card__title { display: block; padding: 1rem 1.15rem 1.2rem; font-size: 1rem; font-weight: 800; line-height: 1.35; color: var(--bde-navy-900); }
.album-card:hover .album-card__title { color: var(--bde-navy); }

/* ---------- Article card (Good to know archive) ---------- */
.article-card {
  /* positioned so the title link can stretch over the whole card — see __title a::after */
  position: relative;
  display: flex; flex-direction: column; height: 100%; border-radius: var(--bde-radius); overflow: hidden;
  background: #fff; border: 1px solid var(--bde-line); box-shadow: var(--bde-shadow-sm);
  transition: transform .35s var(--bde-ease), box-shadow .35s var(--bde-ease), border-color .35s var(--bde-ease);
}
.article-card:hover, .article-card:focus-within { transform: translateY(-7px); box-shadow: var(--bde-shadow-lg); border-color: transparent; }
.article-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bde-surface-2); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--bde-ease); }
.article-card:hover .article-card__media img { transform: scale(1.06); }
.article-card__tag {
  position: absolute; z-index: 2; left: .9rem; top: .9rem;
  padding: .3rem .75rem; border-radius: 999px; font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bde-navy); background: rgba(255, 255, 255, .93);
  box-shadow: 0 6px 16px -8px rgba(6, 32, 58, .6);
}
.article-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.3rem 1.35rem 1.5rem; }
/* not positioned: the ::after below has to resolve against .article-card, not the heading */
.article-card__title { font-size: 1.1rem; line-height: 1.38; margin: 0; }
.article-card__title a { color: var(--bde-navy-900); }
.article-card:hover .article-card__title a { color: var(--bde-navy); }
/* whole card clickable from one link — z-index clears the country tag at z-index 2 */
.article-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.article-card__more { margin-top: auto; padding-top: 1.2rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bde-navy); }
.article-card:hover .article-card__more { color: var(--bde-gold-600); }
.article-card__more svg { transition: transform .3s var(--bde-ease); }
.article-card:hover .article-card__more svg { transform: translateX(5px); }

/* ---------- Contact page ---------- */
/* No height:100% — a column here stacks several cards, and forcing the card to the
   flex-row height clipped it and pushed the following block out of the section. */
.info-card {
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  border-radius: 24px; background: #fff; border: 1px solid var(--bde-line); box-shadow: var(--bde-shadow-sm);
}
.info-card h2 { font-size: 1.25rem; margin: 0 0 1.4rem; }
.info-row { display: flex; gap: .9rem; padding: 1rem 0; border-top: 1px solid var(--bde-line); }
.info-row:first-of-type { border-top: 0; padding-top: 0; }
.info-row__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--bde-navy); background: var(--bde-ice); }
.info-row__label { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bde-teal-700); margin-bottom: .3rem; }
.info-row a, .info-row strong { color: var(--bde-navy-900); font-weight: 700; }
.info-row a { display: block; }
.info-row a:hover { color: var(--bde-teal-700); }
.info-row .lang-note { display: block; font-size: .82rem; font-weight: 600; color: var(--bde-muted); }
.info-row address { margin: 0; font-style: normal; color: var(--bde-navy-900); font-weight: 600; line-height: 1.55; }
.info-row .tax { display: block; margin-top: .35rem; font-size: .84rem; font-weight: 600; color: var(--bde-muted); }

/* The left column runs much taller than the aside, so the aside follows the scroll
   instead of leaving a tall empty gap beside it. */
@media (min-width: 992px) {
  .contact-aside { position: sticky; top: 6.5rem; }
}

.download-card {
  display: flex; align-items: center; gap: 1.1rem; padding: 1.35rem 1.5rem;
  border-radius: 20px; background: var(--bde-ice); border: 1px solid #cfe9f7;
  transition: transform .3s var(--bde-ease), box-shadow .3s var(--bde-ease);
}
.download-card:hover { transform: translateY(-4px); box-shadow: var(--bde-shadow); }
.download-card__icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--bde-grad-brand); }
.download-card__text { min-width: 0; }
.download-card__text strong { display: block; color: var(--bde-navy-900); font-size: 1.02rem; }
/* Scoped to __text: a bare `.download-card span` also matched the icon wrapper and
   overrode its white colour, leaving the icon grey on the gradient. */
.download-card__text span { display: block; font-size: .86rem; color: var(--bde-muted); }

.form-bde .form-label { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bde-navy); margin-bottom: .4rem; }
.form-bde .form-control, .form-bde .form-select {
  border-radius: 12px; border: 1.5px solid var(--bde-line); padding: .8rem 1rem;
  font-size: 1rem; color: var(--bde-ink); background: #fff;
  transition: border-color .25s var(--bde-ease), box-shadow .25s var(--bde-ease);
}
.form-bde .form-control:focus, .form-bde .form-select:focus {
  border-color: var(--bde-teal); box-shadow: 0 0 0 4px rgba(54, 157, 162, .16); outline: none;
}
.form-bde .form-control::placeholder { color: #98a6b5; }
.form-bde .form-text { font-size: .84rem; color: var(--bde-muted); }
.form-note { font-size: .86rem; color: var(--bde-muted); }

.newsletter {
  padding: clamp(1.6rem, 1rem + 2vw, 2.5rem); border-radius: 24px;
  background: var(--bde-grad-brand); color: #fff; position: relative; overflow: hidden; isolation: isolate;
}
.newsletter::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(60% 120% at 90% 5%, rgba(143, 215, 247, .32) 0%, transparent 62%);
}
.newsletter h2 { color: #fff; font-size: 1.35rem; margin: 0 0 .5rem; }
.newsletter p { color: rgba(255, 255, 255, .85); margin: 0 0 1.3rem; }
.newsletter .form-control { border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); color: #fff; border-radius: 999px; padding: .8rem 1.25rem; }
.newsletter .form-control::placeholder { color: rgba(255, 255, 255, .7); }
.newsletter .form-control:focus { background: rgba(255, 255, 255, .2); border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); color: #fff; }

.map-link {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .8rem;
  font-size: .88rem; font-weight: 800; color: var(--bde-navy);
}
.map-link:hover { color: var(--bde-teal-700); }
.map-link svg { transition: transform .25s var(--bde-ease); }
.map-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Single festival page
   ========================================================================== */

/* ---------- Hero with the ACF cover photo ---------- */
.page-hero--photo { padding-bottom: clamp(2.25rem, 1.75rem + 1.5vw, 3rem); }
.page-hero--photo .page-hero__media { position: absolute; inset: 0; z-index: -3; }
.page-hero--photo .page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.page-hero--photo::before {
  z-index: -2;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1.4px),
    linear-gradient(105deg, rgba(6, 32, 58, .95) 0%, rgba(6, 32, 58, .82) 45%, rgba(6, 32, 58, .45) 100%);
  background-size: 22px 22px, 100% 100%;
  -webkit-mask-image: none; mask-image: none;
}
.page-hero--photo::after { opacity: .5; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

.status-pill--full { background: rgba(216, 56, 43, .22) !important; border-color: rgba(255, 160, 150, .5) !important; }
.status-pill--open i { width: 8px; height: 8px; border-radius: 50%; background: #4ada86; box-shadow: 0 0 0 4px rgba(74, 218, 134, .22); }
.status-pill--full i { width: 8px; height: 8px; border-radius: 50%; background: #ff7a6c; box-shadow: 0 0 0 4px rgba(255, 122, 108, .22); }

/* ---------- .content : the raw output of the_content() ----------
   WordPress emits its own markup here — <p style="text-align:center">, <h2> wrapping a
   coloured <span>, aligncenter images, JULY 1<sup>st</sup><br> paragraphs, a bare
   <iframe>. None of that may be rewritten, so everything below styles it as-is and
   overrides only the inline colours that clash or fail contrast. */
.content { font-size: 1.05rem; }
.content > * + * { margin-top: 1.15rem; }
.content p { color: var(--bde-muted); }
.content strong { color: var(--bde-navy-900); font-weight: 800; }
.content em { color: var(--bde-ink); font-style: italic; }
.content sup { font-size: .62em; font-weight: 700; }

.content a { color: var(--bde-navy); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; font-weight: 600; }
.content a:hover { color: var(--bde-teal-700); text-decoration-thickness: 2px; }
/* The editor hard-codes #0000ff on some links */
.content a[style] { color: var(--bde-navy) !important; }
.content a[style]:hover { color: var(--bde-teal-700) !important; }

.content h2 {
  position: relative; margin-top: 3rem; padding-bottom: .7rem;
  font-size: clamp(1.35rem, 1.15rem + .9vw, 1.8rem);
  border-bottom: 1px solid var(--bde-line);
  text-align: left !important;          /* editor centres them; left reads better in a column */
  text-transform: none;
}
/* Headings wrap a <span style="color:#333333"> or #808080 — take the design colour instead */
.content h2 span[style] { color: var(--bde-navy-900) !important; }
.content h2::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px;
  border-radius: 3px; background: var(--bde-grad-brand);
}
.content h2 + p { margin-top: 1.4rem; }

/* Images: WP wraps them in <p> and adds align* / size-* classes */
.content img { display: block; max-width: 100%; height: auto; border-radius: var(--bde-radius); box-shadow: var(--bde-shadow-sm); }
.content p > img:only-child { margin-inline: auto; }
.content .aligncenter { margin-inline: auto; }
.content .alignleft { float: left; margin: .4rem 1.4rem 1rem 0; max-width: 50%; }
.content .alignright { float: right; margin: .4rem 0 1rem 1.4rem; max-width: 50%; }
.content .wp-caption-text { margin-top: .7rem; font-size: .88rem; color: var(--bde-muted); text-align: center; }

/* Centred italic intro lines the editor puts above the first heading */
.content p[style*="center"] { text-align: center; }
.content > p[style*="center"]:first-of-type,
.content > p:nth-of-type(2)[style*="center"] { font-size: 1.1rem; line-height: 1.6; color: var(--bde-navy-900); }

/* The participation cost is authored as a centred orange span. #ff6600 is only 3.1:1 on
   white, so it is darkened and enlarged instead of being left as a contrast failure. */
.content p[style*="center"] span[style*="ff6600"] {
  display: inline-block; color: #9a5200 !important;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); font-weight: 800; line-height: 1.2;
}
.content p[style*="center"] span[style*="333333"],
.content p[style*="center"] span[style*="808080"] { color: var(--bde-muted) !important; }

.content ul { list-style: none; padding: 0; margin-top: 1.3rem; display: grid; gap: .7rem; }
.content ul li { position: relative; padding-left: 1.85rem; color: var(--bde-muted); }
.content ul li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bde-teal); box-shadow: 0 0 0 4px rgba(54, 157, 162, .14);
}
.content ol { padding-left: 1.3rem; margin-top: 1.3rem; }
.content ol li { color: var(--bde-muted); padding-left: .4rem; }

/* Programme paragraphs are "JULY 1<sup>st</sup><br>text" — the date line gets its own
   emphasis via the enhancement JS adds (.is-day), with a plain-paragraph fallback. */
.content p.is-day { padding: 1.05rem 0 0; border-top: 1px solid var(--bde-line); }
.content p.is-day .day-label {
  display: block; margin-bottom: .3rem;
  font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bde-teal-700);
}
.content p.is-day + p.is-day { margin-top: 0; }

/* The bare WP iframe, kept responsive; JS swaps it for a click-to-load facade */
.content iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--bde-radius); }
.content p[style*="center"] > iframe { margin-inline: auto; }

/* ---------- Click-to-load YouTube facade (keeps the page third-party-free) ---------- */
/* Without a poster (an article can hold several embeds and the post has one featured image)
   the facade is only this background, so it gets the brand gradient rather than a flat black
   rectangle that reads as a failed image. */
.video-embed {
  position: relative; margin-top: 2rem; border-radius: var(--bde-radius); overflow: hidden;
  aspect-ratio: 16 / 9;
  background: radial-gradient(120% 120% at 20% 0%, #14456f 0%, var(--bde-navy-900) 55%, #041221 100%);
}
.video-embed img, .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-embed button {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(6, 32, 58, .15) 0%, rgba(6, 32, 58, .6) 100%);
  display: grid; place-items: center;
}
.video-embed button:hover .play-btn { transform: scale(1.1); background: #fff; }
.video-embed .play-btn { position: static; transform: none; width: 68px; height: 68px; }
.video-embed__note {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 2.75rem 1rem .85rem; line-height: 1.35;
  color: #fff; font-size: .82rem; text-align: center; pointer-events: none;
  /* The note sits on the poster, so it carries its own scrim rather than trusting the photo.
     The tall top padding is what gives the gradient room — on a phone the sentence wraps to
     two lines, and a scrim only 40px high would leave the first one over bare picture. */
  background: linear-gradient(180deg, rgba(4, 18, 33, 0) 0%, rgba(4, 18, 33, .55) 45%, rgba(4, 18, 33, .82) 100%);
}

/* ---------- PDF download ---------- */
.pdf-download {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.35rem 1.6rem; margin-top: 2.5rem;
  border-radius: var(--bde-radius); background: #fff;
  border: 1.5px dashed #c9d8e6;
  transition: border-color .3s var(--bde-ease), transform .3s var(--bde-ease), box-shadow .3s var(--bde-ease);
}
.pdf-download:hover { border-color: var(--bde-teal); border-style: solid; transform: translateY(-3px); box-shadow: var(--bde-shadow); }
.pdf-download__icon { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #d93325 0%, #a81c12 100%); }
.pdf-download__text { min-width: 0; }
.pdf-download__text strong { display: block; color: var(--bde-navy-900); font-size: 1.05rem; }
.pdf-download__text span { display: block; font-size: .88rem; color: var(--bde-muted); }
.pdf-download__go { margin-left: auto; flex: 0 0 auto; color: var(--bde-navy); }
.pdf-download:hover .pdf-download__go { color: var(--bde-teal-700); }

/* ---------- Apply form ---------- */
.apply-card {
  margin-top: 2.5rem; padding: clamp(1.6rem, 1rem + 2.4vw, 2.75rem);
  border-radius: 26px; position: relative; overflow: hidden; isolation: isolate;
  background: var(--bde-grad-deep); color: #fff;
}
.apply-card::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1.4px),
    radial-gradient(65% 100% at 88% 0%, rgba(143, 215, 247, .26) 0%, transparent 60%);
  background-size: 22px 22px, 100% 100%;
}
.apply-card h2 { color: #fff; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem); margin: .5rem 0 0; text-wrap: balance; }
.apply-card > p { color: rgba(255, 255, 255, .82); margin: .7rem 0 0; max-width: 56ch; }
.apply-card form { margin-top: 1.75rem; }
.apply-card .form-label { color: rgba(255, 255, 255, .9); font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .4rem; }
.apply-card .form-control {
  border-radius: 12px; padding: .85rem 1.05rem; font-size: 1rem;
  background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .28); color: #fff;
}
.apply-card .form-control::placeholder { color: rgba(255, 255, 255, .55); }
.apply-card .form-control:focus {
  background: rgba(255, 255, 255, .18); border-color: #fff; color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); outline: none;
}
.apply-card .form-text { color: rgba(255, 255, 255, .68); }

.captcha-slot {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 1.1rem; border-radius: 12px;
  border: 1.5px dashed rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .72); font-size: .85rem;
}

/* ---------- Sticky facts sidebar ---------- */
.facts-card {
  padding: 1.6rem 1.7rem; border-radius: 24px; background: #fff;
  border: 1px solid var(--bde-line); box-shadow: var(--bde-shadow);
}
.facts-card h2 { font-size: 1.1rem; margin: 0 0 1.2rem; }
.facts-row { display: flex; gap: .85rem; padding: .85rem 0; border-top: 1px solid var(--bde-line); }
.facts-row:first-of-type { border-top: 0; padding-top: 0; }
.facts-row__icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--bde-navy); background: var(--bde-ice); }
.facts-row__label { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bde-teal-700); }
.facts-row__value { display: block; color: var(--bde-navy-900); font-weight: 700; font-size: .98rem; line-height: 1.45; }
.facts-row__value small { display: block; font-weight: 600; font-size: .84rem; color: var(--bde-muted); }
/* Phone/e-mail in the sidebar are real tap targets — WCAG asks for 24px minimum */
.facts-row__value a { display: inline-block; min-height: 24px; padding: .2rem 0; }
.facts-row__value small a { padding: .25rem 0; }
@media (min-width: 992px) { .festival-aside { position: sticky; top: 6.5rem; } }

/* ---------- Other festivals (small cards) ---------- */
.mini-card {
  display: flex; gap: 1rem; align-items: center; height: 100%;
  padding: .85rem; border-radius: 16px; background: #fff;
  border: 1px solid var(--bde-line); box-shadow: var(--bde-shadow-sm);
  transition: transform .3s var(--bde-ease), box-shadow .3s var(--bde-ease), border-color .3s var(--bde-ease);
}
.mini-card:hover { transform: translateY(-4px); box-shadow: var(--bde-shadow); border-color: transparent; }
.mini-card__media { flex: 0 0 auto; width: 92px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bde-surface-2); }
.mini-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mini-card__body { min-width: 0; }
.mini-card__date { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bde-teal-700); }
.mini-card__title { font-size: .97rem; line-height: 1.35; margin: .25rem 0 0; color: var(--bde-navy-900); }
.mini-card:hover .mini-card__title { color: var(--bde-navy); }

/* ---------- Sold-out festival state ---------- */
.soldout-notice {
  display: flex; gap: 1.15rem; align-items: flex-start;
  padding: 1.4rem 1.6rem; border-radius: var(--bde-radius);
  background: #fff5f4; border: 1px solid #f6cfca;
  border-left: 4px solid #d8382b;
}
.soldout-notice__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #d93325 0%, #a81c12 100%); }
.soldout-notice strong { display: block; color: #8f1d13; font-size: 1.05rem; }
.soldout-notice p { margin: .35rem 0 0; color: #7c4b45; font-size: .97rem; }
.soldout-notice a { color: #8f1d13; text-decoration: underline; text-underline-offset: .18em; font-weight: 700; }
.soldout-notice a:hover { color: #62140d; }
/* Bootstrap's default code colour (#d63384) only reaches 4.2:1 on these tinted panels */
.content code, .soldout-notice code, .facts-card code {
  padding: .08rem .35rem; border-radius: 5px; font-size: .92em;
  background: rgba(6, 32, 58, .07); color: var(--bde-navy);
}

/* Hero of a full festival: the cover desaturates so the status reads first */
.page-hero--soldout .page-hero__media img { filter: saturate(.45) brightness(.9); }

/* Waiting-list variant of the application card */
.apply-card--waitlist { background: linear-gradient(150deg, #2b1512 0%, #6d211a 55%, #a3382c 100%); }
.apply-card--waitlist::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1.4px),
    radial-gradient(65% 100% at 88% 0%, rgba(255, 190, 180, .22) 0%, transparent 60%);
  background-size: 22px 22px, 100% 100%;
}
.apply-card--waitlist .eyebrow--light { color: #ffc9c1; }
.apply-card--waitlist .eyebrow--light::before { background: #ffc9c1; }

/* Status row in the facts sidebar */
.facts-row--status .facts-row__icon { color: #bf2a1f; background: #fff1ef; }
.facts-row--status .facts-row__value { display: inline-flex; align-items: center; gap: .5rem; color: #bf2a1f; }
.facts-row--status .facts-row__value i { width: 9px; height: 9px; border-radius: 50%; background: #d8382b; box-shadow: 0 0 0 4px rgba(216, 56, 43, .16); flex: 0 0 auto; }
.facts-row--status.is-open .facts-row__icon { color: var(--bde-navy); background: var(--bde-ice); }
.facts-row--status.is-open .facts-row__value { color: #1c7a4a; }
.facts-row--status.is-open .facts-row__value i { background: #2fbf71; box-shadow: 0 0 0 4px rgba(47, 191, 113, .18); }

/* ==========================================================================
   Video / gallery / article single pages — all inside .content, styled only
   ========================================================================== */

/* The theme prints the post title as the first heading inside .content */
.content > h2.text-center.mt-0 {
  margin-top: 0; text-align: left !important; border-bottom: 0; padding-bottom: 0;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
}
.content > h2.text-center.mt-0::after { display: none; }
/* Empty headings the editor leaves behind */
.content h2:empty { display: none; }

/* ---------- .galerija : the album grid ---------- */
/* Two up on phones, three on tablets, four on desktop — the same rhythm as the album
   cards on the gallery archive, so an album opens into a grid of the size it came from. */
.galerija {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 576px) { .galerija { gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .galerija { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galerija::after { content: ""; display: none; }   /* clearfix no longer needed */
.galerija a {
  position: relative; display: block; overflow: hidden;
  border-radius: 14px; aspect-ratio: 261 / 155; background: var(--bde-surface-2);
  text-decoration: none;
  transition: transform .3s var(--bde-ease), box-shadow .3s var(--bde-ease);
}
.galerija a:hover { transform: translateY(-4px); box-shadow: var(--bde-shadow); z-index: 1; }
.galerija img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; transition: transform .6s var(--bde-ease); }
.galerija a:hover img { transform: scale(1.08); }
.galerija a::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: rgba(6, 32, 58, .38) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='M16.5 16.5 21 21M11 8v6M8 11h6'/%3e%3c/svg%3e") center / 30px no-repeat;
  transition: opacity .3s var(--bde-ease);
}
.galerija a:hover::after, .galerija a:focus-visible::after { opacity: 1; }

/* ---------- Lightbox (built by JS, no markup in the page) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  /* Definite track, not the default auto: against an auto row, the photo's max-height: 100%
     has nothing to resolve against and is dropped, so a tall photo ran off the bottom edge.
     Top padding clears the counter and close button, which are positioned over this area. */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  padding: 4.75rem clamp(1rem, 3vw, 3rem) clamp(1rem, 3vw, 3rem);
  background: rgba(4, 18, 33, .93); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s var(--bde-ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  border-radius: 12px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
  cursor: pointer;   /* clicking the photo pages forward */
}
.lightbox__bar {
  position: absolute; top: 0; left: 0; right: 0; display: flex;
  align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2rem); color: rgba(255, 255, 255, .85); font-size: .9rem;
}
.lightbox__btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center;
  cursor: pointer; transition: background .2s var(--bde-ease), transform .2s var(--bde-ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .24); transform: scale(1.06); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; gap: .5rem; }
.lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }
@media (max-width: 575.98px) {
  /* the arrows move under the photo on a phone, so the photo has to give them the room */
  .lightbox { padding-bottom: 5.25rem; }
  .lightbox__nav { top: auto; bottom: 1rem; transform: none; }
  .lightbox__nav--prev { left: 1rem; }
  .lightbox__nav--next { right: 1rem; }
}

/* ---------- Article body (Good to know) ---------- */
.content--article { max-width: 72ch; }
.content--article h2 { text-transform: none; }
/* the editor uses &nbsp;-only paragraphs as spacers */
.content p:has(> br:only-child), .content p.is-spacer { display: none; }


/* ============================================================================
   Dopune za WordPress temu — nije bilo u statičkom buildu
   ========================================================================= */

/* Social dugmad na kontakt kartici.
   Ne koriste `.social-links` (to je za tamnu pozadinu) ni golu `btn-outline-bde`
   pilulu — nego isti jezik kao `.info-row__icon` odmah iznad njih: zaobljeni
   kvadrat, ledena pozadina, navy ikonica. Tako kartica djeluje kao cjelina.
   `.btn-outline-bde:hover svg` pomjera ikonicu 4px udesno (namijenjeno strelici
   u tekstualnom dugmetu) — kod ikonice bez teksta se gasi. */
/* Selektor mora biti `.info-row .social-btn` (0,2,0): kartica ima
   `.info-row a { display: block }` (0,1,1), što je specifičnije od gole
   `.social-btn` (0,1,0) — pa je `display: grid` bio ignorisan i ikonica je
   sjedala na tekstualnu osnovnu liniju umjesto u centar. */
.info-row .social-btn {
  padding: 0; width: 44px; height: 44px; border-radius: 14px;
  display: inline-grid; place-items: center; line-height: 1;
  color: var(--bde-navy); background: var(--bde-ice);
  border: 1px solid transparent;
}
.info-row .social-btn:hover,
.info-row .social-btn:focus-visible {
  color: #fff; background: var(--bde-teal); border-color: var(--bde-teal);
}
.info-row .social-btn svg,
.info-row .social-btn:hover svg,
.info-row .social-btn:focus-visible svg { transform: none; display: block; }

/* Contact Form 7 unutar newslettera.
   CF7 sva polja stavlja u jedan <p>; dizajn traži input i dugme u redu. */
.newsletter .wpcf7 { margin-top: .25rem; }
.newsletter .wpcf7-form p { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; margin: 0; }
.newsletter .wpcf7-form .wpcf7-form-control-wrap { flex: 1 1 12rem; display: block; }
.newsletter .wpcf7-form .form-control { width: 100%; }
.newsletter .wpcf7-form .wpcf7-submit { flex: 0 0 auto; }
.newsletter .wpcf7-form br { display: none; }
.newsletter .wpcf7-not-valid-tip { color: #ffd9d4; font-size: .85rem; flex: 1 0 100%; }
.newsletter .wpcf7-response-output { color: #fff; border-color: rgba(255,255,255,.4); margin: 1rem 0 0; font-size: .9rem; }

/* Prijavna forma na festivalu: CF7 ne zna za grid iz dizajna, ali polja
   ne smiju biti šira od kartice ni zalijepljena jedno uz drugo. */
.apply-card .wpcf7-form .form-group { margin-bottom: 1rem; }
.apply-card .wpcf7-form label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .35rem; color: rgba(255,255,255,.9); }
.apply-card .wpcf7-form .wpcf7-form-control-wrap { display: block; }
.apply-card .wpcf7-form .form-control { width: 100%; }
.apply-card .wpcf7-response-output { color: #fff; border-color: rgba(255,255,255,.4); margin: 1rem 0 0; font-size: .9rem; }
.apply-card .wpcf7-not-valid-tip { color: #ffd9d4; font-size: .85rem; margin-top: .3rem; }
/* Razmak labela → polje.
   CF7 izbacuje `<div class="form-group"><p><label>…</label><br><span><input>…`,
   pa se razmak sabirao iz tri izvora: `<br>` (pun red), donja margina `<p>`
   (1rem) i margina `.form-group` (1rem). Labela je već `display:block`, tako da
   `<br>` ne treba, a razmak drži samo `.form-group`. */
.apply-card .wpcf7-form br { display: none; }
.apply-card .wpcf7-form .form-group > p { margin: 0; }
/* Prva `.form-group` nosi samo skrivena UTM polja — nema šta da se vidi, pa ne
   smije ni da zauzima red. */
.apply-card .wpcf7-form .form-group:not(:has(label)) { margin: 0; }

/* Grčki u glavnoj navigaciji.
   Grčke verzalne riječi su znatno duže od engleskih — „ΦΕΣΤΙΒΑΛ ΠΑΡΑΔΟΣΙΑΚΩΝ
   ΧΟΡΩΝ" i „ΧΡΗΣΙΜΕΣ ΣΥΜΒΟΥΛΕΣ" lome se u dva reda i razvlače header na 64px.
   Izmjereno: pri 1463px nav traži 931px, a raspoloživo je ~890.
   Manji font i uže prored/padding vraćaju sve u jedan red, s ~120px rezerve
   i na 1200px. `nowrap` sprječava lom usred fraze ako prevod ipak naraste. */
html[lang^="el"] .main-nav a {
  font-size: .78rem; letter-spacing: .04em; padding: .55rem .6rem; white-space: nowrap;
}
html[lang^="el"] .main-nav a::after { left: .6rem; right: .6rem; }
html[lang^="el"] .btn-bde--compact { font-size: .82rem; padding: .68rem 1.1rem; white-space: nowrap; }

@media (min-width: 1200px) and (max-width: 1399.98px) {
  html[lang^="el"] .main-nav a { font-size: .72rem; letter-spacing: .02em; padding: .55rem .42rem; }
  html[lang^="el"] .main-nav a::after { left: .42rem; right: .42rem; }
  html[lang^="el"] .btn-bde--compact { font-size: .76rem; padding: .6rem .9rem; }
}