/* logo.css — Festival-Logo Lockup
   Pflicht: festival.css (für --deep, --sand etc.)
   Bilder unter /assets/logo-*.png

   Verwendung (Hero):
     <div class="festival-logo on-sand size-hero">
       <img src="/assets/logo-navy-on-transparent.png" alt="Schröder Mini Festival 2026">
       <span class="year-mask"></span>
       <span class="year-label">2026</span>
     </div>

   Verwendung (Inline, neben Headline):
     <div class="festival-logo on-sand size-inline">…</div>
*/

.festival-logo {
  position: relative;
  display: inline-block;
  line-height: 0;
  flex: 0 0 auto;
}
.festival-logo > img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mask matches bitmap bg color so the original "2025" disappears */
.festival-logo .year-mask {
  position: absolute;
  left: 38%;
  top: 79.5%;
  width: 24%;
  height: 8.5%;
  background: var(--logo-bg, var(--deep));
}

/* The new year sits centered on top */
.festival-logo .year-label {
  position: absolute;
  left: 50%;
  top: 84%;
  transform: translate(-50%, -50%);
  color: var(--logo-fg, var(--sand));
  font-family: var(--font-stack);
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Set container-type when supported */
@supports (container-type: inline-size) {
  .festival-logo { container-type: inline-size; }
}
/* Fallback sizes (no container-query support) */
.festival-logo.size-favicon .year-label { font-size: 12px; letter-spacing: 0.05em; }
.festival-logo.size-inline  .year-label { font-size: 7px; }
.festival-logo.size-medium  .year-label { font-size: 17px; }
.festival-logo.size-hero    .year-label { font-size: 32px; }
.festival-logo.size-tv      .year-label { font-size: 21px; }
.festival-logo.size-tv-hero .year-label { font-size: 55px; }
/* Container-query override — same specificity as fallbacks, comes last → wins */
@supports (container-type: inline-size) {
  .festival-logo.size-favicon .year-label,
  .festival-logo.size-inline  .year-label,
  .festival-logo.size-medium  .year-label,
  .festival-logo.size-hero    .year-label,
  .festival-logo.size-tv      .year-label,
  .festival-logo.size-tv-hero .year-label { font-size: 10.5cqi; }
}

/* Size presets (width). Logo is square so width = height. */
.festival-logo.size-favicon { width: 44px; }
.festival-logo.size-inline  { width: 64px; }
.festival-logo.size-medium  { width: 160px; }
.festival-logo.size-hero    { width: min(320px, 80vw); }
.festival-logo.size-tv      { width: 200px; }
.festival-logo.size-tv-hero { width: min(520px, 40vw); }

/* === Background variants: control bg+fg via CSS vars on the wrapper === */
.festival-logo.on-deep  { --logo-bg: var(--deep);  --logo-fg: var(--sand); }
.festival-logo.on-sand  { --logo-bg: var(--sand);  --logo-fg: var(--deep); }
.festival-logo.on-sun   { --logo-bg: var(--sun);   --logo-fg: var(--deep); }
.festival-logo.on-coral { --logo-bg: var(--coral); --logo-fg: white; }
.festival-logo.on-white { --logo-bg: white;        --logo-fg: var(--deep); }

/* === Hero layout used on index + tv-index ============================ */
.logo-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--space-4)); /* cancel container's top padding — PNG has its own transparent breathing room */
}
.logo-hero .subline {
  margin-top: 14px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.7;
}

/* === Inline header used on inner pages ============================== */
.logo-inline-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--space-3);
}
.logo-inline-header .logo-inline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.logo-inline-header .logo-inline-text .brand {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--coral);
}
.logo-inline-header .logo-inline-text .crumb {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0.6;
}
.logo-inline-header .logo-inline-text .crumb a {
  color: var(--deep);
  font-weight: 800;
}

/* === TV variants — bigger numbers, brighter year ====================== */
body.tv-mode .festival-logo .year-label { letter-spacing: 0.22em; }
.tv-hero-with-logo {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 48px;
  position: relative;
  z-index: 2;
}
.tv-hero-with-logo .tv-hero-text { flex: 1; }

/* TV bracket header — small logo on the left */
.tv-page-header .logo-tv-corner {
  margin-right: 20px;
  align-self: center;
}