/* Cases gallery (cases.html) — 2-column grid of 672×550 case cards, matching the
   Figma "страница кейсов" (node 15:375). Hover: the card zooms (scale 1.025) and a
   frosted pill button with the case title slides up from the bottom (node 570:3992).
   Reuses tokens + .topbar + .info + .nav-item from styles.css (link it first). */

.cases-page {
  position: relative;
  width: 100%;
  height: 100vh;
  background: var(--page-bg);
  overflow: hidden;
}

/* Scroll region between the top info button and the bottom bar. */
.gallery {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 84px var(--page-inset) 88px;   /* clear info btn (top) + topbar (bottom) */
}

.gallery__grid {
  max-width: 1376px;                  /* 672×2 + 32 gap — design content width */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 760px) { .gallery__grid { grid-template-columns: 1fr; } }

/* ---- Card (672×550) ----------------------------------------------------- */
.case-card {
  position: relative;
  display: block;
  aspect-ratio: 672 / 550;
  border-radius: 32px;               /* matches the Figma frame radius (the art PNGs are pre-rounded) */
  overflow: hidden;
  background: transparent;           /* Figma cards have no fill — let the page bg show, no white plate */
  cursor: pointer;
  text-decoration: none;
}
.case-card:hover,
.case-card:focus-visible {
  z-index: 2;
  outline: none;
}
/* The art sits in its OWN promoted layer (translateZ) which reliably clips the
   zooming <img> to rounded corners — even in Safari, where a transformed child
   escapes a plain overflow/border-radius and squares the dark card edge. The pill
   stays a sibling (not a descendant of the transform) so its backdrop-filter works. */
.case-card__art {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  overflow: hidden;
  transform: translateZ(0);
}
/* Hover zooms only the inner art (the phone/dashboard in the centre), not the whole block. */
.case-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  user-select: none;
  -webkit-user-drag: none;
}
.case-card:hover .case-card__art img,
.case-card:focus-visible .case-card__art img { transform: scale(1.05); }

/* Slide-out pill button — hidden below the card, slides up + fades in on hover. */
.case-card__pill {
  position: absolute;
  left: 50%;
  bottom: 20px;                       /* resting spot: 20px from card bottom (per macet) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border-radius: 120px;              /* full pill */
  /* Frosted glass — opaque enough to stay readable on dark cards too
     (the Figma sample sat on a light card; white-10% would vanish on dark art). */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
          backdrop-filter: blur(24px) saturate(120%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  color: var(--bar-text);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 28px);  /* tucked below → slides up */
  transition: opacity 0.32s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.case-card:hover .case-card__pill,
.case-card:focus-visible .case-card__pill { opacity: 1; transform: translate(-50%, 0); }

/* ---- "Скоро" (cover-only) tile — present but not navigable -------------- */
.case-card--soon { cursor: default; }
.case-card--soon:hover .case-card__art img { transform: none; }   /* cover-only tiles don't zoom */
.case-card--soon::after {
  content: "скоро";
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--bar-text);
}

@media (prefers-reduced-motion: reduce) {
  .case-card__art img, .case-card__pill { transition: none; }
}