.hero__title { font-size: var(--fs-h1-d); line-height: var(--lh-heading); color: var(--brand-black); margin: 0 0 var(--space-3); }
.hero__lead  { font-size: var(--fs-lead-d); color: var(--brand-black); margin: 0 0 var(--space-5); }
.hero__cta   { display: flex; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 719px) { .hero__title { font-size: var(--fs-h1-m); } .hero__lead { font-size: var(--fs-lead-m); } } .zst-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.zst-section-head h2 { margin: 0; } .zst-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); list-style: none; margin: 0; padding: 0; }
.zst-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
padding: var(--space-6) var(--space-4); text-align: center; text-decoration: none;
background: var(--bg-soft); border: 1px solid var(--border-subtle); border-top: 4px solid var(--brand-green);
border-radius: var(--radius-lg); color: var(--brand-black); font-weight: 600; font-size: var(--fs-h3-d);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.zst-tile:hover, .zst-tile:focus-visible { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.zst-tile__icon { width: 40px; height: 40px; color: var(--brand-green); } .zst-tile--ms { border-top-color: var(--brand-yellow); }
.zst-tile--ms .zst-tile__icon { color: var(--brand-yellow); }
.zst-tile--sj { border-top-color: var(--brand-red); }
.zst-tile--sj .zst-tile__icon { color: var(--brand-red); }
.zst-tile--sd { border-top-color: var(--brand-black); }
.zst-tile--sd .zst-tile__icon { color: var(--brand-black); }
@media (max-width: 1023px) { .zst-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .zst-tiles { grid-template-columns: 1fr; } } .skola-banner {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
padding: var(--space-6); border-radius: var(--radius-lg);
background: var(--brand-green-dark); color: #fff;
}
.skola-banner--ms { background: #8a6a00; } .skola-banner__title { margin: 0 0 var(--space-2); color: #fff; font-size: var(--fs-h2-d); }
.skola-banner__text { margin: 0; color: #fff; }
.skola-banner__cta {
display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
padding: var(--space-3) var(--space-5); background: var(--brand-red); color: #fff; text-decoration: none;
border-radius: var(--radius-pill); font-weight: 600;
}
.skola-banner__cta:hover, .skola-banner__cta:focus-visible { background: #7c171a; }
@media (max-width: 719px) { .skola-banner__title { font-size: var(--fs-h2-m); } } .zst-vize { text-align: center; }
.zst-vize__text { max-width: var(--content-max); margin: 0 auto var(--space-5); font-size: var(--fs-lead-d); } .zst-jidelnicek { background: var(--bg-soft); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); }
.zst-jidelnicek h2 { margin-top: 0; } .zst-rozcestnik { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.zst-rozcestnik__item {
display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
text-decoration: none; color: var(--brand-black); font-weight: 600;
}
.zst-rozcestnik__item:hover, .zst-rozcestnik__item:focus-visible { border-color: var(--brand-green); box-shadow: var(--shadow-card); }
.zst-rozcestnik__item .icon { color: var(--brand-green); }
@media (max-width: 719px) { .zst-rozcestnik { grid-template-columns: 1fr; } } .zst-projekty { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.zst-projekt { text-decoration: none; color: var(--brand-black); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--t-base); }
.zst-projekt:hover, .zst-projekt:focus-visible { box-shadow: var(--shadow-card-hover); }
.zst-projekt__foto img { display: block; width: 100%; height: 160px; object-fit: cover; }
.zst-projekt__nazev { font-size: var(--fs-h3-d); margin: var(--space-4); }
@media (max-width: 1023px) { .zst-projekty { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .zst-projekty { grid-template-columns: 1fr; } } .skola-dokumenty, .skola-uredni-deska, .skola-projekty { list-style: none; margin: 0; padding: 0; }
.skola-dokument, .skola-uredni__item { padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.skola-dokument__meta, .skola-uredni__cj { color: var(--brand-green-dark); font-size: var(--fs-meta-d); } article.zst-article { max-width: 70rem; margin-left: auto; margin-right: auto; display: flow-root; } .zst-article__head h1 { margin: 0 0 var(--space-2); }
.zst-article__head .article-meta { margin-bottom: var(--space-6); }
.zst-article__image {
float: left;
width: 300px;
max-width: 42%;
margin: var(--space-1) var(--space-6) var(--space-3) 0;
}
.zst-article__image img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.zst-article__content { font-size: var(--fs-body-d); line-height: var(--lh-body); }
.zst-article__content img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .zst-article__content > p,
.zst-article__content > ul,
.zst-article__content > ol,
.zst-article__content > h2,
.zst-article__content > h3,
.zst-article__content > h4,
.zst-article__content > blockquote { max-width: 100%; } @media (max-width: 719px) {
.zst-article__image { float: none; width: auto; max-width: 100%; margin: 0 0 var(--space-5); }
.zst-article__content { max-width: 100%; }
} .zst-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.zst-filter__item {
display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4);
border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); text-decoration: none;
color: var(--brand-black); font-size: var(--fs-meta-d); font-weight: 600;
}
.zst-filter__item:hover, .zst-filter__item:focus-visible { border-color: var(--brand-green); }
.zst-filter__item.is-active { background: var(--brand-green); color: #fff; border-color: var(--brand-green); }