/* Container, section rhythm, hero and the full-bleed work bands. */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-7); }

@media (min-width: 1024px) {
  .section { padding-block: var(--space-8); }
}

.section-title {
  font-size: var(--size-section);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}

/* ── Hero ──────────────────────────────────────────────────────────
   Asymmetric on purpose: oversized name on the left, photo bleeding
   off the right edge of the viewport. Nothing centred. */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-block: var(--space-7) var(--space-7);
  padding-inline: var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
}

.hero-text { min-width: 0; }

.hero-photo img,
.hero-photo .img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-img);
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.55fr 1fr;
    align-items: start;
    gap: var(--space-5);
    padding-block: clamp(64px, 9vw, 140px) var(--space-8);
  }

  /* Pull the photo past the container edge. */
  .hero-photo {
    margin-right: calc(var(--gutter) * -1);
  }

  .hero-photo img,
  .hero-photo .img-placeholder {
    border-radius: var(--radius-img) 0 0 var(--radius-img);
  }
}

/* ── About ─────────────────────────────────────────────────────── */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-6);
  }
}

/* ── Automation rows ───────────────────────────────────────────────
   Hairline-separated rows, not cards: metadata in a narrow left rail,
   the writing in a wide right column. Same editorial logic as the work
   bands, minus the image the bands are built around. */

.ops-list {
  display: grid;
  gap: var(--space-5);
}

.ops-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

@media (min-width: 900px) {
  .ops-item {
    grid-template-columns: 4fr 8fr;
    gap: var(--space-6);
  }
}

/* ── Work bands ────────────────────────────────────────────────────
   Full-bleed: the list sits outside .container so each band can span
   the viewport while its inner grid stays aligned to the gutter. */

.work-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin-top: var(--space-6);
}

@media (min-width: 1024px) {
  .work-list { gap: var(--space-8); }
}

.work-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-inline: var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
  width: 100%;
}

.work-item[hidden] { display: none; }

@media (min-width: 900px) {
  .work-item {
    grid-template-columns: 4fr 7fr;
    gap: var(--space-6);
    align-items: center;
  }

  /* Every second project in a category swaps sides.
     Media stays the smaller column on both sides. */
  .work-item.is-flipped { grid-template-columns: 7fr 4fr; }
  .work-item.is-flipped .work-media { order: 2; }
  .work-item.is-flipped .work-body  { order: 1; text-align: right; }

  /* .work-meta, .work-tags and .work-links are flex containers, and flex
     ignores text-align — without this the number/date line stayed pinned to
     the left edge of the wide column while the title sat on the right. */
  .work-item.is-flipped .work-meta,
  .work-item.is-flipped .work-tags,
  .work-item.is-flipped .work-links { justify-content: flex-end; }

  /* Only meaningful once the band is actually two columns. Below 900px the
     item is a single stacked column reading left-aligned, and pushing the
     description right there detached it from its own title. */
  .work-item.is-flipped .work-description { margin-left: auto; }
}

/* ── Footer ────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-4);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  color: var(--text-faint);
}