/* ============================================================
   MŠ Sobotka — Homepage V2 (PLAYFULNESS TEST)
   Loads AFTER colors_and_type.css + kit.css — bold overrides only.
   Display font swapped to Baloo 2 (bubbly, full Czech incl. ě).
   ============================================================ */

:root {
  --font-display: 'Baloo 2', 'Fredoka', system-ui, sans-serif;
}
h1, h2, h3, h4, .display, .eyebrow,
.brand .name, .btn, .nav-links a, .tile h3, .class-card h3, .news-card h3,
.section-head .eyebrow, .stat .n { font-family: var(--font-display) !important; }
h1, h2 { font-weight: 800; letter-spacing: -0.01em; }
h3 { font-weight: 700; }

/* ---- Bolder, brighter section palette ---- */
.hero {
  background:
    radial-gradient(closest-side, rgba(255,255,255,.95) 68%, transparent) 14% 20% / 150px 70px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.9) 68%, transparent) 25% 14% / 100px 52px no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.85) 68%, transparent) 82% 12% / 120px 58px no-repeat,
    var(--sky-soft);
}
.tiles-section {
  background:
    radial-gradient(var(--bee) 2.4px, transparent 2.6px) 0 0 / 30px 30px,
    var(--bee-soft);
}
.classes { background: var(--sky-soft); }

/* ---- Festonové (scalloped) přechody místo vln ---- */
.wave { display: none !important; }
.hero, .tiles-section, .about, .classes, .why, .news, .cta-band { position: relative; }
.hero::after, .tiles-section::after, .about::after, .classes::after,
.why::after, .news::after, .cta-band::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 4;
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 12px, transparent 13px) 0 0 / 40px 26px repeat-x;
          mask: radial-gradient(circle at 50% 100%, #000 12px, transparent 13px) 0 0 / 40px 26px repeat-x;
}
.hero::after          { background: var(--bee-soft); }
.tiles-section::after { background: var(--green-100); }
.about::after         { background: var(--sky-soft); }
.classes::after       { background: var(--bee-soft); }
.why::after           { background: var(--mole-soft); }
.news::after          { background: var(--green-700); }
.cta-band::after      { background: var(--ink-900); }

/* ---- Rounder, thicker, more-tilted bubbly cards ---- */
.tile { border-radius: 34px; border: 4px solid #fff; }
.tile:hover { transform: translateY(-8px) rotate(-2deg) scale(1.02); }
.tile-ic { width: 74px; height: 74px; border-radius: 26px; }
.tile-ic .ic { width: 36px; height: 36px; }

.class-card { border-radius: 38px; border: 4px solid #fff; }
.class-card:nth-child(odd)  { --tilt: -3deg; }
.class-card:nth-child(even) { --tilt: 3deg; }
.class-card:hover { transform: translateY(-10px) rotate(0deg) scale(1.03); }
.class-card .top { height: 158px; }
.class-card .chip { border: 2px solid currentColor; font-weight: 700; white-space: nowrap; font-size: .72rem; padding: 5px 10px; }

.news-card { border-radius: 32px; border: 4px solid #fff; }
.news-card:nth-child(odd)  { transform: rotate(-2deg); }
.news-card:nth-child(even) { transform: rotate(2deg); }

.why-ic { width: 96px; height: 96px; border-width: 4px; }

/* ---- Bigger, candy-chunky buttons ---- */
.btn { font-size: 1.16rem; font-weight: 700; padding: 18px 34px; }
.btn-primary { box-shadow: 0 8px 0 var(--green-700); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 11px 0 var(--green-700); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--green-700); }
.btn-secondary { box-shadow: 0 8px 0 var(--bee-deep); }
.btn-secondary:hover { transform: translateY(-3px); box-shadow: 0 11px 0 var(--bee-deep); }
.btn-ghost { box-shadow: 0 8px 0 var(--green-300), inset 0 0 0 2px var(--green-300); }
.btn-ghost:hover { transform: translateY(-3px); box-shadow: 0 11px 0 var(--green-300), inset 0 0 0 2px var(--green-300); }
.btn-white { box-shadow: 0 8px 0 rgba(120,90,40,.22); }

/* ---- Hero gets a bigger marker + bobbing sticker ---- */
.hl { background: linear-gradient(transparent 54%, var(--bee) 54%); padding: 0 6px; }
.hero-copy h1 { font-size: clamp(2.9rem, 6.4vw, 4.8rem); }
.sticker { animation: wiggle 4.5s ease-in-out infinite; transform-origin: center; }
.hero-art .mascot { width: 132px; animation: bob 3s ease-in-out infinite; }

/* ---- Denser, livelier floating decor ---- */
.deco.float { animation-duration: 5.5s; }

/* ---- Section titles: bigger bubbly + thicker squiggle underline ---- */
.section-head h2, .news-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.section-head h2::after, .news-head h2::after { height: 13px; background: var(--green-500); }

/* ---- Pop the eyebrow into a little pill ---- */
.eyebrow {
  display: inline-block; background: #fff; color: var(--green-900);
  padding: 6px 16px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
  letter-spacing: .1em; white-space: nowrap;
}
/* keep the pill on its OWN line above the title (both are inline-block) */
.section-head .eyebrow { display: block; width: -moz-fit-content; width: fit-content; margin: 0 auto 14px; }
.news-head .eyebrow { display: block; width: -moz-fit-content; width: fit-content; margin: 0 0 10px; }
.cta-band .eyebrow { background: rgba(255,255,255,.18); color: #fff; }

/* ---- CTA even more festive ---- */
.cta-band h2 { font-size: clamp(2.2rem, 4.4vw, 3.3rem); }

@media (prefers-reduced-motion: reduce) {
  .sticker, .hero-art .mascot { animation: none !important; }
}

/* ============================================================
   SUBPAGE building blocks
   ============================================================ */
.page-hero { padding: 54px 0 66px; position: relative; }
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); max-width: 20ch; margin: 0 0 14px; }
.page-hero .lead { max-width: 54ch; }

.section-pad { padding: 64px 0; position: relative; }
.band { position: relative; overflow: clip; }
.band.scallop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: 4;
  background: var(--scallop, var(--cream-50));
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 12px, transparent 13px) 0 0 / 40px 26px repeat-x;
          mask: radial-gradient(circle at 50% 100%, #000 12px, transparent 13px) 0 0 / 40px 26px repeat-x;
}

/* text + photo split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.split .photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/3; border: 4px solid #fff; }
.split .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* feature / program cards */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { background: #fff; border-radius: 28px; border: 4px solid #fff; box-shadow: var(--shadow-sm); padding: 26px 24px; }
.feature-card .fic { width: 62px; height: 62px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.feature-card .fic .ic { width: 30px; height: 30px; }
.feature-card h3 { margin: 0 0 6px; font-size: 1.2rem; }
.feature-card p { margin: 0; font-size: .92rem; color: var(--ink-700); }

/* class detail rows */
.class-row { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: center; border-radius: 34px; border: 4px solid #fff; box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 22px; background: #fff; }
.class-row .cr-mascot { display: flex; align-items: center; justify-content: center; padding: 26px; }
.class-row .cr-mascot img { width: 158px; height: 158px; }
.class-row .cr-body { padding: 26px 30px 26px 0; }
.class-row .cr-tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }

/* timeline (denní režim) */
.timeline { display: grid; gap: 14px; }
.tl-item { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: start; background: #fff; border-radius: 20px; box-shadow: var(--shadow-sm); padding: 16px 22px; }
.tl-time { font-family: var(--font-display); font-weight: 700; color: var(--green-900); }
.tl-item h3 { margin: 0 0 2px; font-size: 1.1rem; }
.tl-item p { margin: 0; font-size: .9rem; color: var(--ink-700); }

/* steps */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { background: #fff; border-radius: 28px; border: 4px solid #fff; box-shadow: var(--shadow-sm); padding: 26px 24px; }
.step .num { width: 50px; height: 50px; border-radius: 16px; background: var(--green-500); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; box-shadow: 0 4px 0 var(--green-700); }
.step h3 { margin: 0 0 6px; font-size: 1.2rem; }
.step p { margin: 0; font-size: .92rem; color: var(--ink-700); }

/* document list */
.doc-list { display: grid; gap: 12px; }
.doc { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-sm); padding: 14px 18px; text-decoration: none; transition: transform var(--dur) var(--ease-soft), box-shadow var(--dur); }
.doc:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.doc .dic { width: 46px; height: 46px; border-radius: 14px; background: var(--beetle-soft); color: var(--beetle-deep); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.doc > div:not(.dic) { flex: 1; min-width: 0; }
.doc .dname { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); }
.doc .dmeta { font-size: .82rem; color: var(--ink-500); }
.doc .dl { margin-left: auto; color: var(--green-700); }

/* checklist */
.check-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm); padding: 14px 18px; }
.check-list li .ic { color: var(--green-700); width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }

/* contact card + map */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.info-card { background: #fff; border-radius: 28px; border: 4px solid #fff; box-shadow: var(--shadow-md); padding: 30px 32px; }
.info-card .row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.info-card .row:last-child { margin-bottom: 0; }
.info-card .row .ic { width: 24px; height: 24px; color: var(--green-700); flex: 0 0 auto; margin-top: 2px; }
.info-card .row .k { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); }
.info-card .row a { color: var(--green-900); text-decoration: none; }
.map-frame { border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-md); border: 4px solid #fff; aspect-ratio: 4/3; }
.map-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* callout band */
.callout { background: var(--green-100); border-radius: 32px; padding: 34px 38px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.callout .big { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: var(--green-900); line-height: 1; }
.callout .ctext h3 { margin: 0 0 4px; }
.callout .ctext p { margin: 0; color: var(--ink-700); }

@media (max-width: 900px) {
  .split, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .feature-grid, .steps-grid { grid-template-columns: 1fr; }
  .class-row { grid-template-columns: 1fr; }
  .class-row .cr-body { padding: 0 26px 26px; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; }
}