/* ==========================================================================
   FIT BY SCIENCE - SECTION 05: REAL LIFE
   The homepage's photography-led moment. Typography steps back; an
   asymmetric editorial gallery and a full-bleed cinematic close carry
   the section. No cards, no icon grid - a magazine spread, not a UI.
   ========================================================================== */

.real-life {
  background: var(--obsidian);
  color: var(--bone);
  padding-block: var(--space-16);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .real-life { padding-block: var(--space-24); }
}

/* ---- Intro: deliberately compact - this section is carried by imagery ---- */
.real-life__intro {
  max-width: 34ch;
}

.real-life__eyebrow-headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.08;
  letter-spacing: -0.005em;
  font-size: var(--text-display-sm);
  color: var(--bone);
}

.real-life__eyebrow-headline .is-muted {
  display: block;
  color: rgba(244, 242, 237, 0.5);
  margin-top: var(--space-1);
}

/* ---- Reusable photography placeholder plate ----
   Distinct tonal grading per plate hints at the eventual scene without
   pretending to be a real photo. Consistent with the hero's No. 01
   caption convention, continued here as No. 02–05. */
.plate {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(244, 242, 237, 0.12);
}

.plate::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.plate::after {
  content: '';
  position: absolute;
  inset: -12%;
  background: linear-gradient(200deg, transparent 46%, rgba(244, 242, 237, 0.05) 47%, transparent 48%);
}

.plate--a { background: linear-gradient(145deg, #1e2226 0%, #121417 55%, #0B0D0F 100%); } /* training - cool, neutral */
.plate--b { background: linear-gradient(145deg, #221f1c 0%, #16130f 55%, #0B0D0F 100%); } /* dinner - warm */
.plate--d { background: linear-gradient(160deg, #241d17 0%, #17130f 50%, #0B0D0F 100%); } /* celebration - warm */

.plate__caption {
  margin-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(167, 168, 165, 0.55);
}

/* ---- The story - two dominant images, tightly composed ----
   Fewer, larger photographs. The lifestyle list lives inside the
   secondary image as an overlay, not as a separate floating block, and
   the turn statement sits immediately beneath it - anchored to the
   imagery rather than centered in open space. */
.real-life__story {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.real-life__story-main {
  aspect-ratio: 3 / 4;
}

.real-life__story-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.real-life__story-secondary {
  aspect-ratio: 5 / 4;
}

.real-life__story-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(11, 13, 15, 0.88) 0%, rgba(11, 13, 15, 0.35) 55%, transparent 85%);
}

.real-life__story-list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.real-life__story-list p {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 500;
  line-height: 1.4;
  color: rgba(244, 242, 237, 0.72);
}

.real-life__story-list p:last-child {
  color: var(--bone);
  font-weight: 600;
  margin-top: 0.125rem;
}

.real-life__turn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.18;
  color: var(--bone);
  max-width: 24ch;
}

.real-life__copy {
  margin-top: var(--space-3);
  max-width: 38ch;
  font-size: var(--text-body-sm);
  line-height: var(--lh-body);
  color: var(--stone);
}

/* ---- Full-bleed feature - the cinematic climax ---- */
.real-life__feature {
  position: relative;
  margin-top: var(--space-12);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(244, 242, 237, 0.12);
}

.real-life__feature-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(11, 13, 15, 0.75) 0%,
    rgba(11, 13, 15, 0.15) 45%,
    rgba(11, 13, 15, 0.05) 60%,
    rgba(11, 13, 15, 0.45) 100%
  );
}

.real-life__feature-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-6) var(--space-4);
}

.real-life__feature-text span {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--bone);
}

.real-life__feature-text span:nth-child(2) {
  align-self: flex-end;
  text-align: right;
}

.real-life__feature-text span:nth-child(3) {
  align-self: center;
  color: rgba(244, 242, 237, 0.85);
}

.real-life__feature-caption {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(244, 242, 237, 0.5);
}

/* ---- Closing statement ---- */
.real-life__closing {
  margin-top: var(--space-16);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.15;
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  color: var(--bone);
  max-width: 20ch;
  margin-inline: auto;
}

/* ==========================================================================
   Desktop - the gallery becomes a genuine asymmetric grid
   ========================================================================== */
@media (min-width: 1024px) {
  .real-life__story {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    column-gap: var(--space-4);
    align-items: stretch;
  }

  .real-life__story-main {
    aspect-ratio: auto;
    height: 100%;
  }

  .real-life__story-secondary {
    aspect-ratio: 16 / 10;
  }

  .real-life__feature { aspect-ratio: 21 / 9; }

  .real-life__feature-text {
    padding: var(--space-8);
  }

  .real-life__feature-text span {
    font-size: clamp(2rem, 3.6vw, 3rem);
  }
}