/* ============================================================
   Contactable — Biometric Verification page styles
   Shared archetypes (hero, challenge, verify/tabs) now live in
   css/capability.css under cap-* classes. This file holds only
   biometric-specific bits: the bespoke Solution section and a
   couple of per-page overrides.
   Loads after iip.css + capability.css.
   ============================================================ */

/* ===== Per-page overrides on shared archetypes ===== */
/* biometric challenge photo is a touch shorter than the cap default */
@media (min-width: 901px) {
  .biov-challenge__img-wrap { aspect-ratio: 620 / 609; }  /* ≥901 only: stacked shows full photo */
}

/* ===== The Solution (bespoke: copy left, image right) ===== */
.biov-solution {
  background: #f2f2f2;
  padding: 112px 0;
}
.biov-solution__inner {
  display: flex;
  gap: 80px;
  align-items: center;
  min-height: 486px;
}
.biov-solution__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.biov-solution__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.biov-solution__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  line-height: 1.1;
  color: #f54c2c;
  margin: 0;
}
.biov-solution__text {
  font-size: 18px;
  line-height: 1.6;
  color: #0f1e6d;
  margin: 0;
}
.biov-solution__img-wrap {
  flex: 0 0 auto;
  width: min(670px, 50%);
  aspect-ratio: 670 / 486;
  border-radius: 30px;
  overflow: hidden;
}
.biov-solution__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Responsive — solution section only (shared archetypes are
   handled in capability.css)
   ============================================================ */
@media (max-width: 900px) {
  /* Solution — stack (image on top), centre the copy + button */
  .biov-solution { padding: 72px 0; }
  .biov-solution__inner { flex-direction: column-reverse; gap: 40px; align-items: center; min-height: 0; }
  .biov-solution__content { align-items: center; text-align: center; }
  .biov-solution__img-wrap { width: 100%; max-width: 540px; }

  /* Final CTA */
  .final { padding-top: 96px; padding-bottom: 96px; }
}

/* Final CTA (BV only) — short heading reads better stacked + centred:
   one-line heading, then the subheading, then the buttons (single column
   at all widths, overriding the shared 2-column desktop layout). */
.final__inner { grid-template-columns: 1fr; gap: 32px; text-align: center; justify-items: center; }
.final__right { align-items: center; }
.final__actions { justify-content: center; }