@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;700&family=Open+Sans:ital,wght@0,400;0,600;1,400&display=swap');

/* ---------- scoped reset & tokeny (změřeno z předlohy) ---------- */
.bl-brand{
  --bl-blue:#00538D;
  --bl-ink:#252B33;
  --bl-grey:#6c757d;
  --bl-line:#e6e6e6;
  --bl-soft:#f5f6f7;
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
  color:var(--bl-ink);
  font-size:16px;
  line-height:1.7;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.bl-brand *,.bl-brand *::before,.bl-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.bl-brand img{max-width:100%;height:auto;display:block;}
.bl-brand a{text-decoration:none;color:inherit;}

/* ---------- typografie dle předlohy ---------- */
.bl-brand .bl-h{
  font-family:'Roboto Slab',serif;font-weight:500;font-size:25.6px;
  text-transform:uppercase;color:var(--bl-blue);line-height:1.35;
}
.bl-brand .bl-sub{
  display:block;font-size:16px;color:var(--bl-grey);font-style:italic;margin:6px 0 14px;
}
.bl-brand .bl-btn{
  display:inline-block;background:transparent;color:var(--bl-blue);
  border:2px solid var(--bl-blue);border-radius:4px;
  font-weight:700;font-size:14px;text-transform:uppercase;
  line-height:38px;padding:0 20px;transition:background .25s,color .25s;
}
.bl-brand .bl-btn:hover{background:var(--bl-blue);color:#fff;}
.bl-brand .bl-btn-light{color:#fff;border-color:#fff;}
.bl-brand .bl-btn-light:hover{background:#fff;color:var(--bl-blue);}

/* ---------- hlavička: skriptové logo + tagline (dle předlohy) ---------- */
.bl-brand .bl-header{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  padding:30px 34px;border-bottom:1px solid var(--bl-line);
}
.bl-brand .bl-header img{width:150px;}
.bl-brand .bl-header p{font-size:16px;color:var(--bl-ink);max-width:560px;}

/* ---------- hero slider (bílé popisky a tečky jako předloha) ---------- */
.bl-brand .bl-hero{
  position:relative;width:100%;padding-top:44%;overflow:hidden;background:#1d232b;
  container-type:inline-size;
}
.bl-brand .bl-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;visibility:hidden;animation:bl-fade 18s infinite;
}
.bl-brand .bl-slide:nth-child(1){animation-delay:0s;}
.bl-brand .bl-slide:nth-child(2){animation-delay:6s;}
.bl-brand .bl-slide:nth-child(3){animation-delay:12s;}
@keyframes bl-fade{
  0%{opacity:0;visibility:visible;}
  4%{opacity:1;}
  33.33%{opacity:1;}
  38%{opacity:0;visibility:hidden;}
  100%{opacity:0;visibility:hidden;}
}
.bl-brand .bl-slide span{
  position:absolute;right:4cqw;bottom:3.4cqw;color:#fff;
  font-family:'Roboto Slab',serif;font-weight:400;font-size:2.2cqw;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.bl-brand .bl-dots{
  position:absolute;left:0;right:0;bottom:1.4cqw;display:flex;justify-content:center;gap:9px;
}
.bl-brand .bl-dots i{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);
  animation:bl-dot 18s infinite;
}
.bl-brand .bl-dots i:nth-child(1){animation-delay:0s;}
.bl-brand .bl-dots i:nth-child(2){animation-delay:6s;}
.bl-brand .bl-dots i:nth-child(3){animation-delay:12s;}
@keyframes bl-dot{0%{background:#fff;}33.33%{background:#fff;}34%{background:rgba(255,255,255,.45);}100%{background:rgba(255,255,255,.45);}}

/* ---------- úvodní pás mezi hero a split sekcemi (oddělení sekcí) ---------- */
.bl-brand .bl-intro{text-align:center;padding:52px 40px 44px;border-bottom:1px solid var(--bl-line);}
.bl-brand .bl-intro .bl-h{margin-bottom:10px;}
.bl-brand .bl-intro p{max-width:640px;margin:0 auto 26px;color:#4a5058;}
.bl-brand .bl-intro-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.bl-brand .bl-intro-links a{
  font-family:'Roboto Slab',serif;font-weight:400;font-size:14px;text-transform:uppercase;
  color:var(--bl-blue);border:1px solid var(--bl-blue);border-radius:4px;padding:8px 18px;transition:background .2s,color .2s;
}
.bl-brand .bl-intro-links a:hover{background:var(--bl-blue);color:#fff;}
@media (max-width:900px){.bl-brand .bl-intro{padding:36px 24px 32px;}}

/* ---------- střídavé split sekce (podpis předlohy) ---------- */
.bl-brand .bl-split{display:flex;align-items:stretch;min-height:400px;}
.bl-brand .bl-split-img{flex:1 1 50%;min-height:320px;background-size:cover;background-position:center;}
.bl-brand .bl-split-text{
  flex:1 1 50%;display:flex;flex-direction:column;justify-content:center;
  padding:48px 52px;
}
.bl-brand .bl-split-text p{color:#4a5058;max-width:520px;margin-bottom:20px;}
.bl-brand .bl-split-text .bl-btn{align-self:flex-start;}
.bl-brand .bl-split-rev{flex-direction:row-reverse;}
.bl-brand .bl-split-grey{background:var(--bl-soft);}

/* ---------- řady produktů pod split sekcemi ---------- */
.bl-brand .bl-prods{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  padding:34px;border-bottom:1px solid var(--bl-line);
}
.bl-brand .bl-prods-2{grid-template-columns:repeat(2,minmax(0,320px));justify-content:center;}
.bl-brand .bl-prods-3{grid-template-columns:repeat(3,minmax(0,320px));justify-content:center;}
.bl-brand .bl-prod{text-align:center;display:block;}
.bl-brand .bl-prod-img{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:#fff;margin-bottom:10px;
}
.bl-brand .bl-prod-img img{transition:transform .35s;}
.bl-brand .bl-prod:hover .bl-prod-img img{transform:scale(1.05);}
.bl-brand .bl-prod h3{
  font-family:'Roboto Slab',serif;font-weight:700;font-size:15px;
  text-transform:uppercase;color:var(--bl-ink);margin-bottom:2px;
}
.bl-brand .bl-prod span{font-size:13px;color:#8a9097;display:block;}

/* ---------- příběh značky (split, dle jazyka stránky) ---------- */
.bl-brand .bl-story-img{min-height:420px;}
.bl-brand .bl-story-text p{margin-bottom:13px;}
.bl-brand .bl-story-text p strong{color:var(--bl-blue);font-weight:600;}

/* ---------- závěrečný modrý pás (jako Get in touch předlohy) ---------- */
.bl-brand .bl-cta{
  background:var(--bl-blue);color:#fff;text-align:center;padding:56px 28px;
}
.bl-brand .bl-cta h2{
  font-family:'Roboto Slab',serif;font-weight:500;font-size:25.6px;
  text-transform:uppercase;margin-bottom:10px;
}
.bl-brand .bl-cta p{color:#cfe0ea;margin-bottom:24px;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .bl-brand .bl-split,.bl-brand .bl-split-rev{flex-direction:column;}
  .bl-brand .bl-split-img{min-height:260px;}
  .bl-brand .bl-split-text{padding:36px 28px;}
  .bl-brand .bl-prods{grid-template-columns:repeat(2,1fr);}
  .bl-brand .bl-prods-3{grid-template-columns:repeat(2,minmax(0,320px));}
  .bl-brand .bl-header{justify-content:center;text-align:center;}
  .bl-brand .bl-hero{padding-top:56%;}
}
@media (max-width:520px){
  .bl-brand .bl-prods,.bl-brand .bl-prods-2,.bl-brand .bl-prods-3{grid-template-columns:1fr;}
}

/* ---------- guardy šablony Upgates (stejné jako u ostatních brand pages) ---------- */
/* Šablona kategorie vykresluje nad obsahem vlastní H1 s názvem stránky; hlavička má
   vlastní logo s taglinem, takže duplicitní nadpis skryjeme. */
body:has(.bl-brand-wrapper) h1.ph-main,
body:has(.bl-brand-wrapper) h1.ph-page { display: none; }
/* vlastní H1 skrytý jen vizuálně (fragment ho jinak nemá) — brand_nadpis.py */
.bl-brand .bl-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Obsahový sloupec šablony je omezený na 640 px, brand page potřebuje plnou šířku. */
.max-w-xl:has(.bl-brand-wrapper) { max-width: none; }
/* Nadpisy: šablona tlačí vlastní font a u diakritiky pak padá na tučný fallback
   (řešeno u Tesly). Vynutíme Roboto Slab i pro nadpisy uvnitř brand page. */
.bl-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Roboto Slab', Georgia, serif; }

/* ===== mobil: čitelné písmo a text pod fotkou (scripts/mobil_css.py) ===== */
/* Luigi Bormioli na telefonu (do 768 px). Písmo hero bylo v `cqw` bez spodní meze a na
   360 px vycházelo pod 8 px (kontrola_mobil.py, 2026-09-24). Fotka se nahoře ukáže
   v pásu 70,6 % šířky (nejvyšší ze tří fotek; zbylé dvě se po stranách ořízne o 2–4 %), text jde pod ni na plnou plochu s pevným písmem.
   `cqw` v pravidlech níž je bezpečné: měří šířku slideru, ne písmo. */
@media (max-width:768px){
  .bl-brand .bl-hero{padding-top:calc(70.6% + 64px);background:#1d232b;}
  .bl-brand .bl-slide{background-size:auto 70.6cqw;background-position:center top;background-repeat:no-repeat;}
  .bl-brand .bl-slide span{top:70.6cqw;bottom:0;left:0;right:0;display:flex;
    align-items:center;justify-content:center;text-align:center;padding:0 20px;
    background:#1d232b;font-size:17px;text-shadow:none;}
}
/* ===== konec bloku pro mobil ===== */