/* Tablet layout fixes for the public (Wagtail) site, 768-1099px.
   SCALE: from 768px the header and .page-wrapper are painted at var(--page-scale)
   = 0.75 (app.css), so every px below is a layout px (x0.75 on screen); media
   queries use the real viewport width. Every rule lives inside a tablet media
   query: phones (<768px) and desktop (>=1100px) never see it. */

/* ---- Header (768-991.98px) ----
   Five menu items did not fit next to the 273px logo: items wrapped into 2-3 lines
   and the right block (login, language, Try now) ran into the menu (gap 0); in DE
   the logo was squeezed down to 16-141px. Fixed logo, tighter gaps, a gap before
   the right block. The header height (tied to .page-wrapper padding-top) and the
   font sizes do not change. */
@media (min-width: 768px) and (max-width: 991.98px) {
  header .container .logo { width: 208px; height: 47px; flex-shrink: 0; }
  header .container .nav-links { margin-left: 12px; }
  header .container .nav-links ul { gap: 12px; margin-right: 16px; }
  header .container .header-actions { gap: 12px; }
}
/* Narrow portrait (768-899.98px): the FR and DE labels are longer. DE has two
   single-word items ("ERNÄHRUNGSBLOG", "GESCHENKKARTE") that cannot wrap, so there
   the login / greeting shows only its icon (already in the markup, hidden on
   tablets until now). */
@media (min-width: 768px) and (max-width: 899.98px) {
  html[lang="fr"] header .container .logo { width: 180px; height: 41px; }
  html[lang="fr"] header .container .nav-links ul { gap: 10px; margin-right: 12px; }
  html[lang="de"] header .container .logo { width: 150px; height: 34px; }
  html[lang="de"] header .container .nav-links { margin-left: 8px; }
  html[lang="de"] header .container .nav-links ul { gap: 8px; margin-right: 10px; }
  html[lang="de"] header .container .header-actions { gap: 8px; }
  html[lang="de"] header .container .header-actions ul.header-right-menu a { font-size: 0; gap: 0; padding: 8px; margin: -8px; } /* 27px tap area, same layout box */
  html[lang="de"] header .container .header-actions ul.header-right-menu a .login-icon-mobile { display: inline-block; }
}
/* Landscape tablets (992-1099.98px): FR and DE still ran into the right block
   (gap 0) next to the 273px logo. */
@media (min-width: 992px) and (max-width: 1099.98px) {
  header .container .logo { width: 240px; height: 55px; flex-shrink: 0; }
  header .container .nav-links ul { gap: 16px; margin-right: 16px; }
  header .container .header-actions { gap: 16px; }
}
/* A long item wraps into at most two even lines, centred. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  header .container .nav-links ul a { text-align: center; text-wrap: balance; }
}

/* ---- Photo collage, block "delicious" (section.about), 768-1099.98px ----
   Two columns with a 460px image box while the image was taller: the caption lay
   over the photo (up to 176px), the 2nd photo was shifted down 64px and the 3rd
   sat alone. Same as from 1100px: three in a row, square cover crop, caption under
   the photo. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .about .content { align-items: flex-start; }
  .about .content-item { flex: 0 0 calc((100% - 30px) / 3); }
  .about .content .content-item:nth-child(2) .content-item__img img { margin-top: 0; }
  .about .content-item__img { height: auto; aspect-ratio: 1 / 1; }
  .about .content-item__img img { height: 100%; }
  .about .content-item__text { max-width: 100%; }
}

/* ---- Hero (768-991.98px) ----
   The title row put the button next to the title; the flex row squeezed the
   button below its text (DE "Jetzt probieren" touched the edges) and the title
   took 3-4 lines. The button moves under the full-width title. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-intro__title { flex-wrap: wrap; row-gap: 12px; }
  .hero-intro__title .btn { flex-shrink: 0; }
}

/* ---- "How it works" row with 5+ steps (landings), 768-991.98px ----
   5 columns plus 4 gaps of 100px (~1194px) in an 860px row: the first and last
   steps were cut by the screen edges up to ~896px. Rows with 4 steps keep their
   100px gaps; the natural-icon variant (app.css) keeps its own rule. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .how-it-work .row:has(> .col:nth-child(5)):not(:has(.col-icon--natural)) { gap: 40px; }
}

/* ---- Round badge over the photo caption, block "picture_video_section" ----
   The photo column stretched to the height of the text column and the badge,
   pinned to its bottom, covered the caption under the photo (EN up to 131px,
   FR/DE up to 263px at 768 and up to 70px at 1024). The column now keeps the
   height of its own content. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .picture-video-section .row .image { align-self: flex-start; }
}

/* ---- Press logos, block "featured" (768-1099.98px) ----
   The card was 50px high inside overflow:hidden, so logos and quotes were cut
   and the carousel dots lay on the text. The card takes its content height.
   While the Swiper is on (JS: up to 992px) its slide widths win over the 25%
   flex basis meant for the static row, and a logo is not wider than 272px
   (204px on screen, as on desktop). */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .featured .featured-logos-item { height: auto; }
  .featured .featured-logos.swiper-initialized .swiper-wrapper { gap: 0; justify-content: flex-start; }
  .featured .featured-logos.swiper-initialized .featured-logos-item { flex: 0 0 auto; }
  .featured .featured-logos.swiper-initialized .featured-logos-img { width: 100%; max-width: 272px; margin-left: auto; margin-right: auto; }
}

/* ---- Diet list, block "lifestyle" (768-1099.98px) ----
   At 768 the meal photo, the big photo and the diet list were 47px wider than
   the row and the big photo covered the start of the list ("EF'S CHOICE").
   The big photo may shrink. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .lifestyle-block .pair { min-width: 0; }
  .lifestyle-block .pair .box { flex: 0 1 auto; min-width: 0; }
}

/* ---- Card grids of "common_questions" (FAQ) and "media_about_us" (768-1099.98px) ----
   The row is 1070px wide from 768px: at 768-~935 the 4th FAQ column and the
   3rd logo column were cut by the screen edge. The row now ends 20px before the
   right edge of the window (layout width = 100vw / --page-scale) and is never
   wider than 1070px, so from ~964px it is as before. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .common-question .container .row { width: min(1070px, calc((100vw / var(--page-scale) + 935px) / 2 - 40px)); }
}

/* ---- Header of block "recipes" (/recipe/, /nutrition-blog/*), 768-991.98px ----
   The 208px leaf plus 42% photo, 8% gap and 36% text did not fit: the text
   column ran past the right edge and the tags stood one per line. Smaller leaf,
   flexible text column, narrower tag padding. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .recipes-header .decor { width: 120px; height: 120px; }
  .recipes-header .title { flex: 1 1 0; min-width: 0; margin-left: 4%; }
  .recipes-header .tags a { padding-left: 24px; padding-right: 24px; }
}

/* ---- Team slider, block "authentic" (/team/), 768-991.98px ----
   While the Swiper is on, the desktop sizes made the first photo full width and
   the others capped at 210px: two people of different size and height. Equal
   cards (4:5 photo, 240px on screen) at the left of their slides, where the
   template pins the caption. From 992px the template's own rules (!important)
   apply, as before. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cheefs .images-slider.swiper-initialized .slider-item { align-items: flex-start; justify-content: flex-start; }
  .cheefs .images-slider.swiper-initialized .slider-item .slider-item-img { flex: none; width: 100%; max-width: 320px; height: auto; aspect-ratio: 4 / 5; margin-right: 0; }
  .cheefs .images-slider.swiper-initialized .slider-item img { height: 100%; }
  .cheefs .images-slider.swiper-initialized .slider-item .slider-title { min-height: 0; width: 100%; max-width: 320px; }
}

/* ---- Footer (768-849.98px) ----
   Three fixed columns squeezed the "about" text to 159px and 375px of height.
   The text goes full width on top, the three columns stay in a row below. */
@media (min-width: 768px) and (max-width: 849.98px) {
  .footer .container { flex-wrap: wrap; row-gap: 30px; }
  .footer .container > .footer-about { flex: 0 0 100%; max-width: none; }
}

/* ---- Header submenu on touch devices (768px+, no hover) ----
   app.css keeps the active-parent / active-child overrides and the arrow reset of
   the dropdown inside @media (hover:hover), so without hover the active parent and
   child were drawn as red pills. Same declarations as on desktop (app.css 1356-1368).
   No upper width limit, like the tap toggle in index.js: iPads in landscape are
   1180-1366px wide. Mouse desktops (hover:hover) never match this query. */
@media (min-width: 768px) and (hover: none) {
  header .container .nav-links li.has-dropdown > a.active {
    background: transparent;
    color: var(--color-red);
    padding-right: 18px;
    border-radius: 0;
  }
  header .container .nav-links li .dropdown-menu a.active {
    background: transparent !important;
    color: var(--color-red);
    font-weight: 600;
  }
  /* a tap leaves a sticky :hover; a closed parent keeps its arrow pointing down */
  header .container .nav-links li.has-dropdown:not(.open):hover > a::after {
    transform: translateY(-50%);
    opacity: 0.8;
  }
}

/* ---- CTA of block "picture_video_with_featured_items" (section.picture-video), 768-1099.98px ----
   A long button label (DE "INTERVALLFASTEN-BOX ERSTELLEN", 406px on screen) does
   not wrap, so it widened the 45% text column and pushed the photo out of the row
   (cut by 19px at 768). The label may wrap inside the column. */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .picture-video .row .content { min-width: 0; }
  .picture-video .row .content .btn { white-space: normal; text-align: center; }
}

/* ---- Header: dropdown arrow right after its label (768-1099.98px) ----
   app.css pins the arrow (::after, absolute, right 2px) to the edge of the link box.
   A label that wraps to two balanced, centred lines ("HOW IT / WORKS" at 768-799px)
   is narrower than that box, so the arrow drifted ~25px away from the text, next to
   the following item. Inline after the text it stays on the last line, right after
   the label. It is a plain inline glyph, not an inline-block: Chrome may break a line
   before an inline-block, but not inside "WORKS▾" (base.html has no space before
   </a>), so the arrow never drops to a line of its own. Same box as before: the 18px
   reserved for it = 10px gap + 6px arrow + 2px. An inline glyph cannot be rotated, so
   "open" swaps it for the up-pointing one. Last in the file so it also wins over
   the touch-device rules above (equal selectors). */
@media (min-width: 768px) and (max-width: 1099.98px) {
  header .container .nav-links li.has-dropdown > a,
  header .container .nav-links li.has-dropdown > a.active { display: block; padding-right: 2px; }
  /* the active parent is orange text, not a pill (app.css), but kept the pill's 15px
     left padding: on DE pages under "So funktioniert's" that pushed the right block
     to the screen edge */
  header .container .nav-links li.has-dropdown > a.active { padding-left: 0; }
  header .container .nav-links li.has-dropdown > a::after {
    position: static; display: inline; margin-left: 10px; transform: none;
  }
  header .container .nav-links li.has-dropdown:hover > a::after,
  header .container .nav-links li.has-dropdown.open > a::after { content: "\25B4"; transform: none; } /* ▴ */
}
@media (min-width: 768px) and (max-width: 1099.98px) and (hover: none) {
  header .container .nav-links li.has-dropdown > a.active { padding-right: 2px; padding-left: 0; }
  /* a tap leaves a sticky :hover; a closed parent keeps its arrow pointing down */
  header .container .nav-links li.has-dropdown:not(.open):hover > a::after { content: "\25BE"; transform: none; }
}

/* ---- Header: active item pill in FR / DE (768-991.98px) ----
   The active item is a red pill (app.css: padding 10px 15px). With the fixed logo and
   the tight FR/DE gaps above the row had no room left for those 30px: on Menü,
   Ernährungsblog and Geschenkkarte the right block went off the screen (DE "LOSLEGEN"
   cut by 7px at 768, again 2-6px from the edge at 900-908) and on the other pages it
   touched the edge. A slimmer pill on portrait tablets, still clear of its neighbours. */
@media (min-width: 768px) and (max-width: 991.98px) {
  html[lang="fr"] header .container .nav-links > ul > li:not(.has-dropdown) > a.active,
  html[lang="de"] header .container .nav-links > ul > li:not(.has-dropdown) > a.active { padding-left: 6px; padding-right: 6px; margin-left: -3px; margin-right: -3px; }
}