/* =============================================================================
   teas.co.uk — Recipes hub, MOBILE layer
   Load AFTER css/teas-recipes-hub.css (from the desktop package). Nothing here
   restyles the desktop view: the page is fluid by construction (clamp() type +
   auto-fit/auto-fill minmax() grids), so only the CHROME needs breakpoints.
   Breakpoints are the ones the live theme already uses (design-system.css):
   1180px · 760px · 420px.
   ========================================================================== */

/* ---------- mobile nav: 44px burger + drawer -------------------------------
   Hidden on desktop. On the live site the drawer already exists
   (mobile-nav.js + #primary-nav[data-open="true"]) — prefer wiring that one.  */
.th-burger {
  display: none;                        /* shown at <=1180px */
  width: 44px; height: 44px; flex: 0 0 44px; margin-left: auto;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(4,34,32,.10); border-radius: 999px;
  color: #042220; cursor: pointer; box-shadow: 0 1px 2px rgba(20,24,30,.05);
}
.th-burger svg { width: 22px; height: 22px; }
.th-mobile-menu {
  margin-top: 10px; padding: 10px; display: none; flex-direction: column;
  background: #fff; border: 1px solid rgba(4,34,32,.10); border-radius: 26px;
  box-shadow: 0 12px 32px rgba(14,20,40,.10);
}
.th-mobile-menu[data-open="true"] { display: flex; }
.th-mobile-menu a {
  padding: 15px 16px;                   /* 15+16+16 => >=44px tap target */
  font-size: 16px; font-weight: 600; color: #0f1626;
  border-bottom: 1px solid #eef1f6;
}
.th-mobile-menu a:last-child { border-bottom: 0; }
.th-mobile-menu a[aria-current="page"] {
  font-weight: 700; color: #fff; background: #0a4444; border-radius: 16px; border-bottom: 0;
}

/* ---------- 1180px: pill nav gives way to the burger ---------------------- */
@media (max-width: 1180px) {
  .th-nav    { display: none; }
  .th-burger { display: inline-flex; }
  .th-topbar { gap: 6px; padding: 7px 12px; flex-wrap: nowrap; justify-content: space-between; }
  .th-topbar .th-icon-btn { flex: 0 0 44px; width: 44px; height: 44px; }   /* WCAG 2.5.5 */
  .th-topbar .th-bag      { height: 44px; }
}

/* ---------- 760px: phone/tablet chrome ----------------------------------- */
@media (max-width: 760px) {
  .th-topbar-shell   { padding: 12px 14px 0; }
  .th-wrap           { padding: 12px 14px 20px; }
  .th-topbar,
  .th-foot           { border-radius: 26px; }
  .th-hero__index    { text-align: left; }
  .th-feature__art   { min-height: clamp(320px, 46vw, 480px); }
  .th-searchbar      { border-radius: 26px; padding: 16px; }
  .th-foot__bot      { justify-content: flex-start; }
  .th-band, .th-contrib { border-radius: 22px; }
}

/* ---------- 420px: small phones ----------------------------------------- */
@media (max-width: 420px) {
  .th-brand__word,
  .th-bag .b-text  { display: none; }        /* mark + count only, live rule */
  .th-counter      { grid-template-columns: 1fr 1fr; padding: 18px; }
  .th-rec__tile,
  .th-col__tile    { height: 132px; }
  .th-announce     { font-size: 11.5px; }
  /* marquee: one track + two duplicate groups (see desktop README §1). Speed up
     slightly on small screens so a full loop is not a 52s wait. */
  .th-announce__track { animation-duration: 34s; }
}

/* ---------- viewport guard (live rule, keeps 390px devices at 390px) ----- */
@media (max-width: 1180px) {
  html, body { overflow-x: hidden; max-width: 100%; }
}