/* ============================================================
   Phoenix Awards 2026 — V2 "Cinematic Heritage"
   Override layered AFTER phoenix.css. Dramatic, film-like, parallax,
   heavy near-blacks + gold foiling, before/after heritage motif.
   ============================================================ */

:root { --phx-pad: clamp(5rem, 11vw, 10rem); }

body { background: #060606; }

/* HERO — taller, slow zoom, vertical cinematic gradient */
.phx-hero { min-height: 100dvh; }
.phx-hero-bg img { animation: phxKenburns 22s ease-out forwards; transform-origin: 60% 40%; }
@keyframes phxKenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.phx-hero-overlay {
  background: linear-gradient(180deg, rgba(6,6,6,.35) 0%, rgba(6,6,6,.55) 55%, rgba(6,6,6,.97) 100%);
}
.phx-hero-content { padding: 9rem 0 5rem; }
.phx-hero-title { font-size: clamp(3.4rem, 9vw, 7rem); -webkit-text-stroke: 2.5px #fff; letter-spacing: -0.01em; }
.phx-hero-tagline { font-size: clamp(1.5rem, 3.8vw, 2.7rem); }
.phx-hero-kicker { font-size: .82rem; letter-spacing: .32em; }

/* Section rhythm — bigger, more cinematic, hairline gold dividers */
.phx-section { border-top: 1px solid rgba(221,192,116,.18); }
.phx-title { font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -0.015em; }
.phx-section-header { margin-bottom: 4rem; }
.phx-pretitle { letter-spacing: .28em; }
.phx-lead { font-size: 1.45rem; }

/* Parallax heritage bands (robust CSS, no JS) */
.phx-showcase, .phx-gala {
  background-image: linear-gradient(rgba(6,6,6,.82), rgba(6,6,6,.92)), url('../assets/hero-phoenix.webp');
  background-size: cover; background-position: center; background-attachment: fixed;
}
.phx-inspo {
  background-image: linear-gradient(rgba(6,6,6,.9), rgba(6,6,6,.9)), url('../assets/texture-heritage-dark.webp');
  background-size: cover; background-attachment: fixed;
}

/* Cards — heavier, gold top accent, deeper shadow */
.phx-pillar, .phx-cat-card, .phx-tier, .phx-step {
  background: #0c0c0c; border-top: 2px solid var(--phx-gold-deep);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.9);
}
.phx-cat-card h3, .phx-tier h3, .phx-pillar h3 { font-size: 1.6rem; }
.phx-cat-grand { background: linear-gradient(135deg, rgba(221,192,116,.22), rgba(6,6,6,.4)); }

/* Project tiles — filmic */
.phx-project { min-height: 120px; font-size: 1.25rem; background: #0c0c0c; }

/* Buttons — wider, more presence */
.phx-btn { padding: 1rem 2.2rem; letter-spacing: .02em; }
.phx-video-thumb { aspect-ratio: 16/9; }

@media (max-width: 720px) {
  .phx-showcase, .phx-gala, .phx-inspo { background-attachment: scroll; }
}

/* ============================================================
   V2 + V4 GRAFT (Alex 2026-06-18): gala-energy elements layered
   onto cinematic base. Ticker, gold KATEGORIE block, oversized
   titles, ★ kicker, big step numerals, gold hover, interactivity,
   modal system, full-bleed no-overlay hero.
   ============================================================ */

/* --- Hero: full-bleed, NO dark overlay (localized scrim only) --- */
.phx-hero { min-height: 100dvh; }
.phx-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* kill the heavy cinematic wash; keep only a soft bottom-left scrim behind text */
.phx-hero-overlay {
  background: linear-gradient(105deg, rgba(6,6,6,.72) 0%, rgba(6,6,6,.34) 42%, rgba(6,6,6,0) 70%);
}
.phx-hero-content::before {
  content: ""; position: absolute; inset: -2rem -3rem; z-index: -1;
  background: radial-gradient(120% 100% at 0% 60%, rgba(6,6,6,.66), rgba(6,6,6,0) 75%);
  pointer-events: none;
}
.phx-hero-content { position: relative; }

/* --- Ticker band (markup after nav) --- */
.phx-ticker { overflow: hidden; background: var(--phx-gold); color: #000; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.phx-ticker-track { display: inline-block; white-space: nowrap; padding: .5rem 0;
  font-family: 'Geist Mono', monospace; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  font-size: .78rem; animation: phxTicker 30s linear infinite; }
.phx-ticker-track span { padding: 0 1.2rem; }
@keyframes phxTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Title orphan control only (V2 sizing retained, no V4 size inflation) --- */
.phx-title { text-wrap: balance; }
.phx-hero-title { text-wrap: balance; }

/* --- KATEGORIE + step numerals: V2 base retained (V4 gold-block reverted, Alex 2026-06-18) ---
   base phoenix.css already provides: .phx-categories dark bg-2, .phx-cat-no small muted,
   .phx-step-num 2.6rem solid gold-deep. Only marquee + gold hover come from V4. --- */

/* --- Gold hover on interactive cards/tiers/pillars --- */
.phx-cat-card, .phx-tier, .phx-pillar { transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.phx-cat-card.is-clickable:hover, .phx-tier.is-clickable:hover { border-color: var(--phx-gold); transform: translateY(-3px); box-shadow: 0 22px 50px -28px rgba(221,192,116,.45); }
.phx-categories .phx-cat-card.is-clickable:hover { border-color: var(--phx-gold); }
.phx-tier-title.is-clickable:hover { box-shadow: 0 22px 56px -26px rgba(221,192,116,.6); }

/* --- Interactive affordance: whole card is a button --- */
button.phx-cat-card, button.phx-tier { width: 100%; text-align: left; font: inherit; cursor: pointer; appearance: none; }
.phx-card-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
  font-family: 'Geist Mono', monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--phx-gold); }
.phx-categories .phx-card-more { color: var(--phx-gold); }
.phx-card-more::after { content: "→"; transition: transform 160ms ease; }
.phx-cat-card.is-clickable:hover .phx-card-more::after, .phx-tier.is-clickable:hover .phx-card-more::after { transform: translateX(4px); }
button.phx-cat-card:focus-visible, button.phx-tier:focus-visible { outline: 2px solid var(--phx-gold); outline-offset: 3px; }

/* --- Modal system (categories / tiers / submission) --- */
.phx-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.phx-modal.is-open { display: flex; }
.phx-modal-backdrop { position: absolute; inset: 0; background: rgba(4,4,4,.82); backdrop-filter: blur(3px); }
.phx-modal-dialog { position: relative; z-index: 1; width: min(640px, 100%); max-height: 88dvh; overflow-y: auto;
  background: #0c0c0c; border: 1px solid rgba(221,192,116,.4); border-top: 3px solid var(--phx-gold);
  padding: clamp(1.6rem, 4vw, 2.8rem); box-shadow: 0 40px 120px -40px rgba(0,0,0,.95); }
.phx-modal-close { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 1.2rem; cursor: pointer; transition: all 160ms ease; }
.phx-modal-close:hover { border-color: var(--phx-gold); color: var(--phx-gold); }
.phx-modal-eyebrow { font-family: 'Geist Mono', monospace; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--phx-gold); margin: 0 0 .5rem; }
.phx-modal-title { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 700; color: #fff; margin: 0 0 1rem; text-wrap: balance; }
.phx-modal-dialog h4 { font-family: 'Geist Mono', monospace; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--phx-gold); margin: 1.4rem 0 .6rem; }
.phx-modal-dialog ul { margin: 0; padding-left: 1.1rem; }
.phx-modal-dialog li { margin: 0 0 .5rem; color: #ddd; line-height: 1.5; }
.phx-modal-dialog p { color: #cfcfcf; line-height: 1.6; }
.phx-modal-ref { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .92rem; color: #b5b5b5; }
.phx-modal-ref strong { color: #fff; }
body.phx-modal-lock { overflow: hidden; }

/* --- Submission form (inside modal) --- */
.phx-form { display: grid; gap: .9rem; margin-top: .4rem; }
.phx-form-row { display: grid; gap: .3rem; }
.phx-form label { font-family: 'Geist Mono', monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #cfcfcf; }
.phx-form input, .phx-form select, .phx-form textarea {
  background: #060606; border: 1px solid rgba(255,255,255,.18); color: #fff; padding: .7rem .8rem; font: inherit; border-radius: 0; }
.phx-form input:focus, .phx-form select:focus, .phx-form textarea:focus { outline: none; border-color: var(--phx-gold); }
.phx-form textarea { resize: vertical; min-height: 78px; }
.phx-form-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .82rem; color: #b5b5b5; }
.phx-form-consent input { width: auto; margin-top: .2rem; }
.phx-form-note { font-size: .8rem; color: #9a9a9a; line-height: 1.5; }
.phx-form-actions { margin-top: .4rem; }
.phx-form .phx-btn { width: 100%; justify-content: center; }
.phx-form-thanks { text-align: center; padding: 1rem 0; }
.phx-form-thanks .phx-check { font-size: 2.4rem; color: var(--phx-gold); }
.phx-form-thanks h3 { font-family: 'Playfair Display', serif; color: #fff; font-size: 1.5rem; margin: .6rem 0; }
.phx-form-thanks p { color: #cfcfcf; }

/* --- Contact CTA buttons (docs section) --- */
.phx-contact-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; }

/* --- Inspiracje project tiles clickable cursor already covered; partner tier badge on gold --- */
@media (max-width: 640px) {
  .phx-hero-content::before { inset: -1rem -1.2rem; }
}