/* ========================================
   INFO SECTION / SPLIT COLUMN CARDS
   ======================================== */

/* Base styles for info section */
[data-component="info_section"] {
  position: relative;
}

/* Two-column card container */
[data-component="info_section"] .two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  min-height: 700px;
}

/* Individual card styling */
[data-component="info_section"] .card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 3rem !important;
  border-radius: 1rem;
}

[data-name="info_section_left"],
[data-name="info_section_right"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Typography scaling */
[data-component="info_section"] .fs-massive {
  font-size: var(--fs-massive);
  line-height: 1.1;
}

[data-component="info_section"] .fs-sm {
  font-size: var(--fs-sm);
}

/* CTA container */
[data-name="info_section_cta_container"] {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ========================================
   TABLET RESPONSIVE (768px - 991px)
   ======================================== */

@media (max-width: 991.98px) {
  /* Stack cards vertically */
  [data-component="info_section"] .two-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
    min-height: auto;
  }

  /* Adjust card padding */
  [data-component="info_section"] .card {
    padding: 2.5rem;
  }

  /* Typography adjustments */
  [data-component="info_section"] .fs-massive {
    font-size: 3rem;
  }
}

/* ========================================
   MOBILE RESPONSIVE (< 768px)
   ======================================== */

@media (max-width: 767.98px) {
  /* Single column layout */
  [data-component="info_section"] .two-columns {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    min-height: auto;
  }

  /* Remove fixed min-height */
  [data-component="info_section"] .card-container {
    min-height: auto !important;
  }

  /* Reduce card padding on mobile */
  [data-component="info_section"] .card {
    padding: 1.5rem !important;
  }

  [data-component="info_section"] .card.px-5 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  [data-component="info_section"] .card.py-5 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Mobile typography */
  [data-component="info_section"] .fs-massive {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }

  [data-component="info_section"] h3.fs-massive {
    font-size: 2rem !important;
  }

  [data-component="info_section"] .fs-sm {
    font-size: 1rem !important;
  }

  [data-component="info_section"] p.fs-sm {
    font-size: 1rem !important;
  }

  /* Mobile CTA buttons */
  [data-name="info_section_cta_container"] {
    flex-direction: column;
    gap: 0.75rem;
  }

  [data-name="info_section_cta_container"] .btn {
    width: 100%;
    max-width: 300px;
  }

  /* Adjust spacing */
  [data-component="info_section"] .mb-3 {
    margin-bottom: 1rem !important;
  }

  [data-component="info_section"] .mb-4 {
    margin-bottom: 1.25rem !important;
  }

  [data-component="info_section"] .mt-4 {
    margin-top: 1.25rem !important;
  }
}

/* ========================================
   LEGACY SPLIT COLUMN CARDS SUPPORT
   ======================================== */

.split-column-cards-grid {
  --split-media-width: 50%;
  --split-content-width: 50%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.split-column-cards-grid > .split-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

@media (min-width: 992px) {
  .split-column-cards-grid {
    grid-template-columns:
      minmax(0, var(--split-media-width, 50%))
      minmax(0, var(--split-content-width, 50%));
    align-items: stretch;
  }
}

.split-card__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1 1 auto;
}

.split-card--media .split-card__body {
  justify-content: flex-end;
}

.split-card--content .split-card__body {
  justify-content: flex-start;
}

.split-card__copy {
  flex: 1 1 auto;
}

.split-card .card-body {
  flex: 1 1 auto;
}