/* ========================================================================
   DIRECTION PAGES — Retail / Business / Brands / Films
   Long-scroll editorial portfolio pages. One shared system (this file +
   js/direction-page.js + a per-direction data file) so Business/Brands/
   Films can reuse it once their content is ready.
   ======================================================================== */

.direction-page {
  padding-top: var(--nav-height);
}

/* ---- Intro: functional links (left) + title/tagline/text (right) ---- */
.direction-intro {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-7);
}

.direction-intro__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6em;
  align-self: start;
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
}

.direction-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  width: max-content;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  padding: 0.7em 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  transition: background var(--dur-fast) var(--ease-editorial), color var(--dur-fast) var(--ease-editorial), border-color var(--dur-fast) var(--ease-editorial);
}

.direction-link:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.direction-link.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ---- Client logo strip: compact vertical column of small black
   logos below the functional links. Height-normalized, natural width. ---- */
.client-strip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1em;
  margin-top: var(--space-4);
}

.client-strip__item {
  display: block;
  line-height: 0;
}

.client-strip__item img {
  display: block;
  height: auto;
  width: auto;
  max-height: 20px;
  /* IKEA's own rendered width at max-height — every other mark is capped to
     this footprint so an unusually wide wordmark (G-STAR RAW, EURODECOR,
     L'Etoile, No One, Underline) can't visually outweigh the reference. */
  max-width: 112px;
  transition: transform var(--dur-fast) var(--ease-editorial);
  transform-origin: left center;
}

.client-strip__item:hover img {
  transform: scale(1.15);
}

.direction-intro__back {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  opacity: 0.55;
  margin-bottom: var(--space-2);
  display: inline-block;
}
.direction-intro__back:hover { opacity: 1; }

.direction-intro__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-lg);
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.direction-intro__tagline {
  font-weight: 700;
  /* Same intro body-text scale as BRANDS (css/brands.css scopes this
     same clamp to .brands-page only, since it got there first — this is
     now the shared default so RETAIL/BUSINESS/FILMS read as the same
     typographic system instead of a bigger, separate scale). Hero
     titles (--fs-display-lg above) are untouched. */
  font-size: clamp(0.92rem, 0.83rem + 0.42vw, 1.2rem);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-3);
  max-width: 38rem;
}

.direction-intro__body {
  max-width: 42rem;
}
.direction-intro__body p {
  font-size: clamp(0.92rem, 0.83rem + 0.42vw, 1.2rem);
  line-height: var(--lh-relaxed);
  margin-bottom: 1em;
}
.direction-intro__body p:last-child { margin-bottom: 0; }

.direction-intro__clients-intro {
  margin-top: var(--space-3);
  max-width: 42rem;
  font-weight: 400;
  font-size: clamp(0.92rem, 0.83rem + 0.42vw, 1.2rem);
  line-height: var(--lh-relaxed);
}
.direction-intro__clients-intro + .direction-intro__clients {
  margin-top: var(--space-2);
}

.direction-intro__clients {
  margin-top: var(--space-3);
  max-width: 42rem;
  font-weight: 700;
  font-size: clamp(0.92rem, 0.83rem + 0.42vw, 1.2rem);
  line-height: var(--lh-relaxed);
}

/* ========================================================================
   PORTFOLIO — shared LEFT | RIGHT row primitive, two different characters:
   - Retail (editorial/asymmetric): rows carry `emphasis` + duo/solo zones,
     modeled on retail-design.ru (references/*.png) — a deliberately uneven
     "2 small + 1 large" / "1 + 1" / "1 large + 2 small" rhythm.
   - Business (structured/geometric): rows are just two solo zones with no
     emphasis, which already renders as a strict even 1fr/1fr grid — every
     photo the same visual size, rows aligned across the page.
   ======================================================================== */
.pf-composition {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 2rem + 2.5vw, 5rem);
  padding-bottom: var(--space-7);
}

.pf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.pf-row--emphasis-left { grid-template-columns: 1.5fr 1fr; }
.pf-row--emphasis-right { grid-template-columns: 1fr 1.5fr; }

.pf-zone--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.pf-project__figure {
  display: block;
  overflow: hidden;
  background: var(--color-pale-grey-soft);
}
.pf-project__figure img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 550ms var(--ease-editorial);
}
.pf-project__figure[style*="--ar"] {
  aspect-ratio: var(--ar);
}
.pf-project__figure[style*="--ar"] img {
  height: 100%;
  object-fit: cover;
  object-position: var(--op, center);
}
/* Premium, clean hover: image scales slightly inside its fixed-size
   container — nothing else moves, no dimming. */
.pf-project__figure:hover img {
  transform: scale(1.045);
}

.pf-caption {
  margin-top: 0.7em;
  text-align: left;
}
.pf-caption__brand {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--color-black);
}
.pf-caption__desc {
  margin-top: 0.15em;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--color-black);
}

/* ---- Case-intro row (Business: M&W / Woodi Bureau openers) — one side
   is a plain photo, the other adds a small logo + name/years caption
   above/below it. Same .pf-row / .pf-project__figure primitives as the
   regular grid, just with this extra meta block on one cell. ---- */
.pf-intro-case {
  display: flex;
  flex-direction: column;
}
.pf-intro-case__meta {
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6em;
}
.pf-intro-case__logo {
  display: block;
  height: 36px;
  width: auto;
}
.pf-intro-case__meta .pf-caption {
  margin-top: 0;
}

/* ---- Video slots — sit inside the same pf-project__figure/--ar card as a
   photo (locked 16:9, object-fit: cover) so a video never looks like a
   bare browser player breaking the grid. No source yet = the figure's own
   background shows through, clean, no placeholder image — same "clean
   until a source exists" approach as Films on the homepage. Excluded from
   the hover-zoom (native controls, not a passive image). ---- */
.pf-project__figure[style*="--ar"] video {
  height: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--op, center);
}

/* ---- Mid-page editorial CTA ---- */
.pf-cta {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-4);
}
.pf-cta__lead {
  font-size: var(--fs-heading);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-3);
}
.pf-cta__sub {
  font-size: var(--fs-body-lg);
  opacity: 0.75;
  margin-bottom: var(--space-4);
}

/* ---- End of page ---- */
.direction-end {
  padding-block: var(--space-5) var(--space-6);
  text-align: center;
  border-top: 1px solid var(--color-border);
}
.direction-end__back {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  transition: opacity var(--dur-fast) var(--ease-editorial);
}
.direction-end__back:hover { opacity: 0.6; }

/* Compact cross-links between the 4 direction pages — same row on
   desktop and mobile, no separate layout for either. */
.direction-explore {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.direction-explore__label {
  opacity: 0.55;
  margin-right: 0.5em;
}
.direction-explore__current {
  color: var(--color-accent);
}
.direction-explore__link {
  transition: opacity var(--dur-fast) var(--ease-editorial);
}
.direction-explore__link:hover { opacity: 0.6; }
.direction-explore__sep {
  display: inline-block;
  opacity: 0.4;
  margin-inline: 0.4em;
}

@media (max-width: 900px) {
  .direction-intro { grid-template-columns: 1fr; gap: var(--space-4); }
  /* Single column now stacks DOM order (links + a long client-logo list)
     above the title/tagline/body — burying the headline under ~20 logos
     before a reader ever reaches it. Reorder visually so the title reads
     first, same content and markup either way. */
  .direction-intro__links { position: static; order: 2; }
  .direction-intro__main { order: 1; }
  .pf-row { grid-template-columns: 1fr; gap: var(--space-3); }
}

@media (max-width: 600px) {
  /* A "duo" zone (two side-by-side case photos) still forces 2 columns
     inside an already-narrow single-column row, shrinking each photo to
     ~150px with cramped captions. Stack them full-width on phones. */
  .pf-zone--duo { grid-template-columns: 1fr; }
}

/* ========================================================================
   LAPTOP / LOW-HEIGHT DESKTOP — same breakpoint and rationale as the
   homepage (see profile.css): 1100-1440px wide, up to 900px tall (e.g.
   1366x768 at 100% zoom). Shared here across Retail/Business/Films/Brands
   since they all reuse this file's intro + portfolio system. Large
   desktop is untouched.
   ======================================================================== */
@media (min-width: 1100px) and (max-width: 1440px) and (max-height: 900px) {
  .direction-intro { gap: 4.84rem; padding-block: 4.84rem 7rem; }
  .direction-intro__title { font-size: clamp(2.2rem, 1.4rem + 4.35vw, 5.7rem); }

  .pf-composition { gap: clamp(2.1rem, 1.7rem + 2.13vw, 4.25rem); }

  /* A solo portrait/hero-style photo at ar:3/4 (or similar) otherwise
     renders taller than the viewport itself on a small laptop screen —
     cap it so no single image forces an extra scroll of its own. Small
     duo photos are already well under this cap and are unaffected. */
  .pf-project__figure[style*="--ar"] { max-height: 68vh; }
}