/* =============================================================================
   teas.co.uk — Recipes hub · TABLET PORTRAIT
   Targets: iPad 10.9" 820×1180 · iPad Pro 11" 834×1194 · iPad Pro 12.9" 1024×1366
            · iPad mini 744×1133 · Galaxy Tab S 800×1280 (all portrait)
   Load AFTER css/teas-recipes-hub.css. Portrait tablets are WIDE ENOUGH for two
   columns but NOT for three, and they are touch devices — so the job here is:
   force clean 2-ups, keep the hero readable at 3/4 width, and lift every tap
   target to 44px. Query is orientation-scoped so landscape is untouched.
   ========================================================================== */

@media (min-width: 700px) and (max-width: 1180px) and (orientation: portrait) {

  /* ---- announcement marquee: same one-track/two-group structure as desktop,
          just a touch faster because the strip is narrower ------------------ */
  .th-announce__track { animation-duration: 42s; }

  /* ---- page frame: tablets get a real gutter, not a phone gutter ---------- */
  .th-topbar-shell { padding: 18px 24px 0; }
  .th-wrap         { padding: 16px 24px 28px; }

  /* ---- chrome: pill nav is hidden below 1180px, so the burger row must
          feel deliberate rather than cramped ---------------------------- */
  .th-topbar { gap: 10px; padding: 8px 14px; border-radius: 999px; }
  .th-topbar .th-icon-btn { flex: 0 0 44px; width: 44px; height: 44px; }
  .th-topbar .th-icon-btn svg { width: 18px; height: 18px; }
  .th-topbar .th-bag { height: 44px; padding: 0 18px 0 8px; font-size: 14px; }
  .th-burger { display: inline-flex; }
  /* drawer: two columns of links — a portrait tablet has the width for it */
  .th-mobile-menu { display: none; }
  .th-mobile-menu[data-open="true"] { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 14px; }
  .th-mobile-menu a { border-bottom: 0; background: #f6f8fb; border-radius: 14px; padding: 16px; font-size: 16px; }
  .th-mobile-menu a[aria-current="page"] { background: #0a4444; }

  /* ---- hero: single column. At 820px a 250px counter beside 480px of copy
          squeezes both, so the counter goes full width as a 4-across strip -- */
  .th-hero          { padding: 34px 32px; border-radius: 28px; }
  .th-hero__in      { gap: 26px; }
  .th-hero__copy    { flex: 1 1 100%; }
  .th-hero__side    { flex: 1 1 100%; }
  .th-hero h1       { font-size: 46px; }        /* clamp would give ~43px at 820 */
  .th-hero__lede    { font-size: 16.5px; max-width: 62ch; }
  .th-hero__promises { grid-template-columns: repeat(3, 1fr); gap: 12px 18px; }
  .th-hero__index   { text-align: left; }
  .th-counter       { grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 20px 22px; }
  .th-counter__n    { font-size: 27px; }

  /* ---- search strip: label above the field so the field keeps its length -- */
  .th-searchbar { border-radius: 28px; padding: 16px 18px; }
  .th-searchbar__row { gap: 10px 14px; }
  .th-searchbar form { flex: 1 1 100%; }
  .th-searchbar button[type=submit] { height: 44px; }
  .th-quick a { padding: 10px 15px; }           /* 44px tall touch chips */

  /* ---- feature recipe: illustration on top, method under it ------------- */
  .th-feature__card { grid-template-columns: 1fr; }
  .th-feature__art  { min-height: 380px; border-right: 0; border-bottom: 1px solid var(--th-line); }
  .th-feature__svg  { max-width: 250px; }
  .th-recipe-cols   { grid-template-columns: 1fr 1fr; }   /* ingredients | method */
  .th-feature__foot .th-btn { padding: 13px 22px; }

  /* ---- card grids: hard 2-up everywhere (auto-fit would give 2 or 3) ----- */
  .th-grid-fam,
  .th-grid-rec,
  .th-grid-col  { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .th-grid-occ  { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .th-rec__tile { height: 168px; }              /* wider cards deserve a taller tile */
  .th-col__tile { height: 104px; }
  .th-fam__links a { padding: 12px 0; }         /* 44px rows for thumbs */

  /* ---- occasion + contribute ------------------------------------------- */
  .th-occ { padding: 22px 20px; }
  .th-contrib { grid-template-columns: 1fr; border-radius: 24px; }
  .th-contrib__actions { flex-direction: row; flex-wrap: wrap; }
  .th-contrib__actions a { flex: 1 1 220px; padding: 15px 22px; }
  .th-contrib__actions a:nth-child(3) { flex: 1 1 100%; }

  /* ---- footer: 3 columns reads better than 4 squeezed ------------------- */
  .th-foot         { border-radius: 30px; }
  .th-foot__news   { grid-template-columns: 1fr; padding: 30px 28px; }
  .th-foot__grid   { grid-template-columns: repeat(3, 1fr); padding: 32px 28px; gap: 28px; }
  .th-foot__col a  { padding: 7px 0; }          /* touch-sized link rows */
  .th-foot__explore,
  .th-foot__trust,
  .th-foot__bot    { padding-left: 28px; padding-right: 28px; }
  .th-foot__bot    { justify-content: flex-start; }
}