@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) ---------- */
.yl-brand{
  --yl-teal:#77BDC7;
  --yl-peach:#F99D6E;
  --yl-mint:#EAF7F5;
  --yl-ink:#212529;
  --yl-grey:#333333;
  font-family:'Radio Canada',Arial,sans-serif;
  color:var(--yl-ink);
  font-size:16px;
  line-height:1.75;
  max-width:1400px;
  margin:0 auto;
  background:#fff;
  overflow:hidden;
}
.yl-brand *,.yl-brand *::before,.yl-brand *::after{box-sizing:border-box;margin:0;padding:0;}
.yl-brand img{max-width:100%;height:auto;display:block;}
.yl-brand a{text-decoration:none;color:inherit;}

/* ---------- typografie dle předlohy ---------- */
.yl-brand .yl-eyebrow{
  display:block;font-size:16px;font-weight:400;text-transform:uppercase;
  color:var(--yl-peach);margin-bottom:6px;
}
.yl-brand .yl-h{
  font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:22px;
  line-height:1.35;color:var(--yl-ink);margin-bottom:14px;
}
.yl-brand .yl-btn{
  display:inline-block;background:var(--yl-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;
}
.yl-brand .yl-btn::after{content:"\203A";margin-left:12px;font-size:18px;line-height:0;position:relative;top:1px;}
.yl-brand .yl-btn:hover{background:#f28a55;transform:translateY(-1px);}
.yl-brand .yl-btn-grey{background:#B8B8B8;}
.yl-brand .yl-btn-grey:hover{background:#a3a3a3;}

/* ---------- vlnité oddělovače (tvar vlny předlohy) ---------- */
.yl-brand .yl-wave{display:block;width:100%;height:auto;margin-top:-1px;}

/* ---------- tyrkysový hero (top banner předlohy) ---------- */
.yl-brand .yl-hero{background:var(--yl-teal);color:#fff;}
.yl-brand .yl-hero-inner{display:flex;align-items:center;gap:20px;padding:44px 40px 0;}
.yl-brand .yl-hero-text{flex:0 0 46%;padding-bottom:44px;}
.yl-brand .yl-hero-text h1{
  font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:34px;
  color:#fff;line-height:1.25;margin-bottom:18px;
}
.yl-brand .yl-hero-text p{color:#fff;margin-bottom:28px;max-width:520px;}
.yl-brand .yl-hero-btns{display:flex;flex-wrap:wrap;gap:14px;}
.yl-brand .yl-hero-img{flex:1 1 54%;align-self:flex-end;}
.yl-brand .yl-hero-img img{width:100%;}
.yl-brand .yl-hero .yl-wave{background:var(--yl-teal);}

/* ---------- novinky: karty produktů jako slider předlohy ---------- */
.yl-brand .yl-section{padding:40px 40px 56px;}
.yl-brand .yl-section-head{margin-bottom:26px;}
.yl-brand .yl-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:34px;}
.yl-brand .yl-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;
}
.yl-brand .yl-card:hover{transform:translateY(-3px);box-shadow:0 10px 18px rgba(153,153,153,.3);}
.yl-brand .yl-badge{
  position:absolute;left:14px;top:14px;background:var(--yl-peach);color:#fff;
  font-size:12px;font-weight:700;border-radius:800px;padding:4px 9px;line-height:1.3;z-index:1;
}
.yl-brand .yl-card-img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.yl-brand .yl-card h3{font-family:'Radio Canada',sans-serif;font-weight:500;font-size:16px;color:var(--yl-grey);line-height:1.4;}
.yl-brand .yl-card span{font-size:13px;color:#7a8087;display:block;margin-top:2px;}

/* ---------- split sekce s kolážemi ---------- */
.yl-brand .yl-split{display:flex;align-items:center;gap:40px;padding:40px 40px 56px;}
.yl-brand .yl-split-rev{flex-direction:row-reverse;}
.yl-brand .yl-split-text{flex:1 1 50%;}
.yl-brand .yl-split-text p{margin-bottom:22px;max-width:560px;}
.yl-brand .yl-split-img{flex:1 1 50%;}
.yl-brand .yl-mintbg{background:var(--yl-mint);}

/* ---------- nakupte online + značky ---------- */
.yl-brand .yl-buy{text-align:center;padding:48px 40px 56px;}
.yl-brand .yl-buy p{max-width:640px;margin:0 auto 26px;}
.yl-brand .yl-brands{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:26px;}
.yl-brand .yl-brand-tile{
  display:block;background:#fff;box-shadow:0 4px 8px rgba(153,153,153,.25);
  padding:12px;text-align:center;transition:transform .25s;
}
.yl-brand .yl-brand-tile:hover{transform:translateY(-3px);}
.yl-brand .yl-brand-tile img{aspect-ratio:1/1;object-fit:cover;width:100%;}
.yl-brand .yl-brand-tile h3{font-family:'Radio Canada',sans-serif;font-weight:500;font-size:16px;color:var(--yl-grey);margin-top:10px;}
/* dlaždice Dino World: zelený podklad značky + T-Rex z oficiální koláže (soubor v balíčku) */
.yl-brand .yl-tile-dino{
  display:flex;align-items:flex-end;justify-content:center;
  width:100%;aspect-ratio:1/1;background:#65BA80;overflow:hidden;padding:6% 8% 0;
}
.yl-brand .yl-tile-dino img{aspect-ratio:auto;object-fit:contain;object-position:bottom;width:100%;height:100%;}

/* ---------- responzivita ---------- */
@media (max-width:900px){
  .yl-brand .yl-hero-inner{flex-direction:column;padding:36px 28px 0;}
  .yl-brand .yl-hero-text{flex:0 0 auto;padding-bottom:26px;}
  .yl-brand .yl-hero-img{width:100%;}
  .yl-brand .yl-cards,.yl-brand .yl-brands{grid-template-columns:repeat(2,1fr);}
  .yl-brand .yl-split,.yl-brand .yl-split-rev{flex-direction:column;padding:36px 28px 48px;}
  .yl-brand .yl-section,.yl-brand .yl-buy{padding:32px 28px 44px;}
}
@media (max-width:520px){
  .yl-brand .yl-cards,.yl-brand .yl-brands{grid-template-columns:1fr;}
  .yl-brand .yl-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(.yl-brand-wrapper) h1.ph-main,
body:has(.yl-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(.yl-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. */
.yl-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í. */
.yl-brand .yl-wave{margin-bottom:-1px;}
.yl-brand .yl-hero .yl-wave{
  background:linear-gradient(to bottom,var(--yl-teal) 0 75%,#fff 75%);
}
.yl-brand .yl-mintbg > .yl-wave{
  background:linear-gradient(to bottom,#fff 0 75%,var(--yl-mint) 75%);
}