@layer components {

  .faq-classic {
    container-type: inline-size;
    container-name: faq-classic;
  }

  .faq-classic__list {
    display: flex;
    flex-direction: column;
    max-width: 84rem;
    margin-inline: auto;
  }

  .faq-classic__item {
    border-bottom: 1px solid var(--border-primary);
  }

  .faq-classic__item:first-child {
    border-top: 1px solid var(--border-primary);
  }

  .faq-classic__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-l);
    padding: var(--space-xl) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-primary);
    color: inherit;
  }

  .faq-classic__trigger:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: var(--radius-s);
  }

  .faq-classic__trigger-left {
    display: flex;
    align-items: center;
    gap: var(--space-l);
    min-width: 0;
  }

  .faq-classic__number {
    font-size: var(--text-s);
    font-weight: var(--weight-semibold);
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    width: 2.8rem;
  }

  .faq-classic__question {
    font-size: var(--text-ml);
    font-weight: var(--weight-semibold);
    color: var(--text-title);
    line-height: 1.4;
  }

  .faq-classic__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-primary);
    transition: background 0.3s ease, border-color 0.3s ease;
  }

  .faq-classic__icon .icon {
    width: 1.8rem;
    height: 1.8rem;
    color: var(--text-body);
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .faq-classic__item.is-open .faq-classic__icon {
    background: var(--primary);
    border-color: var(--primary);
  }

  .faq-classic__item.is-open .faq-classic__icon .icon {
    color: var(--text-body);
    transform: rotate(45deg);
  }

  /* ---- Panel ---- */
  .faq-classic__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
  }

  .faq-classic__item.is-open .faq-classic__panel {
    grid-template-rows: 1fr;
  }

  .faq-classic__answer {
    overflow: hidden;
  }

  .faq-classic__answer .prose {
    padding: 0 0 var(--space-xl) calc(2.8rem + var(--space-l));
    max-width: 72rem;
  }

  .faq-classic__answer .prose > :first-child { margin-top: 0; }
  .faq-classic__answer .prose > :last-child  { margin-bottom: 0; }

  @media (prefers-reduced-motion: reduce) {
    .faq-classic__panel { transition: none; }
    .faq-classic__icon .icon { transition: none; }
  }

  @container faq-classic (max-width: 768px) {
    .faq-classic__trigger  { padding: var(--space-l) 0; gap: var(--space-m); }
    .faq-classic__question { font-size: var(--text-m); }
    .faq-classic__answer .prose {
      padding: 0 0 var(--space-l) calc(2.8rem + var(--space-l));
    }
  }

  @container faq-classic (max-width: 480px) {
    .faq-classic__trigger { padding: var(--space-m) 0; }
    .faq-classic__number  { display: none; }
    .faq-classic__answer .prose {
      padding: 0 0 var(--space-m) 0;
    }
    .faq-classic__icon       { width: 3.2rem; height: 3.2rem; }
    .faq-classic__icon .icon { width: 1.6rem; height: 1.6rem; }
  }
}