/* ==========================================================================
   AE Creative — Case Study page components
   Introduced for pages/case-study.html: the hero meta strip, the solution
   timeline, the bento-style gallery, and the video placeholder. Everything
   here is built from existing design tokens (colors, radii, shadows, ease,
   fonts) — no new colors, no new framework. Section padding/heading kit
   reuse the same classes as every other page (spacing.css, components.css).
   ========================================================================== */

/* ---- Hero meta strip (Category / Client / Date / Services) ---- */
.case-hero__meta{
  display:flex;flex-wrap:wrap;gap:28px;padding:22px clamp(18px,3vw,32px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);backdrop-filter:blur(10px);
  margin-bottom:12px;
}
.case-hero__meta-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.case-hero__meta-label{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;
  color:rgba(255,255,255,.55);
}
.case-hero__meta-value{font-family:var(--ff-display);font-weight:600;font-size:15px;color:#fff}

/* ---- Solution timeline (campaign rollout phases, icon + connecting line) ---- */
.solution-timeline{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;position:relative;
}
.solution-timeline__item{
  position:relative;padding-inline-end:24px;text-align:start;
}
/* Connecting line between icon badges — desktop only, hidden on the last item. */
.solution-timeline__item:not(:last-child)::after{
  content:"";position:absolute;top:26px;inset-inline-start:70px;inset-inline-end:-6px;
  height:1px;background:var(--line-2);
}
.solution-timeline__icon{
  width:52px;height:52px;border-radius:99px;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:var(--e-glow);margin-bottom:18px;position:relative;z-index:1;
}
.solution-timeline__title{font-family:var(--ff-display);font-weight:600;font-size:16px;margin:0 0 8px}
.solution-timeline__text{margin:0;font-size:13.5px;line-height:1.65;color:var(--text-3)}

/* ---- Gallery (large hero shot + 3-up supporting row, image placeholders
   only). The large tile spans the full row width via explicit line numbers
   (`1 / -1`) rather than an auto-placed column span — on an RTL page, grid
   auto-placement fills columns starting from the inline-start (right) edge,
   which left a lone orphaned tile with empty cells beside it when the large
   tile only spanned 2 of 3 columns. Spanning the full row sidesteps that
   entirely: the 3 supporting tiles always land on their own clean row. ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:18px}
.gallery-grid__item{
  position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);
}
.gallery-grid__item--lg{grid-column:1 / -1;grid-row:span 2}
.gallery-grid__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);
}
.gallery-grid__img.is-broken{opacity:0}
.gallery-grid__item:hover .gallery-grid__img,.gallery-grid__item:focus-visible .gallery-grid__img{transform:scale(1.04)}

/* ---- Video placeholder (video-ready, no YouTube embed yet) ---- */
.video-placeholder{
  position:relative;border-radius:var(--r-2xl);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/9;background:linear-gradient(160deg,var(--bg-2),var(--bg-1));
  display:flex;align-items:center;justify-content:center;
}
.video-placeholder__glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;height:140%;
  background:radial-gradient(ellipse,rgba(107,95,255,.28),transparent 70%);pointer-events:none;
}
.video-placeholder__play{
  position:relative;z-index:1;width:84px;height:84px;border-radius:99px;background:var(--grad);
  border:none;color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--e-glow);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.video-placeholder__play:hover,.video-placeholder__play:focus-visible{transform:scale(1.08);box-shadow:0 18px 58px rgba(107,95,255,.48)}
.video-placeholder__caption{
  position:absolute;bottom:22px;inset-inline:22px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;font-family:var(--ff-mono);font-size:12px;letter-spacing:.06em;color:var(--text-2);
}