/* ==========================================================================
   Škoda IT Day 2026 — Styles
   Redesign: "Landing" concept (Claude Design handoff)
   Brand: Škoda Auto (2024 identity) — official design-system tokens
   ========================================================================== */

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'SKODANext';
  src: url('../fonts/SKODANext-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SKODANext';
  src: url('../fonts/SKODANext-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SKODANext';
  src: url('../fonts/SKODANext-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SKODANext';
  src: url('../fonts/SKODANext-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Custom Properties (Škoda DS tokens) ---------- */
:root {
  --base: #05100b;            /* near-black green — dark sections / hero */
  --emerald: #0D3224;         /* primary dark green */
  --emerald-40: #9AB8AA;
  --emerald-20: #CBE2D9;
  --green: #78E8A2;           /* electric green accent */
  --green-hover: #5EDBA0;
  --map-pin: #1F9D5B;
  --white: #FFFFFF;
  --grey-80: #333333;
  --grey-60: #666666;
  --grey-10: #E5E5E5;
  --grey-05: #F2F2F2;
  --mint-05: #F4F6F5;         /* tinted light surface — event plan card */

  --font-brand: 'SKODANext', 'Helvetica Neue', Arial, sans-serif;
  --container: 1240px;
  --nav-height: 78px;
  --transition: 0.3s ease;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--white);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 48px;
}

/* ---------- Section scaffolding ---------- */
.section {
  position: relative;
  padding: 108px 0 116px;
  overflow: hidden;
}

.section--dark {
  background: var(--base);
  color: var(--white);
}

.section--emerald {
  background: var(--emerald);
  color: var(--white);
}

.section--light {
  background: var(--white);
  color: var(--emerald);
}

.section__head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 56px;
}

.section__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section__title {
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
}

.section__intro {
  font-size: 1.05rem;
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
  text-wrap: balance;
}

/* Sub-heads inside a section (Event plan, More than the stands) reuse the
   head stack with a smaller title and a tighter gap to their content. */
.section__head--sub { margin-bottom: 40px; }

.section__title--sub { font-size: clamp(1.7rem, 3vw, 2.3rem); }

/* head colours per surface */
.section--emerald .section__label,
.section--dark .section__label { color: var(--green); }
.section--emerald .section__title,
.section--dark .section__title { color: var(--white); }
.section--emerald .section__intro,
.section--dark .section__intro { color: rgba(255, 255, 255, 0.6); }

.section--light .section__label { color: var(--emerald); }
.section--light .section__title { color: var(--emerald); }
.section--light .section__intro { color: var(--grey-60); }

/* ---------- Shared pattern floor ---------- */
.pattern-floor {
  position: absolute;
  inset: 0;
  background: url('../img/Custom_Pattern.png') center bottom / 116% auto no-repeat;
  -webkit-mask-image: linear-gradient(to top, #000 2%, rgba(0, 0, 0, 0.42) 46%, transparent 78%);
  mask-image: linear-gradient(to top, #000 2%, rgba(0, 0, 0, 0.42) 46%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

@keyframes floorDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.03); }
  50% { transform: translate3d(0, -14px, 0) scale(1.05); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--transition), box-shadow var(--transition);
}

.nav--scrolled {
  background: var(--emerald);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  height: 26px;
  width: auto;
  flex-shrink: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__links a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  position: relative;
}

.nav__links a:hover { color: var(--white); }

.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--green);
  transition: width var(--transition);
}

.nav__links a:hover::after { width: 100%; }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  transform-origin: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform var(--transition), opacity var(--transition);
}

.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--emerald);
  padding: 40px 24px;
  z-index: 49;
  /* Animated open/close: display can't be transitioned, so we toggle
     opacity/visibility/transform instead. visibility flips to hidden only
     after the fade-out finishes (0s delay on the closed state). */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), visibility 0s linear 0.3s;
}

.nav__mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity var(--transition), transform var(--transition), visibility 0s;
}

.nav__mobile a {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--white);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__floor {
  opacity: 0.5;
  animation: floorDrift 28s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.36) 30%, transparent 58%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.36) 30%, transparent 58%);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(72% 70% at 50% 46%, rgba(5, 16, 11, 0.9) 0%, rgba(5, 16, 11, 0.62) 42%, rgba(5, 16, 11, 0) 78%);
  pointer-events: none;
  z-index: 1;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(135% 105% at 50% 34%, transparent 38%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 120px 32px 90px;
  text-align: center;
  animation: fadeUp 0.8s ease both;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 30px;
}

.hero__eyebrow .line {
  width: 30px;
  height: 1px;
  background: rgba(120, 232, 162, 0.6);
  display: inline-block;
}

.hero__eyebrow .text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(120, 232, 162, 0.92);
}

.hero h1 {
  margin: 0;
  font-weight: 900;
  font-size: clamp(3.4rem, 8vw, 6.6rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: var(--white);
}

.hero h1 .year {
  color: var(--white);
}

.hero__meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.hero__meta .date {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.005em;
}

.hero__meta .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(120, 232, 162, 0.55);
  display: inline-block;
  align-self: center;
}

.hero__meta .loc {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 700;
  color: var(--green);
  letter-spacing: -0.005em;
}

/* ---------- Countdown ---------- */
.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 50px;
  font-variant-numeric: tabular-nums;
}

.countdown__item {
  padding: 0 clamp(22px, 2.8vw, 46px);
  text-align: center;
}

.countdown__item + .countdown__item {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.countdown__num {
  font-size: clamp(3.2rem, 5.5vw, 5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--white);
}

.countdown__item--days .countdown__num {
  color: var(--green);
  text-shadow: 0 0 44px rgba(120, 232, 162, 0.4);
}

/* Popisky sedí ZÁMĚRNĚ vedle čísel, ne pod nimi — oba prvky zůstávají inline.
   `margin-top` níž je tím pádem neúčinný; nechává se pro případ, že by se
   sazba někdy měnila. Nedoplňuj `display: block`, je to schválený vzhled. */
.countdown__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 15px;
}

.countdown__item--days .countdown__label { color: rgba(255, 255, 255, 0.5); }

/* ---------- Event phases ----------
   data-phase na <html> nastavuje main.js: before | live | after.
   Bez JS zůstane atribut prázdný → nezobrazí se žádný stav, proto fallback
   na :not([data-phase]) níže, který ukáže předakční hero. */
.hero__state,
.hero__timer,
[data-nav="post"] { display: none; }

[data-phase="before"] .hero__state[data-state="event"],
[data-phase="live"] .hero__state[data-state="event"],
:root:not([data-phase]) .hero__state[data-state="event"],
[data-phase="after"] .hero__state[data-state="after"] { display: block; }

[data-phase="before"] .hero__timer[data-state="before"],
:root:not([data-phase]) .hero__timer[data-state="before"],
[data-phase="live"] .hero__timer[data-state="live"] { display: block; }

[data-phase="after"] [data-nav="post"] { display: block; }
[data-phase="after"] [data-nav="event"] { display: none; }

/* ---------- Phase: after — sekce a copy ---------- */
[data-show="post"],
[data-copy="post"] { display: none; }

[data-phase="after"] [data-hide="post"] { display: none; }
[data-phase="after"] [data-show="post"] { display: block; }
[data-phase="after"] [data-copy="post"] { display: inline; }
[data-phase="after"] [data-copy="event"] { display: none; }

/* Tracks nese seam pod hero; po jeho skrytí ho musí dodat agenda. */
[data-phase="after"] #agenda { border-top: 1px solid rgba(120, 232, 162, 0.5); }

[data-phase="after"] .contact__inner { max-width: 1000px; margin: 0 auto; }

/* Karta má vlastní šířku danou obsahem a `justify-self: center` ji nechával
   plavat uprostřed sloupce — pravá hrana pak nelícovala se seznamem standů
   nad ní. Jen nad 1024 px; níž se grid skládá do sloupce a centrování platí. */
@media (min-width: 1025px) {
  [data-phase="after"] .contact-card { justify-self: end; }
}

/* Plán je pryč, seznam zůstává jako přehled — už není ovládací prvek.
   Selektory musí přebít `.event-plan:not(.is-pinned) .plan-row:hover …`
   níž v souboru, proto tu `.event-plan:not(.is-pinned)` je taky. */
[data-phase="after"] .plan-row { cursor: default; }

[data-phase="after"] .event-plan:not(.is-pinned) .plan-row:hover,
[data-phase="after"] .plan-row.is-active { background: transparent; }

[data-phase="after"] .event-plan:not(.is-pinned) .plan-row:hover .plan-row__badge,
[data-phase="after"] .plan-row.is-active .plan-row__badge {
  background: var(--emerald);
  color: var(--white);
}

/* ---------- Zone descriptors (V5) ---------- */
.plan-list__head {
  margin-bottom: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--grey-10);
}

.plan-list__desc {
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--map-pin);
}

/* ---------- Phase: live ---------- */
.live {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 26px);
  margin-top: 50px;
}

.live__now {
  font-size: clamp(2.6rem, 4.6vw, 4.2rem);
  font-weight: 300;
  line-height: 1;
  color: var(--white);
}

.live__dot {
  position: relative;
  width: clamp(12px, 1.4vw, 17px);
  height: clamp(12px, 1.4vw, 17px);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 44px rgba(120, 232, 162, 0.55);
  flex: none;
}

.live__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--green);
  animation: livePing 2.4s ease-out infinite;
}

@keyframes livePing {
  0% { transform: scale(1); opacity: 0.85; }
  70%, 100% { transform: scale(3.2); opacity: 0; }
}

/* ---------- Phase: after — thank-you hero ---------- */
.hero__state--thanks {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.hero__state--thanks h1 {
  font-size: clamp(2.9rem, 6.4vw, 5.2rem);
  line-height: 0.92;
}

.thanks__lead {
  margin: 28px auto 0;
  max-width: 720px;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}

.cta-grid {
  margin-top: 56px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 22px;
}

.cta-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 34px 30px 30px;
  text-align: left;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(120, 232, 162, 0.22);
  border-radius: 18px;
  transition: transform var(--transition), border-color var(--transition),
    background var(--transition);
}

.cta-card:hover {
  transform: translateY(-6px);
  border-color: rgba(120, 232, 162, 0.55);
  background: rgba(120, 232, 162, 0.06);
}

.cta-card__icon {
  width: 42px;
  height: 42px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.cta-card__title {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
}

.cta-card__text {
  flex: 1;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}

.cta-card__action { margin-top: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  transition: background var(--transition), color var(--transition),
    border-color var(--transition), transform 0.2s ease;
}

.btn span { font-size: 1.1em; line-height: 1; }

.btn--primary {
  padding: 15px 28px;
  background: var(--green);
  color: var(--emerald);
}

.btn--primary:hover { background: var(--green-hover); transform: translateY(-2px); }

.btn--secondary {
  padding: 14px 27px;
  background: transparent;
  color: var(--green);
  border: 1px solid rgba(120, 232, 162, 0.55);
}

.btn--secondary:hover {
  background: var(--green);
  color: var(--emerald);
  transform: translateY(-2px);
}

/* Odkaz bez URL (ještě nedodaná) — nesmí vypadat jako klikatelný. */
.btn[aria-disabled="true"],
.nav__links a[aria-disabled="true"],
.nav__mobile a[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .live__dot::after { animation: none; opacity: 0; }
  .cta-card:hover { transform: none; }
  .btn:hover { transform: none; }
}

/* ---------- Tracks ---------- */
.section--tracks { border-top: 1px solid rgba(120, 232, 162, 0.35); }

.tracks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.track-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(120, 232, 162, 0.2);
  border-radius: 18px;
  padding: 40px 34px;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.track-card:hover {
  transform: translateY(-6px);
  border-color: rgba(120, 232, 162, 0.55);
  background: rgba(120, 232, 162, 0.06);
}

.track-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
}

.track-card__icon svg {
  width: 44px;
  height: 44px;
  display: block;
}

.track-card__word {
  font-weight: 900;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--white);
  margin-bottom: 14px;
}

.track-card__sub {
  font-size: 1.05rem;
  color: var(--green);
  font-weight: 700;
  margin-bottom: 10px;
}

.track-card__desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.64);
  line-height: 1.6;
  margin: 0;
}

/* ---------- Agenda ---------- */
.agenda__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.agenda__timeline {
  display: grid;
}

.agenda-slot {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: baseline;
  padding: 34px 0;
  border-top: 1px solid var(--grey-10);
}

.agenda-slot:last-child { border-bottom: 1px solid var(--grey-10); }

.agenda-slot__time {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--emerald);
  font-variant-numeric: tabular-nums;
}

.agenda-slot__title {
  margin: 0 0 10px;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--emerald);
}

/* Slots without a description keep no trailing gap under the heading. */
.agenda-slot__title--only { margin-bottom: 0; }

.agenda-slot__desc {
  margin: 0;
  max-width: 600px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--grey-60);
  text-wrap: pretty;
}

.agenda-slot__desc strong {
  font-weight: 700;
  color: var(--emerald);
}

.agenda-slot__link {
  color: var(--map-pin);
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 157, 91, 0.35);
  transition: border-color var(--transition);
}

.agenda-slot__link:hover { border-bottom-color: var(--map-pin); }

/* ---------- Agenda — event plan ---------- */
.event-plan {
  margin-top: 88px;
}

.plan-card {
  background: var(--mint-05);
  border-radius: 16px;
  padding: clamp(18px, 3vw, 36px);
}

/* The floor is the coordinate space: every child is placed in percent of it,
   so the whole plan scales with the card. Positions live in the rules below
   (keyed by data attributes) to keep the markup free of inline styles. */
.plan-floor {
  position: relative;
  aspect-ratio: 1.62;
  max-width: 900px;
  margin: 0 auto;
  border: 3px solid var(--emerald);
  border-radius: 8px;
  background: var(--white);
}

.plan-zone {
  position: absolute;
  border: 1px dashed rgba(13, 50, 36, 0.3);
  border-radius: 12px;
}

.plan-zone[data-zone="core"]   { left: 5.5%;  top: 16%;  width: 15%; height: 53%; }
.plan-zone[data-zone="future"] { left: 28.5%; top: 6.5%; width: 50%; height: 23%; }
.plan-zone[data-zone="engine"] { left: 22%;   top: 72%;  width: 61%; height: 20.5%; }

.plan-label {
  font-size: clamp(0.55rem, 0.9vw, 0.7rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--emerald);
}

.plan-zone-label {
  position: absolute;
  text-align: center;
}

.plan-zone-label[data-zone="core"]   { left: 5.5%;  width: 15%; top: 10%; }
.plan-zone-label[data-zone="future"] { left: 28.5%; width: 50%; top: 31.5%; }
.plan-zone-label[data-zone="engine"] { left: 22%;   width: 61%; top: 66%; }

.plan-stage {
  position: absolute;
  left: 88.5%;
  top: 10%;
  width: 5.5%;
  height: 80%;
  border-radius: 6px;
  background: var(--emerald);
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-stage__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--green);
}

.plan-door {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.18em;
  color: var(--map-pin);
}

.plan-door__arrow { font-size: 1.2em; }

.plan-door--in  { left: 5.5%; top: 3%; }
.plan-door--out { right: 6%; bottom: 2%; }

.plan-stand {
  position: absolute;
  width: 7.5%;
  height: 11.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: var(--emerald);
  color: var(--white);
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(0.7rem, 1.3vw, 0.95rem);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* :hover covers the plan on its own, so the plan stays readable without JS;
   .is-active is what mirrors hover/pin coming from the list or a tap. Once a
   stand is pinned, JS marks the block .is-pinned and hover stops competing
   with it — without JS that class never appears and hover keeps working. */
.event-plan:not(.is-pinned) .plan-stand:hover,
.plan-stand.is-active {
  background: var(--green);
  color: var(--emerald);
  box-shadow: 0 0 0 4px rgba(120, 232, 162, 0.35),
    0 10px 26px rgba(13, 50, 36, 0.22);
  transform: scale(1.08);
}

.plan-stand:focus-visible {
  outline: 2px solid var(--map-pin);
  outline-offset: 4px;
}

.plan-stand[data-stand="1"]  { left: 9.25%;  top: 19%; }
.plan-stand[data-stand="2"]  { left: 9.25%;  top: 31.5%; }
.plan-stand[data-stand="3"]  { left: 9.25%;  top: 44%; }
.plan-stand[data-stand="4"]  { left: 9.25%;  top: 56.5%; }
.plan-stand[data-stand="5"]  { left: 24.5%;  top: 76.5%; }
.plan-stand[data-stand="6"]  { left: 36.5%;  top: 76.5%; }
.plan-stand[data-stand="7"]  { left: 48.5%;  top: 76.5%; }
.plan-stand[data-stand="8"]  { left: 60.5%;  top: 76.5%; }
.plan-stand[data-stand="9"]  { left: 72.5%;  top: 76.5%; }
.plan-stand[data-stand="10"] { left: 33%;    top: 12%; }
.plan-stand[data-stand="11"] { left: 49.75%; top: 12%; }
.plan-stand[data-stand="12"] { left: 66.5%;  top: 12%; }

/* Status line — reserves its height so the card does not jump between the
   hint and an active stand. */
.plan-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px auto 0;
  min-height: 30px;
  font-size: 1rem;
  color: var(--grey-60);
}

.plan-status__badge {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: var(--emerald);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-status__name {
  font-weight: 700;
  color: var(--emerald);
}

.plan-status__dot {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--emerald-20);
}

.plan-status__zone {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--map-pin);
}

/* Stand list — one column per zone, mirroring the plan above. */
.plan-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.plan-list__heading {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  color: var(--emerald);
}

.plan-list__rows {
  display: grid;
  gap: 2px;
}

/* Negative margin lets the active row's tint bleed past the text column
   without shifting the names out of alignment with the heading. */
.plan-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 7px 10px;
  margin: 0 -10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.event-plan:not(.is-pinned) .plan-row:hover,
.plan-row.is-active {
  background: rgba(120, 232, 162, 0.18);
}

.plan-row:focus-visible {
  outline: 2px solid var(--map-pin);
  outline-offset: 2px;
}

.plan-row__badge {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--emerald);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.event-plan:not(.is-pinned) .plan-row:hover .plan-row__badge,
.plan-row.is-active .plan-row__badge {
  background: var(--green);
  color: var(--emerald);
}

.plan-row__name {
  display: block;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--emerald);
}

.plan-row__sub {
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--grey-60);
}

/* ---------- Agenda — throughout the day ---------- */
.agenda__allday {
  margin-top: 88px;
}

.agenda__allday-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.allday-item {
  padding: 0 22px;
  text-align: center;
  border-left: 1px solid var(--grey-10);
}

.allday-item:first-child { border-left: 0; }

.allday-item__icon {
  width: 38px;
  height: 38px;
  margin: 0 auto 20px;
  color: var(--emerald);
}

.allday-item__icon svg {
  width: 38px;
  height: 38px;
  display: block;
}

.allday-item__text {
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--emerald);
}

/* ---------- Highlights / Recap ---------- */
.highlights__accent {
  opacity: 0.5;
  animation: floorDrift 30s ease-in-out infinite;
}

.highlights__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(120, 232, 162, 0.22);
  background: var(--emerald);
}

@supports not (aspect-ratio: 16 / 9) {
  .video { padding-bottom: 56.25%; height: 0; }
}

.video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.video__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(5, 16, 11, 0.35);
}

.video__play {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 40px rgba(120, 232, 162, 0.35);
  cursor: pointer;
  border: none;
  transition: background 0.25s ease, transform 0.25s ease;
}

.video__play:hover {
  background: var(--green-hover);
  transform: scale(1.05);
}

.video__play svg {
  width: 36px;
  height: 36px;
  fill: var(--emerald);
  margin-left: 4px;
}

/* inline player: video nahradí poster přímo v rámu */
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video.is-playing .video__poster,
.video.is-playing .video__overlay {
  display: none;
}

/* replay overlay: shown over the paused end frame (~44s) */
.video__replay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: rgba(5, 16, 11, 0.55);
}

.video__replay[hidden] { display: none; }

.video__play--replay svg { margin-left: 0; }

.video__replay-label {
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.video__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 3px solid rgba(120, 232, 162, 0.25);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Venue ---------- */
.section--venue { border-top: 1px solid rgba(120, 232, 162, 0.5); }

.venue__split {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 64px;
  align-items: center;
}

.venue__text .section__title {
  margin: 0 0 20px;
  line-height: 1;
}

.venue__text .section__intro {
  max-width: 430px;
  margin: 0 0 30px;
  line-height: 1.65;
}

.venue__address {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.venue__address svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
}

.venue__address-lines {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--emerald);
  font-weight: 500;
}

.venue__photo {
  border-radius: 18px;
  overflow: hidden;
  height: clamp(320px, 34vw, 400px);
  box-shadow: 0 16px 44px rgba(13, 50, 36, 0.12);
}

.venue__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 50%;
  display: block;
}

/* ---------- Contact ---------- */
.section--contact {
  padding: 108px 0;
  border-top: 1px solid rgba(120, 232, 162, 0.35);
}

.contact__inner {
  max-width: 1240px;
  margin: 0 auto;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 64px;
  align-items: start;
}

.contact__lead-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}

.contact__lead-title {
  font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.contact__lead-title span { color: var(--green); }

.contact__lead-text {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 20px 0 0;
  max-width: 400px;
  text-wrap: pretty;
}

.contact-card {
  justify-self: center;
  border: 1px solid rgba(120, 232, 162, 0.28);
  border-radius: 18px;
  padding: 34px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 22px;
}

.contact-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--green);
  box-shadow: 0 0 0 5px rgba(120, 232, 162, 0.14);
  flex-shrink: 0;
}

.contact-card__name {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--white);
  margin-bottom: 3px;
}

.contact-card__role {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 16px;
}

.contact-card__line {
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 6px;
}

.contact-card__line a { color: var(--green); }
.contact-card__line a:hover { color: var(--green-hover); }

/* ---------- Footer ---------- */
.footer {
  background: #000;
  border-top: 1px solid rgba(120, 232, 162, 0.18);
  padding: 46px 0;
}

.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__logo {
  height: 24px;
  width: auto;
}

.footer p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.42);
  margin: 0;
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--d1 { transition-delay: 0.1s; }
.reveal--d2 { transition-delay: 0.2s; }
.reveal--d3 { transition-delay: 0.3s; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .venue__split { grid-template-columns: 1fr; gap: 40px; }
  .contact__grid { grid-template-columns: 1fr; gap: 32px; }

  /* Stacked Venue/Contact center their heads like the other sections */
  .venue__text { text-align: center; }
  .venue__text .section__intro { margin: 0 auto 30px; }
  /* …but keep the address left-aligned, as on desktop */
  .venue__address { justify-content: flex-start; text-align: left; }
  .contact__lead { text-align: center; }
  .contact__lead-text { margin: 20px auto 0; }

  /* Five columns get too narrow to read — go two-up and swap the vertical
     dividers for horizontal ones, since items no longer sit on one line. */
  .agenda__allday-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 32px;
  }

  .allday-item {
    padding: 28px 6px 0;
    border-left: 0;
    border-top: 1px solid var(--grey-10);
  }
}

@media (max-width: 900px) {
  .tracks__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }

  /* Time stacks above the session instead of sitting in its own column. */
  .agenda-slot {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 28px 0;
  }
}

@media (max-width: 768px) {
  :root { --nav-height: 64px; }

  .container { padding: 0 24px; }

  .section { padding: 72px 0; }
  .section--contact { padding: 72px 0; }

  .nav__links { display: none; }
  .nav__burger { display: flex; }

  .hero__content { padding: 100px 20px 72px; }

  .countdown__item { padding: 0 14px; }

  .section__head { margin-bottom: 40px; }

  .footer .container { flex-direction: column; text-align: center; }

  .section__head--sub { margin-bottom: 28px; }

  .event-plan { margin-top: 56px; }
  .agenda__allday { margin-top: 56px; }

  /* Three zone columns get too narrow to hold the stand names on one line. */
  .plan-list {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .agenda__allday-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .agenda-slot__time { font-size: 1.5rem; }

  /* Avatar (96) + mezera (22) + text (min-content 154, drží ho e-mail) +
     padding (2×34) dává kartě pevné dno 342 px. Na 375 se nevejde o 15 px,
     na 320 o 70 — a protože `.section` má overflow:hidden, ustřihne to
     i nadpis a lead vedle. Na úzkých šířkách proto skládáme pod sebe. */
  .contact-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: 28px 22px;
  }

  /* At this width the zone captions are more noise than help — the dashed
     frames still show the grouping and the list below names the zones. */
  .plan-zone-label { display: none; }

  .countdown__num { font-size: 2.4rem; }
  .countdown__item { padding: 0 10px; }
  .countdown__label { font-size: 0.5rem; letter-spacing: 0.12em; }
  .hero h1 { font-size: 2.6rem; }

  /* Date + location stack vertically; the inline separator dot has no
     meaning when they are no longer on one line, so hide it. */
  .hero__meta { flex-direction: column; align-items: center; gap: 10px; }
  .hero__meta .dot { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1; transform: none; }
}