/* ─────────────────────────────────────────────────────────────────
   Block: image-blocks-sm (Team 8)
   Smaller, denser sibling of image-blocks. Default: 3 columns,
   tight gap (8px), smaller caption text. Same overlay + ratio system.
   ───────────────────────────────────────────────────────────── */

.block-image-blocks-sm .image-blocks-sm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-2);
  width: 100%;
}

/* Column counts */
.block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Gap presets — tighter than image-blocks */
.block-image-blocks-sm .image-blocks-sm-grid.ibs-gap-tight  { gap: var(--ds-space-2); }   /* 8 px  */
.block-image-blocks-sm .image-blocks-sm-grid.ibs-gap-normal { gap: var(--ds-space-4); }   /* 16 px */
.block-image-blocks-sm .image-blocks-sm-grid.ibs-gap-wide   { gap: var(--ds-space-6); }   /* 32 px */

/* Card surface */
.block-image-blocks-sm .image-blocks-sm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--scheme-card-bg, var(--ds-paper));
  border-radius: var(--ds-radius);
  overflow: hidden;
  box-shadow: var(--ds-shadow-sm);
  transition: transform var(--ds-duration, 220ms) var(--ds-ease-out, ease-out),
              box-shadow var(--ds-duration, 220ms) var(--ds-ease-out, ease-out);
}

.block-image-blocks-sm .image-blocks-sm-card.is-linked:hover,
.block-image-blocks-sm .image-blocks-sm-card.is-linked:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}

/* Image frame + ratios */
.block-image-blocks-sm .image-blocks-sm-image {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  aspect-ratio: 4 / 3;
}

.block-image-blocks-sm .image-blocks-sm-grid.ibs-ratio-16x9 .image-blocks-sm-image { aspect-ratio: 16 / 9; }
.block-image-blocks-sm .image-blocks-sm-grid.ibs-ratio-4x3  .image-blocks-sm-image { aspect-ratio: 4 / 3; }
.block-image-blocks-sm .image-blocks-sm-grid.ibs-ratio-1x1  .image-blocks-sm-image { aspect-ratio: 1 / 1; }
.block-image-blocks-sm .image-blocks-sm-grid.ibs-ratio-3x4  .image-blocks-sm-image { aspect-ratio: 3 / 4; }
.block-image-blocks-sm .image-blocks-sm-grid.ibs-ratio-21x9 .image-blocks-sm-image { aspect-ratio: 21 / 9; }

.block-image-blocks-sm .image-blocks-sm-card.ibs-ratio-16x9 .image-blocks-sm-image { aspect-ratio: 16 / 9; }
.block-image-blocks-sm .image-blocks-sm-card.ibs-ratio-4x3  .image-blocks-sm-image { aspect-ratio: 4 / 3; }
.block-image-blocks-sm .image-blocks-sm-card.ibs-ratio-1x1  .image-blocks-sm-image { aspect-ratio: 1 / 1; }
.block-image-blocks-sm .image-blocks-sm-card.ibs-ratio-3x4  .image-blocks-sm-image { aspect-ratio: 3 / 4; }
.block-image-blocks-sm .image-blocks-sm-card.ibs-ratio-21x9 .image-blocks-sm-image { aspect-ratio: 21 / 9; }

@supports not (aspect-ratio: 1) {
  .block-image-blocks-sm .image-blocks-sm-image { height: 0; padding-bottom: 75%; }
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-ratio-16x9 .image-blocks-sm-image { padding-bottom: 56.25%; }
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-ratio-1x1  .image-blocks-sm-image { padding-bottom: 100%; }
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-ratio-3x4  .image-blocks-sm-image { padding-bottom: 133.33%; }
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-ratio-21x9 .image-blocks-sm-image { padding-bottom: 42.86%; }
  .block-image-blocks-sm .image-blocks-sm-image > .image-blocks-sm-image__img { position: absolute; inset: 0; }
}

.block-image-blocks-sm .image-blocks-sm-image__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
  transition: transform var(--ds-duration-slow, 480ms) var(--ds-ease-out, ease-out);
}

/* W9-A5 — `image_fit: contain` modifier.
   Use for portrait/screenshot sources that would otherwise crop.
   Letterboxes against --ds-paper for a clean, brand-correct frame. */
.block-image-blocks-sm .image-blocks-sm-card.ibs-fit-contain .image-blocks-sm-image {
  background: var(--ds-paper, #fbf7ef);
}
.block-image-blocks-sm .image-blocks-sm-card.ibs-fit-contain .image-blocks-sm-image__img {
  object-fit: contain;
  padding: var(--ds-space-2, 8px);
  background: var(--ds-paper, #fbf7ef);
}

@media (hover: hover) {
  .block-image-blocks-sm .image-blocks-sm-card.is-linked:hover .image-blocks-sm-image__img,
  .block-image-blocks-sm .image-blocks-sm-card.is-linked:focus-within .image-blocks-sm-image__img {
    transform: scale(1.04);
  }
}

/* Body text under image (legacy markdown body) */
.block-image-blocks-sm .image-blocks-sm-text {
  padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-4);
}

/* Senior-UX 2026-05-07: h1/h2 keep Anton display; h3/h4 switch to humanist
   sentence-case (DM Sans). All-caps in card body harms word-shape recognition
   for older readers. */
.block-image-blocks-sm .image-blocks-sm-text h1,
.block-image-blocks-sm .image-blocks-sm-text h2 {
  font-family: var(--ds-font-display, var(--ds-font-heading));
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--scheme-card-fg, var(--ds-ink));
  margin: 0 0 var(--ds-space-2) 0;
  line-height: 1.15;
  font-size: var(--ds-fs-display-sm);
  text-transform: uppercase;
}
.block-image-blocks-sm .image-blocks-sm-text h3,
.block-image-blocks-sm .image-blocks-sm-text h4 {
  font-family: var(--ds-font-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--scheme-card-fg, var(--ds-ink));
  margin: 0 0 var(--ds-space-2) 0;
  line-height: var(--ds-lh-display, 1.15);
}
.block-image-blocks-sm .image-blocks-sm-text h3 { font-size: var(--ds-fs-h3, 1.5rem); }
.block-image-blocks-sm .image-blocks-sm-text h4 { font-size: var(--ds-fs-h4, 1.25rem); }

.block-image-blocks-sm .image-blocks-sm-text p {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body, 1.6);
  color: var(--scheme-card-fg, var(--ds-ink));
  margin: 0 0 var(--ds-space-2) 0;
}
.block-image-blocks-sm .image-blocks-sm-text p:last-child { margin-bottom: 0; }

/* Hover overlay (smaller type than image-blocks) */
/* WAVE3-F04 (2026-05-08) — F-T4-07: Pattern B local scheme rebind. Self-contained
   dark scrim over a photo; on a .scheme-paper ancestor --scheme-fg resolves to
   ink, so the `#fff` fallback never fires. Rebind locally so all descendants
   (title / subtitle / cta) read white-on-dark. Doctrine §63-89 + §175. */
.block-image-blocks-sm .image-blocks-sm-overlay {
  --scheme-bg: rgba(0, 0, 0, 0.7);
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255, 255, 255, 0.92);
  --scheme-fg-mute: rgba(255, 255, 255, 0.78);
  --scheme-rule: rgba(255, 255, 255, 0.18);
  /* Defensive — catches descendants that wrongly read --ds-ink directly. */
  --ds-ink: #fff;
  --ds-ink-soft: rgba(255, 255, 255, 0.92);
  --ds-ink-mute: rgba(255, 255, 255, 0.78);

  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--ds-space-4);
  color: var(--scheme-fg);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, var(--ibs-overlay-opacity, 0.6)) 0%,
    rgba(0, 0, 0, calc(var(--ibs-overlay-opacity, 0.6) * 0.5)) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 1;
  transition: opacity var(--ds-duration, 220ms) var(--ds-ease-out, ease-out);
}

.block-image-blocks-sm .image-blocks-sm-grid.ibs-overlay-ink .image-blocks-sm-overlay {
  background: linear-gradient(to top, color-mix(in srgb, var(--ds-ink) calc(var(--ibs-overlay-opacity, 0.6) * 100%), transparent) 0%, transparent 100%);
}
.block-image-blocks-sm .image-blocks-sm-grid.ibs-overlay-cta .image-blocks-sm-overlay {
  background: linear-gradient(to top, color-mix(in srgb, var(--ds-cta) calc(var(--ibs-overlay-opacity, 0.6) * 100%), transparent) 0%, transparent 100%);
}
.block-image-blocks-sm .image-blocks-sm-grid.ibs-overlay-accent .image-blocks-sm-overlay {
  background: linear-gradient(to top, color-mix(in srgb, var(--ds-accent) calc(var(--ibs-overlay-opacity, 0.6) * 100%), transparent) 0%, transparent 100%);
}

/* Senior-UX 2026-05-07: caption scrim must remain readable in resting state,
   not only on hover. Bumped resting opacity 0.6 → 0.92 to maintain ≥7:1 over
   the photo. Older users often skim without hovering. */
@media (hover: hover) {
  .block-image-blocks-sm .image-blocks-sm-card.has-caption .image-blocks-sm-overlay { opacity: 0.92; }
  .block-image-blocks-sm .image-blocks-sm-card.has-caption:hover .image-blocks-sm-overlay,
  .block-image-blocks-sm .image-blocks-sm-card.has-caption:focus-within .image-blocks-sm-overlay { opacity: 1; }
}

/* Senior-UX 2026-05-07: title is h3 → use humanist sentence-case (no Anton all-caps).
   Subtitle moved to full white for ≥7:1 contrast over the dark scrim.
   Line-height bumped to 1.5+ across the caption stack. */
.block-image-blocks-sm .image-blocks-sm-overlay__title {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-h4, 1.25rem);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 var(--ds-space-1) 0;
  line-height: var(--ds-lh-display, 1.2);
  color: var(--scheme-fg);
}

.block-image-blocks-sm .image-blocks-sm-overlay__subtitle {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm, 1rem);
  line-height: var(--ds-lh-body, 1.6);
  margin: 0 0 var(--ds-space-2) 0;
  color: var(--scheme-fg);
}

/* WAVE3-F04 (2026-05-08) — F-T4-05: pill always sits on the dark scrim, never
   on the section bg. Pin #fff text + CTA bg explicitly so:
   (a) on .scheme-paper, the inherited --scheme-fg (= ink) does not paint BLACK
       label inside the orange pill; and
   (b) on .ibs-overlay-cta the pill background is forced to ink so the orange
       pill does not vanish into an orange scrim. Doctrine §90-110. */
.block-image-blocks-sm .image-blocks-sm-overlay__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm, 1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  /* Visible filled-pill affordance for older eyes — replaces text-only ghost. */
  background: var(--ds-cta);
  padding: 6px 12px;
  border-radius: var(--ds-radius-pill, 999px);
}
/* If the overlay scrim is CTA-orange itself, switch the pill to ink so it
   stays visible (otherwise pill disappears into the scrim). Literal hex
   intentional — the parent overlay rebinds --ds-ink to #fff for descendant
   safety, so we cannot reference --ds-ink here. */
.block-image-blocks-sm .image-blocks-sm-grid.ibs-overlay-cta .image-blocks-sm-overlay__cta {
  background: #0e0f0c;
}
.block-image-blocks-sm .image-blocks-sm-overlay__cta svg { transition: transform var(--ds-duration, 220ms) var(--ds-ease-out, ease-out); }
.block-image-blocks-sm .image-blocks-sm-card.is-linked:hover .image-blocks-sm-overlay__cta svg,
.block-image-blocks-sm .image-blocks-sm-card.is-linked:focus-within .image-blocks-sm-overlay__cta svg {
  transform: translateX(2px);
}

/* Whole-card link */
.block-image-blocks-sm .image-blocks-sm-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-decoration: none;
  outline: none;
}
.block-image-blocks-sm .image-blocks-sm-card__link:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius);
}
.block-image-blocks-sm .image-blocks-sm-card__link .visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.block-image-blocks-sm .image-blocks-sm-grid[data-overlay="off"] .image-blocks-sm-overlay { display: none; }

/* Responsive
   SWEEP-A3 2026-05-08: bug — `.ibs-cols-N` author class lives at the same
   specificity as the unscoped responsive selectors but is declared LATER in
   this file, so it was overriding the small-screen overrides (cards rendered
   3-up at 375 px → ~104 × 78 px tiles, captions covered the entire image).
   Fix: bump specificity inside each breakpoint by chaining the same class
   onto the responsive selector so the breakpoint wins regardless of the
   author choice. Older customers (45-70+ ICP) need single-column on phones
   so captions remain readable. */
@media (max-width: 992px) {
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-4,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-5,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .block-image-blocks-sm .image-blocks-sm-grid,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-2,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-3,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-4,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-5,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .block-image-blocks-sm .image-blocks-sm-grid,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-2,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-3,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-4,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-5,
  .block-image-blocks-sm .image-blocks-sm-grid.ibs-cols-6 {
    grid-template-columns: minmax(0, 1fr);
  }
  .block-image-blocks-sm .image-blocks-sm-overlay {
    padding: var(--ds-space-3);
  }
}

/* ─────────────────────────────────────────────────────────────────
   FIX-T8 Wave-6 — Image-Scaling Guard
   Hard-cap all <img> inside this block; clamp container height.
   ───────────────────────────────────────────────────────────── */
.block-image-blocks-sm img,
.block-image-blocks-sm .image-blocks-sm-image__img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
/* W9-A5 — preserve `contain` mode against the FIX-T8 cover guard above */
.block-image-blocks-sm .image-blocks-sm-card.ibs-fit-contain img,
.block-image-blocks-sm .image-blocks-sm-card.ibs-fit-contain .image-blocks-sm-image__img {
  object-fit: contain;
}
.block-image-blocks-sm .image-blocks-sm-image,
.block-image-blocks-sm .image-blocks-sm-card {
  max-width: 100%;
  overflow: hidden;
}
.block-image-blocks-sm .image-blocks-sm-image {
  max-height: 60vh;
}
.block-image-blocks-sm .image-blocks-sm-image > .image-blocks-sm-image__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.block-image-blocks-sm img[width],
.block-image-blocks-sm img[height] {
  width: 100% !important;
  height: 100% !important;
}