/* ============================================================
   EXPERIENCE PAGE — job list left, detail panel right
   ============================================================ */
.resume {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  /* header on row 1, then one row per job — rows size to their content so
     the first entry doesn't stretch to absorb leftover height */
  grid-template-rows: auto;
  column-gap: var(--gutter);
  align-content: start;
  min-height: calc(100dvh - var(--nav-h));
  width: min(100% - 2 * var(--page-margin), var(--container));
  margin-inline: auto;
  /* the nav is fixed, so its height has to be cleared before the content
     starts — plus breathing room on top of that */
  padding: calc(var(--nav-h) + clamp(var(--s-5), 12vh, var(--s-6))) 0 var(--s-6);
}

/* title left, download right, spanning the full grid above both columns */
.resume__head {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

/* `display: contents` dissolves the wrappers so every row and detail is a
   direct grid item — that's what lets one set of markup sit in two columns
   on desktop and interleave as an accordion on mobile */
.resume__list,
.resume-group { display: contents; }

.resume-group__label,
.resume-job { grid-column: 1 / span 5; }

/* every detail shares one cell in the right column; only the open one is
   displayed. Sticky rather than simply pinned to the top: the list runs
   longer than a viewport now, so a detail anchored at row 1 would render
   off-screen when you click an entry near the bottom and the click would
   look like it did nothing. It rides down instead, and `align-self: start`
   keeps the panel its own height so it has room to slide inside the cell.
   Works because body uses overflow-x: clip, not hidden — see main.css. */
.resume-detail {
  display: none;
  grid-column: 7 / -1;
  grid-row: 2 / span 99;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-h) + var(--s-3));
  padding-top: 16px; /* matches .resume-job's, so it sits level with row 1 */
}
.resume-detail.is-open { display: block; }

.resume__heading {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  font-weight: var(--fs-heading-weight);
  margin-bottom: 0;
}

/* the group wrapper is display:contents on desktop, so its own margin does
   nothing — the label carries the separation instead */
.resume-group__label {
  margin-top: var(--s-5);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--s-2);
}

/* each row dims until hovered/focused, so the active one reads as the
   source of what's on the right */
.resume-job {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  padding: 16px 0;
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-faint);
  transition: color 0.3s ease, padding-left 0.4s var(--ease-out);
}
.resume-job__company { font-size: var(--fs-body); line-height: var(--lh-body); }
.resume-job__period { font-size: var(--fs-small); line-height: var(--lh-small); white-space: nowrap; }

/* the selected row and the keyboard-focused one. Hover is added separately
   below, behind a query — on a touch screen :hover latches after a tap and
   stays lit on the last row you touched until you touch another. */
.resume-job:focus-visible,
.resume-job.is-active {
  color: var(--ink);
  padding-left: 8px;
}
@media (hover: hover) {
  .resume-job:hover {
    color: var(--ink);
    padding-left: 8px;
  }
}
.resume-job:focus-visible { outline: none; }

/* Download and View LinkedIn, side by side at the right edge. Wrapping them
   keeps .resume__head a two-item flex row, so its space-between still pins
   the heading left and the pair right rather than spreading three items out
   across the whole line. */
.resume__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.resume__download { flex: none; }

/* right panel: re-runs its entrance each time the selection changes */
.resume-detail__role {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.02em;
  font-weight: var(--fs-heading-weight);
}
.resume-detail__company {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-dim);
  margin-top: 8px;
}
.resume-detail__summary {
  margin-top: var(--s-3);
  max-width: 52ch;
  color: var(--ink-dim);
  font-size: var(--fs-small);
  line-height: var(--lh-small); /* the site's small style, as on .modal__sub */
}
/* labelled blocks read like the value grid: white lead-in, gray body */
.resume-detail__summary strong {
  font-weight: 500;
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .resume-detail.is-entering .resume-detail__inner > * {
    animation: resume-detail-in 0.45s var(--ease-out) backwards;
  }
  .resume-detail.is-entering .resume-detail__inner > *:nth-child(2) { animation-delay: 0.04s; }
  .resume-detail.is-entering .resume-detail__inner > *:nth-child(3) { animation-delay: 0.08s; }
  .resume-detail.is-entering .resume-detail__inner > *:nth-child(4) { animation-delay: 0.12s; }
  .resume-detail.is-entering .resume-detail__inner > *:nth-child(n + 5) { animation-delay: 0.16s; }
}
@keyframes resume-detail-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  .resume {
    display: block;
    min-height: 0;
    padding-top: calc(var(--nav-h) + var(--s-5));
    padding-bottom: var(--s-5);
  }
  .resume__head { margin-bottom: var(--s-3); }

  /* Download keeps its label on one line. Left to wrap it ran to two lines
     and 69px tall, which is most of why the pair stopped fitting. */
  .resume__actions .btn { white-space: nowrap; }

  /* LinkedIn drops to an icon so the pair fits one line. Both dimensions are
     set from the same expression the Download pill's height comes out of —
     its 12px padding twice, its 1px border twice, and one line of --fs-body —
     so the circle tracks the pill if the type ramp ever moves.

     Typed rather than derived from layout: aspect-ratio cannot drive a flex
     item's main axis (width still came from the content, 26px), and with the
     label clipped there was no text left to give it height either. */
  .resume__linkedin {
    --icon-btn: calc(26px + var(--fs-body) * var(--lh-body));
    width: var(--icon-btn);
    height: var(--icon-btn);
    padding: 0;
    border-radius: 50%;
  }
  /* clipped, not display: none — the words are still the link's accessible
     name, and absolute takes them out of flow so .btn's gap doesn't pad an
     empty box */
  .resume__linkedin .btn__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .resume__list,
  .resume-group { display: block; }
  .resume-group__label { margin-top: var(--s-4); }

  /* an accordion: the detail expands directly beneath its own company.
     `.is-open` has to be restated here — `.resume-detail.is-open` up top
     is two classes and would otherwise win over this one-class rule */
  .resume-detail,
  .resume-detail.is-open {
    display: grid;
    /* static, not sticky: here the detail sits in flow under its own row and
       has nothing to slide within — sticky would pin it as the row scrolls */
    position: static;
    padding-top: 0;
    transition: grid-template-rows 0.4s var(--ease-out);
  }
  .resume-detail { grid-template-rows: 0fr; }
  .resume-detail.is-open { grid-template-rows: 1fr; }

  .resume-detail__inner {
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }
  /* padding only while open, or every collapsed row leaves a ghost gap */
  .resume-detail.is-open .resume-detail__inner {
    padding: var(--s-2) 0 var(--s-3);
  }
  /* the row above owns the divider while its detail is open */
  .resume-job.is-active { border-bottom-color: transparent; }
  .resume-detail.is-open + * { border-top: 0; }

  /* no nudge on tap. The 8px indent reads as the cursor tracking a row on a
     desktop; on a phone the row you just tapped simply jumps sideways. */
  .resume-job.is-active { padding-left: 0; }

  /* the role keeps the h1 rung it has on desktop. It used to step down to
     --fs-h3, which at this width is 17px — the same size as the body copy
     under it and well below the "Experience" heading, so the detail read as
     a caption rather than the title of the thing you just opened. */
  .resume-detail__summary { max-width: none; }
}

@media (max-width: 560px) {
  /* the heading and the download button stop fitting on one line here: the
     button is flex:none so it cannot shrink, and space-between has no room
     left to distribute, so the pair ran past the viewport and the page
     scrolled sideways. Wrapping drops the button onto its own line.
     No-op above this width, where the two still share a line. */
  .resume__head { flex-wrap: wrap; }
}