/* ============================================================
   Phoenix Awards 2026 — phoenix-msn.css
   REDESIGN to the MSN main-page design system (Alex 2026-06-19).
   Loaded AFTER phoenix.css + v2-cinematic.css.
   Adds: MSN background rhythm — Seashell light sections (Manifest,
   Zgłoszenie, Regulamin) + 5 full-bleed parallax IMAGE bands
   (Hero, Statement, Kapituła, Inspiracje, Gala). Coherent MSN type.
   3-footer stack. Shared msn-nav kept untouched (other session).
   ============================================================ */

:root { --phx-seashell: #fff5ee; --phx-seashell-card: #fffaf6; --phx-seashell-line: #e7ddd0;
  --phx-ink-dark: #1a1612; --phx-ink-dark-2: #4a443c; --phx-gold-onlight: #9a6a12; }

/* ------------------------------------------------------------
   0. Shared msn-nav coherence — the nav is the other session's
   canonical block (class="nav"). phoenix.css only styles .phx-nav,
   so MSN style.css .nav rules govern. Nothing to override here.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   0b. FULL-BLEED SECTIONS — defeat MSN base `style.css`:
       `section { max-width:1100px; margin:0 auto; padding:7rem 3rem }`.
   Without this, EVERY phx section/hero/band inherits the 1100px cap and
   renders as a centred column with the #060606 body bg bleeding on both
   sides. Phoenix sections must span the FULL viewport width (background
   image/colour edge-to-edge); the inner .phx-shell keeps text centred.
   (Origin: 2026-06-19 — explicit "full-screen background" ask, twice.)
   ------------------------------------------------------------ */
.phx-hero, .phx-section, .evf {
  max-width: none; width: 100%; margin-left: 0; margin-right: 0;
}

/* ============================================================
   1. SEASHELL LIGHT SECTIONS — Manifest · Zgłoszenie · Regulamin
   ============================================================ */
.phx-section.phx-on-light { background: var(--phx-seashell) !important; border-top: 1px solid var(--phx-seashell-line); }
.phx-on-light .phx-title { color: var(--phx-ink-dark); }
.phx-on-light .phx-subtitle { color: var(--phx-ink-dark-2); }
.phx-on-light .phx-pretitle { color: var(--phx-gold-onlight); }
.phx-on-light .phx-pretitle::before { background: var(--phx-red); }
.phx-on-light .phx-lead { color: #2a251f; }
.phx-on-light .phx-body { color: #3a342c; }
.phx-on-light .phx-note { color: #6a635a; }
.phx-on-light .phx-minihead { color: var(--phx-gold-onlight); }
.phx-on-light .phx-dropcap::first-letter { color: var(--phx-gold-onlight); }

/* light cards (pillars + steps) — override v2-cinematic #0c0c0c */
.phx-on-light .phx-pillar { background: var(--phx-seashell-card); border: 1px solid var(--phx-seashell-line);
  border-top: 2px solid var(--phx-gold-deep); box-shadow: 0 16px 40px -34px rgba(60,40,10,.4); }
.phx-on-light .phx-pillar h3 { color: var(--phx-ink-dark); }
.phx-on-light .phx-pillar p { color: var(--phx-ink-dark-2); }
.phx-on-light .phx-pillar-num { color: var(--phx-gold-onlight); }

.phx-on-light .phx-step { background: transparent; border-left: 2px solid var(--phx-gold-deep); }
.phx-on-light .phx-step h3 { color: var(--phx-ink-dark); }
.phx-on-light .phx-step p { color: var(--phx-ink-dark-2); }
.phx-on-light .phx-step-num { color: var(--phx-gold-deep); -webkit-text-stroke: 1px var(--phx-gold); }

/* ghost buttons on light → dark outline */
.phx-on-light .phx-btn-ghost { color: var(--phx-ink-dark); border-color: rgba(26,22,18,.32); }
.phx-on-light .phx-btn-ghost:hover { border-color: var(--phx-gold-onlight); color: var(--phx-gold-onlight); }

/* docs section contact CTAs on light */
.phx-on-light .phx-contact-ctas .phx-btn-ghost { background: #fff; }

/* ============================================================
   2. FULL-BLEED PARALLAX IMAGE BANDS
   Hero (existing) + Statement + Kapituła + Inspiracje + Gala.
   Robust CSS parallax (background-attachment: fixed; scroll <720).
   White text on dark overlay.
   ============================================================ */
/* !important defeats phoenix.css `.phx-section:nth-of-type(even){background:…}`
   shorthand (specificity 0,2,0) which would otherwise reset image/attachment. */
.phx-band { position: relative; min-height: 100vh; display: flex; align-items: center;
  background-size: cover !important; background-position: center !important;
  background-attachment: fixed !important; background-repeat: no-repeat !important;
  border-top: 1px solid rgba(221,192,116,.18); }
/* Bands reuse the SAME centred, padded shell as every other section (base .phx-shell:
   width:min(1160px,calc(100vw - 2.5rem)); margin:0 auto). The old `width:100%` here removed
   the side padding, so once sections went full-bleed the band text touched the viewport edge
   (VA BPS horizontal-padding breach, Alex 2026-06-19). Keep only position/z-index for layering
   over the background image. */
.phx-band .phx-shell { position: relative; z-index: 1; }
.phx-band .phx-title { color: #fff; }
.phx-band .phx-subtitle { color: #e8e6e3; }
.phx-band .phx-pretitle { color: var(--phx-gold); }
.phx-band .phx-body { color: #ece9e4; }
.phx-band .phx-rules li { color: #f1efeb; }
.phx-band .phx-tba { color: var(--phx-gold); }

/* per-band imagery + overlay (overlay first so text reads) */
/* Statement band = LIGHT wash, not a dark overlay. Alex 2026-06-19: "delete the
   dark overlay… this is too dark. We are now gradually moving into the lighter
   versions of our website." The heritage image stays visible but washed to seashell;
   the statement text flips to dark ink (see §3). Reuses --phx-seashell so this band
   matches the seashell sections instead of a bespoke dark scrim. */
.phx-statement {
  background-image: linear-gradient(100deg, rgba(255,245,238,.94) 0%, rgba(255,245,238,.86) 52%, rgba(255,245,238,.66) 100%),
    url('../assets/band-heritage-statement.webp') !important; }
.phx-jury.phx-band {
  background-image: linear-gradient(rgba(6,6,6,.8), rgba(6,6,6,.88)),
    url('../assets/band-kapitula.webp') !important; }
/* Inspiracje — SEASHELL light section, not a dark image band (Alex 2026-06-19:
   "this section must be with seashell background… you have two dark overlays,
   decrease it and use proper fonts so it's visible"). Drop the parallax image + dark
   scrim (the two dark layers were the band gradient AND the dark tile glass below);
   reuse the seashell tokens; flip header + tiles to ink-on-light. */
.phx-inspo.phx-band {
  background: var(--phx-seashell) !important; background-image: none !important;
  background-attachment: initial !important; min-height: auto; display: block;
  border-top: 1px solid var(--phx-seashell-line); }
.phx-inspo .phx-pretitle { color: var(--phx-gold-onlight); }
.phx-inspo .phx-pretitle::before { background: var(--phx-red); }
.phx-inspo .phx-title { color: var(--phx-ink-dark); }
.phx-inspo .phx-subtitle, .phx-inspo .phx-inspo-lead { color: var(--phx-ink-dark-2); }
.phx-inspo .phx-body { color: #3a342c; }
/* Gala band — NO overlay at all (Alex 2026-06-19: "use no overlay at all, use the
   relevant font so it's visible on this background"). The B'Fort watercolor shows in
   full; .phx-band already gives white title/subtitle + gold pretitle. A soft shadow
   keeps the serif legible over the painterly image without a flat dark scrim. */
.phx-gala.phx-band {
  background-image: url('../../images/bg/bfort-akwarela-entrance-night.webp') !important; }
.phx-gala .phx-title, .phx-gala .phx-subtitle, .phx-gala .phx-body {
  text-shadow: 0 2px 16px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.92); }

/* Inspiracje project tiles on the seashell section — light cards, ink text */
.phx-inspo.phx-band .phx-project { background: var(--phx-seashell-card); border-color: var(--phx-seashell-line); color: var(--phx-ink-dark); }
.phx-inspo.phx-band .phx-project:hover { border-color: var(--phx-gold-deep); color: var(--phx-ink-dark); }

/* ============================================================
   3. STATEMENT BAND — single full-white statement line
   ============================================================ */
.phx-statement { padding: var(--phx-pad) 0; }
/* No width strangle on the line — the syntagm breaks are EXPLICIT <br class="phx-br-desk">
   (Alex's exact 3-line break), so we don't rely on a `ch` max-width that mis-measured
   against the 54px Playfair and collapsed the line to one word per row. Desktop font is
   sized so the longest syntagm ("Nagradzamy te, które tę pamięć zachowują i") fits on one
   line inside the shell; mobile hides the desktop breaks and shrinks the font so each
   wrapped line carries ≥3 words (Alex 2026-06-19). */
.phx-statement-inner { max-width: none; }
.phx-statement-kicker { font-family: 'Geist Mono',monospace; text-transform: uppercase; letter-spacing: .24em;
  font-size: .76rem; color: var(--phx-gold-onlight); margin: 0 0 1.4rem; }
/* Dark ink on the light wash (was #fff on a dark scrim). Subtle light halo keeps the
   serif crisp where the heritage image shows through, without re-darkening the band. */
.phx-statement-line { font-family: 'Playfair Display',serif; font-weight: 700; color: var(--phx-ink-dark);
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.28; letter-spacing: -.01em; margin: 0;
  max-width: none; text-wrap: balance;
  text-shadow: 0 1px 2px rgba(255,245,238,.85); }

/* Inline mailto link (e.g. Dominika contact line) — gold-on-dark, clearly clickable. */
.phx-inline-link { color: var(--phx-gold); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; transition: color .18s ease; }
.phx-inline-link:hover, .phx-inline-link:focus-visible { color: #fff; }
.phx-on-light .phx-inline-link { color: var(--phx-gold-onlight); }

/* ============================================================
   4. SHOWCASE — back to flat dark (NOT an image band per map)
   (override v2-cinematic which grouped .phx-showcase with .phx-gala)
   ============================================================ */
.phx-showcase { background: var(--phx-bg-3) !important; background-image: none !important;
  background-attachment: initial !important; min-height: auto; }

/* ============================================================
   5. 3-FOOTER STACK — Phoenix (.phx-evf) → MSN Event (.evf-msn) → RT canonical
   ============================================================ */
.evf.phx-evf { border-top: 1px solid rgba(221,192,116,.28); }
.evf.evf-msn { border-top: 1px solid rgba(255,255,255,.08); }

/* ============================================================
   6. MOBILE — disable fixed-attachment parallax (<720), shorten bands
   ============================================================ */
@media (max-width: 720px) {
  .phx-band { background-attachment: scroll !important; min-height: auto; padding: var(--phx-pad) 0; }
  /* Comfortable side gutter on EVERY section/band on mobile via the standard shell (was a
     ~12px hairline → content sat against the viewport edge; VA BPS horizontal-padding breach,
     Alex 2026-06-19). 1.25rem each side. */
  .phx-shell { width: calc(100vw - 2.5rem); }
  .phx-statement-inner { max-width: 100%; }
  /* Keep the explicit syntagm <br> on mobile too; shrink the font so each of the 3 syntagms
     fits one line (≥3 words/line, no orphan word) — Alex 2026-06-19. */
  .phx-statement-line { max-width: none; font-size: clamp(0.95rem, 4.4vw, 1.6rem); line-height: 1.34; }
}

/* ============================================================
   7. MOBILE HERO — the v2-cinematic title min is 3.4rem (~54px), too big for a
   phone: it filled the column edge-to-edge and the meta line crowded the gutter
   ("Warszawa" looked clipped). Dial the type down so the hero breathes inside the
   1.25rem gutter; lighten the heavy desktop text-stroke; let the meta sit/wrap clean.
   (Origin: 2026-06-19 mobile hero "very bad".)
   ============================================================ */
@media (max-width: 640px) {
  .phx-hero-title { font-size: clamp(2.3rem, 11vw, 3.3rem); line-height: 1.05;
    -webkit-text-stroke-width: 1.4px; }
  .phx-hero-tagline { font-size: clamp(1.2rem, 5vw, 1.55rem); max-width: 26ch; }
  .phx-hero-meta { gap: .3rem .7rem; font-size: .8rem; }
  .phx-hero-kicker { font-size: .72rem; letter-spacing: .24em; }
  .phx-hero-context { font-size: .72rem; }
}

/* ===== Phoenix sub-nav (second tier) + subpage page-heads — Alex 2026-06-19 =====
   Phoenix-scoped wayfinding for the 5 subpages. Does NOT touch the locked MSN top-nav. */
/* subpages: pad body below the fixed 74px MSN top-nav (padding can't margin-collapse) */
body.phx-subpage{ padding-top: 74px; }
/* UNIFIED with the main event sub-bar (.msn-subnav): dark skin + one-lap travelling
   light. Shares --msn-sweep + @keyframes msnSweep from overrides.css. Alex 2026-06-20:
   "integrate the submenu into our main event menu and submenus / apply your own approach". */
.phx-subnav{
  background: #14110e;
  border-bottom: 1px solid #000;
  width: 100%;
  /* dock under the fixed MSN top-nav (74px desktop) */
  position: sticky;
  top: 74px;
  z-index: 900;
}
.phx-subnav-inner{
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: .1rem;
  padding: .4rem 2rem; flex-wrap: wrap;
}
/* push items RIGHT; auto-margin collapses on mobile overflow (active tab stays reachable) */
.phx-subnav-inner > a:first-child{ margin-left: auto; }
.phx-subnav a{
  font-family: 'Geist', 'Inter', sans-serif;          /* match the top nav (was monospace) */
  font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: #b0aca8;
  padding: .5rem .85rem; border-radius: 5px; white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.phx-subnav a:hover{ color: #fff; }
.phx-subnav a.active,
.phx-subnav a[aria-current="page"]{                   /* active = gold fill, black text */
  background: #ddc074; color: #0f0f0f; font-weight: 600;
}
.phx-subnav-home{ font-weight: 600; margin-right: .15rem; }
.phx-subnav-cta{
  margin-left: .6rem; color: #fff !important;
  background: #e31b23;
  padding: .5rem 1rem !important; border-bottom: none !important; border-radius: 4px;
}
.phx-subnav-cta:hover{ background: #c8161d; }
/* one-lap travelling light around the inner bar (mirrors .msn-subnav) */
.phx-subnav.lit .phx-subnav-inner::before{
  content: ''; position: absolute; inset: 0; padding: 2px; border-radius: 5px;
  background: conic-gradient(from var(--msn-sweep),
     transparent 0deg, transparent 280deg,
     rgba(255,216,122,.55) 305deg, #ffe9b0 330deg, #fff 345deg, #fff 352deg,
     rgba(255,233,176,.6) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(255,224,150,.95));
  animation: msnSweep 2.6s linear 1; pointer-events: none;
}
@media (max-width: 768px){
  /* mobile: the MSN top-nav is sticky/in-flow (not fixed) — drop the desktop clearance
     and let the sub-nav flow statically under it (avoids sticky-stacking + black strip). */
  body.phx-subpage{ padding-top: 0; }
  .phx-subnav{ position: static; top: auto; }
  .phx-subnav-inner{ justify-content: flex-start; padding: .45rem 1.1rem; gap: 0; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .phx-subnav-cta{ margin-left: .5rem; }
  .phx-subnav.lit .phx-subnav-inner::before{ animation: none; }
}
@media (prefers-reduced-motion: reduce){
  .phx-subnav.lit .phx-subnav-inner::before{ animation: none; }
}

/* subpage compact head (seashell) */
.phx-pagehead{ background: var(--phx-seashell,#fff5ee); padding: 3.5rem 2rem 2.5rem; }
.phx-pagehead-inner{ max-width: 1180px; margin: 0 auto; }
.phx-pagehead-title{ margin: .3rem 0 .6rem; }
.phx-pagehead-sub{ color: var(--phx-ink-dark-2,#4a443c); max-width: 60ch; font-size: 1.05rem; }
@media (max-width: 720px){ .phx-pagehead{ padding: 2.5rem 1.25rem 2rem; } }