/* Sylvaia — waitlist landing page
 *
 * Hodnoty vycházejí ze `sylva-app/src/theme.ts` a
 * `sylva-app/iterations/2026-08-15-visual-language/palette.css`. Neopisují se
 * ručně nazdařbůh: co je tady, je odtamtud. Pozor na `#2d6a4f` — sytá lesní
 * zeleň, kterou paleta opustila; pořád žije v `deploy/index.html` a v `app.json`,
 * ale sem nepatří.
 *
 * Mobile-first záměrně: provoz z Facebooku je drtivě z telefonu, takže široká
 * obrazovka je tu druhá v pořadí, ne první.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap&subset=latin,latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap&subset=latin,latin-ext');

:root {
  /* Grafit a šalvěj — jen odstíny, které stránka opravdu používá. */
  --ink-900: #171a19;
  --ink-700: #2e3532;
  --ink-500: #667069;
  --ink-400: #8b948f;
  --ink-150: #e4e8e5;

  --sage-100: #edf1e9;
  --sage-300: #c2ceb8;
  --sage-700: #4f6749;
  --sage-800: #3c4e37;
  --sage-900: #2e3a2a;

  /* Role */
  --bg: #f2f2ee;          /* papír — o odstín teplejší než grafit */
  --surface: #ffffff;
  --primary: var(--sage-700);
  --primary-dark: var(--sage-800);
  --title: var(--ink-900);
  --text: var(--ink-700);
  --text-secondary: var(--ink-500);
  --border: var(--ink-150);
  --danger: #c0392b;

  /* Teplý akcent pro ikony benefitů. NENÍ to nová barva: `#b25a3e` je odstín
     sklizně z palety úkonů péče (`--care-harvest` v aplikaci), takže landing
     nezavádí nic, co by se s appkou rozešlo. Proti šalvěji je oranžová blízko
     doplňkové, takže kontrastuje, aniž by působila jako cizí prvek — a barva
     sklizně na stránce o úrodě sedí i významem. */
  --accent-warm: #b25a3e;
  --accent-warm-tint: #f7ece7;

  /* Patkové nese jméno a hlas, bezpatkové nástroj. */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius-card: 12px;
  --radius-field: 8px;

  /* Kartu drží stín, ne obrys. */
  --shadow-card: 0 1px 2px rgba(46, 58, 42, .06), 0 6px 16px rgba(46, 58, 42, .06);

  --content: 720px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Hero ─────────────────────────────────────────────────── */

.hero {
  padding: 36px 0 8px;
  text-align: center;
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.brand img {
  width: 84px;
  height: 84px;
  display: block;
}

/* Wordmark je text, ne obrázek — kvůli ostrosti na retině i kvůli tomu,
   že jméno značky má jít vybrat a zkopírovat. */
.brand-name {
  font-family: var(--font-display);
  font-weight: 400;          /* DM Serif má JEN řez 400 — tučnění by ho zkreslilo */
  font-size: 30px;
  line-height: 1;
  letter-spacing: .14em;     /* verzálky potřebují vzduch, jinak se slepí */
  text-transform: uppercase;
  color: var(--sage-900);
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--title);
  margin: 0 0 16px;
  text-wrap: balance;
}

.lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  /* 26px, ne 16: odsazení dřív z půlky nesl zrušený řádek tří slov pod ním.
     Bez něj by karta formuláře lezla textu na paty. */
  margin: 0 auto 26px;
  max-width: 34em;
}

/* ── Formulář ─────────────────────────────────────────────── */

.signup {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
  text-align: left;
}

.signup h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  color: var(--title);
  margin: 0 0 6px;
  text-align: center;
  text-wrap: balance;    /* jinak zůstane na druhém řádku osamocené „prvními?" */
}

.signup .sub {
  font-size: 14.5px;
  color: var(--text-secondary);
  margin: 0 0 18px;
  text-align: center;
}

.field-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input[type="email"] {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 16px;           /* pod 16px zoomuje iOS Safari při fokusu */
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--ink-150);
  border-radius: var(--radius-field);
  padding: 13px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="email"]::placeholder { color: var(--ink-400); }

input[type="email"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--sage-100);
}

input[type="email"][aria-invalid="true"] { border-color: var(--danger); }

button {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: var(--radius-field);
  padding: 13px 20px;
  cursor: pointer;
  transition: background .15s ease;
}

button:hover:not(:disabled) { background: var(--primary-dark); }
button:disabled { opacity: .55; cursor: default; }

/* Widget se renderuje jako iframe pevné šířky. Bez zarovnání visí u levého
   okraje karty a vypadá jako nedodělek — vycentrování je jediné, co s ním
   z vnějšku jde udělat. */
.turnstile {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

/* Honeypot. `display:none` boti přeskakují — tohle je pro ně vyplnitelné,
   pro člověka neviditelné a pro čtečku vyňaté z pořadí. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.micro {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 14px 0 0;
  text-align: center;
}

.micro a { color: var(--text-secondary); }

/* Hlášky pod formulářem. `role="status"` je oznámí i čtečce. */
/* min-height drží místo i pro prázdnou hlášku — bez něj by se obsah pod
   formulářem při první chybě posunul dolů. */
.msg {
  font-size: 14.5px;
  margin: 10px 0 0;
  text-align: center;
  min-height: 1.4em;
}

.msg.err { color: var(--danger); }
.msg.ok { color: var(--primary); }

/* Stav po odeslání — nahradí formulář na místě, bez odchodu na jinou stránku. */
.done {
  text-align: center;
  padding: 6px 0 2px;
}

.done h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--title);
  margin: 0 0 8px;
}

.done p {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0;
}

[hidden] { display: none !important; }

/* ── Co Sylvaia umí ───────────────────────────────────────── */

.features { padding: 44px 0 4px; }

.features h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 23px;
  color: var(--title);
  margin: 0 0 22px;
  text-align: center;
  text-wrap: balance;
}

/* Seznam, ne tři sloupce. Při obsahové šířce 720 px by sloupec vyšel na ~220 px,
   tedy zhruba 28 znaků na řádek — text by se lámal do šesti řádků a bloky by
   měly každý jinou výšku. Řádek pod sebou snese různě dlouhé popisy bez zásahu. */
.feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
}

.feature + .feature { border-top: 1px solid var(--border); }

/* Bez karty a bez stínu schválně: bílá karta se stínem je na téhle stránce
   formulář. Kdyby ji měly i tyhle bloky, konkurovaly by mu o pozornost. */
.ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--accent-warm-tint);
  color: var(--accent-warm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ico svg { width: 22px; height: 22px; display: block; }

.feature h3 {
  font-family: var(--font-display);
  font-weight: 400;          /* DM Serif má jen řez 400 */
  font-size: 18px;
  line-height: 1.3;
  color: var(--title);
  margin: 2px 0 3px;
}

.feature p {
  font-size: 14.5px;
  line-height: 1.55;
  /* `--text`, ne `--text-secondary`: tohle je nosný text sekce, ne popisek pod
     nadpisem. Šedá #667069 na papíru dává 4,58:1 — prochází AA jen o vlásek,
     stejně jako patička před opravou. */
  color: var(--text);
  margin: 0;
}

/* ── Galerie ──────────────────────────────────────────────── */

.gallery { padding: 44px 0 8px; }

.gallery h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 23px;
  color: var(--title);
  margin: 0 0 20px;
  text-align: center;
  text-wrap: balance;    /* jinak na mobilu zůstane „zahradě" samo na druhém řádku */
}

.gallery .sub {
  font-size: 14.5px;
  color: var(--text-secondary);
  margin: 0 0 20px;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.shot {
  position: relative;
  aspect-ratio: 1;          /* čtverec unese fotku na výšku i na šířku */
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--sage-100);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder — vidí ho jen ten, kdo stránku staví. Až fotky dorazí,
   nahradí se obsah `.shot` a layout se nehne. */
.shot.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--sage-300);
}

.shot.empty span {
  font-size: 12.5px;
  color: var(--primary);
  opacity: .75;
  text-align: center;
  padding: 0 10px;
}

/* ── Patička ──────────────────────────────────────────────── */

footer {
  padding: 44px 0 40px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-700);
}

footer a { color: var(--ink-700); }

footer .sep { margin: 0 8px; color: var(--ink-400); }

/* ── Desktop ──────────────────────────────────────────────── */

@media (min-width: 768px) {
  .hero { padding: 60px 0 8px; }
  .brand img { width: 96px; height: 96px; }
  .brand-name { font-size: 34px; }
  h1 { font-size: 42px; }
  .lead { font-size: 18px; }

  .signup { padding: 26px 28px; }

  /* Pole a tlačítko vedle sebe — na jeden řádek se to vejde až tady.
     Na mobilu by tlačítko bylo moc úzké na palec. */
  .field-row { flex-direction: row; }
  .field-row input[type="email"] { flex: 1 1 auto; min-width: 0; }
  .field-row button { flex: 0 0 auto; }

  .grid { grid-template-columns: repeat(3, 1fr); }
  .gallery { padding: 56px 0 8px; }

  .features { padding: 56px 0 4px; }
  .feature { gap: 16px; padding: 17px 0; }
  .ico { width: 46px; height: 46px; }
  .ico svg { width: 24px; height: 24px; }
  .feature h3 { font-size: 19px; }
  .feature p { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}