/* =============================================================================
   teas.co.uk — Recipes hub · TABLET LANDSCAPE
   Targets: iPad 10.9" 1180×820 · iPad Pro 11" 1194×834 · iPad mini 1133×744
            · Galaxy Tab S 1280×800 (all landscape, incl. Split View ~980px)
   Load AFTER css/teas-recipes-hub.css. Landscape tablets are as WIDE as a small
   laptop but SHORT (744–834px tall) and still touch-driven. So the job here is
   the opposite of portrait: keep 3-up density, but compress vertical rhythm so
   more than one section is visible per screen, and keep 44px targets.
   ========================================================================== */

@media (min-width: 900px) and (max-width: 1366px) and (orientation: landscape) and (hover: none) {

  /* ---- page frame ------------------------------------------------------- */
  .th-topbar-shell { padding: 14px 26px 0; }
  .th-wrap         { padding: 14px 26px 24px; }

  /* ---- chrome: at 1180px+ the real pill nav is back, but it is touched,
          not hovered — so give the pills height without changing the look -- */
  .th-topbar { padding: 8px 10px; }
  .th-nav > a { padding: 12px 16px; }                 /* 44px tall pills */
  .th-nav > a[aria-current="page"] { padding: 12px 18px; }
  .th-nav__shop a { padding: 12px 15px; }
  .th-nav__shop button { padding: 12px 11px 10px; }
  .th-topbar .th-icon-btn { flex: 0 0 44px; width: 44px; height: 44px; }
  .th-topbar .th-bag { height: 44px; }
  /* Split View / narrow windows fall under 1180px, where the theme hides the
     pill nav — make sure the burger is available there too. */
  .th-burger { display: none; }

  /* ---- hero: two columns kept, but shorter. Copy 1fr, counter fixed ----- */
  .th-hero { padding: 30px 34px; }
  .th-hero__in { gap: 22px 36px; align-items: center; }
  .th-hero__copy { flex: 1 1 520px; }
  .th-hero__side { flex: 0 0 288px; }
  .th-hero h1 { font-size: 48px; line-height: .96; margin-top: 14px; }
  .th-hero__lede { font-size: 16px; margin-top: 16px; max-width: 54ch; }
  .th-hero__promises { margin-top: 18px; grid-template-columns: 1fr; gap: 10px; }
  .th-counter { padding: 20px; gap: 16px 14px; }
  .th-counter__n { font-size: 28px; }

  /* ---- search strip stays one row: it is the fastest thing to reach ----- */
  .th-searchbar { padding: 14px 18px; gap: 12px; }
  .th-searchbar form { flex: 1 1 420px; }
  .th-searchbar button[type=submit] { height: 44px; }
  .th-quick a { padding: 10px 14px; }

  /* ---- feature recipe: keep it side by side, cap the art panel height so
          the whole card fits a 820px-tall screen ----------------------- */
  .th-feature__card { grid-template-columns: .9fr 1.1fr; }
  .th-feature__art  { min-height: 0; height: 100%; padding: 24px 22px; }
  .th-feature__svg  { max-width: 210px; }
  .th-feature__body { padding: 24px 26px; }
  .th-feature__intro { font-size: 15px; margin-bottom: 14px; }
  .th-pills { margin-bottom: 18px; }
  .th-recipe-cols { grid-template-columns: 1fr 1fr; gap: 22px; }
  .th-feature__foot { margin-top: 20px; padding-top: 16px; }

  /* ---- grids: 3-up cards, 4-up collections, tighter vertical gaps ------- */
  .th-grid-fam,
  .th-grid-rec { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .th-grid-col { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .th-grid-occ { grid-template-columns: repeat(6, 1fr); gap: 10px; }
  .th-rec__tile { height: 138px; }                   /* shorter: screen is short */
  .th-col__tile { height: 88px; }
  .th-fam__links a { padding: 11px 0; }
  .th-fam p, .th-rec__body p { font-size: 13.5px; }

  /* ---- vertical rhythm: sections come ~25% closer together ------------- */
  .th-section, .th-band { margin-top: 46px; }
  .th-groups { gap: 24px; }
  .th-section__head { padding-bottom: 14px; margin-bottom: 18px; }
  .th-feature { margin-top: 42px; }
  .th-contrib { margin-top: 42px; padding: 28px 30px; }

  /* ---- footer: full 6-column sitemap fits at this width ---------------- */
  .th-foot__news { grid-template-columns: 1.2fr 1fr; padding: 30px 32px; }
  .th-foot__grid { grid-template-columns: 1.3fr repeat(5, 1fr); padding: 34px 32px; gap: 26px; }
  .th-foot__col a { padding: 6px 0; }
  .th-foot__explore, .th-foot__trust, .th-foot__bot { padding-left: 32px; padding-right: 32px; }
}

/* Split View / Stage Manager: a landscape tablet window can be ~500-980px wide.
   Those widths are already handled by the fluid desktop sheet + the mobile
   layer's 1180px block; nothing extra needed here. */