/* ==========================================================================
   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 */
  --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. */
.site-header {
  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);
}

/* ---------------------------------- 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. */
.hero {
  position: relative;
  padding-block: var(--sp-12) var(--sp-8);
  background: url("../img/hero-pozadie.jpg") center / cover no-repeat;
  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);
}

/* Fotografia sa strieda. Všetky sa kreslia do tej istej bunky mriežky, takže
   ležia presne na sebe, rozloženie sa nikam neposunie a dá sa medzi nimi
   plynulo preblínať. Bez JavaScriptu je v stránke len prvá z nich. */
.hero__figure {
  display: grid;
  margin: 0;
  justify-self: center;
}

.hero__figure > picture {
  grid-area: 1 / 1;
  transition: opacity 900ms ease;
}

.hero__figure > picture[aria-hidden="true"] { opacity: 0; }

.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);
}

.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 deväť skiel pod sebou
   veľmi dlhé rolovanie. Na najužších displejoch zostáva jeden stĺpec. */
@media (min-width: 24rem) {
  .grid--products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48rem) {
  /* desať kartičiek: tri plné riadky a v poslednom jedna samotná */
  .grid--products { grid-template-columns: repeat(3, 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);
}

.card__media {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

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

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

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

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

.card__meta {
  margin-bottom: var(--sp-3);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 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); }

/* ---------------------------------- 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;
}

.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; }
}