@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Radio+Canada:wght@400;500;700&display=swap');

/* ---------- scoped reset & tokeny (změřeno z předlohy) ---------- */
.dw-brand{
  --dw-green:#65BA80;
  --dw-peach:#F99D6E;
  --dw-ink:#212529;
  --dw-grey:#333333;
  --dw-soft:#F3F6F4;
  --dw-card:#C4D5DF;
  font-family:'Radio Canada',Arial,sans-serif;
  color:var(--dw-ink);
  font-size:16px;
  line-height:1.75;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
  overflow:hidden;
}
.dw-brand *,.dw-brand *::before,.dw-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.dw-brand img{max-width:100%;height:auto;display:block;}
.dw-brand a{text-decoration:none;color:inherit;}

/* ---------- typografie dle předlohy ---------- */
.dw-brand .dw-eyebrow{
  display:block;font-size:16px;font-weight:400;text-transform:uppercase;
  color:var(--dw-peach);margin-bottom:6px;
}
.dw-brand .dw-h{
  font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:22px;
  line-height:1.35;color:var(--dw-ink);margin-bottom:14px;
}
.dw-brand .dw-btn{
  display:inline-block;background:var(--dw-peach);color:#fff;border-radius:32px;
  font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.02em;
  padding:16px 40px;transition:background .25s,transform .2s;
}
.dw-brand .dw-btn::after{content:"\203A";margin-left:12px;font-size:18px;line-height:0;position:relative;top:1px;}
.dw-brand .dw-btn:hover{background:#f28a55;transform:translateY(-1px);}
.dw-brand .dw-btn-grey{background:rgba(33,37,41,.32);}
.dw-brand .dw-btn-grey:hover{background:rgba(33,37,41,.5);}
.dw-brand .dw-textlink{
  display:inline-block;font-weight:700;font-size:14px;text-transform:uppercase;
  color:var(--dw-ink);border-bottom:2px solid var(--dw-peach);padding-bottom:2px;
}
.dw-brand .dw-textlink::after{content:"\203A";margin-left:8px;color:var(--dw-peach);}
.dw-brand .dw-textlink:hover{color:var(--dw-peach);}

/* ---------- vlnité oddělovače (tvar vlny předlohy) ---------- */
.dw-brand .dw-wave{display:block;width:100%;height:auto;margin-top:-1px;}

/* ---------- zelený hero (top banner předlohy) ---------- */
.dw-brand .dw-hero{background:var(--dw-green);color:#fff;}
.dw-brand .dw-hero-inner{
  display:flex;align-items:center;gap:20px;padding:44px 40px 0;
}
.dw-brand .dw-hero-text{flex:0 0 46%;padding-bottom:44px;}
.dw-brand .dw-hero-text .dw-eyebrow{color:var(--dw-peach);}
.dw-brand .dw-hero-text h1{
  font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:34px;
  color:#fff;line-height:1.25;margin-bottom:18px;
}
.dw-brand .dw-hero-text p{color:#fff;margin-bottom:28px;max-width:520px;}
.dw-brand .dw-hero-btns{display:flex;flex-wrap:wrap;gap:14px;}
.dw-brand .dw-hero-img{
  flex:1 1 54%;position:relative;align-self:flex-end;
  display:flex;align-items:flex-end;justify-content:center;gap:4%;padding-top:10px;
}
.dw-brand .dw-hero-img img{width:auto;max-width:52%;max-height:420px;}
/* nápis značky vedle dinosaura (na místě loga v ilustraci předlohy) */
.dw-brand .dw-hero-logo{
  display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;
  margin-top:8%;
}
.dw-brand .dw-hero-logo b{
  font-family:'Playfair Display',Georgia,serif;font-weight:700;font-style:italic;
  font-size:clamp(22px,3vw,42px);line-height:1;color:#fff;text-transform:uppercase;
  text-shadow:0 2px 6px rgba(0,0,0,.18);
}
.dw-brand .dw-hero-logo small{
  font-size:clamp(9px,.9vw,12px);letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-top:8px;
}
.dw-brand .dw-hero .dw-wave{background:var(--dw-green);}

/* ---------- novinky: karty produktů jako slider předlohy ---------- */
.dw-brand .dw-section{padding:40px 40px 56px;}
.dw-brand .dw-section-head{margin-bottom:26px;}
.dw-brand .dw-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:34px;}
.dw-brand .dw-card{
  background:#fff;box-shadow:0 4px 8px rgba(153,153,153,.25);padding:14px 14px 18px;
  position:relative;display:block;transition:transform .25s,box-shadow .25s;
}
.dw-brand .dw-card:hover{transform:translateY(-3px);box-shadow:0 10px 18px rgba(153,153,153,.3);}
.dw-brand .dw-badge{
  position:absolute;left:14px;top:14px;background:var(--dw-peach);color:#fff;
  font-size:12px;font-weight:700;border-radius:800px;padding:4px 9px;line-height:1.3;z-index:1;
}
.dw-brand .dw-card-img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.dw-brand .dw-card h3{font-family:'Radio Canada',sans-serif;font-weight:500;font-size:16px;color:var(--dw-grey);line-height:1.4;}
.dw-brand .dw-card span{font-size:13px;color:#7a8087;display:block;margin-top:2px;}

/* ---------- split sekce s kolážemi (Hraní a objevování, Lepení a čmárání) ---------- */
.dw-brand .dw-split{display:flex;align-items:center;gap:40px;padding:40px 40px 56px;}
.dw-brand .dw-split-rev{flex-direction:row-reverse;}
.dw-brand .dw-split-text{flex:1 1 50%;}
.dw-brand .dw-split-text p{margin-bottom:22px;max-width:560px;}
.dw-brand .dw-split-img{flex:1 1 50%;}
.dw-brand .dw-soft{background:var(--dw-soft);}

/* ---------- nakupte online + značky (dle předlohy) ---------- */
.dw-brand .dw-buy{text-align:center;padding:48px 40px 56px;}
.dw-brand .dw-buy p{max-width:640px;margin:0 auto 26px;}
.dw-brand .dw-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:26px;}
.dw-brand .dw-brand-tile{
  display:block;background:#fff;box-shadow:0 4px 8px rgba(153,153,153,.25);
  padding:12px;text-align:center;transition:transform .25s;
}
.dw-brand .dw-brand-tile:hover{transform:translateY(-3px);}
.dw-brand .dw-brand-tile img{aspect-ratio:1/1;object-fit:cover;width:100%;}
.dw-brand .dw-brand-tile h3{font-family:'Radio Canada',sans-serif;font-weight:500;font-size:16px;color:var(--dw-grey);margin-top:10px;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .dw-brand .dw-hero-inner{flex-direction:column;padding:36px 28px 0;}
  .dw-brand .dw-hero-text{flex:0 0 auto;padding-bottom:26px;}
  .dw-brand .dw-hero-img{width:100%;}
  .dw-brand .dw-cards,.dw-brand .dw-brands{grid-template-columns:repeat(2,1fr);}
  .dw-brand .dw-split,.dw-brand .dw-split-rev{flex-direction:column;padding:36px 28px 48px;}
  .dw-brand .dw-section,.dw-brand .dw-buy{padding:32px 28px 44px;}
}
@media (max-width:520px){
  .dw-brand .dw-cards,.dw-brand .dw-brands{grid-template-columns:1fr;}
  .dw-brand .dw-hero-text h1{font-size:28px;}
}

/* ---------- guardy šablony Upgates (stejné jako u ostatních brand pages) ---------- */
/* Šablona kategorie vykresluje nad obsahem vlastní H1 s názvem stránky; hero má svůj
   vlastní titulek, takže duplicitní nadpis skryjeme. */
body:has(.dw-brand-wrapper) h1.ph-main,
body:has(.dw-brand-wrapper) h1.ph-page { display: none; }
/* Obsahový sloupec šablony je omezený na 640 px, brand page potřebuje plnou šířku. */
.max-w-xl:has(.dw-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 Playfair Display i pro nadpisy uvnitř brand page. */
.dw-brand :where(h1, h2, h3, h4, h5, h6) { font-family: 'Playfair Display', Georgia, serif; }


/* ---------- 2026-09-17: vlna a její spodní hrana ---------- */
/* Tvar vlny se do boxu škáluje (`preserveAspectRatio=none`, zlomková výška), takže
   POSLEDNÍ řádek je antialiasovaný — částečně průhledný. Prosvítá přes něj VLASTNÍ
   pozadí SVG, ne sekce pod ním, a vzniká barevná linka. Naměřeno na živé stránce
   (1321 px): hero měl poslední řádek 204,232,213 místo bílé, vlna nad sekcí
   248,249,248 místo 243,246,244. Záporný margin to neřeší — následující blok je
   průhledný a linku nepřekryje.
   Řešení: pozadí SVG přejde u dna do barvy, která pod vlnou pokračuje. Zlom je na 75 %
   (48 z 64), což je bezpečně pod nejnižším začátkem tvaru (y=39) — změřeno rasterizací. */
.dw-brand .dw-wave{margin-bottom:-1px;}
.dw-brand .dw-hero .dw-wave{
  background:linear-gradient(to bottom,var(--dw-green) 0 75%,#fff 75%);
}
.dw-brand .dw-soft > .dw-wave{
  background:linear-gradient(to bottom,#fff 0 75%,var(--dw-soft) 75%);
}
