/* ─────────────────────────────────────────────────────────────────
   block-image-blocks — service/feature cards with photos
   Card surface, hover, image radius inherit from .section .card
   in design-system.css. Only block-unique layout below (wide variant
   keeps photo full-height on right at desktop, stacks under text
   below 991px).
   ───────────────────────────────────────────────────────────── */

/* Headings inside cards */
.block-image-blocks .image-blocks-card h1,
.block-image-blocks .image-blocks-card h2,
.block-image-blocks .image-blocks-card h3,
.block-image-blocks .image-blocks-card h4 {
  font-family: var(--ds-font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--scheme-card-fg);
  margin: 0 0 var(--ds-space-3) 0;
  line-height: 1.15;
  text-transform: uppercase;
}

.block-image-blocks .image-blocks-card h2 { font-size: var(--ds-fs-display-md); }
.block-image-blocks .image-blocks-card h3 { font-size: var(--ds-fs-display-sm); }

.block-image-blocks .image-blocks-card p {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: 1.6;
  color: var(--scheme-fg-soft);
  margin: 0 0 var(--ds-space-3) 0;
}

.block-image-blocks .image-blocks-card p:last-child { margin-bottom: 0; }

/* Standard card image — sits below the text. Top margin only;
   width/radius/object-fit handled by .ds-image / .ds-image-card. */
.block-image-blocks .image-blocks-card .card-body img {
  margin-top: var(--ds-space-4);
}

/* ── Wide card variant ─────────────────────────────────────────
   Photo flows full-height on the right at desktop, stacks below
   the text on mobile. The wide card needs zero card-body padding
   so the image can bleed to the card edge. */
.block-image-blocks .image-blocks-card--wide .card-body {
  padding: 0;
}

.block-image-blocks .image-blocks-card--wide .image-blocks-text {
  padding: var(--ds-space-7) var(--ds-space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.block-image-blocks .image-blocks-card--wide .image-blocks-image {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}

/* Wide-variant image: absolute fill so it spans full card height
   regardless of text column height. Override the .ds-image
   block-level / aspect-ratio defaults here — this is the documented
   exception in the spec for the wide pattern. */
.block-image-blocks .image-blocks-card--wide .image-blocks-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: cover;
  margin-top: 0;
}

/* Mobile: stack image below text */
@media (max-width: 991px) {
  .block-image-blocks .image-blocks-card--wide .image-blocks-text {
    padding: var(--ds-space-5);
  }
  .block-image-blocks .image-blocks-card--wide .image-blocks-image {
    position: relative;
    min-height: 220px;
  }
  .block-image-blocks .image-blocks-card--wide .image-blocks-image img {
    position: relative;
    height: auto;
    min-height: 220px;
  }
}

@media (max-width: 600px) {
  .block-image-blocks .image-blocks-card--wide .image-blocks-text { padding: var(--ds-space-4); }
}