/* ============================================================
   accordion.component.css  --  Accordion component styles
   Uses native <details> and <summary> elements.
   ============================================================ */

.vui-accordion {
  --_vui-border: var(--vui-border, #d4d4d4);
  --_vui-border-subtle: var(--vui-border-subtle, #e5e5e5);
  --_vui-radius-md: var(--vui-radius-md, 6px);
  --_vui-space-md: var(--vui-space-md, 16px);
  --_vui-space-lg: var(--vui-space-lg, 24px);
  --_vui-font-sans: var(--vui-font-sans, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
  --_vui-font-size-base: var(--vui-font-size-base, 1rem);
  --_vui-font-size-sm: var(--vui-font-size-sm, 0.875rem);
  --_vui-line-height: var(--vui-line-height, 1.6);
  --_vui-fg: var(--vui-fg, #1a1a1a);
  --_vui-fg-muted: var(--vui-fg-muted, #6b6b6b);
  --_vui-bg-surface: var(--vui-bg-surface, #f2f2f2);
  --_vui-duration: var(--vui-duration, 150ms);
  --_vui-easing: var(--vui-easing, cubic-bezier(0.4, 0, 0.2, 1));
  border: 1px solid var(--_vui-border);
  border-radius: var(--_vui-radius-md);
  overflow: hidden;
}

.vui-accordion-item {
  display: grid;
  grid-template-rows: auto 0fr;
  border-bottom: 1px solid var(--_vui-border-subtle);
  transition: grid-template-rows 220ms var(--_vui-easing);
}

.vui-accordion-item:last-child {
  border-bottom: none;
}

.vui-accordion-item[open] {
  grid-template-rows: auto 1fr;
}

.vui-accordion-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--_vui-space-md) var(--_vui-space-lg);
  font-family: var(--_vui-font-sans);
  font-size: var(--_vui-font-size-base);
  font-weight: 500;
  color: var(--_vui-fg);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--_vui-duration) var(--_vui-easing);
}

.vui-accordion-item > summary:hover {
  background: var(--_vui-bg-surface);
}

.vui-accordion-item > summary::-webkit-details-marker {
  display: none;
}

.vui-accordion-item > summary::marker {
  content: "";
}

.vui-accordion-item > summary::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--_vui-fg-muted);
  border-bottom: 2px solid var(--_vui-fg-muted);
  transform: rotate(-45deg);
  transition: transform var(--_vui-duration) var(--_vui-easing);
  flex-shrink: 0;
  margin-left: var(--_vui-space-md);
}

.vui-accordion-item[open] > summary::after {
  transform: rotate(45deg);
}

.vui-accordion-body {
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--_vui-space-lg);
  color: var(--_vui-fg-muted);
  font-size: var(--_vui-font-size-sm);
  line-height: var(--_vui-line-height);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 220ms var(--_vui-easing),
    transform 220ms var(--_vui-easing),
    padding-bottom 220ms var(--_vui-easing);
}

.vui-accordion-item[open] .vui-accordion-body {
  padding-bottom: var(--_vui-space-lg);
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .vui-accordion-item > summary {
    align-items: flex-start;
    padding: var(--_vui-space-md);
    font-size: var(--_vui-font-size-sm);
  }

  .vui-accordion-body {
    padding: 0 var(--_vui-space-md);
  }

  .vui-accordion-item[open] .vui-accordion-body {
    padding-bottom: var(--_vui-space-md);
  }
}