/* ==========================================================================
   zejneba.com — Work page (work.html)
   --------------------------------------------------------------------------
   1. Hero
   2. Project stack (sticky cards that slide over each other)
   3. Project card
   4. Side rail (lines that show where you are)
   5. Responsive
   ========================================================================== */


/* 1. Hero
   ========================================================================== */

/* Same layout as the About and Blog heroes */
.work-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 192px 24px 112px;
  text-align: center;
}

.work-hero h1 {
  max-width: 900px;
  color: var(--base-black);
}

.work-hero__intro {
  max-width: 720px;
  color: var(--neutral-muted);
}


/* 2. Project stack
   --------------------------------------------------------------------------
   Every project is a full screen. Each one sticks to the top and the next
   one slides up from below and covers it, like a new screen.
   js/work.js sets --depth on each card (0 = on top, 1 = covered), which
   shrinks it a little, rounds its corners and darkens it while it goes under.
   ========================================================================== */

.work-stack {
  position: relative;
  padding-bottom: 120px;   /* space before the footer, same as the other pages */
}

.work-stack__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-card {
  --depth: 0;
  --covered: min(var(--depth), 1);
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--card-bg);
  color: var(--card-text);
  transform-origin: 50% 0;
  scale: calc(1 - var(--covered) * 0.06);
  border-radius: calc(var(--covered) * var(--radius-3xl));
  filter: brightness(calc(1 - var(--covered) * 0.35));
  will-change: scale, filter;
}

.work-card + .work-card {
  box-shadow: 0 -24px 60px rgba(20, 20, 20, 0.18);
}

/* Completely covered by the next card (js/work.js): not drawn at all */
.work-card.is-buried {
  visibility: hidden;
  will-change: auto;
}


/* 3. Project card
   ========================================================================== */

.work-card--black {
  --card-bg: var(--base-black);
  --card-panel: var(--base-black-card);
  --card-text: var(--base-white);
  --card-muted: rgba(255, 255, 255, 0.62);
  --card-line: rgba(255, 255, 255, 0.14);
  --card-logo-filter: invert(0.97);
}

.work-card--grey {
  --card-bg: var(--neutral-grey-100);
  --card-panel: var(--brand-fog);
  --card-text: var(--base-black);
  --card-muted: var(--neutral-muted);
  --card-line: var(--neutral-line);
  --card-logo-filter: none;
}

.work-card--olive {
  --card-bg: var(--scale-olive-900);
  --card-panel: var(--scale-olive-800);
  --card-text: var(--base-white);
  --card-muted: rgba(255, 255, 255, 0.64);
  --card-line: rgba(255, 255, 255, 0.16);
  --card-logo-filter: invert(0.95) sepia(0.15);
}

/* Pure black, like the Velar site, so the screen recording blends into the card */
.work-card--velar {
  --card-bg: #000;
  --card-panel: #000;
  --card-text: var(--base-white);
  --card-muted: rgba(255, 255, 255, 0.64);
  --card-line: rgba(255, 255, 255, 0.16);
  --card-logo-filter: invert(1);
}

.work-card__inner {
  display: grid;
  --text-col: clamp(280px, 24vw, 360px);   /* narrow text column, the screen takes the rest */
  grid-template-columns: minmax(0, 1fr) var(--text-col);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  width: min(1320px + var(--content-extra), 100% - 176px);   /* sides: room for the rail */
  height: 100%;
  margin: 0 auto;
  padding: 112px 0 48px;   /* top: room for the floating nav */
}

/* Left: the screen */
.work-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(100%, 700px);
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-3xl);
  corner-shape: var(--corner-shape);
  background: var(--card-panel);
}

.work-card__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}

/* Centred crop, for images with the subject in the middle (STOKR laptop) */
.work-card__shot--center {
  object-position: 50% 50%;
}

.work-card__visual-logo {
  width: 46%;
  height: auto;
  filter: var(--card-logo-filter);
  opacity: 0.9;
}

/* Right: the text */
.work-card__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.work-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--card-line);
}

.work-card__index {
  color: var(--card-muted);
}

.work-card__logo {
  width: auto;
  height: 22px;
  filter: var(--card-logo-filter);
}

.work-card__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.work-card__desc {
  color: var(--card-muted);
}

.work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.work-card__tags .tag {
  border-color: var(--card-line);
  color: var(--card-muted);
}

/* Flipped card: text on the left, screen on the right (the STOKR close-ups) */
.work-card--reverse .work-card__inner {
  grid-template-columns: var(--text-col) minmax(0, 1fr);
}

.work-card__eyebrow {
  color: var(--card-text);
}

.work-card__count {
  color: var(--card-muted);
}

/* Whole image, no cropping: the panel takes the image's own shape */
.work-card__visual--fit {
  height: auto;
  max-height: 100%;
}

.work-card__visual--fit .work-card__shot {
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Portrait video: the panel takes the video's shape (--ratio) and sits centred */
.work-card__visual--tall {
  justify-self: center;
  width: auto;
  height: min(100%, 700px);
  aspect-ratio: var(--ratio);
}

.work-card__visual--tall .work-card__shot {
  object-fit: cover;
  object-position: 50% 50%;
}


/* 4. Side rail
   --------------------------------------------------------------------------
   Fixed on the right, only while the stack is on screen. Small lines only; the
   active one is longer and dark. The name shows only while hovering a line.
   ========================================================================== */

.work-rail {
  position: fixed;
  top: 50%;
  right: 24px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  translate: 8px -50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out);
}

.work-rail.is-visible {
  translate: 0 -50%;
  opacity: 1;
  pointer-events: auto;
}

.work-rail__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 0 4px 10px;   /* a bigger hover target than the line itself */
  color: var(--neutral-muted);
  text-decoration: none;
}

.work-rail__label {
  position: absolute;
  top: 50%;
  right: calc(100% + 4px);
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--base-white);
  box-shadow: 0 2px 10px rgba(20, 20, 20, 0.12);
  color: var(--base-black);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: 6px -50%;
  transition: opacity var(--duration-fast) var(--ease-out), translate var(--duration-fast) var(--ease-out);
}

.work-rail__line {
  display: block;
  width: 8px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--neutral-subtle);
  opacity: 0.7;
  transition: width var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out);
}

.work-rail__item:hover .work-rail__label,
.work-rail__item:focus-visible .work-rail__label {
  opacity: 1;
  translate: 0 -50%;
}

.work-rail__item:hover .work-rail__line {
  width: 14px;
  opacity: 1;
}

.work-rail__item[aria-current="true"] {
  color: var(--base-black);
}

/* Over a dark screen the lines turn light (data-tone set by js/work.js) */
.work-rail[data-tone="dark"] .work-rail__item { color: rgba(255, 255, 255, 0.6); }
.work-rail[data-tone="dark"] .work-rail__line { background: rgba(255, 255, 255, 0.5); }
.work-rail[data-tone="dark"] .work-rail__item[aria-current="true"] { color: var(--base-white); }
.work-rail[data-tone="dark"] .work-rail__item[aria-current="true"] .work-rail__line { background: var(--base-white); }

.work-rail__item[aria-current="true"] .work-rail__line {
  width: 20px;
  background: var(--base-black);
  opacity: 1;
}


/* 5. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .work-card__inner { --text-col: 260px; width: calc(100% - 128px); }
}

@media (max-width: 960px) {
  .work-card__inner { --text-col: 240px; gap: 32px; width: calc(100% - 112px); }
  .work-rail { right: 16px; }
  .work-card__content { gap: 28px; }
  .work-card__title { font-size: 28px; line-height: 36px; }
}

/* Phone: screen on top, text below, one full-width block after another */
@media (max-width: 760px) {
  .work-hero { gap: 24px; padding: 136px var(--grid-margin) 72px; }
  .work-hero h1 { font-size: 44px; line-height: 48px; }

  .work-stack { padding-bottom: 80px; }

  .work-card {
    position: static;
    height: auto;
    scale: 1;
    border-radius: 0;
    filter: none;
    box-shadow: none !important;
  }

  .work-card__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    width: calc(100% - 2 * var(--grid-margin));
    padding: 56px 0;
  }

  .work-card__visual { height: auto; aspect-ratio: 4 / 3; }
  .work-card__visual--fit { aspect-ratio: auto; }
  .work-card__visual--tall { width: min(100%, 420px); height: auto; aspect-ratio: var(--ratio); }

  /* Flipped cards: screen still on top on phones */
  .work-card--reverse .work-card__inner { grid-template-columns: 1fr; }
  .work-card--reverse .work-card__visual { order: -1; }
  .work-card__title { font-size: 24px; line-height: 32px; }

  .work-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .work-card { scale: 1; border-radius: 0; filter: none; }
}