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

/* Solac brand page — scope .solac-brand. Zdroj: raw/brand-handoff/solac/
   (dodaná verze), CSS vyjmuto z <style> generátorem scripts/build_solac_page.py.
   Barvy dle solac.com: korálová #FF5757, text rgba(0,0,0,.75), šedá #F3F3F3. */
/* ---------- scoped reset & tokeny ---------- */
.solac-brand{
  --sol-coral:#FF5757;
  --sol-dark:#1F1F1F;
  --sol-text:rgba(0,0,0,.75);
  --sol-grey:#F3F3F3;
  font-family:'Montserrat',sans-serif;
  color:var(--sol-text);
  line-height:1.6;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
}
.solac-brand *,.solac-brand *::before,.solac-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.solac-brand img{max-width:100%;height:auto;display:block;}
.solac-brand a{text-decoration:none;color:inherit;}
.solac-brand .sb-mobile{display:none;}

/* ---------- hlavička značky ---------- */
.solac-brand .sb-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 28px;flex-wrap:wrap;gap:14px;
}
.solac-brand .sb-logo{width:135px;height:auto;}
.solac-brand .sb-claim{
  font-size:15px;font-weight:600;letter-spacing:.5px;color:var(--sol-dark);
}
.solac-brand .sb-header-note{font-size:13px;color:#888;letter-spacing:.5px;}

/* ---------- hero (poměr 1921×839 dle originálu) ---------- */
.solac-brand .sb-hero{display:block;position:relative;}

/* ---------- nadpisy sekcí ---------- */
.solac-brand .sb-section{padding:48px 28px;}
.solac-brand .sb-h2{
  font-size:26px;font-weight:700;color:var(--sol-dark);
  margin-bottom:28px;
}
.solac-brand .sb-h2 span{color:var(--sol-coral);}

/* ---------- kategorie – 6 foto karet ---------- */
.solac-brand .sb-cats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.solac-brand .sb-cat{display:block;}
.solac-brand .sb-cat-img{
  overflow:hidden;border-radius:2px;background:var(--sol-grey);
  aspect-ratio:1/1;
}
.solac-brand .sb-cat-img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.solac-brand .sb-cat:hover .sb-cat-img img{transform:scale(1.05);}
.solac-brand .sb-cat-title{
  display:flex;align-items:center;gap:8px;
  padding:12px 2px 0;font-size:16px;font-weight:600;color:var(--sol-dark);
  transition:color .3s;
}
.solac-brand .sb-cat:hover .sb-cat-title{color:var(--sol-coral);}
.solac-brand .sb-cat-title::after{content:"→";font-weight:400;transition:transform .3s;}
.solac-brand .sb-cat:hover .sb-cat-title::after{transform:translateX(4px);}

/* ---------- top produkty – karty ---------- */
.solac-brand .sb-products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.solac-brand .sb-product{
  display:flex;flex-direction:column;border:1px solid #eee;border-radius:2px;
  overflow:hidden;transition:box-shadow .3s;background:#fff;
}
.solac-brand .sb-product:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);}
.solac-brand .sb-product-img{background:#fff;aspect-ratio:1/1;overflow:hidden;}
.solac-brand .sb-product-img img{width:100%;height:100%;object-fit:contain;transition:transform .4s;}
.solac-brand .sb-product:hover .sb-product-img img{transform:scale(1.04);}
.solac-brand .sb-product-body{padding:16px;display:flex;flex-direction:column;gap:4px;flex:1;}
.solac-brand .sb-product-body h3{font-size:16px;font-weight:700;color:var(--sol-dark);}
.solac-brand .sb-product-cat{font-size:13px;color:#888;margin-bottom:12px;}
.solac-brand .sb-btn{
  margin-top:auto;display:inline-block;text-align:center;
  background:var(--sol-coral);color:#fff;font-weight:600;font-size:14px;
  padding:11px 18px;border-radius:2px;transition:background .3s;
}
.solac-brand .sb-btn:hover{background:var(--sol-dark);}

/* ---------- full-width bannery ---------- */
.solac-brand .sb-banner{display:block;margin-top:8px;}

/* ---------- brand story ---------- */
.solac-brand .sb-story{background:var(--sol-grey);text-align:center;}
.solac-brand .sb-story .sb-h2{margin-bottom:18px;}
.solac-brand .sb-story-text{max-width:760px;margin:0 auto 34px;font-size:16.5px;}
.solac-brand .sb-stats{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}
.solac-brand .sb-stat{
  background:#fff;border-radius:2px;padding:26px 30px;flex:1 1 200px;max-width:280px;
  border-bottom:3px solid var(--sol-coral);
}
.solac-brand .sb-stat strong{
  display:block;font-size:30px;font-weight:700;color:var(--sol-coral);margin-bottom:6px;
}
.solac-brand .sb-stat span{font-size:14.5px;color:var(--sol-dark);font-weight:500;}

/* ---------- CTA pás ---------- */
.solac-brand .sb-cta{
  background:var(--sol-coral);color:#fff;text-align:center;padding:46px 28px;
}
.solac-brand .sb-cta h2{font-size:24px;font-weight:700;margin-bottom:20px;}
.solac-brand .sb-cta a{
  display:inline-block;background:#fff;color:var(--sol-coral);
  font-weight:700;font-size:15px;padding:13px 40px;border-radius:2px;
  transition:background .3s,color .3s;
}
.solac-brand .sb-cta a:hover{background:var(--sol-dark);color:#fff;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .solac-brand .sb-products{grid-template-columns:repeat(2,1fr);}
  .solac-brand .sb-cats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .solac-brand .sb-mobile{display:block;}
  .solac-brand .sb-desktop{display:none;}
  .solac-brand .sb-header{justify-content:center;text-align:center;}
  .solac-brand .sb-h2{font-size:22px;}
}
@media (max-width:520px){
  .solac-brand .sb-cats{grid-template-columns:1fr;}
  .solac-brand .sb-products{grid-template-columns:1fr;}
}

/* ---------- PŘÍBĚH ZNAČKY ----------
   Dodaná sekce byla jen odstavec na šedé ploše + tři dlaždice (jedna s emoji vlajkou,
   která se na Windows renderuje jako text „ES"). Tady je fotka s ročníkovým odznakem,
   text vedle ní, citace značky a čtyři ověřená fakta. */
.solac-brand .sb-story { background: var(--sol-grey); padding: clamp(40px, 5vw, 76px) 28px; }
.solac-brand .sb-story-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 1180px; margin: 0 auto; }
.solac-brand .sb-story-media { position: relative; }
.solac-brand .sb-story-media img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border-radius: 2px; }
/* odznak s ročníkem přesahuje přes fotku — drží pohled u data založení */
.solac-brand .sb-story-since { position: absolute; left: -10px; bottom: 22px; background: var(--sol-coral); color: #fff; padding: 10px 18px; border-radius: 2px; font-size: 13px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.solac-brand .sb-story-since strong { font-size: 22px; font-weight: 700; margin-left: 6px; letter-spacing: 0; }
/* dodané .sb-story mělo text-align:center (počítalo s jedním odstavcem na střed);
   ve dvousloupcovém layoutu se odstavce na střed čtou špatně → sloupec vlevo */
.solac-brand .sb-story-copy { text-align: left; }
.solac-brand .sb-story-eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--sol-coral); margin-bottom: 10px; }
.solac-brand .sb-story-copy h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: var(--sol-dark); line-height: 1.2; margin-bottom: 16px; }
.solac-brand .sb-story-copy h2 span { color: var(--sol-coral); }
.solac-brand .sb-story-copy p { font-size: 16px; line-height: 1.7; margin-bottom: 14px; }
.solac-brand .sb-story-lead { font-size: 17.5px; }
.solac-brand .sb-story-quote { margin: 22px 0 0; padding-left: 18px; border-left: 3px solid var(--sol-coral); font-size: 18px; font-weight: 500; font-style: italic; color: var(--sol-dark); }
.solac-brand .sb-story-quote cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #8a8a8a; }
.solac-brand .sb-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1180px; margin: clamp(28px, 4vw, 48px) auto 0; }
.solac-brand .sb-fact { background: #fff; border-radius: 2px; border-bottom: 3px solid var(--sol-coral); padding: 22px 22px 20px; }
.solac-brand .sb-fact strong { display: block; font-size: 26px; font-weight: 700; color: var(--sol-coral); margin-bottom: 6px; }
.solac-brand .sb-fact span { font-size: 14px; line-height: 1.5; color: var(--sol-dark); font-weight: 500; }
@media (max-width: 900px) {
  .solac-brand .sb-story-grid { grid-template-columns: 1fr; }
  .solac-brand .sb-story-media img { max-height: 320px; }
  .solac-brand .sb-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) { .solac-brand .sb-facts { grid-template-columns: 1fr; } }


/* ---------- pravidla pro nasazení do šablony e-shopu (Upgates) ----------
   1) Šablona vykresluje nad obsahem vlastní H1 s názvem stránky → u brand page je to
      duplicitní nadpis (hero/hlavička má svůj).
   2) Šablona drží obsah v úzkém .max-w-xl → brand page chce plnou šířku.
   3) Nadpisy MUSÍ mít font-family explicitně: šablona má vlastní pravidlo pro h1–h4
      (myriad-pro) a přímé pravidlo přebije dědění z .solac-brand. Naživo by se pak
      nadpis kreslil fontem šablony a znaky, které nemá v subsetu (ě, ž, ů), by spadly
      na systémový fallback → v nadpisu nápadně tlustší písmena. Na náhledu to není
      vidět, protože tam žádná šablona není. */
/* Oprava dodaného CSS: .sb-cat-img je <span> (uvnitř <a>), tedy inline — nad inline boxem
   se `aspect-ratio: 1/1` ignoruje, takže <a> mělo výšku jen podle řádku obrázku (581 px)
   a titulek pod ním (38 px) vypadl mimo → v gridu ho překryl další řádek a byl přeříznutý.
   Po display:block se výška spočítá správně (obrázek 435 + titulek 38) a titulek je vidět.
   Stejná past jako u Hurley karet a ikon dlaždic Arga. */
.solac-brand .sb-cat-img { display: block; }

body:has(.solac-brand-wrapper) h1.ph-main,
body:has(.solac-brand-wrapper) h1.ph-page { display: none; }
/* vlastní H1 skrytý jen vizuálně (fragment ho jinak nemá) — brand_nadpis.py */
.solac-brand .solac-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;
}
.max-w-xl:has(.solac-brand-wrapper) { max-width: none; margin-left: 0; margin-right: 0; }
.solac-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif; }


/* ---------- české texty v bannerech ----------
   Bannery jsou vyčištěné od španělštiny (scripts/clean_solac_banners.py), text je HTML:
   nezalomí se do fotky, opraví se bez grafika a přečte ho i vyhledávač. */
.solac-brand .sb-hero, .solac-brand .sb-banner { position: relative; }
.solac-brand .sb-ov {
  position: absolute; transform: translateY(-50%);   /* top nastavuje generátor per banner */
  max-width: 34%; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}
.solac-brand .sb-ov--left { left: 5%; }
.solac-brand .sb-ov--right { right: 6%; text-align: right; }
.solac-brand .sb-ov h3 {
  margin: 0 0 .5em; font-size: clamp(18px, 2.3vw, 40px); line-height: 1.1;
  font-weight: 800; color: #fff;
}
.solac-brand .sb-ov p { margin: 0 0 1em; font-size: clamp(12px, 1.15vw, 17px); line-height: 1.45; }
.solac-brand .sb-ov span {
  display: inline-block; background: #E4322B; color: #fff; padding: .55em 1.4em;
  border-radius: 999px; font-weight: 700; font-size: clamp(11px, .95vw, 15px);
}
/* Na mobilu jsou fotky portrétní a plocha úzká: text jde pod fotku, ne přes ni. */
@media (max-width: 700px) {
  .solac-brand .sb-ov {
    position: static; transform: none; max-width: none; text-align: left;
    color: #1c1c1c; text-shadow: none; padding: 14px 4vw 4px;
  }
  .solac-brand .sb-ov h3 { color: #1c1c1c; font-size: 20px; }
  .solac-brand .sb-ov p { font-size: 14px; }
}