/**
 * acf-blog-section — franchise green blog archive (Figma Layout / Blog Section /, 7230:4883).
 */

.acf-blog-section {
  position: relative;
  overflow: hidden;
}

.acf-blog-section:not([class*="bpa-local-grass-color--"]) {
  background-color: var(--color-franchise-green, #11733f);
}

.acf-blog-section.alignfull,
.acf-blog-section.alignwide {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
}

.acf-blog-section__wave {
  display: block;
  line-height: 0;
}

.acf-blog-section__wave--top {
  margin-inline: 0;
  inline-size: 100%;
}

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

.acf-blog-section__body {
  position: relative;
  padding-inline: var(--block-pad-inline);
  overflow: hidden;
  background-color: inherit;
}

.acf-blog-section:not([class*="bpa-local-grass-color--"]) .acf-blog-section__body {
  background-color: var(--color-franchise-green, #11733f);
}

.acf-blog-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  padding-inline: 0;
  padding-block: 6.25rem; /* styleguide-exception: Figma spacing-25 (100px) */
}

.acf-blog-section--has-top-wave .acf-blog-section__inner {
  padding-block-start: var(--space-2xl);
}

.acf-blog-section--has-bottom-wave .acf-blog-section__inner {
  padding-block-end: var(--space-2xl);
}

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

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

.acf-blog-section:has(> .bpa-local-grass-divider):not(.acf-blog-section--has-bottom-wave) .acf-blog-section__body {
  padding-block-end: var(--space-xl);
}

.acf-blog-section--has-bottom-wave:has(> .bpa-local-grass-divider) > .bpa-local-grass-divider {
  margin-block-start: 0;
}

/* Toolbar — search + category chips (Blog / Search bar / Categorys). */
.acf-blog-section__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  inline-size: 100%;
}

.acf-blog-section__search {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-light);
  border-radius: var(--radius-card);
  background-color: transparent;
}

.acf-blog-section__search-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-light);
  line-height: 0;
}

.acf-blog-section__search-svg {
  display: block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.acf-blog-section__search-input {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-light);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.acf-blog-section__search-input::placeholder {
  color: var(--color-light);
  opacity: 1;
}

.acf-blog-section__search-input:focus {
  outline: none;
}

.acf-blog-section__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.acf-blog-section__filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background-color: var(--color-light);
  color: var(--color-dark);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  text-decoration: none;
}

.acf-blog-section__filter-chip.is-active {
  border-color: var(--color-franchise-green-bright);
}

.acf-blog-section__filter-chip:hover,
.acf-blog-section__filter-chip:focus-visible {
  filter: brightness(0.98);
}

/* Post grid — white bordered cards (Figma Blog / Blogs grid /). */
.acf-blog-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: var(--spacing-8);
  inline-size: 100%;
}

.acf-blog-section__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  block-size: 100%;
  padding: var(--spacing-6);
  box-sizing: border-box;
  border: var(--border-card-accent);
  border-radius: var(--radius-leaf-lg);
  overflow: hidden;
  background-color: var(--color-light);
  color: var(--color-dark);
}

.acf-blog-section__card-media {
  overflow: hidden;
  line-height: 0;
  block-size: 9.3975rem; /* styleguide-exception: Figma ~150px image height */
  border-radius: var(--radius-leaf-sm);
}

.entry-content .acf-blog-section__card,
.wp-block-post-content .acf-blog-section__card {
  border-radius: var(--radius-leaf-lg);
}

.entry-content .acf-blog-section__card-media,
.wp-block-post-content .acf-blog-section__card-media {
  border-radius: var(--radius-leaf-sm);
}

.acf-blog-section__card-media picture,
.acf-blog-section__card-media img,
.acf-blog-section__card-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Category pill — global rules in assets/css/base/site.css (.bpa-blog-category-pill). */

.acf-blog-section__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  flex: 1 1 auto;
  min-block-size: 0;
}

/* Beat .entry-content h3 (32px) — Figma H5: Roboto Bold 20px / 140% / forest. */
.acf-blog-section .acf-blog-section__card-title,
.acf-blog-section h3.acf-blog-section__card-title,
.entry-content .acf-blog-section h3.acf-blog-section__card-title,
.wp-block-post-content .acf-blog-section h3.acf-blog-section__card-title {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: 0;
  color: var(--color-brand-forest);
}

.acf-blog-section__card-title a,
.entry-content .acf-blog-section__card-title a,
.wp-block-post-content .acf-blog-section__card-title a {
  font: inherit;
  color: inherit;
  text-decoration: none;
}

.acf-blog-section__card-title a:hover,
.acf-blog-section__card-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.acf-blog-section__card-text {
  margin: 0;
  color: var(--color-dark);
}

.acf-blog-section__card-link {
  display: inline-flex;
  align-items: center;
  /* Pin Read More to the card footer; equal-height grid rows stretch the body above. */
  margin-block-start: auto;
  padding-block-start: var(--spacing-8);
  color: var(--color-brand-forest);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-decoration: none;
}

.acf-blog-section__card-link-label {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--color-brand-green-alt);
}

/* Pagination — white controls on green band. */
.acf-blog-section__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--block-gap);
  inline-size: 100%;
}

.acf-blog-section__pagination-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0.625rem;
  border: 1px solid var(--color-light);
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--color-light);
  text-decoration: none;
}

.acf-blog-section__pagination-arrow--next {
  border-color: transparent;
  background-color: var(--color-franchise-green-bright);
}

.acf-blog-section__pagination-arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.acf-blog-section__pagination-arrow-icon {
  display: block;
  line-height: 0;
}

.acf-blog-section__pagination-arrow-icon .bpa-inline-svg,
.acf-blog-section__pagination-arrow-icon svg {
  display: block;
  inline-size: 1.125rem;
  block-size: auto;
}

.acf-blog-section__pagination-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.acf-blog-section__pagination-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  text-decoration: none;
}

.acf-blog-section__pagination-dot-active,
.acf-blog-section__pagination-dot-inactive {
  display: block;
  line-height: 0;
}

/* Same 8px glyph as blog-loop. Without this, .bpa-inline-svg is 100% and the dots blow up. */
.acf-blog-section__pagination-dot-active .bpa-inline-svg,
.acf-blog-section__pagination-dot-active svg,
.acf-blog-section__pagination-dot-inactive .bpa-inline-svg,
.acf-blog-section__pagination-dot-inactive svg {
  display: block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
}

.acf-blog-section__pagination-dot .acf-blog-section__pagination-dot-active {
  display: none;
}

.acf-blog-section__pagination-dot .acf-blog-section__pagination-dot-inactive {
  display: block;
  filter: brightness(0) invert(1);
}

.acf-blog-section__pagination-dot.is-active .acf-blog-section__pagination-dot-active {
  display: block;
  filter: brightness(0) invert(1);
}

.acf-blog-section__pagination-dot.is-active .acf-blog-section__pagination-dot-inactive {
  display: none;
}

/* Handoff: grass → off-white FAQ section below. */
.acf-blog-section:has(> .bpa-local-grass-divider) + .acf-local-cta-section,
.acf-blog-section:has(> .bpa-local-grass-divider) + .acf-faq-resources-section,
section:has(> .bpa-local-grass-divider) + section[class*="acf-"],
.wp-block[class*="wp-block-acf-acf-"]:has(.bpa-local-grass-divider) + .wp-block[class*="wp-block-acf-acf-"] {
  margin-block-start: -4px; /* styleguide-exception: seam cover */
  position: relative;
  z-index: 1;
}

.acf-blog-section:has(> .bpa-local-grass-divider) + section[class*="acf-"] [class*="__wave--top"],
.acf-blog-section:has(> .bpa-local-grass-divider) + .wp-block[class*="wp-block-acf-acf-"] [class*="__wave--top"] {
  display: none;
}

@media (min-width: 768px) {
  .acf-blog-section__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

  .acf-blog-section__inner {
    padding-block: var(--space-xl);
    gap: var(--space-lg);
  }

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

  .acf-blog-section:has(> .bpa-local-grass-divider) + section[class*="acf-"],
  .wp-block[class*="wp-block-acf-acf-"]:has(.bpa-local-grass-divider) + .wp-block[class*="wp-block-acf-acf-"] {
    margin-block-start: -6px; /* styleguide-exception: tighter mobile grass seam */
  }
}