/* ===================================================
   AI LAB — dark editorial gallery page
   Dark theme, fixed chrome object, alternating gallery rows.
   Reuses base tokens/components from styles.css.
   =================================================== */

/* AI Lab owns a distinct identity from the light portfolio: pure black. */
.ailab {
  background: #000000;
  color: var(--color-white);
  /* AI Lab grid gutter — now aligned to the site-wide 16px gutter so every
     gallery across the site shares one spacing rule. */
  --ailab-gutter: var(--gutter);
}

/* Keep the page background pure black behind everything */
.ailab #main-content {
  background: #000000;
}

/* ---------- DECORATIVE 3D OBJECT ----------
   Anchored at the very top of the page (its original position) and absolutely
   positioned, so it simply scrolls away with the content — it never follows
   the viewport, drifts, rotates, or animates. A static header ornament. */
.ailab__chrome-stage {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 58vw);
  height: 200px;
  pointer-events: none;
  z-index: 1;
}

/* Static decorative object — centered in its stage purely via CSS. No motion
   at all: no rotation, float, bob, drift, or mouse-follow. */
.ailab__chrome {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(190px, 22vw);
  height: min(190px, 22vw);
  opacity: 1;
}

.ailab__chrome-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 46px rgba(0, 0, 0, 0.55));
}

/* ---------- GALLERY ---------- */
.ailab__gallery {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 320px var(--side-padding) 120px;
  position: relative;
  z-index: 2;
}

.ailab__row {
  margin-bottom: 120px;
}

.ailab__row:last-child {
  margin-bottom: 0;
}

/* Row with two side-by-side items — tight, uniform grid gutter (matches
   the AI Lab gallery grid: equal 8px gaps, not big separate blocks) */
.ailab__row--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ailab-gutter);
}

/* Row with one full-width featured item */
.ailab__row--full {
  display: block;
}

.ailab__item {
  margin: 0;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.ailab__media {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-dark-surface);
}

/* Subtle hover — editorial, minimal */
.ailab__item .ailab__media img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.ailab__item:hover .ailab__media img {
  transform: scale(1.03);
}

.ailab__item:hover .ailab__caption {
  color: rgba(255, 255, 255, 0.85);
}

.ailab__media--16-9 {
  aspect-ratio: 16 / 9;
}

.ailab__media--21-9 {
  aspect-ratio: 21 / 9;
}

.ailab__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video/iframe previews fill the media the same way images do. Clicks pass
   through to the parent card link (or nowhere, for the static card). */
/* Covers its .ailab__media box; aspect-ratio is set inline per video so the
   clip fills without letterbox regardless of its native ratio. */
.ailab__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

.ailab__media {
  position: relative;
}

/* Non-clickable card (Coming Soon) */
.ailab__item--static {
  cursor: default;
}

/* Custom "View Case" cursor — mirrors the Featured Works badge interaction.
   Follows the pointer (JS quickTo) and pops in on card hover. */
.ailab__cursor-badge {
  position: fixed;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform, left, top;
}

.ailab__cursor-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color-black);
}

/* Coming Soon label */
.ailab__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #ffffff;
}

/* Subtle, minimal, centered caption */
.ailab__caption {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.3s ease;
}

/* ===================================================
   AI LAB CASE — single project page (dark, reuses AI Lab styles)
   Structure: 21:9 hero → project name → description → 16:9 gallery → footer.
   No portfolio-case sections (Overview/Process/Results/etc.).
   =================================================== */
.ailab-case__content {
  max-width: var(--container-max);
  margin: 0 auto;
  /* top clearance so the hero starts just below the fixed chrome object
     (logo → hero — hero sits high, close to the logo).
     bottom = 0: the Next Case block + its wrapper margins now govern the
     gallery → Next Case → Get in touch rhythm (same as the main case pages). */
  padding: 340px var(--side-padding) 0;
  position: relative;
  z-index: 2;
}

/* Next Case on AI Lab case pages — reuses the shared .cs-next component.
   Lift it above the fixed chrome object (z-index 5), like the footer. */
.ailab .cs-next-wrapper {
  position: relative;
  z-index: 6;
  /* Clear separation from the gallery collage above so the two sections
     don't feel visually connected (larger than the shared 80px top margin). */
  margin-top: 200px;
}

@media (max-width: 640px) {
  .ailab .cs-next-wrapper {
    margin-top: 112px;
  }
}

/* On the dark AI Lab pages the card uses a dark surface (#161616) with white
   label text; the arrow keeps the brand accent. Main case pages stay white. */
.ailab .cs-next {
  background: var(--color-dark-surface);
}

.ailab .cs-next__label {
  color: #FFFFFF;
}

/* 1. Hero — 21:9, full container width (reuses .ailab__media--21-9) */
.ailab-case__hero {
  margin-bottom: var(--space-4); /* hero → project name (16px, on-scale) */
}

/* 2. Small project name (caption) directly under the hero — no large H1 */
.ailab-case__caption {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: var(--space-30); /* project name → description (120px, on-scale) */
}

/* 3. Description — short, understated, narrow centered column */
.ailab-case__desc {
  max-width: 440px;
  margin: 0 auto var(--space-40); /* description → gallery (160px, on-scale) */
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* 4. Gallery — dense, uniform 16:9 grid, small equal gaps (h & v) — UNCHANGED */
.ailab-case__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ailab-gutter);
}

/* Full-width interstitial video — natural ratio, sits between galleries with
   clear breathing room so the rhythm reads gallery · film · gallery. */
.ailab-case__video {
  margin: var(--space-16) 0;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-dark-surface);
}

/* Covers its .ailab-case__video box; aspect-ratio set inline per video. */
.ailab-case__video-el {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 900px) {
  .ailab-case__content { padding-top: 260px; padding-bottom: 0; }
  .ailab-case__hero { margin-bottom: 16px; }
  .ailab-case__caption { margin-bottom: var(--space-20); }
  .ailab-case__desc { margin-bottom: var(--space-30); }
  .ailab-case__gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ailab-case__gallery { grid-template-columns: 1fr; }
}

/* ---------- FOOTER on dark page ---------- */
.ailab .footer {
  position: relative;
  z-index: 6; /* above the fixed chrome object */
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .ailab__chrome-stage {
    top: 60px;
    height: 160px;
  }

  .ailab__gallery {
    padding-top: 250px;
  }

  .ailab__row {
    margin-bottom: 80px;
  }

  .ailab__row--pair {
    gap: var(--ailab-gutter);
  }
}

@media (max-width: 640px) {
  .ailab__row--pair {
    grid-template-columns: 1fr;
    gap: var(--ailab-gutter);
  }

  .ailab__chrome {
    width: 130px;
    height: 130px;
  }
}