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

/* Argo brand page (varianta Claude) — scope .argo-brand. Zdroj:
   raw/brand-handoff/argo/, CSS vyjmuto z <style> generátorem
   scripts/build_argo_claude_page.py. Barvy dle argoclima.com:
   #0078B5 klima, #A12F2E, #EC3F34, #7AA3C0. Font Jost. */
/* ---------- scoped reset & tokeny ---------- */
.argo-brand{
  --argo-blue:#0078B5;
  --argo-darkred:#A12F2E;
  --argo-red:#EC3F34;
  --argo-lightblue:#7AA3C0;
  --argo-grey:#F0F0F0;
  --argo-text:#333;
  font-family:'Jost','Futura LT','Futura','Century Gothic',sans-serif;
  color:var(--argo-text);
  line-height:1.5;
  max-width:1400px;
  margin:0 auto;
}
.argo-brand *,.argo-brand *::before,.argo-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.argo-brand img{max-width:100%;height:auto;display:block;}
.argo-brand a{text-decoration:none;color:inherit;}

/* ---------- hlavička značky ---------- */
.argo-brand .ab-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;background:#fff;flex-wrap:wrap;gap:14px;
}
.argo-brand .ab-header img.ab-logo{width:150px;height:auto;}
.argo-brand .ab-payoff{
  font-size:20px;letter-spacing:2px;text-transform:uppercase;
  color:var(--argo-red);font-weight:500;
}
.argo-brand .ab-header-note{font-size:14px;color:#888;letter-spacing:1px;text-transform:uppercase;}
.argo-brand .ab-sep{border:0;border-top:1px solid #d5d6d8;margin:0;}

/* ---------- hero slider (CSS crossfade, poměr 1920×613 dle originálu) ---------- */
.argo-brand .ab-slider{position:relative;width:100%;padding-top:32%;overflow:hidden;background:#fff;}
.argo-brand .ab-slide{
  position:absolute;inset:0;opacity:0;
  background-size:contain;background-position:center center;background-repeat:no-repeat;
  animation:abFade 20s infinite;
}
@keyframes abFade{0%{opacity:0}4%{opacity:1}22%{opacity:1}28%{opacity:0}100%{opacity:0}}

/* ---------- KATEGORIE – 4 barevné dlaždice jako na argoclima.com ---------- */
.argo-brand .ab-tiles{display:flex;padding:0.5%;flex-wrap:wrap;}
.argo-brand .ab-tile{
  flex:1 1 200px;margin:0.5%;padding:26px 16px 22px;
  text-align:center;text-transform:uppercase;
  background:var(--tile);color:#fff;
  font-size:17px;font-weight:500;letter-spacing:1px;
  transition:background .3s,color .3s;display:block;
}
.argo-brand .ab-tile-icon{
  height:52px;margin-bottom:14px;
  background-size:auto 200%;background-position:center bottom;background-repeat:no-repeat;
  transition:background-position .3s;
}
.argo-brand .ab-tile:hover{background:#fff;color:var(--tile);box-shadow:inset 0 0 0 2px var(--tile);}
.argo-brand .ab-tile:hover .ab-tile-icon{background-position:center top;}

/* ---------- promo bannery ---------- */
.argo-brand .ab-banners{display:flex;gap:1%;padding:1% 0.5% 0;flex-wrap:wrap;}
.argo-brand .ab-banners a{flex:1 1 400px;display:block;}

/* ---------- Proč Argo ---------- */
.argo-brand .ab-section{padding:56px 28px;}
.argo-brand .ab-section-grey{background:var(--argo-grey);}
.argo-brand .ab-h2{
  text-align:center;text-transform:uppercase;font-weight:500;
  font-size:30px;letter-spacing:3px;color:var(--argo-blue);margin-bottom:36px;
}
.argo-brand .ab-h2 span{color:var(--argo-red);}
.argo-brand .ab-benefits{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;}
.argo-brand .ab-benefit{
  flex:1 1 220px;max-width:300px;text-align:center;padding:26px 18px;background:#fff;
  border-top:4px solid var(--argo-blue);
}
.argo-brand .ab-benefit:nth-child(2){border-top-color:var(--argo-darkred);}
.argo-brand .ab-benefit:nth-child(3){border-top-color:var(--argo-red);}
.argo-brand .ab-benefit:nth-child(4){border-top-color:var(--argo-lightblue);}
.argo-brand .ab-benefit svg{width:44px;height:44px;margin:0 auto 14px;display:block;}
.argo-brand .ab-benefit h3{
  text-transform:uppercase;font-size:16px;font-weight:600;
  letter-spacing:1px;margin-bottom:10px;
}
.argo-brand .ab-benefit p{font-size:14.5px;color:#666;}

/* ---------- historie / timeline ---------- */
.argo-brand .ab-timeline{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;margin-top:8px;}
.argo-brand .ab-milestone{flex:1 1 200px;max-width:280px;text-align:center;padding:10px 14px;}
.argo-brand .ab-year{
  font-size:38px;font-weight:600;color:var(--argo-red);
  border-bottom:3px solid var(--argo-blue);display:inline-block;
  padding:0 12px 4px;margin-bottom:12px;
}
.argo-brand .ab-milestone p{font-size:14.5px;color:#555;}
.argo-brand .ab-history-intro{
  max-width:820px;margin:0 auto 34px;text-align:center;font-size:17px;color:#555;
}

/* ---------- CTA pás ---------- */
.argo-brand .ab-cta{
  background:var(--argo-blue);color:#fff;text-align:center;padding:46px 28px;
}
.argo-brand .ab-cta h2{
  text-transform:uppercase;font-weight:500;font-size:26px;letter-spacing:2px;margin-bottom:20px;
}
.argo-brand .ab-cta a{
  display:inline-block;background:#fff;color:var(--argo-blue);
  text-transform:uppercase;font-weight:600;letter-spacing:2px;
  padding:14px 42px;font-size:15px;transition:background .3s,color .3s;
}
.argo-brand .ab-cta a:hover{background:var(--argo-red);color:#fff;}

/* ---------- responzivita ---------- */
@media (max-width:768px){
  .argo-brand .ab-slider{padding-top:100%;}
            .argo-brand .ab-tile{flex-basis:46%;}
  .argo-brand .ab-header{justify-content:center;text-align:center;}
  .argo-brand .ab-h2{font-size:24px;}
}
@media (max-width:480px){
  .argo-brand .ab-tile{flex-basis:100%;}
}
.argo-brand .ab-slide:nth-child(1) { animation-delay: 0s; }
.argo-brand .ab-slide:nth-child(2) { animation-delay: 5s; }
.argo-brand .ab-slide:nth-child(3) { animation-delay: 10s; }
.argo-brand .ab-slide:nth-child(4) { animation-delay: 15s; }


/* ---------- HERO SLIDER přestavěný: fotka + text v HTML ----------
   Dodané slidy měly text vypálený v obrázku (anglicky/italsky) a nefunkční tlačítko.
   Teď je fotka „ambientata" (bez textu) vpravo a text vlevo jako skutečné HTML —
   je česky, dá se vybrat, CTA je opravdový odkaz a v mobilu se přeskládá.
   `visibility` v keyframes je potřeba: bez ní by průhledné slidy dál zachytávaly
   kliknutí (opacity:0 hit-testing nevypíná) a klikalo by se do neviditelného slidu. */
.argo-brand .ab-slider { padding-top: 0; height: clamp(340px, 34vw, 520px); background: #F2F4F5; }
.argo-brand .ab-slide { display: grid; grid-template-columns: 1.05fr .95fr; background: #F2F4F5; }
.argo-brand .ab-slide__text { align-self: center; padding: clamp(24px, 3.5vw, 56px); max-width: 34rem; }
.argo-brand .ab-slide__eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #0078B5; }
.argo-brand .ab-slide__title { margin: 10px 0 12px; font-size: clamp(26px, 3.2vw, 44px); font-weight: 500; line-height: 1.1; color: #1c1c1c; }
.argo-brand .ab-slide__lead { margin: 0 0 22px; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.6; color: #4a4a4a; }
.argo-brand .ab-slide__cta { display: inline-block; padding: 12px 26px; border: 1.5px solid #0078B5; border-radius: 3px; font-size: 14px; font-weight: 600; letter-spacing: .5px; color: #0078B5; transition: background .18s ease, color .18s ease; }
.argo-brand .ab-slide__cta:hover { background: #0078B5; color: #fff; }
.argo-brand .ab-slide__media { background-size: cover; background-position: center 28%; background-repeat: no-repeat; }
@keyframes abFade { 0%{opacity:0;visibility:hidden} 3%{opacity:1;visibility:visible} 22%{opacity:1;visibility:visible} 27%{opacity:0;visibility:hidden} 100%{opacity:0;visibility:hidden} }
@media (max-width: 768px) {
  .argo-brand .ab-slider { height: auto; min-height: 520px; }
  .argo-brand .ab-slide { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .argo-brand .ab-slide__media { order: -1; min-height: 240px; }
  .argo-brand .ab-slide__text { padding: 20px 20px 28px; }
}


/* ---------- pravidla pro nasazení do šablony e-shopu (Upgates) ----------
   1) Šablona vykresluje nad obsahem vlastní H1 s názvem stránky → duplicitní nadpis.
   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 .argo-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: .ab-tile-icon je <span> (tedy inline) s height:52px — inline box
   výšku ignoruje, takže se ikona neměla kam vykreslit (změřeno: 0×24 px, pozadí nikde).
   Sprity mají v dolní polovině BÍLOU variantu ikon, což je přesně to, co na barevnou
   dlaždici patří — po display:block se zobrazí (301×52 px). Stejná past jako u Hurley karet. */
.argo-brand .ab-tile-icon { display: block; }

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