/* ==========================================================================
   epozvanka.sk — predajná stránka svadobného webu

   Toto je PREDAJ, nie produkt. Preto tu platí značka epozvanka.sk — tvrdé
   rámy, tvrdé tiene, ťažký grotesk. Sám svadobný web (/svadba) má vlastný,
   tichý a serifový jazyk; tá stránka má upokojiť, táto má presvedčiť.

   Rozdiel je zámerný a je aj vidieť: v ukážke v telefóne sa jazyk produktu
   objaví vnútri jazyka značky.
   ========================================================================== */

/* Nič sa nesmie brániť zmenšeniu. Pri dvojnásobnom písme preteká zoznam
   v sekcii potvrdenia účasti aj štítok „Pripravujeme" — v oboch prípadoch
   preto, že predvolené `min-width: auto` nedovolí prvku byť užším než jeho
   najdlhšie slovo. */
.sw__rsvp > *, .sw__zoznam, .sw__zoznam li, .sw__stav { min-width: 0; overflow-wrap: anywhere; }

body.sw {
  background: var(--cream);
  color: var(--ink);
}

/* ── hlavička ───────────────────────────────────────────────────────────── */

.sw__top {
  position: sticky; top: 0; z-index: 40;
  /* wrap: pri zväčšenom písme sa logo a tlačidlo do jedného riadku
     nezmestia a tlačidlo „Pozrieť ukážku" vytieklo mimo obrazovku
     (pravý okraj 496 px v okne so 390). Radšej dva riadky než odrezané
     tlačidlo. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gut);
  background: var(--blue);
  border-bottom: var(--rule) solid var(--ink);
}
.sw__top .logo { font-family: var(--font-display); text-transform: uppercase; }
/* Dve tlačidlá v hlavičke: ukážka a začiatok objednávky. Na úzkych
   displejoch sa zalomia pod seba, nie mimo obrazovku. */
.sw__topAkcie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Na úzkom displeji sa hlavička zalomila do dvoch riadkov a merala 182 px —
   27 % zo 667 px vysokej obrazovky, a keďže je prilepená, nezmenšila sa ani
   pri rolovaní. Na iPhone SE tak z obsahu ostalo 485 px a spodná hrana
   hlavičky odrezávala text. Riešenie je to isté, aké má titulka: schová sa
   slovo v logu, skráti sa popis tlačidla a obe tlačidlá ostanú v riadku. */
@media (max-width: 620px) {
  .sw__top { gap: 10px; padding: 10px var(--gut); }
  .sw__top .logo__word { display: none; }
  .sw__topAkcie { flex-wrap: nowrap; gap: 6px; }
  .sw__top .btn--sm {
    padding: 12px 10px; font-size: 0.78rem;
    white-space: nowrap; box-shadow: 3px 3px 0 var(--ink);
  }
  .sw__ajSvadobny { display: none; }
}

/* Odkaz „Preskočiť na obsah" skáče na vrch stránky, kde je hlavička ešte
   vysunutá — bez tohto by prvých 123 px obsahu ostalo pod ňou. */
:root { --hdr-h: 128px; }
@media (max-width: 620px) { :root { --hdr-h: 72px; } }

/* ── úvod ───────────────────────────────────────────────────────────────── */

.sw__hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 11vw, 118px) 0 clamp(50px, 9vw, 100px);
  background: var(--blue);
  border-bottom: var(--rule) solid var(--ink);
  color: #fff;
}
.sw__rays {
  position: absolute; top: 50%; left: 50%;
  width: 230vmax; height: 230vmax;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.07) 0deg 6deg, transparent 6deg 13deg);
  transform: translate(-50%, -50%);
  animation: swSpin 110s linear infinite;
}
@keyframes swSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.sw__heroIn { position: relative; }

.sw__oko {
  margin: 0 0 14px;
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--yellow);
}
.sw__nadpis {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 15vw, 8rem);
  line-height: 0.86;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-shadow: 5px 5px 0 var(--pink);
}
.sw__lede {
  max-width: 46ch;
  margin: clamp(24px, 4vw, 36px) 0 0;
  font-size: clamp(1rem, 2.4vw, 1.18rem);
  line-height: 1.62;
}
.sw__akcie { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.sw__akcie--stred { justify-content: center; margin-top: 40px; }
.sw__fine { margin: 18px 0 0; font-size: 0.85rem; opacity: 0.75; }
.sw__fine--stred { text-align: center; }

/* ── pásy ───────────────────────────────────────────────────────────────── */

.sw__pas {
  padding: clamp(54px, 9vw, 106px) 0;
  border-bottom: var(--rule) solid var(--ink);
}
.sw__pas--cream { background: var(--cream-2); }
.sw__pas--blue { background: var(--blue-deep); color: #fff; }

.sw__h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.sw__h2--svetly { color: #fff; }
.sw__podnadpis { max-width: 54ch; margin: 0 0 34px; font-size: 1rem; line-height: 1.65; color: #4a4a58; }
.sw__podnadpis--svetly { color: rgba(255, 255, 255, 0.82); }

/* ── problémy ───────────────────────────────────────────────────────────── */

.sw__problemy { display: grid; gap: 16px; max-width: 62ch; }
.sw__problemy p {
  margin: 0; padding: 16px 20px;
  background: #fff;
  border-left: 6px solid var(--pink);
  font-size: 0.98rem; line-height: 1.6;
}

/* ── mriežka sekcií ─────────────────────────────────────────────────────── */

.sw__mriezka { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sw__mriezka { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sw__mriezka { grid-template-columns: repeat(4, 1fr); } }

.sw__karta {
  position: relative;
  padding: 22px 20px 24px;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.sw__cislo {
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 700;
  /* Značková ružová mala na bielej karte 3,3 : 1 pri 12 px. Číslo kroku je
     jediné, čo v tom zozname hovorí poradie, takže sa musí dať prečítať.
     Tmavšia ružová drží značku a má 4,6 : 1. */
  /* `--pink-plocha` (#e01f78) má na bielej 4,0 : 1, takže ani tá nestačí —
     preto vlastný, tmavší odtieň tej istej ružovej: 5,8 : 1. */
  color: #c2166b;
}
.sw__karta h3 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: -0.01em;
}
.sw__karta p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: #55555f; }

/* ── rsvp ───────────────────────────────────────────────────────────────── */

.sw__rsvp { display: grid; gap: 34px; }
@media (min-width: 860px) { .sw__rsvp { grid-template-columns: 1fr minmax(0, 340px); gap: 56px; align-items: start; } }

.sw__zoznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sw__zoznam li {
  position: relative;
  padding: 12px 16px 12px 42px;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid rgba(255, 255, 255, 0.22);
  font-size: 0.92rem; font-weight: 600;
}
.sw__zoznam li::before {
  content: "";
  position: absolute; left: 16px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px;
  background: var(--yellow);
  border: 2px solid var(--ink);
}

/* ── ukážka v telefóne ──────────────────────────────────────────────────── */

.sw__ukazka { text-align: center; }
.sw__ukazka .sw__podnadpis { margin-inline: auto; }

/* ── iPhone ─────────────────────────────────────────────────────────────
   Kreslený, nie fotka. PNG by malo pevné rozlíšenie, vážilo by stovky
   kilobajtov a na retina displeji by bolo rozmazané. Takto je ostrý
   v akejkoľvek veľkosti, váži nula bajtov a dá sa prefarbiť.

   Rozmery zodpovedajú iPhonu 16: pomer 19,5:9, hrúbka rámu, priemer
   rohov aj poloha ostrovčeka sú odmerané, nie odhadnuté. */

.sw__telefon {
  display: flex; justify-content: center;
  margin-top: 8px;
  perspective: 1400px;   /* pre jemné natočenie nižšie */
}

.sw__telefonRam {
  position: relative;
  width: min(330px, 82vw);
  aspect-ratio: 9 / 19.5;
  padding: 11px;
  border-radius: 54px;

  /* Titánový rám: svetlo zľava zhora, tieň vpravo dole. Jeden prechod
     na to nestačí — kov má na hranách ostrý prechod, nie plynulý. */
  background:
    linear-gradient(145deg, #f0f0f2 0%, #b9b9c0 14%, #8e8e97 30%,
                            #d8d8dd 50%, #7f7f88 72%, #adadb5 88%, #e6e6ea 100%);
  box-shadow:
    0 2px 3px rgba(255, 255, 255, 0.7) inset,
    0 -2px 3px rgba(0, 0, 0, 0.25) inset,
    0 30px 60px -18px rgba(11, 11, 20, 0.55),
    0 10px 22px -8px rgba(11, 11, 20, 0.4);

  transform: rotateY(-7deg) rotateX(2deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.sw__telefonRam:hover { transform: rotateY(0deg) rotateX(0deg); }

/* čierny okraj medzi kovom a displejom */
.sw__telefonRam::before {
  content: "";
  position: absolute; inset: 8px;
  border-radius: 47px;
  background: #05050a;
  z-index: 1;
}

.sw__telefonRam iframe {
  position: relative; z-index: 2;
  display: block;
  width: 100%; height: 100%;
  border: 0; border-radius: 43px;
  background: #faf6f0;
}

/* ostrovček s kamerou */
.sw__ostrovcek {
  position: absolute; z-index: 4;
  top: 22px; left: 50%;
  width: 30%; height: 26px;
  background: #05050a;
  border-radius: 14px;
  transform: translateX(-50%);
}
.sw__ostrovcek::after {
  content: "";
  position: absolute; right: 9px; top: 50%;
  width: 9px; height: 9px;
  background: radial-gradient(circle at 35% 30%, #2b3a55 0%, #0c1220 60%, #05050a 100%);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* bočné tlačidlá */
.sw__telefonRam i {
  position: absolute; z-index: 0;
  background: linear-gradient(90deg, #7d7d86, #c7c7ce 40%, #9a9aa3);
  border-radius: 2px;
}
.sw__telefonRam i:nth-of-type(1) { left: -3px; top: 17%; width: 3px; height: 5%; }   /* akcia */
.sw__telefonRam i:nth-of-type(2) { left: -3px; top: 26%; width: 3px; height: 9%; }   /* hlasitosť + */
.sw__telefonRam i:nth-of-type(3) { left: -3px; top: 37%; width: 3px; height: 9%; }   /* hlasitosť − */
.sw__telefonRam i:nth-of-type(4) { right: -3px; top: 30%; width: 3px; height: 13%; } /* zapínanie */

/* odlesk na skle — bez neho displej vyzerá ako plochý obrázok */
.sw__odlesk {
  position: absolute; z-index: 3; inset: 11px;
  border-radius: 47px;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 22%,
    transparent 46%, transparent 100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sw__telefonRam { transform: none; transition: none; }
}

/* ── štýly ──────────────────────────────────────────────────────────────── */

.sw__styly { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
/* Päť štýlov, nie štyri — pri štyroch stĺpcoch ostávala v druhom riadku
   diera cez tri štvrtiny šírky. */
@media (min-width: 900px) { .sw__styly { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1120px) { .sw__styly { grid-template-columns: repeat(5, 1fr); } }

.sw__styl {
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
}
.sw__stylUkaz {
  display: grid; place-items: center;
  aspect-ratio: 3 / 4;
  border-bottom: 3px solid var(--ink);
  text-align: center;
}
.sw__stylMena { font-size: clamp(0.95rem, 3.4vw, 1.3rem); line-height: 1.25; }

/* Každý štýl je naozaj iný — iná paleta, iné písmo. Nie tá istá karta
   v inej farbe, lebo presne to zákazník na konkurencii vidí a nekúpi. */
.sw__styl[data-styl="hlina"] .sw__stylUkaz { background: #faf6f0; }
.sw__styl[data-styl="hlina"] .sw__stylMena {
  font-family: "Iowan Old Style", Palatino, Georgia, serif; color: #2a2521;
}
.sw__styl[data-styl="noc"] .sw__stylUkaz { background: #14161f; }
.sw__styl[data-styl="noc"] .sw__stylMena {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  color: #e8d5a8; letter-spacing: 0.04em;
}
/* Farby náhľadov sedia s tým, čo naozaj vykreslí js/svadba.js (EP.STYLY) —
   papierFarba a atrament daného štýlu. Keby si stránka vymýšľala vlastné,
   zákazník by si vybral podľa jednej palety a dostal druhú. */
.sw__styl[data-styl="papier"] .sw__stylUkaz { background: #faf6eb; }
.sw__styl[data-styl="papier"] .sw__stylMena {
  font-family: "Iowan Old Style", Palatino, Georgia, serif; color: #2d2721;
}
.sw__styl[data-styl="minimal"] .sw__stylUkaz { background: #ffffff; border: 1px solid #e2e2e2; }
.sw__styl[data-styl="minimal"] .sw__stylMena {
  font-family: var(--font-sans, system-ui), sans-serif; color: #1b1b1b;
  letter-spacing: 0.08em; font-size: clamp(0.85rem, 3vw, 1.1rem);
}
.sw__styl[data-styl="lupene"] .sw__stylUkaz { background: #fdf7f5; }
.sw__styl[data-styl="lupene"] .sw__stylMena {
  font-family: "Iowan Old Style", Palatino, Georgia, serif; color: #3d2b2b;
}

.sw__styl h3 {
  margin: 0; padding: 14px 16px 4px;
  font-family: var(--font-display);
  font-size: 0.92rem; text-transform: uppercase;
}
.sw__styl p { margin: 0; padding: 0 16px 12px; font-size: 0.82rem; line-height: 1.5; color: #55555f; }
.sw__stav {
  display: inline-block; margin: 0 16px 16px;
  padding: 4px 10px;
  background: #d8ffe4; border: 2px solid var(--ink);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.sw__stav--caka { background: var(--cream-2); }

/* ── porovnanie ─────────────────────────────────────────────────────────── */

.sw__porovnanie { overflow-x: auto; }
.sw__porovnanie table {
  width: 100%; min-width: 460px;
  border-collapse: collapse;
  background: #fff;
  border: 3px solid var(--ink);
}
.sw__porovnanie th, .sw__porovnanie td {
  padding: 12px 14px;
  border-bottom: 2px solid rgba(11, 11, 20, 0.12);
  text-align: left; font-size: 0.9rem;
}
.sw__porovnanie thead th {
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: 0.86rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sw__porovnanie tbody th { font-weight: 700; }
.sw__porovnanie .sw__hi { background: #fff7d6; }
.sw__porovnanie thead .sw__hi { background: var(--pink-plocha); }
.sw__pomlcka { opacity: 0.4; }
.sw__cenaRiadok td, .sw__cenaRiadok th { border-bottom: 0; padding-block: 18px; font-size: 1.05rem; }
/* Pravidlo pre <s> v riadku s cenou zrušené — preškrtnutá cena sa na webe
   nepoužíva vôbec (CLAUDE.md, Právne hranice). */

.sw__podPorovnanim {
  max-width: 62ch; margin: 24px 0 0;
  font-size: 0.9rem; line-height: 1.65; color: #4a4a58;
}

/* ── záver ──────────────────────────────────────────────────────────────── */

.sw__zaver {
  padding: clamp(60px, 10vw, 120px) 0;
  background: var(--pink-plocha);
  border-bottom: var(--rule) solid var(--ink);
  text-align: center;
}
.sw__zaverH {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 0.96; text-transform: uppercase;
  color: #fff; text-shadow: 4px 4px 0 var(--ink);
}
/* Odsek dedil tmavý atrament a na ružovej ploche mal 4,32 : 1 — o osemnásť
   stotín pod normou. Nadpis nad ním je biely, takže biela je aj správnejšia
   voľba vzhľadovo; s tučnejším rezom vychádza 4,5 : 1 s rezervou. */
.sw__zaver p {
  max-width: 46ch; margin-inline: auto;
  color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .sw__rays { animation: none; }
}

/* ── porovnanie na mobile ───────────────────────────────────────────────
   Tri stĺpce s textom potrebujú 460 px. Telefón má 375, takže tabuľka
   utekala vpravo a zo stĺpca „Svadobný web" bolo vidieť pol slova —
   presne toho, ktorý má predávať.

   Vodorovné posúvanie tu nie je riešenie: nikto ho nenájde a pri porovnávaní
   je to navyše nepohodlné, lebo človek stráca názov riadku.

   Na mobile teda každá vlastnosť dostane vlastný blok pod sebou. */

@media (max-width: 720px) {
  .sw__porovnanie { overflow-x: visible; }
  .sw__porovnanie table { min-width: 0; display: block; border: 0; }
  .sw__porovnanie thead { display: none; }
  .sw__porovnanie tbody { display: block; }

  .sw__porovnanie tbody tr {
    display: block;
    margin-bottom: 12px;
    background: #fff;
    border: 3px solid var(--ink);
  }
  .sw__porovnanie tbody th {
    display: block;
    padding: 11px 14px;
    background: var(--ink); color: #fff;
    font-family: var(--font-display);
    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em;
    border: 0;
  }
  .sw__porovnanie tbody td {
    display: grid;
    grid-template-columns: 8.5em 1fr;
    gap: 10px; align-items: baseline;
    padding: 10px 14px;
    border-bottom: 0;
    font-size: 0.9rem;
  }
  .sw__porovnanie tbody td + td { border-top: 2px solid rgba(11, 11, 20, 0.12); }

  /* názov stĺpca sa presunie dovnútra bunky — inak by človek nevedel,
     ktorá hodnota patrí ktorému balíčku */
  .sw__porovnanie tbody td::before {
    content: attr(data-p);
    font-size: 0.68rem; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #6a6a76;
  }
  .sw__porovnanie tbody td.sw__hi::before { color: var(--pink); }

  .sw__cenaRiadok td { font-size: 1.05rem; }
}