/* 2.4.6 — literal sweep: a literal whose value IS a token became it; the rest is a value this
   file paints by hand and is counted in the report. The names are global-2026.css's own aliases (2.4.2); a value only the system holds is written --pui-*. */
/* =========================================================================
   PAGE: CASE STUDIES HUB (public/cases/index.blade.php) — page-specific CSS.
   Linked from the view's @section('css'). All rules scoped under .page-cases.
   Eyebrow (global) + heading, "trusted by" client-logos strip, and the
   DYNAMIC grid of case cards (3 cols desktop/tablet, 2 cols mobile),
   plus tablet + mobile responsive overrides.

   Breakpoints (project-wide):
     mobile  : width < 768
     tablet  : 768 .. 1023
     desktop : width >= 1024  (Figma artboard 1512, content 1296)
   ========================================================================= */

/* ---------- Anti-cascade overrides (defeat layout.min.css + bootstrap.min.css) ---------- */
/* 2.4.2 — guard: the page's anti-cascade resets (`button`, `a:link…`) outrank a one-class component (0,1,1 / 0,2,1 over
   0,1,0); they now skip any element carrying a pui- class (inside :where(), so their specificity is unchanged — D60) and the package paints its own. */
.page-cases a:where(:not([class*="pui-"])):link,
.page-cases a:where(:not([class*="pui-"])):visited,
.page-cases a:where(:not([class*="pui-"])):hover,
.page-cases a:where(:not([class*="pui-"])):focus,
.page-cases a:where(:not([class*="pui-"])):active { color: inherit; text-decoration: none; }

.page-cases button:where(:not([class*="pui-"])) {
  font-family: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.page-cases img { display: block; max-width: 100%; }

.page-cases .container {
  width: 1320px;
  max-width: 1320px;
  padding-left: var(--pui-space-12);
  padding-right: var(--pui-space-12);
  margin-left: auto;
  margin-right: auto;
  position: relative;
}


/* ---------- Sticky footer: footer sits at viewport bottom on short pages ---------- */
.page-cases {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.page-cases .cases-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: var(--page-top);   /* the eyebrow's line — --page-top in global-2026.css (132 / 116 / 96), no per-breakpoint line */
  padding-bottom: 0;
}
.page-cases .cases-main > div.container:first-of-type {
  margin-bottom: var(--pui-space-64);
}
/* The footer comes from @include('blocks.footer-2026') (a .footer-2026 wrapper),
   not the prototype's old .footer-wrap. margin-top:auto pushes it to the bottom. */
.page-cases .cases-main > .footer-2026 {
  margin-top: auto;
}

/* Eyebrow uses the global .page-eyebrow class (global-2026.css) — do not fork. */

/* ===========================================================
   HERO — heading + subtitle
   =========================================================== */
.page-cases .cases-hero {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Desktop: 860px. The Figma frame was 746px, which fitted the old shorter
     heading. The Jul 2026 copy ("Success Stories Powered by Mobupps") needs
     752px to stay on one line, and the new subtitle only breaks to two lines
     at >=820px — measured at 1440. 860 clears both with slack for minor copy
     edits and still reads as a contained block inside the 1320px container.
     Tablet/mobile keep the original 746px cap (see the 1023px query below). */
  max-width: 860px;
  margin-bottom: var(--pui-space-20);
}
.page-cases .pui-text--headline-small {
  margin: 0;
}
.page-cases :where(.cases-hero) > .pui-text--body-large {
  margin: 0;
  color: var(--pui-text-subtle);
}

/* ===========================================================
   CLIENT LOGOS STRIP — "trusted by" row of brand logos
   =========================================================== */
.page-cases .cases-clients {
  padding: var(--pui-space-12) 0;
  margin-bottom: var(--pui-space-32);
}
.page-cases .cases-clients__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pui-space-24);
}
.page-cases .cases-clients__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* SVGs scale by aspect ratio, so we only pin each logo's HEIGHT (--ch);
   width follows. Tablet/mobile scale every logo by one factor below. */
.page-cases .cases-clients__logo img {
  width: auto;
  height: var(--ch, 26px);
  filter: brightness(0);   /* logos reuse the colour home-2026 review SVGs — force solid black */
}
/* Behefun is an inline <svg> (recoloured in markup), so it isn't matched by the
   img rule above — size it the same way and exempt it from the brightness filter. */
.page-cases .cases-clients__logo svg {
  display: block;
  width: auto;
  height: var(--ch, 26px);
}
.page-cases .client--socar       { --ch: 17px; }  /* bold wordmark fills full box; tuned down to balance optical weight vs peers */
.page-cases .client--viber       { --ch: 28px; }
.page-cases .client--moniepoint  { --ch: 25px; }
.page-cases .client--favbet      { --ch: 16px; }
.page-cases .client--adcash      { --ch: 19px; }
.page-cases .client--behefun     { --ch: 23px; }
.page-cases .client--trevo       { --ch: 21px; }

/* ===========================================================
   CASE CARDS GRID (DYNAMIC) — 3 columns desktop + tablet
   =========================================================== */
.page-cases .cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px 22px;          /* row-gap  column-gap */
}

.page-cases :where(.cases-grid) .pui-card {
  justify-content: space-between;   /* when a row grows (a title wraps), the extra
                                       height opens between image and logo+text */
  /* the inset is the block's (preview-card, global-2026.css) — 2026-10-05 */
  /* B — the white box, the 1 px border/default line and radius 16 are .pui-card--border (the blog card's mapping); `padding: 20px 20px 0` stays — the grid is built on 20 (stated); the card's own gap (12) now separates image and foot */
}

.page-cases .pui-card__media {
  width: 100%;
  aspect-ratio: 376 / 300;
  /* B — the 8 radius and the crop are .pui-card__media; the site's 376/300 aspect stays */
}


/* =========================================================================
   TABLET — 768 .. 1023  (3-col grid, smaller cards/logos)
   ========================================================================= */
@media (max-width: 1023px) {
  .page-cases .container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--pui-space-32);
    padding-right: var(--pui-space-32);
  }

  .page-cases .cases-main > div.container:first-of-type { margin-bottom: var(--pui-space-48); }

  /* Client logos shrink ~0.805x vs desktop (Figma tablet sizes). */
  .page-cases .cases-clients__logo img { height: calc(var(--ch, 26px) * 0.805); }

  .page-cases .cases-grid { grid-template-columns: repeat(2, 1fr); gap: var(--pui-space-20); }   /* 2-up on tablet (3 only on desktop) */

  .page-cases .pui-card__media { aspect-ratio: 219 / 167.6; }
}

/* =========================================================================
   MOBILE — <768  (1-col grid, logos wrap to 4 + 3, 20px arrow)
   ========================================================================= */
@media (max-width: 767px) {
  .page-cases .container { padding-left: var(--pui-space-16); padding-right: var(--pui-space-16); }

  .page-cases .cases-main > div.container:first-of-type { margin-bottom: var(--pui-space-32); }

  /* Below desktop the heading wraps anyway — keep the original Figma cap so
     tablet/mobile render exactly as before the desktop widening above. */
  .page-cases .cases-hero { max-width: 746px; margin-bottom: var(--pui-space-16); }

  /* Logos wrap onto two centered rows (4 + 3). */
  .page-cases .cases-clients { margin-bottom: var(--pui-space-20); }
  .page-cases .cases-clients__row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 28px;
  }
  .page-cases .cases-clients__logo img { height: calc(var(--ch, 26px) * 0.755); }

  .page-cases .cases-grid {
    grid-template-columns: repeat(1, 1fr);   /* one card per row on mobile */
    gap: var(--pui-space-8);
  }

  .page-cases .pui-card__media { aspect-ratio: 156 / 119.4; }
  .page-cases :where(.pui-card__texts) .pui-card__title { font-size: var(--pui-type-body-small-font-size); }  /* 14px */
}

/* STEP 12 (2026-09-28) — a design-system part carries the design system's classes only; this page reaches a part through the block that holds it
   and states only what is the page's (a width in a row, a place in a grid, a picture's ratio). */
/* STEP 12 · TOKENS — the site's alias names became the design system's; a typed value that equals a token is the token */