/* Shared responsive layer for the Code Folks site.

   The pages are authored with inline styles at desktop width. Inline styles are
   normalized by React and cannot be matched reliably from CSS, so responsive.js
   stamps stable hooks that this sheet targets:

     [data-r-grid="N"]  a grid with N explicit columns ("auto" = auto-fit wall)
     [data-r-shell]     a page-width shell that owns the side gutters
     [data-r-band]      a section with large vertical rhythm
     [data-r-card]      a padded, rounded card interior

   Desktop rendering is untouched. */

html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; }

/* Touch devices: real tap targets, no sticky hover */
@media (hover: none) {
  a, button, [role="button"], select, input, textarea { touch-action: manipulation; }
  a, button { -webkit-tap-highlight-color: rgba(226, 98, 46, .18); }
  a[href], button, [role="button"] { min-height: 44px; }
  nav a, .menu a { min-height: 44px; }
}

/* ================= LAPTOP / SMALL DESKTOP (≤ 1180px) ================= */
@media (max-width: 1180px) {
  [data-r-grid="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [data-r-grid="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  [data-r-grid="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ================= TABLET LANDSCAPE (≤ 1024px) ================= */
@media (max-width: 1024px) {
  [data-r-grid="6"],
  [data-r-grid="5"],
  [data-r-grid="4"],
  [data-r-grid="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* every asymmetric two-column split stacks */
  [data-r-grid="2"] { grid-template-columns: minmax(0, 1fr) !important; }

  [data-r-band] { padding-top: 58px !important; padding-bottom: 58px !important; }
}

/* ================= TABLET PORTRAIT (≤ 860px) ================= */
@media (max-width: 860px) {
  [data-r-grid="6"],
  [data-r-grid="5"],
  [data-r-grid="4"],
  [data-r-grid="3"],
  [data-r-grid="2"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* auto-fit walls must never force a track wider than the screen */
  [data-r-grid="auto"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; }

  [data-r-shell] { padding-inline: 18px !important; }
  [data-r-card] { padding: 24px 20px !important; }

  [data-hero-frame] { aspect-ratio: 16 / 10 !important; max-height: 46vh !important; width: 100% !important; }
}

/* ================= PHONE (≤ 560px) ================= */
@media (max-width: 560px) {
  [data-r-shell] { padding-inline: 15px !important; }
  [data-r-band] { padding-top: 44px !important; padding-bottom: 44px !important; }
  [data-r-card] { padding: 20px 17px !important; }
  [data-r-grid="auto"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* stat rows and button rows wrap instead of squeezing */
  [style*="display: flex"][style*="gap: 26px"],
  [style*="display: flex"][style*="gap: 22px"] { flex-wrap: wrap !important; }

  /* primary actions read better full width */
  a[style*="border-radius: 30px"][style*="padding: 13px 24px"],
  a[style*="border-radius: 30px"][style*="padding: 14px 26px"] { width: 100%; justify-content: center; }

  [data-hero-frame] { aspect-ratio: 4 / 3 !important; max-height: 38vh !important; }
  [data-topbar-meta] { display: none !important; }
}

/* Very small phones: never let a mono label force a horizontal scrollbar */
@media (max-width: 380px) {
  [style*="IBM Plex Mono"] { word-break: break-word; }
}