/* ============================================================
   SRM TIMELINE
   Grid + type + color values below are taken directly from Figma
   (cWRYGwKfuKOiZIEbM6dqV5, node 6326:3852 — DESKTOP/TABLET/MOBILE
   -SRM-EVENT, -NON-SRM-EVENT, -BIG-IMAGE, -SRM-EVENT-NO-IMAGE frames),
   pulled via get_design_context/get_metadata/get_variable_defs.
   Breakpoint thresholds/column counts per build-plan.md §5.
   ============================================================ */

@import 'colors.css';

:root {
  /* Desktop grid (frame ≥1440): 12 cols × 64px, 12px gutter */
  --cols: 12;
  --col-w: 64px;
  --gutter: 12px;

  /* Content column: fixed at columns 4–10 (7 tracks = 520px at desktop
     widths) per Figma's "event with image" frame width. Images start at
     column 4 (build-plan §6) and sit inside this same column, narrower,
     per-row via --desktop-col-end/--tablet-col-end. */
  --content-start: 4;
  --content-end: 11;
  --img-start: 4;
}

/* Tablet (768–1439px): 8 cols × 54px, 12px gutter */
@media (max-width: 1439px) {
  :root {
    --cols: 8;
    --col-w: 54px;
    --gutter: 12px;
    --content-start: 2;
    --content-end: 9;
    --img-start: 2;
  }
}

/* Mobile (<768px): 4 cols × 75px, 8px gutter — image/content width is
   fixed (288px) per build-plan §6, not grid-column math. */
@media (max-width: 767px) {
  :root {
    --cols: 4;
    --col-w: 75px;
    --gutter: 8px;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

#srm-timeline-root {
  font-family: 'Neuton', Georgia, serif;
  color: var(--BrandColors-Neutrals-SRMBlack);
}

/* ── Timeline shell ───────────────────────────────────────── */

.timeline {
  position: relative;
}

.timeline-line-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  /* Explicit z-index, not just DOM order: .event articles are also
     position:relative (z-index:auto), which puts them in the same paint
     bucket as this layer — without this, their later DOM position would
     paint their backgrounds/images (NON-SRM-EVENT tint, BIG-IMAGE photo)
     over the line regardless of which element appears first in markup. */
  z-index: 2;
}

.timeline-line-layer svg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible;
}

.timeline-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--line-color);
  opacity: 0;
  transform: scale(0.4);
}

/* ── Event row ────────────────────────────────────────────────
   Desktop/tablet: a grid with the year+dot cluster right-aligned
   into the margin columns before the content column starts. The
   content column (text → image → buttons, stacked) is fixed-width;
   only the image's width varies per row (via --desktop-col-end /
   --tablet-col-end), anchored to the same left edge as the text. */

.event {
  position: relative;
  padding: 48px 0;
}

.event-row {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--col-w));
  gap: var(--gutter);
  justify-content: center;
  align-items: start;
}

.event-year-dot {
  grid-column: 1 / var(--content-start);
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.event-year {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 22px;
  line-height: 24px;
  color: var(--BrandColors-Neutrals-SRMBlack);
  text-align: right;
  white-space: nowrap;
  margin: 0;
}

/* Mobile-only duplicate of the year (see createEventArticle in main.js) —
   hidden at desktop/tablet, where the year in .event-year-dot shows instead.
   The mobile media block at the bottom of this file swaps which one is
   visible. */
.event-year--mobile {
  display: none;
}

/* Invisible — JS measures this to place the real (animated) dot drawn in
   .timeline-line-layer, so the visual dot and its line-draw target always
   match wherever CSS actually put the marker at the current breakpoint. */
.event-marker {
  width: 12px;
  height: 12px;
  flex: none;
  visibility: hidden;
}

.event-content {
  grid-column: var(--content-start) / var(--content-end);
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.event-text-content {
  font-family: 'Neuton', serif;
  font-size: 22px;
  line-height: 32px;
  margin: 0;
  white-space: pre-line;
  color: inherit;
}

/* Journal/work titles — *asterisk pairs* in the Airtable `event` field,
   rendered as <cite> by main.js (appendItalicizedText). Neuton italic 400
   is already in the Google Fonts request, so this is a true italic. */
.event-text-content cite {
  font-style: italic;
  font-weight: inherit;
  color: inherit;
}

.event-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--link-default-color);
  transition: color 0.2s ease, transform 0.2s ease;
}

/* .event-button-icon uses stroke="currentColor" (main.js), so it recolors
   along with the text automatically — no separate icon rule needed here.
   The nudge is on the whole button (icon + label together) rather than
   just the icon — moving only the icon made it look like it was drifting
   away from its own label instead of the two reading as one unit. */
.event-button:hover,
.event-button:focus-visible {
  color: var(--link-hover-color);
  transform: translate(2px, -2px);
}

/* :visited only permits a handful of properties for privacy reasons
   (color among them) — this is as far as browsers allow styling it. */
.event-button:visited {
  color: var(--link-visited-color);
}

/* Underline only the label (not the icon) — a plain colored text link read
   as too quiet/accidental on its own; the underline reads as "link" at a
   glance without turning this into the solid-button treatment the Figma
   spec explicitly ruled out. text-decoration-color defaults to currentColor
   so it rides along with the existing hover/visited color transition. */
.event-button-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.event-button-icon {
  width: 22px;
  height: 22px;
  flex: none;
}

/* Image width is derived from the same column tokens as the grid itself —
   no hardcoded pixel guesses. Anchored at --img-start, sized to the row's
   own col-end field, falling back to the content column's full width. */
.event-image {
  display: block;
  position: relative; /* anchor for the optional .event-image-credit */
  margin: 0;          /* reset <figure> UA margins */
  width: calc((var(--desktop-col-end, 11) - var(--img-start)) * (var(--col-w) + var(--gutter)) - var(--gutter));
  max-width: 100%;
}

/* Optional image credit (Figma caption_sm, nodes 6389:154/6485:93): a 16px
   vertical strip immediately OUTSIDE the image's right edge, anchored to the
   bottom corner, reading bottom-to-top. writing-mode makes the box vertical;
   the 180° rotation flips reading direction from top-down to bottom-up.
   Capped at the image's height so a long credit can't poke past the top. */
.event-image-credit {
  position: absolute;
  right: -16px;
  bottom: 0;
  max-height: 100%;
  overflow: hidden;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: 'Roboto Condensed', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: var(--image-credit-color);
}

.event-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Broken/missing image: fail visibly, not silently (build-plan §7a) */
.event-image.is-broken {
  border: 2px dashed var(--missing-image-border);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-image.is-broken img {
  display: none;
}

/* BIG-IMAGE overlays white text on top of the photo for legibility — if the
   photo itself fails to load, keep the placeholder dark so that white text
   doesn't disappear against the plain page background. */
.event--big-image .event-image.is-broken {
  min-height: 300px;
  background: var(--BrandColors-Neutrals-SRMBlack);
  border-color: var(--BrandColors-Neutrals-DarkGray);
}

.event-image.is-broken::after {
  content: 'Missing image';
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 13px;
  color: var(--missing-image-border);
}

/* ── NON-SRM-EVENT theme (applyNonSrmTheme) ──────────────────
   Text uses --non-srm-text, which now matches the default SRMBlack text
   color per request — the paper (--non-srm-bg) tint alone is what visually
   distinguishes these rows from SRM-EVENT ones now, not a dimmed text
   color (build-plan §4/§8a's original darkened-gray text is superseded). */

.event--non-srm {
  background: var(--non-srm-bg);
}

.event--non-srm .event-year,
.event--non-srm .event-text-content {
  color: var(--non-srm-text);
}

/* ── Tablet: image width uses the tablet col-end field/start column ── */

@media (max-width: 1439px) {
  .event-image {
    width: calc((var(--tablet-col-end, 9) - var(--img-start)) * (var(--col-w) + var(--gutter)) - var(--gutter));
  }
}

/* Tablet's year-dot margin column is only 54px (--content-start:2), same
   as mobile's — but .event-year was only ever downsized for mobile. At
   22px, a 4-digit year overflows past that 54px column; on plain rows
   that overflow lands unnoticed in blank page background, but on
   BIG-IMAGE it spills past the photo's own left edge (confirmed against
   Figma's TABLET-BIG-IMAGE frame, node 6389:195: year uses the 18px
   "H3 - subhead - sm" style at this breakpoint, not desktop's 22px
   "Headline/sm" — matching mobile's size, which is why it fits). Widening
   the column instead (tried first) would have shifted .event-marker off
   the shared x every other entry's dot uses for the single straight
   timeline line — fixing the font size keeps the marker position intact.

   Font size alone doesn't fully close the gap, though: the dot (12px) +
   its 8px gap already use 20px of the 54px column, leaving only 34px for
   a 4-digit year — narrower than "1991" etc. render at any legible size,
   so a several-px overflow past the column (and past the image's left
   edge) is unavoidable while the marker stays pinned to the shared line
   x. Rather than chase font-size further, extend BIG-IMAGE's photo itself
   further left than the grid edge so that residual overflow lands on the
   image instead of spilling into blank page margin — the right edge (grid
   line 9, shared with the text/button column) is untouched. */
@media (min-width: 768px) and (max-width: 1439px) {
  .event-year {
    font-size: 18px;
    line-height: 22px;
  }
}

/* ── BIG-IMAGE: full-bleed image (desktop/tablet only) with year/text/
   button overlaid on top, matching the Figma DESKTOP-BIG-IMAGE frame
   (white text + drop shadow, no separate scrim layer). Mobile falls
   through to the standard stacked SRM-EVENT layout — build-plan §4. ── */

@media (min-width: 768px) {
  /* .event-image is a sibling grid item of .event-year-dot/.event-content
     (not nested inside them — see the comment in renderBigImage in
     main.js for why), placed in the same grid row so it visually
     underlaps the text via z-index/paint order, no positioning needed. */
  .event--big-image .event-image {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    /* Belt-and-suspenders: the desktop/tablet grid tracks are fixed px
       (repeat(cols, col-w) + gutters), so this full-bleed area is already
       exactly 900px/516px today — max-width guards against a future switch
       to fluid (%/fr/vw) column units stretching the image past its native
       900px source resolution. */
    max-width: 900px;
    margin: 0 auto;
    z-index: 0;
    align-self: stretch;
  }

  /* Height is unconstrained — only width is fixed (full-bleed). The image
     renders at its own natural aspect ratio instead of being cropped to a
     fixed box (build-plan §4 doesn't specify a height, and cropping var-
     iable-aspect source photos to one fixed ratio was cutting them off). */
  .event--big-image .event-image img {
    height: auto;
  }

  .event--big-image .event-year-dot,
  .event--big-image .event-content {
    z-index: 1;
  }

  /* Figma's DESKTOP/TABLET-BIG-IMAGE frames (node 6326:4020, 6389:195) both
     inset the year ~35-40px from the image's top edge — not pushed further
     down. A larger push-down was tried and tuned against only the tallest
     source photo (desktop-height Pinatubo); it overflowed past the bottom
     of the same image's much shorter tablet crop, which is what broke the
     tablet layout. Matching Figma's actual inset fixes both breakpoints. */
  .event--big-image .event-year-dot {
    margin-top: 40px;
  }

  .event--big-image .event-content {
    margin-top: 35px;
    padding-bottom: 40px;
  }

  .event--big-image .event-year,
  .event--big-image .event-text-content,
  .event--big-image .event-button {
    color: var(--BrandColors-Neutrals-Mist);
    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.35);
  }
}

/* Must come after the general BIG-IMAGE block above (same specificity,
   source order decides) — its margin:0 auto/width:100% would otherwise win
   at tablet widths and cancel this out. The dot (12px) + its 8px gap
   already use 20px of the 54px year-dot column, leaving only 34px for a
   4-digit year — narrower than one renders at any legible size — so some
   overflow past the grid's own left edge is unavoidable while the marker
   stays pinned to the shared line x (see CLAUDE.md gotcha #7). Extending
   the photo itself further left than the grid edge puts that overflow on
   the image instead of spilling into blank page margin; the right edge
   (grid line 9, shared with the text/button column) is untouched. */
@media (min-width: 768px) and (max-width: 1439px) {
  .event--big-image .event-image {
    margin-left: -30px;
    margin-right: 0;
    width: calc(100% + 30px);
  }

  /* Tablet BIG-IMAGE: the photo runs to the viewport edge, so there's no
     page-margin strip for the credit to hang in (Figma's TABLET-BIG-IMAGE
     frame simply omits it — hiding was tried and rejected; Maryanne wants
     credits everywhere). Overlay it just inside the photo's right edge
     instead, with the same Mist + shadow treatment as the rest of the
     BIG-IMAGE overlay text. */
  .event--big-image .event-image-credit {
    right: 0; /* flush with the photo edge per request — italic descenders
                 may overshoot the 16px line box and clip past the edge,
                 accepted trade-off */
    color: var(--BrandColors-Neutrals-LightGray);
    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.35);
  }

  /* --content-end on tablet (9) is the grid's own last line — content runs
     flush to the grid's right edge with zero margin, unlike desktop (11 of
     13 lines, a deliberate 2-column/152px margin). Invisible on plain rows,
     but on BIG-IMAGE the image shares that same right edge, so text runs
     right up against — and can crowd — the photo's edge. Scoped to
     BIG-IMAGE only rather than changing the shared --content-end, since
     that would also reflow line-wrapping on every other tablet row. */
  .event--big-image .event-content {
    grid-column: var(--content-start) / 8;
  }
}

/* Mobile: no BIG-IMAGE-specific rules needed — placeBigImages() in main.js
   re-parents the image into .event-content at this breakpoint (between text
   and buttons, same slot renderEvent uses), so it inherits the standard
   mobile SRM-EVENT image rules (width 100%, max-width 288px) and renders
   identically to a regular event, per build-plan §4. */

/* ── Mobile: fixed-width image, stacked layout, no grid math ───
   Matches the Figma MOBILE-SRM-EVENT frame (node 6331:3968): the dot floats
   detached at the card's far left (line at x=22: 14px padding + 16px dot),
   and the year moves INTO the content column, above the text — to the right
   of the yellow line, not beside the dot. The .event-year-dot column keeps
   only the invisible .event-marker, so the JS-measured line/dot x stays
   identical for every entry regardless of year text width (gotcha #7 —
   the old year-in-column layout made marker x vary with year width, which
   put the shared line through wide years like "2020-2021"). */

@media (max-width: 767px) {
  .event-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 18px 0 14px; /* Figma: 14px left inset, 18px right */
  }

  /* Year leaves the margin column on mobile — only the marker stays. */
  .event-year-dot .event-year {
    display: none;
  }

  .event-year--mobile {
    display: block;
    text-align: left;
    /* Figma gap between year and text is 4px, but .event-content's flex
       gap is 16px (correct for text→image→buttons) — pull this one back. */
    margin-bottom: -12px;
  }

  /* Dot is 16px in the mobile frame (12px elsewhere). Marker matches so
     the measured center lands at x=22, vertically centered on the year's
     22px first line (padding-top (22−16)/2 = 3px). */
  .event-year-dot {
    padding-top: 3px;
  }

  .event-marker {
    width: 16px;
    height: 16px;
  }

  .timeline-dot {
    width: 16px;
    height: 16px;
    margin-left: -8px;
    margin-top: -8px;
  }

  .event-year {
    font-size: 18px;
    line-height: 22px;
  }

  .event-content {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Full text-column width. Figma's 288px was this same intent expressed
     against the 344px design frame — a fixed cap only matched there, going
     narrower than the text on real (wider) phones. If some images shouldn't
     stretch (tall covers), add a per-row max-width field — see conversation
     2026-07-09; trying full-width across the board first. */
  .event-image {
    width: 100%;
    max-width: 100%;
  }

  .event-text-content {
    font-size: 18px;
    line-height: 22px;
  }
}