/* responsive.css — shared responsive layer for the Minerva / VISDI site pages.
   These pages are built with inline React styles, so the inline rules win the
   cascade unless overridden with !important. Selectors match the browser-
   normalized inline `style` attribute (e.g. React's repeat(3,1fr) reads back as
   "repeat(3, 1fr)", and padding:"0 80px" reads back as "padding: 0px 80px").
   Loaded on every content page; the page's own styles still take precedence
   for anything more specific. */

/* ───────── Section / wrapper side padding ───────── */
@media (max-width: 880px){
  [style*="padding: 0px 80px"]{ padding-left:28px !important; padding-right:28px !important; }
  [style*="padding: 72px 80px"]{ padding-left:28px !important; padding-right:28px !important; }
  section[style*="px 48px"]{ padding-left:30px !important; padding-right:30px !important; }
  [style*="padding: 96px 72px 88px"]{ padding-left:30px !important; padding-right:30px !important; }
}
@media (max-width: 520px){
  [style*="padding: 0px 80px"]{ padding-left:18px !important; padding-right:18px !important; }
  [style*="padding: 72px 80px"]{ padding-left:18px !important; padding-right:18px !important; }
  section[style*="px 48px"]{ padding-left:18px !important; padding-right:18px !important; }
  [style*="padding: 96px 72px 88px"]{ padding-left:18px !important; padding-right:18px !important; }
}

/* ───────── NavBar (shared <nav>) ───────── */
@media (max-width: 1024px){
  nav{ height:auto !important; flex-wrap:wrap !important; row-gap:8px !important;
       padding-top:10px !important; padding-bottom:10px !important;
       padding-left:24px !important; padding-right:24px !important; }
  nav > div{ flex-wrap:wrap !important; row-gap:8px !important; }
}
@media (max-width: 520px){
  nav{ padding-left:16px !important; padding-right:16px !important; }
}

/* ───────── NavBar — mobile hamburger menu ─────────
   Desktop (≥1025px): inline division switches + section links show, burger hidden.
   ≤1024px (phones + ALL tablets incl. iPad Pro 834px / iPad Air 820px): inline
   clusters collapse, a single burger (top-right of Tier 1, and in the sticky
   sub-bar once scrolled) opens the full-screen overlay whose actions stack at
   equal full width. */
.nav-burger{ display:none; }
.nav-menu-overlay{ display:none; }
@media (max-width: 1024px){
  .nav-actions{ display:none !important; }
  .nav-links-desktop{ display:none !important; }
  .nav-burger{ display:inline-flex !important; align-items:center; justify-content:center; }
  .nav-menu-overlay.open{ display:flex !important; }
  header[style*="height: 76px"]{ padding-left:20px !important; padding-right:20px !important; }
}
@media (min-width: 1025px){
  .nav-menu-overlay{ display:none !important; }
}

/* ───────── Heroes (PageHero gap:72 · home hero gap:64): stack ───────── */
@media (max-width: 940px){
  [style*="display: flex"][style*="gap: 72px"],
  [style*="display: flex"][style*="gap: 64px"]{
    flex-direction:column !important; align-items:stretch !important; gap:34px !important; }
}

/* ───────── Grids ───────── */
@media (max-width: 940px){
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: 1fr 1fr 1fr"]{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns: repeat(4"]{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"]{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 760px){
  [style*="grid-template-columns: repeat(2"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 380px"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 380px 1fr"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 420px"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 420px 1fr"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 480px"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 480px 1fr"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: auto 1fr"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr auto"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 88px 1fr"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 80px 1fr auto"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(8"]{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width: 620px){
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"]{ grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(7"]{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  [style*="grid-template-columns: repeat(8"]{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* ───────── Fluid headings (mobile only — desktop sizes untouched) ───────── */
@media (max-width: 760px){
  h1{ font-size: clamp(32px, 8.5vw, 64px) !important; line-height:1.08 !important; }
}
@media (max-width: 620px){
  h2{ font-size: clamp(25px, 6.8vw, 44px) !important; }
}

/* ───────── Minerva Way diagram — swipe-strip on narrow viewports ─────────
   Cards are fully fluid (flex:1 1 0); below the panel's comfortable width they'd
   collapse to slivers. Pin the full desktop width so the cards keep their size on
   smaller screens and the strip scrolls sideways as one unit (loop + arrows + cards
   stay aligned) instead of shrinking. overflow-x:auto is inert when it fits, so wide
   desktop is untouched. */
.mway-scroll{ overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(159,181,205,0.45) transparent; }
.mway-scroll::-webkit-scrollbar{ height: 6px; }
.mway-scroll::-webkit-scrollbar-thumb{ background: rgba(159,181,205,0.4); border-radius: 3px; }
.mway-inner{ min-width: 1024px; }
@media (max-width: 1100px){
  .mway-hint{ display: block !important; }
}

/* ───────── "How the method works" — 8-step flow ─────────
   Every image's height is calc(naturalHeight * --mf), so a single scale factor
   (--mf) drives the whole set and the images keep their TRUE relative sizes to
   each other. The track wraps into as many rows as the available width allows —
   so as the window narrows or the page is zoomed in, the images reflow into more
   rows (a visible response) rather than all shrinking together. --mf steps down
   on genuinely small screens so the set stays sensibly sized on phones/tablets. */
.method-flow{ --mf: 0.125px; margin-bottom: 56px; }
.method-flow-track{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  column-gap: 18px; row-gap: 30px; }
.method-flow-img{ width: auto; flex-shrink: 0; object-fit: contain; display: block; }
.method-flow-arrow{ width: calc(320 * var(--mf)); height: auto; flex-shrink: 0;
  opacity: 0.95; display: block; }
@media (max-width: 1024px){ .method-flow{ --mf: 0.100px; } }
@media (max-width: 768px){ .method-flow{ --mf: 0.078px; } }
@media (max-width: 520px){ .method-flow{ --mf: 0.058px; } }

/* §2 method lead: one line on desktop, wrap on smaller screens so it never overflows */
@media (max-width: 1180px){
  .sh-lead-nowrap{ white-space: normal !important; max-width: 720px !important; }
}

/* ───────── Method hero art — keep descriptor labels attached to the image ─────────
   The hero stacks to a column below 940px and the flex container forces
   align-items:stretch, which stretches the image wrapper to full width. The layer
   labels are anchored at left:100% of that wrapper, so they detach and jump to the
   far right edge. Shrink the wrapper to its content so left:100% sits at the image's
   right edge again — labels stay pinned to the image. */
@media (max-width: 940px){
  .method-hero-art{ width: fit-content !important; max-width: 100% !important; align-self: flex-start !important; }
}
@media (max-width: 420px){
  .method-hero-art{ margin-right: 120px !important; }
}

/* ───────── Deep-dive Ledger floating accent — no horizontal scroll on zoom ─────────
   A decorative copy of the stacked-Ledger image is absolutely placed at left:624
   with left:100% side labels. On narrow/zoomed viewports it has no room and its
   labels overflow past the viewport edge, creating a page-wide horizontal scrollbar.
   It duplicates the hero Ledger visual, so hide it once the layout narrows. */
@media (max-width: 940px){
  .ledger-float{ display: none !important; }
}

/* ───────── Category "Knowledge Execution" cube — keep on-page when zoomed ─────────
   The cube overhangs the VISDI layer box at right:-68px. On wide screens that
   overhang lives inside the 80px container padding; as the padding shrinks (zoom /
   narrow), -68px clips past the viewport edge. Pull it inward step-by-step so it
   stays on-page AND stays in the box's empty right-overhang zone — never sliding
   over the left-aligned text. */
@media (max-width: 1180px){
  .cat-cube{ right: -34px !important; }
  .cat-visdi-box{ padding-right: 96px !important; }
}
@media (max-width: 880px){
  .cat-cube{ right: -12px !important; width: 104px !important; height: 104px !important; }
  .cat-visdi-box{ padding-right: 104px !important; }
}
@media (max-width: 520px){
  .cat-cube{ right: -4px !important; width: 92px !important; height: 92px !important; }
  .cat-visdi-box{ padding-right: 92px !important; }
}

/* ───────── Vocabulary wide cards — divider shifts left, stays aligned ─────────
   The horizontal cards fix the term column at 262px; on narrow/zoomed viewports
   that forces the bullets off the edge. Narrow the term column (so the divider
   moves left and the text gets more room) in identical steps for every card, so
   all four divider lines stay perfectly aligned. Let the role label wrap and the
   row gap tighten as space gets scarce. */
@media (max-width: 1180px){
  .vocab-wterm{ width: 188px !important; }
  .vocab-wide{ gap: 24px !important; }
  .vocab-wrole{ white-space: normal !important; }
}
@media (max-width: 880px){
  .vocab-wterm{ width: 150px !important; }
  .vocab-wide{ gap: 18px !important; padding-left: 24px !important; padding-right: 24px !important; }
  .vocab-wide > a{ height: 52px !important; padding: 0 14px !important; }
}
@media (max-width: 620px){
  .vocab-wterm{ width: 124px !important; }
  .vocab-wide{ gap: 14px !important; }
  .vocab-wterm h3{ font-size: 21px !important; }
}

/* ───────── Hero photo — keep headline legible on phones ─────────
   The hero image is absolutely placed at 60% width on the right. On narrow
   screens the headline wraps toward it; dim the photo so dark text always reads. */
@media (max-width: 760px){
  section[style*="min-height: 640px"] img[aria-hidden="true"]{ opacity: 0.28 !important; }
}