/* Page-specific styles for /work (=live glow.team/cases), ported from that page's
   inline <style>. Kept surgical: excludes live's nav/bottom-bar gradient rules
   (.blur-span/.radial-blur) — those are owned by nav-gradient.js (DEC-0010) — and
   the .carousel-logo opacity:0 reveal (needs its scroll JS, which we don't run). */

/* Case grid: every 3rd card of 5 spans both columns (the full-width feature card,
   e.g. Lendflow) — pure nth-child, no per-card modifier. */
.cases_card:nth-child(5n + 3) { grid-column: span 2; }

/* Uniform card image heights. Live's /cases covers are position-locked (feature
   slot = landscape ~1013:575, normal slots = portrait ~496:642); our card order is
   per Figma, which lands some covers in the "wrong" slot → uneven heights ("поплыло").
   Pin each slot to its live aspect + object-fit:cover so any cover crops cleanly. */
.cases_card-img { aspect-ratio: 496 / 642; height: auto; }
.cases_card:nth-child(5n + 3) .cases_card-img { aspect-ratio: 1013 / 575; }

/* Live keeps the grid at 2 columns all the way down to 480px and only collapses to
   1 column at ≤479px. webflow-shared.css (ported base) collapses too early — at ≤991 —
   so force live's single breakpoint back on tablet. */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .cases { grid-template-columns: 1fr 1fr !important; }
  .cases_card-img { height: auto; }
}

/* Mobile (≤479): live collapses `.cases` to a single column, so the span-2 feature
   card must NOT force a 2nd track. Images switch to live's fixed 28.125rem height
   (object-fit:cover) instead of the desktop crop-aspect. */
@media screen and (max-width: 479px) {
  .cases_card:nth-child(5n + 3) { grid-column: auto; }
  .cases_card-img,
  .cases_card:nth-child(5n + 3) .cases_card-img { aspect-ratio: auto; height: 28.125rem; }
}

/* The card link must stay a flex column so its 32px row-gap applies (image ↔
   logo/title). `.w-inline-block` (loaded after webflow-shared) otherwise forces
   display:inline-block here, collapsing the gap to 0 and pinning the text to the
   image — this restores live's 32px breathing room. */
.cases_card-link { display: flex; }

/* Case card hover: image zoom + arrow scale (live /cases behaviour) */
.cases_card-link .cases_card-img .img-100--cover,
.cases_card-link .cases_card-info .cases_card-btn { transition: transform 0.5s ease; }
.cases_card-link:hover .cases_card-img .img-100--cover { transform: scale(1.05); }
.cases_card-link:hover .cases_card-info .cases_card-btn { transform: scale(1.2); }

/* Pagination bar — real client-side pagination (17 cases / 5 per page = 4 pages),
   rendered by public/js/cases-pagination.js as « ‹ 1 2 3 4 › ». Active page = beige pill
   (live's active-page style); disabled first/prev or next/last dim out. */
.cases_pagination { display: flex !important; flex-wrap: nowrap !important; justify-content: center; align-items: center; column-gap: 4px; }
.cases_pagination-list {
  display: flex !important;
  grid-template-columns: none !important;
  column-gap: 4px;
  align-items: center;
}
.cases_pagination-list .cases_pagination-btn_count.is-active {
  background-color: var(--secondary-colors--beige--100);
  color: var(--gray--500);
}
.cases_pagination-btn.is-disabled { opacity: 0.35; pointer-events: none; }
/* Final page with <3 cards → its cards span the full width (matches live/Figma last page). */
.cases.is-last-partial .cases_card { grid-column: 1 / -1; }

/* Center the icon / number inside the round buttons. `.w-inline-block` (loaded
   after webflow-shared) forces display:inline-block on the page-number button,
   killing its flex centering; and the arrow's SVG picks up an inline-whitespace
   offset. Re-center both. */
.cases_pagination-btn_count { display: flex; align-items: center; justify-content: center; }
.cases_pagination-btn_text { padding-top: 0; }
.cases_card-btn .w-embed { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cases_card-btn svg { display: block; }