/**
 * Icon Feature Grid Block Styles
 */

.icon-feature-grid {
  position: relative;
  width: 100%;
}

/* Container */
.icon-feature-grid__container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Background Colors */
.icon-feature-grid--bg-white {
  background-color: var(--background-white, #ffffff);
  color: var(--content-on-white, #1F2937);
}

.icon-feature-grid--bg-surface,
.icon-feature-grid--bg-light {
  background-color: var(--background-surface, #F7F6F1);
  color: var(--content-on-surface, #1F2937);
}

.icon-feature-grid--bg-primary {
  background-color: var(--background-primary, #002823);
  color: var(--content-on-primary, #ffffff);
}

.icon-feature-grid--bg-accent {
  background-color: var(--background-accent, #ff6b6b);
  color: var(--content-on-accent, #ffffff);
}

.icon-feature-grid--bg-tertiary {
  background-color: var(--background-tertiary, #4db8c4);
  color: var(--content-on-tertiary, #002823);
}

.icon-feature-grid--bg-info {
  background-color: #0678be;
  color: var(--content-on-primary, #ffffff);
}

.icon-feature-grid--bg-warning {
  background-color: var(--color-mustard-100, #F5A623);
  color: var(--content-on-surface, #1F2937);
}

/* Text Colors */
.icon-feature-grid--text-white,
.icon-feature-grid--text-white .icon-feature-grid__heading,
.icon-feature-grid--text-white .icon-feature-grid__description,
.icon-feature-grid--text-white .icon-feature-grid__item-title,
.icon-feature-grid--text-white .icon-feature-grid__item-description {
  color: #ffffff;
}

.icon-feature-grid--text-dark {
  color: var(--content-on-surface, #1F2937);
}

.icon-feature-grid--text-dark .icon-feature-grid__heading,
.icon-feature-grid--text-dark .icon-feature-grid__item-title {
  color: var(--content-on-surface, #1F2937);
}

.icon-feature-grid--text-dark .icon-feature-grid__description,
.icon-feature-grid--text-dark .icon-feature-grid__item-description {
  color: var(--color-text-secondary, #6b7280);
}

.icon-feature-grid--text-custom .icon-feature-grid__heading,
.icon-feature-grid--text-custom .icon-feature-grid__description,
.icon-feature-grid--text-custom .icon-feature-grid__item-title,
.icon-feature-grid--text-custom .icon-feature-grid__item-description {
  color: inherit;
}

/* Header */
.icon-feature-grid__header {
  margin-bottom: var(--spacing-48);
}

/* Apply alignment only to heading, not description */
.icon-feature-grid--align-center .icon-feature-grid__heading {
  text-align: center;
}

.icon-feature-grid--align-left .icon-feature-grid__heading {
  text-align: left;
}

.icon-feature-grid--align-right .icon-feature-grid__heading {
  text-align: right;
}

.icon-feature-grid__heading {
  font-weight: var(--font-weight-semibold-40);
  margin: 0 0 var(--spacing-16) 0;
}

/* Description - CKEditor content controls its own alignment */
.icon-feature-grid__description {
  line-height: var(--font-line-height-18);
  opacity: 0.9;
  text-align: left; /* Default to left, CKEditor styles will override */
  word-break: auto-phrase !important;
}

/* CKEditor content - ensure inline styles have highest priority */
.icon-feature-grid__description [style] {
  all: revert !important;
}

.icon-feature-grid__description [style] * {
  all: revert !important;
}

/* Ensure CKEditor content can override parent text-align */
.icon-feature-grid__description p,
.icon-feature-grid__description div,
.icon-feature-grid__description span,
.icon-feature-grid__description h1,
.icon-feature-grid__description h2,
.icon-feature-grid__description h3,
.icon-feature-grid__description h4,
.icon-feature-grid__description h5,
.icon-feature-grid__description h6,
.icon-feature-grid__description ul,
.icon-feature-grid__description ol,
.icon-feature-grid__description li,
.icon-feature-grid__description blockquote {
  text-align: inherit;
  background-color: transparent !important;
}

/* CKEditor alignment classes - highest priority */
.icon-feature-grid__description .text-align-left,
.icon-feature-grid__description [style*="text-align: left"],
.icon-feature-grid__description [style*="text-align:left"] {
  text-align: left !important;
}

.icon-feature-grid__description .text-align-center,
.icon-feature-grid__description [style*="text-align: center"],
.icon-feature-grid__description [style*="text-align:center"] {
  text-align: center !important;
}

.icon-feature-grid__description .text-align-right,
.icon-feature-grid__description [style*="text-align: right"],
.icon-feature-grid__description [style*="text-align:right"] {
  text-align: right !important;
}

.icon-feature-grid__description .text-align-justify,
.icon-feature-grid__description [style*="text-align: justify"],
.icon-feature-grid__description [style*="text-align:justify"] {
  text-align: justify !important;
}

/* Preserve specific CKEditor formatting elements */
.icon-feature-grid__description strong,
.icon-feature-grid__description b,
.icon-feature-grid__description em,
.icon-feature-grid__description i,
.icon-feature-grid__description u,
.icon-feature-grid__description s,
.icon-feature-grid__description sub,
.icon-feature-grid__description sup {
  all: revert !important;
}

/* Grid */
.icon-feature-grid__items {
  display: grid;
  gap: var(--spacing-40);
}

.icon-feature-grid--columns-2 .icon-feature-grid__items {
  grid-template-columns: repeat(2, 1fr);
}

.icon-feature-grid--columns-3 .icon-feature-grid__items {
  grid-template-columns: repeat(3, 1fr);
}

.icon-feature-grid--columns-4 .icon-feature-grid__items {
  grid-template-columns: repeat(4, 1fr);
}

/* Individual Item */
.icon-feature-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

/* Linked Item */
a.icon-feature-grid__item--linked {
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  border-radius: var(--corner-radius-8, 8px);
  /* padding: var(--spacing-16, 16px); */
}

a.icon-feature-grid__item--linked:hover {
  text-decoration: none !important;
}

/* Card Background Colors */
.icon-feature-grid__item[class*="bg-"] {
  border-radius: var(--corner-radius-8, 8px);
  padding: var(--spacing-16, 16px);
}

.icon-feature-grid__item.bg-white { background-color: var(--background-white, #ffffff); }
.icon-feature-grid__item.bg-light { background-color: var(--background-surface, #F7F6F1); }
.icon-feature-grid__item.bg-primary { background-color: var(--background-primary, #002823); color: #ffffff; }
.icon-feature-grid__item.bg-accent { background-color: var(--background-accent, #ff6b6b); color: #ffffff; }
.icon-feature-grid__item.bg-tertiary { background-color: var(--background-tertiary, #4db8c4); color: #002823; }
.icon-feature-grid__item.bg-info { background-color: #0678be; color: #ffffff; }
.icon-feature-grid__item.bg-warning { background-color: var(--color-mustard-100, #F5A623); color: #1F2937; }

.icon-feature-grid__item.bg-primary .icon-feature-grid__item-title,
.icon-feature-grid__item.bg-primary .icon-feature-grid__item-description,
.icon-feature-grid__item.bg-accent .icon-feature-grid__item-title,
.icon-feature-grid__item.bg-accent .icon-feature-grid__item-description,
.icon-feature-grid__item.bg-info .icon-feature-grid__item-title,
.icon-feature-grid__item.bg-info .icon-feature-grid__item-description {
  color: #ffffff;
}

.icon-feature-grid__item.bg-tertiary .icon-feature-grid__item-title,
.icon-feature-grid__item.bg-tertiary .icon-feature-grid__item-description,
.icon-feature-grid__item.bg-warning .icon-feature-grid__item-title,
.icon-feature-grid__item.bg-warning .icon-feature-grid__item-description {
  color: #1F2937;
}

/* Alignment */
.icon-feature-grid--align-center .icon-feature-grid__item {
  align-items: center;
  text-align: center;
}

.icon-feature-grid--align-left .icon-feature-grid__item {
  align-items: flex-start;
  text-align: left;
}

.icon-feature-grid--align-right .icon-feature-grid__item {
  align-items: flex-end;
  text-align: right;
}

/* Icon Wrapper - size set via inline styles */
.icon-feature-grid__icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Icon - size and object-fit set via inline styles */
.icon-feature-grid__icon {
  display: block;
}

/* Item Text */
.icon-feature-grid__item-title {
  font-weight: var(--font-weight-semibold-20);
  margin: 0;
}

.icon-feature-grid__item-description {
  line-height: var(--font-line-height-16);
  opacity: 0.9;
  word-break: auto-phrase !important;
}

/* Item Description CKEditor content - ensure inline styles have highest priority */
.icon-feature-grid__item-description [style] {
  all: revert !important;
}

.icon-feature-grid__item-description [style] * {
  all: revert !important;
}

/* Ensure CKEditor content children have transparent background */
.icon-feature-grid__item-description p,
.icon-feature-grid__item-description div,
.icon-feature-grid__item-description span,
.icon-feature-grid__item-description h1,
.icon-feature-grid__item-description h2,
.icon-feature-grid__item-description h3,
.icon-feature-grid__item-description h4,
.icon-feature-grid__item-description h5,
.icon-feature-grid__item-description h6,
.icon-feature-grid__item-description ul,
.icon-feature-grid__item-description ol,
.icon-feature-grid__item-description li,
.icon-feature-grid__item-description blockquote {
  background-color: transparent !important;
}

/* Preserve specific CKEditor formatting elements in item descriptions */
.icon-feature-grid__item-description strong,
.icon-feature-grid__item-description b,
.icon-feature-grid__item-description em,
.icon-feature-grid__item-description i,
.icon-feature-grid__item-description u,
.icon-feature-grid__item-description s,
.icon-feature-grid__item-description sub,
.icon-feature-grid__item-description sup {
  all: revert !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .icon-feature-grid--columns-4 .icon-feature-grid__items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .icon-feature-grid--columns-3 .icon-feature-grid__items,
  .icon-feature-grid--columns-4 .icon-feature-grid__items {
    grid-template-columns: repeat(2, 1fr);
  }

  .icon-feature-grid__items {
    gap: var(--spacing-32);
  }

  .icon-feature-grid__header {
    margin-bottom: var(--spacing-32);
  }
}

@media (max-width: 640px) {
  .icon-feature-grid--columns-2 .icon-feature-grid__items,
  .icon-feature-grid--columns-3 .icon-feature-grid__items,
  .icon-feature-grid--columns-4 .icon-feature-grid__items {
    grid-template-columns: 1fr;
  }

  .icon-feature-grid__container {
    padding: 0 var(--spacing-16);
  }

  .icon-feature-grid__items {
    gap: var(--spacing-24);
  }

  .icon-feature-grid--align-left .icon-feature-grid__item {
    align-items: center;
    text-align: center;
  }
}