/* ---------------------------------------------------------------------------
   RUKÁ case-study pages.

   Layout: a half-height brand-colour header (project name + categories), a
   white two-column THE BRIEF / THE SOLUTION block, the image gallery, then the
   next-project band.

   Type: Unbounded Medium, uppercase, for the project name, block labels and
   the next-project band. Manrope for the categories and all body copy.

   --u is one design pixel for the gallery blocks that were drawn on the 1400px
   Figma frame: it tracks the viewport below 1400 and locks at 1px above.
   Photos always keep their own aspect ratio — no fixed-ratio boxes, no
   object-fit: cover, nothing cropped.
--------------------------------------------------------------------------- */

:root {
  --u: min(1px, 0.07143vw);            /* 100vw / 1400 */
  --gut: clamp(24px, 5.72vw, 80px);    /* page gutter, 80px at 1400 and up */
  --pink: #FA1A63;
}

/* Header ink, and the navbar colours that ride on top of it. Pages with a pale
   brand colour (#F7B4C8, #B6B6B9) set .head-light on <body> to flip all of it:
   the pink logo and pink pill are both illegible on those two headers, so the
   white logo art is filtered to black and the pill goes ink until the navbar
   scrolls onto its own opaque background. */
body {
  --head-ink: #ffffff;
  --nav-ink: #faf7f4;
  --logo-white-op: 1;
  --logo-pink-op: 0;
  --logo-filter: none;
  --pill-bg: #FA1A63;
  --pill-bg-hover: #c9124d;
  --pill-ink: #ffffff;
}
body.head-light {
  --head-ink: #0f0f0f;
  --nav-ink: #0f0f0f;
  --logo-white-op: 1;
  --logo-pink-op: 0;
  --logo-filter: brightness(0);
  --pill-bg: #0f0f0f;
  --pill-bg-hover: #000000;
  --pill-ink: #ffffff;
}

/* Kvitka's header is itself pink, so the pink pill would vanish into it: the
   pill goes white with pink ink until the navbar scrolls onto its own ground. */
body.pill-light {
  --pill-bg: #ffffff;
  --pill-bg-hover: #FFC9DE;
  --pill-ink: #E85193;
}

.case { background: #fff; color: #0f0f0f; }

.case-inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--gut);
  width: 100%;
}

/* --- header --------------------------------------------------------------- */
.case-head {
  min-height: 50vh;
  display: flex;
  align-items: flex-end;
  background: var(--brand);
  color: var(--head-ink);
  padding-block: clamp(96px, 12vh, 160px) clamp(34px, 5vh, 68px);
}
.case-head h1 {
  font-family: 'Unbounded', 'Clash Display', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(2rem, 6.4vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}
.case-head .cats {
  font-family: 'Manrope', 'Satoshi', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(11px, 1.07vw, 15px);
  letter-spacing: 0.16em;
  line-height: 1.5;
  margin: clamp(16px, 1.9vw, 26px) 0 0;
}

/* --- THE BRIEF / THE SOLUTION -------------------------------------------- */
.case-text {
  background: #fff;
  padding-block: clamp(48px, 6.6vw, 104px);
}
.case-text .case-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}
.case-text h2 {
  font-family: 'Unbounded', 'Clash Display', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(12px, 1.07vw, 15px);
  letter-spacing: 0.16em;
  line-height: 1.4;
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  color: #0f0f0f;
}
.case-text p {
  font-family: 'Manrope', 'Satoshi', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.29vw, 18px);
  line-height: 1.68;
  margin: 0;
  color: #2f2b28;
}

/* --- gallery -------------------------------------------------------------- */
.case-band > img,
.case-split > img { display: block; width: 100%; height: auto; }
.case-split { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
/* Kvitka and Refugees comps split these rows at x=703 of 1400, not the middle */
.case-split.split-703 { grid-template-columns: 703fr 697fr; }

/* BiMB wordmark lockup (Figma "1st case" section 2, captions removed) */
.bimb-mark {
  background: #32A638;
  padding: calc(44 * var(--u)) var(--gut) calc(60 * var(--u));
}
.bimb-mark img {
  display: block;
  width: calc(1078 * var(--u));
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Forma colour palette (Figma "2st case" section 3, hex labels removed) */
.forma-palette { position: relative; height: calc(800 * var(--u)); }
.forma-palette .cell { position: absolute; }
.forma-palette .f-ink   { left: 0; top: 0; width: calc(1002 * var(--u)); height: calc(284 * var(--u)); background: #192018; }
.forma-palette .f-sand  { left: 0; top: calc(284 * var(--u)); width: calc(1002 * var(--u)); height: calc(516 * var(--u)); background: #D8D2C1; }
.forma-palette .f-olive { left: calc(1002 * var(--u)); top: 0; width: calc(398 * var(--u)); height: calc(560 * var(--u)); background: #87803E; }
.forma-palette .f-brown { left: calc(1002 * var(--u)); top: calc(560 * var(--u)); width: calc(398 * var(--u)); height: calc(240 * var(--u)); background: #492A14; }
.forma-palette .f-gold  { left: calc(832 * var(--u)); top: calc(114 * var(--u)); width: calc(340 * var(--u)); height: calc(340 * var(--u)); border-radius: 50%; background: #C7A22B; }

/* Aster Filtration (Figma "6st case" sections 3, 4, 6, 7 — captions removed) */
/* The white logo lives inside .plate so it keeps its navy ground when the
   mobile rules below unstack the band — white art on white would vanish. */
.aster-logos { position: relative; height: calc(356 * var(--u)); background: #fff; }
.aster-logos .plate {
  position: absolute; left: calc(40 * var(--u)); top: 0;
  width: calc(630 * var(--u)); height: calc(324 * var(--u)); background: #003168;
}
.aster-logos img { position: absolute; display: block; height: auto; }
.aster-logos .mark-white { left: calc(115 * var(--u)); top: calc(74 * var(--u)); width: calc(391 * var(--u)); }
.aster-logos .mark-blue  { left: calc(848 * var(--u)); top: calc(71 * var(--u)); width: calc(398 * var(--u)); }

/* The comp filled the left of this band with a "#013466" caption and cropped the
   palette card down to the two drops. With the caption gone the card is shown
   whole and larger instead, so it carries the band and its own hex labels read. */
.aster-swatch { background: #003168; display: flex; justify-content: flex-end; }
.aster-swatch img { width: calc(560 * var(--u)); height: auto; display: block; }

.aster-parts {
  display: grid;
  grid-template-columns: calc(731 * var(--u)) 1fr;
  align-items: center;
  background: #fff;
  padding: calc(40 * var(--u)) calc(88 * var(--u));
  gap: calc(40 * var(--u));
}
.aster-parts img { display: block; width: 100%; height: auto; }
.aster-parts .diagram { width: calc(581 * var(--u)); max-width: 100%; }

.aster-pack { background: #003168; padding: calc(97 * var(--u)) calc(127 * var(--u)); }
.aster-pack img { display: block; width: 100%; height: auto; }

/* --- next project band ---------------------------------------------------- */
/* Shares the footer's black, with no rule between them, so the two read as one
   continuous block closing the page. Only the ink moves on hover. */
.next-project {
  display: block;
  background: #0f0f0f;
  color: #ffffff;
  text-decoration: none;
  transition: color .4s cubic-bezier(.16,1,.3,1);
}
.next-project .case-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 56px);
  padding-block: clamp(52px, 6.4vw, 100px) clamp(44px, 5.4vw, 84px);
}
.next-project .np-label {
  display: block;
  font-family: 'Manrope', 'Satoshi', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(11px, 1.07vw, 15px);
  letter-spacing: 0.16em;
  line-height: 1.4;
  margin-bottom: clamp(12px, 1.3vw, 20px);
}
.next-project .np-name {
  display: block;
  font-family: 'Unbounded', 'Clash Display', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 5.4vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.next-project .np-arrow {
  flex: none;
  width: clamp(52px, 5.6vw, 84px);
  height: auto;
  margin-bottom: clamp(8px, 1.1vw, 18px);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.next-project:hover,
.next-project:focus-visible { color: var(--pink); }
.next-project:focus-visible { outline: 2px solid var(--pink); outline-offset: -8px; }
.next-project:hover .np-arrow,
.next-project:focus-visible .np-arrow { transform: translateX(14px); }

/* --- phones and small tablets --------------------------------------------- */
@media (max-width: 860px) {
  :root { --u: 1px; }

  .case-head { min-height: 44vh; padding-block: 108px 30px; }
  .case-text .case-inner { grid-template-columns: 1fr; gap: 34px; }

  .case-split,
  .case-split.split-703 { grid-template-columns: 1fr; }

  .bimb-mark { padding: 40px 24px 48px; }
  .bimb-mark img { width: 100%; }

  /* the absolutely-placed compositions restack into plain stacked blocks */
  .forma-palette { height: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .forma-palette .cell {
    position: static; width: auto !important; height: auto !important;
    border-radius: 0; min-height: 104px;
  }
  .forma-palette .f-gold { grid-column: span 2; }

  .aster-logos { height: auto; display: block; }
  .aster-logos .plate {
    position: static; width: 100%; height: auto;
    padding: 38px 24px; display: flex; justify-content: center;
  }
  .aster-logos .mark-white { position: static; width: 72%; }
  .aster-logos .mark-blue { position: static; display: block; width: 72%; margin: 38px auto; }

  .aster-swatch img { width: 78%; }

  .aster-parts { grid-template-columns: 1fr; justify-items: center; padding: 24px; gap: 20px; }
  .aster-parts img { width: 70%; }
  .aster-parts .diagram { width: 70%; }

  .aster-pack { padding: 24px; }

  .next-project .case-inner { padding-block: 46px 40px; gap: 18px; }
  .next-project .np-name { font-size: 26px; }
  .next-project .np-arrow { width: 46px; margin-bottom: 4px; }
}