/* ==========================================================================
   responsive.css — mobile/tablet overrides for skillsleapaus.com.au
   ==========================================================================
   The site's pages are styled entirely with inline style="" attributes and
   were designed desktop-first with fixed multi-column grids. Inline styles
   outrank stylesheets, so every rule here needs !important — inside a media
   query that combination safely wins at small widths and does nothing at
   desktop widths.

   IMPORTANT — selector matching: the dc-runtime renders pages through React,
   which re-serializes style attributes with normalized spacing (source
   "grid-template-columns:1fr 1fr" becomes "grid-template-columns: 1fr 1fr"
   in the live DOM). Every [style*=...] selector below therefore matches only
   on substrings that are IDENTICAL in the authored source and the serialized
   DOM — e.g. "repeat(4, 1fr)", "700 46px", "88px 32px". Never include a
   "property:value" colon in a selector, and test in the browser, not against
   the source text.
   ========================================================================== */

/* ---------- Tablet and down (<= 1024px) ---------- */
@media (max-width: 1024px) {

  /* 4-across card rows become 2x2 */
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* 5/6-across logo and badge strips become 3-across */
  [style*="repeat(5, 1fr)"],
  [style*="repeat(6, 1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ---------- Mobile (<= 768px) ---------- */
@media (max-width: 768px) {

  /* --- Layout: collapse every grid to a single column... --- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* --- ...except logo/badge strips, which read better 2-across --- */
  [style*="repeat(5, 1fr)"],
  [style*="repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Section containers (all use max-width:1200px): 32px gutters -> 20px --- */
  [style*="1200px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Type scale: every h1 on the site is a 40-50px hero heading --- */
  h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }

  /* --- Shrink section-heading h2s only; card-title h2s (22px) are
         already mobile-sized. "700 34px" etc. survive both the authored
         and the React-serialized font shorthand. --- */
  h2[style*="700 34px"],
  h2[style*="700 30px"],
  h2[style*="700 28px"] {
    font-size: 24px !important;
    line-height: 1.28 !important;
  }

  /* --- Stat/display numbers in divs and spans (36-44px on desktop) --- */
  div[style*="700 44px"], span[style*="700 44px"],
  div[style*="700 38px"], span[style*="700 38px"],
  div[style*="700 36px"], span[style*="700 36px"] {
    font-size: 30px !important;
  }

  /* --- Vertical rhythm: heavy desktop section padding reduced --- */
  [style*="88px 32px"],
  [style*="96px 32px"],
  [style*="100px 32px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  [style*="64px 32px"] {
    padding-top: 40px !important;
  }

  /* --- Header: swap the desktop nav for the burger button. The bar
         keeps its 74px height (logo left, burger right); the slide-down
         panel is rendered by SiteHeader's component state on tap. --- */
  nav[aria-label="Main"] {
    display: none !important;
  }
  button[aria-label="Open main menu"] {
    display: flex !important;
  }

  /* --- Only specific flex rows wrap. A blanket flex-wrap broke
         icon+text rows (checklist ticks, contact details): long text
         dropped BELOW the icon instead of wrapping beside it. Rows not
         listed here keep nowrap and shrink, which is correct for
         icon+text pairs. --- */

  /* Hero CTA button pairs (gap:14px + margin-top:32/34/36px). The
     :not() excludes icon+text rows that share gap:14px but always
     declare align-items. Both selector forms are needed: authored
     "gap:14px" and React-serialized "gap: 14px". */
  div[style*="gap:14px"][style*="margin-top:3"]:not([style*="align-items"]),
  div[style*="gap: 14px"][style*="margin-top: 3"]:not([style*="align-items"]) {
    flex-wrap: wrap !important;
  }

  /* Breadcrumb trails (Home > Services > Long page name) */
  div[style*="gap:8px"][style*="13.5px"],
  div[style*="gap: 8px"][style*="13.5px"] {
    flex-wrap: wrap !important;
  }

  /* --- Media never exceeds the viewport. Iframes keep their own height:
         the contact map sizes via its height attribute and the Vimeo
         players via inline height:100% in an aspect-ratio wrapper. --- */
  img, svg, video {
    max-width: 100% !important;
    height: auto;
  }
  iframe {
    max-width: 100% !important;
  }

  /* --- Safety net: decorative absolutely-positioned SVGs sit far
         outside the viewport by design (right:-140px etc.); sections
         mostly clip them, this catches the ones that don't. --- */
  body { overflow-x: hidden; }
}

/* ---------- Desktop guard (>= 769px) ---------- */
/* If the burger menu was left open and the window is resized up to
   desktop, hide the panel (the burger button hides itself via its
   inline display:none default). */
@media (min-width: 769px) {
  nav[aria-label="Mobile"] {
    display: none !important;
  }
}

/* ---------- Small phones (<= 400px) ---------- */
@media (max-width: 400px) {
  h1 {
    font-size: 28px !important;
  }
}