/* ============================================================
   Terra Reporting — global responsive layer
   Loaded on every page AFTER colors_and_type.css.
   Collapses desktop inline grids, tames padding, adds mobile nav.
   Uses !important to win over React inline styles.
   ============================================================ */

html, body { max-width: 100%; }
body { overflow-x: hidden; }
img { max-width: 100%; }
/* icons must never absorb flex shrink — a wrapping label would squash them (aspect distortion) */
svg.lucide, [class^="lucide-"], [class*=" lucide-"] { flex-shrink: 0; }
/* same guard for small fixed-size status dots / badges rendered as plain spans */
[style*="border-radius: 99px"][style*="height: 7px"], [style*="border-radius: 99px"][style*="height: 8px"],
[style*="border-radius: 99px"][style*="height: 6px"], [style*="border-radius: 99px"][style*="height: 10px"] { flex-shrink: 0; }

/* Hero + announcement band together fill the first screen: the hero takes the
   viewport minus the 104px header and the 60px band, but never less than its
   own content. Mobile keeps natural height so nothing is squeezed. */
.t-hero{display:flex;align-items:center;min-height:calc(100svh - 166px)}
/* One short-viewport treatment for the whole range: the mild/tight split left
   741-860px tall screens (768, 800, 850) with a full-size left column, so the
   hero ran to 688px and the announcement band fell below the fold. */
@media (min-width: 901px) and (max-height: 900px){
  .t-hero > .t-container{padding-top:28px!important;padding-bottom:24px!important}
  .t-hero h1{font-size:clamp(30px,3.4vw,42px)!important;margin-top:14px!important}
  .t-hero h1 + p{font-size:17px!important;margin-top:16px!important}
  .t-hero .t-herotrust{display:none!important}
  .t-dash-secondary{display:none!important}
}
.t-hero > .t-container{width:100%}
@media (max-width: 900px){.t-hero{min-height:0;display:block}}

/* mobile-only chrome, hidden on desktop */
.t-burger { display: none; }
.t-mobile-menu { display: none; }

/* ---- tablet / phone ---- */
@media (max-width: 900px) {
  /* collapse every multi-column inline grid to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* let grid/flex children shrink instead of forcing overflow */
  [style*="grid-template-columns"] > * { min-width: 0; }

  /* container side padding */
  .t-container { padding-left: 20px !important; padding-right: 20px !important; }

  /* cap fixed-width blocks (dashboard mocks, cards) to viewport */
  .t-container [style*="width:"] { max-width: 100%; }

  /* tables scroll instead of blowing out the layout */
  table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

  /* swap desktop nav for hamburger */
  .t-desktop-nav, .t-desktop-cta { display: none !important; }
  .t-burger { display: inline-flex !important; }
}

/* ---- mobile menu drawer ---- */
.t-mobile-menu.open { display: block; }
.t-mobile-menu {
  position: fixed; left: 0; right: 0; top: 104px; bottom: 0; z-index: 90;
  background: var(--cream); overflow-y: auto; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border-subtle); padding: 12px 20px 40px;
}
.t-mobile-menu a { color: var(--fg-primary); }
.t-macc { border-bottom: 1px solid var(--border-subtle); }
.t-macc > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px; font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--fg-primary);
}
.t-macc > summary::-webkit-details-marker { display: none; }
.t-macc > summary .t-chev { transition: transform var(--dur-fast) var(--ease-out); }
.t-macc[open] > summary .t-chev { transform: rotate(180deg); }
.t-macc > div { padding: 2px 4px 14px; }
.t-mlink {
  display: flex; align-items: center; gap: 10px; padding: 11px 8px; text-decoration: none;
  font-size: 14.5px; color: var(--fg-secondary) !important; border-radius: 8px;
}
.t-mlink:active { background: var(--green-50); }
.t-mlink svg, .t-mtop svg { flex: 0 0 auto; }
.t-mlink-strong { font-weight: 600; color: var(--fg-primary) !important; }
.t-msub { padding-left: 14px; }
.t-mtop {
  display: block; padding: 16px 4px; font-size: 16px; font-weight: 600;
  color: var(--fg-primary) !important; text-decoration: none; border-bottom: 1px solid var(--border-subtle);
}

.t-announce { transition: background var(--dur-fast) var(--ease-out); }
.t-announce:hover { background: var(--green-100); }

/* 2-line clamp for listing card blurbs */
.t-clamp2{flex:none!important;overflow:hidden;max-height:calc(2 * 1.58em)}

/* inline links inside article bodies */
.tinline{color:var(--green-700);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.tinline:hover{color:var(--green-600)}

/* hover tint for the home problem + platform module cards */
.tcard-tint:hover{background:var(--green-50)!important;border-color:var(--green-300)!important}
.tcard-tint:hover .tcard-ico{background:var(--green-600)!important;color:#fff!important}

/* the hero's floating ESG Copilot chip overlays the dashboard corner; on phones
   the card is too narrow to carry it */
@media (max-width: 600px){.t-copilot-float{display:none}}

/* Hero dashboard: the 444px frame only fits while the KPI row is 3-up. Below that the
   KPIs stack and the chart would overflow the card, so let the card size to content. */
@media (max-width: 900px) {
  .t-dash-frame { height: auto !important; min-height: 0 !important; }
  .t-dash-reserve { min-height: 0 !important; }
  .t-copilot-float { display: none !important; }
}