/* ──────────────────────────────────────────────
   Card Accordion (Standard)
   A card-style accordion that supports multi-column layouts.
   Each card expands independently without affecting siblings.
   Uses flexbox with align-items: flex-start to allow
   independent card heights.
   ────────────────────────────────────────────── */

/* Container - use flexbox instead of grid for independent heights */
.accordion {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Override slot-layout grid behavior - use flexbox instead */
.slot-layout.accordion {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start; /* Key: allows cards to have different heights */
}

/* Responsive column widths using CSS custom properties */
.slot-layout.accordion .slot-item {
  /* Default: full width on mobile */
  flex: 0 0 100%;
  max-width: 100%;
}

/* 2 columns on medium screens */
@media (min-width: 768px) {
  .slot-layout.accordion .slot-item {
    flex: 0 0 calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
  }
}

/* 3 columns on large screens */
@media (min-width: 1024px) {
  .slot-layout.accordion .slot-item {
    flex: 0 0 calc(33.333% - 0.667rem);
    max-width: calc(33.333% - 0.667rem);
  }
}

/* Card item styling */
.accordion .accordion-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.accordion .accordion-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Card title */
.accordion .accordion-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 1.25rem 1rem;
  background: #fff;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  border: none;
  width: 100%;
  text-align: left;
  transition: background-color 0.2s ease;
}

.accordion .accordion-title:hover {
  background: #f9fafb;
}

.accordion .accordion-title:focus {
  outline: 2px solid #6E7BFF;
  outline-offset: -2px;
}

/* Plus/minus icon for card accordion */
.accordion .accordion-title::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: #6b7280;
  transition: transform 0.3s ease;
  margin-left: 1rem;
  flex-shrink: 0;
}

.accordion .accordion-title[aria-expanded="true"]::after {
  content: '−';
}

/* Hide any manual icons if using the automatic +/- */
.accordion .accordion-title .accordion-icon {
  display: none;
}

/* Card content */
.accordion .accordion-content {
  overflow: hidden;
  background: #fff;
  max-height: 0;
  padding: 0 1rem;
  transition: max-height 0.4s ease, padding 0.4s ease;
  border-top: 0 solid #e5e7eb;
}

.accordion .accordion-content.open {
  max-height: 1000px;
  padding: 0 1rem 1.25rem 1rem;
  border-top-width: 1px;
}

.accordion .accordion-content p {
  margin: 0;
  padding-top: 1rem;
  color: #4b5563;
  line-height: 1.6;
}

/* Dark mode support */
[data-theme="dark"] .accordion .accordion-item {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .accordion .accordion-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .accordion .accordion-title {
  background: #1f2937;
  color: #f9fafb;
}

[data-theme="dark"] .accordion .accordion-title:hover {
  background: #374151;
}

[data-theme="dark"] .accordion .accordion-title::after {
  color: #9ca3af;
}

[data-theme="dark"] .accordion .accordion-content {
  background: #1f2937;
  border-top-color: #374151;
}

[data-theme="dark"] .accordion .accordion-content p {
  color: #d1d5db;
}

/* Text alignment helpers for card accordion */
.accordion .accordion-title.rsl-center {
  justify-content: center;
  text-align: center;
}

.accordion .accordion-title.rsl-center::after {
  position: absolute;
  right: 1rem;
}

.accordion .accordion-title.rsl-left {
  justify-content: space-between;
  text-align: left;
}

/* Single column variant - add data-cols="1" or use this class */
.accordion.accordion-single-column .slot-item,
.slot-layout.accordion[data-cols-xs="1"][data-cols-md="1"][data-cols-lg="1"] .slot-item {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Classic accordion text alignment (preserved from original) */
.classic-accordion .accordion-title .text-content {
  width: 100%;
}
.classic-accordion .accordion-title .text-content.rsl-left {
  text-align: left;
}
.classic-accordion .accordion-title .text-content.rsl-center {
  text-align: center;
}
.classic-accordion .accordion-title .text-content.rsl-right {
  text-align: right;
}

@media only screen and (max-width: 768px) {
  .classic-accordion .accordion-title .text-content.rsl-mobile-left {
    text-align: left;
  }
  .classic-accordion .accordion-title .text-content.rsl-mobile-center {
    text-align: center;
  }
  .classic-accordion .accordion-title .text-content.rsl-mobile-right {
    text-align: right;
  }
}
/* ──────────────────────────────────────────────
   Classic accordion variant
   ────────────────────────────────────────────── */
   .classic-accordion {
    grid-template-columns: 1fr; /* if the container is also a .slot-layout */
  }
  
  /* Title row */
  .classic-accordion .accordion-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 1rem;
    background: #f5f5f5;
    font-size: 1.25rem;
    font-weight: bold;
  }
  .classic-accordion .accordion-title i { margin-right: 0.5rem; }
  
  /* Zero out gaps if the container also uses slot layout */
  .slot-layout.classic-accordion { gap: 0; }
  
  /* Item chrome */
  .slot-layout.classic-accordion .accordion-item {
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
    background: #fff;
  }
  
  /* Content panel + animation */
  .slot-layout.classic-accordion .accordion-content {
    overflow: hidden;
    background: #fff;
    /* Use max-height to animate smoothly; start closed */
    max-height: 0;
    transition: max-height .4s ease;
    padding: 0 1rem; /* visible left/right padding even when closed */
  }
  
  /* Open state */
  .slot-layout.classic-accordion .accordion-content.open {
    color: #000;
    /* Big enough for most panels; adjust as needed */
    max-height: 500px;
  }

/* ──────────────────────────────────────────────
   FilterBus Integration - Visibility Mode
   ────────────────────────────────────────────── */
.accordion .accordion-item.filterbus-hidden,
.classic-accordion .accordion-item.filterbus-hidden {
  display: none !important;
}