/* =====================================================================
   MŠ Jestřebí – Demo4: Demo2 (vzhled ZŠ v barvách MŠ) + dětské prvky
   Hranaté tvary a typografie jako na webu ZŠ; navíc na úvodu Naše třídy a boxy pro rodiče,
   animované hřiště nad patičkou a ptáčci v obsahu stránky.
   ===================================================================== */
:root {
    --ms-sun: #f7b733;  --ms-sun-tint: #fff4d6;
    --ms-sky: #5bb8e8;  --ms-sky-tint: #e8f6fd;
    --ms-berry: #e85132; --ms-berry-tint: #fde9e4;
    --ms-mint-tint: #e6f5ee;
}
/* ---------- úvod: sekce ---------- */
.ms4-sec { padding: 72px 0 0; background: #fff; }
.ms4-sec + .ms4-sec { padding-top: 56px; }
.ms4-parents { padding-bottom: 40px !important; }
.ms4-title {
    position: relative; font-size: var(--fs-section, 28px) !important; font-weight: 700; line-height: var(--lh-tight, 1.3);
    color: var(--zs-ink); margin: 0 0 40px !important; padding-bottom: 18px;
}
.ms4-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 70px; height: 6px; background: var(--bar, #88c2a5); }

/* Naše třídy a Pro rodiče: karty přesně jako v Demo3 (oblé, písmo Grandstander, efekty při najetí) */
:root {
    --ms-mint: #6ec4a3;
    --ms-leaf: #2e7d61;
    --ms-sun: #f7b733;
    --ms-sun-tint: #fff4d6;
    --ms-sky: #9fdcf5;
    --ms-sky-tint: #e8f6fd;
    --ms-berry: #e85132;
    --ms-berry-tint: #fde9e4;
    --ms-lilac: #b89ce0;
    --ms-mint-tint: #e6f5ee;
    --ms-r: 12px;          /* oblé rohy karet na úvodu (Naše třídy, Pro rodiče) */
    --ms-r-sm: 14px;
    --ms-head: 'Grandstander', 'Poppins', sans-serif;
    --sq-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c9-6 15-6 22 0s14 6 21 0 14-6 22 0 14 6 21 0 14-6 22 0' fill='none' stroke='%236ec4a3' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --sq-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c9-6 15-6 22 0s14 6 21 0 14-6 22 0 14 6 21 0 14-6 22 0' fill='none' stroke='%23f7b733' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --sq-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c9-6 15-6 22 0s14 6 21 0 14-6 22 0 14 6 21 0 14-6 22 0' fill='none' stroke='%235bb8e8' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --sq-berry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c9-6 15-6 22 0s14 6 21 0 14-6 22 0 14 6 21 0 14-6 22 0' fill='none' stroke='%23e85132' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Naše třídy */
.ms3-class-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ms3-class {
    display: grid; grid-template-columns: 46% 1fr; align-items: center;
    border-radius: var(--ms-r); overflow: hidden; min-height: 220px;
    color: var(--zs-ink) !important;
    transition: background-color .25s;
}
.ms3-class-sun { background: var(--ms-sun-tint); }
.ms3-class-bug { background: var(--ms-berry-tint); }
.ms3-class-sun:hover, .ms3-class-sun:focus-visible { background: #ffe9ad; }
.ms3-class-bug:hover, .ms3-class-bug:focus-visible { background: #fbd3c9; }
.ms3-class-pic { height: 100%; background: #fff; display: flex; align-items: center; justify-content: center; padding: 18px; }
.ms3-class-pic { background: transparent; }
.ms3-class-pic img { width: 100%; height: 100%; max-height: 200px; object-fit: contain; mix-blend-mode: multiply; }   /* bílé pozadí obrázků tříd splyne s barvou dlaždice */
.ms3-class-txt { position: relative; padding: 28px 28px 28px 30px; }
.ms3-mascot { width: 64px; height: 64px; display: block; margin-bottom: 10px; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.ms3-class:hover .ms3-mascot { transform: rotate(-12deg) scale(1.08); }
.ms3-class strong { display: block; font-family: var(--ms-head); font-size: 30px; font-weight: 800; line-height: 1.1; }
.ms3-class-txt > span { display: block; margin-top: 6px; font-size: 16px; color: var(--zs-text); }
.ms3-class-txt > em { display: inline-block; margin-top: 16px; font-style: normal; font-weight: 600; font-size: 15px; color: var(--ms-leaf); }

/* Pro rodiče */
.ms3-parent-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ms3-parent {
    display: flex; flex-direction: column; gap: 14px;
    padding: 26px 22px 24px; border-radius: var(--ms-r);
    background: var(--c-tint); color: var(--zs-ink) !important;
    border: 2px solid transparent;
    transition: border-color .2s;
}
.ms3-parent:hover, .ms3-parent:focus-visible { border-color: var(--c); }
.ms3-parent .ms3-ico {
    width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--c-dark);
}
.ms3-parent .ms3-ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ms3-parent strong { font-family: var(--ms-head); font-size: 21px; font-weight: 700; line-height: 1.2; }
.ms3-parent span { font-size: 14px; line-height: 1.5; color: var(--zs-text); }
.ms3-c-sun   { --c: var(--ms-sun);   --c-tint: var(--ms-sun-tint);   --c-dark: #a8700a; }
.ms3-c-mint  { --c: var(--ms-mint);  --c-tint: var(--ms-mint-tint);  --c-dark: var(--ms-leaf); }
.ms3-c-sky   { --c: #5bb8e8;         --c-tint: var(--ms-sky-tint);   --c-dark: #1f74a6; }
.ms3-c-berry { --c: var(--ms-berry); --c-tint: var(--ms-berry-tint); --c-dark: #b33a20; }

@media (max-width: 999px) {
    .ms3-parent-grid { grid-template-columns: 1fr 1fr; }
    .ms3-class-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .ms3-class { grid-template-columns: 1fr; }
    .ms3-class-pic { height: 180px; }
    .ms3-parent-grid { gap: 12px; }
    .ms3-parent { padding: 18px 16px; }
}
@media (max-width: 600px) { .ms4-sec { padding-top: 48px; } .ms4-title { font-size: 24px !important; } }


/* karty tříd i v obsahu stránky (Mateřská škola › Třídy) – vypnout styly textu stránky (podtržení, okraje obrázků) */
.ms3-on-page { margin: 8px 0 40px; }
.static-default .ms3-on-page a.ms3-class, .static-default .ms3-on-page a.ms3-class:hover { text-decoration: none !important; border-bottom: 0 !important; color: var(--zs-ink) !important; }
.static-default .ms3-on-page img { margin: 0 !important; border-radius: 0 !important; max-width: 100%; }
.static-default .ms3-on-page .ms3-mascot { margin-bottom: 10px !important; }
.static-default .ms3-on-page .ms3-class-txt > span, .static-default .ms3-on-page .ms3-class-txt > em { line-height: 1.4; }
.static-default .ms3-on-page strong { color: var(--zs-ink); font-weight: 800; }
@media (min-width: 1000px) and (max-width: 1279px) { .ms3-on-page { grid-template-columns: 1fr; } }


/* ---------- soubory ke stažení: obyčejné odkazy jako v textu stránek + velikost souboru (MŠ) ---------- */
.list-files { max-width: none !important; gap: 10px !important; }
.static-default .list-files__item.zs-flink, .list-files__item.zs-flink { padding: 0 !important; margin: 0 !important; background: none !important; }
.list-files__item.zs-flink::before, .zs-flink a::before { display: none !important; }
.zs-flink-ext {
    display: inline-block; margin-right: 8px; padding: 3px 5px 2px; vertical-align: 2px;
    font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; color: #fff; background: var(--k, #5a524c);
}
.zs-flink--pdf { --k: #c93f22; } .zs-flink--doc { --k: #0a618e; } .zs-flink--xls { --k: #168246; }
.zs-flink--ppt { --k: #b85f0a; } .zs-flink--img { --k: #762c85; }
.zs-flink-size { margin-left: 6px; font-size: 13px; color: #7a7570; white-space: nowrap; }

/* =====================================================================
   Animace pro děti (stejné jako Demo3)
   ===================================================================== */
/* hřiště místo obrázku dvou dětí */
#green_bg_wave_cover { position: relative; margin-top: clamp(0px, calc(25vw - 110px), 190px); }
#green_bg_wave_cover .img_kids { display: none; }
.ms3-playground-wrap {
    position: absolute; z-index: 2;
    left: 50%; bottom: 74px; transform: translateX(-50%);
    width: min(1200px, 100%); aspect-ratio: 4 / 1;
}
.ms3-playground { display: block; width: 100%; height: 100%; overflow: visible; }
.ms3-tap { cursor: pointer; }
.ms3-tap .ms3-kid { transform-box: fill-box; transform-origin: 50% 100%; }
.ms3-tap.is-hop .ms3-kid { animation: ms3-hop .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes ms3-hop { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-26px) scale(1.06, .94); } 60% { transform: translateY(0) scale(1.08, .9); } 100% { transform: translateY(0) scale(1); } }

/* ptáčci: létají jen v obsahu stránky (pod menu), nad obsahem, myš ani kliknutí neblokují */
#kingster-page-wrapper { position: relative; }
.ms3-birds { position: absolute; left: 0; right: 0; top: 0; height: 640px; z-index: 6; pointer-events: none; overflow: hidden; }
.ms3-bird { position: absolute; left: -70px; animation: ms3-fly 30s linear infinite; }
.ms3-bird-bob { display: block; animation: ms3-bob 2.6s ease-in-out infinite alternate; }
.ms3-bird svg { display: block; width: 56px; height: 37px; overflow: visible; }
.ms3-wing { transform-box: view-box; transform-origin: 24px 20px; animation: ms3-flap .26s ease-in-out infinite alternate; }
/* každý ptáček jiná barva, velikost, výška a rychlost */
.ms3-bird-1 { top: 70px;  animation-duration: 24s; animation-delay: -3s;  --b: #5bb8e8; --bd: #2f8fc4; --bl: #e8f6fd; }
.ms3-bird-2 { top: 190px; animation-duration: 31s; animation-delay: -14s; --b: #6ec4a3; --bd: #2e7d61; --bl: #e6f5ee; }
.ms3-bird-2 svg { width: 44px; height: 29px; }
.ms3-bird-3 { top: 40px;  animation-duration: 38s; animation-delay: -27s; --b: #f7b733; --bd: #d48a0e; --bl: #fff4d6; }
.ms3-bird-3 svg { width: 38px; height: 25px; }
.ms3-bird-3 .ms3-wing { animation-duration: .2s; }
.ms3-bird-4 { top: 330px; animation-duration: 44s; animation-delay: -9s;  --b: #e85132; --bd: #b33a20; --bl: #fde9e4; animation-name: ms3-fly-back; left: auto; right: -70px; }
.ms3-bird-4 svg { transform: scaleX(-1); }
.ms3-bird-5 { top: 260px; animation-duration: 27s; animation-delay: -20s; --b: #b89ce0; --bd: #8a68c4; --bl: #f1ebfa; }
.ms3-bird-5 svg { width: 40px; height: 27px; }
@keyframes ms3-fly { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 140px)); } }
@keyframes ms3-fly-back { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 140px)); } }
@keyframes ms3-bob { from { transform: translateY(-12px) rotate(-3deg); } to { transform: translateY(12px) rotate(3deg); } }
@keyframes ms3-flap { from { transform: scaleY(1); } to { transform: scaleY(-.75); } }

@media (max-width: 767px) {
    /* na mobilu hřiště větší a oříznuté do stran (uprostřed skluzavka a houpačka na váhy) */
    #green_bg_wave_cover { height: 230px !important; margin-top: 0; overflow: hidden; }
    .ms3-playground-wrap { bottom: 46px; width: 620px; }
    .ms3-bird-4, .ms3-bird-5 { display: none; }
    .ms3-birds { height: 520px; }
}
@media (prefers-reduced-motion: reduce) {
    .ms3-birds { display: none; }
    .ms3-tap.is-hop .ms3-kid { animation: none; }
}

/* ---------- Jídelní lístek: odkaz na portál Strava.cz ---------- */
.ms5-strava {
    display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 36px; align-items: center;
    background: var(--ms-mint-tint); border-radius: var(--ms-r); padding: 34px 36px; margin: 6px 0 34px;
}
.ms5-strava-pic { display: block; }
.ms5-strava-pic img { display: block; width: 100%; height: auto; transition: transform .3s ease; }
.ms5-strava-pic:hover img { transform: rotate(-2deg) scale(1.03); }
.ms5-strava-kicker { margin: 0 0 4px !important; font-family: var(--ms-head); font-weight: 700; font-size: 17px; color: var(--ms-leaf); }
.static-default .ms5-strava h2 { margin: 0 0 12px; padding: 0; font-family: var(--ms-head); font-size: 30px; font-weight: 800; line-height: 1.15; }
.static-default .ms5-strava h2:before { display: none; }
.ms5-strava p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; }
.static-default .ms5-steps, .ms5-steps { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: ms5; display: grid; gap: 10px; }
.ms5-steps li { counter-increment: ms5; position: relative; padding: 4px 0 4px 46px; margin: 0; font-weight: 600; line-height: 1.4; list-style: none; }
.ms5-steps li::before {
    content: counter(ms5); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--ms-head); font-weight: 800; font-size: 17px; color: #fff; background: var(--ms-sun);
}
.ms5-steps li:nth-child(2)::before { background: var(--ms-mint); }
.ms5-steps li:nth-child(3)::before { background: #5bb8e8; }
.static-default a.ms5-strava-btn, a.ms5-strava-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px;
    background: var(--ms-berry); color: #fff !important; text-decoration: none !important;
    font-family: var(--ms-head); font-weight: 700; font-size: 19px; line-height: 1.2;
    box-shadow: 0 5px 0 #b33a20; transition: transform .15s ease, box-shadow .15s ease;
}
a.ms5-strava-btn::after { content: "↗"; font-size: 20px; }
a.ms5-strava-btn:hover, a.ms5-strava-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 7px 0 #b33a20; }
a.ms5-strava-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b33a20; }
.ms5-strava-note { display: block; margin-top: 14px; font-size: 13px; color: #5f6b66; }
@media (max-width: 860px) {
    .ms5-strava { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; text-align: left; }
    .ms5-strava-pic { max-width: 280px; margin: 0 auto; }
    .static-default .ms5-strava h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { .ms5-strava-pic img, a.ms5-strava-btn { transition: none; } }