/* Studio (templates/studio.php): hero photo, about, the sticky process stack, the plate lab, people */

.studio-hero { block-size: clamp(16rem, 50vw, 72dvh); }
[data-parallax] img { transition: none; }

/* ---------- About: headline first, text below and pushed to the end side */
.about { padding-block: var(--section); }
.about__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) var(--gap); }
.about__title { grid-column: 1 / span 9; }
.about__text { grid-column: 6 / -1; font-size: var(--fs-lead); line-height: 1.5; }
@media (max-width: 56.24rem) {
  .about__title, .about__text { grid-column: 1 / -1; }
}

/* ---------- Process: four cards that pin under the header and stack as you scroll.
   position: sticky does the pinning; motion.js only dims the card being covered. */
.process__title { margin-block-end: clamp(2rem, 4vw, 3.5rem); }
.process__card { background: var(--bg); border-block-start: 1px solid var(--line); }
.process__card:nth-child(even) { background: var(--bg-2); }
.process__card-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--gap); padding-block: clamp(2.5rem, 5vw, 4rem); }
.process__verb { grid-column: 1 / -1; font-size: var(--fs-h1); }
.process__text { grid-column: 1 / -1; max-inline-size: 44ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.process__media { grid-column: 1 / -1; aspect-ratio: 16 / 11; }

@media (min-width: 56.25rem) {
  .process__card { position: sticky; inset-block-start: var(--header-h); display: grid; align-items: center; min-block-size: calc(100dvh - var(--header-h)); }
  .process__card-inner { grid-template-rows: auto auto; align-content: center; align-items: start; inline-size: 100%; }
  .process__verb { grid-column: 1 / span 6; align-self: end; }
  .process__text { grid-column: 1 / span 5; }
  .process__media { grid-column: 8 / -1; grid-row: 1 / span 2; aspect-ratio: 4 / 5; max-block-size: calc(100dvh - var(--header-h) - 8rem); justify-self: end; }
}

/* ---------- Lab */
.lab { padding-block: var(--section); }
.lab__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem) var(--gap); align-items: center; }
.lab__plate { grid-column: 1 / span 6; }
.lab__copy { grid-column: 8 / -1; display: grid; gap: 1.25rem; }
.lab__copy p { max-inline-size: 44ch; color: var(--ink-2); }
@media (max-width: 56.24rem) {
  .lab__plate, .lab__copy { grid-column: 1 / -1; }
  .lab__copy { order: -1; }
}

/* ---------- People */
.people { padding-block: var(--section); background: var(--bg-2); }
.people__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) var(--gap); }
.people__inner > h2 { grid-column: 1 / span 4; }
.people__list { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 2.75rem) var(--gap); }
.person__name { font-size: var(--fs-h3); font-stretch: 112%; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.person__role { margin-block-start: 0.25rem; color: var(--ink-2); }
@media (max-width: 56.24rem) {
  .people__inner > h2, .people__list { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .people__list { grid-template-columns: minmax(0, 1fr); }
}