@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

/* ============================================================
   PŘÍBĚHY ZNAČEK (Brand Stories) — rozcestník brand pages
   Scope: .bs-brand — nikdy nesahá na globální styly e-shopu.
   Inspirace: nativní dlaždice /cz/znacky (ikona 160-170 px + název).

   DEPLOY: samostatný soubor přes FTP → /shop-data/campaign/brand-stories.css
   (custom_style meta + cache-buster ?N; CSS se NIKDY nenasazuje přes API).
   Cílová kategorie: K00069 /cz/pribehy-znacek (typ site).
   ============================================================ */
.bs-brand {
  --bs-ink: #1a1a1e;
  --bs-ink-soft: #5a5a62;
  --bs-line: #e6e6ea;
  --bs-paper: #ffffff;
  --bs-soft: #f6f6f8;
  --bs-accent: #d81e28;
  --bs-font: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  color: var(--bs-ink); font-family: var(--bs-font); line-height: 1.6;
}
.bs-brand :where(*, *::before, *::after) { box-sizing: border-box; }
.bs-brand :where(img) { max-width: 100%; display: block; }
/* Kontejner kopíruje obsahový blok šablony — žádný vlastní strop ani vnitřní
   odsazení. S `max-width` + `padding-inline` byla mřížka o 32 px užší než zbytek
   stránky a nelícovala s H1 (naměřeno na New Wave 2026-09-17: H1 32–1393,
   mřížka 64–1361). Odsazení od krajů už řeší `.container` šablony, naše se s ním
   jen sčítalo. Nahlásil vývojář New Wave. */
.bs-container { width: 100%; }

/* ---------- intro ---------- */
.bs-intro { padding: clamp(8px, 1.5vw, 20px) 0 clamp(20px, 3vw, 34px); text-align: center; }
.bs-brand .bs-intro__lead { margin: 0 auto; max-width: 62ch; color: var(--bs-ink-soft); font-size: clamp(15px, 1.6vw, 18px); }

/* ---------- mřížka značek ---------- */
/* Zvláštní širší kontejner pro tuhle sekci (dřív 1376 px) už není potřeba —
   šířku určuje obsahový blok šablony, který je na každém e-shopu jiný. */
.bs-grid {
  display: grid;
  grid-auto-rows: 1fr;   /* všechny karty v řadě stejně vysoké */
  /* Počet dlaždic v řadě podle pravidla pro produktové mřížky (2026-09-24), stejné
     zlomy jako šablona Upgates: výchozí 2, lg ≥ 992 px 3, xl ≥ 1204 px 4,
     xxl ≥ 1502 px 5. Dřív pevně 7 (2026-08-25) s postupným ubíráním. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding-bottom: clamp(24px, 4vw, 48px);
  list-style: none; margin: 0;
}
@media (min-width:  992px) { .bs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1204px) { .bs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1502px) { .bs-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bs-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--bs-paper);            /* ikony značek VŽDY na bílé */
  border: 1px solid var(--bs-line); border-radius: 12px;
  padding: clamp(14px, 1.6vw, 20px) 12px clamp(12px, 1.4vw, 16px);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bs-tile:hover, .bs-tile:focus-visible {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(26,26,30,.14);
}
/* Pevná výška boxu: ikony mají různé poměry stran (čtvercové pečetě i široká loga)
   a při height:auto se obsah dlaždic v řadě rozjel. Karty samy jsou stejně vysoké (grid),
   ale nadpisy siály na různých úrovních — tohle je srovná. */
.bs-tile__media { width: 100%; height: clamp(110px, 13vw, 170px); display: flex;
                  align-items: center; justify-content: center; }
/* ikony jsou 170×170 — nikdy nezvětšovat (strop v px), jen případně zmenšit */
.bs-tile__media img { max-width: min(100%, 170px); max-height: 100%; width: auto; height: auto; }
.bs-brand .bs-tile__name { margin: 10px 0 0; font-weight: 700; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.25; }
.bs-tile__go { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-accent); opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease; }
.bs-tile:hover .bs-tile__go, .bs-tile:focus-visible .bs-tile__go { opacity: 1; transform: translateY(0); }
@media (hover: none) { .bs-tile__go { opacity: 1; transform: none; } }
/* Dlaždice BEZ ikony — značka, která na Upgates ještě nemá obrázek kategorie (170×170 PNG
   nahrává uživatel v adminu). Dřív se vynechávala, takže živá brand page nebyla
   z rozcestníku dosažitelná. Wordmark drží stejnou výšku rámu jako ikona, ať řada
   nepřeskakuje; jemný podklad ho odliší od skutečného loga. */
.bs-tile__media--text { background: var(--bs-soft); border-radius: 10px; padding: 0 10px; }
.bs-brand .bs-tile__wordmark {
  font-weight: 700; font-size: clamp(18px, 2.1vw, 27px); line-height: 1.15;
  letter-spacing: -.01em; color: var(--bs-ink); text-align: center;
  /* dlouhé názvy (BLACK+DECKER) se musí zlomit, ne přetéct rám */
  overflow-wrap: anywhere; hyphens: auto;
}
.bs-tile:hover .bs-tile__media--text, .bs-tile:focus-visible .bs-tile__media--text {
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .bs-tile, .bs-tile__go { transition: none; }
  .bs-tile:hover { transform: none; }
}

/* ---------- skrytí nativního výpisu podkategorií ---------- */
/* Upgates pod obsah vykreslí vlastní blok „Podkategorie (N)" s dlaždicemi dětí této
   kategorie — tedy TÉŽ ZNAČKY, které už vypisuje naše mřížka .bs-grid. Vzniklo tím
   duplicitní řada log mimo mřížku (navíc s Hurley bez obrázku, tj. ikonou složky).
   Blok má aria-expanded="false", ale v layoutu `campaign` se sbalení neuplatňuje a
   vykreslí se v plné výšce (měřeno 435 px, 2026-08-24).
   Selektor je bezpečně lokální: tenhle CSS soubor se přes `custom_style` načítá POUZE
   na /cz/pribehy-znacek, ne globalně. */
.subct { display: none !important; }

/* ============================================================
   H1 kategorie — font šablony (doplněno 2026-08-25)
   ============================================================
   Rozcestník si svůj H1 („Příběhy značek") NECHÁVÁ, je to název stránky — na rozdíl
   od brand pages, kde ho skrýváme. Šablona ho ale kreslí vlastním fontem `myriad-pro`
   (naměřeno naživo) a znaky, které v jeho subsetu nejsou (ř, č, ě), padají na
   systémový fallback → v nadpisu jsou nápadně tlustší. Přebíjíme naším fontem.
   2026-09-21: šablona třídu přejmenovala z `ph-main` na `ph-page`, čímž tohle
   pravidlo přestalo platit a nadpis se zase kreslil Myriadem. Držíme obě. */
body:has(.bs-brand-wrapper) h1.ph-main,
body:has(.bs-brand-wrapper) h1.ph-page {
  font-family: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}