/* ============================================================================
   DCA responsive layer
   ----------------------------------------------------------------------------
   Loaded LAST on every DCA page (layouts/dca/application.html.erb) so its rules
   win ties. It is linked ONLY from the DCA layout, so it can never affect the
   main application or the DTUI mini-app.

   These pages are design-tool exports: layout lives in inline `display:grid` /
   `display:flex` styles, with almost no media queries. That causes horizontal
   overflow on tablet/mobile — wide two-column heroes, 4-column footers, and
   fixed-size widgets push past the viewport and get clipped by an ancestor's
   overflow:hidden, so buttons show up "half" and cards/forms aren't fully
   visible. This layer makes everything fit down to small phones.
   ============================================================================ */

/* 1) Media can never be wider than its container. (max-width only — height is
      left alone so object-fit / fixed-ratio banners keep their proportions.)
      NOTE: <iframe> is deliberately excluded so the fixed-size reCAPTCHA widget
      keeps working; it is handled separately at the bottom. */
img, svg, video, canvas { max-width: 100%; }

/* 2) THE core fix. Grid items default to `min-width: auto`, meaning they refuse
      to shrink below their content's min-content width. A wide child (a big
      heading, the 302px reCAPTCHA, a two-input row) therefore forces its grid
      track wider than the screen, and the overflow gets clipped — hiding the
      right side of forms, buttons and cards. `min-width: 0` lets the tracks
      shrink to fit. Scoped to inline GRID containers only, so flex sliders such
      as the conference carousel (`flex: 0 0 <width>`) are never disturbed.
      Unconditional: on desktop there is ample room, so it has no visible effect. */
[style*="display: grid"] > *,
[style*="display:grid"]  > * { min-width: 0; }

/* 3) Form controls fill their column and never overflow it. */
input, select, textarea, button { max-width: 100%; }
.dca-hero-grid input, .dca-hero-grid select, .dca-hero-grid textarea,
.dca-split input, .dca-apply-form input { width: 100%; }

/* ---- Tablet: collapse the wide two-column hero ---------------------------- */
@media (max-width: 1024px) {
  .dca-hero-grid { grid-template-columns: 1fr !important; }
}

/* ---- Tablet / small tablet: collapse content splits; footer 4-col -> 2-col - */
@media (max-width: 820px) {
  .dca-split,
  .dca-mega,
  .dca-legal-grid,
  .dca-feature { grid-template-columns: 1fr !important; }
  .dca-split-media { order: -1; }                 /* media above copy when stacked */
  .dca-footer-top { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

/* ---- Phones: single column everywhere + tighter side gutters ------------- */
@media (max-width: 640px) {
  .dca-footer-top { grid-template-columns: 1fr !important; }
  /* The export bakes 32px side padding into every section wrapper; trim it so
     narrow screens get more usable width. */
  .dca-section  { padding-left: 20px !important; padding-right: 20px !important; }
  .dca-hero-grid { padding-left: 20px !important; padding-right: 20px !important; }
  /* Footer "Resources & Insights" auto-fill grid has a 280px min track; force a
     single column so its links never get clipped on narrow phones. */
  footer [style*="auto-fill"] { grid-template-columns: 1fr !important; }
}

/* 4) reCAPTCHA is a fixed 302px widget. On very narrow phones scale it down a
      touch so it (and the form around it) still fits without overflow. */
@media (max-width: 360px) {
  .g-recaptcha { transform: scale(0.86); transform-origin: 0 0; }
}