/* ── Umagine — Responsive Styles ─────────────────────────────────────────
   Loads after brand.css. Uses !important to override React inline styles
   where needed — inline styles cannot otherwise be targeted by media queries.
   ─────────────────────────────────────────────────────────────────────── */

/* ─── Hamburger button (hidden on desktop) ──────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
  z-index: 210;
  position: relative;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

/* ─── Mobile full-screen menu ───────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  padding: 90px 28px 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateY(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.mobile-menu.open {
  transform: translateY(0);
  pointer-events: all;
}
.mobile-menu a {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  display: block;
  transition: color .15s;
}
.mobile-menu a:hover { color: var(--accent); }
.mobile-menu a.active { color: var(--accent); }
.mobile-menu .mobile-cta {
  margin-top: 28px;
  background: var(--accent);
  color: var(--bg) !important;
  border-radius: 999px;
  padding: 16px 28px;
  text-align: center;
  font-weight: 600;
  font-size: 15px !important;
  border: none !important;
}
.mobile-menu-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
  padding: 8px;
  z-index: 210;
}

/* ─── Primary nav density ─────────────────────────────────────────────────
   5 domains + Insights + Tools + CTA is a wide nav. Tighten it between
   ~1200–1360 px so all items still fit before the hamburger kicks in. ─── */
@media (max-width: 1360px) {
  .nav { gap: 2px; }
  .nav a { padding: 9px 11px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════════
   TABLET  — up to 1199 px
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {

  .container { padding: 0 36px; }

  /* Full nav no longer fits at this width — switch to hamburger / mobile menu */
  .nav { display: none !important; }
  .hamburger { display: flex !important; }

  /* 5-column grids → 3 columns */
  [style*="repeat(5, 1fr)"]  { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="repeat(5,1fr)"]   { grid-template-columns: repeat(3, 1fr) !important; }

  /* 4-column grids → 2 columns */
  [style*="repeat(4, 1fr)"]  { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(4,1fr)"]   { grid-template-columns: repeat(2, 1fr) !important; }

  /* Consulting sub-vertical cards */
  [style*="1fr 1fr"] { gap: 20px !important; }

  /* Footer columns */
  .footer-grid { grid-template-columns: 1fr 1fr 1fr !important; gap: 36px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE  — up to 768 px
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Container ── */
  .container { padding: 0 20px !important; }

  /* ── Header ── */
  .header-row { padding: 13px 20px !important; }
  .nav { display: none !important; }
  .hamburger { display: flex !important; }

  /* ── THE KEY TRICK:
        React renders all layout as inline styles (e.g. gridTemplateColumns).
        Inline styles beat class selectors. Only !important + attribute
        selectors can override them without touching every JSX file. ── */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Verticals list: number + tag inline, title/desc/arrow full-width below */
  [style*="72px 160px"] {
    grid-template-columns: 48px 1fr !important;
    gap: 4px 16px !important;
  }
  [style*="72px 160px"] > *:nth-child(3),
  [style*="72px 160px"] > *:nth-child(4) {
    grid-column: 1 / -1 !important;
  }
  [style*="72px 160px"] > *:nth-child(5) {
    grid-column: 2 !important;
    text-align: right;
  }

  /* Metrics-style 4-col grids → stay as 2x2 (overrides general 1fr rule above) */
  [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 16px !important;
  }

  /* Preserve content + icon grids (e.g. careers role card: title + ± expand button) */
  [style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr auto !important;
  }
  /* Strip left-border decoration on metrics items when in 2-col layout
     (React serializes inline styles with hyphenated CSS names) */
  [style*="repeat(4, 1fr)"] > [style*="border-left"],
  [style*="repeat(4,1fr)"] > [style*="border-left"] {
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* Thought-leadership 3+1 grid */
  [style*="repeat(3, 1fr) 1.1fr"] { grid-template-columns: 1fr !important; }
  [style*="repeat(3,1fr) 1.1fr"]  { grid-template-columns: 1fr !important; }
  /* Cards in this grid: kill minHeight so content packs tightly */
  [style*="min-height: 280"] { min-height: auto !important; }

  /* Hydrogen lifecycle: hide horizontal progress track when stages stack vertically */
  [style*="position: absolute"][style*="top: 50%"][style*="height: 2px"] {
    display: none !important;
  }
  /* Lifecycle stage circles — smaller on mobile */
  [style*="width: 76px"][style*="height: 76px"][style*="border-radius: 50%"] {
    width: 56px !important;
    height: 56px !important;
    font-size: 18px !important;
  }

  /* Configurator: reduce excessive container padding */
  [style*="padding: 48px"] { padding: 20px !important; }
  /* Configurator inner stack illustration — keep narrow */
  [style*="flex: 0 0 48px"] { flex: 0 0 36px !important; }

  /* Capacity bar — 10-cell horizontal stays scrollable */
  [style*="repeat(5, 1fr)"][style*="2fr"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Section padding ── */
  section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* ── Display / hero type scale-down ── */
  [style*="clamp(72px"]  { font-size: clamp(44px, 12vw, 64px) !important; line-height: 1 !important; }
  [style*="clamp(56px"]  { font-size: clamp(36px, 10vw, 52px) !important; }
  [style*="clamp(48px"]  { font-size: clamp(32px,  9vw, 44px) !important; }
  [style*="clamp(44px"]  { font-size: clamp(30px,  8vw, 40px) !important; }
  [style*="clamp(40px"]  { font-size: clamp(28px,  8vw, 36px) !important; }
  [style*="clamp(36px"]  { font-size: clamp(26px,  7vw, 32px) !important; }
  [style*="clamp(26px"]  { font-size: clamp(22px,  6vw, 28px) !important; }
  [style*="clamp(28px"]  { font-size: clamp(22px,  6vw, 28px) !important; }

  /* Large stat numbers (React serializes inline styles with hyphenated names) */
  [style*="font-size: 56"]  { font-size: 36px !important; }
  [style*="font-size: 52"]  { font-size: 34px !important; }
  [style*="font-size: 44"]  { font-size: 30px !important; }
  [style*="font-size: 72"]  { font-size: 40px !important; }
  [style*="font-size: 88"]  { font-size: 48px !important; }
  [style*="font-size: 192"] { font-size: 72px !important; }

  /* ── CTA box padding ── */
  [style*="56px 72px"] { padding: 36px 24px !important; }
  [style*="64px 72px"] { padding: 40px 24px !important; }
  [style*="48px 72px"] { padding: 32px 24px !important; }

  /* ── Buttons in CTA boxes — full width ── */
  [style*="flex-direction: column"] .btn {
    justify-content: center;
    width: 100%;
  }

  /* ── Footer ── */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center;
  }
  .site-footer { margin-top: 48px !important; }

  /* ── Page hero two-column → stacked ── */
  /* The 1.3fr 1fr hero grid is already caught by grid-template-columns above */

  /* ── Tab navigation bar — horizontal scroll ── */
  .tab-nav-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* ── Maps / SVG diagrams — cap width ── */
  svg { max-width: 100%; }

  /* ── Thought leadership — hide the wide number column ── */
  [style*="font-size: 48"][style*="font-weight: 400"] { font-size: 32px !important; }

  /* ── Marquee ── */
  [style*="marquee"] { font-size: 18px !important; }

  /* ── Hide decorative blobs on very small screens ── */
  .hero-blob { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   SMALL MOBILE — up to 420 px
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .container { padding: 0 16px !important; }
  .site-footer .footer-grid { grid-template-columns: 1fr !important; }
  [style*="56px 72px"] { padding: 28px 16px !important; }
  [style*="64px 72px"] { padding: 32px 16px !important; }
}