/* ============================================
   NYC DOE CASE STUDY — page-specific components
   ============================================ */

.doe-logo-mark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  text-align: center;
  margin-bottom: 1.5rem;
}

.rq-list { display: flex; flex-direction: column; gap: 2rem; margin-top: 1.5rem; }
.rq-item { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-32); align-items: start; }
.rq-num { font-family: var(--font-serif); font-weight: 400; font-size: 39px; line-height: 59px; color: var(--color-text-primary); }
.rq-item p { font-family: var(--font-sans); font-size: 20px; line-height: 30px; letter-spacing: var(--tracking-body-large); color: var(--color-text-secondary, #333230); margin: 0; }

/* ---- Stats + map: literal Figma layout (node 2242:21689 / 2261:6564) ----
   NO outer card — frameless flex-wrap row directly on the page. Data blocks have a
   #ebebeb fill (= page bg, so effectively frameless), no border/radius. 16px padding.
   Map covered boroughs are oxblood #7a2710 (accent/primary), not tangerine. */
.hirer-stats-card {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 32px 0; /* literal Figma: 32px between the row and the text above/below (Container gap-32) */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0;
}
/* left stats column: literal 195px wide, two stacked blocks */
.stats-col { display: flex; flex-direction: column; gap: 20px; width: 195px; }
.mini-stat {
  background: var(--color-background-page, #ebebeb); /* literal #ebebeb = page bg -> frameless */
  border: none;
  border-radius: 0;
  padding: 16px; /* literal space/16 */
  display: flex;
  flex-direction: column;
  gap: 6px; /* literal space/6 */
}
/* big number: Fraunces Bold 39/59, number #1f1f1f, period tangerine.
   text-box-trim removes the 59px line-height leading so the 6px gaps below are literal. */
.stat-num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 39px;
  line-height: 59px;
  color: var(--color-text-primary);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.stat-dot { color: var(--color-accent-secondary); } /* tangerine #da633e */
/* label: Jakarta SemiBold 16/24, #1f1f1f */
.mini-stat .stat-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap; /* literal Figma: label hugs content, doesn't wrap */
}
/* detail lines: number SemiBold #333230, word Regular #4e4b47, 16/24 */
.mini-stat .stat-detail {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-muted);
  margin: 0;
  padding-top: 5.545px; /* literal */
  white-space: nowrap; /* literal Figma: detail lines don't wrap */
}
.stat-detail b { font-weight: 600; color: var(--color-text-secondary, #333230); } /* the leading number */

/* map + info row: literal 669px wide */
.map-info-row { display: flex; align-items: center; gap: 0; width: 669px; max-width: 100%; flex: 1 1 auto; }
.map-col { display: flex; align-items: center; justify-content: center; width: 376.352px; max-width: 376.352px; min-width: 241.94px; }
.borough-map-svg { width: 100%; height: auto; display: block; }
.borough-map-svg path { stroke: var(--color-background-page, #ebebeb); stroke-width: 1.5; stroke-linejoin: round; }
.borough-map-svg path.cov { fill: var(--color-accent-primary); }  /* oxblood #7a2710 */
.borough-map-svg path.unc { fill: var(--color-background-surface-sunken); } /* #dad8d5 */
.borough-map-svg text.borough-lbl { font-family: var(--font-sans); font-size: 8.737px; font-weight: 600; text-anchor: middle; } /* literal Figma: 8.737px Jakarta SemiBold */
.borough-map-svg text.lc { fill: var(--color-text-on-accent); }  /* #f4f3f1 near-white on oxblood */
.borough-map-svg text.lu { fill: var(--color-text-muted); }      /* #4e4b47 on grey Staten Island */

/* info column: literal 293px, frameless (NO fill), 16px padding */
.info-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 293px; min-width: 260px; padding: 16px; }
.info-col .stat-num { width: 100%; }
.info-col h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-primary);
  margin: 0;
}
.info-col p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-muted);
  margin: 0;
  padding-top: 9.6px; /* literal */
}
.map-legend { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--color-text-muted); padding-top: 19.19px; }
.map-legend > div { display: flex; align-items: center; gap: 9.59px; }
.map-legend .dot { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.map-legend .dot.cov { background: var(--color-accent-primary); }  /* oxblood */
.map-legend .dot.unc { background: var(--color-background-surface-sunken); } /* #dad8d5 */

@media (max-width: 820px) {
  .stats-col { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .stats-col .mini-stat { flex: 1 1 140px; }
  .map-info-row { flex-direction: column; width: 100%; }
  .map-col, .info-col { width: 100%; max-width: 100%; }
}

/* ---- Affinity map: full column-width image, no container (node 2261:7361) ---- */
.affinity-map { width: 100%; line-height: 0; margin: 18px 0 0; } /* literal Figma: 18px top offset within its container */
.affinity-map img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* ---- Experience journey map: bleeds outside the 864 center column (node 2247:8946) ----
   Figma: 1335px wide, inset x=-235.5 within the 864 column -> 235.5px bleed each side
   (235.5/864 = 27.26%). Responsive: bleed is capped so the map never overflows the
   viewport, and on narrow screens it scales down / can scroll rather than break. */
.journey-map {
  /* symmetric bleed: 27.26% of the column each side, but never past the viewport edge */
  --bleed: min(27.26%, calc((100vw - 100% - 32px) / 2));
  width: calc(100% + 2 * var(--bleed));
  margin-left: calc(-1 * var(--bleed));
  margin-right: calc(-1 * var(--bleed));
}
.jm-magnify { position: relative; line-height: 0; }
.jm-magnify img { width: 100%; height: auto; display: block; }

/* hover magnifier lens (desktop enhancement, not a Figma element) — a circular lens
   that follows the cursor and shows a zoomed slice of the full-res image. JS sets its
   background-image, -size and -position. Hidden until the script activates it. */
.jm-lens {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 2px solid var(--color-accent-primary);
  box-shadow: 0 6px 24px -6px rgba(31,31,31,0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  background-repeat: no-repeat;
  z-index: 5;
}
.jm-magnify.is-active .jm-lens { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .jm-lens { display: none; } /* no hover lens on touch devices or reduced-motion */
}

/* action row under the map: button centered, matching Figma placement (node 2247:8943) */
.jm-actions { display: flex; justify-content: center; margin-top: 16px; line-height: normal; }

/* "View full size" button — literal Figma component (node 2525:16208, Default/Rectangular/
   Outlined): oxblood 1px border, 6px radius, Jakarta Medium 14/21 muted text, 8px padding,
   44px touch target; hover fills primary-hover with on-accent text. */
.btn-outline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-accent-primary);
  border-radius: 6px;
  padding: 8px 16px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: var(--color-accent-primary-hover);
  border-color: var(--color-accent-primary-hover);
  color: var(--color-text-on-accent);
}

/* full-size zoom modal — opens on button click (all devices) or map click.
   Supports scroll/pinch zoom + drag pan; native touch pinch works via touch-action. */
.jm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(31,31,31,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.jm-modal[hidden] { display: none; }
.jm-modal-stage {
  flex: 1 1 auto;
  width: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pinch-zoom; /* let mobile pinch-zoom the image natively */
  cursor: grab;
}
.jm-modal-stage:active { cursor: grabbing; }
.jm-modal-stage img {
  max-width: none;
  height: auto;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}
.jm-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: var(--color-background-surface);
  color: var(--color-text-primary);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.jm-modal-close:hover, .jm-modal-close:focus-visible { background: var(--color-accent-primary); color: var(--color-text-on-accent); }
.jm-modal-hint {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text-on-accent);
  padding: 12px 16px;
  text-align: center;
  opacity: 0.85;
}

@media (max-width: 1100px) {
  /* sidenav is hidden below 1100px (center column goes full-width); keep a small bleed
     to the viewport edges but let the map scroll horizontally if it can't shrink further */
  .journey-map {
    --bleed: calc((100vw - 100%) / 2 - 16px);
  }
  .jm-magnify { overflow-x: auto; }
  .jm-magnify img { min-width: 720px; } /* keep the map legible; allow horizontal scroll */
}
.artifact-mock {
  background: var(--color-background-surface-sunken);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 2rem;
}
.coding-mock { min-height: 300px; }
.affinity-mock { min-height: 320px; background: #E6E9D9; border-color: #D3D8C0; }
.affinity-mock .mock-label { color: #5a6647; }
.hiring-artifact-mock { min-height: 300px; margin-bottom: 2.5rem; }

/* ---- Coding collage: real research artifacts, exact literal Figma coordinates ----
   Container is 528x274px, inset 168px from the left within the 864px content column,
   matching "Frame 26085926" in the source file exactly. Not scaled or approximated. */
.coding-collage {
  position: relative;
  width: 528px;
  height: 274px;
  margin: 18px 0 2rem 168px;
}
.coding-card {
  position: absolute;
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
}
.coding-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
@media (max-width: 700px) {
  .coding-collage { width: 100%; height: auto; margin-left: 0; transform: none; position: static; }
  .coding-card { position: static; width: 100% !important; height: auto !important; margin-bottom: 12px; }
  .coding-card img { height: auto; }
}

/* ---- Impact projection tag ---- */
.proj-tag { font-style: italic; color: var(--color-text-muted); font-size: 15px; }
.impact-caveat { font-style: italic; color: var(--color-text-muted); }

@media (max-width: 820px) {
  .stat-pair { grid-template-columns: 1fr; }
  .map-block { grid-template-columns: 1fr; }
}