/* ==========================================================================
   Med z Ličartoviec — informačná stránka
   Jeden súbor, žiadne knižnice. Farby sú na jednom mieste v :root nižšie,
   takže sa dajú zmeniť bez hľadania po celom súbore.
   ========================================================================== */

/* --------------------------------- tokeny -------------------------------- */

:root {
  color-scheme: light;

  /* farby — všetky páry textu a pozadia sú overené na kontrast WCAG AA */
  --bg:            #f7edda;   /* pozadie celej stránky */
  --bg-alt:        #f0e1c6;   /* jemné zvýraznenie — pod myšou, podklad fotky */
  --photo-bg:      #fefefe;   /* biela zo štúdiových fotografií skiel */
  --surface:       #ffffff;
  --ink:           #2b2018;
  --muted:         #6b5b49;
  --accent:        #8a5312;   /* odkazy a tlačidlá */
  --accent-strong: #6f4210;   /* hover */
  --amber:         #b5720f;   /* ozdobné linky, ikony, rámček pri klávesnici */
  --border:        #e3d5bc;
  --footer-bg:     #33261a;
  --footer-ink:    #f5ebdc;
  --footer-muted:  #c9b9a4;
  --footer-link:   #c8811b;   /* na tmavej pätičke musí byť jantár svetlejší */
  --btn-ink:       #ffffff;

  --shadow: 0 1px 2px rgb(43 32 24 / 0.05), 0 8px 24px -12px rgb(43 32 24 / 0.18);

  /* písmo */
  --font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* rozostupy — násobky 4px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --radius: 14px;
  --radius-lg: 22px;
  --container: 68rem;
}

/* --------------------------------- základ -------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  /* jemná medová textúra v pozadí */
  background-image:
    radial-gradient(60rem 30rem at 85% -10%, rgb(200 129 27 / 0.10), transparent 60%),
    radial-gradient(45rem 25rem at 0% 5%, rgb(200 129 27 / 0.07), transparent 65%);
  background-repeat: no-repeat;
}

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

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.5vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); }
h3 { font-size: 1.125rem; font-weight: 600; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }

ul, ol { margin: 0; padding: 0; }

:where(a, button):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 48rem) {
  .container { padding-inline: var(--sp-8); }
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--lg { width: 26px; height: 26px; }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: 8px;
  font-weight: 600;
}

.skip-link:focus { top: var(--sp-2); }

/* miesto, ktoré treba doplniť vlastným textom */
.tbd {
  color: var(--muted);
  font-style: italic;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  border-bottom: 1px dashed var(--amber);
  padding-bottom: 1px;
}

/* -------------------------------- hlavička ------------------------------- */

/* Na úzkom displeji sa hlavička nelepí — na dva riadky by zabrala priveľa
   miesta. Od tabletu, kde sa všetko zmestí do jedného riadka, už áno. */
/* position + z-index: rozbalené menu na telefóne visí pod hlavičkou a musí
   prekryť fotografiu úľov pod ňou. Od tabletu vyššie hlavičku prepíše
   `position: sticky` nižšie, čo je v poriadku — menu je tam už rozbalené. */
.site-header {
  position: relative;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

@media (min-width: 48rem) {
  html { scroll-padding-top: 5.5rem; }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(10px);
  }
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-6);
  padding-block: var(--sp-3);
}

.brand {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  line-height: 1.2;
}

.brand__name {
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 600;
}

.brand__sub {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  /* na 375 px sa všetky štyri odkazy vojdú do jedného riadka len takto natesno */
  gap: var(--sp-1) var(--sp-2);
  list-style: none;
  margin-left: calc(-1 * var(--sp-2));
}

@media (min-width: 30rem) {
  .nav__list { gap: var(--sp-1) var(--sp-4); }
}

.nav__list a {
  display: block;
  /* 44px cieľová plocha na dotyk */
  padding: 0.625rem var(--sp-2);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
}

.nav__list a:hover {
  color: var(--accent);
  background: var(--bg-alt);
}

/* Tlačidlo menu. Bez JavaScriptu sa nezobrazí vôbec — nemalo by čo robiť —
   a odkazy potom zostanú vypísané pod hlavičkou tak ako predtým. */
.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;              /* ≥44px na dotyk */
  padding: 0 var(--sp-3);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  /* aby sa pri ťuknutí na telefóne neoznačil nápis „Menu“ ako text */
  user-select: none;
}

.nav__toggle:hover {
  color: var(--accent);
  background: var(--bg-alt);
}

/* Tri čiarky, ktoré sa po rozbalení preklopia na krížik. Prostredná je samotný
   <span>, horná a dolná sú k nemu dokreslené cez ::before a ::after. */
.nav__toggle__lines {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
}

.nav__toggle__lines::before,
.nav__toggle__lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  transition: transform 180ms ease;
}

.nav__toggle__lines::before { top: -6px; }
.nav__toggle__lines::after  { top: 6px; }

.nav__toggle[aria-expanded="true"] .nav__toggle__lines { background: transparent; }

.nav__toggle[aria-expanded="true"] .nav__toggle__lines::before {
  transform: translateY(6px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle__lines::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Táto jedna výnimka je písaná opačne (max-width) ako zvyšok súboru: všetko
   vnútri platí len na telefóne. Od tabletu vyššie tak netreba nič rušiť späť
   a navigácia sa správa presne tak, ako je popísané vyššie. */
@media (max-width: 47.99rem) {
  .js .nav__toggle { display: inline-flex; }

  .js .nav__list { display: none; }

  /* Rozbalené menu je panel cez celú šírku, zavesený pod hlavičkou. */
  .js .nav[data-open] .nav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    padding: var(--sp-2) var(--sp-4) var(--sp-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  .js .nav[data-open] .nav__list a { padding: var(--sp-3) var(--sp-2); }
}

/* ---------------------------------- hero --------------------------------- */

/* Za textom je fotografia úľov. Sama by sa cez ňu text čítal zle, preto cez
   ňu leží závoj vo farbe stránky. Na úzkom displeji je rovnomerný, lebo text
   ide cez celú šírku; dole prechádza do farby stránky, aby fotografia
   nekončila ostrou hranou. */
/* Fotografia je tu dvakrát, v dvoch veľkostiach. Telefón dostane zmenšenú —
   je tretinová a na jeho displeji sa ten rozdiel nedá uvidieť, zato na
   mobilných dátach ho ušetrí. Od tabletu vyššie sa načíta plná, tam už je
   obrazovka dosť veľká na to, aby na zmenšenej bolo vidieť rozmazanie.

   Poradie riadkov je dôležité: prvý `background` je záloha pre prehliadače,
   ktoré nepoznajú image-set, a musí zostať pred ním. */
.hero {
  position: relative;
  padding-block: var(--sp-12) var(--sp-8);
  background: url("../img/hero-pozadie-mobil.jpg") center / cover no-repeat;
  background-image: image-set(url("../img/hero-pozadie-mobil.webp") type("image/webp"),
                              url("../img/hero-pozadie-mobil.jpg") type("image/jpeg"));
}

@media (min-width: 48rem) {
  .hero {
    background-image: url("../img/hero-pozadie.jpg");
    background-image: image-set(url("../img/hero-pozadie.webp") type("image/webp"),
                                url("../img/hero-pozadie.jpg") type("image/jpeg"));
  }
}

/* Závoj je taký redký, aký sa dá: pri 62 % vyjde aj to najtmavšie miesto
   fotografie proti textu na kontrast 5,2 : 1, teda s rezervou nad hranicou
   WCAG AA (4,5 : 1). Redší už nie — pod fotografiou sú medzi úľmi celkom
   čierne tiene a text by sa na nich stratil. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 62%, var(--bg) 100%),
    color-mix(in srgb, var(--bg) 62%, transparent);
}

.hero__inner {
  position: relative;          /* nad závojom */
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .hero { padding-block: var(--sp-16) var(--sp-12); }

  /* Na širokom displeji je text len v ľavom stĺpci — končí v 56 % šírky.
     Dovtedy drží závoj rovnakú hustotu ako na úzkom displeji, za textom sa
     rozplynie a pri pravom okraji už je fotografia úplne odkrytá. */
  .hero::before {
    background:
      linear-gradient(to bottom, transparent 74%, var(--bg) 100%),
      linear-gradient(to right,
        color-mix(in srgb, var(--bg) 66%, transparent) 0%,
        color-mix(in srgb, var(--bg) 62%, transparent) 56%,
        color-mix(in srgb, var(--bg) 12%, transparent) 78%,
        transparent 100%);
  }

  .hero__inner {
    grid-template-columns: 1fr 24rem;
    gap: var(--sp-16);
  }
}

/* Tmavšie ako ostatný vedľajší text — leží na fotografii, a čím tmavší je,
   tým redší môže byť závoj nad ňou a tým lepšie je fotografiu vidieť. */
.lead {
  max-width: 34rem;
  font-size: 1.0625rem;
  color: var(--ink);
}

@media (min-width: 48rem) {
  .lead { font-size: 1.1875rem; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block: var(--sp-6);
}

/* Na telefóne sklo medu v hlavičke nie je. Zaberalo takmer celú obrazovku a
   tlačilo text aj tlačidlá hlboko pod okraj — a hneď pod hlavičkou aj tak
   nasleduje celá mriežka skiel. Od tabletu vyššie, kde je preň miesto vedľa
   textu, sa fotografia vracia. Hranica je tá istá ako pri menu v hlavičke. */
@media (max-width: 47.99rem) {
  .hero__figure { display: none; }
}

.hero__figure {
  margin: 0;
  justify-self: center;
}

.hero__figure img {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;          /* ≥44px */
  padding: 0.6875rem var(--sp-6);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--btn-ink);
  border: 1px solid var(--accent);
}

.btn--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--btn-ink);
}

/* Nepriehľadné, nie priesvitné — tlačidlo leží na fotografii a cez ňu by sa
   jeho nápis čítal zle. */
.btn--ghost {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border);
}

.btn--ghost:hover {
  background: var(--bg-alt);
  border-color: var(--amber);
}

/* ------------------------------- upozornenie ----------------------------- */

.notice {
  display: flex;
  gap: var(--sp-3);
  max-width: 38rem;
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--muted);
}

.notice .icon { margin-top: 0.2rem; color: var(--amber); }
.notice strong { color: var(--ink); }

/* -------------------------------- sekcie --------------------------------- */

.section { padding-block: var(--sp-12); }

@media (min-width: 48rem) {
  .section { padding-block: var(--sp-16); }
}

/* Každá druhá sekcia je biela, aby sa stránka pri rolovaní striedala a
   nebola jeden dlhý medový pás. Biele sú práve tie sekcie, v ktorých nie sú
   kartičky — tie sú samy biele a na bielom podklade by sa stratili. */
.section--alt {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

/* Sekcia, ktorá nadväzuje na tú nad sebou.

   Medzi „Ako kúpiť" a „Cenníkom" nie je ani čiara, ani zmena podkladu — obe
   sú medové. Plná spodná medzera prvej a plná horná medzera druhej sa preto
   zliali do jednej diery cez pol obrazovky. Horná medzera je tu žiadna a
   medzi sekciami zostane len tá spodná z „Ako kúpiť", takže cenník
   nasleduje hneď za tlačidlom, ktoré naň ukazuje.

   Skok na #cennik z menu ani z tlačidla tým netrpí: o to, aby nadpis
   neskončil pod prilepenou hlavičkou, sa stará `scroll-padding-top`
   pri hlavičke vyššie. */
.section--nadvazuje { padding-top: 0; }

.section__title { margin-bottom: var(--sp-4); }

.section__title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: var(--sp-4);
  background: var(--amber);
  border-radius: 2px;
}

.section__intro,
.prose {
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.0625rem;
}

.section__intro { margin-bottom: var(--sp-8); }
.prose { margin-bottom: var(--sp-12); }

.section__note {
  margin-top: var(--sp-8);
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --------------------------------- mriežky ------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-4);
  list-style: none;
}

@media (min-width: 40rem) {
  .grid { gap: var(--sp-6); }
}

/* Dva stĺpce už na bežnom telefóne — inak by bolo jedenásť skiel pod sebou
   veľmi dlhé rolovanie. Na najužších displejoch zostáva jeden stĺpec.

   Dva stĺpce zostávajú aj na širokom displeji a mriežka je rovnako široká ako
   zvyšok stránky, takže kartičky lícujú s nadpisom nad nimi. Kartička je preto
   dosť veľká — pozor na to, že v HTML je pri každej fotografii napísané, akú
   šírku zaberie (`sizes`). Podľa toho si prehliadač vyberá, ktorú veľkosť
   fotografie stiahne; keby tam ostalo staré menšie číslo, stiahol by malú
   fotografiu na veľkú plochu a bola by rozmazaná. */
@media (min-width: 24rem) {
  .grid--products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 40rem) {
  .grid--features { grid-template-columns: repeat(2, 1fr); }
  .grid--faq { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .grid--features { grid-template-columns: repeat(4, 1fr); }
  .grid--faq { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------- kartička medu --------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgb(43 32 24 / 0.06), 0 18px 32px -14px rgb(43 32 24 / 0.28);
}

/* Rámček na fotografiu má pri každej kartičke rovnakú veľkosť, nech je nádoba
   akákoľvek — inak by mriežka bola zubatá. Fotografia stojí v jeho strede. */
.card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--photo-bg);
  border-bottom: 1px solid var(--border);
}

/* Šírka sa nastavuje na <picture>, nie na samotné <img>. Fotografia je totiž
   v HTML zabalená v <picture> (kvôli modernejšiemu formátu webp) a v mriežke
   sa na stred zarovnáva práve tento obal — keby bolo zmenšené len <img> vnútri
   neho, obal by zostal široký a fotografia by v ňom stála pri ľavom okraji. */
.card__media picture {
  display: block;
  width: 100%;
}

.card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Fotografia je v rámčeku taká veľká, aká je nádoba naozaj — aby si nikto
   nepomýlil malé sklo s veľkým. Menšia nádoba znamená menšiu fotografiu,
   okolo nej zostane biele miesto; je to tá istá biela, akú majú fotografie
   za sklami, takže nevidno, kde fotografia končí.

   Čísla sú tretia odmocnina z objemu. Nádoba s takmer štyrikrát menším
   obsahom totiž nie je štyrikrát nižšia — zmenšuje sa do všetkých troch
   strán naraz, takže je nižšia asi o tretinu. Peľ je oveľa redší ako med,
   100 g peľu zaberie skoro toľko miesta ako 270 g medu, a preto majú tie
   dve sklá rovnaké číslo. */
.card--750 .card__media picture { width: 91%; }
.card--270 .card__media picture { width: 65%; }
.card--100 .card__media picture { width: 65%; }

/* Na tinktúru tá istá odmocnina nesadne: nie je to zmenšené sklo, ale úzka
   fľaštička, ktorá je pri svojom malom obsahu prekvapivo vysoká. Podľa
   objemu by jej vyšlo 41 % a na stránke by vyzerala ako náprstok. Číslo je
   preto odmerané na výšku — fľaštička s uzáverom má asi 10,5 cm, veľké sklo
   medu okolo 12,5 cm, z toho je 85 %.

   Ak by tá vaša bola v skutočnosti iná, je to jediné číslo, ktoré treba
   zmeniť: nižšie percento ju na stránke zmenší, vyššie zväčší. */
.card--50 .card__media picture { width: 85%; }

.card__body { padding: var(--sp-4); }

@media (min-width: 48rem) {
  .card__body { padding: var(--sp-6); }
}

.card__title { margin-bottom: var(--sp-2); }

/* Hmotnosť vľavo, dostupnosť vpravo. Na úzkej kartičke sa riadok zlomí a
   „Na sklade" si sadne pod hmotnosť — vedľa seba by sa nezmestili, najmä pri
   darčekovom balení, ktoré má dlhý popis. */
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-3);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Rovnaká jantárová ako hmotnosť vedľa — štítok tak nekričí a kartička
   zostane pokojná. Odlišuje ho už samotný podklad a okrúhly tvar.

   Podklad je medová z pozadia stránky, nie zelená: na nej by jantárový nápis
   pôsobil ako preklep. Nápis na nej má kontrast 4,9 : 1, teda tesne nad
   hranicou WCAG AA (4,5 : 1) — preto ani jednu z tých dvoch farieb
   nezosvetľujte, spadlo by to pod ňu. */
.card__stav {
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--bg-alt);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Keď niečo dôjde, pridajte na kartičke k tomuto štítku ešte túto triedu
   a prepíšte text:
     <span class="card__stav card__stav--dosiel">Dopredané</span>
   Štítok tým zošedivie. Že tovar nie je, sa však návštevník dozvie
   predovšetkým z toho, čo je v štítku napísané — nie z farby. */
.card__stav--dosiel {
  background: var(--bg);
  color: var(--muted);
}

/* Na kartičke je len názov a hmotnosť — popis sme vynechali. */

/* --------------------------------- vlastnosti ---------------------------- */

.feature { color: var(--muted); }

.feature .icon { color: var(--amber); margin-bottom: var(--sp-3); }

.feature h3 {
  margin-bottom: var(--sp-2);
  color: var(--ink);
}

.feature p { font-size: 0.9375rem; }

/* ----------------------------------- kroky ------------------------------- */

.steps {
  display: grid;
  gap: var(--sp-6);
  list-style: none;
  counter-reset: krok;
}

@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.step {
  position: relative;
  padding: var(--sp-6);
  padding-top: var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  counter-increment: krok;
}

.step::before {
  content: counter(krok);
  position: absolute;
  top: calc(-1 * var(--sp-4));
  left: var(--sp-6);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--accent);
  color: var(--btn-ink);
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
}

.step h3 { margin-bottom: var(--sp-2); }

.step p {
  color: var(--muted);
  font-size: 0.9375rem;
}

.steps { margin-top: var(--sp-8); }

/* ------------------------- výzva na vyžiadanie cenníka ------------------- */

/* Tlačidlo a upozornenie vedľa seba. Na telefóne pod sebou — vedľa seba by
   na ne nebolo miesto a z upozornenia by zostal úzky prúžok textu. */
.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

@media (min-width: 52rem) {
  .cta {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-6);
  }

  /* Nápis na tlačidle sa nesmie zlomiť na dva riadky — tlačidlo je v riadku
     to pevné a upozornenie sa prispôsobuje jemu, nie naopak. */
  .cta .btn { flex: none; white-space: nowrap; }
}

/* Hornú medzeru má upozornenie kvôli prípadu, keď stojí samo pod textom.
   Tu je druhé v riadku a medzeru mu robí gap, takže by ho zbytočne
   posúvala nadol. */
.cta .notice { margin-top: 0; }

/* -------------------------------- formulár ------------------------------- */

.form {
  max-width: 40rem;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

@media (min-width: 48rem) {
  .form { padding: var(--sp-8); }
}

/* Dve políčka vedľa seba až vtedy, keď je na ne miesto. Na telefóne pod
   sebou — vedľa seba by boli také úzke, že by sa do nich nedalo pozerať. */
.form__polia {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 34rem) {
  .form__polia { grid-template-columns: repeat(2, 1fr); }
}

.field { margin: 0; }

.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__input {
  width: 100%;
  min-height: 2.875rem;          /* ≥44px, rovnako ako tlačidlá */
  padding: 0.625rem var(--sp-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: inherit;
  /* Presne 1rem, teda 16px. Menšie písmo si iPhone vyloží tak, že je
     políčko nečitateľné, a pri klepnutí do neho stránku priblíži. */
  font-size: 1rem;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.field__input::placeholder { color: var(--muted); opacity: 0.7; }

.field__input:hover { border-color: var(--amber); }

.field__input:focus-visible {
  background: var(--surface);
  border-color: var(--amber);
  outline: 3px solid var(--amber);
  outline-offset: 1px;
}

/* Červený rámček až vtedy, keď je v políčku naozaj niečo zle napísané.
   Kým je prázdne, nesvieti — nikto ešte nič nepokazil. */
.field__input:not(:placeholder-shown):invalid {
  border-color: #a33212;
}

.form__akcia {
  margin-top: var(--sp-6);
  margin-bottom: 0;
}

.form__akcia .btn { width: 100%; }

@media (min-width: 34rem) {
  .form__akcia .btn { width: auto; }
}

.form__akcia .btn[disabled] {
  opacity: 0.65;
  cursor: default;
}

/* Veta, ktorú po odoslaní vypíše JavaScript. Farba sa berie podľa toho, či
   sa cenník odoslal — samotná farba by však bola slabá informácia, preto je
   v nej vždy aj vysvetlenie slovami. */
.form__stav {
  margin-top: var(--sp-4);
  margin-bottom: 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  background: var(--bg);
  font-size: 0.9375rem;
}

.form__stav[data-stav="ok"] {
  border-left-color: #2f7a3f;
  color: #245c30;
}

.form__stav[data-stav="chyba"] {
  border-left-color: #a33212;
  color: #8a2a0f;
}

.form__note {
  margin-top: var(--sp-4);
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Pasca na roboty. Nesmie sa použiť display:none ani visibility:hidden —
   podľa toho robot pozná, že políčko je nastražené, a preskočí ho. Takto je
   políčko normálne vykreslené, len odsunuté mimo obrazovky. */
.form__pasca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------- otázky ------------------------------- */

.faq h3 { margin-bottom: var(--sp-2); }

.faq p {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --------------------------------- kontakt ------------------------------- */

.contact {
  display: grid;
  gap: var(--sp-6);
  list-style: none;
}

@media (min-width: 40rem) {
  .contact { grid-template-columns: repeat(2, 1fr); }
}

.contact__item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.contact__item .icon { color: var(--amber); margin-top: 0.15rem; }

.contact__item h3 {
  margin-bottom: var(--sp-1);
  font-size: 0.8125rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact__value {
  margin-bottom: 0;
  font-size: 1.0625rem;
  font-weight: 500;
}

/* Na telefónne číslo sa v mobile ťuká prstom, tak nech je na čo ťuknúť: riadok
   samotný má na výšku 21 px, čo je málo. Odsadenie ho zväčší na 44 px ako pri
   ostatných tlačidlách. Záporný okraj rovnakej veľkosti potom vráti rozloženie
   tam, kde bolo — kartička teda vyzerá rovnako, len sa lepšie trafí. */
.contact__value a {
  display: inline-block;
  padding-block: 0.6875rem;
  margin-block: -0.6875rem;
}

.contact__note {
  margin-top: var(--sp-2);
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ---------------------------------- pätička ------------------------------ */

.site-footer {
  padding-block: var(--sp-8);
  background: var(--footer-bg);
  color: var(--footer-ink);
  font-size: 0.9375rem;
}

.site-footer__producer { margin-bottom: var(--sp-2); }

.site-footer__note {
  margin-bottom: 0;
  color: var(--footer-muted);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.credit {
  margin: 0;
  color: var(--footer-muted);
}

.credit a {
  color: var(--footer-link);
  font-weight: 500;
}

.credit a:hover { color: var(--footer-ink); }

/* --------------------------- menej pohybu / tlač ------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover { transform: none; }
}

@media print {
  .site-header, .hero__actions, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .card, .step, .contact__item, .notice { break-inside: avoid; }
}