/* Event Rezervační Systém – grafická celostránková rezervace ([ers_rezervace_pro]).
 *
 * Barvy a fonty jsou v proměnných níže – pro jiného klienta/akci stačí
 * přepsat tento blok (např. přes vlastní CSS v Nastavení webu).
 *
 * FONT: --ers-l-font-display/--ers-l-font-body jsou zatím nastavené na solidní
 * neutrální sans-serify. Až budete mít přesný název fontu z webu klienta
 * (Prohlížeč → Prozkoumat → Computed → font-family), stačí ho sem doplnit.
 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

.ers-landing, .ers-landing * { box-sizing: border-box; }

.ers-landing {
  /* --- Paleta (výchozí: onsemi grafit + oranžová) --- */
  --ers-l-graphite: #202B2E;
  --ers-l-graphite-2: #2C3A3E;
  --ers-l-sand: #F3ECDD;
  --ers-l-sand-line: #E3D8C0;
  --ers-l-ink: #22282B;
  --ers-l-muted: #5B6560;
  --ers-l-accent: #DA7F3A;
  --ers-l-accent-deep: #B8632A;
  --ers-l-accent-light: #F0B86E;

  /* --- Typografie (nahraďte přesným fontem klienta, až ho budete mít) --- */
  --ers-l-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ers-l-font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ers-l-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  z-index: 2147483000;
  background: var(--ers-l-sand);
  color: var(--ers-l-ink);
  font-family: var(--ers-l-font-body);
  -webkit-font-smoothing: antialiased;
}
.ers-landing-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ================= HERO ================= */
.ers-landing-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 88% 100%, rgba(218,127,58,.14), transparent 60%),
    linear-gradient(160deg, var(--ers-l-graphite) 0%, var(--ers-l-graphite-2) 100%);
  padding: clamp(64px, 12vh, 120px) 24px clamp(64px, 10vh, 110px);
}
/* Ambientní pozadí za textem – nízká průhlednost + je v DOM PŘED obsahem
   (--> vykreslí se pod ním), takže text zůstává vždy čitelný nahoře. */
.ers-landing-line {
  position: absolute; inset: 0;
  opacity: .3; pointer-events: none;
}
.ers-landing-line svg { display: block; width: 100%; height: 100%; }
.ers-l-trace {
  stroke-dasharray: 900; stroke-dashoffset: 900;
  animation: ers-l-draw 2.2s cubic-bezier(.2,.7,.2,1) forwards;
}
.ers-l-trace-1 { animation-delay: .1s; }
.ers-l-trace-2 { animation-delay: .3s; }
.ers-l-trace-3 { animation-delay: .5s; }
.ers-l-trace-4 { animation-delay: .7s; }
.ers-l-chip { opacity: 0; animation: ers-l-fade .6s ease-out .1s forwards; }

/* Pulzy putující stále po čarách – jako elektrický proud v obvodu.
   Různá rychlost/zpoždění u každé čáry = přirozenější, "spořičový" pohyb. */
.ers-l-dot circle { opacity: 0; animation: ers-l-dotfade linear infinite; }
.ers-l-dot { offset-rotate: 0deg; animation: ers-l-travel linear infinite; }

.ers-l-dot-1a, .ers-l-dot-1b { offset-path: path("M 0,70 C 100,40 200,100 300,70 C 420,35 480,110 600,70 C 700,40 800,95 1000,60"); }
.ers-l-dot-2a, .ers-l-dot-2b { offset-path: path("M 0,190 C 120,220 220,150 340,185 C 450,215 540,150 650,185 C 760,215 860,160 1000,190"); }
.ers-l-dot-3a, .ers-l-dot-3b { offset-path: path("M 0,310 C 110,280 210,350 320,315 C 430,280 540,355 650,315 C 760,280 860,345 1000,310"); }
.ers-l-dot-4a, .ers-l-dot-4b { offset-path: path("M 0,430 C 100,460 210,400 320,435 C 430,465 530,405 650,435 C 760,465 860,405 1000,430"); }

.ers-l-dot-1a { animation-duration: 8s;  animation-delay: 0s; }
.ers-l-dot-1a circle { animation-duration: 8s;  animation-delay: 0s; }
.ers-l-dot-1b { animation-duration: 8s;  animation-delay: 4s; }
.ers-l-dot-1b circle { animation-duration: 8s;  animation-delay: 4s; }

.ers-l-dot-2a { animation-duration: 11s; animation-delay: 1.5s; }
.ers-l-dot-2a circle { animation-duration: 11s; animation-delay: 1.5s; }
.ers-l-dot-2b { animation-duration: 11s; animation-delay: 7s; }
.ers-l-dot-2b circle { animation-duration: 11s; animation-delay: 7s; }

.ers-l-dot-3a { animation-duration: 9.5s; animation-delay: 3s; }
.ers-l-dot-3a circle { animation-duration: 9.5s; animation-delay: 3s; }
.ers-l-dot-3b { animation-duration: 9.5s; animation-delay: 8s; }
.ers-l-dot-3b circle { animation-duration: 9.5s; animation-delay: 8s; }

.ers-l-dot-4a { animation-duration: 13s; animation-delay: 2s; }
.ers-l-dot-4a circle { animation-duration: 13s; animation-delay: 2s; }
.ers-l-dot-4b { animation-duration: 13s; animation-delay: 9s; }
.ers-l-dot-4b circle { animation-duration: 13s; animation-delay: 9s; }

@keyframes ers-l-draw    { to { stroke-dashoffset: 0; } }
@keyframes ers-l-fade    { to { opacity: 1; } }
@keyframes ers-l-dotfade { 0% { opacity: 0; } 10% { opacity: .95; } 88% { opacity: .95; } 100% { opacity: 0; } }
@keyframes ers-l-travel  { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.ers-landing-hero-inner { position: relative; max-width: 760px; margin: 0 auto; text-align: center; color: #fff; }
.ers-landing-logo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  padding: 14px 26px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  margin: 0 0 28px;
  opacity: 0; animation: ers-l-rise .7s ease-out .15s forwards;
}
.ers-landing-logo {
  display: block; max-height: 44px; max-width: 220px;
}
.ers-landing-eyebrow {
  font-family: var(--ers-l-font-mono);
  font-size: .82rem; font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ers-l-accent-light);
  margin: 0 0 20px;
  opacity: 0; animation: ers-l-rise .7s ease-out .15s forwards;
}
.ers-landing-title {
  margin: 0;
  font-family: var(--ers-l-font-display);
  font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 5rem);
  line-height: 1;
  letter-spacing: -.02em;
  opacity: 0; animation: ers-l-rise .8s ease-out .25s forwards;
}
.ers-landing-subtitle {
  max-width: 34rem; margin: 22px auto 0;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  line-height: 1.6; color: rgba(255,255,255,.78);
  opacity: 0; animation: ers-l-rise .8s ease-out .35s forwards;
}
@keyframes ers-l-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.ers-landing-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 30px 0 0;
  opacity: 0; animation: ers-l-rise .8s ease-out .45s forwards;
}
.ers-landing-chip {
  font-family: var(--ers-l-font-mono);
  font-size: .82rem; font-weight: 500;
  padding: 9px 16px; border-radius: 980px;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.04);
}

.ers-landing-cta {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 40px; padding: 16px 30px;
  background: var(--ers-l-accent); color: #201107;
  font-family: var(--ers-l-font-display); font-weight: 600; font-size: 1.05rem;
  text-decoration: none; border-radius: 980px;
  box-shadow: 0 14px 34px rgba(218,127,58,.28);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  opacity: 0; animation: ers-l-rise .8s ease-out .55s forwards;
}
.ers-landing-cta svg { transition: transform .18s ease; }
.ers-landing-cta:hover { background: var(--ers-l-accent-deep); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(218,127,58,.36); }
.ers-landing-cta:hover svg { transform: translateY(2px); }
.ers-landing-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ================= INFO KARTY ================= */
.ers-landing-info { padding: clamp(52px, 8vh, 84px) 24px 0; max-width: 1000px; margin: 0 auto; }
.ers-landing-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; justify-content: center; }
.ers-landing-card {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 22px; border: 1px solid var(--ers-l-sand-line); background: #FBF8F1;
}
/* Rohové značky – odkaz na zarovnávací (fiduciální) značky na křemíkové destičce */
.ers-landing-card::before, .ers-landing-card::after { content: ""; position: absolute; width: 14px; height: 14px; }
.ers-landing-card::before { top: -1px; left: -1px; border-top: 2px solid var(--ers-l-accent); border-left: 2px solid var(--ers-l-accent); }
.ers-landing-card::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--ers-l-accent); border-right: 2px solid var(--ers-l-accent); }

.ers-landing-card-eyebrow { font-family: var(--ers-l-font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ers-l-muted); }
.ers-landing-card-main { font-family: var(--ers-l-font-display); font-size: 1.32rem; font-weight: 700; margin-top: 10px; letter-spacing: -.01em; }
.ers-landing-card-sub { margin-top: 6px; font-size: .92rem; color: var(--ers-l-muted); line-height: 1.5; }

/* ================= PROGRAM AKCE ================= */
.ers-landing-program { max-width: 760px; margin: clamp(46px,7vh,72px) auto 0; padding: 0 24px; }
.ers-eyebrow-dark {
	font-family: var(--ers-l-font-mono);
	font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
	color: var(--ers-l-accent-deep);
	margin: 0 0 14px;
	opacity: 1; animation: none;
}
.ers-landing-program-body { color: var(--ers-l-ink); line-height: 1.7; font-size: 1.02rem; }
.ers-landing-program-body h1,
.ers-landing-program-body h2,
.ers-landing-program-body h3,
.ers-landing-program-body h4 {
	font-family: var(--ers-l-font-display); font-weight: 700; letter-spacing: -.01em;
	margin: 1.6em 0 .5em; color: var(--ers-l-ink);
}
.ers-landing-program-body h1:first-child,
.ers-landing-program-body h2:first-child,
.ers-landing-program-body h3:first-child,
.ers-landing-program-body h4:first-child { margin-top: 0; }
.ers-landing-program-body h3 { font-size: 1.3rem; }
.ers-landing-program-body h4 { font-size: 1.08rem; }
.ers-landing-program-body p { margin: 0 0 1em; }
.ers-landing-program-body ul, .ers-landing-program-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.ers-landing-program-body li { margin-bottom: .35em; }
.ers-landing-program-body li::marker { color: var(--ers-l-accent); }
.ers-landing-program-body strong { color: var(--ers-l-ink); }
.ers-landing-program-body a { color: var(--ers-l-accent-deep); }

/* Fotogalerie – pevný poměr stran + object-fit:cover, ať jsou fotky
   jednotně oříznuté bez ohledu na to, jak jsou originály velké/orientované. */
.ers-landing-photos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 32px;
}
.ers-landing-photo { margin: 0; }
.ers-landing-photo-frame {
  display: block; position: relative; width: 100%; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: 12px; background: var(--ers-l-paper, #efe8d9);
  border: 1px solid rgba(0,0,0,.06);
}
.ers-landing-photo-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
.ers-landing-photo figcaption {
  margin-top: 9px; font-family: var(--ers-l-font-mono); font-size: .78rem;
  color: var(--ers-l-ink); opacity: .75; text-align: center; letter-spacing: .01em;
}
@media (max-width: 640px) {
  .ers-landing-photos { grid-template-columns: 1fr; }
}

/* Poznámka o doručení e-mailu – jemně odlišená, ne jako chybová hláška. */
.ers-landing-emailnotice {
  max-width: 560px; margin: 0 auto 22px; padding: 13px 16px;
  background: rgba(218,127,58,.08); border: 1px solid rgba(218,127,58,.25);
  border-radius: 10px; font-size: .88rem; line-height: 1.6; color: var(--ers-l-ink);
  text-align: left;
}

/* ================= PŘEDĚL (PCB hrana) ================= */
.ers-landing-punch {
  position: relative; max-width: 1000px; margin: clamp(46px,7vh,72px) auto 0; padding: 0 24px;
  display: flex; align-items: center; justify-content: center;
}
.ers-landing-punch::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 50%;
  height: 0; border-top: 1px dashed var(--ers-l-sand-line);
}
.ers-landing-punch-label {
  position: relative;
  font-family: var(--ers-l-font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ers-l-accent-deep); background: var(--ers-l-sand); padding: 0 16px;
}

/* ================= FORMULÁŘ ================= */
.ers-landing-form-section { max-width: 620px; margin: clamp(36px,6vh,56px) auto 0; padding: 0 24px clamp(64px,10vh,96px); text-align: center; }
.ers-landing-form-title { font-family: var(--ers-l-font-display); font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 700; letter-spacing: -.01em; margin: 0 0 24px; }
.ers-landing-form-slot { text-align: left; }
.ers-landing-form-slot .ers-form-wrap { margin: 0; }
/* Název akce, termín a "Volná místa" už jsou v hero – ve formuláři je skrýváme, ať se neopakují. */
.ers-landing-form-slot .ers-event-meta,
.ers-landing-form-slot .ers-intro { display: none; }

/* ================= PATIČKA ================= */
.ers-landing-foot {
  max-width: 620px; margin: 0 auto; padding: 0 24px 60px; text-align: center;
  font-family: var(--ers-l-font-mono); font-size: .78rem; color: #9aa89f;
}

/* ================= SCROLL REVEAL ================= */
.ers-landing-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.ers-landing-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ers-l-trace, .ers-l-chip,
  .ers-landing-eyebrow, .ers-landing-logo-badge, .ers-landing-title, .ers-landing-subtitle, .ers-landing-chips, .ers-landing-cta {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .ers-l-dot, .ers-l-dot circle { animation: none !important; opacity: 0 !important; }
  .ers-landing-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (max-width: 640px) {
  .ers-landing-info-grid { grid-template-columns: 1fr; }
}