/* =====================================================================
   lverbeeck.com - work.css
   Page-specific styles for the Work listing (work.html) and the
   case-study detail pages (work/*.html). Loaded AFTER base.css.
   Layouts adapted 1:1 from ogakidigital.com reference screenshots:
   - work listing: ogaki-work-top / ogaki-work-grid
   - case detail:  ogaki-case-top / ogaki-case-mid / ogaki-case-results
   ===================================================================== */

/* ==================================================== Work listing hero
   Giant offset serif headline. The small "(WORK)" caps label sits inline
   at the start of the first line; the headline wraps back to the left
   container edge, recreating the reference's offset/overlap look. */
.work-hero {
  padding-top: calc(var(--header-h) + clamp(48px, 11vw, 150px));
  padding-bottom: clamp(56px, 9vw, 130px);
}
.work-hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.55rem, 8.6vw, 8.1rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.work-hero__label {
  display: inline-block;
  vertical-align: middle;
  margin-right: clamp(18px, 3vw, 46px);
  transform: translateY(-.15em);
}
/* right-aligned caps subline, counterpoint to the headline */
.work-hero__sub {
  display: block;
  margin-left: auto;
  margin-top: clamp(56px, 9vw, 122px);
  max-width: 34ch;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(.875rem, 1vw, 1rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ==================================================== Work listing grid
   2 columns, generous row gaps. Cards reuse .card / .img-ph from
   base.css; columns pushed to the container edges like the reference. */
.work-grid-section { padding-bottom: clamp(90px, 13vw, 170px); }
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: clamp(80px, 12vw, 176px);
}
.work-grid .card { width: 100%; max-width: 560px; }
.work-grid .card:nth-child(odd) { justify-self: start; }
.work-grid .card:nth-child(even) { justify-self: end; }

@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; row-gap: clamp(56px, 14vw, 88px); }
  .work-grid .card:nth-child(odd),
  .work-grid .card:nth-child(even) { justify-self: stretch; max-width: none; }
}

/* ============================================ Work listing group dividers
   The listing is split into curated groups (Apps & SaaS / Websites /
   Ecommerce). Each opens with a caps "(LABEL)" and a hairline that runs to
   the container edge, then the same 2-col card grid. */
.work-group + .work-group { margin-top: clamp(90px, 14vw, 176px); }
.work-group-head {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
  margin-bottom: clamp(48px, 8vw, 96px);
}
.work-group-head .label { flex: none; }
.work-group-head .rule { flex: 1; }

/* ==================================================== Under management index
   Compact reference-style rows: domain link left, one-line serif descriptor
   center, caps tag right. Hairline rules top and bottom, like the services
   numbered index. */
.managed-section { padding-bottom: clamp(90px, 13vw, 170px); }
.managed-label { margin-bottom: clamp(16px, 2.4vw, 24px); }
.managed-intro {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 1.4vw + .8rem, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  max-width: 40ch;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.managed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
  align-items: baseline;
  gap: clamp(14px, 3vw, 44px);
  padding-block: clamp(16px, 2.2vw, 24px);
  border-top: 1px solid var(--rule);
}
.managed-row:last-child { border-bottom: 1px solid var(--rule); }
.managed-row__domain {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1vw + .7rem, 1.35rem);
  letter-spacing: -.005em;
  border-bottom: 1px solid var(--rule);
  align-self: baseline;
  justify-self: start;
  transition: border-color .25s var(--ease);
}
.managed-row__domain:hover { border-color: var(--ink); }
.managed-row__desc {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1rem, .5vw + .85rem, 1.15rem);
  line-height: 1.35;
  color: var(--ink-soft);
}
.managed-row__tag {
  justify-self: end;
  text-align: right;
  color: var(--ink-soft);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .managed-row {
    grid-template-columns: 1fr auto;
    row-gap: 6px;
  }
  .managed-row__desc { grid-column: 1 / -1; order: 3; }
  .managed-row__tag { order: 2; }
}

/* ======================================================= Case-study hero
   Split hero: left panel with centered client / title / tags, right side
   a full-bleed image (placeholder mat until captures exist). */
.case-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;               /* image + panel sit centered at their own heights */
  min-height: min(64vh, 560px);      /* floor so very short (wide) heroes keep presence */
}
.case-hero__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(44px, 9vh, 96px);
  padding: calc(var(--header-h) + 32px) clamp(24px, 4vw, 64px) clamp(40px, 6vh, 72px);
}
.case-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.1vw, 2.85rem);
  line-height: 1.16;
  letter-spacing: -.015em;
  max-width: 17ch;
}
.case-hero__tags { max-width: 34ch; }
.case-hero__media { position: relative; }
.case-hero__media .img-ph {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;              /* full bleed - no hairline at the page edges */
}
/* Real split-hero capture: fills a fixed 3:4 portrait frame, cover-cropped
   from the top (never distorted). The --bg-alt backdrop matches the mat so any
   letterbox baked into a capture blends into the page. Uniform across every
   case (app + website), exactly like the roundmark benchmark. */
.case-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  background-color: var(--bg-alt);
}

@media (max-width: 820px) {
  .case-hero { grid-template-columns: 1fr; min-height: 0; }
  .case-hero__panel {
    min-height: min(56vh, 500px);
    gap: clamp(36px, 6vh, 56px);
    padding-top: calc(var(--header-h) + 56px);
  }
  .case-hero__media { height: auto; }
}

/* ==================================================== App case-study hero
   APP cases (not websites): a centred client / title / tags block, then the
   WHOLE dashboard uncropped in a full-width browser frame below. Replaces the
   portrait split hero; websites keep the split hero above. */
.case-hero-app {
  padding-top: calc(var(--header-h) + clamp(40px, 7vw, 96px));
}
.case-hero-app__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 2.4vw, 28px);
  margin-bottom: clamp(40px, 6vw, 76px);
}
.case-hero-app__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  max-width: 20ch;
}
.case-hero-app__tags { max-width: 40ch; color: var(--ink-soft); }

/* app body figure: a TALL MOBILE screen in a minimal phone frame (centre
   column of the case body), pairing the full-desktop browser-frame hero with
   the app's responsive mobile UI. A small caps caption sits under it. */
.case-figure-cap {
  margin-top: clamp(14px, 1.6vw, 20px);
  color: var(--ink-soft);
}

/* -------------------------------------------------- Phone-frame figure
   Portrait device that echoes the .browser hero: hairline ink-lines on cream,
   the same soft shadow, two-tone bezel + screen. Editorial rounded-rect outline,
   not a glossy iPhone render. Wraps a tall mobile screenshot shown top-anchored
   at a true phone aspect so the most important content is never cropped out. */
.phone {
  width: min(300px, 82%);
  margin-inline: auto;
  padding: 9px;
  border: 1px solid var(--rule);
  border-radius: 40px;
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(34, 31, 32, .03), 0 26px 56px -30px rgba(34, 31, 32, .42);
}
.phone__screen {
  border: 1px solid var(--rule);
  border-radius: 30px;
  overflow: hidden;
  background: var(--bg-alt);
}
.phone__img {
  display: block;
  width: 100%;
  aspect-ratio: 390 / 844;      /* true phone screen; uniform across every case */
  object-fit: cover;
  object-position: top;         /* show the top of the screen, never distorted */
  background: var(--bg-alt);
}

/* ======================================================= Case-study body
   3 columns like the reference: copy left, sticky tall image + vertical
   caption center, sticky HIGHLIGHTS stat rail right. */
.case-section { padding-block: clamp(72px, 10vw, 150px); }
.case-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .72fr);
  column-gap: clamp(40px, 6vw, 104px);
  /* columns stretch to full row height so the sticky image + rail
     can travel the whole scroll distance of the copy column */
}

/* --- left column: THE CHALLENGE / THE BUILD / THE RESULTS blocks */
.case-block + .case-block { margin-top: clamp(88px, 13vw, 168px); }
.case-block > .label { margin-bottom: clamp(18px, 2.5vw, 28px); }
.case-rich {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.45vw, 1.45rem);
  line-height: 1.4;
  letter-spacing: -.005em;
}
.case-rich p + p, .case-rich ul { margin-top: 1em; }
.case-rich ul { list-style: none; padding: 0; }
.case-rich li { position: relative; padding-left: 1.6em; }
.case-rich li + li { margin-top: .55em; }
.case-rich li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: 16px;
  height: 1px;
  background: var(--ink);
}

/* --- center column: sticky tall image + rotated caps caption */
.case-media__inner { position: sticky; top: calc(var(--header-h) + 28px); }
.case-figure { position: relative; margin-right: clamp(34px, 3vw, 50px); }
.img-ph--case { aspect-ratio: 9 / 16; }
/* Real sticky figure capture: same fixed 3:4 cover frame as the hero, drawn
   from a second content-rich screen. Cover-cropped from the top over --bg-alt. */
.case-figure__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  background-color: var(--bg-alt);
}
/* vertical caption: reads bottom-to-top, anchored to the image top edge,
   exactly like the reference (client soft, then title) */
.case-caption {
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  margin-left: 14px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: end;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(.7rem, .75vw, .8125rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.case-caption__client {
  color: var(--ink-soft);
  margin-inline-end: 1.2em;
}

/* --- right column: HIGHLIGHTS rail, sticky on desktop */
.case-rail__inner {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  max-width: 260px;
  margin-inline: auto;
}
.case-rail__head { text-align: center; margin-bottom: clamp(44px, 6vw, 88px); }
.case-stat {
  text-align: center;
  border-bottom: 1px solid var(--rule);
  padding: clamp(20px, 2.6vw, 30px) 8px clamp(18px, 2.4vw, 26px);
}
.case-stat:first-child { padding-top: 0; }
.case-stat__value {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 2.5vw, 2.55rem);
  line-height: 1;
  letter-spacing: -.01em;
}
.case-stat__label { margin-top: 12px; line-height: 1.45; }

/* --- VISIT LIVE link */
.case-visit { text-align: center; padding-bottom: clamp(56px, 9vw, 128px); }

/* ------------------------------------------------------ Case responsive:
   single column; image then stat rail stack UNDER the copy. */
@media (max-width: 900px) {
  .case-body { grid-template-columns: 1fr; row-gap: clamp(64px, 12vw, 96px); }
  .case-media__inner { position: static; max-width: 440px; }
  .case-rail__inner { position: static; max-width: 320px; margin-inline: 0; }
  .case-rail__head { text-align: left; }
  .case-stat { text-align: left; padding-left: 0; }
}