/* ============================================
   CARD PADDING STANDARDIZATION
   ============================================

   This file ensures consistent padding across all card types.
   Applied after style.css to override inconsistencies.

   Standard padding scale:
   - xs: 8px   (0.5rem)
   - sm: 16px  (1rem)
   - md: 24px  (1.5rem)
   - lg: 32px  (2rem)
   - xl: 48px  (3rem)
   ============================================ */

/* Section Cards - Main container cards */
.section-card {
  padding: var(--spacing-xl) var(--spacing-lg) !important;
}

@media (max-width: 768px) {
  .section-card {
    padding: var(--spacing-lg) var(--spacing-md) !important;
  }
}

/* Feature Cards - Individual feature highlights */
.feature-card {
  padding: var(--spacing-lg) !important;
}

@media (max-width: 768px) {
  .feature-card {
    padding: var(--spacing-md) !important;
  }
}

/* Icon Cards - Small cards with icons */
.icon-card {
  padding: var(--spacing-md) !important;
}

@media (max-width: 768px) {
  .icon-card {
    padding: var(--spacing-sm) !important;
  }
}

/* Message Cards - Info/warning/success cards */
.message-card {
  padding: var(--spacing-lg) !important;
}

@media (max-width: 768px) {
  .message-card {
    padding: var(--spacing-md) !important;
  }
}

/* Metric Cards - Stats and numbers */
.metric-card {
  padding: var(--spacing-lg) !important;
}

@media (max-width: 768px) {
  .metric-card {
    padding: var(--spacing-md) !important;
  }
}

/* Stat Cards - Similar to metric cards */
.stat-card {
  padding: var(--spacing-lg) !important;
}

@media (max-width: 768px) {
  .stat-card {
    padding: var(--spacing-md) !important;
  }
}

/* Pricing Cards */
.pricing-card {
  padding: var(--spacing-lg) !important;
}

@media (max-width: 768px) {
  .pricing-card {
    padding: var(--spacing-md) !important;
  }
}

/* Testimonial Cards */
.testimonial-card {
  padding: var(--spacing-lg) !important;
}

@media (max-width: 768px) {
  .testimonial-card {
    padding: var(--spacing-md) !important;
  }
}

/* Contact Cards */
.contact-card {
  padding: var(--spacing-lg) !important;
}

@media (max-width: 768px) {
  .contact-card {
    padding: var(--spacing-md) !important;
  }
}

/* Hero Card */
.hero-card {
  padding: var(--spacing-xl) !important;
}

@media (max-width: 768px) {
  .hero-card {
    padding: var(--spacing-lg) !important;
  }
}

/* CTA Section */
.cta-section {
  padding: var(--spacing-xl) var(--spacing-lg) !important;
}

@media (max-width: 768px) {
  .cta-section {
    padding: var(--spacing-lg) var(--spacing-md) !important;
  }
}

/* Timeline Items */
.timeline-item {
  padding: var(--spacing-md) !important;
}

/* Accordion Items */
.accordion-item {
  margin-bottom: var(--spacing-sm);
}

.accordion-header {
  padding: var(--spacing-md) !important;
}

.accordion-content {
  padding: var(--spacing-md) !important;
}

@media (max-width: 768px) {
  .accordion-header {
    padding: var(--spacing-sm) var(--spacing-md) !important;
  }

  .accordion-content {
    padding: var(--spacing-sm) var(--spacing-md) !important;
  }
}

/* Grid Containers - Ensure consistent spacing */
.feature-grid,
.icon-grid,
.metric-grid,
.pricing-grid {
  padding: 0 !important;
}

/* Button Groups - No extra padding */
.button-group {
  padding: 0 !important;
}

/* Integration Cards (Roadmap) */
.integration-card {
  padding: var(--spacing-md) !important;
}

@media (max-width: 768px) {
  .integration-card {
    padding: var(--spacing-sm) !important;
  }
}

/* Screenshot Gallery Items */
.screenshot-item {
  padding: 0 !important; /* Images need no padding */
}

.screenshot-info {
  padding: var(--spacing-sm) !important;
}

/* Ensure consistent inner content spacing */
.section-card > h2:first-child,
.section-card > h3:first-child {
  margin-top: 0;
}

.section-card > *:last-child {
  margin-bottom: 0;
}

/* Fix any nested card padding issues */
.section-card .feature-card,
.section-card .icon-card,
.section-card .message-card {
  /* Already have their own padding, no adjustment needed */
}

/* ============================================
   CENTERED LAYOUTS FOR ODD ITEMS
   ============================================ */

/* Center single standalone images/media */
.section-card > img,
.section-card > p > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* Grid layout for icon and feature cards */
@media (min-width: 1024px) {
  .icon-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* Centered content wrapper utility */
.centered-content {
  text-align: center;
  margin: var(--spacing-lg) auto;
  max-width: 800px;
}

.centered-content img,
.centered-content video {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Center button groups when they're the only element */
.section-card > .button-group:only-of-type,
.section-card > .button-group:last-child {
  justify-content: center;
}

/* ============================================
   EDITION BADGE FIXES
   ============================================ */

/* Ensure badges don't get cut off */
.feature-card h3,
.section-card h3,
.accordion-header {
  position: relative;
  overflow: visible !important;
}

/* Fix badge positioning to prevent cutoff */
.edition-badge {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 8px;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

/* Ensure parent container accommodates badge */
h3:has(.edition-badge) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
}

/* Accordion headers with badges need proper spacing */
.accordion-header:has(.edition-badge) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

/* Mobile: ensure badges don't overflow */
@media (max-width: 768px) {
  .edition-badge {
    font-size: 10px;
    padding: 3px 12px;
    letter-spacing: 0.5px;
  }

  h3:has(.edition-badge) {
    gap: 6px;
  }
}