/* ==========================================================================
   FANGIN — "Selected Work" chapter: first project scene (approved, locked)
   Structure (see index.html):
     .work-pin                <- pinned by ScrollTrigger (assets/js/work-scroll.js)
       .work-scene             <- slides up from below, covering the previous
                                  scene rather than appearing beneath it
         .work-media            <- full-bleed placeholder image column
         .work-content           <- editorial copy + the revenue metric
     .work-static-fallback    <- reduced-motion equivalent, hidden by default
   Independent of hero.css/hero-scroll.js — the hero is locked and this
   chapter must never need to reach into it.
   The bridge between the hero reveal and this scene lives in
   assets/css/transition.css + assets/js/transition-scroll.js — that file
   owns the space directly above .work-pin; nothing here does.
   ========================================================================== */

/* ---- Pinned takeover stage ---- */
.work-pin {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--color-bone);
  isolation: isolate;
}

.work-scene {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(420px, 44%) 1fr;
  will-change: transform;
}

/* ---- Copy column ---- */
.work-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 22px);
  padding: 0 var(--edge-gutter);
  background: var(--color-bone);
}

.work-eyebrow {
  color: var(--color-ink);
  opacity: 0.55;
}

.work-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(2.75rem, 5.6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.work-category {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
  opacity: 0.7;
}

.work-category .tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-acid);
  flex: none;
}

/* ---- The result: the dominant visual element of the scene ---- */
.work-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: clamp(10px, 2.6vw, 28px);
}

.work-metric-value {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;
  font-size: clamp(4.5rem, 9.5vw, 9.5rem);
  line-height: 0.88;
  color: var(--color-periwinkle);
}

.work-metric-label {
  color: var(--color-ink);
  opacity: 0.6;
}

/* ---- Media column ----
   Striped placeholder by default (.work-media::before); once a project
   supplies real photography (cfg.work.projects[].media — see
   renderWork() in main.js) the JS adds .has-photo and inserts a plain
   <img class="work-media-photo">, and the placeholder stripes are hidden
   below rather than removed from the CSS, so a future project with no
   photo yet still gets the same honest placeholder treatment. */
.work-media {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
}

.work-media::before {
  content: '';
  position: absolute;
  inset: -10%;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 38px,
    rgba(223, 255, 0, 0.07) 38px,
    rgba(223, 255, 0, 0.07) 40px
  );
}

.work-media.has-photo::before {
  display: none;
}

/* Real campaign photo — one full, uncropped source image (see config.js's
   comment on cfg.work.projects[0].media for why) with object-fit: cover
   doing the actual framing. object-position is deliberately NOT centred:
   there's a lot of workshop ceiling above the mower and floor below the
   mechanic's boots that's fine to lose (per the brief), so this biases
   toward the mower/mechanic instead of a flat 50/50 crop. Re-tuned at the
   mobile breakpoint below — same source image, a different crop, not a
   second file (the "separate responsive crop" the brief asked for). */
.work-media-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}

.work-media-tag {
  position: absolute;
  left: 24px;
  bottom: 24px;
  right: 24px;
  color: var(--color-bone);
  opacity: 0.55;
}

.work-media-tag:empty {
  display: none;
}

.work-index {
  /* Sits over the bone content column (the media column is DOM-first but
     lands in the narrower left grid track — see .work-scene), so this
     reads against bone, not the dark placeholder image. */
  position: absolute;
  right: var(--edge-gutter);
  bottom: 32px;
  z-index: 3;
  color: var(--color-ink);
  opacity: 0.35;
}

/* ---- Reduced-motion / static fallback ----
   Mirrors the hero's pattern: hidden unless prefers-reduced-motion is
   active, in which case it replaces the pinned takeover with a plain
   in-flow section (see main.js). */
.work-static-fallback {
  display: none;
  height: 100vh;
  width: 100%;
  background: var(--color-bone);
}

.work-static-fallback.is-active {
  display: grid;
  grid-template-columns: minmax(420px, 44%) 1fr;
}

@media (max-width: 900px) {
  /* Desktop-first: the two-column editorial layout is authored for wide
     viewports. Tablet/mobile composition to be designed separately —
     temporary safety net only. */
  .work-scene,
  .work-static-fallback.is-active {
    grid-template-columns: 1fr;
  }

  /* .work-media has no intrinsic height of its own (it was sized purely
     by the desktop grid row), so in this single-column stack it would
     otherwise collapse to ~0 — a pre-existing gap in this "temporary
     safety net" layout, not something this rule is redesigning. Giving
     it an explicit height is what actually makes the real photo (or the
     placeholder stripes) visible at all here. */
  .work-media {
    height: 58vh;
  }

  /* Same source image as desktop, a different crop — the mobile box is
     shorter/wider relative to the photo than the desktop column, so the
     anchor point is re-tuned rather than reused verbatim. */
  .work-media-photo {
    object-position: 50% 22%;
  }
}