/* ============================================================
   Školní jídelna Jana Babáka — home page
   ============================================================ */

:root {
  /* Official brand palette (barvy.pdf) */
  --mint: #dcfaee;
  --teal: #008089;
  --green: #81bb27;
  --amber: #f0ae00;

  /* Derived shades for gradients & hovers */
  --green-light: #93c93f;
  --green-dark: #6ba01e;
  --green-pale: #e7f4d2;        /* footer band — brand green tinted with white */
  --green-pale-dark: #d2e9a9;
  --teal-dark: #006970;
  --amber-dark: #d49a00;
  --amber-text: #9a6b00;   /* accessible amber for body-size text (4.69:1 on white) */
  --nav: #008089;
  --footer-dark: #14302c;      /* footer band — the dark green of the photo-less „Informace" hero */

  --ink: #333;
  --container: 1480px;
  --pad-x: 48px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #ffffff;
  color: var(--ink);
  overflow-x: hidden;
}

a { text-decoration: none; }

img { max-width: 100%; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.05);
}

.header-inner {
  /* The header spans the whole window instead of the centred content column:
     the logo sits at the left edge and the nav at the right, rather than both
     lining up with the text below them. Keeps .container's --pad-x gutter, so
     nothing touches the very edge of the screen. */
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand-logo {
  flex: none;
  display: block;
  height: 70px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}

.nav-link {
  font-size: 16px;
  font-weight: 700;
  color: var(--nav);
  transition: color 0.15s ease;
}

.nav-link:hover { color: var(--green); }

.btn-menu {
  flex: none;
  background: linear-gradient(180deg, var(--green-light), var(--green));
  color: #ffffff;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(84, 165, 35, 0.35);
  transition: background 0.15s ease;
}

.btn-menu:hover {
  background: linear-gradient(180deg, var(--green), var(--green-dark));
}

/* Mobile nav toggle (CSS-only) */
.nav-toggle { display: none; }

.nav-burger {
  display: none;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: #f3f8f1;
}

.nav-burger span {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--green);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-cta-mobile { display: none; }

/* ============ HERO ============ */

.hero {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}

.hero-slideshow {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  animation: hero-slideshow 18s infinite;
}

/* Paths relative to this stylesheet, not absolute /static/… ones: they keep
   working if STATIC_URL moves and they survive a hashing static-files storage,
   which rewrites relative url() references for us. */
.hero-slide-1 {
  background-image: url("../img/hero-1.jpg");
  background-position: center center;
  animation-delay: 0s;
}

.hero-slide-2 {
  background-image: url("../img/hero-2.jpg");
  background-position: center center;
  animation-delay: 6s;
}

.hero-slide-3 {
  background-image: url("../img/hero-3.jpg");
  background-position: center center;
  animation-delay: 12s;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(14, 28, 20, 0.82) 0%,
    rgba(14, 28, 20, 0.52) 36%,
    rgba(14, 28, 20, 0.12) 68%,
    rgba(14, 28, 20, 0.28) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 104px;
  padding-bottom: 96px;
}

.hero-title {
  margin: 0;
  font-size: 74px;
  line-height: 1.04;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  text-wrap: balance;
  max-width: 620px;
}

.hero-subtitle {
  margin: 26px 0 0;
  font-size: 25px;
  line-height: 1.45;
  font-weight: 600;
  color: #f1f5ee;
  max-width: 470px;
}

@keyframes hero-slideshow {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  38% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none;
  }

  .hero-slide-1 {
    opacity: 1;
  }
}



/* ============ MINT SECTION ============ */

.mint {
  position: relative;
  background: var(--mint);
  padding-top: 0;
  padding-bottom: 250px;
}

.mint-inner {
  position: relative;
  z-index: 3;
}


/* Tři karty vizuálně přesahují přes spodní hranu hero */
.feature-cards {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  transform: translateY(-50px);
}

@media (max-width: 760px) {

  .feature-cards {
    transform: none;
    grid-template-columns: 1fr;
    gap: 22px;
  }

}


/* Every card is an <a>, so the whole card is the hit area. Black text on all
   three: the gradients are light enough to carry it, and pure #000 rather
   than --ink because #333 drops to 2.9:1 on the teal card. */
.feature-card {
  min-height: 300px;
  border-radius: 30px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-card:hover .feature-card-title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.feature-card:focus-visible {
  outline: 3px solid #000000;
  outline-offset: -5px;
}

@media (prefers-reduced-motion: reduce) {
  .feature-card {
    transition: none;
  }

  .feature-card:hover {
    transform: none;
  }
}


/* The hover lift deepens each variant's own shadow — one shared colour would
   read as a grey smudge under the green and teal cards. */
.feature-card--green {
  background: linear-gradient(165deg, #9bcc4a 0%, var(--green-dark) 100%);
  box-shadow: 0 20px 44px rgba(40, 70, 20, 0.22);
}

.feature-card--green:hover {
  box-shadow: 0 26px 52px rgba(40, 70, 20, 0.3);
}

.feature-card--teal {
  background: linear-gradient(165deg, #2a9aa2 0%, var(--teal) 100%);
  box-shadow: 0 20px 44px rgba(20, 60, 70, 0.22);
}

.feature-card--teal:hover {
  box-shadow: 0 26px 52px rgba(20, 60, 70, 0.3);
}

.feature-card--amber {
  background: linear-gradient(165deg, #ffc23d 0%, var(--amber) 100%);
  box-shadow: 0 20px 44px rgba(120, 80, 10, 0.22);
}

.feature-card--amber:hover {
  box-shadow: 0 26px 52px rgba(120, 80, 10, 0.3);
}

/* The icon files draw their own white disc, so the white here is only what
   shows before the SVG arrives; the shadow stays on the container, where it
   can follow the circle instead of the image's square box. */
.feature-card-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.feature-card-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.feature-card-title {
  margin: 26px 0 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.feature-card-text {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
  opacity: 0.95;
}


/* ============ AKTUÁLNĚ ============ */

.news-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 42px;
  margin-top: 60px;
  align-items: start;
}

.news-intro {
  background: #ffffff;
  border-radius: 30px;
  padding: 56px;
  box-shadow: 0 18px 40px rgba(30, 60, 45, 0.07);
  min-height: 470px;
}

.news-intro-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 46px;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -0.5px;
}

/* Sized off the text rather than fixed, so the icon keeps its proportion to
   the heading when the font shrinks on mobile. flex-shrink: 0 keeps the disc
   round if the heading ever has to wrap. */
.news-intro-icon {
  flex-shrink: 0;
  width: 0.95em;
  height: 0.95em;
}

/* Důležitá aktualita v levém sloupci -------------------------------------

   A mint panel inside the white intro card, the treatment the úřední hodiny
   panel it replaced used to have: the tint sets it apart from the „Aktuálně"
   heading without adding a second shadow to the column. */
.news-important {
  display: block;
  margin-top: 26px;
  padding: 24px 26px;
  background: var(--mint);
  border-radius: 22px;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.news-important:hover,
.news-important:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 105, 112, 0.18);
}

.news-important-date {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--teal);
}

.news-important-title {
  margin: 6px 0 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--teal-dark);
}

.news-important-text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: #46514e;
}

/* The same badge the aktuality cards wear on their date: teal pill, white
   lettering, the same radius and shadow — the link reads as a thing to press
   rather than a line of green text under the panel. Slightly roomier padding
   than the date, because this one is a click target. */
.news-intro-link {
  display: inline-block;
  margin-top: 24px;
  padding: 11px 22px;
  border-radius: 14px;
  background: var(--teal);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 6px 14px rgba(20, 70, 80, 0.25);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.news-intro-link:hover {
  background: var(--teal-dark);
  box-shadow: 0 10px 20px rgba(20, 70, 80, 0.3);
  transform: translateY(-2px);
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 42px;
}


/* A link on the home page, a plain block in the empty state — hence the
   colour reset, which an <a> would otherwise take from the browser. */
.news-card {
  display: block;
  position: relative;
  color: inherit;
}

.news-card-body {
  transition: box-shadow 0.2s ease;
}

a.news-card:hover .news-card-body,
a.news-card:focus-visible .news-card-body {
  box-shadow: 0 20px 44px rgba(30, 60, 45, 0.14);
}

.news-card-date {
  position: absolute;
  top: -16px;
  left: 30px;
  background: var(--teal);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.3px;
  padding: 9px 18px;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(20, 70, 80, 0.25);
}

.news-card-body {
  background: #ffffff;
  border-radius: 24px;
  padding: 42px 34px 32px;
  box-shadow: 0 14px 34px rgba(30, 60, 45, 0.07);
}

.news-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--amber);
  text-transform: uppercase;
}

.news-card-text {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #4a4f4a;
  font-weight: 600;
}

/* ---- „Důležité" ---------------------------------------------------------

   Only /aktuality/ draws it: on the home page the left column and the icon
   already say „important", and a third marker would be noise. Amber carries
   it, so the teal date badge beside it stays the neutral one of the two.

   White on --amber-text rather than on --amber: the palette's plain amber is
   a fill colour and reaches only 2.3:1 behind white lettering, while
   --amber-text is dark enough to carry it at 4.69:1. */
.news-flag {
  display: inline-block;
  background: var(--amber-text);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 11px;
}

/* The ring does the highlighting; the tint is deliberately faint. A stronger
   wash would drag the amber title below the contrast the plain card holds,
   so the title darkens to --amber-text here instead of staying --amber. */


/* ============ UTENSILS ============ */

/* utensil watermark band */
.utensils {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.6;
}

.utensils img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {

  .utensils {
    bottom: 0;
    height: 180px;
    opacity: 0.6;
  }

  .utensils img {
    width: 150%;
    max-width: none;
    height: auto;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }

}


/* ============ RESPONSIVE — MOBILE ============ */

@media (max-width: 760px) {

  .feature-cards {
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: 22px;
  }

}
/* ============ GALLERY ============ */
.gallery {
  background: #ffffff;
  padding: 84px 0 104px;
}

.gallery-title {
  margin: 0 0 56px;
  text-align: center;
  font-size: 56px;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -0.5px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.gallery-item {
  display: block;
  width: 100%;
  height: 320px;
  border-radius: 28px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-item:hover img { transform: scale(1.05); }

.gallery-item--empty {
  background: var(--mint);
  background-image: linear-gradient(135deg, #e6fbf2, #c2ecd9);
}

.gallery-more {
  margin-top: 48px;
  text-align: center;
}

.gallery-more .btn-menu {
  display: inline-block;
}

/* ============ SUBPAGE HEADER + GALLERY PAGE ============ */
.page-head {
  background: var(--mint);
  padding: 64px 0 72px;
  text-align: center;
}

.page-eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green-dark);
}

.page-title {
  margin: 12px 0 0;
  font-size: 56px;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -0.5px;
}

.page-lead {
  margin: 16px 0 0;
  font-size: 19px;
  font-weight: 600;
  color: #4a5a55;
}

/* ---- Photo variant of the page header -----------------------------------

   The photo sits behind the title instead of above it. Built as a modifier of
   .page-head rather than its own block, so the eyebrow / title / lead markup is
   unchanged and only the three colours and the alignment differ — a centred
   title over a photograph reads as a caption, so the photo pages align left.

   The dark wash underneath shows while the photo loads, and keeps the title
   readable if it ever fails to. */
.page-head--photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 360px;
  padding: 0;
  text-align: left;
  background-color: var(--footer-dark);
  background-image: linear-gradient(135deg, #0c5a5f 0%, #14302c 100%);
}

.page-head-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The scrim above drains colour out of the photograph; a small lift of
     saturation and contrast puts it back, so the jídelna reads as a warm room
     rather than a grey one. Kept mild — anything stronger and the food goes
     artificial. */
  filter: saturate(1.12) contrast(1.05) brightness(1.03);
}

/* Scrim rather than a flat tint: the text needs contrast along the bottom
   edge, the photograph stays itself at the top.

   Weighted to the bottom rather than spread evenly. The inner box is pinned to
   the flex end, so the lettering starts a little under halfway down: the top
   third can stay at the photograph's own brightness — that band was the part
   that read as grey — and the wash only builds from there. Every line of the
   text keeps its own text-shadow, which is what covers a bright patch the
   photo happens to put behind a word. */
.page-head--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 40, 38, 0) 0%,
    rgba(10, 40, 38, 0.05) 30%,
    rgba(10, 40, 38, 0.34) 50%,
    rgba(10, 40, 38, 0.80) 100%
  );
}

.page-head-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 104px;
  padding-bottom: 52px;
}

/* --green-pale rather than --green-dark: the green that carries the eyebrow on
   mint disappears against a photograph. */
.page-head--photo .page-eyebrow {
  color: var(--green-pale);
  /* The eyebrow sits highest of the three lines, where the scrim is thinnest,
     so it leans on the shadow more than the title and lead do. */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.page-head--photo .page-title {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.page-head--photo .page-lead {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.gallery--page { padding-top: 72px; }

.gallery--page .gallery-item {
  margin: 0;
  height: auto;
  border-radius: 0;
  overflow: visible;
}

.gallery--page .gallery-item img {
  height: 280px;
  border-radius: 28px;
}

.gallery-caption {
  margin: 14px 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: #4a5a55;
}

.gallery-empty {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #4a5a55;
  padding: 40px 0 20px;
}

/* ============ FOOTER ============ */
/* The same dark teal-to-green wash that sits behind the photo page headers, so
   the page closes on a colour it already uses elsewhere.
   Dark enough to carry white lettering: #ffffff reaches 7.9:1 at the light
   end of the gradient and 14:1 at the dark one, so the name, the contact line
   and its underlined link all hold up without further treatment. */
.site-footer {
  background-color: var(--footer-dark);
  background-image: linear-gradient(135deg, #0c5a5f 0%, #14302c 100%);
  color: #ffffff;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 32px;
}

.footer-name {
  font-size: 22px;
  font-weight: 800;
}

/* A fixed tint rather than an opacity: fading white over the band would let
   the green through as a muddy grey. This near-white still reads a step behind
   the jídelna's name and keeps 6.4:1 against the lightest part of the band. */
.footer-contact {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.7;
  color: #d7ece6;
}

.footer-contact a {
  color: inherit;
  text-decoration: underline;
}

/* A hairline of white at low alpha rather than a second colour: it reads as a
   divider on both ends of the gradient without introducing a third green.
   #c2d9d3 keeps 5.4:1 against the lightest part of the band — quiet enough to
   sit behind the contact line, still well clear of the 4.5:1 floor. */
.footer-credit {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 18px 0 24px;
  font-size: 14px;
  font-weight: 600;
  color: #c2d9d3;
}

.footer-credit a {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-credit a:hover {
  text-decoration-thickness: 2px;
}

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width: 1100px) {
  :root { --pad-x: 32px; }

  .hero-title { font-size: 58px; }
  .hero-subtitle { font-size: 22px; }

  .feature-card-title { font-size: 21px; }

  .news-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .news-intro {
    min-height: 0;
    padding: 44px;
  }
}

/* Collapse nav into a burger menu below 980px */
@media (max-width: 980px) {
  .nav-cta { display: none; }

  .nav-burger { display: flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #ffffff;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.08);
    padding: 8px 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.25s ease, visibility 0.25s ease;
  }

  .site-header { position: sticky; }
  .header-inner { position: relative; }

  .nav-toggle:checked ~ .site-nav {
    max-height: 520px;
    visibility: visible;
  }

  .nav-link {
    padding: 14px var(--pad-x);
    border-bottom: 1px solid #f0f4ee;
  }

  .nav-cta-mobile {
    display: block;
    text-align: center;
    margin: 14px var(--pad-x);
  }

  /* burger -> X animation */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* ============================================================
   RESPONSIVE — mobile
   ============================================================ */
@media (max-width: 760px) {
  .hero {
    min-height: 0;
  }

  .hero-content {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .hero-title { font-size: 40px; max-width: none; }
  .hero-subtitle { font-size: 19px; max-width: none; }

  .mint {
    padding-top: 40px;
    padding-bottom: 140px;
  }

  .feature-cards {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .feature-card { min-height: 0; }

  .news-grid { margin-top: 48px; gap: 48px; }

  .news-intro { padding: 36px 28px; border-radius: 24px; }
  .news-intro-title { font-size: 36px; }

  .news-card-body { padding: 40px 26px 28px; }

  .gallery { padding: 56px 0 64px; }
  .gallery-title { font-size: 36px; margin-bottom: 36px; }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .gallery-item { height: 240px; }

  .utensils { height: 150px; }

  .footer-inner { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .brand-logo { height: 46px; }
}

@media (max-width: 420px) {
  :root { --pad-x: 20px; }
  .hero-title { font-size: 34px; }
  .brand-logo { height: 40px; }
}

/* ============================================================
   SUBPAGE: O JÍDELNĚ
   ============================================================
   The header is the shared .page-head--photo band; everything below reuses the
   Kontakty vocabulary — mint notice block, white card with a shadow. */
.about {
  background: #ffffff;
  padding: 72px 0 96px;
}

/* Two columns: the running text on the left at a readable measure, the ceník
   card in a right-hand rail beside it.

   Full --container width, the same edges every other subpage sits on — the
   page would otherwise float in the middle of the window while Kontakty and
   Rozvoz run wide. The rail takes the extra width instead of the prose, which
   keeps the running text near a readable measure.

   Three explicit rows, one per block in the left column, so the rail can span
   1 / -1: a negative line number only resolves against the explicit grid, and
   spanning implicit rows would invent empty rows and their gaps instead. */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  grid-template-rows: repeat(3, auto);
  column-gap: 80px;
  row-gap: 44px;
  /* start, not the default stretch: a stretched grid item is as tall as its
     area, which leaves position: sticky nothing to travel in. */
  align-items: start;
}

.about-layout > * { grid-column: 1; }

.about-aside {
  grid-column: 2;
  grid-row: 1 / -1;
  position: sticky;
  /* Clears the sticky site header — 70px logo plus its 15px padding either
     side — with a gap above the card. */
  top: 124px;
}

.about-prose h2 {
  margin: 0;
  font-size: 24px;
  font-style: italic;
  font-weight: 800;
  line-height: 1.35;
  color: var(--amber-text);
}

.about-prose p {
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 1.75;
  font-weight: 600;
  color: #4a5a55;
}

.about-prose h2 + p { margin-top: 20px; }

.about-prose p:first-child { margin-top: 0; }

.about-prose a {
  color: var(--teal);
  text-decoration: underline;
}

.about-prose a:hover {
  color: var(--teal-dark);
}

/* Same mint block as .contact-info — the things a strávník has to know before
   the first lunch, lifted out of the running text. */
.about-notices {
  background: var(--mint);
  border-radius: 30px;
  padding: 40px 44px;
}

.about-notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-notice {
  position: relative;
  padding-left: 26px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
  color: #3d514c;
}

.about-notice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
}

/* Same white card as .contact-person. */
.about-prices {
  background: #ffffff;
  border: 1px solid #eef4f1;
  border-radius: 30px;
  padding: 40px 44px;
  box-shadow: 0 14px 34px rgba(30, 60, 45, 0.09);
}

.about-prices-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -0.3px;
}

.about-prices-validity {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green-dark);
}

.price-table {
  width: 100%;
  margin-top: 26px;
  border-collapse: collapse;
}

.price-row th,
.price-row td {
  padding: 14px 0;
  font-size: 18px;
  line-height: 1.5;
  border-bottom: 1px solid rgba(0, 128, 137, 0.14);
}

.price-row th {
  text-align: left;
  font-weight: 700;
  color: #4a5a55;
}

.price-row td {
  text-align: right;
  font-weight: 800;
  white-space: nowrap;
  color: var(--teal);
}

.price-row:last-child th,
.price-row:last-child td { border-bottom: 0; }

/* Cizí strávníci stand apart from the pupil bands above them. */
.price-row--separated th,
.price-row--separated td {
  padding-top: 26px;
  border-top: 1px solid rgba(0, 128, 137, 0.14);
}

/* Below this the 400px rail leaves the prose too narrow to read, so the two
   columns become one. Source order already has the ceník where it belongs in a
   single column, so only the placement and the stickiness have to be undone —
   sticky in one column would park the card over the text below it. */
@media (max-width: 1100px) {
  .about-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    max-width: 880px;
  }

  .about-aside {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

@media (max-width: 760px) {
  .page-head--photo { min-height: 300px; }

  .page-head-inner {
    padding-top: 80px;
    padding-bottom: 32px;
  }

  .page-head--photo .page-title { font-size: 36px; }

  .page-head--photo .page-lead { font-size: 17px; }

  .about { padding: 48px 0 64px; }

  .about-prose h2 { font-size: 20px; }

  .about-prose p { font-size: 17px; }

  .about-notices,
  .about-prices {
    padding: 30px 26px;
    border-radius: 24px;
  }

  .about-notice { font-size: 17px; }

  .about-prices-title { font-size: 24px; }

  .price-row th,
  .price-row td { font-size: 17px; }
}

/* ============================================================
   SUBPAGE: KONTAKTY
   ============================================================ */
.contact {
  background: #ffffff;
  padding: 56px 0 96px;
}

/* Framed rather than full-bleed, so the map lines up with the cards above. */
.contact-map {
  height: 460px;
  margin-top: 56px;
  border-radius: 30px;
  overflow: hidden;
  background: var(--mint);
  box-shadow: 0 18px 40px rgba(30, 60, 45, 0.10);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Identity card is narrower than the people column, which holds two cards. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) 1.18fr;
  gap: 40px;
  align-items: start;
}

.contact-info {
  background: var(--mint);
  border-radius: 30px;
  padding: 44px;
}

.contact-heading {
  margin: 0 0 26px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--teal);
  letter-spacing: -0.3px;
  text-wrap: balance;
}

.contact-address {
  margin: 0;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7;
  color: #3d514c;
}

.contact-ids {
  margin: 28px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 128, 137, 0.16);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-id {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 17px;
  line-height: 1.6;
}

.contact-id dt {
  font-weight: 800;
  color: var(--amber-text);
}

.contact-id dd {
  margin: 0;
  font-weight: 600;
  color: #4a5a55;
}

.contact-hours {
  margin-top: 24px;
  background: var(--mint);
  border-radius: 24px;
  padding: 28px 32px;
}

.contact-subheading {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green-dark);
}

.contact-hours-value {
  margin: 12px 0 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--teal);
}

/* Side by side while there is room, stacked once a card would get cramped. */
.contact-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

/* Ředitelka leads the list on her own row, the rest pair up underneath. */
.contact-person-lead { grid-column: 1 / -1; }

.contact-person {
  background: #ffffff;
  border: 1px solid #eef4f1;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 14px 34px rgba(30, 60, 45, 0.09);
}

.contact-person-role {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--amber);
}

.contact-person-name {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--teal);
}

.contact-person-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.contact-person-label {
  flex: none;
  min-width: 74px;
  font-weight: 800;
  color: #7c8b86;
}

.contact-person-line a {
  color: var(--teal);
  text-decoration: underline;
  word-break: break-word;
}

.contact-person-line a:hover { color: var(--green-dark); }

@media (max-width: 1100px) {
  .contact-map {
    height: 380px;
    margin-top: 40px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 760px) {
  .contact-map {
    height: 280px;
    border-radius: 24px;
  }

  .contact { padding: 40px 0 64px; }

  .contact-heading { font-size: 24px; }

  .contact-info {
    padding: 30px 26px;
    border-radius: 24px;
  }

  .contact-address { font-size: 18px; }

  .contact-hours { padding: 22px 24px; }

  .contact-person { padding: 24px 22px; }

  .contact-person-name { font-size: 20px; }
}

/* ============================================================
   SUBPAGE: ROZVOZ JÍDLA
   ============================================================
   Same vocabulary as Kontakty — mint identity card on the left, white cards
   on the right — so the two „co pro vás děláme" pages read as one pair. */
.delivery {
  background: #ffffff;
  padding: 56px 0 96px;
}

.delivery-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) 1.18fr;
  gap: 40px;
  align-items: start;
}

.delivery-info {
  background: var(--mint);
  border-radius: 30px;
  padding: 44px;
}

.delivery-heading {
  margin: 0 0 20px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--teal);
  letter-spacing: -0.3px;
  text-wrap: balance;
}

.delivery-text {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.75;
  color: #3d514c;
}

.delivery-price {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 128, 137, 0.16);
}

.delivery-subheading {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green-dark);
}

.delivery-price-value {
  margin: 12px 0 0;
  font-size: 32px;
  font-weight: 800;
  color: var(--teal);
}

.delivery-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.delivery-card {
  background: #ffffff;
  border: 1px solid #eef4f1;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 14px 34px rgba(30, 60, 45, 0.09);
}

.delivery-card .delivery-heading {
  margin-bottom: 18px;
  font-size: 24px;
}

/* Pills rather than a bulleted list: five short place names wrap into as many
   rows as the card is wide, instead of one tall column of five lines. */
.delivery-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.delivery-area {
  background: var(--mint);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 17px;
  font-weight: 800;
  color: var(--teal);
}

.delivery-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.delivery-label {
  flex: none;
  min-width: 74px;
  font-weight: 800;
  color: #7c8b86;
}

.delivery-line a {
  color: var(--teal);
  text-decoration: underline;
  word-break: break-word;
}

.delivery-line a:hover { color: var(--green-dark); }

@media (max-width: 1100px) {
  .delivery-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .delivery { padding: 40px 0 64px; }

  .delivery-info {
    padding: 30px 26px;
    border-radius: 24px;
  }

  .delivery-heading { font-size: 24px; }

  .delivery-card {
    padding: 24px 22px;
  }

  .delivery-card .delivery-heading { font-size: 21px; }

  .delivery-text { font-size: 17px; }

  .delivery-price-value { font-size: 28px; }
}

/* ============================================================
   SUBPAGE: KARIÉRA V JÍDELNĚ
   ============================================================
   Third page in the Kontakty / Rozvoz jídla set, and it borrows their grid —
   but mirrored: the mint block on the left is the photo, and the wider half on
   the right carries the ads, which are what a visitor came to read. */
.career {
  background: #ffffff;
  padding: 56px 0 96px;
}

.career-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) 1.18fr;
  gap: 40px;
  align-items: start;
}

/* The photo of the kitchen. Sticky so it stays beside the ads rather than
   scrolling away above a long list of them. */
.career-photo {
  position: sticky;
  top: 32px;
  /* Behind the photo now, rather than the placeholder's own fill: it holds the
     column's shape while the picture loads. */
  background: var(--mint);
  border-radius: 30px;
  /* 4:3 — the shape a photo of the kitchen comes out of a camera in, and close
     enough to one ad's height that a single vacancy does not leave the mint
     block hanging below the card. */
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.career-photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.career-postings {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Same white card as .contact-person and .delivery-card. */
.career-card {
  background: #ffffff;
  border: 1px solid #eef4f1;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 14px 34px rgba(30, 60, 45, 0.09);
}

/* Wraps rather than shrinking: an ad shouts its heading („HLEDÁME POSILU DO
   TÝMU!!!") and the office writes it in capitals, so the line has to hold. */
.career-card-title {
  margin: 0 0 18px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--teal);
  letter-spacing: -0.2px;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* The ad's own paragraphs, straight from `linebreaks` — hence the descendant
   selector rather than a class the admin would have to type. */
.career-card-text p {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.75;
  color: #3d514c;
}

.career-card-text p:last-child { margin-bottom: 0; }

.career-card-lead {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.75;
  color: #3d514c;
}

/* Ruled off the same way .contact-ids and .delivery-price are. */
.career-card-contact {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 128, 137, 0.16);
}

.career-card-contact-label {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green-dark);
}

.career-card-contact-name {
  margin: 10px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--teal);
}

.career-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.career-label {
  flex: none;
  min-width: 74px;
  font-weight: 800;
  color: #7c8b86;
}

.career-line a {
  color: var(--teal);
  text-decoration: underline;
  word-break: break-word;
}

.career-line a:hover { color: var(--green-dark); }

@media (max-width: 1100px) {
  .career-grid { grid-template-columns: 1fr; }

  /* Stacked, the photo is above the ads — sticky would park it over them. */
  .career-photo {
    position: static;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 760px) {
  .career { padding: 40px 0 64px; }

  .career-photo {
    border-radius: 24px;
    aspect-ratio: 4 / 3;
  }

  .career-card {
    padding: 24px 22px;
  }

  .career-card-title { font-size: 23px; }

  .career-card-text p,
  .career-card-lead { font-size: 17px; }

  .career-card-contact-name { font-size: 20px; }
}

/* ============ ZDRAVÁ ŠKOLNÍ JÍDELNA PAGE ============ */
.zsj { padding: 72px 0 88px; }

/* One column for the whole page — 880px, the width .about-prose already uses
   for running text — so the intro, the pillars and the card share an edge
   instead of stepping in and out down the page. */
.zsj-intro { margin-bottom: 8px; }

.zsj-pillars,
.zsj-criteria {
  max-width: 880px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* The number is drawn as a badge, so the marker would only repeat it. */
.zsj-pillars li::marker,
.zsj-criteria li::marker { content: none; }

.zsj-pillar,
.zsj-criterion {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.zsj-pillar + .zsj-pillar { margin-top: 30px; }

/* flex: none — without it the circle squashes to an oval as the text beside
   it wraps to two or three lines. */
.zsj-badge {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--teal), var(--teal-dark));
  color: #ffffff;
  font-size: 21px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.zsj-pillar-body,
.zsj-criterion-body { min-width: 0; }

.zsj-pillar-title {
  margin: 10px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--teal);
}

.zsj-pillar-text {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 1.7;
  color: #4a5a55;
}

.zsj-section-title {
  max-width: 880px;
  margin: 64px auto 26px;
  font-size: 32px;
  font-weight: 800;
  color: var(--teal);
}

/* Same mint card as „Ke stažení": a list of short rows that belong together. */
.zsj-card {
  background: var(--mint);
  border-radius: 30px;
  padding: 30px 48px;
}

.zsj-criterion {
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0, 128, 137, 0.14);
}

.zsj-criteria .zsj-criterion:last-child { border-bottom: 0; }

.zsj-criterion-label {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green-dark);
}

.zsj-criterion-text {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 700;
  color: #3d514c;
}

.zsj-pyramid {
  max-width: 880px;
  margin: 64px auto 0;
  text-align: center;
}

/* height: auto overrides the intrinsic width/height on the <img>, which is
   there to reserve the right box while the poster is still loading. */
.zsj-pyramid-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.zsj-pyramid-credit {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: #4a5a55;
}

.zsj-pyramid-credit a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zsj-pyramid-credit a:hover { color: var(--teal-dark); }

@media (max-width: 760px) {
  .zsj { padding: 44px 0 64px; }

  .zsj-pillar,
  .zsj-criterion { gap: 14px; }

  .zsj-badge {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .zsj-pillar-title { font-size: 20px; }

  .zsj-pillar-text { font-size: 17px; }

  .zsj-section-title { font-size: 26px; }

  .zsj-card {
    padding: 16px 26px;
    border-radius: 24px;
  }

  .zsj-criterion-text { font-size: 17px; }
}

/* ============ KE STAŽENÍ PAGE ============ */
/* One card of rows, like the „Zdravá školní jídelna" criteria, but each row is
   a link, so the whole row gets the hit area and the hover rather than just
   the document name. */
.downloads { padding: 72px 0 88px; }

.downloads-card {
  max-width: 760px;
  margin: 0 auto;
  background: var(--mint);
  border-radius: 30px;
  padding: 44px 48px;
}

.downloads-group + .downloads-group {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 128, 137, 0.16);
}

.downloads-group-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--green-dark);
}

.downloads-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.downloads-item { border-bottom: 1px solid rgba(0, 128, 137, 0.14); }

.downloads-group .downloads-item:last-child { border-bottom: 0; }

.downloads-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  color: #3d514c;
}

.downloads-link:hover .downloads-label,
.downloads-link:focus-visible .downloads-label {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.downloads-label {
  font-size: 19px;
  font-weight: 700;
}

/* Type badge instead of an icon font: it says what the file is in words, and
   costs no extra request. */
.downloads-kind {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 128, 137, 0.12);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--teal);
}

.downloads-empty {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: #4a5a55;
}

@media (max-width: 760px) {
  .downloads { padding: 44px 0 64px; }

  .downloads-card {
    padding: 30px 26px;
    border-radius: 24px;
  }

  .downloads-label { font-size: 18px; }
}

/* ============ JÍDELNÍČEK ============ */

.menu { padding: 72px 0 88px; }

/* Week switcher. Chips rather than a <select>: at two or three weeks every
   option is worth showing, and a link is shareable. */
.menu-weeks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 40px;
}

.menu-week {
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--mint);
  font-size: 16px;
  font-weight: 800;
  color: var(--teal-dark);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.menu-week:hover { background: #c7f2e2; }

.menu-week--active {
  background: var(--teal);
  color: #fff;
}

/* Two columns on a wide screen so a five-day week is not one long scroll,
   collapsing to one below the shared 760px breakpoint. */
.menu-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}

.menu-day {
  background: var(--mint);
  border-radius: 26px;
  padding: 30px 34px;
}

.menu-day-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 800;
  color: var(--green-dark);
}

.menu-day-date {
  font-size: 15px;
  font-weight: 700;
  color: #5c6f69;
  font-variant-numeric: tabular-nums;
}

.menu-dishes {
  margin: 0;
  padding: 0;
}

.menu-dish {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 128, 137, 0.16);
}

.menu-dish:last-child { border-bottom: 0; }

.menu-dish-kind {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--teal);
}

.menu-dish-name {
  margin: 3px 0 0;
  font-size: 18px;
  font-weight: 700;
  color: #3d514c;
}

/* Allergen numbers sit on their own line: they are a footnote to the dish,
   not part of its name. */
.menu-dish-allergens {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
  color: #5c6f69;
}

.menu-note {
  max-width: 1080px;
  margin: 30px auto 0;
  padding: 18px 24px;
  border-radius: 18px;
  background: #fff6dd;
  font-size: 17px;
  font-weight: 700;
  color: var(--amber-text);
}

.menu-footnote {
  max-width: 1080px;
  margin: 26px auto 0;
  font-size: 15px;
  color: #5c6f69;
}

.menu-empty {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: #4a5a55;
}

@media (max-width: 760px) {
  .menu { padding: 44px 0 64px; }

  .menu-list { grid-template-columns: 1fr; }

  .menu-day {
    padding: 26px 24px;
    border-radius: 22px;
  }

  .menu-day-title { font-size: 19px; }

  .menu-dish-name { font-size: 17px; }
}

/* ============================================================
   SUBPAGE: FOTOGALERIE — akce a lightbox
   ============================================================ */

/* Card on /galerie/: the event's first photo, its name and how many photos
   it holds. Sits in the same .gallery-grid the home page strip uses. */
.gallery-event {
  display: block;
  color: inherit;
}

.gallery-event-image {
  display: block;
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 28px;
  transition: transform 0.3s ease;
}

.gallery-event:hover .gallery-event-image,
.gallery-event:focus-visible .gallery-event-image {
  transform: scale(1.03);
}

.gallery-event-title {
  margin: 18px 4px 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--teal);
}

.gallery-event-count {
  margin: 6px 4px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
}

/* „← Zpět na fotogalerii" under the event's own title, and the same link at
   the foot of an aktualita. */
.gallery-back,
.article-back {
  display: inline-block;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--teal);
  border-bottom: 2px solid transparent;
}

.gallery-back:hover,
.gallery-back:focus-visible,
.article-back:hover,
.article-back:focus-visible {
  border-bottom-color: var(--teal);
}

/* ---- Lightbox ---------------------------------------------------------
   Built by lightbox.js and appended to <body>, so it covers the header too.
   Hidden through the `hidden` attribute, which needs the !important to beat
   the display:flex below. */
.lightbox[hidden] { display: none !important; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 76px;
  background: rgba(0, 32, 34, 0.92);
}

/* Locks the page behind the overlay so it cannot scroll away underneath. */
body.lightbox-open { overflow: hidden; }

.lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lightbox-image {
  max-width: 100%;
  /* Leaves room for the caption and the counter below it. */
  max-height: calc(100vh - 140px);
  border-radius: 16px;
  object-fit: contain;
}

.lightbox-caption {
  margin: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #eaf6f4;
}

.lightbox-caption[hidden] { display: none; }

.lightbox-counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #a9cfcd;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox-close {
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  font-size: 30px;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  /* The chevron glyphs sit high in the em box; the nudge re-centres them. */
  font-size: 44px;
  padding-bottom: 6px;
}

.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }

@media (max-width: 760px) {
  .gallery-event-image { height: 240px; }
  .gallery-event-title { font-size: 20px; }

  .lightbox { padding: 16px; }

  /* Under the photo rather than over it, so nothing important is covered on
     a screen this narrow. */
  .lightbox-image { max-height: calc(100vh - 190px); }

  .lightbox-prev,
  .lightbox-next {
    top: auto;
    bottom: 14px;
    transform: none;
    width: 48px;
    height: 48px;
    font-size: 36px;
  }

  .lightbox-prev { left: 22%; }
  .lightbox-next { right: 22%; }

  .lightbox-counter { bottom: 28px; }
}

/* ============================================================
   SUBPAGE: AKTUALITY — the list of announcements and one article
   ============================================================ */

.news-page {
  background: #ffffff;
  padding: 72px 0 96px;
}

/* One wide card per announcement, stacked down the page. A three-across grid
   would shrink every notice but the first into a thumbnail with two lines of
   text under it, and the announcements are what the page is for. */
.news-posts {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Text left, picture right — the wider column is the text, which is what the
   visitor came to read; the picture illustrates it. */
.news-post {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  overflow: hidden;
  color: inherit;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 14px 34px rgba(30, 60, 45, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-post:hover,
.news-post:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px rgba(30, 60, 45, 0.13);
}

.news-post-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}

/* A flex column rather than a plain block, so the text can sit in the middle
   of a card whose height comes from the picture beside it. Stretched, not
   align-self: center — a centred body would leave the „Důležité" tint short of
   the card's edges on a short announcement. */
.news-post-body {
  display: flex;
  flex-direction: column;
  /* The badges and „Číst dál" are as wide as their text, not as the column. */
  align-items: flex-start;
  justify-content: center;
  padding: 40px 46px;
}

.news-post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-post-date {
  display: inline-block;
  background: var(--teal);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 7px 15px;
  border-radius: 12px;
}

.news-post-title {
  margin: 16px 0 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--teal);
}

.news-post-text {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 600;
  color: #4a4f4a;
}

.news-post-more {
  display: inline-block;
  margin-top: 18px;
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
}

.news-post:hover .news-post-more { color: var(--green-dark); }

/* Nothing to put beside the text, so the text has the card to itself — but
   only as far as a line stays readable. Across the full 1480 px container it
   would run to about 140 characters. */
.news-post--nomedia { grid-template-columns: 1fr; }

.news-post--nomedia .news-post-title,
.news-post--nomedia .news-post-text { max-width: 70ch; }

/* Same amber ring on /aktuality/. Only the body is tinted, so the wash stops
   at the text column and leaves the picture alone. */
.news-post--important {
  border: 2px solid var(--amber);
  box-shadow: 0 14px 34px rgba(240, 174, 0, 0.2);
}

.news-post--important:hover,
.news-post--important:focus-visible {
  box-shadow: 0 22px 46px rgba(240, 174, 0, 0.32);
}

.news-post--important .news-post-body { background: #fffcf4; }

.news-empty {
  margin: 0;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: #4a5a55;
}

/* ---- One announcement's own page ---- */

/* Announcement headlines run long — „OD 3. 8. DO 7. 8. SANITÁRNÍ DNY …" —
   so they are set smaller than a section title like „Aktuality". */
.article-title {
  font-size: 42px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.article { padding: 64px 0 96px; }

/* Narrower than the container: a line of text this size stops being
   comfortable to read much past 70 characters. */
.article-inner { max-width: 820px; }

/* Below the text, so the spacing hangs off the top rather than the bottom. */
.article-image {
  display: block;
  width: 100%;
  border-radius: 28px;
  margin-top: 36px;
}

.article-text {
  font-size: 18px;
  line-height: 1.75;
  font-weight: 600;
  color: #3f4a46;
}

.article-text p { margin: 0 0 20px; }

.article-text p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .news-page { padding: 48px 0 64px; }

  .news-posts { gap: 28px; }

  /* Too narrow to put the picture beside the text, so it stacks — above the
     text rather than below it, which is why the two rows are named here: the
     markup has the text first so the wide card can read left to right. */
  .news-post {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .news-post-body {
    grid-row: 2;
    padding: 26px 28px 30px;
  }

  .news-post-image {
    grid-row: 1;
    height: 210px;
    min-height: 0;
  }

  .news-post-title { font-size: 22px; }

  .news-post-text { font-size: 16px; }

  .article-title { font-size: 30px; }

  .article { padding: 44px 0 64px; }

  .article-image {
    border-radius: 22px;
    margin-top: 28px;
  }

  .article-text { font-size: 17px; }
}