/* Stránka jedné řady grilů. Doplněk k zbozi-weber.css — proměnné, hlavička,
   patička, karty i mřížka se berou odtamtud, tady je jen to, co má navíc.

   Vlastní soubor schválně: do zbozi-weber.css píše druhé sezení a dva
   psanci v jednom souboru si práci přepíšou. */

/* ------------------------------------------------------------- úvodní pás */

.drobecky {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 22px; font-size: 13px;
}
.drobecky a { color: #666; text-decoration: none; }
.drobecky a:hover { color: var(--red, #c8102e); text-decoration: underline; }
.drobecky > *:not(:last-child)::after { content: "›"; margin-left: 8px; color: #bbb; }
.drobecky span { color: #111; font-weight: 700; }

.rada-uvod { padding: 26px 0 54px; background: #e5e5e5; }
.rada-uvod-vnitrek {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px; align-items: center; transform: translateY(-16px);
}
.rada-kicker {
  margin: 0 0 10px; color: var(--red, #c8102e);
  font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
}
.rada-uvod h1 { margin: 0; font-size: 54px; line-height: 1.04; letter-spacing: -.02em; }
.rada-perex { margin: 16px 0 0; max-width: 46ch; color: #444; font-size: 16.5px; line-height: 1.65; }

/* Tři čísla pod perexem: kolik modelů, od jaké ceny, kolik skladem. */
.rada-cisla { display: flex; flex-wrap: wrap; gap: 34px; margin: 26px 0 30px; }
.rada-cisla b { display: block; font-size: 26px; line-height: 1.1; }
.rada-cisla span { color: #666; font-size: 13px; }

.rada-tlacitka { display: flex; flex-wrap: wrap; gap: 12px; }
.rada-hlavni-tlacitko,
.rada-vedlejsi-tlacitko {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px;
  font-size: 13px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px;
}
.rada-hlavni-tlacitko { background: var(--red, #c8102e); color: #fff; }
.rada-hlavni-tlacitko:hover { background: #a80d26; }
.rada-vedlejsi-tlacitko { border: 1px solid #ccc; color: #111; }
.rada-vedlejsi-tlacitko:hover { border-color: #111; }

/* Fotka drží poměr stran a nepřeteče — u vysokých snímků se procenta
   v mřížce nepočítají, dokud řádek nemá pevnou výšku. */
.rada-uvod-obraz {
  display: grid; grid-template-rows: minmax(0, 1fr); place-items: center;
  height: 430px; padding: 8px; overflow: hidden; background: #e5e5e5;
}
.rada-uvod-obraz img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform: scale(1.22); transform-origin: center; }

/* ----------------------------------------------------------------- kotvy */

.rada-kotvy { border-top: 1px solid #e6e2de; border-bottom: 1px solid #e6e2de; background: #fff; }
.rada-kotvy .obal { display: flex; flex-wrap: wrap; gap: 34px; padding-block: 18px; }
.rada-kotvy a {
  color: #111; font-size: 14.5px; text-decoration: none;
  border-bottom: 2px solid var(--red, #c8102e); padding-bottom: 3px;
}
.rada-kotvy a:hover { color: var(--red, #c8102e); }

/* ------------------------------------------------------------- přednosti */

.rada-prednosti { padding: 66px 0; background: #e5e5e5; }
.rada-prednosti h2,
.rada-modely h2,
.rada-parametry h2 { margin: 0 0 8px; font-size: 28px; text-transform: uppercase; }
.rada-prednosti h2 { margin-bottom: 30px; text-align: center; }
.rada-prednosti-mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.rada-prednosti article { padding: 26px; background: #fff; }
.rada-prednosti h3 { margin: 0 0 10px; font-size: 17px; }
.rada-prednosti p { margin: 0; color: #555; font-size: 14.5px; line-height: 1.65; }

/* --------------------------------------------------------------- modely */

.rada-modely { padding: 66px 0; }
.rada-modely-hlava { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; }
.rada-jen-skladem { display: inline-flex; align-items: center; gap: 9px; margin: 16px 0 26px; color: #555; font-size: 14px; }
.rada-jen-skladem input { width: 18px; height: 18px; }
.rada-prazdno { padding: 30px 0; color: #666; }

/* -------------------------------------------------------------- parametry */

.rada-parametry { padding: 0 0 70px; }
.rada-podnadpis { margin: 0 0 22px; color: #666; font-size: 13.5px; }
/* Tabulka se posouvá uvnitř sebe — u šesti modelů by jinak roztáhla
   celou stránku do šířky a na mobilu by se z ní nedalo nic přečíst. */
.rada-tabulka-obal { overflow-x: auto; border: 1px solid #e6e2de; }
.rada-tabulka { width: 100%; border-collapse: collapse; font-size: 14px; }
.rada-tabulka th,
.rada-tabulka td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #eee; vertical-align: top; }
.rada-tabulka thead th { background: var(--warm, #f5f2ef); font-size: 13px; white-space: nowrap; }
.rada-tabulka tbody th { color: #666; font-weight: 400; white-space: nowrap; }
.rada-tabulka tbody tr:nth-child(odd) td { background: #fafaf8; }

/* -------------------------------------------------------------- poradíme */

.rada-poradime { padding: 60px 0; background: #111; color: #fff; }
.rada-poradime-vnitrek { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.rada-poradime h2 { margin: 0 0 12px; font-size: 28px; text-transform: uppercase; }
.rada-poradime p { margin: 0; color: #c9c9c9; font-size: 15.5px; line-height: 1.65; }
.rada-poradime-kontakt { text-align: right; }
.rada-poradime-kontakt .rada-hlavni-tlacitko { font-size: 18px; letter-spacing: .02em; }
.rada-poradime-kontakt p { margin-top: 12px; font-size: 13px; }

@media (max-width: 900px) {
  .rada-uvod-vnitrek,
  .rada-poradime-vnitrek { grid-template-columns: 1fr; gap: 28px; }
  .rada-uvod-vnitrek { transform: translateY(-8px); }
  .rada-uvod h1 { font-size: 38px; }
  .rada-uvod-obraz { height: 320px; padding: 4px; }
  .rada-uvod-obraz img { transform: scale(1.15); }
  .rada-poradime-kontakt { text-align: left; }
  .rada-kotvy .obal { gap: 20px; overflow-x: auto; }
  .rada-kotvy a { white-space: nowrap; }
}

/* --------------------------------------------- karty modelů na této stránce

   Karty se berou z katalogu, ale ten je má v mřížce s postranním panelem
   (`grid-area: grid`) a jako `article`. Tady jsou to odkazy a mřížka je
   přes celou šířku, takže se obojí musí srovnat — jinak se karty
   překrývají a text svítí modře a podtrženě jako odkaz. */

.rada-modely .mrizka {
  grid-area: auto;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 40px 22px;
}
.rada-modely .karta { display: block; color: inherit; text-decoration: none; }
.rada-modely .karta * { color: inherit; text-decoration: none; }
.rada-modely .karta:hover .obrazek { border-color: #999; }
.rada-modely .karta:focus-visible { outline: 3px solid var(--red, #c8102e); outline-offset: 3px; }

/* Řádek mřížky se bez tohohle roztáhne podle fotky a strop v procentech
   se nemá o co opřít — vysoké snímky pak vylezou přes název i cenu. */
.rada-modely .obrazek { grid-template-rows: minmax(0, 1fr); }
.rada-modely .obrazek img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
}
.rada-modely .karta h3 { margin: 8px 0 0; font-size: 16px; line-height: 1.3; }
.rada-modely .karta .cislo { margin: 6px 0; color: #888; font-size: 12px; }
.rada-modely .karta .dostupnost { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; }
.rada-modely .karta .skladem { color: #1f7a3d; }
.rada-modely .karta .skladem-malo { color: #b06a00; }
.rada-modely .karta .na-objednavku { color: #777; }
.rada-modely .karta .vyprodano { color: #a32b18; }
.rada-modely .karta .cena-radek { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid #eee; }
.rada-modely .karta .castka { margin: 0; font-size: 21px; font-weight: 800; }
.rada-modely .karta .dph { margin: 2px 0 0; color: #888; font-size: 11.5px; }
.rada-modely .karta .detail-sipka { color: var(--red, #c8102e); font-size: 18px; }

/* Štítek s kategorií se tu schválně negeneruje: „Dům a zahrada |
   Zahrada | Zahradní grily" na stránce jedné řady nic neříká a u dvou
   modelů byl tak dlouhý, že rozhodil výšku celého řádku karet.

   Karty stejně vysoké a cena vždycky dole, aby se řádek dal přečíst
   po očích a ne po skocích. */
.rada-modely .karta { display: flex; flex-direction: column; height: 100%; }
.rada-modely .karta .telo { display: flex; flex-direction: column; flex: 1; }
.rada-modely .karta .cena-radek { margin-top: auto; }

/* Na mobilu dvě karty vedle sebe. Jedna přes celou šířku by z pěti
   modelů udělala pět obrazovek scrollování — vedle sebe jsou vidět dva
   a dají se srovnat cenou. */
@media (max-width: 620px) {
  .rada-modely .mrizka { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .rada-modely .obrazek { height: 150px; padding: 8px; }
  .rada-modely .karta h3 { font-size: 14px; }
  .rada-modely .karta .cislo { font-size: 11px; }
  .rada-modely .karta .castka { font-size: 17px; }
  .rada-modely .karta .dph { font-size: 10.5px; }
  .rada-modely .karta .detail-sipka { display: none; }
}

/* Video řady se žlutou špičkou. Roman 10. 9. 2026: „ten žlutý pruh dej pod
   video Spirita" a „šipka musí být ve videu" — pruh proto stojí pod videem
   a špička míří nahoru, takže leží přes spodní okraj snímku. Stejná stavba
   jako pruh nad videem na titulce, jen obráceně. */
/* Pruh sedí těsně pod videem, aby žlutá špička ležela přes jeho spodní okraj
   — Roman 10. 9. 2026: „šipka musí být ve videu." Úvodní sekce má dole 54 px
   odsazení a vnitřek je posunutý o 16 px nahoru; obojí se odečte. */
.rada-film{margin:-70px 0 34px}
.rada-film[hidden]{display:none}
/* Video na místě úvodní fotky — vyplní rám stejně, jako ho vyplňoval snímek. */
.rada-uvod-obraz.rada-uvod-video{padding:0;overflow:hidden}
.rada-uvod-obraz.rada-uvod-video video{display:block;width:100%;height:100%;object-fit:cover;background:#000;border-radius:inherit}
/* Žlutý jako šipka nad ním — Roman 10. 9. 2026: „bílý pruh musí být žlutý." */
.rada-film-pruh{position:relative;padding:26px 0 20px;background:#ffd200;color:#111;text-align:center}
.rada-film-pruh:before{content:"";position:absolute;left:50%;top:-26px;width:84px;height:26px;transform:translateX(-50%);background:#ffd200;clip-path:polygon(50% 0,100% 100%,0 100%);z-index:1}
.rada-film-pruh .sekce-kicker{margin:0 0 4px;color:var(--red,#e4002b);opacity:1;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.rada-film-pruh h2{margin:0;color:#111;font-size:clamp(23px,2.9vw,38px);text-transform:uppercase;letter-spacing:-.01em}
.rada-film-popis{max-width:640px;margin:6px auto 0;color:#3a3a3e;font-size:14px;line-height:1.45}
@media(max-width:760px){.rada-film{margin-bottom:24px}.rada-film-pruh{padding:14px 0 16px}}