/* ═══ TABLET (769–1024px) ══════════════════════════════════════════════
   Every iPad held in portrait now gets the PHONE layout, not a 1280px
   desktop scaled to 0.81 — that is what made a tablet feel like a shrunken
   laptop instead of an app. The breakpoint in every other file moved from
   768px to 1024px to make that happen.

   What this file does is walk back the phone SIZING, which was tuned for a
   390px screen and looks stretched at 1024. Structure stays identical to the
   phone: bottom tab bar, mobile drawer, sticky item bar, stacked pack layout,
   scroll-to-results on a browse tile. Only proportions change.

   Loaded LAST so it outranks the phone rules at equal specificity; the
   !important flags mirror the ones they are overriding, not decoration. */

@media (min-width: 769px) and (max-width: 1024px) {

    /* ── Hero photos ──
       min-height: 75vw is a 4:3 photo on a phone. At 1024 that is 768px of
       hero before any content, i.e. most of an iPad screen. Cap it. */
    .home-hero      { min-height: min(75vw, 460px) !important; }
    .item-photo-zone,
    .item-detail-top { min-height: min(75vw, 460px) !important; }

    /* ── Grids get more columns rather than wider cards ── */
    .home-cats-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; }
    .home-picks-grid { gap: 14px !important; }
    .similar-grid   { grid-template-columns: repeat(3, 1fr) !important; }

    /* Brand cards size to their own name; give them more room to breathe so a
       row holds 4–5 instead of 3 stretched ones. */
    .home-brands-grid .home-cat-card { min-width: 120px; }

    /* ── Type: phone sizes were shrunk for a 390px screen ── */
    .home-cat-name      { font-size: 15px !important; }
    .home-pick-name     { font-size: 16px !important; }
    .home-section-title { font-size: 13px !important; }
    .home-cat-badge     { width: 44px !important; height: 44px !important; margin-bottom: 11px !important; }
    .home-cat-card      { padding: 24px 16px 20px !important; }
    .home-pick-card     { padding: 20px 18px !important; }

    /* The phone stacks the two hero buttons full-width. At 820px that is a
       700px-wide button, which reads as a banner rather than a control. */
    .home-hero-btns { max-width: 400px; margin-left: auto; margin-right: auto; }

    /* ── Recently viewed ── */
    .rv-card { width: 176px; }

    /* ── The pack page stacks everything full-width on a phone. A tablet has
       room for two of the narrower blocks side by side. ── */
    .pack-alloc-charts { flex-direction: row !important; gap: 18px; }
    .pack-alloc-charts > * { flex: 1 1 0; min-width: 0; }

    /* ── Bottom tab bar ──
       Full-bleed across 1024px leaves the labels marooned at the edges, so the
       row is centred at a comfortable reading width while the bar itself still
       spans the screen. */
    .tabbar { justify-content: center; }
    .tabbar-btn { flex: 0 1 200px; }
    .tabbar-btn span { font-size: 11px; }

    /* Slightly taller touch targets — a tablet is usually held two-handed and
       tapped with a thumb further from the centre. */
    .tabbar-btn { min-height: 58px; }

    /* ── Content width ──
       90% of 1024 is 921px of table, which is fine, but the reading blocks
       (prose, panels) get uncomfortable. Cap those without touching tables. */
    .screener-sub, .home-hero-sub { max-width: 62ch; }
}

/* Landscape iPads (1025–1366) stay on the desktop layout: at that width the
   desktop nav, multi-column tables and side-by-side panels are genuinely
   better than a stretched phone view. Nothing to do here — noted so the
   omission reads as a decision. */