/* web/themes/techprosolutions/css/components/svc-hero.css */
/**
 * Light FinTech SaaS hero (2026-07-25 pivot; the dark cinematic scrim/glass
 * era is retired — do not resurrect it):
 * - Section: soft off-white/green tint + a large soft green ellipse behind
 *   the right column.
 * - field_svc_bg photo lives IN the right grid column: sweeping curved left
 *   edge (border-radius 50% 0 0 50%), object-fit cover, bleeds off the right
 *   viewport edge. No absolute full-bleed, no scrim.
 * - Copy: dark slate #0F172A; highlight span stays brand green.
 * - Trust pills: white cards, soft shadow, above the H1.
 * - Form: pristine white card (24px radius / 32px pad / soft 0 20px 40px
 *   shadow), 2x2 input grid, full-width green submit, "No spam" microcopy.
 * - Optional vertical side features (Title|Subtitle badges) left of the form.
 */

/* .svc-hero.svc-section = 0,2,0 so the light background wins even if an
   editor left the section theme on navy. */
.svc-hero.svc-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f8faf9 0%, #eef6ef 100%);
  color: var(--et-body-color);
}
/* Soft green ellipse glow behind the photo column. */
.svc-hero.svc-section::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -12%;
  width: 58%;
  height: 150%;
  background: radial-gradient(closest-side, rgba(60, 185, 68, 0.16), rgba(60, 185, 68, 0) 72%);
  pointer-events: none;
}

.svc-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--et-space-6);
  align-items: center;
}
@media (min-width: 62rem) {
  /* Wider copy column so the form extends toward the arch; tighter gap closes
     the dead space between the form and the image. */
  .svc-hero__grid--split { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
}

.svc-hero__copy { max-width: 46rem; }

/* ---- Trust pills (above the H1) ---- */
.svc-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--et-space-3);
  padding: 0;
  margin: 0 0 var(--et-space-6);
}
.svc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--et-space-2);
  background: #fff;
  border-radius: var(--et-radius-sm);
  padding: var(--et-space-2) var(--et-space-4) var(--et-space-2) var(--et-space-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  font-size: 0.875rem;
  font-weight: 700;
  color: #1C3557;
}
.svc-pill__chip {
  width: var(--et-space-8);
  height: var(--et-space-8);
  border-radius: var(--et-radius-pill);
  background: var(--et-wash);
  display: grid;
  place-items: center;
  color: var(--et-green-2);
  flex: none;
}
.svc-pill__chip svg { width: 1rem; height: 1rem; }
/* Light FinTech tints, cycled to match the reference: green / amber / green. */
.svc-pill:nth-child(3n + 2) .svc-pill__chip { background: #fef3c7; color: #d97706; }
.svc-pill:nth-child(3n) .svc-pill__chip { background: var(--et-wash); color: #17835f; }

/* ---- Typography: dark slate on light ---- */
/* 0,2,1 with the h1 element — outranks both the global
   h1:has(.et-highlight-text)!important token rule and any theme class. */
.svc-hero h1.svc-hero__title {
  font-family: 'Manrope', sans-serif !important;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem) !important;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: none !important;
  color: #1C3557 !important;
  margin: 0 0 var(--et-space-4);
}
.svc-hero .svc-hero__sub {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.55;
  color: #475569;
  max-width: 40rem;
  margin: 0 0 var(--et-space-6);
}
.svc-hero .svc-overline { color: var(--et-green-2); }

/* ---- Lead row: [side features | clean form card] ---- */
.svc-hero__lead {
  display: flex;
  gap: var(--et-space-6);
  align-items: flex-start;
}
/* Aside column: side features stacked above the trusted-profiles block.
   Widened to 15rem so 2-word descriptions ("Checked against AIS & 26AS",
   "Ready for approval in 48 hrs") stay on a single line at desktop. */
.svc-hero__aside {
  flex: 0 0 15rem;
  display: flex;
  flex-direction: column;
}
.svc-feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--et-space-4);
}

/* ---- Trusted profiles: overlapping avatars + social-proof line ---- */
.svc-trusted {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.svc-trusted__avatars { display: flex; flex: none; }
.svc-trusted__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}
.svc-trusted__avatar + .svc-trusted__avatar { margin-left: -16px; }
.svc-trusted__text { margin: 0; display: block; }
.svc-trusted__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1C3557;
  line-height: 1.3;
}
.svc-trusted__sub {
  display: block;
  font-size: 13px;
  color: #5f6368;
  line-height: 1.4;
}
.svc-feat {
  display: flex;
  gap: var(--et-space-3);
  align-items: flex-start;
}
.svc-feat__chip {
  width: var(--et-space-10);
  height: var(--et-space-10);
  border-radius: var(--et-radius-sm);
  background: #fff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  display: grid;
  place-items: center;
  color: var(--et-green-2);
  flex: none;
}
.svc-feat__chip svg { width: 1.25rem; height: 1.25rem; }
.svc-feat__text { display: block; }
.svc-feat__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1C3557;
  line-height: 1.3;
}
.svc-feat__sub {
  display: block;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.4;
  margin-top: var(--et-space-1);
}

/* ---- Clean white form card ---- */
.svc-form-card--clean {
  flex: 1;
  min-width: 0;
  max-width: 460px;             /* compact premium card, not a bloated sheet */
  /* Floating premium white card: pure white + enterprise soft shadow; the
     defined input borders (below) carry the field contrast. */
  background: #ffffff;
  border: 1px solid #eef2ef;
  border-radius: 24px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.08);
  padding: 28px;
  color: #0f172a;
}
/* Strip webform_bootstrap's own form chrome and lay the fields out 2x2 —
   halves the card height. display:grid!important beats the theme's
   .webform-submission-form{display:flex}. */
.svc-form-card--clean .webform-submission-form,
.svc-form-card--clean form {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: start;            /* rows top-align; uniform label height keeps inputs level */
  column-gap: var(--et-space-4); /* 16px between the two columns */
  row-gap: 14px;                 /* 14px between rows for balanced vertical field spacing */
}
/* Legacy flex-era webform styling gives .form-item width:50% — as grid cells
   they must fill their track. Each item is a column: fixed-height label area
   then input, so 1-line and 2-line labels leave their inputs perfectly level. */
.svc-form-card--clean .webform-submission-form .form-item {
  margin: 0;
  padding: 0 !important;          /* theme gives .form-item inner padding — kills input alignment */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  float: none !important;
  flex: none;
  display: flex;
  flex-direction: column;
}
/* The shared lead webform renders inside a legacy `section.project-details`
   wrapper that carries its own themed background image + padding (styled for
   the old state-landing sidebar). Neutralise it inside the clean card. */
.svc-form-card--clean .project-details,
.svc-form-card--clean .project-details-content,
.svc-form-card--clean .auto-container,
.svc-form-card--clean section {
  background: none !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.svc-form-card--clean .webform-submission-form > .form-actions {
  grid-column: 1 / -1;
  margin: 6px 0 0;
}
@media (max-width: 32rem) {
  .svc-form-card--clean .webform-submission-form,
  .svc-form-card--clean form { grid-template-columns: 1fr; }
}

.svc-form-card--clean label,
.svc-form-card--clean .fieldset-legend,
.svc-form-card--clean .form-item__label {
  color: #475569;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.svc-form-card--clean input[type='text'],
.svc-form-card--clean input[type='email'],
.svc-form-card--clean input[type='tel'],
.svc-form-card--clean input[type='number'],
.svc-form-card--clean input.form-text,
.svc-form-card--clean input.form-tel,
.svc-form-card--clean input.form-email,
.svc-form-card--clean select,
.svc-form-card--clean textarea {
  /* !important: the theme sets input widths/heights at higher specificity
     (the border/color declarations only win because they carry it too). */
  width: 100% !important;
  max-width: 100% !important;
  height: 48px !important;        /* identical control heights, incl. textarea */
  min-height: 48px !important;
  padding: 0 var(--et-space-4) !important;
  background: #ffffff !important;
  border: 1px solid #dde4df !important;
  border-radius: 12px !important;   /* theme pins inputs to 6px otherwise */
  color: #0f172a !important;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 46px;              /* single-line vertical centring */
}
/* The message textarea must behave as a one-line field (1080p budget). */
.svc-form-card--clean textarea {
  resize: none !important;
  overflow: hidden;
  line-height: 1.5;
  padding-block: var(--et-space-3) !important;
}
.svc-form-card--clean input::placeholder,
.svc-form-card--clean textarea::placeholder { color: #94a3b8 !important; }
.svc-form-card--clean input:focus,
.svc-form-card--clean select:focus,
.svc-form-card--clean textarea:focus {
  outline: none;
  border-color: var(--et-navy) !important;
  box-shadow: 0 0 0 3px rgba(28, 53, 87, 0.12);
}

/* Full-width solid green submit. Deep green #2E7D32 (reference-matched):
   white text passes AA at ~5.1:1 — the raw brand green #3CB944 is ~2.2:1
   and must not carry white button text. */
.svc-form-card--clean .webform-button--submit,
.svc-form-card--clean .form-submit {
  width: 100%;
  height: 48px;
  padding: 0 var(--et-space-6);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(47, 158, 68, 0.25);   /* glowing green float */
  background: #2e7d32;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.svc-form-card--clean .webform-button--submit:hover,
.svc-form-card--clean .form-submit:hover {
  background: #27692b;
  transform: translateY(-1px);
}

.svc-form-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--et-space-2);
  margin: var(--et-space-3) 0 0;
  font-size: 0.8125rem;
  color: #64748b;
}
.svc-form-note__ic {
  width: 1rem;
  height: 1rem;
  color: var(--et-green-2);
  flex: none;
}

/* ---- Dual CTA (no-form heroes) ---- */
.svc-hero__actions { display: flex; gap: var(--et-space-4); flex-wrap: wrap; }
.svc-hero .svc-btn--ghost {
  background: #fff;
  color: var(--et-navy);
  box-shadow: inset 0 0 0 2px rgba(28, 53, 87, 0.32), 0 4px 16px rgba(15, 23, 42, 0.06);
}
.svc-hero .svc-btn--ghost:hover {
  color: var(--et-navy);
  box-shadow: inset 0 0 0 2px rgba(28, 53, 87, 0.56), 0 8px 24px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

/* ---- Right column photo: full HALF-OVAL / arch ----
   Straight right edge (bleeds off the viewport), and the entire LEFT edge is
   one smooth continuous convex curve (right half of an ellipse) sweeping top
   → bulge-left → bottom. No straight left segment, no rounded-rectangle look.
   Depth tuned by --svc-arch (ellipse rx as % of width). */
.svc-hero__photo {
  --svc-arch: 92%;   /* larger = arch reaches further left toward the form */
  position: relative;
  align-self: stretch;
  min-height: 30rem;
  /* Fill the hero's FULL height: negate the section's vertical padding so the
     arch touches the top and bottom edges (no white gap above/below). */
  margin-block: calc(-1 * clamp(2rem, 4vh, 3rem));
  /* Bleed to the right viewport edge (see grid note above). */
  margin-right: min(calc((76rem - 100vw) / 2 - var(--et-space-6)), calc(-1 * var(--et-space-6)));
}
.svc-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;   /* keep the subject framed at every breakpoint */
  /* The half-ellipse: rx = --svc-arch of width, ry = full height, anchored to
     the right edge so only the left curve is visible. */
  clip-path: ellipse(var(--svc-arch) 100% at 100% 50%);
}
@media (max-width: 61.99rem) {
  /* Mobile: the tall arch would crop the face — relax to a gentle top curve. */
  .svc-hero__photo img { clip-path: none; border-radius: 24px 24px 0 0; }
}
@media (max-width: 61.99rem) {
  /* Stacked mobile: the tall curved portrait is desktop furniture — drop it
     and keep the page focused on copy + form. */
  .svc-hero__photo { display: none; }
}

/* ---- Mobile hero layout (≤991px): stack the lead row so the form card and
   copy never exceed the viewport. Desktop layout is untouched. ---- */
@media (max-width: 61.99rem) {
  /* Constrain the single hero column to the viewport so H1/subheading wrap. */
  .svc-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-hero__copy { max-width: 100%; min-width: 0; }
  /* Aside (side features + trusted profiles) sits above the form, full width. */
  .svc-hero__lead { flex-direction: column; align-items: stretch; }
  .svc-hero__aside { flex: 0 0 auto; width: 100%; }
  /* Form card fills the width instead of being pushed off-screen. */
  .svc-form-card--clean { max-width: none; width: 100%; min-width: 0; }
  /* Trust chips wrap instead of clipping at the right edge. */
  .svc-pills, .svc-metrics { flex-wrap: wrap; }
}

/* ---- Right-column mockup (dual-CTA heroes only) ---- */
.svc-hero__mock img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--et-radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}