/* ==========================================================================
   Case study page sections

   Shared by 8451.html, calendly.html, docdraft.html and pointme.html.
   Ordered down the page: hero, at-a-glance, editorial row, context,
   key stages, what made this work.
   ========================================================================== */


/* ---- Detail hero ---- */
/* ==================================================== */
/* Detail page                                           */
/* ==================================================== */
/* align-items: start is load-bearing. The illustration carries an
   aspect-ratio, so when it stretches to the row height that height becomes a
   minimum width and the picture takes the width away from the copy. Below
   1240px that fed back on itself: 550/550 at 1240 became 269/704 at 1024, with
   the page scrolling sideways by 49px. Starting the items stops the loop. */
.detail-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 60px;
  padding: 40px var(--gutter) 0;
  max-width: var(--content-width);
  margin: 0 auto;
}
/* Figma nodes 429:143615, 431:173065, 433:180214, 436:183904: Instrument
   Serif 70px/1.15 in #6B5C4A. The heading sits in the same warm brown as the
   body copy under it; the near-black --text is no longer used at this size. */
.detail-hero-copy h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 70px;
  line-height: 1.15;
  color: var(--text-body);
  margin: 18px 0 20px;
}
/* Figma node 385:60432: Geist 18px/1.6 in a 526px column, #6B5C4A
   (--text-body). */
.detail-hero-copy p {
  color: var(--text-body);
  font-size: 18px;
  line-height: 1.6;
  max-width: 526px;
  margin-bottom: 24px;
}
.detail-hero-copy strong { color: var(--text); }
.hero-toc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.hero-toc a { color: var(--accent); }
/* An empty div sized by `aspect-ratio` has no intrinsic width, so
   `margin-inline: auto` and `justify-self: center` both collapse it to 0.
   `max-height` is what really sets the width -- 725px times the ratio --
   so state that width and the auto margins have something to centre.
   Without it the box sits flush left in its cell, 68px short of the right
   edge on 84.51 at 1280px. `width: 100%` still wins on phones narrower
   than the cap. */
.detail-hero-image {
  background: rgb(217, 217, 217);
  border-radius: 4px;
  max-height: 725px;
  width: 100%;
  max-width: calc(725px * var(--hero-ratio));
  margin-inline: auto;
}
/* Each ratio below is the exported file's own pixel size, so `cover` never
   crops. It is a custom property because the 900px rule needs it too, to
   turn the 725px height cap into a real width.
   Re-export at 2x from the Figma hero canvas (Calendly 429:143658,
   84.51 436:183939, Point.me 433:180256, DocDraft 431:173106) and update the
   ratio with it -- the dashed widget strokes overflow the frame, so the
   export is a few pixels wider than the frame's nominal size and the design's
   own numbers do not match the file. */
.calendly-hero-image {
  background: var(--bg) url("../assets/calendly-hero-illustration.webp") center / cover no-repeat;
  --hero-ratio: 1302 / 1578;
  aspect-ratio: var(--hero-ratio);
}
.grocery-hero-image {
  background: var(--bg) url("../assets/8451-hero-illustration.webp") center / cover no-repeat;
  --hero-ratio: 1020 / 1474;
  aspect-ratio: var(--hero-ratio);
}
/* contain, not cover: the illustration is one composed picture and cover was
   cropping its edges away. The ratio is the artwork's own, so nothing is cut
   and no letterbox shows. */
.pointme-hero-image {
  background: var(--bg) url("../assets/pointme-hero-illustration.webp") center / contain no-repeat;
  --hero-ratio: 1178 / 1694;
  aspect-ratio: var(--hero-ratio);
}
.docdraft-hero-image {
  background: var(--bg) url("../assets/docdraft-hero-illustration.webp") center / cover no-repeat;
  --hero-ratio: 1210 / 1648;
  aspect-ratio: var(--hero-ratio);
}
.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}
.tag {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--tag);
  border: 1px solid var(--tag);
  border-radius: 50px;
  padding: 6px 12px;
}

@media (max-width: 1200px) {
  .detail-hero-copy h1 { font-size: 56px; }
}

@media (max-width: 900px) {
  .detail-hero { grid-template-columns: 1fr; }
  .detail-hero-copy h1 { font-size: 44px; }
  .detail-hero-copy p { font-size: 16px; max-width:100%}
}

@media (max-width: 600px) {
  .detail-hero-copy h1 { font-size: 36px; }
}


/* ---- At a glance ---- */
/* At a glance */
.glance {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 50px;
}
.glance-label {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--text);
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.glance-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: var(--content-width);
  margin: 0 auto;
}
.glance-item {
  padding: 24px 28px;
  border-left: 1px solid var(--border);
}
.glance-item:first-child { border-left: none; }
.glance-item .k {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.glance-item .v {
  font-family: var(--font-serif);
  font-size: 20px;
}

@media (max-width: 900px) {
  .glance-grid { grid-template-columns: repeat(2, 1fr); }
  .glance-item { border-left: none; border-top: 1px solid var(--border); }
}


/* ---- Editorial row ---- */
/* Editorial row (Calendly at-a-glance) */
/* No border-top here. `.glance-label` already draws the rule under the bar,
   and a second one on this row rendered as a doubled line. */
.editorial-row {
  display: flex;
  max-width: var(--content-width);
  margin: 0 auto;
}
.editorial-block { flex: 1; padding: 40px 32px; }
.editorial-block + .editorial-block { border-left: 1px solid var(--border); }
.editorial-block .k {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 10px;
}
.editorial-block .v {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.3;
}
.editorial-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
}
.editorial-stack .editorial-block { flex: 1; padding: 20px 32px; }
/* No rules between Industry, Timeline and Platform while the section is a
   row. This group is the only one of the four that holds more than one item,
   and ruling them apart made it the only column with lines inside it -- three
   short rules that stopped at the block padding and read as a table dropped
   into a row of plain cells. The group's own border-left already tells the
   reader it is one column.

   The rules come back at 900, where every item stacks and the reader needs
   them to tell one from the next. */
.editorial-stack .editorial-block + .editorial-block {
  border-left: none;
}

@media (max-width: 900px) {
  .editorial-row { flex-direction: column; }
  /* One column, so every item is a row of the same list and they must be
       spaced alike. The 40px on the top-level blocks and the 20px inside the
       stack only make sense side by side, where the stack fits three items into
       one column's height. Stacked, that difference reads as Team, Role and
       Responsibilities being set apart from the other three. */
  .editorial-block,
    .editorial-stack .editorial-block { padding: 20px 32px; }
  .editorial-block + .editorial-block { border-left: none; border-top: 1px solid var(--border); }
  /* border-top, not border-left, once this is a stack. Without it Industry was
       the one item in the six with no rule above it, because the divider it
       relied on was the group's vertical border and that is gone here. */
  .editorial-stack { border-left: none; border-top: 1px solid var(--border); }
  .editorial-stack .editorial-block + .editorial-block {
    border-top: 1px solid var(--border);
  }
  /* An authored break, not a wrap: the Figma copy sets "3 months strategy &
       inception" and "11 months execution" on two lines. A phone column is
       narrower than the desktop cell, so the line fits on its own and the break
       only makes the block taller. The space before the <br> in the markup is
       what joins the two halves when it is hidden. */
  .editorial-block .v br.soft { display: none; }
}


/* ---- Context and Problem ---- */
/* Context & Problem */
/* #FDFAF2 (--paper) is the Figma value for this card. --bg reads as a grey
   panel against the striped ground, so the two are not interchangeable. */
/* Figma node 385:61320: the card is #FDFAF2, padded 96px all round, and its
   body is Geist 18px/1.6 in #6B5C4A (--text-body). */
.context-copy { background: var(--paper); padding: 96px; }
.context-copy h2 { font-family: var(--font-serif); font-weight: 400; font-size: 28px; margin: 0 0 20px; }
.context-copy p { color: var(--text-body); font-size: 18px; line-height: 1.6; margin-bottom: 20px; }
.context-copy strong { color: var(--text); }
/* Context & Problem — single column variant */
.context-single {
  --context-gutter: 40px;
  background-image: var(--hatch-light);
  /* The Figma frame is 977 tall around a 733 card, so the grid band shows
     122px above and below. That collapses to the old 40px on a phone. */
  padding: clamp(40px, 9.5vw, 122px) var(--context-gutter);
  position: relative;
}
/* Figma node 385:61320 runs the isometric grid in an 800px band behind the
   card, on cream, and leaves the diagonal stripes in the gutters either side.
   Same tile and same 312x180 repeat as `.mtw-band`. */
.context-single::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(800px, calc(100% - 2 * var(--context-gutter)));
  background: var(--paper) url("../assets/iso-grid.webp") repeat;
  background-size: 312px 180px;
  pointer-events: none;
}
.context-single .context-copy {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid var(--border);
  position: relative;
}

@media (max-width: 900px) {
  .context-copy { padding: 50px 30px; }
  .context-single { --context-gutter: 20px; }
  .context-single .context-copy { padding: 40px 24px; }
}


/* ---- Key Stages ---- */
/* Key stages */
/* Figma node 370:26907. The eyebrow and title sit in the box's top-left cell,
   the rows hang off the bottom of the same column, and the panel centres its
   content beside them. Colours and sizes below are the Figma values. */
.stages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--stage-border);
  max-width: var(--content-width);
  margin: 0 auto;
  /* Every stage export is 1280x830: the box height is fixed and the copy is
     centred inside it, so short stages sit in more space rather than shrinking
     the box. The JS equaliser still grows it if a stage overruns. */
  min-height: 830px;
}
/* The other sections on the page run to 1280px; only this box was inset by the
   section padding, which cost the sidebar the 640px the row text is sized for. */
#stages { padding-left: 0; padding-right: 0; }
.stages-list {
  border-right: 1px solid var(--stage-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stages-head { padding: 32px 34px; }
.stages-head .section-label { margin-bottom: 10px; }
/* #6B5C4A, not the near-black --text the body inherits. Node 436:188670
   samples (107,92,74) for "Key Stages", the same warm brown as the panel copy
   beside it. */
.stages-head h2 {
  font-size: 28px;
  line-height: 1.15;
  color: var(--text-body);
  margin: 0;
}
.stage-item {
  padding: 24px 34px;
  border-top: 1px solid var(--stage-border);
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--idle);
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
  border-left: none;
  border-right: none;
  border-bottom: none;
}
/* The active row is the accent blue, not a dark ink. Node 436:188670 samples
   (49,133,252) for row 01 against (156,140,120) for rows 02-05, so the
   selected row is marked by hue as well as by weight. */
.stage-item.active {
  color: var(--accent);
  font-weight: 700;
}
/* The vertical padding matters only when a stage's copy is tall enough to
   drive the box past its 830px floor. Without it the copy ran flush to the
   bottom border in the 1001-1050px band, where stage 02 is tallest. 32px is
   the value `.stages-head` already uses on the other side of the box. */
.stage-panel {
  padding: 32px 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
/* Same #6B5C4A as the paragraph under it; only the weight separates them. */
.stage-panel h3 {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}
.stage-panel p {
  color: var(--text-body);
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 1359px) {
  #stages { padding-left: 40px; padding-right: 40px; }
  .stage-item { font-size: clamp(15px, calc(2.1vw - 4.5px), 23px); }
}

@media (max-width: 1280px) {
  .stage-panel { padding: 32px 48px; }
}

@media (max-width: 1000px) {
  .stages { grid-template-columns: 1fr; min-height: 0; }
  .stages-list { border-right: none; }
  .stage-item { font-size: 16px; }
  .stage-panel { padding: 32px 34px; }
}

@media (max-width: 900px) {
  .stages { grid-template-columns: 1fr; }
  .stages-list { border-right: none; }
  #stages { padding-left: 20px; padding-right: 20px; }
  .stages-head { padding: 24px 20px; }
  .stage-item { padding: 18px 20px; font-size: 16px; }
  .stage-panel { padding: 28px 20px; }
  .stage-panel h3, .stage-panel p { font-size: 16px; }
}


/* ---- Key Stages thumbnails ---- */
.stage-thumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;
}
.stage-thumb {
  width: 64px;
  height: 56px;
  background: var(--border);
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
  flex-shrink: 0;
  border: none;
  display: block;
}
img.stage-thumb[data-full] { cursor: pointer; }
.stage-thumb-caption {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.35;
}


/* ---- What made this work ---- */
/* What made this work */
.made-this-work {
  display: flex;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 70px 0 70px var(--gutter);
}
.made-this-work-copy {
  flex: 0 0 300px;
  padding-right: 20px;
}
.made-this-work-table {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
}
/* The isometric grid from the Figma frame, on cream, replaces the flat tan
   block that sat here. */
.mtw-band {
  height: 176px;
  /* 312x180 is the grid's own repeat: the source PNG is 521x181, and those two
     extra columns put a visible seam in every tile. */
  background: var(--paper) url("../assets/iso-grid.webp") repeat;
  background-size: 312px 180px;
}
.principles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.principle {
  padding: 30px 40px;
  border-bottom: 1px solid var(--border);
}
.principle:nth-child(2) {
  border-left: 1px solid var(--border);
}
.principle:nth-child(4) {
  border-left: 1px solid var(--border);
}
.principle:nth-child(3) {
  border-bottom: 0px;
}
.principle:last-child {
  border-bottom: 0px;
}
.principle h4 {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 15px;
  margin: 0 0 10px;
  font-weight: 600;
}
.principle p {
  font-size: 14.5px;
  color: var(--text-body);
  margin: 0;
}

@media (max-width: 1359px) {
  .made-this-work { padding-right: 40px; }
}

@media (max-width: 1200px) {
  /* Same 40px gutter as `#stages` at this width. */
  .made-this-work { flex-direction: column; padding: 56px 40px; gap: 24px; }
  .made-this-work-copy { flex: 1; padding-right: 0; }
  .mtw-band { height: 112px; }
}

@media (max-width: 900px) {
  /* Same 20px gutter as `#stages` at this width. */
  .made-this-work { flex-direction: column; padding: 40px 20px; gap: 20px; }
  .made-this-work-copy { flex: 1; padding: 0; }
  .mtw-band { height: 72px; }
  .principle { padding: 30px 20px;}
  .principles-grid { grid-template-columns: 1fr; }
  .principle:nth-child(2) {
      border-left: 0px;
    }
  .principle:nth-child(4) {
    border-top:1px solid var(--border) !important;
    border-left: 0px;
  }
}