/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   HybridLeadFormSection — Lead form section for the /hybrid page.

   Layout:
     Badge (inline or rail) → Heading → 2-col content row
     (body copy | lead form) → full-width illustration.

   Background gradient continues from the homepage LeadFormSection
   and blends seamlessly into SiteFooter.
   ============================================================ */


/* ---- Section background ---------------------------------- */

.hlf-section {
  background: linear-gradient(
    180deg,
    rgba(229, 223, 213, 0.5) 0%,
    rgba(222, 215, 204, 0.5) 100%
  ), var(--background);
}


/* ---- Heading --------------------------------------------- */

.hlf__heading {
  max-width:     800px;
  margin-bottom: 4rem;   /* 64px gap before content row */
}


/* ---- 2-column content row -------------------------------- */

.hlf__content {
  display:     flex;
  gap:         2rem;   /* 32px */
  align-items: stretch;
  width:       100%;
}

.hlf__copy {
  flex:           1;
  padding-right:  2rem;
  display:        flex;
  flex-direction: column;
  gap: 2rem;
}

.hlf__copy .hp-body {
  flex-shrink: 0;
}

.hlf__illustration {
  margin-top: auto;
}

.hlf__form-wrap {
  flex: 0 0 31rem;   /* 496px */
}


/* ---- Illustration (inside left copy column) -------------- */

.hlf__illustration {
  display:    block;
  width:      100%;
  height:     auto;
}


/* ============================================================
   Small desktop (≤1280px)
   ============================================================ */

@media (max-width: 1280px) {
  .hlf__copy {
    padding-right: 0;
  }
}


/* ============================================================
   Tablet (≤991px)
   ============================================================ */

@media (max-width: 991px) {
  .hlf__heading {
    margin-bottom: 2.25rem;   /* 36px */
  }

  .hlf__content {
    flex-direction: column;
  }

  .hlf__copy {
    padding-right: 0;
  }

  .hlf__illustration {
    display: none;
  }

  .hlf__form-wrap {
    flex:  none;
    width: 100%;
  }
}


/* ============================================================
   Mobile (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .hlf__heading {
    margin-bottom: 2rem;
  }
}


/* ============================================================
   Design refresh — docs/design-refresh-rules.md, "CTA + footer". The section
   is a section card (`data-surface="card"`: border, radius, padding and the
   container hand-back come from `refresh.css`, BG-4/BG-5/BG-5a) with the
   closing gradient (BG-6). The footer isn't under it on this page (the FAQ
   is), so the card closes on all four sides. Heading and white badge come
   from `refresh.css` too.
   ============================================================ */
.hp-section.hlf-section[data-design="refresh"][data-surface="card"] {
  background: linear-gradient(180deg, var(--accent), var(--background));
}

/* Figma's CTA has 128 block padding from the outer edge, the one section card
   with 128 on top: 112 in CSS (BG-5a). Below 1200 the shared steps apply. */
@media (min-width: 1200px) {
  .hp-section.hlf-section[data-design="refresh"][data-surface="card"] {
    padding-block: 7rem;   /* 112px */
  }
}

/* Form card: white, no outline, radius 12 (RD-6, BD-7). It stays on its
   column at every width; the stock ≤991 bleed would push it into the card's
   border. Colours and layout only — the fields are a Salesforce contract. */
[data-design="refresh"] .hlf__form-wrap .lead-form {
  width:       100%;
  margin-left: 0;
  background:  var(--card);
  border:      0;
}

/* Inputs (C12): beige fill, no shadow. The 0.5px `--muted` hairline comes from
   LeadFormSection.css's refresh rule, which keeps focus and error on top. */
[data-design="refresh"] .hlf__form-wrap :is(.lead-field__input, .lead-field__select) {
  background: var(--secondary);
  box-shadow: none;
}