/* ==========================================================================
   EADC — Modular section components
   --------------------------------------------------------------------------
   Styles for every section type emitted by views/sections/renderer.ejs:
   hero · image-collage · service-cards · project-cards · gallery ·
   split-banner · impact-strip · team-grid · faq · contact-block ·
   blog-grid · cta · rich-text
   ========================================================================== */

/* ========================================================= Modular hero == */
.modular-hero {
  background: var(--grad-dark);
  overflow: hidden;
  isolation: isolate;
}
.modular-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(80% 100% at 88% 12%, rgba(99, 171, 82, 0.4) 0%, transparent 62%),
    radial-gradient(70% 90% at 4% 88%, rgba(255, 201, 66, 0.16) 0%, transparent 58%);
}
.modular-hero .hero-grid { padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(4.5rem, 8vw, 7.5rem); }
.modular-hero .hero-copy h1 { font-size: var(--fs-h1); }
.modular-hero .hero-copy p { max-width: 38rem; }

.hero-checks { display: grid; gap: 0.7rem; margin: 0 0 2.2rem; }
.hero-checks li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.98rem;
  color: #dceada;
}
.hero-checks i { color: var(--yellow); font-size: 1.05rem; }

/* ======================================================== Module heading = */
.modular-heading {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}
.modular-heading .eyebrow { grid-column: 1; margin-bottom: 0.9rem; }
.modular-heading h2 { grid-column: 1; margin: 0; }
.modular-heading p { grid-column: 2; margin: 0; color: var(--muted); }
.modular-services .modular-heading p { color: #c7d9c6; }

/* ======================================================== Image collage == */
.section-split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.section-images { position: relative; min-height: 520px; }
.section-images img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.section-images > img:first-child {
  width: 80%;
  height: 500px;
  object-fit: cover;
  border-radius: 12rem 12rem var(--radius-lg) var(--radius-lg);
}
.collage-secondary {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46% !important;
  height: 260px !important;
  object-fit: cover;
  border: 9px solid var(--cream);
  border-radius: var(--radius-md) !important;
}
.section-copy h2 { margin-bottom: 1.1rem; }
.section-copy .lead { margin-bottom: 0; }

.meter-list { display: grid; gap: 1.35rem; margin-top: 2.2rem; }
.meter-list > div > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.meter-list b { font-family: var(--font-display); font-size: 0.98rem; color: var(--ink); }
.meter-list em { font-style: normal; font-family: var(--font-display); font-weight: 800; color: var(--forest); }
.meter-list i {
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.meter-list u {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--grad-gold);
  text-decoration: none;
  transition: width 1.4s var(--motion-fast);
}

/* ======================================================= Service cards == */
.modular-services {
  position: relative;
  background: var(--forest-deep);
  color: #d7e4d5;
  overflow: hidden;
}
.modular-services::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 85% 8%, rgba(99, 171, 82, 0.3) 0%, transparent 60%);
  pointer-events: none;
}
.modular-services .container { position: relative; z-index: 1; }
.modular-services h2 { color: #fff; }

.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: 340px;
  padding: clamp(1.75rem, 2.6vw, 2.4rem);
  background: var(--forest-deep);
  transition: background 0.4s var(--motion-fast);
}
.service-card:hover { background: #2d6212; }
.service-card:hover .icon-tile-lg {
  background: var(--grad-gold);
  color: var(--forest-dark);
  transform: rotate(-6deg) scale(1.06);
}
.service-number {
  position: absolute;
  top: clamp(1.75rem, 2.6vw, 2.4rem);
  right: clamp(1.5rem, 2.4vw, 2.2rem);
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.12);
  letter-spacing: -0.04em;
  line-height: 1;
}
.service-card h3 { margin: 1.6rem 0 0.7rem; color: #fff; font-size: 1.35rem; }
.service-card p { color: #c7d9c6; font-size: 0.95rem; margin-bottom: 1.4rem; }
.service-card a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--yellow);
}
.service-card a i { transition: transform 0.3s var(--motion-fast); }
.service-card a:hover i { transform: translateX(4px); }

/* ======================================================= Project cards == */
.project-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.project-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform 0.45s var(--ease-spring), box-shadow 0.35s var(--motion-fast), border-color 0.35s var(--motion-fast);
}
.project-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(99, 171, 82, 0.35); }
.project-card > img { width: 100%; height: 240px; object-fit: cover; transition: transform 0.9s var(--motion-fast); }
.project-card:hover > img { transform: scale(1.06); }
.project-card > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 1.6rem; flex: 1; }
.project-card > div > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--leaf-soft);
  color: var(--leaf);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.project-card h3 { margin: 0; font-size: 1.2rem; }
.project-card p { margin: 0; font-size: 0.93rem; color: var(--muted); }

/* ============================================================= Gallery == */
.gallery-section { background: var(--leaf-soft); }
.gallery-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.gallery-card {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--forest-dark);
  text-align: left;
  cursor: zoom-in;
}
.gallery-card img { width: 100%; height: 260px; object-fit: cover; transition: transform 0.9s var(--motion-fast), filter 0.5s var(--motion-fast); }
.gallery-card:hover img { transform: scale(1.07); filter: brightness(0.66); }
.gallery-card > span {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  color: #fff;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 0.35s var(--motion-fast), transform 0.35s var(--motion-fast);
}
.gallery-card:hover > span { opacity: 1; transform: none; }
.gallery-card small {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 0.3rem;
}
.gallery-card strong { display: block; font-family: var(--font-display); font-size: 1rem; }

/* ======================================================== Split banner == */
.split-banner-section { padding-top: 0; }
.split-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--grad-dark);
  color: #d7e4d5;
  box-shadow: var(--shadow-lg);
}
.split-banner-yellow { background: var(--grad-gold); color: #22310e; }
.split-banner-yellow h2 { color: #22310e; }
.split-banner-yellow p { color: #3d5220; }
.split-banner-yellow .eyebrow { background: rgba(34, 49, 14, 0.14); color: #22310e; }
.split-banner-yellow .eyebrow i { color: #22310e; }
.split-banner-yellow .banner-stats { border-color: rgba(34, 49, 14, 0.2); }
.split-banner-yellow .banner-stats strong { color: #22310e; }
.split-banner-yellow .banner-stats span { color: #3d5220; }
.split-banner-image img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.split-banner-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem);
}
.split-banner-copy h2 { color: inherit; margin-bottom: 0.9rem; }
.split-banner-yellow h2 { color: #22310e; }
.split-banner p { color: inherit; opacity: 0.9; }
.banner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.banner-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--yellow);
}
.split-banner-yellow .banner-stats strong { color: #22310e; }
.banner-stats span { font-size: var(--fs-sm); opacity: 0.85; }

/* ========================================================= Impact strip = */
.impact-section { background: var(--cream); }
.impact-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  padding: clamp(2rem, 3.5vw, 3rem);
  border-radius: var(--radius-xl);
  background: var(--grad-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.impact-strip > div { display: grid; justify-items: center; text-align: center; gap: 0.6rem; }
.impact-strip .icon-tile { background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-glow-green); }
.impact-strip strong {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--forest-deep);
  font-variant-numeric: tabular-nums;
}
.impact-strip > div > span:last-child { font-size: var(--fs-sm); color: var(--muted); }

/* ============================================================ Team grid = */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.modular-team-grid .team-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform 0.45s var(--ease-spring), box-shadow 0.35s var(--motion-fast);
}
.modular-team-grid .team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.modular-team-grid .team-card img { width: 100%; height: 300px; object-fit: cover; }
.modular-team-grid .team-card > div { display: grid; gap: 0.45rem; padding: 1.4rem; }
.modular-team-grid .team-card > div > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leaf);
}
.modular-team-grid .team-card h3 { margin: 0; font-size: 1.15rem; }
.modular-team-grid .team-card p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* ================================================================== FAQ = */
.faq-section { background: var(--leaf-soft); }
.faq-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq-intro { position: sticky; top: 150px; }
.faq-intro h2 { margin-bottom: 0.9rem; }
.faq-intro p { color: var(--muted); }
.faq-intro img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  margin-top: 1.75rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.faq-list { display: grid; gap: 0.85rem; }
.faq-list details {
  padding: 1.35rem 1.5rem;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.3s var(--motion-fast), border-color 0.3s var(--motion-fast);
}
.faq-list details[open] { border-color: rgba(99, 171, 82, 0.4); box-shadow: var(--shadow-sm); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--leaf-soft);
  color: var(--forest);
  font-size: 0.8rem;
  transition: transform 0.35s var(--ease-spring), background 0.3s var(--motion-fast), color 0.3s var(--motion-fast);
}
.faq-list details[open] summary i { transform: rotate(135deg); background: var(--grad-primary); color: #fff; }
.faq-list details p { margin: 0.9rem 0 0; font-size: 0.95rem; color: var(--muted); }

/* ======================================================== Contact block = */
.contact-section { background: var(--cream); }

/* =========================================================== Blog cards = */
.blog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  transition: transform 0.45s var(--ease-spring), box-shadow 0.35s var(--motion-fast), border-color 0.35s var(--motion-fast);
}
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(99, 171, 82, 0.35); }
.blog-card > img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.9s var(--motion-fast); }
.blog-card:hover > img { transform: scale(1.06); }
.blog-card > div { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 1.6rem; flex: 1; }
.blog-card > div > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--leaf);
}
.blog-card h3 { margin: 0; font-size: 1.2rem; }
.blog-card p { margin: 0; font-size: 0.93rem; color: var(--muted); flex: 1; }
.blog-card a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--forest-deep);
}
.blog-card a i { transition: transform 0.3s var(--motion-fast); }
.blog-card a:hover { color: var(--forest); }
.blog-card a:hover i { transform: translateX(4px); }

/* ================================================================ CTA === */
.modular-cta {
  position: relative;
  margin-top: 0;
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--grad-dark);
  color: #d7e4d5;
  overflow: hidden;
}
.modular-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 88% 20%, rgba(255, 201, 66, 0.28) 0%, transparent 60%);
}
.modular-cta .cta-inner { position: relative; z-index: 1; }
.modular-cta h2 { color: #fff; margin-bottom: 0.7rem; }
.modular-cta p { color: #c7d9c6; max-width: 40rem; margin: 0; }

/* ========================================================== Rich text === */
.rich-section { max-width: var(--container-narrow); }
.rich-section h2 { margin-bottom: 1.2rem; }
.rich-section .lead { margin-bottom: 1.5rem; }
.rich-section img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.rich-section p:last-child { margin-bottom: 0; }

/* ========================================================= Responsive === */
@media (max-width: 1180px) {
  .service-cards { grid-template-columns: repeat(2, 1fr); }
  .project-cards { grid-template-columns: repeat(2, 1fr); }
  .blog-cards { grid-template-columns: repeat(2, 1fr); }
  .gallery-cards { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .impact-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .modular-heading { grid-template-columns: 1fr; align-items: start; }
  .modular-heading h2,
  .modular-heading p { grid-column: 1; }
  .section-split { grid-template-columns: 1fr; }
  .section-images { min-height: 420px; }
  .section-images > img:first-child { width: 74%; height: 380px; }
  .collage-secondary { width: 42% !important; height: 210px !important; }
  .split-banner { grid-template-columns: 1fr; }
  .split-banner-image img { min-height: 300px; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
}

@media (max-width: 680px) {
  .service-cards { grid-template-columns: 1fr; }
  .project-cards { grid-template-columns: 1fr; }
  .blog-cards { grid-template-columns: 1fr; }
  .gallery-cards { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .impact-strip { grid-template-columns: 1fr 1fr; padding: 1.5rem; }
  .section-images { min-height: 320px; }
  .section-images > img:first-child { width: 82%; height: 280px; border-radius: 8rem 8rem var(--radius-lg) var(--radius-lg); }
  .collage-secondary { width: 46% !important; height: 160px !important; border-width: 6px; }
  .service-card { min-height: 0; }
  .service-number { font-size: 1.8rem; }
}