/* Feature Cards Grid Section */

.feature-cards-grid {
  position: relative;
  z-index: 8
}

.feature-cards-grid__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

/* Header Text Alignment Options */
.feature-cards-grid__header.align-left {
  text-align: left;
}

.feature-cards-grid__header.align-center {
  text-align: center;
}

.feature-cards-grid__header.align-right {
  text-align: right;
}

.feature-cards-grid__heading {
  line-height: 1;
}

@media (min-width: 1024px) {
  .feature-cards-grid__heading {
    line-height: 1.1;
  }
}

.feature-cards-grid__description {
  line-height: 1.5;
  margin-bottom: 0;
}

/* Cards Grid - Base */
.feature-cards-grid__cards {
  width: 100%;
}

/* Mobile Gap Variants */
.feature-cards-grid__cards[class*="gap-xs"] { gap: var(--space-xs); }
.feature-cards-grid__cards[class*="gap-sm"] { gap: var(--space-sm); }
.feature-cards-grid__cards[class*="gap-md"] { gap: var(--space-md); }
.feature-cards-grid__cards[class*="gap-lg"] { gap: var(--space-lg); }
.feature-cards-grid__cards[class*="gap-xl"] { gap: var(--space-xl); }
.feature-cards-grid__cards[class*="gap-2xl"] { gap: var(--space-2xl); }
.feature-cards-grid__cards[class*="gap-3xl"] { gap: var(--space-3xl); }

@media (min-width: 1024px) {
  /* Desktop Gap Variants - using attribute selector to match Liquid output */
  .feature-cards-grid__cards[class*="lg:gap-xs"] { gap: var(--space-xs); }
  .feature-cards-grid__cards[class*="lg:gap-sm"] { gap: var(--space-sm); }
  .feature-cards-grid__cards[class*="lg:gap-md"] { gap: var(--space-md); }
  .feature-cards-grid__cards[class*="lg:gap-lg"] { gap: var(--space-lg); }
  .feature-cards-grid__cards[class*="lg:gap-xl"] { gap: var(--space-xl); }
  .feature-cards-grid__cards[class*="lg:gap-2xl"] { gap: var(--space-2xl); }
  .feature-cards-grid__cards[class*="lg:gap-3xl"] { gap: var(--space-3xl); }
}

/* ============================================
   ROWS LAYOUT (Flexbox - Original Behavior)
   ============================================ */
.feature-cards-grid__cards.layout-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  align-items: stretch;
}

@media (min-width: 768px) {
  .feature-cards-grid__cards.layout-rows {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  
  .feature-cards-grid__cards.layout-rows .feature-cards-grid__card {
    flex: 1 1 calc(100% / var(--columns-tablet, 2) - var(--space-xl));
    max-width: calc(100% / var(--columns-tablet, 2) - var(--space-xl));
  }
  
  /* Equal Height Cards - Rows Layout */
  .feature-cards-grid__cards.layout-rows.feature-cards-grid__cards--equal-height {
    align-items: stretch;
  }
  
  .feature-cards-grid__cards.layout-rows.feature-cards-grid__cards--equal-height .feature-cards-grid__card {
    align-self: stretch;
  }
}

@media (min-width: 1024px) {
  .feature-cards-grid__cards.layout-rows .feature-cards-grid__card {
    flex: 1 1 calc(100% / var(--columns-desktop, 4) - var(--space-xl));
    max-width: calc(100% / var(--columns-desktop, 4) - var(--space-xl));
  }
}

/* ============================================
   COLUMNS LAYOUT (CSS Grid - Like Testimonials)
   ============================================ */
.feature-cards-grid__cards.layout-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  /* align-items: stretch; */
}

@media (min-width: 768px) {
  .feature-cards-grid__cards.layout-columns {
    grid-template-columns: repeat(var(--columns-tablet, 2), 1fr);
  }
}

@media (min-width: 1024px) {
  .feature-cards-grid__cards.layout-columns {
    grid-template-columns: repeat(var(--columns-desktop, 4), 1fr);
    justify-content: center;
  }
}

/* Columns Layout Card Sizing */
.feature-cards-grid__cards.layout-columns .feature-cards-grid__card {
  width: 100%;
  max-width: 100%;
  flex: none;
}

/* Equal Height Cards - Columns Layout (grid handles this naturally) */
.feature-cards-grid__cards.layout-columns.feature-cards-grid__cards--equal-height {
  align-items: stretch;
}

.feature-cards-grid__cards.layout-columns.feature-cards-grid__cards--equal-height .feature-cards-grid__card {
  align-self: stretch;
  height: auto;
  display: flex;
  flex-direction: column;
}

.feature-cards-grid__cards.layout-columns.feature-cards-grid__cards--equal-height .feature-cards-grid__card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.feature-cards-grid__cards.layout-columns.feature-cards-grid__cards--equal-height .feature-cards-grid__card-button {
  margin-top: auto;
}

/* Individual Card */
.feature-cards-grid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-width: 0;
  box-sizing: border-box;
}

/* Card with no icon - vertically center the content */
.feature-cards-grid__card--no-icon {
  justify-content: center;
}

.feature-cards-grid__card--no-icon .feature-cards-grid__card-content {
  flex: 0 0 auto;
}

/* Card with only icon (no title/description) - vertically center */
.feature-cards-grid__card--icon-only {
  justify-content: center;
}

/* Card Text Alignment Options */
.feature-cards-grid__card.align-left {
  align-items: flex-start;
  text-align: left;
}

.feature-cards-grid__card.align-center {
  align-items: center;
  text-align: center;
}

.feature-cards-grid__card.align-right {
  align-items: flex-end;
  text-align: right;
}

/* Left Layout: Icon and Content Side by Side */
.feature-cards-grid__card.left {
  align-items: flex-start;
  text-align: left;
}

.feature-cards-grid__card-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-lg);
  width: 100%;
}

/* Mobile Gap Variants for Icon-Text Spacing */
.feature-cards-grid__card-row[class*="gap-xs"] { gap: var(--space-xs); }
.feature-cards-grid__card-row[class*="gap-sm"] { gap: var(--space-sm); }
.feature-cards-grid__card-row[class*="gap-md"] { gap: var(--space-md); }
.feature-cards-grid__card-row[class*="gap-lg"] { gap: var(--space-lg); }
.feature-cards-grid__card-row[class*="gap-xl"] { gap: var(--space-xl); }
.feature-cards-grid__card-row[class*="gap-2xl"] { gap: var(--space-2xl); }
.feature-cards-grid__card-row[class*="gap-3xl"] { gap: var(--space-3xl); }

@media (min-width: 1024px) {
  /* Desktop Gap Variants for Icon-Text Spacing */
  .feature-cards-grid__card-row[class*="lg:gap-xs"] { gap: var(--space-xs); }
  .feature-cards-grid__card-row[class*="lg:gap-sm"] { gap: var(--space-sm); }
  .feature-cards-grid__card-row[class*="lg:gap-md"] { gap: var(--space-md); }
  .feature-cards-grid__card-row[class*="lg:gap-lg"] { gap: var(--space-lg); }
  .feature-cards-grid__card-row[class*="lg:gap-xl"] { gap: var(--space-xl); }
  .feature-cards-grid__card-row[class*="lg:gap-2xl"] { gap: var(--space-2xl); }
  .feature-cards-grid__card-row[class*="lg:gap-3xl"] { gap: var(--space-3xl); }
}

.feature-cards-grid__card.left .feature-cards-grid__card-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.feature-cards-grid__card.left .feature-cards-grid__card-content {
  flex: 1;
  min-width: 0;
}

/* Mobile adjustments for left layout */
@media (max-width: 767px) {
  .feature-cards-grid__card.left .feature-cards-grid__card-row {
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .feature-cards-grid__card.left .feature-cards-grid__card-icon {
    align-self: flex-start;
  }
}


/* Card Icon */
.feature-cards-grid__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.feature-cards-grid__card-icon img,
.feature-cards-grid__card-icon svg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .feature-cards-grid__card-icon {
    width: var(--icon-size-desktop, 112px) !important;
  }
}

/* Icon Image Fit Options */

/* Fit - maintain aspect ratio, height controlled by icon size, width auto */
.feature-cards-grid__card-icon.icon-fit {
  width: auto !important;
  max-width: 100%;
}

.feature-cards-grid__card-icon.icon-fit img,
.feature-cards-grid__card-icon.icon-fit svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

@media (min-width: 1024px) {
  .feature-cards-grid__card-icon.icon-fit {
    height: var(--icon-size-desktop, 112px) !important;
  }
}

/* Fill - fixed square container, cover and crop if needed */
.feature-cards-grid__card-icon.icon-fill {
  overflow: hidden;
}

.feature-cards-grid__card-icon.icon-fill img,
.feature-cards-grid__card-icon.icon-fill svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) {
  .feature-cards-grid__card-icon.icon-fill {
    width: var(--icon-size-desktop, 112px) !important;
    height: var(--icon-size-desktop, 112px) !important;
  }
}

/* Card Content */
.feature-cards-grid__card-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  flex: 1;
}

/* Card Title */
.feature-cards-grid__card-title {
  margin-bottom: 0;
}

.feature-cards-grid__card-title h3 {
  line-height: 1.4;
  margin-bottom: 0;
}

/* Card Description */
.feature-cards-grid__card-description {
  margin-bottom: 0;
}

.feature-cards-grid__card-description p {
  line-height: 1.5;
  margin-bottom: 0;
}

/* Card Button */
.feature-cards-grid__card-button {
  margin-top: auto;
  padding-top: var(--space-lg);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-cards-grid__card.left .feature-cards-grid__card-button {
  justify-content: flex-start;
}

/* Button alignment based on card text alignment */
.feature-cards-grid__card.align-left .feature-cards-grid__card-button {
  justify-content: flex-start;
}

.feature-cards-grid__card.align-center .feature-cards-grid__card-button {
  justify-content: center;
}

.feature-cards-grid__card.align-right .feature-cards-grid__card-button {
  justify-content: flex-end;
}

.feature-cards-grid__card-button .btn {
  cursor: pointer;
}

/* Background Image Handling */
.feature-cards-grid[data-bg] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.feature-cards-grid .inner-container[data-bg] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================
   MOBILE 2-COLUMN LAYOUT WITH DIVIDERS
   ============================================ */

/* Mobile 2-column grid with dividers */
@media (max-width: 767px) {
  .feature-cards-grid__cards--mobile-2-cols.layout-columns {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0 !important;
    column-gap: var(--space-md);
    position: relative;
  }

  .feature-cards-grid__cards--mobile-2-cols.layout-rows {
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 0 !important;
    column-gap: var(--space-md);
    position: relative;
  }

  .feature-cards-grid__cards--mobile-2-cols.layout-rows .feature-cards-grid__card {
    flex: 0 0 calc(50% - var(--space-sm));
    max-width: calc(50% - var(--space-sm));
  }

  /* Card padding for divider spacing */
  .feature-cards-grid__cards--mobile-2-cols .feature-cards-grid__card {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    position: relative;
  }

  /* Horizontal faded divider line between rows */
  .feature-cards-grid__cards--mobile-2-cols .feature-cards-grid__card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent 0%,
      var(--color-neutral, #d4d4d4) 20%,
      var(--color-neutral, #d4d4d4) 80%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  /* Hide horizontal divider on last row items (last 2 items) */
  .feature-cards-grid__cards--mobile-2-cols .feature-cards-grid__card:nth-last-child(-n+2)::after {
    display: none;
  }

  /* Vertical faded divider line in center of grid - top half */
  .feature-cards-grid__cards--mobile-2-cols::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      var(--color-neutral, #d4d4d4) 20%,
      var(--color-neutral, #d4d4d4) 80%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  /* Vertical faded divider line in center of grid - bottom half */
  .feature-cards-grid__cards--mobile-2-cols::after {
    content: '';
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      var(--color-neutral, #d4d4d4) 20%,
      var(--color-neutral, #d4d4d4) 80%,
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  /* Center align cards in mobile 2-col layout */
  .feature-cards-grid__cards--mobile-2-cols .feature-cards-grid__card {
    text-align: center;
    align-items: center;
  }

  .feature-cards-grid__cards--mobile-2-cols .feature-cards-grid__card-content {
    text-align: center;
  }
}
@media (min-width: 1024px) {
  .w-col-2 {
    width: 16.66%;
  }
  .w-col-3 {
     width: 25%;
  }
  .w-col-4 {
    width: 33.33%
  }
  .w-col-6 {
    width: 50%
  }
  .w-col-8 {
      width: 66.67%;
  }
  .w-col-9 {
    width: 75%;
  }
  .w-col-10 {
    width: 83.33%;
  }
  .w-20 {
     width: 20% 
  }
  .w-40 {
    width: 40%;
  }
  .w-60 {
    width: 60%;
  }
  .w-80 {
    width: 80%;
  }

  .feature-cards-grid__cards[class*=w-] {
    margin-left: auto;
    margin-right: auto;
  }
}
  
















/* Heading/description are richtext rendered into the BEM wrapper, which now
   carries the typography (editor-safe). The inner tag inherits so styling
   survives even after the WYSIWYG editor strips the inner tag's classes. */
.feature-cards-grid__heading > *,
.feature-cards-grid__description > * {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0 !important;
}