/* Vzhled webu SŠ řemesel Frýdek-Místek – podle grafického náhledu (Weby skol - nahledy), převedeno do šablony. */
/* Společný vzhled grafických náhledů webů škol – verze 2 (styl inspirovaný majales.cz: světlo, paprsky,
   velký nadpis uprostřed, zaoblené karty bez rámečků, tlačítka do kulata, bubliny), barvy vždy podle školy.
   Kontrast textu min. 7:1 (WCAG 2.2 AAA), velký text min. 4.5:1, viditelný fokus, bez pohybu při prefers-reduced-motion.
   Předchozí verze: spolecne-v1.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:#fff;color:var(--ink);font:400 1.125rem/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--brand);text-underline-offset:.2em;text-decoration-thickness:.09em}
a:hover{color:var(--ink)}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px #fff;border-radius:10px}
h1,h2,h3{font-family:var(--font-head);line-height:1.08;letter-spacing:-.015em;margin:0 0 .45em;color:var(--brand)}
h1{font-size:clamp(2.7rem,6.4vw,5.4rem);font-weight:800}
h2{font-size:clamp(2rem,3.6vw,3rem);font-weight:800}
h3{font-size:1.4rem;font-weight:800}
p{margin:0 0 1em}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;z-index:99}
.skip:focus{left:12px}
.znacka-nahledu{background:var(--ink);color:#fff;text-align:center;font:600 .9rem/1.4 var(--font-body);padding:8px 16px}
.znacka-nahledu b{color:var(--accent-on-ink)}

/* tlačítka do kulata */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:999px;font:800 1.05rem/1 var(--font-body);text-decoration:none;border:0;cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(0,0,0,.45)}
.btn-hl{background:var(--accent);color:var(--ink)}
.btn-hl:hover{background:var(--accent);color:var(--ink)}
.btn-ob{background:#fff;color:var(--brand)}
.btn-ob:hover{color:var(--ink)}
.btn-akc{background:var(--brand);color:#fff}
.btn-akc:hover{color:#fff}

/* horní lišta – tenká, decentní */
.lista{background:var(--brand-deep);color:#fff;font-size:.95rem}
.lista .wrap{display:flex;gap:18px;align-items:center;min-height:40px;flex-wrap:wrap}
.lista a{color:#fff;text-decoration:none;font-weight:600}
.lista a:hover{text-decoration:underline;color:#fff}
.lista .vpravo{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.jazyky{display:flex;gap:4px}
.jazyky a{padding:2px 9px;border-radius:999px}
.jazyky a[aria-current]{background:#fff;color:var(--brand-deep)}

/* hlavička – průsvitná nad oblohou */
.hlava{position:sticky;top:0;z-index:40;background:var(--hero-from);box-shadow:0 1px 0 rgba(255,255,255,.12)}
.hlava .wrap{display:flex;align-items:center;gap:18px;min-height:82px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;background:#fff;padding:8px 16px;border-radius:999px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.logo img{height:40px;width:auto}
.menu{display:flex;gap:2px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.menu a{display:block;padding:10px 14px;border-radius:999px;color:#fff;text-decoration:none;font-weight:700}
.menu a:hover{background:rgba(255,255,255,.14);color:#fff}
.menu a,.hlava .btn{white-space:nowrap}
@media (max-width:1320px){.menu a{padding:10px 10px;font-size:1rem}}
.hlava .btn{background:#fff;color:var(--brand);padding:13px 22px;box-shadow:none}
@media (max-width:980px){.menu{display:none}.hlava .btn{margin-left:auto}}

/* hero – plocha v barvě školy s vlastním motivem školy (--vzor), nadpis uprostřed */
.hero{position:relative;overflow:hidden;color:#fff;text-align:center;padding:clamp(48px,7vw,96px) 0 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%,var(--glow) 0,transparent 70%),
    var(--vzor,none),
    linear-gradient(180deg,var(--hero-from) 0,var(--hero-to) 100%);
  background-size:100% 100%,var(--vzor-size,auto),100% 100%}
.hero .wrap{display:block;position:relative;z-index:1}
.hero h1{color:#fff;max-width:14em;margin-inline:auto}
.hero h1 em{font-style:normal;color:var(--accent-on-ink)}
.stitek{display:inline-flex;align-items:center;gap:8px;font:800 .85rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:18px}
.sekce.tint .stitek{color:var(--ink)}
.hero .btn-akc,.hero .btn-ob{background:transparent;color:#fff;box-shadow:inset 0 0 0 3px #fff}
.hero .stitek{color:#fff;background:rgba(255,255,255,.14);padding:10px 16px;border-radius:999px}
.hero .vystup{font-size:clamp(1.15rem,1.6vw,1.35rem);color:#fff;max-width:38em;margin-inline:auto}
.tlacitka{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;justify-content:center}
.odpocet{margin:28px auto 0;display:inline-flex;gap:12px;align-items:center;background:#fff;color:var(--ink);border-radius:999px;padding:10px 22px 10px 10px;font-weight:700;box-shadow:0 12px 30px -14px rgba(0,0,0,.5)}
.odpocet b{display:grid;place-items:center;min-width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--ink);font:800 1.4rem/1 var(--font-head)}
/* fotky pod nadpisem: široký pás zaoblených fotek, samolepky jako bubliny */
.kolaz{position:relative;margin:clamp(36px,5vw,60px) auto 0;width:min(1180px,100% - 40px);display:grid;grid-template-columns:1.4fr 1fr;gap:16px;height:clamp(220px,32vw,420px)}
.kolaz figure{position:relative;margin:0;overflow:hidden;border-radius:28px 28px 0 0;box-shadow:0 -10px 40px -20px rgba(0,0,0,.6)}
.kolaz img{width:100%;height:100%;object-fit:cover}
.samolepka{position:absolute;z-index:3;background:#fff;color:var(--ink);font:800 .95rem/1.15 var(--font-head);padding:12px 18px;border-radius:999px;box-shadow:0 12px 30px -12px rgba(0,0,0,.55);text-align:left}
.samolepka span{display:block;color:var(--brand);font-size:1.45rem}
.samolepka.s1{left:3%;bottom:14%}
.samolepka.s2{right:3%;top:10%;background:var(--accent)}
.samolepka.s2 span{color:var(--ink)}
@media (max-width:760px){.kolaz{grid-template-columns:1fr;height:auto}.kolaz figure{height:220px}.kolaz figure+figure{display:none}}

/* sekce */
.sekce{padding:clamp(64px,9vw,112px) 0}
.sekce.tint{background:var(--tint)}
.sekce.tma{color:#fff;background:radial-gradient(ellipse 70% 60% at 50% 0,var(--glow) 0,transparent 70%),var(--vzor,none),linear-gradient(180deg,var(--hero-from),var(--hero-to));background-size:100% 100%,var(--vzor-size,auto),100% 100%}
.sekce.tma h2,.sekce.tma h3{color:#fff}
.sekce.tma a{color:#fff}
.sekce.tma a.btn-hl,.sekce.tma a.btn-hl:hover{color:var(--ink)}
.sekce.tma a.btn-ob,.sekce.tma a.btn-ob:hover{color:var(--brand)}
.nadpis{max-width:44rem;margin:0 auto clamp(32px,4vw,52px);text-align:center}
.nadpis p{font-size:1.2rem;color:var(--ink-soft)}
.sekce.tma .nadpis p{color:#fff}

/* filtr oborů – pilulky */
.filtry{display:flex;flex-wrap:wrap;gap:10px;margin:0 auto 30px;justify-content:center}
.filtry button{font:800 1rem/1 var(--font-body);padding:13px 20px;border-radius:999px;border:0;background:var(--tint);color:var(--ink);cursor:pointer}
.filtry button[aria-pressed=true]{background:var(--brand);color:#fff}

/* karty oborů – bez rámečků, ikona v kruhu s bublinami, text uprostřed */
.obory{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:22px}.obory>.obor{width:100%;max-width:560px;justify-self:center}
.obor{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:34px 22px 26px;border-radius:28px;background:#fff;text-decoration:none;color:var(--ink);box-shadow:0 18px 40px -24px rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s}
.obor:hover{transform:translateY(-4px);box-shadow:0 26px 50px -24px rgba(0,0,0,.45);color:var(--ink)}
/* ikona jako na majales.cz: čárová kresba v barvě školy, kolem kroužky (bubliny), bez podkladu */
.obor .ikona{position:relative;width:150px;height:110px;display:grid;place-items:center;background:none!important;color:var(--brand);font-size:2.2rem;margin-bottom:10px}
.obor .ikona svg{width:84px;height:84px;stroke-width:1.4}
.obor .ikona::before,.obor .ikona::after,.obor .ikona .bublina{content:"";position:absolute;border-radius:50%;border:2.5px solid var(--brand)}
.obor .ikona::before{width:30px;height:30px;left:4px;top:52px}
.obor .ikona::after{width:14px;height:14px;right:22px;top:2px}
.obor .ikona .bublina{width:22px;height:22px;right:4px;top:58px}
.obor h3{margin:.3em 0 .1em}
.obor p{color:var(--ink-soft)}
.obor .meta{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:auto;padding-top:10px}
.chip{display:inline-block;font:700 .9rem/1 var(--font-body);padding:8px 12px;border-radius:999px;background:var(--tint);color:var(--ink)}
.chip.m{background:var(--brand);color:#fff}

/* čísla – bubliny na obloze */
.cisla{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;text-align:center}
.cislo{padding:30px 20px;border-radius:999px 999px 28px 28px;background:rgba(255,255,255,.12)}
.cislo b{display:block;font:800 clamp(2.4rem,4vw,3.4rem)/1 var(--font-head);color:var(--accent-on-ink);margin-bottom:6px}
.cislo span{color:#fff;font-weight:700}

/* termíny – jako špendlíky na mapě */
.dod{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.termin{width:230px;padding:28px 20px 36px;border-radius:999px 999px 115px 115px;background:#fff;text-align:center;box-shadow:0 18px 40px -22px rgba(0,0,0,.4)}
.termin::before{content:"";display:block;width:46px;height:46px;margin:0 auto 14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:radial-gradient(circle at 50% 50%,#fff 0 7px,var(--brand) 8px)}
.termin .den{font:800 1.9rem/1.05 var(--font-head);color:var(--brand)}
.termin .kdy{font-weight:800;color:var(--brand);margin:.2em 0}
.termin p{margin:0;color:var(--ink-soft)}

/* život – zaoblené fotky a bubliny s citáty */
.zivot{display:grid;grid-template-columns:1.2fr 1fr 1fr;grid-auto-rows:230px;gap:18px}
.zivot figure{margin:0;border-radius:28px;overflow:hidden;position:relative;box-shadow:0 18px 40px -24px rgba(0,0,0,.4)}
.zivot figure:first-child{grid-row:span 2}
.zivot img{width:100%;height:100%;object-fit:cover}
.zivot figcaption{position:absolute;left:12px;bottom:12px;background:#fff;color:var(--ink);font-weight:800;padding:9px 16px;border-radius:999px;font-size:.95rem}
.hlas{position:relative;padding:26px;border-radius:28px;background:var(--tint);color:var(--ink);display:flex;flex-direction:column;justify-content:center;text-align:center}
.hlas p{font:800 1.15rem/1.4 var(--font-head);color:var(--ink)}
.hlas small{font-weight:700;color:var(--ink-soft)}
@media (max-width:820px){.zivot{grid-template-columns:1fr 1fr;grid-auto-rows:190px}.zivot figure:first-child{grid-column:span 2}}

/* rodiče – dlaždice s ikonou */
.dlazdice{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.dlazdice a{display:block;padding:26px;border-radius:28px;background:#fff;color:var(--ink);text-decoration:none;text-align:center;box-shadow:0 14px 32px -22px rgba(0,0,0,.35)}
.dlazdice a:hover{box-shadow:0 22px 44px -22px rgba(0,0,0,.45)}
.dlazdice b{display:block;font:800 1.2rem/1.2 var(--font-head);margin-bottom:6px;color:var(--brand)}

/* partneři */
.partneri{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.partneri span{padding:12px 20px;border-radius:999px;font-weight:800;background:#fff;box-shadow:0 10px 24px -18px rgba(0,0,0,.4)}
.sekce h3[style]{text-align:center}

/* patička */
.pata{background:var(--brand-deep);color:#fff;padding:72px 0 28px}
.pata a{color:#fff}
.pata .mrizka{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.pata h4{font:800 1rem/1.2 var(--font-head);text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;color:#fff}
.pata ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pata .spodek{margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.3);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.95rem}
.pata .vyvoj a{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.pata .vyvoj img{width:20px;height:20px;border-radius:5px;display:inline-block}
@media (max-width:820px){.pata .mrizka{grid-template-columns:1fr 1fr}}

/* ===== Světlá verze – pro školy, jejichž dnešní web je bílý (GJVJ, SŠ řemesel, POJ) ===== */
.site .lista{background:var(--tint);color:var(--ink)}
.site .lista a{color:var(--ink)}
.site .lista a:hover{color:var(--ink)}
.site .jazyky a[aria-current]{background:var(--brand);color:#fff}
.site .hlava{background:#fff;box-shadow:0 1px 0 var(--line),0 10px 30px -24px rgba(0,0,0,.35)}
.site .logo{box-shadow:none;padding-left:0}
.site .menu a{color:var(--ink)}
.site .menu a:hover{background:var(--tint);color:var(--ink)}
.site .hlava .btn{background:var(--brand);color:#fff}
.site .hero{color:var(--ink)}
.site .hero h1{color:var(--ink)}
.site .hero h1 em{color:var(--hero-em,var(--brand));background:var(--hero-em-bg,none);padding:0 .08em;border-radius:.12em}
.site .hero .stitek{color:#fff;background:var(--brand)}
.site .hero .vystup{color:var(--ink-soft)}
.site .hero .btn-akc{background:var(--brand);color:#fff;box-shadow:none}
.site .hero .btn-ob{background:#fff;color:var(--brand);box-shadow:inset 0 0 0 3px var(--brand)}
.site .odpocet{box-shadow:0 12px 30px -16px rgba(0,0,0,.35),0 0 0 1px var(--line)}
.site .sekce.tma{color:var(--ink);background:radial-gradient(ellipse 70% 60% at 50% 0,var(--glow) 0,transparent 70%),var(--vzor,none),linear-gradient(180deg,var(--tint),var(--tint));background-size:100% 100%,var(--vzor-size,auto),100% 100%}
.site .sekce.tma h2,.site .sekce.tma h3,.site .sekce.tma a,.site .sekce.tma .nadpis p{color:var(--ink)}
.site .sekce.tma a.btn-akc{color:#fff}
.site .sekce.tma .stitek{color:var(--ink)}
.site .cislo b{color:var(--brand)}
.site .cislo span{color:var(--ink)}
.site .znacka-nahledu b{color:var(--accent)}
.site .pata{background:var(--pata-bg,var(--tint));color:var(--ink)}
.site .pata a,.site .pata h4{color:var(--ink)}
.site .pata .spodek{border-top-color:rgba(0,0,0,.15)}

/* ===== Animace fotek (jako na dnešních webech škol) ===== */
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.09) translate(-1.5%,-1%)}}
@keyframes vyjed{from{opacity:0;transform:translateY(34px) scale(.98)}to{opacity:1;transform:none}}
@keyframes plovak{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-10px) rotate(var(--rot,0deg))}}
figure,.obor,.zivot a,.mozaika>*,.dlazdice a{overflow:hidden}
img{transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s}
a:hover img,figure:hover img,.obor:hover img,.mozaika>*:hover img{transform:scale(1.07)}
.hero img,.foto-velka img,.dvoj img{animation:kenburns 16s ease-in-out infinite alternate}
.samolepka{animation:plovak 5s ease-in-out infinite}
.samolepka.s2{animation-delay:-2.5s}
.js-anim .zjev{opacity:0}
.js-anim .zjev.videt{animation:vyjed .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--zpozdeni,0s)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-anim .zjev{opacity:1}
}.site .sekce.tma .stitek{color:var(--ink);background:#fff}
.site .sekce.tma p{color:var(--ink)}
.site .mobmenu summary{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.site .mobmenu ul{background:#fff;box-shadow:0 20px 30px -20px rgba(0,0,0,.35)}
.site .mobmenu a,.site .mobmenu a:hover{color:var(--ink)}
.site .mobmenu a:hover{background:var(--tint)}
.site .pata .pata-h,.site .pata h2{color:var(--ink)}
/* ===== SŠ řemesel Frýdek-Místek ===== */

:root{--pata-bg:#f0f4f5;--hero-em:#c4151b;--vzor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%234a4fa0'%3E%3Cpath d='M32 0V160M64 0V160M96 0V160M128 0V160M0 32H160M0 64H160M0 96H160M0 128H160' stroke-opacity='.07'/%3E%3Cpath d='M0 0H160V160' stroke-opacity='.12' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");--vzor-size:160px 160px;--hero-from:#ffffff;--hero-to:#f7f5f2;--glow:rgba(248,184,31,.16);--ink:#12143a;--ink-soft:#3b4656;--brand:#3f4492;--brand-deep:#34397f;--brand-bright:#c4151b;--accent:#f8b81f;--accent-on-ink:#f8b81f;--tint:#f4f5f8;--line:#e2e4ee;--font-head:"Archivo",system-ui,sans-serif;--font-body:"Inter",system-ui,sans-serif}

/* --- vlastní rozložení této školy (zaoblení 28px, stíny, bez rámečků) --- */
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
.hero h1{font-size:clamp(2.3rem,6.4vw,5.4rem)}
.odpocet{max-width:100%;text-align:left}
.btn{max-width:100%;text-align:center;line-height:1.2}

/* hlavní menu + mobilní menu */
nav.hlavni{margin-left:auto}
nav.hlavni .menu{margin-left:0}
.mobmenu{display:none}
.mobmenu summary{list-style:none;cursor:pointer;color:#fff;font-weight:800;padding:12px 18px;border-radius:999px;box-shadow:inset 0 0 0 2px #fff}
.mobmenu summary::-webkit-details-marker{display:none}
.mobmenu ul{position:absolute;left:0;right:0;top:100%;margin:0;padding:12px 20px 22px;list-style:none;background:var(--brand-deep);display:grid;gap:4px;box-shadow:0 24px 30px -20px rgba(0,0,0,.6)}
.mobmenu a{display:block;color:#fff;text-decoration:none;font-weight:700;padding:12px 16px;border-radius:999px}
.mobmenu a:hover{background:rgba(255,255,255,.14);color:#fff}
@media (max-width:1180px){nav.hlavni{display:none}.mobmenu{display:block}.hlava .btn{margin-left:auto}}
@media (max-width:520px){.hlava .wrap{flex-wrap:wrap;gap:10px;padding-block:10px;min-height:0}.logo img{height:32px}.hlava .btn{padding:11px 16px;font-size:.95rem}}

/* tmavá sekce – štítky a tlačítka */
.sekce.tma .stitek{color:#fff;background:rgba(255,255,255,.14);padding:10px 16px;border-radius:999px}
.sekce.tma .btn-hl{color:var(--ink)}
.sekce.tma .btn-ob{color:var(--brand)}
.sekce.tma p{color:#fff}

/* karty s fotkou nahoře */
.karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px}
.karta{position:relative;margin:0;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(0,0,0,.35);display:flex;flex-direction:column}
.karta>img{width:100%;aspect-ratio:4/3;object-fit:cover}
.karta .telo{padding:22px 24px 26px;display:flex;flex-direction:column;gap:6px;flex:1}
.karta h3{margin:0}
.karta p{color:var(--ink-soft);margin:0}
.karta .vice{margin-top:auto;padding-top:8px;font-weight:800}
.pilulka{position:absolute;left:14px;top:14px;z-index:2;background:#fff;color:var(--ink);font-weight:800;padding:9px 16px;border-radius:999px;font-size:.95rem;line-height:1.2;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}

/* fakta jako pilulky */
.fakta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;list-style:none;padding:0;margin:36px 0 0}
.fakta li{background:var(--tint);color:var(--ink);font-weight:800;padding:12px 20px;border-radius:999px}
.fakta b{color:var(--brand)}

/* dva sloupce: fotka + text */
.dvoj{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.dvoj figure,.foto-r{margin:0;position:relative;border-radius:28px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(0,0,0,.5)}
.dvoj figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dvoj h2{margin-top:0}
@media (max-width:860px){.dvoj{grid-template-columns:1fr}}
.seznam-pilulek{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:20px 0 28px}
.seznam-pilulek a,.sekce.tma .seznam-pilulek a{display:inline-block;padding:12px 18px;border-radius:999px;background:#fff;color:var(--brand);font-weight:800;text-decoration:none;box-shadow:0 10px 24px -16px rgba(0,0,0,.5)}
.seznam-pilulek a:hover,.sekce.tma .seznam-pilulek a:hover{color:var(--ink);text-decoration:underline}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo figure img{aspect-ratio:3/4}

/* kalendář */
.kalendar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:stretch;margin-top:48px}
.kalendar figure{margin:0;position:relative;border-radius:28px;overflow:hidden;min-height:280px;box-shadow:0 18px 40px -24px rgba(0,0,0,.4)}
.kalendar figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.akce{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.akce li{background:var(--tint);border-radius:28px;padding:20px 24px}
.akce h3{font-size:1.2rem;margin:0 0 .2em}
.akce p{margin:0;color:var(--ink-soft)}
@media (max-width:860px){.kalendar{grid-template-columns:1fr}}

/* obory s fotkou nahoře v kartě */
.obor[hidden]{display:none}
.obor.s-foto{padding:0 0 26px;overflow:hidden}
.obor .foto{width:100%;aspect-ratio:16/10;object-fit:cover}
.obor.s-foto .ikona{height:88px;margin:8px 0 0}
.obor.s-foto .ikona svg{width:62px;height:62px}
.obor.s-foto h3,.obor.s-foto p,.obor.s-foto .meta{padding-inline:22px}
.poradime{margin:40px auto 0;max-width:820px;background:#fff;border-radius:28px;padding:28px;text-align:center;box-shadow:0 18px 40px -24px rgba(0,0,0,.35)}
.poradime h3{margin-bottom:.3em}
.poradime .tlacitka{margin-top:16px}

/* pro žáky a rodiče: dlaždice + fotky vedle */
.se-fotkou{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:22px;align-items:start}
.se-fotkou aside{display:grid;gap:18px}
.se-fotkou aside figure{margin:0;position:relative;border-radius:28px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(0,0,0,.4)}
.se-fotkou aside img{width:100%;aspect-ratio:4/3;object-fit:cover}
.dlazdice.uzsi{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.sekce:not(.tint) .dlazdice a{background:var(--tint);box-shadow:none}
@media (max-width:900px){.se-fotkou{grid-template-columns:1fr}.se-fotkou aside{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.se-fotkou aside{grid-template-columns:1fr}}

/* Instagram mozaika */
.mozaika{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,17vw,210px);grid-auto-flow:dense;gap:14px}
.mozaika figure{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 14px 30px -20px rgba(0,0,0,.4)}
.mozaika img{width:100%;height:100%;object-fit:cover}
.mozaika .velka{grid-column:span 2;grid-row:span 2}
.mozaika .vys{grid-row:span 2}
@media (max-width:700px){.mozaika{grid-template-columns:repeat(2,1fr)}}
.stred{text-align:center;margin-top:32px}
.stred .tlacitka{margin-top:0}

/* rychlý kontakt */
.kontakty .karta .telo a{font-weight:800}
.kontakty ul{list-style:none;padding:0;margin:0;color:var(--ink-soft)}

/* patička */
.pata .mrizka{grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.pata-h{font:800 1rem/1.2 var(--font-head);text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;color:#fff}
.pata p{margin:0 0 12px}


/* ===== Podstránky, aktuality a články (převod do šablony, 2026-11-08) ===== */
.hlavicka-stranky{position:relative;overflow:hidden;color:var(--ink);padding:clamp(40px,6vw,76px) 0 clamp(30px,4vw,52px);background:radial-gradient(ellipse 60% 70% at 50% 0,var(--glow) 0,transparent 70%),var(--vzor,none),linear-gradient(180deg,var(--hero-from),var(--hero-to));background-size:100% 100%,var(--vzor-size,auto),100% 100%}
.hlavicka-stranky h1{color:var(--ink);margin:.25em 0 .3em;max-width:18em}
.hlavicka-stranky .vystup{color:var(--ink-soft);max-width:40em;font-size:clamp(1.1rem,1.5vw,1.3rem);margin:0}
.hlavicka-stranky .stitek{display:inline-block;color:#fff;background:var(--brand);padding:9px 16px;border-radius:999px}
.hlavicka-stranky .meta-clanku{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.cesta{font-size:.98rem;margin-bottom:18px;color:var(--ink)}
.cesta a{color:var(--ink);text-underline-offset:3px}
.hlava a[aria-current=page]:not(.btn){background:var(--tint)}
.sekce.tint p a:not(.btn),.sekce.tint li a:not(.btn),.sekce.tint td a{color:var(--brand-deep)}
.text{max-width:48em}
.text h2{margin-top:1.6em}
.text ul,.text ol{padding-left:1.3em}
.text li{margin:.35em 0}
.tabulka{overflow-x:auto;margin:1.2em 0}
.tabulka table{border-collapse:collapse;width:100%;min-width:520px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 14px 32px -24px rgba(0,0,0,.35);color:var(--ink)}
.tabulka th,.tabulka td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tabulka thead th{background:var(--tint)}
.soubory{list-style:none;padding:0;margin:1em 0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.soubory li{background:#fff;color:var(--ink);border-radius:20px;padding:16px 20px;box-shadow:0 12px 28px -22px rgba(0,0,0,.4)}
.soubory a,.sekce.tma .soubory a{color:var(--brand);font-weight:700}
.soubory small{color:var(--ink-soft);margin-left:6px}
.lide{list-style:none;padding:0;margin:1em 0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.lide li{background:#fff;color:var(--ink);border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:4px;box-shadow:0 14px 32px -24px rgba(0,0,0,.35)}
.lide b{font:800 1.12rem/1.25 var(--font-head)}
.lide span{color:var(--ink-soft)}
.lide a,.sekce.tma .lide a{color:var(--brand);font-weight:700;overflow-wrap:anywhere}
.galerie{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));margin:1.2em 0}
.galerie figure{margin:0;border-radius:24px;overflow:hidden;background:#fff;color:var(--ink)}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.galerie figcaption{padding:10px 14px;font-weight:700}
.mrizka-clanku{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.karta-clanku,.sekce.tma .karta-clanku{display:flex;flex-direction:column;background:#fff;border-radius:28px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:0 18px 40px -24px rgba(0,0,0,.35);transition:transform .15s}
.karta-clanku:hover{transform:translateY(-4px);color:var(--ink)}
.karta-clanku figure{margin:0;aspect-ratio:16/10;background:var(--tint)}
.karta-clanku figure img{width:100%;height:100%;object-fit:cover;display:block}
.karta-clanku .telo{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
.karta-clanku .meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.95rem;color:var(--ink-soft)}
.karta-clanku h3{margin:0;font-size:1.25rem;color:var(--ink)}
.karta-clanku p{margin:0;color:var(--ink-soft)}
.foto-misto{display:grid;place-items:center;height:100%;padding:20px;text-align:center;font:800 1.2rem/1.2 var(--font-head);color:#fff;background:var(--brand)}
.filtr-radek{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:26px}
.pole{font:inherit;padding:12px 18px;border-radius:999px;border:2px solid var(--ink-soft);min-width:min(320px,100%);background:#fff;color:var(--ink)}
.clanek-text{max-width:46em;margin-inline:auto}
.clanek-text img{max-width:100%;height:auto;border-radius:22px}
.hlavni-foto{margin:0 0 26px;border-radius:28px;overflow:hidden}
.hlavni-foto img{width:100%;max-height:560px;object-fit:cover;display:block}
.dalsi-clanky{margin-top:56px}
.oa-editor .zjev{opacity:1!important;animation:none!important}
@media (max-width:420px){.tabulka table{min-width:0}.tabulka th,.tabulka td{padding:10px}}

.hero h1,.hlavicka-stranky h1{hyphens:manual;-webkit-hyphens:manual}