/* =========================================================
   Case study: Enterprise Asset Management
   Text-driven layout (high-res Figma exports pending)
   ========================================================= */

/* Reserve vertical room for the fixed NDA ribbon INSIDE the hero so the
   white background extends behind it (no gray strip between nav and hero). */

/* ───────── NDA disclaimer ribbon ─────────
   Sticks under the global nav so it stays in view while reading.
   On scroll past the hero, JS toggles `.is-collapsed` to shrink the ribbon to
   a thin strip with just an "NDA" pill — hover (or focus) re-expands it. */
.ce-nda {
  /* Fixed (not sticky) because body `zoom` breaks sticky positioning. The
     <main> below adds extra top padding so this bar's reserved space sits
     between the nav and the hero content. */
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 5;
  background: #d6e2f5;
  color: #0c2b7b;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  padding: 12px 24px;
  /* Expanded height = the ribbon's own content height, measured by JS into
     --nda-h (so the blue background always wraps the text, even when it
     reflows to 3-4 lines on narrow viewports). 64px is the no-JS fallback. */
  max-height: var(--nda-h, 64px);
  /* visible so the collapsed-state pill can hang below the strip.
     The expanded text is hidden via opacity, not clipping. */
  overflow: visible;
  cursor: pointer;
  outline: none;
  transition:
    max-height 280ms cubic-bezier(0.4, 0.2, 0.2, 1),
    padding 280ms cubic-bezier(0.4, 0.2, 0.2, 1);
}
.ce-nda__text {
  display: inline-block;
  transition: opacity 200ms ease;
}
.ce-nda__pill {
  position: absolute;
  /* Pill starts at the very top of the strip and hangs down past its bottom —
     looks like a tag attached to the line from above. */
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #2c6edf;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 2px 12px;
  /* Square corners — keeps the collapsed strip a clean straight line
     instead of looking like an arch around a circular badge. */
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.ce-nda.is-collapsed {
  max-height: 8px;
  padding-top: 0;
  padding-bottom: 0;
}
.ce-nda.is-collapsed .ce-nda__text { opacity: 0; }
.ce-nda.is-collapsed .ce-nda__pill { opacity: 1; }
/* Hover / focus re-expands even when collapsed */
.ce-nda.is-collapsed:hover,
.ce-nda.is-collapsed:focus-visible {
  max-height: var(--nda-h, 64px);
  padding-top: 12px;
  padding-bottom: 12px;
}
.ce-nda.is-collapsed:hover .ce-nda__text,
.ce-nda.is-collapsed:focus-visible .ce-nda__text { opacity: 1; }
.ce-nda.is-collapsed:hover .ce-nda__pill,
.ce-nda.is-collapsed:focus-visible .ce-nda__pill { opacity: 0; }

/* ───────── Hero — Figma node 3045:1385 (1440×481 logical frame) ─────────
   Full-bleed white background. Inner content positioned absolutely inside a
   1440-wide centered frame, matching Figma coordinates exactly at ≥1440 vw.
   On narrower viewports the frame stays at 1440 and clips at hero edges. */
.ce-hero {
  position: relative;
  width: 100%;
  background: #fff;
  /* Buffer above the cover equal to the fixed NDA bar's measured height
     (--nda-h, set by JS) so the white background extends behind the bar with
     no gray seam, and the hero copy is never covered when the bar reflows. */
  padding-top: var(--nda-h, 64px);
  overflow: hidden;
  margin-bottom: 0;
}
.ce-hero__inner {
  position: relative;
  width: 100%;
  /* Same scaling curve as Light hero: locks at 481px ≥1280vw, smoothly drops
     to 420px at 700vw. Below 700 the mobile media query restructures the hero. */
  height: clamp(420px, 10.5vw + 346px, 481px);
}
.ce-hero__frame {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1440px;
  height: 100%;
  transform: translateX(-50%);
}

/* Background dashed-curves decoration (SVG export from Figma). Extends past
   the hero edges; clipped by .ce-hero { overflow: hidden }. */
.ce-hero__lines {
  position: absolute;
  left: -189.26px;
  top: -336.87px;
  width: 1809.182px;
  height: 1264.624px;
  /* SVG has viewBox but no intrinsic pixel size; bypass global max-width:100% */
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* Left-column copy — aligned to the SAME logical left edge as every other
   ce-* block in the case (`max(60px, calc((100vw - 1140px) / 2))`). Positioned
   against .ce-hero__inner (not against the 1440-centered .ce-hero__frame) so
   the alignment doesn't drift when body zoom makes the CSS body wider than
   the viewport. */
.ce-hero__title,
.ce-hero__sub,
.ce-hero__role {
  position: absolute;
  left: max(60px, calc((100vw - 1140px) / 2));
}
.ce-hero__title {
  top: 136px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 33px;
  line-height: 1.15;
  color: #000;
  white-space: nowrap;
}
.ce-hero__sub {
  top: 230px;
  width: 282px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 16px;
  line-height: 23px;
  color: #606060;
}
.ce-hero__role {
  /* Anchor to the bottom of the frame instead of top: 434px so the line stays
     visible when the hero height shrinks below 481px on narrower viewports.
     481 (frame) − 434 (Figma top) − 32 (line) = 15px → bottom: 15px. */
  bottom: 15px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: #2f3031;
  opacity: 0.5;
}

/* Screens group wrapper: invisible on desktop (children position against the
   1440 frame), becomes the visual band container on mobile. */
.ce-hero__screens { display: contents; }

/* Screens — front (BMW research) and back (Costs analytics, faded). */
.ce-hero__screen {
  position: absolute;
  box-shadow: 2px 5px 17px 2px rgba(0, 0, 0, 0.11);
}
/* Front screen — Figma 576×353 at (599, 43). Scaled ×1.10 and shifted 40px
   left per design feedback. Anchored by the BOTTOM edge: at the native 481px
   inner height the screen sits 50px above the bottom (matching Figma top:43),
   and as the inner shrinks the bottom anchor keeps it visually grounded
   instead of floating in midair with too much whitespace below. */
.ce-hero__screen--1 {
  left: 559px; /* 599 − 40 */
  top: auto;
  bottom: 50px; /* 481 − 43(figma top) − 388(height) */
  width: 634px;  /* 576 × 1.10 */
  height: 388px; /* 353 × 1.10 */
  overflow: hidden;
}
.ce-hero__screen--1 img {
  position: absolute;
  left: -0.2%;
  top: 0;
  width: 100.39%;
  height: 116.61%;
  object-fit: cover;
  object-position: top left;
  display: block;
}
/* Back screen — Figma 338×241 at (1202, 97). Scaled ×1.10. Positioned 30px
   to the right of screen-1's right edge (559 + 634 + 30 = 1223) so there's
   a visible gap between the two screens.
   Vertically aligned with screen-1 along a SHARED horizontal centerline —
   bottom = screen-1 bottom + half-of-height-difference, so the centers match
   exactly: 50 + (388 − 265)/2 = 111.5. */
.ce-hero__screen--2 {
  left: 1223px;
  top: auto;
  bottom: 111.5px;
  width: 372px;  /* 338 × 1.10 */
  height: 265px; /* 241 × 1.10 */
}
.ce-hero__screen--2 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ce-hero__screen-veil {
  position: absolute;
  inset: 0;
  /* Full-coverage white veil — fades the back screen evenly across its
     entire surface so it reads as a softer, recessed layer behind screen-1. */
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

/* ───────── Main sections (white .cl-slide) ─────────
   3 columns: bold title, gray tag pills, CSS wireframe placeholder card.
   Columns are ~313px wide with a wide ~100px gutter (Figma main column). */
.ce-main__grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
}
.ce-main__col-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: #2f3031;
}
.ce-main__tags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
}
.ce-main__tags span {
  display: inline-block;
  background: #ededed;
  color: #2f3031;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1;
  padding: 11px 18px;
  border-radius: 8px;
}

/* ------------------------------------------------------------------
   Schema illustrations (Main sections) — exported PNGs.
   Authored at 1500×1220 in _local-only/schemas/export.html and rendered
   to transparent PNGs via headless Chrome (./_local-only/schemas/generate.sh).
   Stickers are baked into the PNG (some overlap the mock). The img scales
   with the column; entrance animation = fade-up, staggered left→right.
   ------------------------------------------------------------------ */
.ce-main__grid .ce-main__col { min-width: 0; }

.ce-schema {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
  /* Entrance: fade up + slight scale. Triggered by .is-in via IntersectionObserver. */
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.ce-schema.is-in {
  opacity: 1;
  transform: none;
}
/* Stagger across the 3 columns — left→right. */
.ce-main__grid .ce-main__col:nth-child(1) .ce-schema { transition-delay: 0ms;   }
.ce-main__grid .ce-main__col:nth-child(2) .ce-schema { transition-delay: 180ms; }
.ce-main__grid .ce-main__col:nth-child(3) .ce-schema { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  .ce-schema { opacity: 1; transform: none; transition: none; }
}

/* Wireframe placeholder cards — pure CSS, scale with column width. */
.ce-wire {
  margin-top: 28px;
  width: 100%;
  aspect-ratio: 313 / 210;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ce-wire__top {
  height: 16%;
  flex-shrink: 0;
  border-bottom: 1px solid #ededed;
}
.ce-wire__body {
  flex: 1;
  display: flex;
}
/* side variant — navy sidebar + 3 stacked bars */
.ce-wire--side .ce-wire__sidebar {
  width: 23%;
  background: #1c2238;
}
.ce-wire__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9%;
  padding: 0 12% 0 9%;
}
.ce-wire__lines span {
  height: 13px;
  border-radius: 3px;
  background: #e3e3e3;
}
/* grid variant — narrow rail + 2×3 cell grid */
.ce-wire--grid .ce-wire__body { background: #f1f1f1; }
.ce-wire--grid .ce-wire__rail {
  width: 17%;
  background: #fafafa;
  border-right: 1px solid #ededed;
}
.ce-wire__cells {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 9%;
  padding: 13% 9%;
}
.ce-wire__cells span {
  background: #fff;
  border-radius: 3px;
}

/* ───────── User research (white .cl-slide) ─────────
   2×2 block grid + a divider rule + a 3-column Output grid. */
.ce-rgrid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 100px;
  row-gap: 52px;
}
.ce-rblock__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: #2f3031;
}
.ce-rblock__nda { color: #2c6edf; }
.ce-rblock__sub {
  margin: 18px 0 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: #2f3031;
}
.ce-rblock__sub span {
  font-weight: 400;
  color: var(--text-muted);
}

/* Bullet lists — shared by research blocks and the Output grid. */
.ce-bullets {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.ce-bullets li {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
  margin: 4px 0;
}
.ce-bullets li::marker { color: #b9b9bb; }
/* "Goal: …" sub-line under each UX-artefact item */
.ce-goal {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
}

.ce-srule {
  margin: 44px 0 0;
  border: 0;
  border-top: 1px solid #e6e6e6;
}
.ce-output-head {
  margin: 32px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--orange-2);
}
.ce-ogrid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
}
.ce-ocol h4 {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: #2f3031;
}

/* ───────── Product-screen sections (white .cl-slide) ─────────
   Two dashboard screenshots side by side, full content-column width.
   Figma node frame is 557×397 → aspect 1.403. */
.ce-screens {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.ce-screens img {
  width: 100%;
  aspect-ratio: 557 / 397;
  object-fit: cover;
  object-position: top left;
  border-radius: 4px;
  box-shadow: 2px 5px 17px 2px rgba(0, 0, 0, 0.15);
  display: block;
}


/* ───────── Responsive ─────────
   ≥1280px — desktop pixel-lock
   900–1280px — tablet: simplified grids, hero stays Figma-composition
   ≤900px — case mobile hero (stacked); body zoom disabled in JS
   ≤700px — grids collapse to single column */
@media (max-width: 900px) {
  /* ───────── Mobile hero ─────────
     Stacked vertical composition: big title, subtitle, screens band, role.
     Triggered at ≤900 because the desktop 1440-frame screens otherwise clip
     against the viewport right edge in the 700–900 zoom zone.

     ┌─────────────────────────────────┐
     │  Empower Your Data              │  order 1 — big title
     │  Research Teams                 │
     │  With seamless access to …      │  order 2 — subtitle
     │  ┌──────────┐                   │  order 3 — screens band
     │  │ screen-1 │   ┌────────┐      │       screen-1 front
     │  │  (BMW)   │   │ screen-2│     │       screen-2 back, peeking
     │  └──────────┘   └────────┘      │
     │  My role: Product Designer …    │  order 4
     └─────────────────────────────────┘ */
  .ce-hero {
    padding-top: var(--nda-h, 64px);
  }
  /* Make the inner the flex container, since title/sub/role live OUTSIDE the
     1440 frame (so they can use viewport-relative left alignment on desktop).
     Mobile flex ordering interleaves text and the screens-frame. */
  .ce-hero__inner {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 24px 28px;
  }
  /* Drop the 1440-centered absolute frame; flow in the column instead. */
  .ce-hero__frame {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    transform: none;
    order: 3; /* screens land between subtitle (order 2) and role (order 4) */
  }
  /* Background lines: centered. Scaled only ×1.2 on mobile — the SVG is an
     image export, so a large scale also fattens the dash strokes; keeping it
     near native size makes the dashes read fine instead of chunky. The hero
     clips with overflow:hidden so the bleed past edges is hidden. */
  .ce-hero__lines {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2170.998px;   /* 1809.182 × 1.2 */
    height: 1517.549px;  /* 1264.624 × 1.2 */
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: 0.45;
    pointer-events: none;
  }
  /* Reset formerly-absolute text children to flow naturally in the flex stack */
  .ce-hero__title,
  .ce-hero__sub,
  .ce-hero__role {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    margin: 0;
  }
  .ce-hero__title {
    font-size: clamp(28px, 6vw, 46px);
    line-height: 1.12;
    white-space: normal;
    order: 1;
  }
  .ce-hero__sub {
    font-size: clamp(16px, 2.6vw, 20px);
    line-height: 1.45;
    width: 100%;
    max-width: 520px;
    order: 2;
    margin-top: 4px;
  }

  /* Screens band — relative wrapper sized to fit both screens with peek-out.
     Children are absolutely positioned and vertically centered against the
     band via inset:0 + margin-block: auto (no transform — keeps parallax
     translate3d clean). */
  .ce-hero__screens {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 470 / 320;
    order: 3;
    margin-top: 8px;
  }
  .ce-hero__screen {
    position: absolute;
    height: auto;
    /* Vertically centered via top:50% + a negative margin-top equal to half
       the rendered height. Percent margin is computed against PARENT WIDTH,
       so we use `width-fraction × aspect-inverse ÷ 2`. (top:0 + bottom:0 +
       margin-block:auto was blocking aspect-ratio sizing on Safari/Chrome
       — height would stretch to fill the band instead.) */
    top: 50%;
    bottom: auto;          /* reset desktop's bottom:0 */
    margin-bottom: 0;      /* reset desktop's margin-block:auto */
  }
  /* Front — left-justified, ~72% of band width.
     half-height = 72% × 353/576 ÷ 2 = ~22% of parent width */
  .ce-hero__screen--1 {
    left: 0;
    right: auto;
    width: 72%;
    aspect-ratio: 576 / 353;
    margin-top: calc(-72% * 353 / 576 / 2);
    z-index: 2;
  }
  /* Back — right-anchored, peeks behind front's right edge.
     half-height = 44% × 241/338 ÷ 2 = ~15.7% of parent width */
  .ce-hero__screen--2 {
    left: auto;
    right: 0;
    width: 44%;
    aspect-ratio: 338 / 241;
    margin-top: calc(-44% * 241 / 338 / 2);
    z-index: 1;
  }
  /* Veil inherits full-coverage from base (.ce-hero__screen-veil) — no overrides. */

  .ce-hero__role {
    order: 4;
    margin-top: 8px;
    font-size: clamp(15px, 2.2vw, 18px);
  }
}

/* Main sections — on tablets (901–1280px) lay each item out horizontally:
   title + pill tags on the left, schematic wireframe on the right. The three
   items stack vertically to keep enough breathing room for the wireframes. */
@media (max-width: 699px) and (min-width: 501px) {
  .ce-main__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .ce-main__col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    align-items: start;
  }
  .ce-main__col-title {
    grid-column: 1;
    grid-row: 1;
  }
  .ce-main__tags {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 10px;   /* tighter than the default 20px */
    min-height: 0;      /* drop the 2-row reservation in the 2-col layout */
  }
  .ce-main__col .ce-wire,
  .ce-main__col .ce-schema {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;      /* align top edge with the title */
    max-width: 420px;
    justify-self: end;
    width: 100%;
  }
}

/* Other grids — stack on mobile; wireframe cards keep aspect ratio. */
@media (max-width: 900px) {
  .ce-rgrid { grid-template-columns: 1fr; column-gap: 0; row-gap: 40px; }
  .ce-ogrid { grid-template-columns: 1fr; gap: 32px; }
  .ce-screens { grid-template-columns: 1fr; gap: 20px; }
}

/* On very small screens collapse the Main sections to a single column too. */
@media (max-width: 500px) {
  .ce-main__grid { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 700px) {
  .ce-ogrid { gap: 28px; }
}