/* ------------------------------------------------------------------
   Layout variant: hero-form

   Loaded ONLY by sites with "layout": "hero-form" in site.json, after
   style.css. Everything here is scoped to [data-layout="hero-form"] so it
   cannot affect a site using the classic layout.

   The difference: the lead form sits in the first screen, beside the H1,
   rather than after the opening section.
   ------------------------------------------------------------------ */

/* Plain hero only. A hero carrying a photograph is styled in style.css. */
[data-layout="hero-form"] .hero:not([style*="--hero-bg"]) {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  padding-block: 2rem 2.75rem;
}

/*
 * Alternating section backgrounds. Without them a 2,400 word page reads as one
 * undifferentiated column; the banding is what makes each section register as
 * a separate answer to a separate question.
 */
[data-layout="hero-form"] .content-section:nth-of-type(even) {
  background: var(--bg-alt);
}
[data-layout="hero-form"] .content-section {
  padding-block: 2.25rem;
}
[data-layout="hero-form"] .media-section { padding-block: 2.5rem; }
[data-layout="hero-form"] .gallery-section,
[data-layout="hero-form"] .faq-section { background: var(--bg-alt); }
[data-layout="hero-form"] .grid-section { background: var(--bg); }

[data-layout="hero-form"] .hero-inner {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}

@media (min-width: 900px) {
  [data-layout="hero-form"] .hero-inner {
    grid-template-columns: 1.15fr .85fr;
  }
}

[data-layout="hero-form"] .hero h1 {
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  margin-bottom: .5rem;
}

[data-layout="hero-form"] .hero .lede {
  font-size: 1.18rem;
  color: var(--ink);
}

/* ---- the form card in the hero ---- */

[data-layout="hero-form"] .hero-form {
  background: var(--bg);
  border: 2px solid var(--line);
  border-top: 6px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(10, 53, 88, .16);
  overflow: hidden;
}

[data-layout="hero-form"] .hero-form .form-section {
  padding-block: 0;
  background: transparent;
}
[data-layout="hero-form"] .hero-form .wrap {
  padding-inline: 1.15rem;
  max-width: none;
}
[data-layout="hero-form"] .hero-form .lead-form {
  border: 0;
  padding: 0 0 1.15rem;
  gap: .7rem;
}

/* The banner above the fields, the way the reference sites signpost it. */
[data-layout="hero-form"] .hero-form-banner {
  background: var(--brand);
  color: #fff;
  padding: .9rem 1.15rem;
  text-align: center;
}
[data-layout="hero-form"] .hero-form-banner strong {
  display: block;
  font-size: 1.18rem;
  line-height: 1.3;
}
[data-layout="hero-form"] .hero-form-banner span {
  display: block;
  font-size: .95rem;
  color: #d8e6f2;
  margin-top: .2rem;
}

[data-layout="hero-form"] .hero-form .form-title,
[data-layout="hero-form"] .hero-form .form-sub {
  display: none;   /* the banner replaces them */
}

[data-layout="hero-form"] .hero-form .field label { font-size: .95rem; }
[data-layout="hero-form"] .hero-form .form-required-note { font-size: .82rem; }

/* ---- trust strip directly under the hero ---- */

[data-layout="hero-form"] .hero-badges {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
[data-layout="hero-form"] .hero-badges li {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .93rem;
  font-weight: 600;
  color: var(--brand-dark);
}
[data-layout="hero-form"] .hero-badges li::before {
  content: "";
  width: .95rem; height: .95rem; flex: none;
  background-color: var(--accent);
  -webkit-mask: var(--icon-check) no-repeat center / contain;
  mask: var(--icon-check) no-repeat center / contain;
}

/* ---- image placeholders, until real photography arrives ---- */

.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  background: repeating-linear-gradient(
    45deg, var(--bg-alt), var(--bg-alt) 12px, #e6edf4 12px, #e6edf4 24px);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: .95rem;
  font-weight: 600;
}
.img-placeholder span { max-width: 32ch; }

.fig .img-placeholder { margin: 0; }

.placeholder-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ---- dense intro copy beside the form ---- */

[data-layout="hero-form"] .hero-sub {
  margin: 0 0 .75rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-dark);
}
[data-layout="hero-form"] .hero-para {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: .85rem;
}
[data-layout="hero-form"] .hero-para strong { color: var(--brand-dark); }
[data-layout="hero-form"] .hero-text .btn-row { margin-top: 1.25rem; }