/* ============================================================
   home.css — styles unique to the home page
   Selected works, testimonials, verbs (the hero is in lens-hero.css).
   The section tabs live in css/glass-tabs.css.
   ============================================================ */

.heading_subtitle {
  width: 100%;
  max-width: 980px;
  color: var(--gray-600);
  font-family: Geist, sans-serif;
  line-height: 170%;
}

.p { color: var(--black); }

/* ── Selected works ───────────────────────────────────────── */

/* The work stack: one row per project on the 980px canvas, 60px apart. */
.works-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 100%;
}

/* .6fr/.4fr of the 920px left after the gap — 552px thumbnail, 368px card,
   top-aligned so short cards don't float beside tall images. */
.works-list__item {
  display: grid;
  grid-template-columns: .6fr .4fr;
  column-gap: 60px;
  align-items: start;
}

.link-block {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  padding-top: 0;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
}

.image-thumb,
.image-34 { border-radius: 16px; }
/* Scales within the 4:3 box its width/height attributes reserve, so the
   page's height is known before the photo loads. */
.image-34 { height: auto; }

.div-block-63 {
  display: flex;
  flex-flow: column;
  margin-bottom: 0;
}

.link-copy-copy {
  width: 100%;
  max-width: 380px;
  margin-bottom: 1rem;
  padding-top: 0;
  color: var(--gray-600);
  font-family: Geist, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 170%;
  text-decoration: none;
}

.link-5 {
  margin-bottom: 1rem;
  color: var(--black);
  font-family: Geist, sans-serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 150%;
  text-decoration: none;
}

.link-copy {
  width: 100%;
  max-width: 380px;
  color: var(--black);
  font-family: Geist, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 170%;
  text-decoration: none;
}

/* ── Thumbnail roll ───────────────────────────────────────────
   Layers stacked over the thumbnail, crossfading through the same
   slides the project viewer holds. The original <img> stays in flow
   underneath and keeps setting the row's height. */

.thumb-roll {
  display: block;
  position: relative;
}

.thumb-roll__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  opacity: 0;
  transition: opacity .6s ease;
}
.thumb-roll__layer.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .thumb-roll__layer { transition: none; }
}

/* ── Testimonials ─────────────────────────────────────────── */

/* A masonry of cards, two columns (one below 992px). Each names its
   writer first, then leads with the line they emphasised, set large; the
   whole recommendation opens beneath it. Cards keep their own heights and
   each column stacks on its own: js/home.js gives every card a column
   (the shorter one, in order) and a row span of its height on 1px rows,
   so opening a card lengthens only its column. Without JS the cards sit
   in a plain grid, every one showing its full text. */

.testimonials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* tiled two across */
  align-items: start;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.testimonial {
  display: flex;
  flex-direction: column;
  margin: 0;                    /* the global `li` rule adds 10px */
  padding: 28px;
  border-radius: 16px;
  background-color: var(--gray-100);
}

/* The global `figure` and `blockquote` rules add margins, a rule and
   padding; none of them belong here. */
.testimonial__figure { margin: 0; padding: 0; }
.testimonial__quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  line-height: inherit;
}

.testimonial__person {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.testimonial__name {
  color: #1a1b1f;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.testimonial__role {
  color: var(--gray-600);
  font-size: 14px;
  line-height: 20px;
}

/* The emphasised line, set large, without quotation marks. */
.testimonial__highlight {
  margin: 0;
  color: #1a1b1f;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.36;
}

.testimonial__full-inner p {
  margin: 0;
  padding-top: 16px;
  color: var(--gray-700);
  font-size: 15px;
  line-height: 1.7;
}
.testimonial__full-inner strong { color: #1a1b1f; font-weight: 600; }

/* Collapsed: the row folds to nothing and its text leaves the tab order
   and the accessibility tree (visibility). The states switch at once;
   js/home.js eases the card's height between them. */
.testimonials.is-ready { grid-auto-rows: 1px; grid-auto-columns: minmax(0, 1fr); row-gap: 0; }   /* any column the grid adds is as wide as the rest */

.testimonials.is-ready .testimonial__full { display: grid; grid-template-rows: 0fr; visibility: hidden; }
.testimonials.is-ready .testimonial.is-open .testimonial__full { grid-template-rows: 1fr; visibility: visible; }
.testimonial__full-inner { min-height: 0; overflow: hidden; }
/* Open, the full text replaces the pull quote (its line is already bold
   in the text), starting where the quote did. */
.testimonials.is-ready .testimonial.is-open .testimonial__highlight { display: none; }
.testimonials.is-ready .testimonial.is-open .testimonial__full-inner p:first-child { padding-top: 0; }

/* At the card's foot. */
.testimonial__toggle {
  display: none;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 20px 0 0;
  border: 0;
  background: none;
  color: var(--gray-800);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}
.testimonials.is-ready .testimonial__toggle { display: inline-flex; }
.testimonial__toggle:hover { color: #1a1b1f; }
.testimonial__toggle:hover .testimonial__toggle-label { text-decoration: underline; text-underline-offset: 3px; }
.testimonial__toggle:focus-visible {
  outline: 2px solid #212121;
  outline-offset: 4px;
  border-radius: 4px;
}
.testimonial__toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.testimonial.is-open .testimonial__toggle svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .testimonial__toggle svg { transition: none; }
}

/* ── 3 verbs I like ───────────────────────────────────────── */

.div-block-78 { font-family: Geist, sans-serif; }

/* The second column is 780px at most and gives way on narrower screens.
   From 992px the three rows share one two-column grid, so the verbs keep
   a column of at least 120px, a 32px gap, and every row's second column
   starts on the same line. */
.div-block-94 {
  flex: 0 1 780px;
  min-width: 0;
  max-width: 780px;
}
#verbs .wrapper_980w.space-between { column-gap: 32px; }
@media screen and (min-width: 992px) {
  #verbs .wrapper_980w.space-between {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 780px);
  }
}

/* ── Dark mode ────────────────────────────────────────────────
   The hero's theme toggle puts the whole page in the case studies' dark
   palette (body.dark in shared.css: black ground, dark nav, white logo).
   These are the home page's own pieces: text in --text--primary and
   --text--secondary, and the testimonial cards on the near-black surface
   the case studies use for media, with a hairline rim. */

body.dark .heading_subtitle,
body.dark .link-copy-copy,
body.dark .text_footer,
body.dark .works-empty { color: var(--text--secondary); }

body.dark .link-5,
body.dark .link-copy { color: var(--text--primary); }

/* Thumbnails with white grounds would otherwise end without an edge. */
body.dark .image-thumb { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }

body.dark .testimonial {
  background-color: #141417;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
body.dark .testimonial__name,
body.dark .testimonial__highlight,
body.dark .testimonial__full-inner strong { color: var(--text--primary); }
body.dark .testimonial__role,
body.dark .testimonial__full-inner p { color: var(--text--secondary); }
body.dark .testimonial__toggle { color: #c7c8cc; }
body.dark .testimonial__toggle:hover { color: var(--text--primary); }
body.dark .testimonial__toggle:focus-visible { outline-color: var(--text--primary); }

/* 3 verbs: the verbs in full ink, what goes with them in grey. */
body.dark .div-block-78 .body,
body.dark .div-block-97 .body { color: var(--text--primary); }
body.dark .div-block-94 .body { color: var(--text--secondary); }
body.dark .div-block-94 a { color: var(--text--primary); }

/* ── ≤ 991px ──────────────────────────────────────────────── */

@media screen and (max-width: 991px) {
  .div-block-63 { display: flex; flex-flow: column; margin-bottom: 0; }
  .link-block { width: 100%; height: auto; }


  .div-block-78,
  .div-block-97 { width: 180px; }

  /* One column per project: image above card. */
  .works-list__item {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .link-5 { font-size: 24px; line-height: 150%; }

  /* One testimonial per row; the quote's measure still holds. */
  .testimonials { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .testimonial__figure { max-width: var(--measure); }

}

/* ── ≤ 767px ──────────────────────────────────────────────── */

@media screen and (max-width: 767px) {
  .div-block-63 { margin-bottom: 0; }
  .link-copy { font-size: 14px; }
  .link-copy-copy { margin-bottom: .5rem; font-size: 14px; }
  .link-5 { font-size: 20px; line-height: 1.4; }
  .testimonial__highlight { font-size: 20px; line-height: 1.4; }


  .div-block-78 {
    display: block;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .div-block-94 { width: 100%; }

  .image-thumb,
  .image-34,
  .thumb-roll__layer { border-radius: 8px; }
}

/* ── ≤ 479px ──────────────────────────────────────────────── */

@media screen and (max-width: 479px) {

  .body { display: block; }

  .div-block-63 { width: 100%; max-width: 100%; margin-bottom: 0; }
  .link-block { width: auto; height: auto; }
  .link-copy { font-size: 14px; line-height: 170%; }
  .link-copy-copy {
    display: block;
    margin-top: 20px;
    margin-bottom: 12px;
    padding-top: 0;
    font-size: 14px;
    line-height: 170%;
  }
  .link-5 { margin-bottom: 12px; }


  .works-list { gap: 40px; }

  .testimonial { padding: 24px; }

  .div-block-94 { display: block; width: 100%; max-width: 100%; }


  .image-thumb,
  .thumb-roll__layer { border-radius: 8px; }
}