/**
 * acf-local-feature-grid — Why Choose Us feature cards with top wave + grass.
 * Grid supports 1–4 columns; cards fill grid cells (Figma Layout 301 / local feature grid).
 */

.acf-local-feature-grid {
  position: relative;
  padding-block: 0;
  padding-inline: 0;
  overflow: hidden;
  background-color: var(--color-light);
  color: #011a06;
}

.acf-local-feature-grid__wave {
  display: block;
  line-height: 0;
}

.acf-local-feature-grid__wave--top {
  margin-inline: 0;
  inline-size: 100%;
}

.acf-local-feature-grid__wave--top svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 50px; /* styleguide-exception: wave decorative min */
  transform: scaleY(-1);
}

.acf-local-feature-grid__body {
  position: relative;
  padding-inline: var(--block-pad-inline);
  overflow: hidden;
  background-color: var(--color-light);
}

.acf-local-feature-grid__wave--bottom {
  margin-inline: calc(-1 * var(--block-pad-inline));
  inline-size: calc(100% + (2 * var(--block-pad-inline)));
}

.acf-local-feature-grid__wave--bottom svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  min-block-size: 50px; /* styleguide-exception: wave decorative min */
  transform: scaleY(-1);
}

.acf-local-feature-grid__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  /* Same block padding as packages/columns. 0 on the end sat cards on the next band. */
  padding-block: var(--space-2xl);
  padding-inline: 0;
}

/* Space before the bottom wave, like acf-service-packages. */
.acf-local-feature-grid--has-bottom-wave .acf-local-feature-grid__container {
  padding-block-end: var(--space-2xl);
}

/* Grass-only handoff still needs room under the cards. */
.acf-local-feature-grid:has(> .bpa-local-grass-divider):not(.acf-local-feature-grid--has-bottom-wave) .acf-local-feature-grid__container {
  padding-block-end: var(--space-xl);
}

.acf-local-feature-grid__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.acf-local-feature-grid__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-brand-green);
  border-radius: 999px; /* styleguide-exception: pill */
  background-color: var(--color-light);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  color: var(--color-brand-green);
  white-space: nowrap;
}

/* Beat .entry-content h2 { color + font-size } from reset.css */
.acf-local-feature-grid h2.acf-local-feature-grid__heading {
  margin: 0;
  max-inline-size: 48rem; /* styleguide-exception: prototype heading-max 768px */
  font-family: var(--font-family-serif);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  color: var(--color-brand-forest);
}

.acf-local-feature-grid__intro-text {
  max-inline-size: 48rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: #011a06;
}

.acf-local-feature-grid__intro-text p {
  margin: 0;
}

.acf-local-feature-grid__grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-8); /* 32px — Figma grid gap */
  inline-size: 100%;
}

.acf-local-feature-grid__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 0;
  padding: var(--spacing-5); /* 20px — Figma card inset */
  border: var(--border-card);
  outline: none;
  border-radius: var(--radius-leaf-sm);
  background-color: var(--color-light);
  align-items: stretch;
  justify-content: flex-start;
}

.acf-local-feature-grid__card-media {
  overflow: hidden;
  flex-shrink: 0;
  align-self: stretch;
  inline-size: 100%;
  max-inline-size: 100%;
  /* Same photo frame as acf-financing-section cards. */
  block-size: 138px; /* styleguide-exception: financing card media */
  border-radius: var(--radius-leaf-sm);
}

.acf-local-feature-grid__card-media img,
.acf-local-feature-grid__card-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

/* Beat .entry-content h3 { font-size + color } from reset.css */
.acf-local-feature-grid h3.acf-local-feature-grid__card-title {
  margin: 0;
  inline-size: 100%;
  font-family: var(--font-family-base);
  font-size: clamp(1rem, 0.95rem + 0.25cqi, 1.25rem); /* styleguide-exception: text-h5-size */
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  text-align: start;
  color: var(--color-brand-green);
}

.acf-local-feature-grid__card-text {
  margin: 0;
  inline-size: 100%;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  text-align: start;
  color: #000;
}

.acf-local-feature-grid__card-text p {
  margin: 0;
}

.acf-local-feature-grid__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-8);
  inline-size: 100%;
  text-align: center;
}

.acf-local-feature-grid__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.acf-local-feature-grid__actions .bpa-button--secondary {
  gap: var(--space-xs);
}

.acf-local-feature-grid__button-icon {
  flex-shrink: 0;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--color-brand-green);
}

.acf-local-feature-grid__phone {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-brand-forest);
}

.acf-local-feature-grid__phone-link {
  text-decoration: none;
}

.acf-local-feature-grid__phone-link:hover,
.acf-local-feature-grid__phone-link:focus-visible {
  text-decoration: underline;
}

/* Block-specific grass seam cover — shared layout in base/local-grass-divider.css */
.acf-local-feature-grid:has(+ .acf-local-testimonials-section) .acf-local-feature-grid__grass-img {
  margin-block-end: -4px; /* styleguide-exception: seam cover */
}

/* Feature-grid bottom wave → next service band. Covers the 1px SVG seam. */
.acf-local-feature-grid--has-bottom-wave + .acf-about-us-explain-section,
.acf-local-feature-grid--has-bottom-wave + .acf-local-testimonials-section,
.acf-local-feature-grid--has-bottom-wave + .acf-service-packages,
.wp-block-acf-acf-local-feature-grid:has(.acf-local-feature-grid--has-bottom-wave) + .wp-block-acf-acf-about-us-explain-section .acf-about-us-explain-section,
.wp-block-acf-acf-local-feature-grid:has(.acf-local-feature-grid--has-bottom-wave) + .wp-block-acf-acf-local-testimonials-section .acf-local-testimonials-section,
.wp-block-acf-acf-local-feature-grid:has(.acf-local-feature-grid--has-bottom-wave) + .wp-block-acf-acf-service-packages .acf-service-packages {
  margin-block-start: -4px; /* styleguide-exception: flush wave handoff */
}

@media (min-width: 640px) {
  .acf-local-feature-grid__grid {
    display: grid;
    gap: var(--spacing-8);
    align-items: stretch;
    justify-items: stretch;
  }

  .acf-local-feature-grid__grid--cols-1 {
    grid-template-columns: minmax(0, 25.3125rem); /* styleguide-exception: Figma 405px card */
    justify-content: center;
  }

  .acf-local-feature-grid__grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acf-local-feature-grid__grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .acf-local-feature-grid__grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .acf-local-feature-grid__body {
    padding-inline: var(--space-sm);
  }

  .acf-local-feature-grid__wave--bottom {
    margin-inline: calc(-1 * var(--space-sm));
    inline-size: calc(100% + (2 * var(--space-sm)));
  }

  .acf-local-feature-grid > .acf-local-feature-grid__grass.bpa-local-grass-divider,
  .acf-local-feature-grid > .bpa-local-grass-divider {
    margin-inline: calc(-1 * var(--space-sm));
    inline-size: calc(100% + (2 * var(--space-sm)));
  }

  .acf-local-feature-grid:has(+ .acf-local-testimonials-section) .acf-local-feature-grid__grass-img {
    margin-block-end: -6px; /* styleguide-exception: tighter mobile seam */
  }

  .acf-local-feature-grid__grid {
    gap: var(--space-lg);
  }

  .acf-local-feature-grid h2.acf-local-feature-grid__heading {
    font-size: var(--font-size-3xl);
  }

  .acf-local-feature-grid__actions {
    flex-direction: column;
    align-items: stretch;
    inline-size: 100%;
    max-inline-size: 400px; /* styleguide-exception: mobile CTA stack */
  }

  .acf-local-feature-grid__actions .bpa-button {
    justify-content: center;
  }

  .acf-local-feature-grid__footer {
    flex-direction: column;
    gap: var(--space-md);
  }
}