/* === g-media — consolidated media section (v3.29.0) === */
/* ONE section, four modes gated by data-ssla-media-type. Video markup is */
/* Hub SSH_Media output; image <img>s get srcset/lazy from the media-     */
/* policy render pass. Tokens only — no hardcoded colors.                 */

.ssla-g-media {
  width: 100%;
  position: relative;
  background-color: var(--ssla-bg-color, transparent);
  color: var(--g-media-fg);
}
.ssla-g-media-inner {
  max-width: var(--g-media-content-max-width);
  margin: 0 auto;
  padding: var(--g-media-section-padding) 48px;
}
.ssla-g-media-head { text-align: var(--ssla-text-align, left); margin-bottom: 28px; }
.ssla-g-media-heading {
  font-family: var(--g-media-heading-family);
  font-size: var(--g-media-heading-size);
  color: var(--g-media-heading);
  margin: 0 0 12px;
}
.ssla-g-media-heading:empty { display: none; }
.ssla-g-media-intro { color: var(--g-media-fg); max-width: 65ch; }
.ssla-g-media-intro:empty { display: none; }

/* ── Mode gate: only the active renderer shows ──
   Single 'media' mode follows the chooser's kind (media__type): image →
   figure; video/embed/unset → frame. Legacy v3.29 'video'/'image' values
   keep working. Gallery modes have their own frame/grid. */
.ssla-g-media-frame,
.ssla-g-media-figure,
.ssla-g-media-gallery-frame,
.ssla-g-media-grid { display: none; }
.ssla-g-media[data-ssla-media-type="media"]:not([data-ssla-media-kind="image"]) .ssla-g-media-frame  { display: block; }
.ssla-g-media[data-ssla-media-type="media"][data-ssla-media-kind="image"]       .ssla-g-media-figure { display: block; }
.ssla-g-media[data-ssla-media-type="video"]         .ssla-g-media-frame         { display: block; }
.ssla-g-media[data-ssla-media-type="image"]         .ssla-g-media-figure        { display: block; }
.ssla-g-media[data-ssla-media-type="video-gallery"] .ssla-g-media-gallery-frame { display: block; }
.ssla-g-media[data-ssla-media-type="image-gallery"] .ssla-g-media-grid          { display: grid; }

/* ── Video frame ── */
.ssla-g-media-frame:empty {
  min-height: 120px;
  border: 1px dashed var(--g-media-fg);
  opacity: 0.4;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}
.ssla-g-media-gallery-frame:empty {
  min-height: 120px;
  border: 1px dashed var(--g-media-fg);
  opacity: 0.4;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}
.ssla-g-media[data-ssla-media-type="media"]:not([data-ssla-media-kind="image"]) .ssla-g-media-frame:empty,
.ssla-g-media[data-ssla-media-type="video"] .ssla-g-media-frame:empty { display: flex; }
.ssla-g-media[data-ssla-media-type="video-gallery"] .ssla-g-media-gallery-frame:empty { display: flex; }
.ssla-g-media-frame:empty::after,
.ssla-g-media-frame[data-media-url=""]::after { content: 'Choose an image or video'; font-size: 14px; }
.ssla-g-media[data-ssla-media-type="media"]:not([data-ssla-media-kind="image"]) .ssla-g-media-frame[data-media-url=""] {
  display: flex;
  min-height: 120px;
  border: 1px dashed var(--g-media-fg);
  opacity: 0.4;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}
.ssla-g-media-gallery-frame:empty::after { content: 'Set a YouTube playlist'; font-size: 14px; }
.ssla-g-media .ssla-media-fallback a { color: var(--g-media-heading); text-decoration: underline; }

/* ── Large image ── */
.ssla-g-media-figure { margin: 0; text-align: var(--ssla-text-align, center); }
.ssla-g-media-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--g-media-radius);
}
.ssla-g-media-img:not([src]), .ssla-g-media-img[src=""] {
  min-height: 160px;
  border: 1px dashed var(--g-media-fg);
  opacity: 0.4;
  border-radius: 8px;
}
.ssla-g-media--width-bleed .ssla-g-media-figure {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ssla-g-media--width-bleed .ssla-g-media-img { border-radius: 0; }

/* ── Image gallery grid (columns variant) ── */
.ssla-g-media-grid { grid-template-columns: repeat(3, 1fr); gap: var(--g-media-gap); }
.ssla-g-media--columns-two  .ssla-g-media-grid { grid-template-columns: repeat(2, 1fr); }
.ssla-g-media--columns-four .ssla-g-media-grid { grid-template-columns: repeat(4, 1fr); }
.ssla-g-media-item { margin: 0; }
.ssla-g-media-item-link { display: block; }
.ssla-g-media-item-img {
  display: block;
  width: 100%;
  /* height:auto beats the render pass's height attribute — without it the
     attr height wins over aspect-ratio and tiles blow up into cropped
     portrait slabs (Glenn walk 2026-07-03). */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--g-media-radius);
}
.ssla-g-media-item-img:not([src]), .ssla-g-media-item-img[src=""] {
  min-height: 120px;
  border: 1px dashed var(--g-media-fg);
  opacity: 0.4;
}

/* ── Image-gallery pager (v3.36.0) ── injected by ssla-g-media-pager.js
   only when tiles overflow per_page; hidden entirely otherwise. */
.ssla-g-media-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: var(--g-media-gap);
}
.ssla-g-media-pager-btn {
  padding: 8px 18px;
  border: 1px solid var(--g-media-fg);
  border-radius: 999px;
  background: transparent;
  color: var(--g-media-fg);
  font: 600 0.85em/1 inherit;
  cursor: pointer;
  opacity: 0.9;
}
.ssla-g-media-pager-btn:hover:not(:disabled) { opacity: 1; }
.ssla-g-media-pager-btn:disabled { opacity: 0.35; cursor: default; }
.ssla-g-media-pager-status {
  font-size: 0.9em;
  color: var(--g-media-caption);
  opacity: 0.85;
  min-width: 96px;
  text-align: center;
}

/* ── Captions (shared) ── */
.ssla-g-media-caption {
  margin-top: 12px;
  font-size: 0.9em;
  color: var(--g-media-caption);
  opacity: 0.85;
}
.ssla-g-media-caption:empty { display: none; }

/* ── Structural: spacing ── */
.ssla-g-media--spacing-compact .ssla-g-media-inner { padding-top: 48px; padding-bottom: 48px; }
.ssla-g-media--spacing-roomy   .ssla-g-media-inner { padding-top: 140px; padding-bottom: 140px; }

@media (max-width: 900px) {
  .ssla-g-media-grid,
  .ssla-g-media--columns-four .ssla-g-media-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ssla-g-media-inner { padding-left: 24px; padding-right: 24px; }
  .ssla-g-media-grid,
  .ssla-g-media--columns-two .ssla-g-media-grid,
  .ssla-g-media--columns-four .ssla-g-media-grid { grid-template-columns: 1fr; }
}

/* ── Tone: dark (variant chosen OR auto-resolved from a dark bg_color) ──
   Preset slot paint will own these once presets author g-media slots; this
   is the readable floor (same precedent as hero-bg's tone-dark rule). */
.ssla-g-media--tone-dark {
  --g-media-fg:      var(--shell-text-light, #ffffff);
  --g-media-heading: var(--shell-text-light, #ffffff);
  --g-media-caption: var(--shell-text-light, #ffffff);
}

/* ═══ Skeleton state ═══ */
.ssla-section.ssla-g-media {
  --g-media-fg:                var(--brand-fg);
  --g-media-heading:           var(--brand-fg);
  --g-media-caption:           var(--brand-fg);
  --g-media-heading-family:    var(--brand-heading-family);
  --g-media-heading-size:      var(--brand-h2-size-clamp);
  --g-media-section-padding:   var(--paint-section-padding, var(--brand-section-padding, 80px));
  --g-media-content-max-width: var(--brand-content-max-width, 1100px);
  --g-media-gap:               var(--brand-card-gap, 24px);
  --g-media-radius:            var(--brand-card-radius, 8px);
}