/**
 * Benefit Section Styles - Mobile First
 *
 * Dynamic Grid Layout Pattern:
 * - 1 item: Centered
 * - 2 items: 2 columns side by side
 * - 3 items: 3 columns
 * - 4 items: 4 columns
 * - 5+ items: First 4 in 4 cols, then repeat pattern (5th centered, etc.)
 *
 * Fixed card size: 282px × 228px
 */

/* Benefit Section Base - Mobile Default */
.benefit-section {
  background-color: var(--benefit-bg, #f5f9f7);
  padding: 40px 0;
  position: relative;

  @media (min-width: 1200px) {
    padding: 60px 0 60px;
  }
}

.benefit-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  @media (min-width: 1200px) {
    padding: 0px;
  }
}

/* Section Title */
.benefit-section-title {
  font-family: "Outfit", sans-serif !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 40px !important;
  text-align: center;
  margin-bottom: 40px !important;
  color: var(--benefit-title, #2c9251) !important;
  text-transform: none !important;

  @media (min-width: 1200px) {
    font-size: 32px !important;
    line-height: 48px !important;
  }
}

/* Benefit Grid Container - Dynamic Layout */
.benefit-grid {
  display: grid;
  column-gap: 16px;
  row-gap: 16px;
  width: 100%;
  justify-items: center;

  /* Mobile: 2 column grid with odd items centered */
  grid-template-columns: repeat(2, 1fr);

  @media (min-width: 1200px) {
    column-gap: 24px;
    row-gap: 40px;
    /* Dynamic columns based on item count - handled by JS or nth-child */
  }
}

/* Fixed Card Size: 282px × 228px */
.benefit-item {
  background-color: var(--benefit-card-bg, #ffffff);
  padding: 46px 10px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  /* Mobile: Full width */
  width: 100%;
  width: 186px;
  /* height: 228px; */
  height: auto;

  @media (min-width: 1200px) {
    /* Fixed desktop size */
    width: 282px;

    padding: 38px 16px;
  }
}

.benefit-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(44, 146, 81, 0.15);
}

/* Mobile Layout Logic: Pairing system (1-2, 3-4, 5-6, 7-8) */
@media (max-width: 1199px) {
  /* Default: Odd items span full width (centered) */
  .benefit-item:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* When item 2 exists, item 1 takes left column */
  .benefit-item:nth-child(1):not(:last-child) {
    grid-column: 1 / 2;
  }

  /* Item 2 takes right column, same row as item 1 */
  .benefit-item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  /* When item 4 exists, item 3 takes left column */
  .benefit-item:nth-child(3):not(:last-child) {
    grid-column: 1 / 2;
  }

  /* Item 4 takes right column, same row as item 3 */
  .benefit-item:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  /* When item 6 exists, item 5 takes left column */
  .benefit-item:nth-child(5):not(:last-child) {
    grid-column: 1 / 2;
  }

  /* Item 6 takes right column, same row as item 5 */
  .benefit-item:nth-child(6) {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  /* When item 8 exists, item 7 takes left column */
  .benefit-item:nth-child(7):not(:last-child) {
    grid-column: 1 / 2;
  }

  /* Item 8 takes right column, same row as item 7 */
  .benefit-item:nth-child(8) {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }

  /* Fallback for browsers without :has() support */
  @supports not selector(:has(*)) {
    .benefit-item:nth-child(odd) {
      grid-column: 1 / 2;
    }
    .benefit-item:nth-child(even) {
      grid-column: 2 / 3;
    }
  }
}

/* Desktop Layout Logic (≥1200px) */
@media (min-width: 1200px) {
  /* When only 1 item: Center */
  .benefit-grid:has(.benefit-item:nth-child(1):last-child) {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  /* When 2 items: 2 columns centered */
  .benefit-grid:has(.benefit-item:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 282px);
    justify-content: center;
  }

  /* When 3 items: 3 columns centered */
  .benefit-grid:has(.benefit-item:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 282px);
    justify-content: center;
  }

  /* When 4 items: 4 columns centered */
  .benefit-grid:has(.benefit-item:nth-child(4):last-child) {
    grid-template-columns: repeat(4, 282px);
    justify-content: center;
  }

  /* When 5 items: 4 cols, then 1 centered */
  .benefit-grid:has(.benefit-item:nth-child(5):last-child) {
    grid-template-columns: repeat(4, 282px);
    justify-content: center;
  }

  .benefit-grid:has(.benefit-item:nth-child(5):last-child)
    .benefit-item:nth-child(5) {
    grid-column: 2 / 4; /* Center in 4-column grid */
  }

  /* When 6 items: 4 cols, then 2 cols centered */
  .benefit-grid:has(.benefit-item:nth-child(6):last-child) {
    grid-template-columns: repeat(4, 282px);
    justify-content: center;
  }

  .benefit-grid:has(.benefit-item:nth-child(6):last-child)
    .benefit-item:nth-child(5) {
    grid-column: 2 / 3;
  }

  .benefit-grid:has(.benefit-item:nth-child(6):last-child)
    .benefit-item:nth-child(6) {
    grid-column: 3 / 4;
  }

  /* When 7 items: 4 cols, then 3 cols centered */
  .benefit-grid:has(.benefit-item:nth-child(7):last-child) {
    grid-template-columns: repeat(4, 282px);
    justify-content: center;
  }

  /* Items 5–7 flow naturally left-to-right starting from column 1 */
  .benefit-grid:has(.benefit-item:nth-child(7):last-child)
    .benefit-item:nth-child(5),
  .benefit-grid:has(.benefit-item:nth-child(7):last-child)
    .benefit-item:nth-child(6),
  .benefit-grid:has(.benefit-item:nth-child(7):last-child)
    .benefit-item:nth-child(7) {
    grid-column: span 1;
  }

  /* When 8 items: 4 cols + 4 cols */
  .benefit-grid:has(.benefit-item:nth-child(8):last-child) {
    grid-template-columns: repeat(4, 282px);
    justify-content: center;
  }
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(*)) {
  @media (min-width: 1200px) {
    .benefit-grid {
      grid-template-columns: repeat(auto-fit, minmax(282px, 282px));
      justify-content: center;
    }
  }
}

/* Benefit Icon */
.benefit-icon {
  width: auto;
  height: auto;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  @media (min-width: 1200px) {
    width: auto;
    height: auto;
  }
}

.benefit-icon img {
  max-width: 100%;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;

  /* @media (min-width: 1200px) {
    max-height: 72px;
  } */
}

/* Benefit Title */
.benefit-item-title {
  font-family: "Outfit", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 24px !important;
  color: var(--benefit-item-title-color, #000000) !important;
  letter-spacing: 0px !important;
  margin-bottom: 0px !important;
  margin-top: 0px !important;

  @media (min-width: 1200px) {
    font-size: 20px !important;
    line-height: 32px !important;
  }
}

/* Benefit Description */
.benefit-item-description {
  font-family: "Outfit", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: var(--benefit-item-desc-color, #666666) !important;
  margin: 0 !important;

  @media (min-width: 1200px) {
    font-size: 20px !important;
    line-height: 32px !important;
  }
}

/* Empty State */
.benefit-grid:empty::after {
  content: "No benefits added yet. Add items in WordPress admin.";
  display: block;
  text-align: center;
  padding: 40px;
  color: #999;
  font-style: italic;
}