/* ============================================================
   NOHRA Universe — responsive layer for mobile & tablets
   ------------------------------------------------------------
   These pages are authored with fixed, desktop-scale inline
   styles (large hero type, multi-column grids, wide paddings,
   1360px desktop mockups). This stylesheet adapts them for
   small screens by overriding the inline declarations via
   [style*=...] attribute selectors + !important.

   Phone mockups (.ph / .ph-sm) are fixed-size design artifacts:
   their internal grids must NOT reflow, so any grid collapse is
   re-asserted for elements inside a phone frame (higher
   specificity wins).
   ============================================================ */

/* Never allow horizontal scroll of the whole page on touch devices */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img { max-width: 100%; }

  /* Wide content containers */
  .w       { padding-left: 32px !important; padding-right: 32px !important; }
  .section { padding-left: 32px !important; padding-right: 32px !important; }

  /* Two-pane / fixed-column layouts → single column on tablets */
  [style*="grid-template-columns:480px 1fr"],
  [style*="grid-template-columns:340px 1fr"],
  [style*="grid-template-columns:300px 1fr 360px"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1.35fr 1fr"],
  [style*="grid-template-columns:1.8fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Tame the largest hero type one step down on tablets */
  [style*="font-size:136px"] { font-size: 96px !important; }
  [style*="font-size:80px"]  { font-size: 60px !important; }
  [style*="font-size:72px"]  { font-size: 56px !important; }
  [style*="font-size:68px"]  { font-size: 52px !important; }

  /* Wide desktop mockup frames (1360px) become horizontally scrollable */
  *:has(> .dk) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* A grid that holds full phone mockups: at most 2 per row on tablets */
  [style*="grid-template-columns:repeat(3,1fr)"]:has(.ph),
  [style*="grid-template-columns:repeat(2,1fr)"]:has(.ph) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   MOBILE & SMALL TABLETS  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Containers & section padding ---- */
  .w        { padding-left: 18px !important; padding-right: 18px !important; }
  .section  { padding-left: 18px !important; padding-right: 18px !important; }
  .divider  { margin-top: 48px !important; margin-bottom: 48px !important; }
  .zone-card{ padding: 22px 20px !important; }

  [style*="padding:0 48px"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding:0 96px"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding:0 28px"] { padding-left: 14px !important; padding-right: 14px !important; }

  /* Hero / oversized block paddings (reduce horizontal + vertical) */
  [style*="padding:96px 48px 72px"] { padding: 56px 18px 40px !important; }
  [style*="padding:80px 48px 60px"] { padding: 52px 18px 36px !important; }
  [style*="padding:56px 48px 96px"] { padding: 40px 18px 56px !important; }
  [style*="padding:56px 64px"]      { padding: 30px 20px !important; }
  [style*="padding:52px 56px"]      { padding: 28px 20px !important; }
  [style*="padding:44px 52px"]      { padding: 26px 20px !important; }
  [style*="padding:40px"]           { padding: 22px !important; }
  [style*="padding:48px 40px"]      { padding: 24px 20px !important; }
  [style*="padding:36px 40px"]      { padding: 22px 20px !important; }
  [style*="padding:32px 36px"]      { padding: 22px 20px !important; }

  /* merger-ux page is one wide max-content canvas → let it flow normally */
  [style*="width:max-content"] {
    width: auto !important;
    min-width: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* ---- Grid layouts → single column ----
     Substring "1fr 1fr" also matches "1fr 1fr 1fr". */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr auto"],
  [style*="grid-template-columns:1fr auto 1fr"],
  [style*="grid-template-columns:480px 1fr"],
  [style*="grid-template-columns:340px 1fr"],
  [style*="grid-template-columns:300px 1fr 360px"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1.35fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Card rows: 3 / 4 up → 2 up so tiles stay legible */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* …but a grid of full phone mockups stacks one per row (each is ~280px wide) */
  [style*="grid-template-columns:repeat(3,1fr)"]:has(.ph),
  [style*="grid-template-columns:repeat(2,1fr)"]:has(.ph),
  [style*="grid-template-columns:repeat(4,1fr)"]:has(.ph) {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }

  /* Comparison table: keep 3 columns but shrink the label gutter */
  [style*="grid-template-columns:120px 1fr 1fr"] {
    grid-template-columns: 64px 1fr 1fr !important;
  }

  /* Wide financial table row → let the 6 columns compress, not overflow */
  [style*="grid-template-columns:1.8fr"] {
    grid-template-columns: 1.4fr repeat(5, .72fr) !important;
  }

  /* Collapse oversized gaps once content is stacked */
  [style*="gap:80px"] { gap: 28px !important; }
  [style*="gap:64px"] { gap: 26px !important; }
  [style*="gap:60px"] { gap: 26px !important; }
  [style*="gap:48px"] { gap: 24px !important; }
  [style*="gap:40px"] { gap: 24px !important; }
  [style*="gap:36px"] { gap: 22px !important; }
  [style*="gap:32px"] { gap: 22px !important; }

  /* ---- Typography scaling ---- */
  [style*="font-size:136px"] { font-size: 58px !important; }
  [style*="font-size:80px"]  { font-size: 42px !important; }
  [style*="font-size:72px"]  { font-size: 40px !important; }
  [style*="font-size:68px"]  { font-size: 38px !important; }
  [style*="font-size:58px"]  { font-size: 34px !important; }
  [style*="font-size:54px"]  { font-size: 32px !important; }
  [style*="font-size:52px"]  { font-size: 32px !important; }
  [style*="font-size:48px"]  { font-size: 30px !important; }
  [style*="font-size:44px"]  { font-size: 28px !important; }
  [style*="font-size:42px"]  { font-size: 28px !important; }
  [style*="font-size:40px"]  { font-size: 26px !important; }

  /* Shrink the hero ring image that sits between the giant N…HRA letters */
  [style*="height:108px;width:108px"],
  [style*="width:108px;height:108px"] { width: 52px !important; height: 52px !important; }

  /* step-number (experience zones) */
  .step-num { font-size: 44px !important; width: 64px !important; min-width: 64px !important; }

  /* ---- Top navigation (index.html tab bar) ---- */
  /* Let the button row scroll horizontally instead of overflowing */
  [style*="display:flex;gap:3px;flex:1"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [style*="display:flex;gap:3px;flex:1"]::-webkit-scrollbar { display: none; }
  [style*="display:flex;gap:3px;flex:1"] > button { flex: none !important; }
  /* Drop the trailing tab label so the bar isn't squeezed */
  [style*="letter-spacing:.14em"][style*="flex:none"][style*="font-size:10px"] { display: none !important; }

  /* ============================================================
     RE-ASSERT phone-mockup internals (fixed-size artifacts).
     These selectors are more specific than the bare [style*=...]
     collapses above, so the phones keep their intended layout.
     ============================================================ */
  .ph     [style*="grid-template-columns:1fr 1fr"],
  .ph-sm  [style*="grid-template-columns:1fr 1fr"]     { grid-template-columns: 1fr 1fr !important; }
  .ph     [style*="grid-template-columns:1fr 1fr 1fr"],
  .ph-sm  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr 1fr !important; }
  .ph     [style*="grid-template-columns:repeat(3,1fr)"],
  .ph-sm  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  .ph     [style*="grid-template-columns:repeat(4,1fr)"],
  .ph-sm  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(4, 1fr) !important; }
  .ph     [style*="grid-template-columns:1fr auto"],
  .ph-sm  [style*="grid-template-columns:1fr auto"]    { grid-template-columns: 1fr auto !important; }
  /* Phone-internal font sizes are intentionally small — leave them be */
  .ph     [style*="font-size:40px"],
  .ph-sm  [style*="font-size:40px"] { font-size: 40px !important; }
}