/* =========================================================
   Landing template variants — layered on top of style.css
   ========================================================= */

/* Common CTA */
.hero-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.5rem; padding: .9rem 1.8rem;
  background: #f5b042; color: #14261d;
  border-radius: 40px; font-weight: 700; letter-spacing: .3px;
  transition: all .25s;
}
.hero-cta:hover { background: #f5c46b; transform: translateY(-2px); }

.logo-img { height: 48px; width: auto; }

/* ---------- Template 1: Classic Hero ---------- */
.hero-classic { background-size: cover; background-position: center; }
.hero-classic h1 { font-size: clamp(2.8rem, 8vw, 5rem); }

/* ---------- Template 2: Split Hero ---------- */
.hero-split {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 85vh; background: #fafff9;
}
.hero-split-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem 3rem; color: #1e3a2f;
}
.hero-split-text h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 1rem; }
.hero-split-text p { font-size: clamp(1.1rem, 2.2vw, 1.4rem); color: #4a6b57; margin-bottom: 1rem; }
.hero-split-image { background-size: cover; background-position: center; min-height: 400px; }
@media (max-width: 768px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split-image { min-height: 260px; order: -1; }
}

/* ---------- Template 3: Carousel Hero ---------- */
.hero-carousel { background-size: cover; background-position: center; }
.hero-carousel .hero-cta { margin-top: 2rem; }

/* ---------- Template 4: Image Grid band ---------- */
.hero-grid-band { min-height: 65vh; }
.hero-grid-band h1 { font-size: clamp(2.4rem, 6vw, 4rem); }

/* ---------- Template 5: Minimal Text ---------- */
.hero-minimal {
  background: #ffffff; min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  padding: 6rem 1.5rem;
}
.hero-minimal-inner { max-width: 800px; text-align: center; color: #1e3a2f; }
.hero-minimal h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 1rem; letter-spacing: 1px; }
.hero-minimal p { font-size: 1.2rem; color: #4a6b57; }

/* ---------- Template 6: Bold Dark ---------- */
.hero-dark { background: #0f1c14; background-size: cover; background-position: center; }
.hero-dark h1 { color: #f5e6c8; font-size: clamp(2.6rem, 7vw, 4.5rem); }
.hero-dark p { color: #48bb78; font-size: 1.3rem; }
.hero-dark .hero-cta { background: #48bb78; color: #0f1c14; }
.hero-dark .hero-cta:hover { background: #5ecf8a; }