/* RIVET real-scenario photo slots (build spec C6).
   Stock photos from Unsplash (Unsplash Licence), edited to the brand grade: chiaroscuro, neutral-cool,
   screens and third-party logos blurred. Credits per slot live in assets/photos/CREDITS.md (not deployed).
   A stock photo never stands for a RIVET event, room or member, and never sits next to a name, quote or logo.
   Markup: <figure class="shot shot--4x5" data-slot="R-01"><picture><source type="image/webp" srcset="…"><img …></picture></figure>
   Cards have no border (Brand OS). Radius 24, or 12 for small cards. */

.shot{ position:relative; margin:0; overflow:hidden; isolation:isolate; border-radius:var(--radius-base,24px);
  aspect-ratio:4/5; background:var(--ghost-white,#F8F8FA); }
html[data-mode="dark"] .shot, body.gtm-dark .shot, .shot--dark{ background:var(--elev-1,#0A0A0C); }
.shot > picture{ display:block; width:100%; height:100%; }
.shot img{ display:block; width:100%; height:100%; object-fit:cover; object-position:var(--shot-pos,50% 50%); }

.shot--4x5{ aspect-ratio:4/5; }
.shot--3x2{ aspect-ratio:3/2; }
.shot--4x3{ aspect-ratio:4/3; }
.shot--16x9{ aspect-ratio:16/9; }
.shot--16x10{ aspect-ratio:16/10; }
.shot--1x1{ aspect-ratio:1/1; border-radius:50%; }
.shot--sm{ border-radius:var(--radius-card,12px); }

/* Live site: an empty slot is never rendered; the layout falls back to its text-only form. */
.shot[data-empty]{ display:none !important; }

/* "Illustrative photo": on event and community pages, where a stock scene must never read as a RIVET event. */
.shot__note{ position:absolute; z-index:2; inset-inline-start:12px; inset-block-end:12px; margin:0; padding:4px 8px;
  border-radius:6px; background:var(--scrim,rgba(0,0,0,.55)); color:#fff; }
/* themed pages (events Voice) recolour every figcaption with !important; the note stays white on its scrim */
main .shot > .shot__note.shot__note.t-micro{ color:var(--on-duo-ink,#fff) !important; }

/* ---------- Hero right half (role, track, for-companies, offline pages): sits in .phero__grid ---------- */
.phero__grid > .shot--hero{ width:100%; max-width:440px; justify-self:end; }
.phero__grid > .shot--hero.shot--3x2{ max-width:none; }
@media (max-width:900px){
  .phero__grid > .shot--hero{ max-width:none; justify-self:stretch; }
  .phero__grid > .shot--hero.shot--4x5{ aspect-ratio:4/3; }   /* phones: a landscape crop keeps the copy and CTA high */
}

/* Track pages: the 3D track icon becomes a small badge on the photo */
.shot__badge{ position:absolute; z-index:2; inset-inline-start:16px; inset-block-end:16px; display:grid; place-items:center;
  width:72px; height:72px; border-radius:var(--radius-card,12px); background:var(--elev-2,#12121A); }
.shot__badge img{ width:52px; height:52px; object-fit:contain; }
@media (max-width:600px){ .shot__badge{ width:56px; height:56px; inset-inline-start:12px; inset-block-end:12px; } .shot__badge img{ width:40px; height:40px; } }

/* ---------- Card cover: the photo is the top of a hero card (course and plan cards, the membership value card) ---------- */
.shot--cover{ border-radius:0; aspect-ratio:var(--cover-ratio,5/2); width:100%; }
/* course pages (AIWS, CRGA): dark glass card with no padding of its own */
.chero__card > .shot--cover{ position:relative; z-index:1; --cover-ratio:21/9; }
/* product pages (GTM Engineering, INFINITE Analytics, Teams): above the duo band */
main.pdp .pdp-card > .shot--cover{ display:block; }
/* membership value card: bleed to the card's 22px padding */
.valuecard:has(> .shot--cover){ overflow:hidden; }
.valuecard > .shot--cover{ margin:-22px -22px 4px; width:calc(100% + 44px); max-width:none; --cover-ratio:5/2; }

/* ---------- Persona photo in the plan pages' "Is this you?" split (plans/pro, plans/infinite) ---------- */
main.pdp .pdp-split--shot > .shot{ width:100%; max-width:420px; }
@media (min-width:1024px){
  main.pdp .pdp-split--shot{ grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr); align-items:start; }
  main.pdp .pdp-split--shot > .shot{ max-width:none; }
}
@media (min-width:640px) and (max-width:1023px){
  main.pdp .pdp-split--shot{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start; }
  main.pdp .pdp-split--shot > .sec-head{ grid-column:1 / -1; }
}
@media (max-width:639px){ main.pdp .pdp-split--shot > .shot{ max-width:none; aspect-ratio:4/3; } }

/* ---------- Events: workshop "How a session actually runs" (photo beside the four steps) ---------- */
.evsplit{ display:grid; gap:clamp(20px,2.4vw,28px); }
.evsplit > .shot{ align-self:stretch; height:100%; min-height:280px; aspect-ratio:auto; }
.evsplit .tiles--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:1024px){ .evsplit{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); } }
@media (max-width:1023px){ .evsplit > .shot{ aspect-ratio:16/10; height:auto; min-height:0; } }
@media (max-width:600px){ .evsplit .tiles--4{ grid-template-columns:1fr; } }

/* ---------- Events: speak page hero, copy beside a portrait photo ---------- */
.evhero--shot .evhero__grid{ max-width:none; }
@media (min-width:1024px){
  .evhero--shot .evhero__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); justify-items:stretch; text-align:start; align-items:center; }
  .evhero--shot .evhero__grid > div{ align-items:flex-start; }
  .evhero--shot .evchecks{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:8px; }
  .evhero--shot .evhero__grid > .evcard{ grid-column:1 / -1; justify-self:center; }
  .evhero--shot .evhero__grid > .shot{ max-width:440px; justify-self:end; width:100%; }
}
@media (max-width:1023px){ .evhero--shot .evhero__grid > .shot{ width:100%; max-width:560px; aspect-ratio:4/3; --shot-pos:50% 70%; } }