/**
 * Feature Grid (field_feature_grid_1).
 * Wraps unlimited feature_card paragraphs in a responsive grid.
 * Layout controls column count/spacing/borders. Style controls
 * background/border/radius on each card. The two combine freely -
 * e.g. .feature-grid--grid-layout-2.feature-grid--grid-style-2.
 */

.feature-grid {
  display: grid;
}

/* ============================================
   GRID LAYOUT 1
   Desktop: max 4 columns, generous column padding, equal-size cards.
   Inner borders between cards/columns only - no outer border on the grid.
   Tablet: 2 columns. Mobile: 1 column, no inner vertical borders,
   tighter padding.
   ============================================ */
.feature-grid--grid-layout-1 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-template-rows: 1fr;
}
.feature-grid--grid-layout-1 .feature-grid__item {
  padding: 2rem;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.feature-grid--grid-layout-1 .feature-grid__item:nth-child(4n) {
  border-right: none;
}
.feature-grid--grid-layout-1 .feature-grid__item:last-child,
.feature-grid--grid-layout-1 .feature-grid__item:nth-last-child(-n+4):nth-child(4n+1),
.feature-grid--grid-layout-1 .feature-grid__item:nth-last-child(-n+4) {
  border-bottom: none;
}

@media (max-width: 991.98px) {
  .feature-grid--grid-layout-1 {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-grid--grid-layout-1 .feature-grid__item {
    padding: 1.5rem;
    border-right: none;
  }
  /* At 2 columns, the right-most card in each row is the even one. */
  .feature-grid--grid-layout-1 .feature-grid__item:nth-child(2n) {
    border-right: none;
  }
  .feature-grid--grid-layout-1 .feature-grid__item:nth-child(odd) {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
  }
}
@media (max-width: 575.98px) {
  .feature-grid--grid-layout-1 {
    grid-template-columns: 1fr;
  }
  .feature-grid--grid-layout-1 .feature-grid__item {
    padding: 1.25rem 1rem;
    border-right: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .feature-grid--grid-layout-1 .feature-grid__item:last-child {
    border-bottom: none;
  }
}

/* ============================================
   GRID LAYOUT 2
   Desktop: responsive columns (240px min), each card gets its own light
   border, good spacing. Tablet/mobile: gap and min column width shrink
   so cards never overflow the viewport; collapses to 1 column on phones.
   ============================================ */
.feature-grid--grid-layout-2 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.feature-grid--grid-layout-2 .feature-grid__item .rochefs-feature-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  height: 100%;
}

@media (max-width: 991.98px) {
  .feature-grid--grid-layout-2 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
  }
}
@media (max-width: 575.98px) {
  .feature-grid--grid-layout-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ============================================
   GRID LAYOUT 3
   Fixed at 2 columns, same card treatment as layout 2. Steps down to
   1 column at tablet width, with matching gap reduction.
   ============================================ */
.feature-grid--grid-layout-3 {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.feature-grid--grid-layout-3 .feature-grid__item .rochefs-feature-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  height: 100%;
}
@media (max-width: 767.98px) {
  .feature-grid--grid-layout-3 {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
@media (max-width: 575.98px) {
  .feature-grid--grid-layout-3 {
    gap: 1rem;
  }
}

/* ============================================
   GRID LAYOUT: STACKED
   Single column at every width; gap tightens on smaller screens.
   ============================================ */
.feature-grid--grid-layout-stacked {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (max-width: 575.98px) {
  .feature-grid--grid-layout-stacked {
    gap: 1rem;
  }
}

/* ============================================
   GRID STYLE 1
   No background color. Light visible border on all sides, generous
   padding so content sits inside the border, not flush to it. Padding
   tightens on mobile so bordered cards don't eat the narrow viewport.
   ============================================ */
.feature-grid--grid-style-1 .rochefs-feature-card {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  border-radius: 0;
  color: var(--color-secondary, #040304);
}
.feature-grid--grid-style-1 .rochefs-feature-card__text {
  color: var(--color-secondary, #040304);
}
@media (max-width: 575.98px) {
  .feature-grid--grid-style-1 .rochefs-feature-card {
    padding: 1.25rem 1rem;
  }
}

/* ============================================
   GRID STYLE 2
   White background, no border, slight visible border-radius.
   ============================================ */
.feature-grid--grid-style-2 .rochefs-feature-card {
  background: #fff;
  border: none;
  border-radius: 0.5rem;
  color: var(--color-secondary, #040304);
}
.feature-grid--grid-style-2 .rochefs-feature-card__text {
  color: var(--color-secondary, #040304);
}