/* =========================================================
   LAYOUT / UTILITY (STRUCTURE ONLY)
   ========================================================= */

/* ---- Uživatelské proměnné ---- */
:root {
  --container-max: 1200px;

  --gap-12: 12px;
  --gap-16: 16px;
  --gap-24: 24px;
  --gap-32: 32px;

  --nav-h-desktop: 90px;
  --nav-h-tablet: 80px;
  --nav-h-shrink: 60px;

  --offcanvas-maxw: 420px;
  --offcanvas-wvw: 80vw;

  --textimg-media-max: clamp(200px, 100%, 400px);
  --news-side-max: clamp(260px, 28vw, 340px);
  --meal-plan-media-max: clamp(220px, 40vw, 300px);

  --modal-w: 720px;
  --modal-min-content: 125px;
}

/* ---- Reset + helpery ---- */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.isHidden {
  display: none !important;
}

.center {
  text-align: center;
}

.img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

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

.anchor-offset {
  position: relative;
  display: block;
  height: 0;
  top: calc(-1 * var(--nav-h-shrink));
}

/* ---- Kontejner ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 16px;
}

figure {
  margin: var(--gap-16);
}

/* =========================================================
   NAV (STRUKTURA)
   ========================================================= */
#desktopNav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 900;
}

#desktopNav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h-desktop);
  width: 100%;
  padding-inline: 16px;
  transition: height .25s ease, transform .4s cubic-bezier(.4, 0, .2, 1);
  will-change: height;
}

@media (max-width:768px) {
  #desktopNav .nav-inner {
    height: var(--nav-h-tablet);
  }
}

.shrink #desktopNav .nav-inner {
  height: var(--nav-h-shrink);
}

#desktopNav .links {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

body.force-mobile #desktopNav .links {
  display: none !important;
}

/* Pomocná třída pro spolehlivé změření .links i v force-mobile */
body.measure-links #desktopNav .links {
  display: inline-block !important;   /* přebije display:none z force-mobile */
  position: absolute !important;      /* mimo tok layoutu */
  visibility: hidden !important;      /* nebliká */
  left: -99999px; top: 0;
}

/* Off‑canvas skeleton (používá script.js) */
#overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 980;
}

#navMenu {
  position: fixed;
  top: 0;
  right: calc(-1 * var(--offcanvas-wvw));
  height: 100%;
  width: min(var(--offcanvas-wvw), var(--offcanvas-maxw));
  z-index: 990;
  transition: right .4s cubic-bezier(.4, 0, .2, 1);
}

#navMenu ul {
  list-style: none;
  margin: 0;
  padding: 16px 0;
}

#navMenu li {
  margin: 0;
}

#navMenu a {
  display: block;
  padding: 12px 20px;
}

/* Burger zobrazovat jen v mobilním režimu */
body:not(.force-mobile) #menu-toggle {
  display: none;
}

/* Společné vlastnosti tlačítka (výška = jako nav) */
body.force-mobile #menu-toggle {
  position: absolute;
  left: -60px;
  right: auto;
  top: 0;
  width: 60px;
  height: var(--nav-h-desktop);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height .25s ease;
  cursor: pointer;
  z-index: 1000;
}

@media (max-width:768px) {
  body.force-mobile #menu-toggle {
    height: var(--nav-h-tablet);
  }
}

/* Při zmenšení navigace (shrink) zmenši i burger */
body.force-mobile.shrink #menu-toggle {
  height: var(--nav-h-shrink);
}

/* =========================================================
   SECTIONS (STRUKTURA)
   ========================================================= */
.section {
  padding-block: 48px;
}
/* odstavce v sekcích */
.section:not(.news-short) p {
    margin: var(--gap-16) 0;
    line-height: 1.2;
}
.section:not(.news-short) p:first-child {
    margin: 0 0 var(--gap-16);
}

.section.news {
  padding: var(--gap-24) 0;
}

.no-hero section:first-of-type {  /* prvni sekce bude s odstupem, pokud je body s tridou .no-hero */
	margin-top:80px
}

/* HERO */
.hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100dvh; /* maximální velikost na mobilu, k adresnímu řádku */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 16px;
}

.hero-wrap {
  display: grid;
  gap: var(--gap-32);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

@media (orientation: portrait) {
  .hero-wrap {
    grid-template-columns: 1.2fr;
  }
}

/* ===== NEWS – společné nastavení ===== */
.news-short .news-grid {
  display: grid;
  gap: var(--gap-32);
  align-items: start;
}

/* ≥1200 px: hlavní : sidebar = 3 : 1 (sidebar čtvrtina) */
@media (min-width: 1200px) {
  .news-short .news-grid {
    grid-template-columns: 3fr 1fr;
  }
}

/* 960–1199 px: hlavní : sidebar = 2 : 1 */
@media (min-width: 960px) and (max-width: 1199px) {
  .news-short .news-grid {
    grid-template-columns: 2fr 1fr;
  }
}

/* <960 px: 1 sloupec ne portrait */
@media (max-width: 959px) {
  .news-short .news-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== MEAL-PLAN – vnitřní layout ===== */
.news-short .meal-plan {
  display: grid;
  gap: var(--gap-16);
}

/* 768–959 px: text | obrázek vedle sebe, text dominuje */
  @media (min-width:768px) and (max-width:959px) {
    .news-short .meal-plan {
      display: grid;
      gap: var(--gap-16);
      /* Text má min šířku (čitelnost), obrázek sloupec NIKDY nepřekročí strop */
      grid-template-columns: minmax(380px, 1fr) minmax(0, var(--meal-plan-media-max));
      align-items: start;
    }

    .news-short .meal-plan .meal-plan-text {
      min-width: 0;
    }

    /* kvůli přetečení dlouhých řetězců */

    .news-short .meal-plan .meal-plan-media {
      justify-self: end;
      max-width: var(--meal-plan-media-max);
      width: 100%;
    }

    .news-short .meal-plan .meal-plan-media img {
      width: 100%;
      height: auto;
      max-width: 100%;
    }
  }

  /* <768 px: text hlavní, obrázek pod textem, max šířka */
  @media (max-width: 767px) {
    .news-short .meal-plan {
      grid-template-columns: 1fr;
    }

    .news-short .meal-plan .meal-plan-media {
      justify-self: center;
      max-width: var(--meal-plan-media-max);
    }

    .news-short .meal-plan .meal-plan-media img {
      width: 100%;
      height: auto;
    }
  }


  /* TEXTonly =========================== – na ≥960px dva sloupce */
  .TEXTonly .TEXTonly-content {
    display: block;
    column-count: 1;
  }

  /* Dvousloupec jen pro dlouhé texty a jen na ≥960px */
  @media (min-width: 960px) {
    .TEXTonly.two-col .TEXTonly-content {
      /* ✅ skutečné sloupce, zlom pouze jednou */
      column-count: 2;
      column-gap: var(--gap-24);
      /* volitelné: tenká dělící linka mezi sloupci */
      column-rule: 1px solid rgba(0,0,0,.05);
      /* pokus o vyvážení výšek (většina browserů defaultně balancuje) */
      column-fill: balance;
    }

    /* Netrhej “blokové” prvky napříč sloupci */
    .TEXTonly.two-col .TEXTonly-content > h2,
    .TEXTonly.two-col .TEXTonly-content > h3,
    .TEXTonly.two-col .TEXTonly-content > h4,
    .TEXTonly.two-col .TEXTonly-content > figure,
    .TEXTonly.two-col .TEXTonly-content > ul,
    .TEXTonly.two-col .TEXTonly-content > ol,
    .TEXTonly.two-col .TEXTonly-content > blockquote,
    .TEXTonly.two-col .TEXTonly-content > table,
    .TEXTonly.two-col .TEXTonly-content > pre,
    .TEXTonly.two-col .TEXTonly-content > .card {
      break-inside: avoid;
    }

    /* Jemnější sazba v multi-column - omezení zalomení na začátku nebo konci odstavce (počet řádků) */
    .TEXTonly.two-col .TEXTonly-content p { orphans: 2; widows: 2; }
  }

  /* Na <1024px vždy 1 sloupec (i když je třída two-col) *
  @media (max-width: 1023px) {
    .TEXTonly .TEXTonly-content {
      column-count: 1;
    }
  }

  /* TEXTcenter ============================================= */
  .TEXTcenter .container {
    text-align: center;
  }

  .TEXTcenter .container.narrow {
    max-width: 820px;
  }

  /* TEXTimg – společné ===================================== */


  .TEXTimg .TEXTimg-grid {
    display: grid;
    gap: var(--gap-32);
    align-items: start;
  }

  .TEXTimg .TEXTimg-media {
    max-width: var(--textimg-media-max);
  }

  .TEXTimg .TEXTimg-media img {
    width: 100%;
    height: auto;
  }

  .TEXTimg.left .TEXTimg-media {  /* LEFT: text vlevo, obrázek vpravo */
    justify-self: end;
  }
  .TEXTimg.right .TEXTimg-media { /* RIGHT: obrázek vlevo, text vpravo */
    justify-self: start;
  }

  /* < 768 px: 1 sloupec, obrázek pod textem, na střed  */
  @media (max-width: 767px) {
    .TEXTimg .TEXTimg-grid {
      grid-template-columns: 1fr;
    }

    .TEXTimg .TEXTimg-media {
      justify-self: center;
    }
  }

  /*  768–959 px  */
  @media (min-width: 768px) and (max-width: 959px) {
    .TEXTimg .TEXTimg-grid {
      gap: var(--gap-24);  /* menší mezera */
    }

    /* LEFT: text : obrázek = 3 : 2 */
    .TEXTimg.left .TEXTimg-grid {
      grid-template-columns: 3fr 2fr;
    }
 

    /* RIGHT: obrázek : text = 2 : 3 */
    .TEXTimg.right .TEXTimg-grid {
      grid-template-columns: 2fr 3fr;
    }

    /* .right pořadí – obrázek vlevo, text vpravo */
    .TEXTimg.right .TEXTimg-text {
      order: 2;
    }

    .TEXTimg.right .TEXTimg-media {
      order: 1;
    }
  }

  /*  ≥ 960 px  */
  @media (min-width: 960px) {

    /* LEFT: text : obrázek = 9 : 4 (obrazek cca 300px při 1200px širokém kontejneru) */ 
    .TEXTimg.left .TEXTimg-grid {
      grid-template-columns: 9fr 4fr;
    }

    /* RIGHT: obrázek : text = 4 : 9 */
    .TEXTimg.right .TEXTimg-grid {
      grid-template-columns: 4fr 9fr;
    }

    /* .right pořadí – obrázek vlevo, text vpravo */
    .TEXTimg.right .TEXTimg-text {
      order: 2;
    }

    .TEXTimg.right .TEXTimg-media {
      order: 1;
    }
  }

  /* BOX ======================================== GRID: pevný počet sloupců podle breakpointu */
  .BOX .box-row {
    display: grid;
    gap: var(--gap-24);
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    padding: var(--gap-24);
    box-sizing: border-box;
    /* desktop */
  }
  /* Odstraň marginy na dětech, ať se nesčítají s gapem */
  .BOX .box-row > * {
    margin: 0;           /* zruší případné .card { margin-bottom: … } apod. */
  }

  @media (max-width: 1024px) {
    .BOX .box-row {
      grid-template-columns: repeat(2, minmax(200px, 1fr));
    }

    /* jen páry */
  }

  @media (max-width: 560px) {
    .BOX .box-row {
      grid-template-columns: 1fr;
    }
  }

  /* =========================================================
   IMG UTILITIES (desktop podíly + mobilní omezení)
   ========================================================= */
  @media (max-width:1023px) {

    .img-1-2,
    .img-1-3,
    .img-1-4 {
      max-width: clamp(180px, 70vw, 360px);
      width: 100%;
      height: auto;
      margin-inline: auto;
    }
  }

  @media (min-width:1024px) {
    .img-1-2 {
      width: 50%;
    }

    .img-1-3 {
      width: 33.333%;
    }

    .img-1-4 {
      width: 25%;
    }
  }

  /* =========================================================
   MODAL (STRUKTURA)
   ========================================================= */
  #modalOverlay {
    position: fixed;
    inset: 0;
    display: flex;
    /* centrování boxu na střed */
    align-items: center;
    justify-content: center;
    z-index: 1100;
    /* nad vším ostatním */
  }

  #modalBox {
    position: relative;
    width: min(var(--modal-w), 92vw);
    margin: 0;
    /* centrování řeší overlay */
    top: auto;
    /* zrušíme "top:50%" */
    transform: none;
    /* zrušíme posun */
    z-index: 1110;
    /* nad overlayem */
  }

  #modalClose {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 1120;
    /* jistota kliknutí */
  }

  #modalContent {
    overflow-y: auto;
    max-height: calc(90dvh - 60px);
    min-height: var(--modal-min-content);
  }

  /* =========================================================
   FOOTER (STRUKTURA)
   ========================================================= */
  #content,
  footer {
    position: relative;
  }

  #footer {
    padding-block: var(--gap-16);
    z-index: 1;
  }