/* ─────────────────────────────────────────────────────────────────
   block-image-button-text-card — hero card with body + 16:9 cover
   image + multi-touch CTA cluster.
   Per spec (Team-2 CRO pass, May 2026):
     - card padding 24px
     - rounded 12px (--ds-radius)
     - image object-fit: cover, 16:9 aspect-ratio
     - hover lift (box-shadow step-up)
     - CTA at bottom, image lazy-loaded (template)
     - urgency pill, social-proof, secondary link, trust line
   ───────────────────────────────────────────────────────────────── */

/* Defensive: prevent image overscaling regardless of source dimensions.
   Excludes .ibtc-image (which intentionally fills the 16:9 aspect-ratio wrapper). */
.block-image-button-text-card img:not(.ibtc-image) {
  max-width: 100%;
  height: auto;
}

.block-image-button-text-card .ibtc-card {
  border-radius: var(--ds-radius); /* 12px per spec */
  box-shadow: var(--ds-shadow-sm);
  background: var(--scheme-card-bg, #fff);
  border: 1px solid var(--scheme-rule, rgba(14,15,12,0.06));
  transition: transform 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
}
.block-image-button-text-card .ibtc-card:hover,
.block-image-button-text-card .ibtc-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}

.block-image-button-text-card .ibtc-card-body {
  padding: 24px; /* per spec */
}
@media (min-width: 768px) {
  .block-image-button-text-card .ibtc-card-body {
    padding: var(--ds-space-7) var(--ds-space-6);
  }
}

/* Hierarchy: H2 max 56px / 32px mobile, line-height 1.1 */
.block-image-button-text-card h1,
.block-image-button-text-card h2,
.block-image-button-text-card h3 {
  font-family: var(--ds-font-heading, var(--ds-font-display));
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--scheme-card-fg);
  margin: 0 0 var(--ds-space-4) 0;
  line-height: 1.1;
  text-transform: uppercase;
}
.block-image-button-text-card h2 {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  max-width: 22ch;
}
.block-image-button-text-card h3 { font-size: var(--ds-fs-display-md); }

.block-image-button-text-card p {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-lg, 1.25rem);
  line-height: var(--ds-lh-body, 1.6);
  /* WAVE3-F02: card descendant — read scheme-card-fg (parent ibtc-card uses scheme-card-bg). */
  color: var(--scheme-card-fg, var(--scheme-fg));
  margin: 0 0 var(--ds-space-4) 0;
  max-width: 60ch;
}
.block-image-button-text-card p:last-child { margin-bottom: 0; }

/* Eyebrow above heading */
.block-image-button-text-card h6 {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-eyebrow, 0.875rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* WAVE3-F02: was `var(--ds-cta)` (#e36218) on paper = 3.26-3.48 — fails AA body
     for 14px+700w eyebrow per browser audit (line 515). Use --ds-cta-dk (~5.0:1). */
  color: var(--ds-cta-dk, var(--ds-cta));
  font-weight: 700;
  margin: 0 0 var(--ds-space-3) 0;
}
/* WAVE3-F02 Pattern C: orange eyebrow on accent/trust/ink/steel collapses. */
.scheme-accent .block-image-button-text-card h6,
.scheme-trust  .block-image-button-text-card h6,
.scheme-ink    .block-image-button-text-card h6,
.scheme-steel  .block-image-button-text-card h6 { color: var(--scheme-card-fg, var(--scheme-fg)); }

.block-image-button-text-card ul {
  padding-left: 1.2em;
  margin: 0 0 var(--ds-space-4) 0;
}
.block-image-button-text-card ul li {
  /* WAVE3-F02: card descendant. */
  color: var(--scheme-card-fg, var(--scheme-fg));
  font-size: var(--ds-fs-body, 1.125rem);
  margin-bottom: var(--ds-space-2);
  line-height: var(--ds-lh-body, 1.6);
}
.block-image-button-text-card ul li strong { color: var(--scheme-card-fg); }

.block-image-button-text-card .ibtc-align-center .ibtc-content {
  text-align: center;
  margin-left: auto; margin-right: auto;
}

/* Media column: 16:9 cover image */
.block-image-button-text-card .ibtc-media-col {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  text-align: center;
}
.ibtc-media-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ds-radius);
  overflow: hidden;
  background: var(--scheme-card-bg, rgba(14,15,12,0.04));
  box-shadow: var(--ds-shadow-sm);
}
.ibtc-media-wrap .ibtc-media-link {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--ds-radius);
  overflow: hidden;
}
.ibtc-image,
.block-image-button-text-card .ibtc-image {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* CTA stack at bottom of media column */
.ibtc-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-3);
  padding-top: var(--ds-space-2);
}

/* Primary CTA */
.block-image-button-text-card .ibtc-primary,
.block-image-button-text-card .btn,
.block-image-button-text-card .btn-primary {
  min-height: var(--ds-touch-target-primary, 56px);
  padding: 1rem 1.8rem;
  font-size: var(--ds-fs-body-lg, 1.25rem);
  font-weight: 700;
  background: var(--ds-cta);
  border-color: var(--ds-cta);
  /* WAVE3-F02: explicit white. Was `var(--scheme-fg, #fff)` — anti-pattern. */
  color: #fff;
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-cta);
  transition: transform 150ms ease, filter 150ms ease, background 150ms ease;
  text-decoration: none;
  margin-top: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.block-image-button-text-card .ibtc-primary:hover,
.block-image-button-text-card .ibtc-primary:focus,
.block-image-button-text-card .btn-primary:hover,
.block-image-button-text-card .btn-primary:focus {
  transform: translateY(-1px);
  filter: brightness(1.05);
  background: var(--ds-cta-dk);
  border-color: var(--ds-cta-dk);
  /* WAVE3-F02: explicit white on hover. */
  color: #fff;
}
.block-image-button-text-card .ibtc-primary:focus-visible,
.block-image-button-text-card .btn-primary:focus-visible {
  outline: 2px solid var(--ds-cta);
  outline-offset: 4px;
}
.block-image-button-text-card .ibtc-primary:active,
.block-image-button-text-card .btn-primary:active { transform: translateY(0); }

/* Urgency pill */
.ibtc-urgency-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: 0.45rem 0.9rem;
  margin-bottom: var(--ds-space-4);
  background: color-mix(in srgb, var(--ds-cta) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ds-cta) 55%, transparent);
  border-radius: var(--ds-radius-pill);
  color: var(--ds-cta-dk);
  font-size: var(--ds-fs-eyebrow, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--ds-font-body);
}
.ibtc-urgency-icon { display: inline-flex; color: var(--ds-cta); }
.ibtc-urgency-icon--flame { color: var(--ds-cta-dk); }

/* Social proof stack */
.ibtc-social-proof {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin-top: var(--ds-space-3);
}
.ibtc-avatar-stack {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ibtc-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: -10px;
  border: 2px solid var(--scheme-card-bg, #fff);
  background: var(--ds-paper-2, #f3ecda);
  box-shadow: var(--ds-shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ibtc-avatar:first-child { margin-left: 0; }
.ibtc-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ibtc-avatar-initial {
  font-family: var(--ds-font-body);
  font-weight: 700;
  font-size: 0.78rem;
  /* WAVE3-F02: avatar bg hardcoded paper-2 — pin initial dark. */
  color: #1a1a1a;
  line-height: 1;
}
.ibtc-proof-count {
  /* WAVE3-F02: card descendant. */
  color: var(--scheme-card-fg, var(--scheme-fg));
  font-size: var(--ds-fs-body-sm, 1rem);
  line-height: 1.4;
}

/* Secondary link */
.ibtc-secondary-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ds-touch-target, 48px);
  padding: 0.5rem 0.25rem;
  /* WAVE3-F02: card descendant — explicit scheme-card-fg per doctrine §4. */
  color: var(--scheme-card-fg, var(--scheme-fg));
  font-size: var(--ds-fs-body, 1.125rem);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ds-cta);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: color 150ms ease;
}
.ibtc-secondary-link:hover,
.ibtc-secondary-link:focus {
  color: var(--scheme-card-fg, var(--scheme-fg));
  text-decoration-color: var(--ds-cta);
}
.ibtc-secondary-link:focus-visible {
  outline: 2px solid var(--ds-cta);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Trust microcopy */
.block-image-button-text-card .ibtc-trust {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm, 1rem);
  /* WAVE3-F02: card descendant. */
  color: var(--scheme-card-fg, var(--scheme-fg));
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 500;
  margin: 0;
  line-height: var(--ds-lh-body, 1.6);
  max-width: 60ch;
}

@media (max-width: 992px) {
  .block-image-button-text-card .ibtc-card-body { padding: var(--ds-space-6) var(--ds-space-5); }
  .block-image-button-text-card .col-lg-6 + .col-lg-6 { margin-top: var(--ds-space-5); }
}

@media (max-width: 600px) {
  .block-image-button-text-card .ibtc-card-body { padding: 24px; }
  .block-image-button-text-card h2 { font-size: 2rem; }
}

@media (max-width: 575.98px) {
  .block-image-button-text-card .ibtc-primary,
  .block-image-button-text-card .btn-primary {
    width: 100%;
    min-height: var(--ds-touch-target-primary, 56px);
    padding: 1rem 1rem;
  }
  .ibtc-cta-stack { align-items: stretch; text-align: center; }
}

/* Primary CTA style variants (admin-selectable) */
.block-image-button-text-card .ibtc-primary--ghost {
  background: color-mix(in srgb, var(--ds-cta) 8%, transparent);
  border: 2px solid var(--ds-cta);
  color: var(--ds-cta-dk, var(--ds-cta));
  box-shadow: none;
}
.block-image-button-text-card .ibtc-primary--ghost:hover,
.block-image-button-text-card .ibtc-primary--ghost:focus {
  background: var(--ds-cta);
  /* WAVE3-F02: explicit white on hover (filled-orange bg). */
  color: #fff;
  border-color: var(--ds-cta);
}

.block-image-button-text-card .ibtc-primary--ink {
  background: var(--ds-ink);
  border-color: var(--ds-ink);
  color: var(--ds-paper);
}
.block-image-button-text-card .ibtc-primary--ink:hover,
.block-image-button-text-card .ibtc-primary--ink:focus {
  background: var(--ds-ink, #000);
  border-color: var(--ds-ink, #000);
  /* WAVE3-F02: keep paper text on hover. Was `var(--scheme-fg, #fff)`; on light schemes
     scheme-fg = ds-ink, so hover collapsed to ink-on-ink (1.0:1). Pin to ds-paper
     so the ink-bg button stays paper-on-ink (~21:1). */
  color: var(--ds-paper);
}

@media (prefers-reduced-motion: reduce) {
  .block-image-button-text-card .ibtc-card,
  .block-image-button-text-card .ibtc-primary,
  .block-image-button-text-card .btn-primary {
    transition: none !important;
  }
  .block-image-button-text-card .ibtc-card:hover,
  .block-image-button-text-card .ibtc-card:focus-within,
  .block-image-button-text-card .ibtc-primary:hover,
  .block-image-button-text-card .btn-primary:hover {
    transform: none !important;
  }
}


/* ── Bug fix 2026-05-07-bugs (Team-T1): defend against #features ul li::before
   and ul.list-checked li::before global checkmark leak (theme.min.css).
   Body markdown <ul>/<li> render with default disc bullets; no pseudo-element
   decoration is intended. Parity with icons-text fix. ── */
.block-image-button-text-card ul li::before,
.block-image-button-text-card .ibtc-content ul li::before,
.block-image-button-text-card .ibtc-avatar-stack li::before {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* ── Sweep-T02 (2026-05-08): card padding specificity bump + sticky-CTA clearance ──
   1. design-system.css ships `.ds-card .card-body, .section .card .card-body { padding: var(--ds-space-5) }`
      which wins over `.block-image-button-text-card .ibtc-card-body` on a 0,3,0 vs 0,2,0
      specificity tie. Spec calls for 24px on mobile and 48/32 on ≥768. Re-state with
      a stronger selector so the spec actually renders.
   2. On viewports ≤900 px the global #acme-sticky-cta covers .ibtc-trust /
      .ibtc-secondary-link when the card is scrolled to bottom. Reserve 96 px clearance.
*/
.section .block-image-button-text-card .card.ibtc-card .card-body.ibtc-card-body,
.block-image-button-text-card .card.ibtc-card .card-body.ibtc-card-body {
  padding: 24px;
}
@media (min-width: 768px) {
  .section .block-image-button-text-card .card.ibtc-card .card-body.ibtc-card-body,
  .block-image-button-text-card .card.ibtc-card .card-body.ibtc-card-body {
    padding: var(--ds-space-7) var(--ds-space-6);
  }
}
@media (max-width: 992px) {
  .section .block-image-button-text-card .card.ibtc-card .card-body.ibtc-card-body,
  .block-image-button-text-card .card.ibtc-card .card-body.ibtc-card-body {
    padding: var(--ds-space-6) var(--ds-space-5);
  }
}
@media (max-width: 600px) {
  .section .block-image-button-text-card .card.ibtc-card .card-body.ibtc-card-body,
  .block-image-button-text-card .card.ibtc-card .card-body.ibtc-card-body {
    padding: 24px;
  }
}

@media (max-width: 900px) {
  .block-image-button-text-card {
    padding-bottom: calc(var(--ds-space-5, 1.5rem) + var(--ds-sticky-cta-clearance, 96px));
  }
}
