/* ===========================================================
   PRONA · jeden soubor se styly pro celý web.
   Hodnoty (barvy, písmo, rozestupy) bydlí jen tady nahoře v :root.
   Nezakládej další soubor se styly, chybí prvek? Přidej ho sem.
   Barvy jsou provizorní a vycházejí z nového loga (modrá z cedule).
   =========================================================== */

:root {
  /* --- Barvy --- */
  --modra: #2762be;            /* modrá z loga */
  --modra-tmava: #16386f;      /* nadpisy, patička */
  --modra-svetla: #eaf1fb;     /* jemné pozadí sekcí */
  --pozadi: #ffffff;
  --text: #1f2937;
  --text-tlumeny: #4b5563;
  --oddelovac: #d9e2f1;
  --debbex-cervena: #d8232a;   /* pozadí dlaždice s bílým logem Debbex */

  /* --- Písmo --- */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --text-zaklad: 18px;
  --radek: 1.6;

  /* --- Rozestupy --- */
  --mezera-1: 4px;  --mezera-2: 8px;  --mezera-3: 16px; --mezera-4: 24px;
  --mezera-5: 32px; --mezera-6: 48px; --mezera-7: 64px; --mezera-8: 96px;

  /* --- Tvar --- */
  --zaobleni: 14px;
  --stin: 0 2px 16px rgba(22, 56, 111, 0.08);

  /* --- Šířky --- */
  --sirka-obsah: 1140px;
  --sirka-text: 700px;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-zaklad);
  line-height: var(--radek);
  color: var(--text);
  background: var(--pozadi);
}

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

a { color: var(--modra); }
a:hover { color: var(--modra-tmava); }
a:focus-visible { outline: 3px solid var(--modra); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { line-height: 1.2; color: var(--modra-tmava); margin: 0; }

.obal {
  width: 100%;
  max-width: var(--sirka-obsah);
  margin: 0 auto;
  padding: 0 var(--mezera-4);
}

section { padding: var(--mezera-7) 0; }

.nadpis-sekce {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin-bottom: var(--mezera-5);
  text-align: center;
}

/* ---------- Hlavička: logo a název ---------- */
.hlavicka {
  text-align: center;
  padding: var(--mezera-6) 0 var(--mezera-5);
  border-bottom: 4px solid var(--modra);
}
.hlavicka h1 { margin: 0 auto; max-width: 480px; }
.hlavicka h1 img { width: 100%; }
.hlavicka .mista { margin: var(--mezera-3) 0 0; color: var(--text-tlumeny); }

/* ---------- Skupiny zboží ---------- */
.zbozi { background: var(--modra-svetla); }
.zbozi ul {
  list-style: none;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--mezera-3);
}
.zbozi li {
  background: var(--pozadi);
  color: var(--modra-tmava);
  font-weight: 600;
  font-size: 1.15rem;
  padding: var(--mezera-3) var(--mezera-4);
  border-radius: 999px;
  box-shadow: var(--stin);
  text-transform: lowercase;
}

/* ---------- Prodejny ---------- */
.prodejny-mrizka {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mezera-5);
}
.prodejna {
  border: 1px solid var(--oddelovac);
  border-radius: var(--zaobleni);
  overflow: hidden;
  background: var(--pozadi);
  box-shadow: var(--stin);
  display: flex;
  flex-direction: column;
}
.prodejna .fotky {
  display: grid;
  gap: 2px;
  background: var(--oddelovac);
}
.prodejna .fotky.dve { grid-template-columns: 1fr 1fr; }
.prodejna .fotky { height: 300px; }
.prodejna .fotky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prodejna .fotky.dve img:first-child { object-position: 15% center; }
/* Jedna fotka (Frenštát): celá vidět, okraje vyplní rozmazaná kopie */
.prodejna .fotky.jedna { position: relative; overflow: hidden; background: var(--modra-svetla); }
.prodejna .fotky.jedna img.pozadi { position: absolute; inset: 0; opacity: .75; filter: blur(16px); transform: scale(1.15); }
.prodejna .fotky.jedna img.hlavni { position: relative; object-fit: contain; }
.prodejna-text { padding: var(--mezera-4); }
.prodejna h3 { font-size: 1.4rem; margin-bottom: var(--mezera-1); }
.prodejna .adresa { margin: 0 0 var(--mezera-3); color: var(--text-tlumeny); }
.prodejna dl { margin: 0 0 var(--mezera-3); display: grid; grid-template-columns: max-content 1fr; gap: var(--mezera-1) var(--mezera-3); }
.prodejna dt { font-weight: 600; color: var(--modra-tmava); }
.odsazeni { display: none; }
@media (min-width: 760px) { .odsazeni { display: block; height: 1.6em; } } /* prázdný řádek místo soboty, ať mapy sedí ve stejné výšce */
.prodejna dd { margin: 0; }
.prodejna .mapa { display: block; width: 240px; max-width: 100%; text-decoration: none; font-size: 0.8rem; color: var(--text-tlumeny); }
.prodejna .mapa img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--oddelovac); }
.prodejna .mapa span { display: block; margin-top: var(--mezera-1); }
.prodejna .mapa:hover img, .prodejna .mapa:focus-visible img { border-color: var(--modra); box-shadow: var(--stin); }

/* ---------- Výrobci ---------- */
.vyrobci { background: var(--pozadi); border-top: 1px solid var(--oddelovac); }
.skupina + .skupina { margin-top: var(--mezera-6); }
.skupina h3 {
  font-size: 1.25rem;
  margin-bottom: var(--mezera-3);
  padding-bottom: var(--mezera-2);
  border-bottom: 2px solid var(--modra-svetla);
}
.znacky {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--mezera-3);
}
.znacka {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: var(--mezera-2) var(--mezera-3);
  background: var(--pozadi);
  border: 1px solid var(--oddelovac);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
a.znacka:hover, a.znacka:focus-visible { border-color: var(--modra); box-shadow: var(--stin); }
.znacka img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.znacka.debbex { background: var(--debbex-cervena); border-color: var(--debbex-cervena); }
.znacka .textove-logo { font-weight: 800; letter-spacing: .06em; color: var(--modra-tmava); font-size: 1.1rem; }

/* ---------- Patička ---------- */
.paticka {
  background: var(--modra-tmava);
  color: #dbe6f7;
  padding: var(--mezera-6) 0;
  font-size: 1rem;
}
.paticka a { color: #ffffff; }
.paticka-mrizka { display: grid; grid-template-columns: 1fr; gap: var(--mezera-5); }
.paticka h2 { color: #ffffff; font-size: 1.1rem; margin-bottom: var(--mezera-2); }
.paticka p { margin: 0 0 var(--mezera-2); }

.paticka-odkazy { margin: var(--mezera-5) 0 0; padding-top: var(--mezera-3); border-top: 1px solid rgba(255,255,255,.2); }

/* ---------- Textové stránky (ADR, ochrana údajů) ---------- */
.clanek { max-width: var(--sirka-text); margin: 0 auto; padding: var(--mezera-6) var(--mezera-4) var(--mezera-7); }
.clanek h1 { font-size: clamp(1.7rem, 4vw, 2.2rem); margin-bottom: var(--mezera-4); }
.clanek h2 { font-size: 1.3rem; margin: var(--mezera-5) 0 var(--mezera-2); }
.clanek p, .clanek li { margin: 0 0 var(--mezera-3); }
.clanek ul { padding-left: 1.2em; }
.clanek .datum { color: var(--text-tlumeny); font-size: 1rem; }
.hlavicka.mala { padding: var(--mezera-4) 0; }
.hlavicka.mala a { display: inline-block; width: 220px; max-width: 60%; }

/* ---------- Stránka 404 ---------- */
.stranka-404 { text-align: center; padding: var(--mezera-8) var(--mezera-4); }
.stranka-404 h1 { margin: var(--mezera-5) 0 var(--mezera-3); }
.stranka-404 img { width: 100%; max-width: 320px; margin: 0 auto; }

/* ---------- Širší obrazovky ---------- */
@media (min-width: 760px) {
  .prodejny-mrizka { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .paticka-mrizka { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- Úzké obrazovky ---------- */
@media (max-width: 520px) {
  section { padding: var(--mezera-6) 0; }
  .obal { padding: 0 var(--mezera-3); }
  .zbozi li { font-size: 1.05rem; padding: var(--mezera-2) var(--mezera-3); }
  .znacky { grid-template-columns: repeat(2, 1fr); }
  .prodejna .fotky { height: auto; }
  .prodejna .fotky img { height: 200px; }
  .prodejna .fotky.dve { grid-template-columns: 1fr; }
  .prodejna dl { grid-template-columns: 1fr; gap: 0; }
  .prodejna dt { margin-top: var(--mezera-2); }
}