/* ============================================================
   RESPONSIVE LAYER — Dr. Renan Moura website
   The design-system components render with INLINE styles (fixed
   desktop grids, 40px insets). Inline styles can't be hit by CSS
   media queries — EXCEPT an author `!important` declaration, which
   beats a normal inline declaration. That's the mechanism used here.
   Fluid type tokens (clamp) already scale, so we only touch layout:
   collapse grids, shrink vertical rhythm, tighten page insets.
   ============================================================ */

/* ---------- Tablet / small laptop (<= 980px) ---------- */
@media (max-width: 980px) {
  /* Vertical rhythm: 160px -> 96px (recomputes every `var(--section-pad-y)`) */
  :root { --section-pad-y: var(--space-24); }

  /* Two-column content/media splits -> single column */
  .rm-split {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  /* Three-up card grids -> two-up */
  .rm-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer 4-col -> 2-col (targeted by its inline template) */
  #site-footer [style*="1.4fr 1fr 1fr 1.2fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
  }
}

/* ---------- Phone (<= 640px) ---------- */
@media (max-width: 640px) {
  /* Vertical rhythm: -> 80px */
  :root { --section-pad-y: var(--space-20); }

  /* Everything single column */
  .rm-grid-3 { grid-template-columns: 1fr !important; }
  .rm-split  { gap: 40px !important; }

  /* Tighten horizontal page inset: 40px -> 20px */
  .rm-x40 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #site-footer [style*="1.4fr 1fr 1fr 1.2fr"] { grid-template-columns: 1fr !important; }
  #site-footer > footer { padding-left: 20px !important; padding-right: 20px !important; }
}