/* skolacrcb.cz – design system
   Mobile first. Breakpoints: 640px, 960px, 1160px (desktop navigation), 1240px (container). */

/* ---------- Fonts (self-hosted, OFL) ---------- */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/IBMPlexSans-Regular-Latin1.678efa63c3fb.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/IBMPlexSans-Regular-Latin2.72d89b52ddc0.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/IBMPlexSans-Italic-Latin1.a09d712a8467.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/IBMPlexSans-Italic-Latin2.7f2d4612c4d4.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/IBMPlexSans-Medium-Latin1.e0399fc4473d.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/IBMPlexSans-Medium-Latin2.497f7ca8f78e.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/IBMPlexSans-SemiBold-Latin1.106da8161b57.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/IBMPlexSans-SemiBold-Latin2.fb04fa4acdbb.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/IBMPlexSans-Bold-Latin1.102e1e2880b8.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/IBMPlexSans-Bold-Latin2.40aaa3f805c7.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
/* Until the web font arrives: a local font with the metrics of IBM Plex Sans, so the text does not jump. */
@font-face { font-family: "Plex Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 99.5%; ascent-override: 103%; descent-override: 27.6%; line-gap-override: 0%; }

/* Poppins: only the school name next to the butterfly. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins-latin-500.a09f2fccfee3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins-latin-ext-500.1f24684cbd72.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-latin-600.72993dddf88a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins-latin-ext-600.a575b6d9df98.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* Caveat (handwriting): only the school's motto. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/caveat-latin-600-normal.018947f2ec96.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/caveat-latin-ext-600-normal.ffc350bd6873.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */

:root {
  --navy: #17184A;        /* main dark: text, header, VOŠ card, footer */
  --accent: #B84A2A;      /* terracotta: accent, labels, buttons, open-day box */
  --accent-dark: #9A3C21; /* hover */
  --accent-text: #FFF4EF;  /* quieter text on terracotta */
  --accent-bg: #FBEDE7;    /* light terracotta: the lesson going on in the bell schedule */
  --lavender: #B7B8F2;    /* light accent on dark, app icons */
  --lavender-bg: #EDEDFB; /* quick links strip */
  --ghost-line: #8A8BE8;  /* outline of a button on dark */
  --sand: #F5F4F0;        /* tinted sections */
  --text: #17184A;
  --muted: #57586E;
  --faint: #6E6F82;        /* quieter than muted, still AA for small text: tags on the home page */
  --line: #E2E1DA;
  --white: #FFFFFF;
  --logo-blue: #494AE0;   /* logo only */
  --font: "IBM Plex Sans", "Plex Fallback", system-ui, sans-serif;
  --font-logo: "Poppins", "IBM Plex Sans", sans-serif;
  --font-motto: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  --radius: 6px;
  --container: 1240px;

  /* Derived */
  --link: #3B3CC4;
  --link-hover: #2A2B96;
  --navy-line: #33346E;      /* rules on navy */
  --navy-muted: #9FA0E0;     /* small headings on navy */
  --navy-text: #E6E6FA;      /* body text on navy */
  --lavender-line: #D9DAF2;
  --sand-dark: #E2DFD7;      /* image placeholder */
  --gutter: 16px;
  --focus: var(--link);
}

@media (min-width: 640px) { :root { --gutter: 24px; } }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--white);
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-weight: 700; }
h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.375rem); letter-spacing: -0.025em; line-height: 1.1; }
h2 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.1; }
h3 { font-size: 1.375rem; line-height: 1.2; }
p { margin: 0; }
/* No lone word on the last line of a paragraph; ignored by older browsers. */
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.on-dark { --focus: var(--white); }
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Phone numbers are links for dialling but are not underlined and never wrap. The second
   attribute selector only raises the specificity above the rules that underline links
   in addresses and contact cards. */
a[href^="tel:"][href], a[href^="tel:"][href]:hover { text-decoration: none; white-space: nowrap; }

/* ---------- Utilities ---------- */

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  padding: 10px 16px; background: var(--white); color: var(--navy); font-weight: 700;
  border-radius: var(--radius); box-shadow: 0 4px 16px rgb(23 24 74 / 0.25);
}
.skip-link:focus { top: 8px; }

/* Note above the footer of a machine-translated page. */
.translation-note { padding: 14px 0; background: var(--sand); border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); }

.icon { flex: none; display: block; }
.icon--mask { background: currentColor; mask: center / contain no-repeat; -webkit-mask: center / contain no-repeat; }
.icon--strava { mask-image: url("../img/icons/strava-mono.9f14fc59b167.png"); -webkit-mask-image: url("../img/icons/strava-mono.9f14fc59b167.png"); }
.icon--skolniprogram { mask-image: url("../img/icons/skolniprogram-mono.80d43b51a34e.png"); -webkit-mask-image: url("../img/icons/skolniprogram-mono.80d43b51a34e.png"); }

/* Eyebrow: small caps label above headings. */
.eyebrow {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
/* Tag of a news post: "#Studium", also inside an eyebrow. */
.hashtag { text-transform: none; letter-spacing: normal; }

.arrow-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }

.button {
  display: inline-block; padding: 12px 20px; border-radius: 8px;
  background: var(--accent); color: var(--white);
  font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.07em;
}
.button:hover { background: var(--accent-dark); color: var(--white); text-decoration: none; }
.button--small { padding: 10px 16px; font-size: 0.8125rem; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.button--ghost { background: none; color: var(--white); box-shadow: inset 0 0 0 1.5px var(--ghost-line); }
.button--ghost:hover { background: rgb(255 255 255 / 0.12); }

.badge {
  display: inline-block; min-width: 1.6em; padding: 3px 6px; border-radius: 999px;
  background: var(--accent); color: var(--white);
  font-size: 0.6875rem; font-weight: 700; line-height: 1; text-align: center; letter-spacing: 0;
}

.tag {
  align-self: flex-start; display: inline-block; padding: 1px 8px; border-radius: 3px;
  background: var(--accent); color: var(--white);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

.section-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 12px 40px; margin-bottom: 24px;
}
.section-head h2 { margin-top: 6px; }
.section-head__lead { margin-top: 10px; max-width: 640px; color: var(--muted); }

/* ---------- Sticky page header ---------- */

/* The utility bar and the header with the main menu stay at the top while scrolling
   (owner, 11. 10. 2026). In-page anchors stop below it; on low screens (a phone held
   sideways) it scrolls away as it would cover too much. */
html { --anchor-top: 150px; scroll-padding-top: var(--anchor-top); }
.site-header { position: sticky; top: 0; z-index: 30; }
@media (max-width: 1159.98px) {
  /* The open menu can be taller than the screen: it scrolls inside the header. */
  .site-header { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 1160px) { html { --anchor-top: 190px; } }
@media (max-height: 520px) {
  html { --anchor-top: 16px; }
  .site-header { position: static; max-height: none; overflow: visible; }
}

/* ---------- Utility bar ---------- */

.utility { background: var(--navy); color: var(--navy-text); font-size: 0.75rem; }
.utility a { color: var(--white); }
.utility__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 16px;
  padding-block: 7px;
}
.utility__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; min-width: 0; }
.utility__nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.utility__nav a { display: flex; align-items: center; gap: 6px; padding-block: 2px; font-weight: 600; }
.utility__nav .icon { color: var(--lavender); display: none; }
.utility__sep { display: none; width: 1px; height: 18px; background: #3A3B7A; }
/* On small screens the other apps live in the menu grid. */
.utility__nav--apps { display: none; }
.utility__side { display: flex; align-items: center; gap: 16px; flex: none; }
.utility__phone { display: flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.utility__phone .icon { color: var(--lavender); }
.utility__social { display: none; padding: 2px; }
.utility__search { display: none; padding: 2px; }

.lang ul { display: flex; gap: 2px; font-weight: 700; letter-spacing: 0.04em; }
.lang a { display: block; padding: 1px 7px; border-radius: 4px; }
.lang abbr { text-decoration: none; }
.lang a[aria-current] { background: var(--white); color: var(--navy); }

@media (min-width: 1160px) {
  .utility { font-size: 0.875rem; }
  .utility__inner { padding-block: 8px; }
  .utility__nav ul { gap: 4px 18px; }
  .utility__nav a { font-weight: 400; }
  .utility__nav .icon, .utility__social, .utility__search { display: block; }
  .utility__nav--apps { display: block; }
  .utility__sep { display: block; }
  .lang a { padding: 1px 9px; }
}

/* ---------- Header ---------- */

.header { position: relative; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); }
.header__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 16px; padding-block: 12px;
}

.logo { display: flex; flex: none; align-items: center; gap: 8px; color: var(--logo-blue); }
.logo:hover { text-decoration: none; color: var(--logo-blue); }
.logo img { display: block; height: 40px; width: auto; }

.school-name {
  display: flex; flex-direction: column;
  font-family: var(--font-logo); font-size: 0.625rem; line-height: 1.35; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.school-name strong { font-weight: 600; }
.school-name > * { white-space: nowrap; }
.logo__text { display: flex; flex-direction: column; gap: 2px; }
/* The motto is handwritten, so that it reads as a slogan, not a fifth line of the name. */
.logo__motto { font-family: var(--font-motto); font-size: 1rem; font-weight: 600; line-height: 1.1; white-space: nowrap; color: var(--accent); }
/* On the home page the motto appears as if written by hand: revealed from left to right.
   The clip reaches past the box so that Caveat's swashes are not cut off. */
@keyframes motto-write {
  from { clip-path: inset(-0.4em 100% -0.4em -0.3em); }
  to { clip-path: inset(-0.4em -0.3em -0.4em -0.3em); }
}
.logo__motto--write { animation: motto-write 1.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.5s both; }
@media (prefers-reduced-motion: reduce) { .logo__motto--write { animation: none; } }

.hamburger {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px; color: var(--navy);
}
.hamburger__close, .hamburger[aria-expanded="true"] .hamburger__open { display: none; }
.hamburger[aria-expanded="true"] .hamburger__close { display: block; }

.header__menu { display: none; flex: 1 0 100%; padding-top: 12px; }
.header__menu.is-open { display: block; }

.menu-search { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding-left: 12px; border: 1px solid #8E8C86; border-radius: 8px; color: var(--muted); }
.menu-search input { width: 100%; padding: 10px 12px 10px 0; border: 0; font: inherit; font-size: 0.9375rem; color: var(--navy); background: none; }
.menu-search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.menu-search input:focus { outline: none; }

.mainnav__fallback { display: none; }
.mainnav__item { border-bottom: 1px solid var(--line); }
.mainnav__item:first-child { border-top: 1px solid var(--line); }
.mainnav__toggle, .mainnav__fallback, .mainnav__home {
  width: 100%; padding: 16px 0; background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: space-between; gap: 6px;
  font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--navy); text-align: left;
}
.mainnav__toggle { display: flex; }
.mainnav__home { display: flex; justify-content: flex-start; gap: 10px; }
.mainnav__home:hover { text-decoration: none; color: var(--accent); }
.mainnav__toggle .icon { transition: transform 0.15s; }
.mainnav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.megamenu__inner { padding: 0 0 12px 4px; }
.megamenu__group { margin-bottom: 10px; }
.megamenu__heading {
  padding: 6px 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
}
.megamenu__group a { display: block; padding: 7px 0; color: var(--navy); }

.promo-box {
  display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; padding: 18px;
  background: var(--accent); color: var(--white); border-radius: 8px;
}
a.promo-box:hover { background: var(--accent-dark); color: var(--white); text-decoration: none; }
.promo-box__eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); }
.promo-box__title { font-size: 1.625rem; line-height: 1.15; }
.promo-box__link { margin-top: auto; padding-top: 6px; font-weight: 700; text-decoration: underline; }

.header__actions { display: flex; gap: 10px; margin-top: 16px; }
.header__actions > * { flex: 1 1 0; text-align: center; }
.header__link {
  padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--navy); white-space: nowrap;
}

.appgrid { margin: 16px calc(var(--gutter) * -1) -12px; padding: 16px var(--gutter); background: var(--navy); }
.appgrid__heading {
  margin-bottom: 10px; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--navy-muted);
}
.appgrid ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.appgrid a {
  display: flex; align-items: center; justify-content: center; height: 100%; padding: 10px 8px;
  border: 1px solid #3A3B7A; border-radius: var(--radius);
  color: var(--white); font-size: 0.8125rem; font-weight: 600; text-align: center; line-height: 1.25;
}

@media (min-width: 1160px) {
  .header__bar { flex-wrap: nowrap; gap: 24px; padding-block: 18px; }
  .logo { gap: 14px; }
  .logo img { height: 62px; }
  .school-name { font-size: 0.78125rem; line-height: 1.38; letter-spacing: 0.06em; }
  .logo__motto { font-size: 1.25rem; }
  .hamburger, .appgrid, .menu-search { display: none; }

  .header__menu, .header__menu.is-open {
    display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 24px;
    padding-top: 0;
  }
  .mainnav { margin-inline: auto; }
  .mainnav__list { display: flex; align-items: center; gap: 4px 28px; }
  .mainnav__item, .mainnav__item:first-child { border: 0; }
  .mainnav__toggle, .mainnav__fallback {
    width: auto; padding: 6px 0; letter-spacing: 0.06em; white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
  }
  .mainnav__toggle:hover, .mainnav__toggle[aria-expanded="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
  /* Home is just the icon here; its text stays for screen readers. */
  .mainnav__home { width: auto; padding: 6px 4px; }
  .mainnav__home span {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  .megamenu {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 32px rgb(23 24 74 / 0.10);
  }
  .megamenu__inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 32px;
    padding: 36px var(--gutter) 32px;
  }
  .megamenu__groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px 32px; }
  .megamenu__group { margin: 0; }
  .megamenu__heading { padding: 0; margin-bottom: 14px; font-size: 0.75rem; letter-spacing: 0.12em; }
  .megamenu__group ul { display: flex; flex-direction: column; gap: 10px; font-weight: 600; }
  .megamenu__group a { padding: 0; color: var(--link); }
  /* A section with a single group spreads its links into columns. */
  .megamenu__group:only-child { grid-column: 1 / -1; }
  .megamenu__group:only-child ul { display: block; columns: 4 220px; column-gap: 32px; }
  .megamenu__group:only-child li { break-inside: avoid; padding-bottom: 10px; }
  .promo-box { width: 280px; margin: 0; padding: 24px; gap: 8px; }

  .header__actions { margin: 0; flex: none; align-items: center; }
  .header__actions > * { flex: none; }
  .header__link { padding: 6px 0; border: 0; display: inline-flex; align-items: center; gap: 6px; }
}

/* Narrow desktop: tighten the header so that everything stays on one line. */
@media (min-width: 1160px) and (max-width: 1299px) {
  .utility__links { gap: 6px 16px; }
  .utility__nav ul { gap: 4px 14px; }
  .header__bar, .header__menu, .header__menu.is-open { gap: 16px; }
  .logo { gap: 10px; }
  .logo img { height: 52px; }
  .school-name { font-size: 0.6875rem; }
  .logo__motto { font-size: 1.125rem; }
  .mainnav__list { gap: 4px 18px; }
  .mainnav__toggle, .mainnav__fallback { font-size: 0.875rem; }
}

/* ---------- Footer ---------- */

.footer { background: var(--navy); color: var(--navy-text); font-size: 0.9375rem; }
.footer a { color: var(--white); }
.footer address a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.footer__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px 40px;
  padding-block: 40px 32px; line-height: 1.7;
}
.footer__brand { display: flex; flex-direction: column; color: var(--white); }
.footer__brand img { align-self: flex-start; height: 52px; width: auto; margin-bottom: 14px; }
.footer__brand .school-name { font-size: 0.8125rem; line-height: 1.45; letter-spacing: 0.06em; }
.footer__motto { margin: 12px 0 0; font-family: var(--font-motto); font-size: 1.375rem; font-weight: 600; line-height: 1.1; color: var(--lavender); }
.footer__hashtag { margin: 8px 0 0; font-size: 0.9375rem; font-weight: 700; }
.footer__hashtag a { color: var(--navy-text); text-decoration: none; }
.footer__hashtag a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__old-site { margin: -8px auto 0; padding-bottom: 24px; text-align: center; text-wrap: balance; font-size: 0.8125rem; color: var(--navy-muted); }
.footer__old-site a { color: var(--navy-text); font-weight: 600; }
.footer__heading {
  margin-bottom: 12px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--navy-muted); line-height: 1.55;
}
.footer__ids { margin: 0; }
.footer__ids div { display: flex; gap: 0.4em; }
.footer__ids dd { margin: 0; }
.footer__bottom { border-top: 1px solid var(--navy-line); }
.footer__strip {
  display: flex; flex-wrap: wrap; gap: 6px 22px; padding-block: 18px;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.footer__strip li:first-child { color: var(--navy-muted); margin-right: auto; }
.footer__strip a { color: var(--navy-text); }
@media (min-width: 960px) {
  .footer__grid { padding-block: 56px 40px; }
}
@media (min-width: 1160px) {
  .footer__grid { grid-template-columns: 1.1fr 1fr 1fr 1.15fr 0.8fr; gap: 32px; }
  /* The bottom strip must stay on one line on desktop. */
  .footer__strip { flex-wrap: nowrap; white-space: nowrap; }
}

/* ---------- Home: alert strip ---------- */

.alert-strip { background: var(--lavender-bg); border-bottom: 1px solid #D6D6F5; font-size: 0.8125rem; }
.alert-strip__inner { display: flex; align-items: flex-start; gap: 10px; padding-block: 10px; }
.alert-strip .icon { margin-top: 0.15em; color: var(--link); }
.alert-strip p { font-weight: 600; }
.alert-strip a { margin-left: 0.4em; font-weight: 700; }
.alert-strip--warning { background: #FCE7DA; border-color: #F3CDB8; }
.alert-strip--warning .icon { color: var(--accent); }
@media (min-width: 640px) { .alert-strip { font-size: 0.9375rem; } }

/* ---------- Home: hero ---------- */

.hero { background: var(--navy); color: var(--white); }
.hero__inner { display: flex; flex-direction: column; gap: 18px; padding-block: 28px; }
.hero__text { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.hero__rule { display: block; width: 40px; height: 4px; margin-bottom: 2px; background: var(--accent); }
.hero__eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lavender); }
.hero__lead { max-width: 520px; font-size: 0.9375rem; color: #D4D5F5; }
/* The lead keeps the editor's lines (dates one per line); a blank line starts a new paragraph. */
.hero__lead { font-variant-numeric: tabular-nums; }
.hero__lead p + p { margin-top: 0.6em; }
/* Opening hours: days in one column, times below each other in the next. */
.hero__hours { display: grid; grid-template-columns: max-content max-content; column-gap: 0.75em; }
.hero__day { font-weight: 600; color: var(--white); }
/* A web address in the lead is a link (old.skolacrcb.cz in the banner of the new website). */
.hero__lead a { color: var(--white); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero__lead a:hover { text-decoration-thickness: 2px; }
/* Lines of the lead that are dates of the event (Banner.lead_paragraphs). All of them are
   indented like the text in the label of the nearest one, so the dates stand under each other. */
.hero__date { display: inline-block; padding-inline: 10px; }
.hero__date--past { opacity: 0.6; text-decoration-thickness: 2px; }
/* Dates with times: the dates in one column, the times below each other in the next; every
   line (the label of the nearest one too) spans both columns of the shared grid. */
.hero__dates { display: grid; grid-template-columns: max-content max-content; column-gap: 0.75em; }
.hero__dates .hero__date { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.hero__date--next {
  margin-block: 3px; padding-block: 1px; border-radius: var(--radius);
  background: var(--accent); color: var(--white); font-weight: 700;
}
.hero__media { min-width: 0; }
.hero__image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.hero__title { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.375rem); letter-spacing: -0.025em; line-height: 1.1; }
/* Several banners ([data-hero]): the slides share one grid cell, so the hero keeps the height
   of the tallest one and only the active slide is visible. This is the layout from the first
   paint (no jump when the script starts); nojs.css puts the slides below each other. */
[data-hero] .hero__slides { display: grid; }
[data-hero] .hero__slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.4s, visibility 0.4s; }
[data-hero] .hero__slide.is-active { visibility: visible; opacity: 1; }
[data-hero] .hero__inner { padding-bottom: 16px; }
.hero__controls { display: flex; align-items: center; gap: 10px; padding-bottom: 20px; }
.hero__button {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--navy-line); border-radius: 50%; color: var(--white); cursor: pointer;
}
.hero__button:hover { border-color: var(--lavender); color: var(--lavender); }
.hero__button[data-hero-prev] .icon { transform: rotate(180deg); }
.hero__pause { margin-left: auto; }
.hero__pause .icon:last-child, .hero__pause[aria-pressed="true"] .icon:first-child { display: none; }
.hero__pause[aria-pressed="true"] .icon:last-child { display: block; }
.hero__dots { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hero__dots button {
  display: block; width: 28px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
}
.hero__dots button::before {
  content: ""; display: block; width: 12px; height: 12px; margin: auto; border: 2px solid var(--lavender); border-radius: 50%;
}
.hero__dots button[aria-current="true"]::before { background: var(--lavender); }
/* More photos of a banner take turns in one frame (site.js): the next one fades in over the
   previous one and every photo slowly zooms in while it is shown; it stands still with the
   hero paused. */
.hero__media--photos { display: grid; overflow: hidden; border-radius: var(--radius); isolation: isolate; }
.hero__media--photos .hero__image { grid-area: 1 / 1; border-radius: 0; transition: opacity 1.4s ease; }
.hero__media--photos .hero__image.is-top { z-index: 1; }
.hero__media--photos .hero__image.is-coming { opacity: 0; }
.hero__media--photos .hero__image.is-drifting { animation: hero-drift 11s cubic-bezier(0.25, 0.4, 0.4, 1) forwards; }
[data-hero].is-still .hero__image.is-drifting { animation-play-state: paused; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  [data-hero] .hero__slide, .hero__media--photos .hero__image { transition: none; }
  .hero__media--photos .hero__image.is-drifting { animation: none; }
}
@media (min-width: 960px) {
  .hero__inner { flex-direction: row; align-items: center; gap: 56px; padding-block: 64px; }
  .hero__text { flex: 1 1 460px; gap: 22px; }
  .hero__rule { width: 48px; }
  .hero__eyebrow { font-size: 0.875rem; }
  .hero__lead { font-size: 1.1875rem; }
  [data-hero] .hero__inner { padding-bottom: 24px; }
  .hero__controls { padding-bottom: 32px; }
  /* The photo fills the right half of the strip from its top to its bottom edge and to the
     edge of the window (owner, 26 Oct 2026); the text and the controls keep the left half. */
  .hero { position: relative; overflow: hidden; }
  .hero__inner { min-height: 440px; }
  .hero__text { flex: 0 1 auto; width: calc(50% - 40px); }
  .hero__controls { width: calc(50% - 40px); }
  .hero__media { position: absolute; inset: 0 0 0 50%; }
  .hero__media--photos { grid-template: 100% / 100%; border-radius: 0; }
  .hero__image { height: 100%; aspect-ratio: auto; border-radius: 0; }
}

/* ---------- Home: quick links ---------- */

.quick { background: var(--lavender-bg); border-bottom: 1px solid var(--lavender-line); }
.quick__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-block: 12px; }
.quick__link {
  display: flex; align-items: flex-start; gap: 10px; height: 100%; padding: 14px 12px;
  background: var(--white); border-radius: var(--radius); color: var(--navy);
}
.quick__link:hover { color: var(--navy); text-decoration: none; }
.quick__link > .icon { color: var(--accent); }
.quick__text { min-width: 0; padding-top: 0.2em; line-height: 1.25; }
.quick__title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
@media (min-width: 640px) {
  .quick__list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; padding-block: 0; }
  .quick__link { gap: 12px; padding: 18px 16px; background: none; border-radius: 0; border-right: 1px solid var(--lavender-line); }
  .quick__list li:first-child .quick__link { border-left: 1px solid var(--lavender-line); }
  .quick__link:hover { background: rgb(255 255 255 / 0.6); }
  .quick__title { font-size: 0.875rem; }
}

/* ---------- Pagination ---------- */

.pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.pagination > :last-child { justify-self: end; }
.pagination > span { color: var(--muted); }
.pagination [rel="prev"] .icon { transform: rotate(180deg); }

/* ---------- Home: study path ---------- */

.study { background: var(--sand); padding-block: 28px; }

.program-card {
  --program: var(--navy);
  display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden;
  background: color-mix(in srgb, var(--program) 14%, var(--white));
  border-top: 3px solid var(--program); border-radius: var(--radius); color: var(--navy);
  transition: box-shadow 0.15s;
}
.program-card:hover { color: var(--navy); text-decoration: none; box-shadow: 0 6px 18px rgb(23 24 74 / 0.16); }
.program-card__image { flex: none; display: block; width: 96px; height: 72px; object-fit: cover; }
.program-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px 12px 0; }
.program-card__image + .program-card__body { padding-left: 0; }
.program-card:not(:has(.program-card__image)) .program-card__body { padding-left: 14px; }
.program-card__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--program); }
.program-card__title { font-size: 1.0625rem; line-height: 1.2; }

@media (min-width: 640px) {
  .program-card--photo { flex-direction: column; align-items: stretch; gap: 0; border-top-width: 4px; }
  .program-card--photo .program-card__image { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .program-card--photo .program-card__body { padding: 16px 18px 18px; gap: 4px; }
  .program-card--photo .program-card__label { font-size: 0.75rem; letter-spacing: 0.08em; }
  .program-card--photo .program-card__title { font-size: 1.375rem; }
}
@media (min-width: 960px) {
  .study { padding-block: 44px 48px; }
}

/* Three panels by what the applicant wants: maturita, an apprenticeship, or study after maturita. */
.tracks { display: grid; gap: 12px; }
.track { display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 8px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius); }
.track__title { font-size: 1.375rem; }
.track__meta { margin-top: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.track__list { margin-top: 12px; }
.track__link { --program: var(--navy); display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--navy); }
.track__link:hover { color: var(--program); text-decoration: none; }
.track__thumb { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--program); }
.track__text { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.track__text strong { font-size: 1.0625rem; }
.track__text span { font-size: 0.8125rem; color: var(--muted); }
.track__next { margin-top: 12px; }
.track__next + .track__list { margin-top: 8px; }
.track--dark { background: var(--navy); border-color: var(--navy); border-top-color: var(--lavender); color: var(--white); --focus: var(--accent); }
.track--dark .track__meta, .track--dark .track__text span { color: var(--navy-muted); }
.track--dark .track__link { border-top-color: var(--navy-line); color: var(--white); }
.track--dark .track__link:hover { color: var(--lavender); }
.track--dark .track__thumb { color: var(--lavender); }
/* The photo fills what is left of the panel. */
.track__photo { flex: 1 1 auto; display: block; width: calc(100% + 36px); max-width: none; height: auto; min-height: 0; margin: 10px -18px -8px; object-fit: cover; }
@media (min-width: 960px) {
  .tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .track { padding: 22px 22px 10px; }
  /* Beside the other panels the photo takes the height they leave, it does not add to it. */
  .track__photo { flex-basis: 0; width: calc(100% + 44px); min-height: 160px; margin-inline: -22px; margin-bottom: -10px; }
}

/* ---------- Home: today strip ---------- */

/* Small framed widgets (school clock, substitutions, days off, lunch) at the head of the
   calendar column, beside the news: below each other on wide screens, side by side on
   smaller ones. Small type and no strong colour. */
.today { font-size: 0.8125rem; line-height: 1.4; }
.today__widgets { display: flex; flex-wrap: wrap; gap: 8px; }
.today__widget { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); }
.today__widget ul { min-width: 0; }
/* Every widget of the side column starts the same way: pictogram and the name of the section. */
.widget-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; color: var(--navy); }
.widget-head > .icon { color: var(--accent); }
.widget-head .today__next { margin-left: auto; font-size: 0.8125rem; font-weight: 400; }
/* The clock and the days off explain themselves: one row without a heading. */
.today__clock, .today__dayoff { flex-direction: row; align-items: center; gap: 10px; }
.today__dayoff > .icon { color: var(--accent); }
/* Lunch gets the room it needs so that the meals do not wrap; the others share the rest. */
.today__lunch { flex: 1 1 100%; }
.today__events { flex: 1 1 150px; }
.today__substitution { flex: 1 1 250px; }
/* The clock with today's date and the days until the next day off share one frame. */
.today__group { flex: 1 1 250px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.today__group > .today__widget { border: 0; border-radius: 0; background: none; }
.today__group > .today__clock { flex: 1; }
.today__group > .today__dayoff { border-top: 1px solid var(--line); }
.today__group:has(a:hover) { border-color: var(--navy); }
/* Every widget is one link: no underlines, the frame darkens instead. */
.today a { color: inherit; text-decoration: none; }
a.today__widget:hover, .today__events:has(a:hover) { border-color: var(--navy); }
/* The lunch stands out: tinted, with a terracotta edge and its own small heading. */
.today__lunch li { display: flex; gap: 6px; }
.today__meal-number { flex: 0 0 0.9em; font-weight: 700; color: var(--muted); }
.today__dial { flex: none; width: 68px; height: 68px; }
.today__face { fill: var(--white); stroke: var(--navy); stroke-width: 4; }
.today__ticks { fill: none; stroke: var(--navy); stroke-width: 4; }
.today__ticks--minor { stroke-width: 2; }
.today__hand { fill: none; stroke: var(--navy); stroke-linecap: round; }
.today__hand--hour { stroke-width: 6; }
.today__hand--minute { stroke-width: 4; }
.today__pin { fill: var(--navy); }
/* Time left: to the end of the lesson (terracotta) or of the break (blue). */
.today__wedge { fill: var(--accent); opacity: 0.85; }
.today__clock[data-state="break"] .today__wedge { fill: var(--link); opacity: 0.6; }
.today__status { display: flex; flex-direction: column; min-width: 0; }
/* Today's date as a leaf of a tear-off calendar, at the right edge of the clock widget. */
.today__leaf { flex: none; display: flex; flex-direction: column; align-items: center; width: 60px; margin-left: auto; padding-bottom: 4px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 2px 0 -1px var(--white), 0 2px 0 0 var(--line), 0 4px 0 -2px var(--white), 0 4px 0 -1px var(--line); line-height: 1.2; text-align: center; }
.today__leaf-weekday { align-self: stretch; padding: 2px 0; background: var(--accent); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); }
.today__leaf-day { margin-top: 2px; font-size: 1.625rem; font-weight: 700; line-height: 1.1; color: var(--navy); }
.today__leaf-month { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.today__status span { color: var(--muted); }
.today__status--inline { flex-direction: row; flex-wrap: wrap; column-gap: 5px; }
/* Substitutions: heading with the button, the counts, and below them one change at a time. */
.today__events .today__changes li { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--muted); }
.today__changes strong { color: var(--text); }
.today__events { position: relative; }
.today__event::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
/* Several events ([data-events]) share one grid cell and the script shows one at a time. */
.today__events[data-events] ul { display: grid; }
.today__events[data-events] li { grid-area: 1 / 1; visibility: hidden; }
.today__events[data-events] li.is-current { visibility: visible; }
.today__events li { display: flex; flex-direction: column; min-width: 0; }
.today__event { font-weight: 700; color: var(--navy); }
.today .calendar__meta { font-size: inherit; }
.today__next { position: relative; flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: none; font: inherit; font-variant-numeric: tabular-nums; color: var(--muted); cursor: pointer; }
.today__next:hover { border-color: var(--navy); color: var(--navy); }

@media (min-width: 640px) {
  .today__lunch { flex: 2 1 300px; }
  .today__dial { width: 84px; height: 84px; }
}
@media (min-width: 960px) {
  .today__widgets { flex-direction: column; flex-wrap: nowrap; }
  .today__widget, .today__lunch, .today__group { flex: none; }
  .today__widget, .today__lunch { padding: 10px 12px; }
}

/* ---------- Home: news + calendar ---------- */

.home-columns { display: flex; flex-direction: column; gap: 28px; padding-block: 28px; }
.news, .calendar, .home-side { min-width: 0; }
.home-side { display: flex; flex-direction: column; gap: 28px; }

.news__main { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.news__main-image, .news__thumb { overflow: hidden; background: var(--sand-dark); border-radius: var(--radius); }
.news__main-image { aspect-ratio: 3 / 2; }
.news__main-image img, .news__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news__main-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.news__meta { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.news__main h3 { font-size: 1.25rem; line-height: 1.25; }
.news h3 a { color: var(--navy); }
.news .pagination { margin-top: 24px; border-top: 0; }
/* Part of the lead: a few lines under the heading, the rest is in the article. */
.news__teaser { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--muted); }
/* The other posts are cards with a large photo on top and no teaser: photos rather than text
   (the owner, 22. 10. 2026). The whole card is the link; the photo zooms a little on hover. */
.news__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; padding-top: 16px; }
.news__item { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.news__thumb { aspect-ratio: 3 / 2; }
.news__thumb img { transition: transform 0.3s ease; }
.news__item:has(a:hover) .news__thumb img { transform: scale(1.04); }
.news__item h3 a::after { content: ""; position: absolute; inset: 0; }
.news__date { font-size: 0.75rem; color: var(--muted); }
/* Tags on the home page are quieter than the date (the owner, 14. 10. 2026). */
.news .hashtag { font-size: 0.6875rem; font-weight: 400; color: var(--faint); }
.news__item h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 2px; font-size: 0.9375rem; line-height: 1.3; }
@media (min-width: 640px) {
  .news__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .news__thumb img { transition: none; }
}

.calendar h2 { margin-bottom: 12px; }
.calendar__list { border-top: 1px solid var(--navy); }
.calendar__item { display: flex; gap: 14px; margin-inline: -10px; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.calendar__item--highlight { background: var(--sand); }
.calendar__date { flex: 0 0 54px; font-size: 0.9375rem; font-weight: 700; line-height: 1.5; color: var(--accent); white-space: nowrap; }
/* Multi-day event: both days close below each other, a small centred dash between. */
.calendar__range { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.calendar__dash { font-size: 0.75rem; line-height: 0.9; }
a.calendar__title { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.calendar__meta { display: flex; flex-wrap: wrap; font-size: 0.875rem; line-height: 1.4; color: var(--muted); }
.calendar__meta > span:not(:last-child)::after { content: "·"; margin-inline: 0.4em; }
.calendar h2 a { color: var(--navy); }
.calendar__item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calendar__title { font-weight: 700; }
/* Highlighted event: a star before the title instead of a "Recommended" tag. */
.calendar__star { display: inline-flex; margin-right: 0.3em; color: var(--accent); vertical-align: -0.1em; }
.calendar__empty { padding: 16px 0; border-top: 1px solid var(--navy); color: var(--muted); }


@media (min-width: 960px) {
  .home-columns { flex-direction: row; align-items: stretch; gap: 48px; padding-block: 48px 0; }
  .news { flex: 999 1 640px; }
  .home-side { flex: 1 1 300px; gap: 32px; }
  .calendar { flex: none; display: flex; flex-direction: column; }
  .section-head h2 { margin-top: 0; }
  .news__main { flex-direction: row; gap: 24px; padding-bottom: 28px; }
  .news__main-image { flex: 1.7 1 0; }
  .news__main-text { flex: 1 1 0; gap: 10px; }
  .news__meta { font-size: 0.75rem; }
  .news__main h3 { font-size: 1.5rem; line-height: 1.2; }
  .news__list { padding-top: 28px; }
  .news__date { font-size: 0.8125rem; }
  .news__item h3 { font-size: 1rem; line-height: 1.35; }
  .calendar h2 { margin-bottom: 24px; }
  .calendar__item { gap: 18px; margin-inline: -12px; padding: 16px 12px; }
  .calendar__date { flex-basis: 62px; font-size: 1.0625rem; }
}

/* The calendar in the side column is one more framed widget: the same heading, small type.
   Its heading is a link stretched over the whole widget, so the frame darkens on hover. */
.home-side .calendar__heading { margin-bottom: 4px; }
.home-side .calendar__heading a { text-decoration: none; }
.home-side .calendar__heading a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.home-side .calendar:has(a:hover) { border-color: var(--navy); }
.home-side { gap: 8px; }
.home-side .calendar { position: relative; padding: 10px 12px 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.8125rem; line-height: 1.4; }
.home-side .calendar__list, .home-side .calendar__empty { border-top: 0; }
.home-side .calendar__item { gap: 10px; margin-inline: -12px; padding: 8px 12px; }
.home-side .calendar__date { flex-basis: 46px; font-size: inherit; line-height: 1.4; }
.home-side .calendar__meta { font-size: 0.75rem; }
.home-side .calendar .tag { font-size: 0.625rem; }
/* Lines are drawn above items: the last visible one may be followed by hidden spare ones. */
.home-side .calendar__item { border-bottom: 0; border-top: 1px solid var(--line); }
.home-side .calendar__item:first-child { border-top: 0; }
.calendar__item[hidden] { display: none; }
.home-side .calendar__empty { padding: 4px 0 10px; }

/* ---------- Home: gallery ---------- */

.life { background: var(--sand); padding-block: 24px; }
.life .section-head { align-items: baseline; margin-bottom: 12px; }
/* Small screens: one horizontally scrolling row of equal tiles. */
.tiles { display: flex; gap: 10px; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter); scroll-snap-type: x proximity; }
.tiles li { flex: 0 0 150px; height: 150px; scroll-snap-align: start; }
.tile {
  position: relative; display: flex; align-items: flex-end; width: 100%; height: 100%; overflow: hidden;
  padding: 10px; background: var(--sand-dark); border-radius: var(--radius);
  color: var(--navy); font-weight: 700; font-size: 0.875rem; line-height: 1.3;
}
.tile:hover { color: var(--navy); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s, opacity 1.2s ease; }
/* The next photo of a tile fades in over the previous one (site.js). */
.tile img.is-coming { opacity: 0; }
.tile--photo { color: var(--white); --focus: var(--accent); }
.tile--photo:hover { color: var(--white); }
.tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(23 24 74 / 0.85), rgb(23 24 74 / 0) 65%); }
.tile--photo:hover img { transform: scale(1.04); }
.tile__title { position: relative; z-index: 1; }
@media (min-width: 640px) {
  .life { margin-top: 0; padding-block: 44px 52px; }
  .life .section-head { margin-bottom: 24px; }
  .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 180px; gap: 12px; overflow: visible; margin: 0; padding: 0; }
  .tiles li { height: auto; }
  .tile { padding: 14px; font-size: 1rem; }
}
@media (min-width: 960px) { .life { margin-top: 48px; } }

/* ---------- Home: kitchen tip of the day ---------- */

/* A low terracotta band between the gallery and the partners (owner, 14 Oct 2026: a short
   closing note of the page, but a distinct divider; first navy, then terracotta; it took
   the place of the numbers strip, owner 16 Oct 2026). The title of today's post is a link stretched
   over the picture and the text; "Všechny tipy" is a link of its own. */
.tip-strip { background: var(--accent); color: var(--accent-text); --focus: var(--white); }
.tip-strip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding-block: 20px; }
.tip-strip__main { position: relative; display: flex; align-items: center; gap: 16px; flex: 1 1 520px; min-width: 0; }
.tip-strip__image {
  flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
  width: 112px; aspect-ratio: 16 / 9; border-radius: var(--radius);
  background: var(--accent-dark); color: var(--white);
}
.tip-strip__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.tip-strip__main:has(a:hover) .tip-strip__image img { transform: scale(1.05); }
.tip-strip__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tip-strip__heading { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4; color: var(--white); }
.tip-strip__heading span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--accent-text); }
.tip-strip__title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.tip-strip__title .tag { margin-right: 6px; vertical-align: 2px; background: var(--white); color: var(--accent); }
.tip-strip__title a { color: var(--white); text-decoration: none; }
.tip-strip__title a::after { content: ""; position: absolute; inset: 0; }
.tip-strip__title a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tip-strip__lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 760px; font-size: 0.875rem; line-height: 1.5; color: var(--accent-text); }
.tip-strip__lead strong { color: var(--white); }
.tip-strip__more { color: var(--white); }
.tip-strip__more:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 639.98px) {
  .tip-strip__heading span { display: none; }
}
@media (min-width: 640px) {
  .tip-strip__image { width: 200px; }
  .tip-strip__main { gap: 20px; }
}
@media (min-width: 960px) {
  .tip-strip__inner { padding-block: 24px; }
  .tip-strip__image { width: 240px; }
  .tip-strip__main { gap: 28px; }
  .tip-strip__text { gap: 6px; }
  .tip-strip__title { font-size: 1.875rem; line-height: 1.2; }
  .tip-strip__title .tag { vertical-align: 6px; }
  .tip-strip__lead { font-size: 1rem; }
}

/* ---------- Home: partners ---------- */

.partners__inner { display: flex; flex-wrap: wrap; gap: 16px 32px; padding-block: 24px; }
.partners__group { flex: 1 1 260px; min-width: 0; }
.partners__group--faculty,
.partners__group--international { flex: 2 1 520px; }
.partners__heading { margin-bottom: 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); line-height: 1.55; }
.partners__group ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.partners__logo { display: flex; align-items: center; justify-content: center; height: 80px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--navy); font-weight: 600; text-align: center; }
.partners__logo img { display: block; max-height: 48px; max-width: 86%; width: auto; object-fit: contain; }
@media (min-width: 960px) {
  .partners__inner { padding-block: 56px 64px; }
  .partners__heading { margin-bottom: 12px; font-size: 0.8125rem; letter-spacing: 0.12em; }
  .partners__group ul { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
  .partners__logo { height: 104px; }
  .partners__logo img { max-height: 64px; }
}
/* Founder and faculties in the first row, the international projects below the founder
   (owner, 21 Oct 2026). One grid of three columns: the tiles of all rows line up. */
@media (min-width: 960px) {
  .partners__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .partners__group ul { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .partners__group--faculty { grid-column: span 2; }
  .partners__group--international { grid-column: 1 / span 2; }
  .partners__group--faculty ul,
  .partners__group--international ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* From 1160 px all five tiles in one row, the projects after the faculties (owner, 21 Oct 2026). */
@media (min-width: 1160px) {
  .partners__inner { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .partners__group--international { grid-column: span 2; }
}