/* This file is linked only from the homepage (index.html), so this global
   rule affects no other page. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Homepage hero — Module 03
   Scoped to .home-hero only. Uses the Module 02 "Perth Outdoor Craft" tokens
   as local custom properties so the shared component-library.css (and every
   other page) is left untouched. Do not reuse these classes outside index.html.
   ========================================================================== */

.home-hero {
  --hero-primary: #1F2A24;
  --hero-primary-mid: #33453B;
  --hero-sand: #F4EEE2;
  --hero-sand-alt: #EAE0CB;
  --hero-accent: #BA6A31;
  --hero-accent-dark: #9A5323;
  --hero-ink: #1E231F;
  --hero-ink-soft: #4B5750;
  --hero-white: #FFFFFF;
  --hero-line: #D9CFB6;
  --hero-radius-sm: 4px;
  --hero-radius-md: 8px;
  --hero-radius-lg: 16px;
  --hero-radius-full: 999px;
  --hero-shadow-sm: 0 1px 3px rgba(20,24,20,.14);
  --hero-shadow-md: 0 8px 24px rgba(20,24,20,.16);
  --hero-font-heading: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --hero-font-body: 'Source Sans 3', 'Segoe UI', Roboto, sans-serif;

  position: relative;
  overflow: hidden;
  color: var(--hero-white);
  font-family: var(--hero-font-body);
}

.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.home-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, rgba(31,42,36,0.92) 0%, rgba(31,42,36,0.82) 45%, rgba(31,42,36,0.55) 100%);
}

.home-hero__grid {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-block: 2rem 2.25rem;
}

.home-hero__content { max-width: 46ch; }

.home-hero__eyebrow {
  font-family: var(--hero-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hero-sand);
  opacity: 0.85;
  margin: 0 0 0.6rem;
}

.home-hero__title {
  font-family: var(--hero-font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.3rem + 2.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--hero-white);
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.home-hero__lede {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--hero-sand);
  margin: 0 0 1.25rem;
  max-width: 52ch;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.home-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  border-radius: var(--hero-radius-md);
  font-family: var(--hero-font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  min-height: 44px;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.home-hero__btn:hover { transform: translateY(-1px); }
.home-hero__btn--primary {
  background: var(--hero-accent);
  border-color: var(--hero-accent);
  color: var(--hero-white);
}
.home-hero__btn--primary:hover { background: var(--hero-accent-dark); border-color: var(--hero-accent-dark); }
.home-hero__btn--ghost {
  background: transparent;
  border-color: rgba(244,238,226,0.55);
  color: var(--hero-white);
}
.home-hero__btn--ghost:hover { background: rgba(244,238,226,0.12); }

.home-hero__trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.home-hero__trust li {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--hero-white);
  background: rgba(244,238,226,0.12);
  border: 1px solid rgba(244,238,226,0.3);
  border-radius: var(--hero-radius-full);
  padding: 0.35rem 0.85rem;
  white-space: nowrap;
}

.home-hero__formcol { width: 100%; }

.home-hero__formcard {
  background: var(--hero-white);
  color: var(--hero-ink);
  border-radius: var(--hero-radius-lg);
  box-shadow: var(--hero-shadow-md);
  padding: 1.5rem;
  scroll-margin-top: 1rem; /* keeps the card clear of a fixed header when anchor-scrolled to */
}

.home-hero__form-heading {
  font-family: var(--hero-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--hero-ink);
  margin: 0 0 0.25rem;
}
.home-hero__form-sub {
  font-size: 0.875rem;
  color: var(--hero-ink-soft);
  margin: 0 0 1rem;
}

/* Real GHL iframe wrapper — styles the container only, never the iframe's own
   inline attributes or the embed script. Reserves height to avoid CLS. */
.home-hero__form-embed {
  min-height: 420px;
  border-radius: var(--hero-radius-md);
  overflow: hidden;
}
.home-hero__form-embed iframe {
  width: 100%;
  min-height: 420px;
  display: block;
  border: none;
}
@media (min-width: 768px) {
  .home-hero__form-embed,
  .home-hero__form-embed iframe { min-height: 380px; }
}

.home-hero__form-placeholder {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  border: 2px dashed var(--hero-line);
  border-radius: var(--hero-radius-md);
  background: var(--hero-sand);
  padding: 1.5rem;
}
.home-hero__form-placeholder .icon {
  font-size: 1.75rem;
  line-height: 1;
}
.home-hero__form-placeholder p {
  margin: 0;
  color: var(--hero-ink-soft);
  font-size: 0.9rem;
  max-width: 32ch;
}
.home-hero__form-placeholder .label {
  font-family: var(--hero-font-heading);
  font-weight: 700;
  color: var(--hero-ink);
  font-size: 1rem;
}

/* Tablet and desktop: form sits beside content, fully visible above the fold.
   CSS Grid (not flex+max-width) so the row always fills the full container
   width — the content column takes the remaining space instead of both
   columns shrinking to their max-width and leaving a gap on the right. */
@media (min-width: 768px) {
  .home-hero__grid {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 420px);
    align-items: center;
    gap: 2.5rem;
    padding-block: 2.5rem;
    min-height: calc(100vh - 92px); /* fills remaining viewport under the header, without forcing extra scroll */
  }
  .home-hero__content { max-width: 46ch; }
  .home-hero__formcol { width: 100%; max-width: none; }
  .home-hero__form-placeholder { min-height: 380px; }

  /* Hero variant with no form column (e.g. About page): fill the full row
     with content instead of leaving the form's grid track empty. */
  .home-hero__grid--solo { grid-template-columns: 1fr; }
  .home-hero__grid--solo .home-hero__content { max-width: 60ch; }
}

@media (min-width: 1100px) {
  .home-hero__grid { grid-template-columns: 1fr minmax(340px, 440px); gap: 3.5rem; }
  .home-hero__grid--solo { grid-template-columns: 1fr; }
}