/* MSN27 landing: one-page-specific sections layered on the cloned MSN26 chrome.
   Loaded AFTER style.css + overrides.css. Only NEW sections + single-card grid
   centering + the lang-toggle active state live here (no CANON edits). */

/* --- generic section rhythm (matches donor dark theme) --- */
.landing-section { padding: 5rem 1.5rem; }
.landing-section > .section-header { max-width: 840px; margin: 0 auto 3rem; text-align: center; }
.landing-section .section-subtitle { max-width: 680px; margin-left: auto; margin-right: auto; }

/* --- proof strip (#proof): reuses .stats-tiles / .stats-tile from overrides.css --- */
#proof { text-align: center; }
#proof .proof-links { margin-top: 2.75rem; }
#proof .proof-links-lead { color: var(--on-dark-muted); font-size: 0.95rem; margin-bottom: 1rem; }
#proof .proof-links a {
  color: var(--on-dark-accent-bright); text-decoration: none; font-weight: 600;
  letter-spacing: 0.02em; border-bottom: 1px solid rgba(227, 193, 120, 0.45); padding-bottom: 2px;
}
#proof .proof-links a:hover { color: #ffffff; border-color: #ffffff; }
#proof .proof-links .sep { color: var(--on-dark-muted); margin: 0 0.7rem; }

/* --- tickets (#tickets): ONE card, centered.
   Overrides the CANON 3-col grid so a single card never left-weights. --- */
section#tickets .tickets-grid {
  grid-template-columns: minmax(0, 430px);
  justify-content: center;
  place-content: center;
}
section#tickets .ticket-card .btn-primary { text-align: center; text-decoration: none; }
.ticket-price-note { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--on-dark-muted); letter-spacing: 0.02em; }

/* --- Phoenix Awards 2027 (#phoenix): 4 CTA cards --- */
.phx-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  max-width: 1120px; margin: 0 auto; padding: 0 0.25rem;
}
.phx-card {
  display: flex; flex-direction: column; background: var(--bg-tertiary);
  border: 1px solid var(--accent-gold); padding: 1.75rem 1.4rem; text-align: left;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.phx-card:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); }
.phx-card h3 {
  font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 600;
  color: var(--on-dark-accent); margin-bottom: 0.6rem; line-height: 1.2;
}
.phx-card p { color: var(--on-dark-secondary); font-size: 0.9rem; line-height: 1.55; margin-bottom: 1.4rem; flex-grow: 1; }
.phx-card .btn-primary { margin-top: auto; text-align: center; text-decoration: none; }
@media (max-width: 900px) { .phx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .phx-grid { grid-template-columns: 1fr; } }

/* --- contact / closing (#kontakt) --- */
#kontakt { text-align: center; }
#kontakt .kontakt-lead { color: var(--on-dark-secondary); max-width: 640px; margin: 0 auto 1.5rem; line-height: 1.65; }
#kontakt a.kontakt-email { color: var(--on-dark-accent-bright); font-weight: 600; text-decoration: none; font-size: 1.15rem; }
#kontakt a.kontakt-email:hover { color: #ffffff; }

/* --- lang toggle active state (my own i18n.js owns the toggle) --- */
.lang-opt { transition: color 0.2s ease, opacity 0.2s ease; margin: 0 0.15em; }
html.lang-pl .lang-opt[data-lang="en"], html.lang-en .lang-opt[data-lang="pl"] { opacity: 0.7; }
html.lang-pl .lang-opt[data-lang="pl"], html.lang-en .lang-opt[data-lang="en"] { color: var(--on-dark-accent); opacity: 1; font-weight: 700; }

/* --- hero: keep bg image visibly readable, add a local bottom scrim behind copy
   so gold/white hero text stays pure-white/gold legible (dark-surface rule). --- */
.hero-content::before {
  content: ''; position: absolute; inset: -2rem -3rem; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.28) 55%, rgba(10, 10, 10, 0) 80%);
  pointer-events: none;
}