/* Global coverage (v5.html): the statement set like the other blocks on white, then one brand-graphite
   card split in halves with no seam between them, after the Shaders preset pages: on the left the
   Incas mark as glass over a purple-teal swirl (the Shaders "Soft Prism" preset, wired in v5.html)
   with the three totals along its foot, on the right the regions on the card's own graphite.
   Loaded after landing.css, whose .coverage / .regions / .region rules it overrides. */

.coverage-v5 { padding: var(--space-16) 0 var(--space-20); background: var(--white); color: var(--black); }

/* the statement: a dark lead-in, the rest muted */
.coverage__intro { max-width: 820px; font-family: var(--font-sans); font-size: 28px; line-height: 38px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink-muted); }
.coverage__intro > span:not(.t-word) { color: var(--black); }

/* the one card: the shader half runs straight into the regions half */
.coverage-v5__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-top: var(--space-10);
  overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); background: var(--graphite);
}
.coverage-v5__stage { position: relative; overflow: hidden; min-height: 600px; isolation: isolate; }
/* the shader library pins the canvas's first size inline: keep it on the card */
.coverage-v5__canvas { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.coverage-v5.is-ready .coverage-v5__canvas { opacity: 1; }
/* without WebGPU the flat mark stands in for the model */
/* the mark until the shader is ready, and for good where it cannot run: the Incas mark filled with a
   lime-to-purple gradient over a soft purple glow, where the glass one will be — so the card is never
   empty while the shader loads (phones can take a while) or if it fails */
.coverage-v5__fallback {
  position: absolute; z-index: 0; left: 50%; top: 44%; height: 57%; aspect-ratio: 221.5 / 234.61; /* the glass mark's place: placement in v5.html */
  transform: translate(-50%, -50%); pointer-events: none;
  background: linear-gradient(150deg, #b8ff00 0%, #7b9cff 38%, #5a35c0 62%, #310686 100%);
  -webkit-mask: url("../assets/incas-mark-white.svg") center / contain no-repeat;
          mask: url("../assets/incas-mark-white.svg") center / contain no-repeat;
  filter: drop-shadow(0 0 40px rgba(90, 53, 192, .55));
  transition: opacity .8s ease;
}
.coverage-v5__stage::before {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: radial-gradient(55% 45% at 50% 44%, rgba(90, 53, 192, .45), transparent 70%);
  transition: opacity .8s ease;
}
.coverage-v5.is-ready .coverage-v5__fallback, .coverage-v5.is-ready .coverage-v5__stage::before { opacity: 0; }
.coverage-v5.no-gpu .coverage-v5__canvas { display: none; }
/* the three totals along the shader's foot, laid out like the hero's facts and split by thin rules:
   the figure set as a heading (the solution titles' 48px brand face) over a muted line */
.coverage-v5__facts { position: absolute; z-index: 1; left: var(--space-10); right: var(--space-10); bottom: var(--space-10); display: flex; margin: 0; pointer-events: none; }
.coverage-v5__fact { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-6); border-left: 1px solid rgba(255, 255, 255, .2); }
.coverage-v5__fact:first-child { padding-left: 0; border-left: 0; }
.coverage-v5__fact dt { font-family: var(--font-brand); font-size: 48px; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; color: var(--white); }
.coverage-v5__fact dd { margin: 0; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .72); }

/* the regions on the card's graphite share its height evenly, split by hairlines: the name, the
   count on the right */
.coverage-v5 .regions { display: flex; flex-direction: column; gap: 0; margin: 0; padding: var(--space-6) var(--space-16); list-style: none; }
.coverage-v5 .region { flex: 1 1 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-3); padding: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.coverage-v5 .region:first-child { border-top: 0; }
/* the region names set as subheadings, like the solution cards' titles */
.coverage-v5 .region__name { font-family: var(--font-brand); font-size: 28px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; color: var(--white); }
.coverage-v5 .region__count { grid-column: 2; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .72); white-space: nowrap; }

@media (min-width: 1441px) {
  .coverage-v5 { padding: calc(64 * var(--s)) 0 calc(80 * var(--s)); }
  .coverage__intro { max-width: calc(820 * var(--s)); font-size: calc(28 * var(--s)); line-height: calc(38 * var(--s)); }
  .coverage-v5__grid { margin-top: calc(40 * var(--s)); border-radius: calc(20 * var(--s)); }
  .coverage-v5__stage { min-height: calc(600 * var(--s)); }
  .coverage-v5__facts { left: calc(40 * var(--s)); right: calc(40 * var(--s)); bottom: calc(40 * var(--s)); }
  .coverage-v5__fact { gap: calc(8 * var(--s)); padding: 0 calc(24 * var(--s)); }
  .coverage-v5__fact:first-child { padding-left: 0; }
  .coverage-v5__fact dt { font-size: calc(48 * var(--s)); }
  .coverage-v5__fact dd { font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
  .coverage-v5 .regions { padding: calc(24 * var(--s)) calc(64 * var(--s)); }
  .coverage-v5 .region { gap: 0 calc(12 * var(--s)); }
  .coverage-v5 .region__name { font-size: calc(28 * var(--s)); }
  .coverage-v5 .region__count { font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
}

/* the halves stack: the shader on top, the regions under it, still one card */
@media (max-width: 900px) {
  .coverage-v5 { padding: var(--space-12) 0 var(--space-16); }
  .coverage__intro { font-size: 22px; line-height: 30px; }
  .coverage-v5__grid { grid-template-columns: 1fr; margin-top: var(--space-8); }
  /* taller than wide: the mark above, the totals clear of it at the foot. An explicit height, not
     aspect-ratio: everything in this half is absolutely placed, and Safari gives such a grid item
     no height from aspect-ratio — the half (mark and totals) simply vanished there */
  .coverage-v5__stage { min-height: 0; height: min(calc((100vw - 2 * var(--stage-gap, 8px)) * 5 / 4), 80svh); }
  /* the card as wide as the hero card: out of the page padding to the hero's 8px from the screen edge */
  .coverage-v5__grid { margin-left: calc(var(--stage-gap, 8px) - var(--space-5)); margin-right: calc(var(--stage-gap, 8px) - var(--space-5)); }
  .coverage-v5__fallback { top: 40%; height: 47%; }
  /* the three totals in three equal columns, the rules between them at exact thirds */
  /* the card's content lines up with the statement above it: 20px from the screen edge, so 12px
     inside a card that starts 8px from it */
  .coverage-v5__facts { left: calc(var(--space-5) - var(--stage-gap, 8px)); right: calc(var(--space-5) - var(--stage-gap, 8px)); bottom: var(--space-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .coverage-v5__fact { gap: var(--space-1); min-width: 0; padding: 0 var(--space-3); }
  .coverage-v5__fact dt { font-size: 28px; white-space: nowrap; } /* "100+" on one line */
  .coverage-v5__fact dd { font-size: 14px; line-height: 20px; }
  .coverage-v5 .regions { padding: var(--space-2) calc(var(--space-5) - var(--stage-gap, 8px)); }
  .coverage-v5 .region { flex: none; padding: var(--space-4) 0; }
  .coverage-v5 .region__name { font-size: 22px; }
}