/* =========================================================
   Postzilla — Breakpoints
   Mobile-first. Base (unprefixed) styles in base/components
   target iPhone SE portrait (375×667). Everything here is an
   explicit, tested step up from there — not an assumption
   that a device "inherits" from its nearest neighbor.

   Reference viewports (see docs/ARCHITECTURE.md §8.2):
     iPhone SE          375×667  / 667×375
     iPhone Pro Max      430×932  / 932×430
     iPad mini            744×1133 / 1133×744
     iPad Air              820×1180 / 1180×820
     iPad Pro 12.9"          1024×1366 / 1366×1024
     Desktop                 1280+ (design up to 1920)
   ========================================================= */

/* -----------------------------------------------------------
   iPhone Pro Max and larger phones — min-width: 428px
   ----------------------------------------------------------- */
   @media (min-width: 428px) {
      .pz-hero__actions {
        flex-direction: row;
      }
    }
    
    /* -----------------------------------------------------------
       iPad mini portrait and up — min-width: 744px
       Nav becomes visible, grids move to 2 columns, tiers side by side.
       ----------------------------------------------------------- */
    @media (min-width: 744px) {
      .pz-grid--3 { grid-template-columns: repeat(2, 1fr); }
      .pz-tiers { grid-template-columns: repeat(2, 1fr); }
    
      .pz-hero { padding-block: var(--pz-space-9) var(--pz-space-8); }
    }
    
    /* -----------------------------------------------------------
       Desktop nav trigger — iPad Pro 12.9" and true desktop only.
       iPad mini (744×1133) and iPad Air (820×1180) stay in toggle
       mode in BOTH orientations: their landscape widths (1133 /
       1180) are wider than iPad Pro's portrait width (1024), so a
       plain min-width can't separate "Pro portrait" from "mini/Air
       landscape" — width alone isn't enough, orientation has to
       gate it too.
    
       - min-width:1280  -> true desktop, any orientation, and also
                             catches iPad Pro landscape (1366).
       - min-width:1024 + portrait -> iPad Pro portrait (1024) only;
                             mini/Air landscape are excluded because
                             they're landscape, not because of width. */
    @media (min-width: 1280px), (min-width: 1024px) and (orientation: portrait) {
      /* The desktop model: primary nav between the logo and the
         controls, call-to-action buttons back in the bar, hamburger
         gone. Below this breakpoint the same links live in the drawer. */
      .pz-nav { display: flex; }
      .pz-header__actions .pz-btn { display: inline-flex; }
      .pz-menu-btn { display: none; }
      .pz-header__actions { gap: var(--pz-space-3); }
      /* Force the drawer shut above the breakpoint. Open it on a
         tablet, rotate it, and the button that closes it is gone:
         the drawer would stay stuck open with no way out. */
      .pz-mobile-nav,
      .pz-mobile-nav.is-open { display: none; }
    }
    
    /* -----------------------------------------------------------
       Tablet landscape (iPad mini / Air / Pro landscape widths)
       Layout genuinely changes shape here, not just stretches.
       ----------------------------------------------------------- */
    @media (min-width: 1024px) and (orientation: landscape) {
      .pz-grid--3 { grid-template-columns: repeat(3, 1fr); }
    }
    
    /* -----------------------------------------------------------
       iPad Air portrait and up — min-width: 820px
       ----------------------------------------------------------- */
    @media (min-width: 820px) {
      .pz-container { padding-inline: var(--pz-space-6); }
    }
    
    /* -----------------------------------------------------------
       iPad Pro 12.9" portrait and small desktops — min-width: 1024px
       ----------------------------------------------------------- */
    @media (min-width: 1024px) {
      .pz-grid--3 { grid-template-columns: repeat(3, 1fr); }
    }
    
    /* -----------------------------------------------------------
       Desktop — min-width: 1280px
       ----------------------------------------------------------- */
    @media (min-width: 1280px) {
      .pz-hero { padding-block: 7rem var(--pz-space-9); }
      .pz-hero h1 { max-width: 22ch; }
      .pz-section { padding-block: var(--pz-space-9); }
    }
    
    /* -----------------------------------------------------------
       Explicit landscape handling for phones (short viewport height)
       Compress vertical rhythm so the hero doesn't force scrolling
       before a user sees the CTA.
       ----------------------------------------------------------- */
    @media (max-width: 743px) and (orientation: landscape) {
      .pz-hero { padding-block: var(--pz-space-6) var(--pz-space-5); }
      .pz-hero__sub { margin-bottom: var(--pz-space-4); }
    }
    
    /* -----------------------------------------------------------
       Reduced motion — respected regardless of breakpoint.
       ----------------------------------------------------------- */
    @media (prefers-reduced-motion: reduce) {
      * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    }