/* =========================================================================
   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) ---------- */
.page-cases a:link,
.page-cases a:visited,
.page-cases a:hover,
.page-cases a:focus,
.page-cases a:active { color: inherit; text-decoration: none; }

.page-cases button {
  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: 12px;
  padding-right: 12px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Re-assert shared footer link colors (the link reset above beats the
   shared .footer__links rule on specificity, so links would inherit black
   and vanish on the dark footer card). */
.page-cases .footer__links a:link,
.page-cases .footer__links a:visited,
.page-cases .footer__links a:active { color: var(--color-neutral-lighter); }
.page-cases .footer__links a:hover,
.page-cases .footer__links a:focus { color: #ffffff; }

/* ---------- 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: 132px;       /* LOCKED eyebrow position — see conventions.md "Page eyebrow position" */
  padding-bottom: 0;
}
.page-cases .cases-main > div.container:first-of-type {
  margin-bottom: 64px;
}
/* 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;
  margin-bottom: 30px;
}

/* 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;
  max-width: 746px;       /* Figma heading frame width — H1 + sub wrap, don't stretch full-width */
  margin-bottom: 20px;
}
.page-cases .cases-hero__title {
  margin: 0;
}
.page-cases .cases-hero__sub {
  margin: 0;
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-large);        /* 22px desktop / 18px mobile (token) */
  line-height: 1.5;
  color: var(--color-neutral-400);
}

/* ===========================================================
   CLIENT LOGOS STRIP — "trusted by" row of brand logos
   =========================================================== */
.page-cases .cases-clients {
  padding: 12px 0;
  margin-bottom: 32px;
}
.page-cases .cases-clients__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.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 .case-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* when a row grows (a title wraps), the extra
                                       height opens between image and logo+text */
  padding: 20px 20px 0;
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);   /* #dad9d9 */
  border-radius: var(--radius-md);              /* 16px */
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.page-cases .case-card:hover {
  /* Figma shadow_XL — the elevated state previewed on one card in the mockup */
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
  transform: translateY(-4px);
}

.page-cases .case-card__media {
  width: 100%;
  aspect-ratio: 376 / 300;
  border-radius: var(--radius-sm);              /* 8px */
  overflow: hidden;
}
.page-cases .case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-cases .case-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
.page-cases .case-card__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.page-cases .case-card__logo {
  display: flex;
  align-items: center;
  height: 35px;
}
.page-cases .case-card__logo img {
  width: auto;
  height: auto;
  max-height: 30px;
  max-width: 125px;         /* logo box 125x30 (@2x = 250x60 upload) — wider wordmarks fit to width */
  object-fit: contain;
  object-position: left center;
}
.page-cases .case-card__title {
  font-family: var(--font-family-body);
  font-weight: 400;
  font-size: var(--fs-body-medium);             /* 18px */
  line-height: 1.3;
  color: var(--color-neutral-1000);
}
.page-cases .case-card__arrow {
  flex: 0 0 auto;
  margin-bottom: 5px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-cases .case-card__arrow img { width: 28px; height: 28px; }
.page-cases .case-card:hover .case-card__arrow { transform: translate(3px, -3px); }

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

  .page-cases .cases-main { padding-top: 116px; }   /* LOCKED eyebrow position (tablet) */
  .page-cases .cases-main > div.container:first-of-type { margin-bottom: 48px; }

  /* 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: 20px; }   /* 2-up on tablet (3 only on desktop) */

  .page-cases .case-card { padding: 12px 12px 0; }
  .page-cases .case-card__media { aspect-ratio: 219 / 167.6; }
  .page-cases .case-card__foot { padding: 8px 0 12px; }
}

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

  .page-cases .cases-main { padding-top: 96px; }    /* LOCKED eyebrow position (mobile) */
  .page-cases .cases-main > div.container:first-of-type { margin-bottom: 32px; }

  .page-cases .cases-hero { margin-bottom: 16px; }

  /* Logos wrap onto two centered rows (4 + 3). */
  .page-cases .cases-clients { margin-bottom: 20px; }
  .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: 8px;
  }

  .page-cases .case-card__media { aspect-ratio: 156 / 119.4; }
  .page-cases .case-card__title { font-size: var(--fs-body-small); }  /* 14px */
  .page-cases .case-card__arrow img { width: 20px; height: 20px; }
}