/* ERNIX — section.css
   The long section — project index drawing. */

/* Shapes are targeted by element, not by [pathLength]: Chrome does not
   restyle SVG children when a class change should newly match a
   camelCase attribute selector, so the plot animation never started. */

/* ══════════════════════════════════════════════════════════
   LONG SECTION — project index
   Grid-bubble segments, horizontal travel, glyphs sized by
   gross floor area. Layers over site.css and uses its tokens.
   ══════════════════════════════════════════════════════════ */

/* ── Section header + control ────────────────────────────── */
.section-header--section {
  align-items: flex-end;
  flex-wrap: wrap;
  row-gap: 20px;
}

.segment-control {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 20px;
}

.segment-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--track-xl);
  text-transform: uppercase;
  color: var(--g400);
}

.segment-options { display: flex; flex-wrap: wrap; gap: 20px; }

.segment-opt {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-sm);
  text-transform: uppercase;
  color: var(--g400);
  padding: 0;
  transition: color 0.2s;
}
.segment-opt::before { content: '+'; margin-inline-end: 5px; }
.segment-opt:hover { color: var(--black); }
.segment-opt[aria-checked="true"] { color: var(--black); font-weight: 700; }
.segment-opt:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }

/* ── Travel rail ─────────────────────────────────────────── */
.rail {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-inline: var(--pad-x);
  padding-block: 0 4px;
}
.rail-count {
  font-size: 10px; font-weight: 700; letter-spacing: var(--track-lg);
  text-transform: uppercase; color: var(--g400);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rail-track { position: relative; flex: 1; block-size: 1px; background: var(--g200); }
.rail-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  background: var(--black); inline-size: 0;
}
.rail-hint {
  font-size: 10px; letter-spacing: var(--track-md);
  text-transform: uppercase; color: var(--g300); white-space: nowrap;
}

/* ── Track ───────────────────────────────────────────────── */
.hstrip {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  overscroll-behavior-x: contain;
  border-block: 1px solid var(--g200);
}
.hstrip::-webkit-scrollbar { display: none; }
.hstrip.dragging { cursor: grabbing; }
.hstrip:focus-visible { outline: 2px solid var(--black); outline-offset: -2px; }

.sec-canvas {
  display: flex;
  align-items: flex-end;
  padding-inline: var(--pad-x);
  padding-block: 66px 0;
  min-block-size: 520px;
}

/* ── Segment ─────────────────────────────────────────────── */
.seg {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-inline-start: 1px solid var(--g200);
  /* room for the segment label, so it never sits on a mark
     when every mark in the segment is short */
  padding-block-start: 44px;
}
.seg:last-child { border-inline-end: 1px solid var(--g200); }

.seg-cols { display: flex; align-items: flex-end; }

/* Grid bubbles sit on the segment lines, as they do on a plan */
.grid-bubble {
  position: absolute;
  inset-block-start: -12px;
  inset-inline-start: -16px;
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--black);
  border-radius: 50%;
  background: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  z-index: 3;
}
.grid-bubble--end { inset-inline-start: auto; inset-inline-end: -16px; }

.seg-label {
  position: absolute;
  inset-block-start: 6px;
  inset-inline: 26px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
.seg-name {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seg-sub {
  display: block;
  font-size: 9px;
  letter-spacing: var(--track-md);
  color: var(--g400);
  font-variant-numeric: tabular-nums;
  margin-block-start: 3px;
  white-space: nowrap;
}

/* Past five segments the bubbles start shouting over the
   marks, so they step back. */
.sec-canvas--dense .seg { border-inline-start-color: var(--g100); }
.sec-canvas--dense .grid-bubble {
  inline-size: 24px; block-size: 24px;
  inset-block-start: -8px; inset-inline-start: -12px;
  font-size: 9px;
  border-width: 1px;
  border-color: var(--g400);
  color: var(--g600);
}
.sec-canvas--dense .grid-bubble--end { inset-inline-start: auto; inset-inline-end: -12px; }
.sec-canvas--dense .seg-label { inset-inline: 18px; }

/* ── Column ──────────────────────────────────────────────── */
.sec-col {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-inline: 14px;
  cursor: pointer;
}
.sec-col:focus-visible { outline: 2px solid var(--black); outline-offset: -2px; }

.sec-glyphwrap {
  color: var(--g600);
  display: grid;
  place-items: end center;
  transition: color 0.25s var(--ease);
}
.sec-col:hover .sec-glyphwrap,
.sec-col:focus-visible .sec-glyphwrap { color: var(--black); }

/* Adjacent column rules butt together into one datum line */
.sec-rule {
  inline-size: 100%;
  border-block-start: 1.5px solid var(--black);
  margin-block-start: 12px;
}

.sec-cap { padding-block-start: 12px; text-align: center; inline-size: 100%; }
.sec-sheet {
  display: block;
  font-size: 9px; font-weight: 700; letter-spacing: var(--track-md);
  color: var(--g400); font-variant-numeric: tabular-nums; margin-block-end: 5px;
}
.sec-name-txt {
  display: block;
  font-size: 11.5px; font-weight: 700; letter-spacing: var(--track-tight);
  line-height: 1.3; margin-block-end: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sec-meta {
  display: block;
  font-size: 10px; letter-spacing: var(--track-xs);
  color: var(--g400); font-variant-numeric: tabular-nums;
}

/* ── Glyph ───────────────────────────────────────────────── */
.glyph-stack { position: relative; inline-size: 100%; block-size: 100%; }
.glyph-layer {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  color: currentColor;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}
.glyph-layer--str { opacity: 0.5; }
.glyph-layer--mep { opacity: 0.26; }

.sec-col:hover .glyph-layer--arc,
.sec-col:focus-visible .glyph-layer--arc { transform: translateY(-11px); }
.sec-col:hover .glyph-layer--mep,
.sec-col:focus-visible .glyph-layer--mep { transform: translateY(11px); opacity: 0.55; }

/* Pen-plot draw-in */
.glyph-layer :is(path, rect, line, polyline, polygon, circle, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-drawn .glyph-layer :is(path, rect, line, polyline, polygon, circle, ellipse) { animation: plot 1.2s var(--ease) forwards; }
.is-drawn .glyph-layer--str :is(path, rect, line, polyline, polygon, circle, ellipse) { animation-delay: 0.14s; }
.is-drawn .glyph-layer--mep :is(path, rect, line, polyline, polygon, circle, ellipse) { animation-delay: 0.28s; }
@keyframes plot { to { stroke-dashoffset: 0; } }

/* ── Empty segment — a year with no work stays visible ───── */
.seg-gap {
  inline-size: 116px;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}
.seg-gap .sec-rule { border-block-start-style: dashed; border-block-start-color: var(--g300); }
.seg-gap-note {
  padding-block-start: 12px;
  font-size: 9px; letter-spacing: var(--track-md);
  text-transform: uppercase; color: var(--g300);
}

/* ── Regroup transition ──────────────────────────────────── */
.sec-col.is-moving { transition: transform 0.55s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .glyph-layer :is(path, rect, line, polyline, polygon, circle, ellipse), .is-drawn .glyph-layer :is(path, rect, line, polyline, polygon, circle, ellipse) {
    stroke-dashoffset: 0; animation: none;
  }
  .glyph-layer { transition: opacity 0.2s; }
  .sec-col:hover .glyph-layer,
  .sec-col:focus-visible .glyph-layer { transform: none; }
  .sec-col.is-moving { transition: none; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .sec-canvas { min-block-size: 420px; padding-block-start: 56px; }
  .section-header--section { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .rail-hint { display: none; }
  .sec-col { padding-inline: 10px; }
  .segment-control { gap: 10px; }
  .segment-options { gap: 16px; }
}

/* ── Print (A3) ──────────────────────────────────────────
   The strip can't scroll on paper, so it unrolls and wraps.
*/
@media print {
  .rail, .segment-control { display: none !important; }
  .hstrip { overflow: visible !important; }
  .sec-canvas {
    flex-wrap: wrap;
    min-block-size: 0;
    padding-inline: 0;
    row-gap: 18mm;
  }
  .seg { break-inside: avoid; }
  .sec-col { break-inside: avoid; }
}

/* Single-column segments are narrow; let their names wrap to two
   lines rather than cut off ("Heritage & Tourism", "Additional Work").
   The label band above the marks has room for both lines. */
.seg-name { white-space: normal; text-overflow: clip; line-height: 1.25; }

/* ── Without JavaScript (phone file previews, crawlers) ──────────
   The page looks exactly as it does with scripts. Each column links
   to its entry, and the targeted entry opens as a full-screen sheet;
   "Back to projects" closes it. Scripts hide all of this. */
.sec-col { position: relative; }
.sec-nojs-link { position: absolute; inset: 0; z-index: 2; }
.js .sec-nojs-link, .js .sec-nojs { display: none; }
.pl-item { display: none; }
.pl-item:target {
  display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr; gap: 28px; align-content: start;
  position: fixed; inset: 0; z-index: 2000; overflow-y: auto;
  background: var(--white, #fff); padding: 64px var(--pad-x) 48px;
}
.pl-back {
  position: absolute; inset-block-start: 20px; inset-inline-start: var(--pad-x);
  font-size: 11px; font-weight: 700; letter-spacing: var(--track-sm); text-transform: uppercase; color: var(--black);
}
.pl-back::before { content: '← '; }
[dir="rtl"] .pl-back::before { content: '→ '; }
.pl-item img { inline-size: 100%; block-size: auto; display: block; background: var(--g100); }
.pl-sheet { font-size: 10px; font-weight: 700; letter-spacing: var(--track-md); color: var(--g400); }
.pl-title { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: var(--track-title); margin-block: 4px 8px; line-height: 1.1; }
.pl-meta, .pl-spec { font-size: 13px; color: var(--g400); margin-block-end: 4px; }
.pl-desc { font-size: 14px; line-height: 1.75; color: var(--g600); max-inline-size: 62ch; margin-block-start: 14px; }
@media (max-width: 760px) { .pl-item:target { grid-template-columns: 1fr; gap: 16px; padding-block-start: 56px; } }
/* without scripts nothing moves, so drop the transform hint — it would
   make the fixed project sheet scroll with the page instead of covering it */
html:not(.js) #scroll-elastic { will-change: auto; }