/* Life at TTW — eyebrow + display heading + large intro + full-width image
   (auto wipe-down via image-reveal) + 3 supporting columns.
   Layout refined against Figma kfVB4NiP7xQX1fsjsHD9E2. */

.life-at-ttw {
  padding-block: var(--section-y);
}

.life-at-ttw__inner {
  row-gap: clamp(2rem, 4vw, 3.75rem);
  align-items: start;
}

/* Eyebrow + display heading — steel on the light page background. */
.life-at-ttw__head {
  grid-column: 1 / span 10;
}
.life-at-ttw__eyebrow {
  color: var(--c-heading);
}

.life-at-ttw__heading {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: var(--text-h2); /* → 100px */
  line-height: var(--lh-tight); /* 1.0 (Konfus hero) */
  color: var(--c-heading);
}

/* Large pull intro — Arial Nova Light, ~45px (H4). Sits in the left ~7 columns. */
.life-at-ttw__intro {
  grid-column: 1 / span 7;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-h4); /* → 45px */
  line-height: var(--lh-snug); /* 1.2 */
  color: var(--c-text);
}
.life-at-ttw__intro > :first-child {
  margin-top: 0;
}
.life-at-ttw__intro > :last-child {
  margin-bottom: 0;
}
/* clay emphasis if editors mark words with <strong> / .has-accent */
.life-at-ttw__intro strong,
.life-at-ttw__intro .has-accent {
  color: var(--color-clay);
  font-weight: inherit;
}

/* Full-width content image — keep as a content <img> so the auto-tagger wipes it down. */
.life-at-ttw__media {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 100vh; /* ~80% of the viewport height, matches Figma */
}
/* Edge-to-edge break-out when the "Full-width image" toggle is on.
   overflow + clip-path keep the full-bleed image inside the gutter
   (padding-inline) so it never bleeds to the screen edges. */
.life-at-ttw__media.is-full-width {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--gutter);
  overflow: hidden;
  clip-path: inset(0 var(--gutter));
}
.life-at-ttw__img {
  display: block;
  width: 100%;
  height: 100vh !important;
  aspect-ratio: 1844 / 831; /* ≈ 2.22:1, matches Figma */
  object-fit: cover;
}

/* ── Hero overlay mode ──────────────────────────────────────────────
   "Full-width image" on → eyebrow + heading sit over the full-bleed image.
   The image stays a real <img> so the wipe-down reveal still runs. */
.life-at-ttw--hero .life-at-ttw__media {
  position: relative;
}
/* Legibility scrim, matched to the image box (inset by the gutter padding). */
.life-at-ttw--hero .life-at-ttw__media::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: var(--gutter);
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 40%,
    rgba(0, 0, 0, 0) 70%
  );
  pointer-events: none;
}
.life-at-ttw--hero .life-at-ttw__head {
  position: absolute;
  z-index: 2;
  /* Align the block to the grid content edge and span 7 of the 12 columns. */
  left: max(var(--gutter), calc((100vw - var(--container-max)) / 2));
  bottom: 0;
  width: calc((7 * var(--container-max) - 5 * var(--grid-gap)) / 12);
  max-width: calc(100vw - 2 * var(--gutter));
  margin: 0;
  padding: clamp(1.5rem, 2vw + 1rem, 3rem);
  padding-block-end: var(--sp-4xl);
}
/* Big dot-motif in the hero image's top-right corner (per Figma). */
.life-at-ttw__motif {
  position: absolute;
  z-index: 2;
  top: clamp(1.5rem, 4vh, 3rem);
  right: calc(var(--gutter) + clamp(1.5rem, 3vw, 3rem));
  --motif-size: 99px;
  color: var(--color-white);
  pointer-events: none;
}
.life-at-ttw--hero .life-at-ttw__eyebrow {
  color: rgba(255, 255, 255, 0.85);
}
.life-at-ttw--hero .life-at-ttw__heading {
  color: #fff;
}

/* Divider above the supporting columns — draws left→right on scroll (see line-draw.js).
   Full CSS width by default so it still shows without JS / with reduced motion. */
.life-at-ttw__divider {
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
  background-color: #1e17111a;
  transform-origin: left center;
}

/* 3 supporting columns — each topped with a clay hairline (Body small_Desktop). */
.life-at-ttw__items {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
.life-at-ttw__item {
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 1vw, 0.9375rem); /* ~15px between title + body */
  padding-top: 0.625rem; /* ~10px */
  /* border-top: 1px solid var(--color-clay); */
}
.life-at-ttw__item-title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-h6); /* → 26px (H6 Small Sub Heading) */
  line-height: var(--lh-snug); /* 1.2 */
  color: var(--c-heading);
}
.life-at-ttw__item-body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body-sm); /* 16px */
  line-height: var(--lh-body); /* 1.3 */
  color: var(--c-text);
}

@media (max-width: 767px) {
  .life-at-ttw__head,
  .life-at-ttw__intro {
    grid-column: 1 / -1;
  }
  .life-at-ttw__items {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 6vw, 2rem);
  }
  /* Taller crop so the overlaid heading has vertical room on phones. */
  .life-at-ttw--hero .life-at-ttw__img {
    aspect-ratio: 3 / 4;
  }
  .life-at-ttw__motif {
    display: none;
  }
  .life-at-ttw--hero .life-at-ttw__head {
    left: var(--gutter);
    width: auto;
    right: var(--gutter);
    max-width: none;
    padding-block-end: clamp(1.5rem, 8vw, 3rem);
  }
}