/**
 * Mind35 Distro — portal stylesheet (responsive layer).
 *
 * Every @media block from assets/css/m35-portal.css, moved here on 2026-09-23.
 * Enqueued from functions.php under the handle `m35-portal-responsive`, with
 * `m35-portal` as a declared dependency, so WordPress always prints it after
 * the design layer and these rules cascade last.
 *
 * ORDER MATTERS AND IS DELIBERATE. Max-width queries are listed from widest to
 * narrowest. On a 600px screen the 1024px, 980px, 900px, 782px, 768px, 767px,
 * 720px and 640px blocks all match at once, and the later rule wins at equal
 * specificity — so a narrower breakpoint must always sit below a wider one.
 * Inserting a new block in the wrong place will silently break a layout.
 * Add to the matching section; do not append to the end of the file.
 *
 * ---------------------------------------------------------------------------
 * CONTENTS
 *   1. ≤1024px — header, drawer handover, footer columns
 *   2. ≤980px  — split cards
 *   3. ≤900px  — CTA + form
 *   4. ≤782px  — WordPress admin bar
 *   5. ≤768px  — features grid
 *   6. ≤767px  — gate pages
 *   7. ≤720px  — portal footer
 *   8. ≤640px  — footer columns
 *   9. ≤520px  — password-reset links
 *   10. prefers-reduced-motion
 * ---------------------------------------------------------------------------
 */


/* ==========================================================================
   1. ≤1024px — HEADER, DRAWER HANDOVER, FOOTER COLUMNS
   ========================================================================== */

/*
  AUDIT C5 — RESOLVED 2026-09-23. Three separate @media (max-width:1024px)
  blocks governed the header. They partly contradicted each other and the
  effective layout was decided by source order rather than intent:

    block 1 — hid .covu-pill and .covu-cta, showed .covu-burger
    block 2 — repeated all three, added grid-template-columns:auto 1fr auto
              alongside display:flex on the same element, making the grid
              property inert, and tried to re-show the drawer CTA with
              .covu-drawer__cta .covu-cta
    block 3 — re-hid the CTA under .covu-header__actions .covu-cta and set
              grid-template-columns:auto auto, also inert next to display:flex

  An earlier round kept all three and labelled them. That documented the
  conflict without resolving it, and it concealed a live defect:

  THE MOBILE DRAWER'S CALL-TO-ACTION BUTTON WAS INVISIBLE.

  Block 2's unscoped `.covu-cta{ display:none }` applied to both copies of the
  button. Its companion rule `.covu-drawer__cta .covu-cta{ display:inline-flex }`
  never matched, because the drawer button sits in .covu-drawer__actions
  (header.php:217), not .covu-drawer__cta — a class with no corresponding markup
  anywhere in the theme. Block 3 then re-scoped the hide to the header copy but
  did nothing to restore the drawer copy. So at and below 1024px the drawer CTA
  was hidden, contrary to block 2's own comment, "CTA moves into drawer".

  The block below restores the documented intent and corrects the selector. The
  two grid-template-columns declarations are dropped because display:flex on the
  same element made them meaningless.

  The three originals are preserved verbatim in REMOVED-CODE-v5.md.
*/
@media (max-width: 1024px){

  /* --- Header: pill navigation gives way to the burger ------------------ */
  .covu-pill{   display: none; }
  .covu-burger{ display: inline-flex; justify-self: end; }

  /* --- Header: the CTA moves from the bar into the drawer --------------- */
  .covu-header__actions .covu-cta{ display: none; }
  .covu-drawer__actions .covu-cta{ display: inline-flex; }

  /* --- Header: cart icon stays in the bar at every width ---------------- */
  .covu-cart{ display: flex; }

  /*
    Flex, not grid. Both earlier blocks set grid-template-columns on this
    element while also setting display:flex, so the grid values never applied.
  */
  .covu-header__bar{
    display: flex;
    justify-content: space-between;
  }

  /*
    AUDIT C11 — .covu-footer__top is display:flex, so grid-template-columns
    never applied and the intended tablet stacking never happened; the layout
    only reflowed because of flex-wrap. The grid declaration is kept (harmless,
    and documents the original intent) with the flex equivalent beside it.
  */
  .covu-footer__top{
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .covu-footer__cta{  text-align: left; }
  .covu-footer__grid{ grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   2. ≤980px — SPLIT CARDS
   ========================================================================== */

@media (max-width: 980px){

  /* Single column, with the media block always above the copy. */
  .split{ grid-template-columns: 1fr; }

  .split--left  .split__media{ order: 1; }
  .split--left  .split__copy { order: 2; }
  .split--right .split__copy { order: 1; }
  .split--right .split__media{ order: 2; }

  /* Give the background image a height once the column collapses. */
  .split--career-card .split__media{ min-height: 260px; }
}


/* ==========================================================================
   3. ≤900px — CTA + FORM
   ========================================================================== */

@media (max-width: 900px){
  .cta-form-section{
    grid-template-columns: 1fr;
    padding: clamp(1rem, 5vw, 3rem);
  }
}


/* ==========================================================================
   4. ≤782px — WORDPRESS ADMIN BAR
   ========================================================================== */

/* Below this width the admin bar is 46px tall instead of 32px, and it stops
   being fixed. Keep the sticky header clear of it. */
@media (max-width: 782px){
  .admin-bar .covu-header{ top: 46px; }
}


/* ==========================================================================
   5. ≤768px — FEATURES GRID
   ========================================================================== */

@media (max-width: 768px){
  .feat-2col{ grid-template-columns: 1fr; }

  .gate-title{ line-height: 1.4 !important; }
}


/* ==========================================================================
   6. ≤767px — GATE PAGES
   ========================================================================== */

@media (max-width: 767px){
  .gate-logo{
    top: 20px;
    left: 20px;
    width: 50%;
  }

  .gate-support{ font-size: 14px; }

  .m35-pfooter__logo{ height: auto; }

  .eas-hero-v2__title{ line-height: 1.3 !important; }
}


/* ==========================================================================
   7. ≤720px — PORTAL FOOTER
   ========================================================================== */

@media (max-width: 720px){
  .m35-pfooter__inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .m35-pfooter__links{ gap: 6px 20px; }
  .m35-pfooter__copy{  margin-top: 2px; }
}


/* ==========================================================================
   8. ≤640px — FOOTER COLUMNS
   ========================================================================== */

/* Must stay below the 1024px block, which sets three columns. */
@media (max-width: 640px){
  .covu-footer__grid{ grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   9. ≤520px — PASSWORD-RESET LINKS
   ========================================================================== */

@media (max-width: 520px){
  .m35-reset__links{
    flex-direction: column;
    align-items: flex-start;
  }

  .m35-reset__sep{ display: none; }
}


/* ==========================================================================
   10. PREFERS-REDUCED-MOTION
   ========================================================================== */

/* Not a width query, so position in the file does not affect the cascade
   between breakpoints. Kept last, applying to any viewport. */
@media (prefers-reduced-motion: reduce){
  .covu-drawer,
  .covu-drawer__panel{ transition: none; }
}