/* web/themes/techprosolutions/css/components/hero-orbital-trust.css */

/* Self-hosted Manrope — no Google Fonts CDN (DPDP Act / privacy). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../../fonts/Manrope-VariableFont_wght.woff2?v=2') format('woff2-variations'),
       url('../../fonts/Manrope-VariableFont_wght.woff2?v=2') format('woff2');
}

/* ============================================================
   Tokens — LIGHT hero. Navy #1C3557 = heading/text, green
   #3CB944 = accent, near-white #F7FAF9 = background.
   Desktop-first: base styles target >= 992px; a single
   max-width:991px query handles tablet/mobile.
   ============================================================ */
.hero-orbital-trust {
  --hero-bg: #F7FAF9;
  --hero-text-primary: #1C3557;
  --hero-text-secondary: #45464F;
  --hero-card-bg: #ffffff;
  --hero-card-text: #1C3557;
  --hero-card-text-muted: #45464F;
  --hero-accent-green: #3CB944;
  --hero-radius-card: 12px;
  --hero-radius-pill: 9999px;

  position: relative;
  z-index: 1;                 /* paint above the seam-tightened next section (see margin-bottom) */
  overflow: hidden;           /* clips orbit + floats; no horizontal scroll */
  box-sizing: border-box;
  /* Phase 1b — tighten the "massive" seam to the next section (persona slider).
     The hero's OWN bottom stays flush (portrait locked to the edge), so instead
     of adding padding we pull the next section UP by 48px with a negative margin;
     z-index:1 keeps the hero on top so the portrait/stats are never covered.
     Global --et-section-pad-y is untouched — only this hero seam changes. */
  margin-bottom: -2rem;       /* -48px → seam 80px → 32pxvar(--hero-bg) */
  color: var(--hero-text-primary);
  font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hero-orbital-trust *,
.hero-orbital-trust *::before,
.hero-orbital-trust *::after { box-sizing: border-box; }

/* ============================================================
   Macro layout & restraint — strict two-column grid.
   ============================================================ */
.hero-container {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  /* Phase 1a — hero-only TOP override. The global 5rem section rhythm left too
     much air under the header, so the hero tightens its top to 2rem (32px).
     Bottom stays 0 — the portrait sits flush at the section's bottom edge
     (locked). The global --et-section-pad-y token is deliberately NOT consumed
     here, so every OTHER section keeps the 5rem rhythm. */
  padding: 2rem 2rem 0 2rem;  /* 32px top — 4px grid (was var(--et-section-pad-y) 5rem/80px) */
  align-items: stretch;
}

/* Field wrappers must collapse so split text stays inline. */
.hero__title .field,
.hero__eyebrow .field,
.hero-cta-card__title .field,
.hero-cta-card__desc .field,
.hero-stat__number .field,
.hero-stat__label .field,
.hero-float__title .field,
.hero-float__subtitle .field { display: inline; margin: 0; }

/* ============================================================
   LEFT COLUMN
   ============================================================ */
.hero-column-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;               /* let long content shrink, never overflow */
}

.hero__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin: 0 0 1rem;
  padding: 8px 16px; /* 4px grid (was 6px 14px) */
  border-radius: var(--hero-radius-pill);
  background-color: rgba(60, 185, 68, 0.14);
  color: var(--hero-text-primary);
  font-size: var(--et-overline-size, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--hero-radius-pill);
  background-color: var(--hero-accent-green);
}

.hero__title {
  margin: 0 0 1rem;
  /* H1 token — locked compact hero scale (48px desktop / 36px mobile). */
  font-family: 'Manrope', sans-serif; /* beats the base theme's h1-h6 Roboto rule */
  font-size: var(--et-h1-size, 3rem);
  line-height: var(--et-h1-lh, 1.15);
  font-weight: var(--et-h1-weight, 800);
  letter-spacing: var(--et-h1-track, -0.02em);
  color: var(--hero-text-primary);
}
.hero__title-hl { color: var(--et-highlight-green, #28aa4a); } /* global dual-heading accent */

.hero__subtitle {
  max-width: 85%;
  margin: 0 0 2.5rem;
  color: var(--hero-text-secondary);
  font-size: var(--et-body-size, 1rem);
  line-height: var(--et-body-lh, 1.6);
  font-weight: 400;
}
.hero__subtitle p { margin: 0; }

/* ---------- CTA cards — compact elegance ---------- */
.hero-cta-wrapper {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.hero-cta-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 1.5rem;
  border-radius: var(--hero-radius-card);
  background-color: var(--hero-card-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  color: var(--hero-card-text);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-cta-card:hover {
  transform: translateY(-4px); /* 4px grid (was 3px) */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}
.hero-cta-card__icon { display: block; width: 32px; height: 32px; margin-bottom: 1rem; }
.hero-cta-card__icon img { width: 32px; height: 32px; object-fit: contain; }
.hero-cta-card__body { display: block; }
.hero-cta-card__title {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;            /* 16px */
  font-weight: 800;
  line-height: 1.25;
  color: var(--hero-card-text);
}
.hero-cta-card__desc {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--hero-card-text-muted);
  font-size: 0.8125rem;       /* 13px */
  line-height: 1.45;
  font-weight: 500;
}
.hero-cta-card__btn {
  margin-top: auto;           /* pin button to card bottom, aligned across cards */
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.5rem;     /* 8px 24px */
  border-radius: var(--hero-radius-pill);
  background-color: var(--hero-text-primary); /* navy — green fill + white text fails AA (~2.5:1) */
  color: #ffffff;
  font-size: 0.875rem;        /* 14px */
  font-weight: 700;
  letter-spacing: 0.02em;     /* bold button text — slight positive tracking */
  line-height: 1;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.hero-cta-card:hover .hero-cta-card__btn { background-color: #142A45; }
/* Second card = secondary action → outline button. #17835F is the AA-safe
   green (4.7:1 on white); brand #3CB944 fails for text/borders on white. */
.hero-cta-wrapper .hero-cta-card:nth-of-type(2) .hero-cta-card__btn {
  background-color: transparent;
  border: 2px solid #17835F;
  padding: 6px 22px;          /* +2px border = 8px 24px visual box */
  color: #17835F;
}
.hero-cta-wrapper .hero-cta-card:nth-of-type(2):hover .hero-cta-card__btn {
  background-color: #E8F5E9;  /* light wash, text stays AA */
  color: #14603F;
}

/* ---------- Stats bar — unified floating card, pinned to column bottom ----------
   One white card wraps ALL dynamic .hero-stat children; vertical dividers are
   drawn with ::after pseudo-elements so the backend markup is never touched. */
.hero-orbital-trust .hero-stats-wrapper {
  list-style: none;
  width: 100%;
  /* Phase 2 — margin-top:auto still drives the card down, but a small bottom
     margin lifts it just OFF the flush edge so it no longer looks jammed at the
     bottom — a subtle nudge, not a big gap. Only the LEFT column is affected;
     the portrait (right column) stays flush. */
  margin: auto 0 1rem;        /* 0 → 16px bottom: gentle lift off the edge */
  padding: 1.5rem 2rem;       /* 24px 32px */
  /* Grid, not flex: three EQUAL columns regardless of content width, so a wide
     figure ("₹500Cr+") can never squeeze its neighbours or the dividers. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  column-gap: 1.5rem;         /* 24px — the divider is centered inside this gap */
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
}
/* Each dynamic child: icon LEFT of stacked number + label. */
.hero-orbital-trust .hero-stat {
  position: relative;         /* anchors the ::before divider in the column gap */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;               /* 12px */
  min-width: 0;
  text-align: left;
}
/* Divider = zero-width pseudo, absolutely centered in the 24px column gap.
   It consumes NO column width, so both sides of the line always get an equal,
   guaranteed 12px — content can never touch or clip it. */
.hero-orbital-trust .hero-stat:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -0.75rem;             /* half the 24px column-gap → optically centered */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 48px;               /* 4px grid — spec's 50px snapped to 48px */
  background: var(--et-hairline, rgba(28, 53, 87, 0.12));
}
/* Icon chip — circular wash forced behind the dynamic <img>/<svg>. */
.hero-orbital-trust .hero-stat__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #E8F5E9;
}
.hero-orbital-trust .hero-stat__icon img,
.hero-orbital-trust .hero-stat__icon svg {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.hero-orbital-trust .hero-stat__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;               /* 4px */
  min-width: 0;
}
.hero-orbital-trust .hero-stat__number {
  color: var(--hero-text-primary);
  font-size: 1.75rem;         /* 28px (et-typography.css re-sizes this — geometry-safe clamp) */
  font-weight: 700;
  line-height: 1.1;           /* large size → tight */
  letter-spacing: -0.02em;    /* large size → negative tracking */
  white-space: nowrap;        /* nowrap on the NUMBER only, never the long label */
  max-width: 100%;
  overflow: hidden;           /* safety net: a longer figure clips in ITS OWN box */
  text-overflow: ellipsis;    /* instead of painting over the divider */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.hero-orbital-trust .hero-stat__label {
  max-width: 140px;           /* long fallback string wraps without breaking the row */
  color: var(--hero-text-secondary);
  font-size: 0.75rem;         /* 12px */
  font-weight: 500;
  line-height: 1.3;           /* small size → looser than the number */
}

/* ============================================================
   RIGHT COLUMN — portrait + orbit + floating cards
   ============================================================ */
.hero-column-right {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 600px;
}
/* .portrait-wrapper is the positioning context for the ring and the floats.
   Explicit height and max-width anchor the orbital ring and floating cards
   immediately upon DOM parse so top: 50% never jumps downward on image load (0 CLS). */
.portrait-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 534px;
  height: 600px;
  min-height: 600px;
}
/* Thick, HOLLOW framing ring behind the portrait (z 0 = very back). */
.portrait-wrapper::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  background: transparent;
  border: 32px solid rgba(232, 245, 233, 0.8); /* 4px grid (was 30px) */
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
/* No z-index on the wrapper on purpose: it must NOT create a stacking context,
   so the floating cards (z 10) can sit above the portrait (z 5). */
.hero-orbital-trust__portrait {
  position: relative;
  z-index: 5;
  margin: 0;
  line-height: 0;
  width: 100%;
  height: 600px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-orbital-trust__portrait img {
  position: relative;
  bottom: 0;
  z-index: 5;                 /* above the orbit (0), below the floating cards (10) */
  height: 600px;
  max-height: 600px;
  width: auto;
  aspect-ratio: 1182 / 1330;
  object-fit: contain;
  display: block;
}

/* ---------- Floating feature cards ---------- */
.hero-floats { list-style: none; margin: 0; padding: 0; }
.hero-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 200px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* pop off her dark shirt in the foreground */
  color: var(--hero-card-text);
  z-index: 10;                /* ABOVE the portrait (5) — cards read cleanly in front */
  animation: float 5s ease-in-out infinite;
}
.hero-float__icon { display: inline-flex; width: 36px; height: 36px; flex: 0 0 36px; }
.hero-float__icon img { width: 36px; height: 36px; object-fit: contain; }
.hero-float__text { display: flex; flex-direction: column; gap: 4px; } /* 4px grid (was 2px) */
.hero-float__title { font-size: 0.875rem; font-weight: 800; line-height: 1.2; color: var(--hero-card-text); }
.hero-float__subtitle { color: var(--hero-card-text-muted); font-size: 0.75rem; font-weight: 500; }

/* Coordinate mapping — cards now sit in the FOREGROUND (z-index:10), pushed to
   the outer boundary of the orbit ring so they clear the subject's shoulders,
   elbow and forearm. Left cards hug the ring's left arc; right cards are pushed
   hard right past her shoulder/forearm. */
.hero-float--top-right    { top: 15%;    left: -10%;  right: auto; bottom: auto; animation-delay: 0s; }      /* Secure Filing — top left */
.hero-float--right-mid    { top: 20%;    right: -15%; left: auto;  bottom: auto; animation-delay: -1.25s; }  /* Expert Assistance — top right */
.hero-float--right-lower  { top: 60%;    left: -15%;  right: auto; bottom: auto; animation-delay: -2.5s; }   /* Max Refund — bottom left */
.hero-float--bottom-right { bottom: 10%; right: -10%; left: auto;  top: auto;    animation-delay: -3.75s; }  /* 24/7 Support — bottom right */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- Focus visibility ---------- */
.hero-orbital-trust a:focus-visible {
  outline: 2px solid var(--hero-accent-green);
  outline-offset: 2px;
  border-radius: var(--hero-radius-card);
}

/* ============================================================
   Tablet / mobile — single column, no portrait, no h-scroll.
   ============================================================ */
@media (max-width: 991px) {
  .hero-orbital-trust {
    padding: 1.5rem 0 0;      /* 24px top — tighter header seam on mobile (was 3rem/48px) */
    margin-bottom: 0;         /* no negative seam pull on mobile: the portrait column is hidden,
                                 so there is nothing to keep flush and normal rhythm reads better */
  }
  .hero-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0 1.25rem 0;
  }
  .hero-column-left { justify-content: flex-start; }

  /* Hide the entire portrait column: image, orbit and floating cards. */
  .hero-column-right { display: none !important; }

  /* H1 size is now fluid via --et-h1-size clamp (36->48px) enforced in
     design-tokens.css by h1:has(.et-highlight-text); no hard mobile step needed. */
  .hero__subtitle { max-width: 100%; margin-bottom: 2rem; }

  /* CTAs stay side by side, scaled down to fit small screens. */
  .hero-cta-wrapper { flex-direction: row; flex-wrap: nowrap; gap: 0.75rem; margin-bottom: 2rem; }
  .hero-cta-card { padding: 1rem; }
  .hero-cta-card__title { font-size: 0.875rem; }
  .hero-cta-card__desc { font-size: 0.75rem; }
  .hero-cta-card__btn { padding: 0.5rem 1rem; width: 100%; justify-content: center; font-size: 0.8125rem; }

  /* Stats stay in ONE row — same card style, scaled down to fit. */
  .hero-orbital-trust .hero-stats-wrapper {
    gap: 1rem;                /* 16px */
    padding: 1.25rem 1.5rem;  /* 20px 24px */
    margin-top: 1.5rem;
  }
  .hero-orbital-trust .hero-stat { gap: 0.75rem; }  /* 12px */
  .hero-orbital-trust .hero-stat:not(:first-child)::before { height: 40px; left: -0.5rem; }
  .hero-orbital-trust .hero-stat__icon { width: 48px; height: 48px; }
  .hero-orbital-trust .hero-stat__icon img,
  .hero-orbital-trust .hero-stat__icon svg { width: 24px; height: 24px; }
  .hero-orbital-trust .hero-stat__number { font-size: 1.5rem; }  /* 24px */
}

/* Small phones: compress the stats row further so three items never clip.
   Numbers are nowrap (rigid), so the fixed widths must shrink: dividers off
   (each costs 1px + the item gap of rigid width), smaller chips + type. */
@media (max-width: 575px) {
  .hero-orbital-trust .hero-stats-wrapper {
    gap: 0.5rem;              /* 8px */
    padding: 1rem 0.75rem;    /* 16px 12px */
    border-radius: 16px;
  }
  .hero-orbital-trust .hero-stat { gap: 0.5rem; }  /* 8px */
  .hero-orbital-trust .hero-stat:not(:first-child)::before { display: none; }
  .hero-orbital-trust .hero-stat__icon { width: 32px; height: 32px; }
  .hero-orbital-trust .hero-stat__icon img,
  .hero-orbital-trust .hero-stat__icon svg { width: 16px; height: 16px; }
  .hero-orbital-trust .hero-stat__text { gap: 0; }
  .hero-orbital-trust .hero-stat__number { font-size: 0.9375rem; }  /* 15px */
  .hero-orbital-trust .hero-stat__label { font-size: 0.625rem; }    /* 10px */
}

/* Reduced motion: no float animation. */
@media (prefers-reduced-motion: reduce) {
  .hero-float { animation: none !important; }
  .hero-cta-card { transition: none; }
}