/* ─────────────────────────────────────────────────────────────────
   block-products — Service packages for a construction / facility-
   services site. Horizontal card layout (icon column + content
   column). Differentiated from 30._pricing (vertical 3-tier columns)
   so the two modules don't visually duplicate each other.

   T5 redesign 2026-05-06: original e-commerce product-card grid.
   WAVE-10 W10-A3 2026-05-07: pivot to construction service-packages.
     • Horizontal card (icon left, content + CTA right) at ≥768px.
     • Stacks to vertical on mobile (icon top, content below).
     • 2-up grid at desktop (so 3-4 cards = 1.5 / 2 rows of pairs).
     • Module-scoped, tokens-only, no hex defaults.
     • W9-A13 ct-mark--yes feature checks (currentColor stroke).
     • prefers-reduced-motion guards.
   ───────────────────────────────────────────────────────────── */

.block-products {
  font-family: var(--ds-font-body);
  color: var(--scheme-fg);
}

/* ── Grid: 2-up horizontal cards on desktop, 1-up on mobile ─── */
.block-products .products-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-5);
}

@media (max-width: 992px) {
  .block-products .products-grid {
    grid-template-columns: 1fr;
    gap: var(--ds-space-4);
  }
}

.block-products .products-card-wrap { display: flex; }

/* ── Card shell ───────────────────────────────────────────────
   Horizontal at desktop: flex-direction row, icon on left.
   Stacks at mobile: flex-direction column. */
.block-products .products-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  background: var(--scheme-card-bg);
  color: var(--scheme-card-fg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius-lg, 16px);
  overflow: hidden;
  box-shadow: var(--ds-shadow-md);
  transition: transform var(--ds-duration, 250ms) var(--ds-ease-out, ease),
              box-shadow var(--ds-duration, 250ms) var(--ds-ease-out, ease),
              border-color var(--ds-duration, 250ms) var(--ds-ease-out, ease);
}

@media (prefers-reduced-motion: no-preference) {
  .block-products .products-card:hover,
  .block-products .products-card:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--ds-shadow-lg);
    border-color: var(--ds-cta);
  }
}

.block-products .products-card.is-highlighted {
  border-color: var(--ds-cta);
  box-shadow: var(--ds-shadow-cta);
}

/* ── Icon column ─────────────────────────────────────────────
   Soft paper-tone wash so the icon panel reads as a distinct chunk
   without screaming. CTA-orange on highlighted variant. */
.block-products .products-card-icon {
  flex: 0 0 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-paper, #faf6ec);
  color: var(--ds-cta);
  border-right: 1px solid var(--scheme-rule);
  padding: var(--ds-space-4);
}

/* WAVE3-F05 2026-05-08 (CRITICAL): glyph was ink-on-orange (~2.5:1)
   on default scheme via `var(--scheme-fg, #fff)` fallback antipattern.
   Pin glyph to literal #fff — the icon panel is always orange when
   .is-highlighted, so the SVG must always be white regardless of
   outer scheme. */
.block-products .products-card.is-highlighted .products-card-icon {
  background: var(--ds-cta);
  color: #fff;
  border-right-color: var(--ds-cta);
}

.block-products .products-card-icon-img {
  display: block;
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
}
.block-products .products-card-icon svg {
  display: block;
  width: 40px;
  height: 40px;
}

@media (max-width: 600px) {
  .block-products .products-card { flex-direction: column; }
  .block-products .products-card-icon {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--scheme-rule);
    padding: var(--ds-space-4);
  }
  .block-products .products-card.is-highlighted .products-card-icon {
    border-bottom-color: var(--ds-cta);
  }
}

/* ── Body ──────────────────────────────────────────────────── */
.block-products .products-card-body {
  position: relative;
  padding: var(--ds-space-5);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--ds-space-2);
}

/* WAVE3-F05 2026-05-08: pin to #fff — fallback antipattern was
   producing ink-on-orange under default scheme. Bumped font-size
   to 19px (was 14px / --ds-fs-eyebrow) so the white-on-#e36218
   pill (≈ 3.48:1) qualifies as AA Large at 700w (≥18.66 boundary). */
.block-products .products-badge {
  align-self: flex-start;
  display: inline-block;
  background: var(--ds-cta);
  color: #fff;
  font-family: var(--ds-font-body);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px var(--ds-space-2);
  border-radius: var(--ds-radius, 8px);
  margin-bottom: 2px;
}

.block-products .products-card-eyebrow {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-eyebrow, 0.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-trust);
  font-weight: 700;
}

/* SENIOR-T4 (2026-05-07): h3 promoted from Anton-uppercase to humanist
   sentence-case (presbyopia: condensed all-caps body destroys word-shape
   cues). Now matches new design-system .ds-h3-humane utility — DM Sans
   bold, sentence case, 24 px (1.5rem), 1.15 display line-height. */
/* WAVE3-F05 2026-05-08: switched to --scheme-card-fg for consistency
   with subtitle/feature/price-unit. The card sets card-bg/card-fg
   correctly, so reading card-fg ensures legibility regardless of the
   outer scheme's --ds-ink rebind. */
.block-products .products-card-title {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-h3, 1.5rem);
  font-weight: 700;
  line-height: var(--ds-lh-display, 1.15);
  margin: 0;
  color: var(--scheme-card-fg, var(--ds-ink));
  text-transform: none;
  letter-spacing: 0;
}

/* WAVE3-F05 2026-05-08: was `var(--scheme-fg)` — on a card whose
   --scheme-card-bg=#fff inside a .scheme-ink section, the OUTER
   --scheme-fg=#fff inherited → white-on-white inside the card.
   Use --scheme-card-fg which is bound to the card's effective bg. */
.block-products .products-card-subtitle {
  font-family: var(--ds-font-body);
  /* SENIOR-T4: subtitle bumped from 1rem (16px) to humane 1.125rem (18px) */
  font-size: var(--ds-fs-body, 1.125rem);
  color: var(--scheme-card-fg, var(--scheme-fg));
  margin: 0;
  line-height: var(--ds-lh-body, 1.6);
}

/* ── Features list with W9-A13 ct-mark--yes ──────────────────
   Module-scoped, currentColor stroke, no global mask-image. */
.block-products .products-card-features {
  list-style: none;
  margin: var(--ds-space-2) 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
}

/* SENIOR-T4: feature bullets bumped from 0.9375rem (15px) to humane
   16 px+ floor; line-height 1.6 for vertical scan accuracy.
   WAVE3-F05 2026-05-08: switched to --scheme-card-fg — see subtitle
   note above for the white-on-white-inside-card rationale. */
.block-products .products-card-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm, 1rem);
  line-height: var(--ds-lh-body, 1.6);
  color: var(--scheme-card-fg, var(--scheme-fg));
  font-weight: 600;
  letter-spacing: 0.005em;
}

.block-products .products-card-feature .ct-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  line-height: 1;
}

.block-products .products-card-feature .ct-mark--yes { color: var(--ds-trust); }
.block-products .products-card.is-highlighted .products-card-feature .ct-mark--yes { color: var(--ds-cta); }

.block-products .products-card-feature .ct-mark--yes svg {
  width: 18px;
  height: 18px;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .block-products .products-card-feature .ct-mark--yes svg {
    transition: transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease);
  }
  .block-products .products-card-feature:hover .ct-mark--yes svg {
    transform: scale(1.08);
  }
}

.block-products .products-card-feature-text { display: inline-block; }

/* ── Footer (price + CTA) ──────────────────────────────────── */
.block-products .products-card-footer {
  margin-top: auto;
  padding-top: var(--ds-space-3);
  border-top: 1px solid var(--scheme-rule);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

.block-products .products-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.block-products .products-card-price {
  font-family: var(--ds-font-display);
  font-size: 1.875rem; /* SENIOR-T4: 30px — comfortably readable for primary numeric */
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ds-cta);
  line-height: 1.05;
}

/* SENIOR-T4 (2026-05-07): price unit (e.g. "/ month") bumped to humane
   ≥ 18 px with 1.5+ line-height — was 0.875rem (≈14 px) which fails
   AARP minimums for an older reader confirming a price commitment.
   WAVE3-F05 2026-05-08: switched to --scheme-card-fg — see subtitle. */
.block-products .products-card-price-unit {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body, 1.125rem);
  line-height: 1.5;
  color: var(--scheme-card-fg, var(--scheme-fg));
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── CTA row ───────────────────────────────────────────────── */
.block-products .products-card-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}

/* WAVE3-F05 2026-05-08: pin to #fff — fallback antipattern was
   producing ink-on-orange (≈ 2.5:1, fail) on default scheme. Bumped
   font-size to 19px so white-on-#e36218 (≈ 3.48:1) qualifies as AA
   Large at 700w (≥18.66 boundary). --ds-fs-body resolves to 18px
   which sits just below the boundary. */
.block-products .products-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* SENIOR-T4 (2026-05-07): primary CTA ≥ 56 px height per AARP */
  min-height: var(--ds-touch-target-primary, 56px);
  padding: 14px var(--ds-space-4);
  background: var(--ds-cta);
  color: #fff;
  font-family: var(--ds-font-body);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 2px solid var(--ds-cta);
  border-radius: var(--ds-radius, 8px);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease),
              transform var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease),
              box-shadow var(--ds-duration-fast, 150ms) var(--ds-ease-out, ease);
}

/* SENIOR-T4: high-contrast focus ring usable on light + dark schemes */
.block-products .products-card-cta:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

.block-products .products-card-cta:hover,
.block-products .products-card-cta:focus-visible {
  background: var(--ds-cta-hover, var(--ds-cta-dk));
  border-color: var(--ds-cta-hover, var(--ds-cta-dk));
  color: #fff;
  text-decoration: none;
  box-shadow: var(--ds-shadow-cta);
}

@media (prefers-reduced-motion: no-preference) {
  .block-products .products-card-cta:hover,
  .block-products .products-card-cta:focus-visible {
    transform: translateY(-1px);
  }
}

.block-products .products-card-secondary {
  display: inline-flex;
  align-items: center;
  /* SENIOR-T4: secondary link min height ≥ 48 px for finger ergonomics */
  min-height: var(--ds-touch-target, 48px);
  padding: 10px var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body, 1.125rem);
  font-weight: 700;
  color: var(--ds-trust);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.01em;
  background: transparent;
  border-radius: var(--ds-radius, 8px);
}

.block-products .products-card-secondary:hover,
.block-products .products-card-secondary:focus-visible {
  color: var(--ds-cta);
  text-decoration: underline;
}
.block-products .products-card-secondary:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* ── Mobile primary CTA tap-target boost ─────────────────────── */
@media (max-width: 768px) {
  .block-products .products-card-cta {
    width: 100%;
    min-height: 52px;
  }
  .block-products .products-card-cta-row { flex-direction: column; align-items: stretch; }
  .block-products .products-card-secondary { justify-content: center; }
}

@media (max-width: 600px) {
  /* SENIOR-T4: keep title at 24 px (var(--ds-fs-h3)) on phones — never
     drop below the .ds-h3-humane floor or older readers lose hierarchy. */
  .block-products .products-card-title { font-size: var(--ds-fs-h3, 1.5rem); }
  .block-products .products-card-price { font-size: 1.625rem; }
  .block-products .products-card-body { padding: var(--ds-space-4); }
}