/* ==========================================================================
   Composable template — the rules the section-type rewrite needs.

   Four groups, in this order:
   1. what replaced a hard-coded per-instance attribute (inline style, ordinal
      class) when the instance became a row of a collection;
   2. the glyph a `link` field cannot keep as markup;
   3. the `compact` hero variant;
   4. the two shell elements that lost an inline style.
   ========================================================================== */

/* ---- 1. Per-row variety that used to be per-instance markup -------------- */

/* `.project--01/02/03` were authored per project; a collection row has one
   prototype, so the three-step rhythm repeats by position instead. */
.work__list > .project:nth-child(3n + 1) .project__media { grid-column: 1 / 10; aspect-ratio: 16 / 10; }
.work__list > .project:nth-child(3n + 1) .project__meta  { grid-column: 10 / 13; }

.work__list > .project:nth-child(3n + 2) .project__meta  { grid-column: 1 / 5; order: 1; }
.work__list > .project:nth-child(3n + 2) .project__media { grid-column: 6 / 13; aspect-ratio: 4 / 3; order: 2; }

.work__list > .project:nth-child(3n + 3) .project__media { grid-column: 1 / 13; aspect-ratio: 21 / 9; }
.work__list > .project:nth-child(3n + 3) .project__meta  { grid-column: 1 / 7; }

@media (max-width: 1023px) {
  .work__list > .project:nth-child(3n + 1) .project__media { aspect-ratio: 16 / 10; }
  .work__list > .project:nth-child(3n + 2) .project__media { aspect-ratio: 4 / 3; }
  .work__list > .project:nth-child(3n + 3) .project__media { aspect-ratio: 16 / 9; }
}

/* Four hand-drawn value icons, one prototype: every row carries all four and
   its position picks one. A fifth row starts the cycle again. */
.value__icon-set { display: block; }
.value__icon-set > .value__icon { display: none; }
.values__grid > .value:nth-child(4n + 1) .value__icon--1,
.values__grid > .value:nth-child(4n + 2) .value__icon--2,
.values__grid > .value:nth-child(4n + 3) .value__icon--3,
.values__grid > .value:nth-child(4n + 4) .value__icon--4 { display: block; }

.project__meta { --reveal-delay: 150ms; }
.cta__side .btn { --reveal-delay: 120ms; }

/* The three headline accents that carried `style="color:#4faa00"`. */
.accent-italic--deep { color: #4faa00; }

/* A richtext value is written as block children, so its carrier is a
   container; `.approach__note` was a `<p>` and keeps a paragraph's metrics. */
.approach__note > p { margin: 0; }
.approach__note > p + p { margin-top: .8em; }

/* ---- 2. The arrow a link field cannot carry ------------------------------ */

/* A `link` value is a destination AND a label, and the label replaces the
   anchor's content — so the glyph that used to be a `<span class="arrow">`
   inside the anchor is drawn by the anchor instead.

   No margin: `.btn` is a flex container, so this `::after` is a flex item and
   `gap: 14px` spaces it exactly as it spaced the span it replaces. A
   `margin-left: .5em` here is added to that gap, and measured 159.98 px on the
   hero's primary CTA against the original's 154.23 px. */
.btn--arrow::after {
  content: "↗" / "";
  display: inline-block;
  transition: transform var(--dur-hover) var(--ease-fast);
}
.btn--paper.btn--arrow::after { color: #3f8f00; }

.project__link { color: inherit; text-decoration: none; }
.project__link::after {
  content: "↗" / "";
  display: inline-block;
  margin-left: 14px;
  font-family: var(--font-sans);
  font-size: .55em;
  color: #3f8f00;
  transition: transform var(--dur-hover) var(--ease-fast);
}

@media (hover: hover) and (pointer: fine) {
  .btn--arrow:hover::after { transform: translate(3px, -2px); }
  .project:hover .project__link::after { transform: translate(3px, -2px); }
}

/* ---- 3. Hero variant: compact ------------------------------------------- */

.hero--compact {
  min-height: 0;
  height: auto;
  padding-bottom: clamp(56px, 6vw, 96px);
}

.hero--compact .hero__content {
  height: auto;
  flex-direction: row;
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  padding-bottom: clamp(48px, 5vw, 80px);
}

.hero--compact .hero__copy {
  width: min(52%, 700px);
}

.hero--compact .hero__title {
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  max-width: 9em;
}

.hero--compact .hero__bg {
  position: relative;
  inset: auto;
  flex: 1;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-image);
  overflow: hidden;
}

.hero--compact .hero__process {
  display: block;
  position: relative;
  z-index: 10;
}

.hero--compact .hero__panel {
  position: static;
  width: auto;
  height: auto;
  opacity: 1;
}

.hero--compact .hero__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hero--compact .step + .step {
  border-top: 0;
  border-left: 1px solid rgba(255, 255, 255, .08);
}

@media (max-width: 1023px) {
  .hero--compact .hero__content { flex-direction: column; align-items: stretch; }
  .hero--compact .hero__copy { width: 100%; }
  .hero--compact .hero__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .hero--compact .hero__steps { grid-template-columns: 1fr; }
  .hero--compact .step + .step { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
}

/* ---- 4. What lost an inline style ---------------------------------------- */

.logo-symbols { position: absolute; }