/* ============================================================
   Goldfields Garden Services — audience landing pages
   Extends the shared design system (main.css) with a small set
   of components for the 4 "who we help" pages. Built entirely
   from existing tokens (--gold, --mist, --body, --shadow-card,
   --ease-out) so it reads as part of the same site, not bolted on.
   Loaded only on: /strata-gardening-maintenance/, /ndis-gardening-support/,
   /property-management-gardening/, /aged-care-gardening/
   ============================================================ */

/* ---------- Eyebrow label (above hero h1) ---------- */
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

/* ---------- Image + text split (intro sections) ---------- */
.split {
  display: flex;
  align-items: center;
  gap: 60px;
}
.split-media {
  flex: 0 0 42%;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 5;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-text { flex: 1; min-width: 0; }
.split-text .eyebrow { margin-bottom: 14px; }
.split-text h2 { margin-bottom: 20px; }
.split.is-reverse { flex-direction: row-reverse; }

/* ---------- Full-bleed photo band (mid-page visual break) ----------
   Reuses main.css's .cta-band/.cta-bg positioning (absolute inset:0 +
   dark overlay is scoped to ".cta-band .cta-bg" there) — this class
   just adds the centered, non-CTA text treatment on top of it. */
.cta-band.photo-band .cta-band-inner {
  flex-direction: column;
  text-align: center;
  justify-content: center;
  max-width: 640px;
  margin-inline: auto;
  padding-block: 90px;
}
.photo-band .eyebrow { color: var(--gold); }
.photo-band h2 { color: #fff; }
.photo-band p { color: rgba(255, 255, 255, .88); margin-top: 16px; }

/* ---------- Feature / trust cards (3-up) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 30px;
  margin-top: 60px;
}
.feature-card {
  background: var(--paper);
  border: 1px solid var(--gold);
  border-top-width: 3px;
  border-radius: var(--radius-card);
  padding: 32px 28px;
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.feature-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.feature-icon svg { width: 24px; height: 24px; color: var(--gold-dark); }
.feature-card h3 {
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-bottom: 10px;
}
.feature-card p { font-size: 15px; line-height: 1.8; color: var(--body); }

/* ---------- Numbered step list ---------- */
.step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 30px;
  margin-top: 50px;
}
.step-item { text-align: left; }
.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 18px;
}
.step-item h3 {
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin-bottom: 8px;
}
.step-item p { font-size: 15px; line-height: 1.8; color: var(--body); }

/* ---------- Related services (horizontal sidebar-card row) ---------- */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 30px;
}
.related-grid .sidebar-card { width: 100%; }
/* The home page's "Who we help" row carries five cards; auto-fit at 220px
   would drop the fifth onto its own line at container width. */
.related-grid.is-five { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

/* ---------- Section wrapper for a page-body block ---------- */
.section-audience { padding: 100px 0; }
.section-audience.is-mist { background: var(--mist); }
.section-audience .section-head { margin-bottom: 50px; }

/* ---------- Phone-first hero CTA row (aged-care page) ---------- */
.phone-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.phone-cta-row .btn { min-width: 220px; justify-content: center; display: inline-flex; align-items: center; gap: 10px; }
.phone-cta-row svg { width: 18px; height: 18px; }
.hero-quiet-link { margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.hero-quiet-link a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero-quiet-link a:hover { color: var(--gold); }

/* ---------- Plain note callout (billing / funding lines) ---------- */
.note-card {
  background: var(--mist);
  border-radius: var(--radius-card);
  padding: 30px 32px;
  margin-top: 30px;
}
.note-card p { font-size: 15.5px; line-height: 1.85; color: var(--body); margin: 0; }
.note-card p + p { margin-top: 12px; }
.note-card strong { color: var(--ink); }

/* ---------- Responsive (mirrors main.css breakpoints) ---------- */
@media (max-width: 1199.98px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .step-list { grid-template-columns: repeat(2, 1fr); }
  .section-audience { padding: 75px 0; }
  .split { gap: 40px; }
  .split-media { flex-basis: 38%; }
}
@media (max-width: 809.98px) {
  .feature-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
  .step-list { grid-template-columns: 1fr; gap: 30px; margin-top: 35px; }
  .section-audience { padding: 60px 0; }
  .phone-cta-row { flex-direction: column; align-items: stretch; }
  .phone-cta-row .btn { width: 100%; }
  .split, .split.is-reverse { flex-direction: column; gap: 30px; }
  .split-media { flex-basis: auto; width: 100%; aspect-ratio: 16 / 10; }
  .photo-band-inner { padding: 60px 20px; }
}