/* ============================================================
   USE-CASE GALLERY + MODAL  (FAQ toggle 6)
   Clickable event cards → centered modal with the case study.
   Framework free. Inherits design tokens. Light + dark.
   ============================================================ */

.uc2-intro{margin:clamp(28px,3vw,40px) 0 clamp(18px,2vw,26px);}
.uc2-intro__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-h3);color:var(--fg-strong);margin:0;}
.uc2-intro__sub{margin:8px 0 0;color:var(--fg-2);font-size:var(--text-lg);max-width:680px;}

/* ---- Grid of event cards ---- */
.uc2-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.4vw,18px);
}
.uc2-card{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:3/4;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface-2);
  cursor:pointer;
  text-align:left;
  color:#fff;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.uc2-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-accent);}
.uc2-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);}
.uc2-card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.uc2-card:hover .uc2-card__img{transform:scale(1.05);}
.uc2-card__scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,11,31,.92) 0%,rgba(5,11,31,.45) 42%,rgba(5,11,31,.05) 70%,rgba(5,11,31,.18) 100%);
}
.uc2-card__top{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:6px;}
.uc2-card__meta{position:absolute;left:14px;right:14px;bottom:13px;display:flex;flex-direction:column;gap:5px;}
.uc2-card__date{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:rgba(255,255,255,.78);}
.uc2-card__title{font-family:var(--font-display);font-weight:700;font-size:1.02rem;line-height:1.2;color:#fff;}
.uc2-card__cue{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;color:#7fdcff;margin-top:2px;
  opacity:0;transform:translateY(4px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);}
.uc2-card__cue svg{width:15px;height:15px;}
.uc2-card:hover .uc2-card__cue,.uc2-card:focus-visible .uc2-card__cue{opacity:1;transform:none;}

/* ---- Chips ---- */
.uc2-chip{
  display:inline-flex;align-items:center;font-family:var(--font-mono);
  font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-pill);
  background:rgba(5,11,31,.55);color:#cfe9ff;border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px);
}
.uc2-chip--soon{background:rgba(33,188,238,.85);color:#04122a;border-color:transparent;}

@media (max-width:980px){.uc2-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.uc2-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:380px){.uc2-grid{grid-template-columns:1fr;} .uc2-card{aspect-ratio:16/10;}}

/* ============================================================
   MODAL
   ============================================================ */
.uc2-modal{
  position:fixed;inset:0;z-index:240;
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,3vw,32px);
  background:rgba(5,11,31,.74);backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);
  opacity:0;pointer-events:none;transition:opacity .34s var(--ease);
}
.uc2-modal.show{opacity:1;pointer-events:auto;}
.uc2-modal__card{
  position:relative;width:min(880px,100%);max-height:90vh;overflow:hidden;
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border-accent);
  box-shadow:var(--shadow-lg);
  transform:scale(.96) translateY(14px);transition:transform .42s var(--ease);
  display:flex;
}
.uc2-modal.show .uc2-modal__card{transform:none;}
.uc2-modal__close{
  position:absolute;top:12px;right:12px;z-index:3;
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--fg-2);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.uc2-modal__close:hover{background:var(--surface-2);color:var(--fg);border-color:var(--border-strong);}
.uc2-modal__close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);}
.uc2-modal__body{display:flex;width:100%;max-height:90vh;overflow:auto;}

/* ---- Detail layout ---- */
.uc2-detail{display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1fr);width:100%;}
.uc2-detail__media{
  position:relative;min-height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0a1838,#050b1f);   /* matches the artwork's dark frame */
}
/* Show the WHOLE portrait image — never crop it */
.uc2-detail__media img{width:100%;height:100%;object-fit:contain;display:block;}
.uc2-detail__main{padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;gap:12px;}
.uc2-detail__metarow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.uc2-detail__metarow .uc2-chip{background:var(--signal-bg);color:var(--accent);border-color:var(--border-accent);backdrop-filter:none;}
.uc2-detail__date{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-muted);}
.uc2-detail__title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,1.1rem+1vw,1.9rem);line-height:1.15;color:var(--fg-strong);margin:0;}
.uc2-detail__platform{font-size:var(--text-sm);color:var(--fg-muted);margin:0;}
.uc2-detail__text{display:flex;flex-direction:column;gap:12px;color:var(--fg-2);line-height:1.6;font-size:var(--text-body);}
.uc2-detail__text p{margin:0;}
.uc2-detail__stats{
  font-family:var(--font-mono);font-size:.8rem;line-height:1.5;color:var(--fg-strong);
  padding:12px 14px;border-radius:var(--r-md);background:var(--signal-bg);border:1px solid var(--border-accent);
}
.uc2-detail__tagwrap{margin-top:2px;}
.uc2-detail__taglbl{display:block;font-family:var(--font-body);font-size:var(--text-eyebrow);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:8px;}
.uc2-detail__tags{display:flex;flex-wrap:wrap;gap:7px;}
.uc2-tag{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:600;color:var(--fg-2);
  padding:5px 11px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border);}
.uc2-detail__note{font-size:var(--text-sm);color:var(--fg-muted);font-style:italic;margin:0;}
.uc2-detail__cta{align-self:flex-start;margin-top:6px;}

@media (max-width:680px){
  .uc2-modal__card{max-height:92vh;}
  .uc2-detail{grid-template-columns:1fr;}
  /* stacked: cap the image height and keep it whole (contain) */
  .uc2-detail__media{aspect-ratio:auto;min-height:0;max-height:42vh;padding:10px;}
  .uc2-detail__media img{max-height:100%;width:auto;height:auto;}
}

@media (prefers-reduced-motion:reduce){
  .uc2-modal,.uc2-modal__card,.uc2-card,.uc2-card__img,.uc2-card__cue{transition:none;}
  .uc2-modal__card{transform:none;}
}