/* Responsive layer for the cleberalex design system.
   The DS components use INLINE styles, which cannot hold @media queries, so the
   responsive behaviour lives here — keyed on the .ds-<component> wrapper the SSR
   harness emits around each section. All values are the DS tokens. Loaded after
   /ds/styles.css, so these rules win (with !important over the inline styles). */

/* 1. Section padding. The components set var(--s-11) (160px) at every width;
   nothing reduces it, so heroes/sections are 160px tall on a phone. */
@media (max-width: 767px) {
  .g-calm, .g-calm-alt, .g-quiet, .g-bright, .g-dark, .g-anchor {
    padding-top: var(--s-9) !important;
    padding-bottom: var(--s-9) !important;
  }
}

/* 2. Fixed multi-column grids collapse to one column. (Grids declared
   repeat(auto-fit, minmax(Npx,1fr)) already collapse and are left alone.) */
@media (max-width: 767px) {
  .ds-hero_offer [style*="grid-template-columns"],
  .ds-offer_tiers [style*="grid-template-columns"],
  .ds-explain_timeline [style*="grid-template-columns"],
  .ds-explain_matrix [style*="grid-template-columns"],
  .ds-cms_box_small [style*="grid-template-columns"],
  .ds-proof_logos [style*="grid-template-columns"],
  .ds-cms_row [style*="grid-template-columns"],
  .ds-contact_split [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* numbered stack keeps a smaller number gutter */
  .ds-explain_stack_numbered [style*="grid-template-columns"] {
    grid-template-columns: 32px minmax(0, 1fr) !important;
  }
  /* FAQ keeps its +/− marker column */
  .ds-faq_fullwidth [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) 28px !important;
  }
}

/* 3. Header bar: let it wrap instead of crowding the brand/nav/CTA. */
@media (max-width: 767px) {
  header [style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    row-gap: var(--s-3) !important;
  }
}

/* 4. Footer: four fixed columns -> two, then one. */
@media (max-width: 991px) {
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 479px) {
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}