/* Schede a fisarmonica: su desktop l'elenco delle voci a sinistra (tutte visibili, grandi) e il contenuto a destra;
   sul telefono diventa una fisarmonica, il contenuto si apre sotto la sua voce.
   Ogni voce e' un bottone con aria-expanded (una sola aperta alla volta); frecce per passare alla precedente/successiva.
   Markup: .tabset > (h3.tabset-head > button.tabset-tab) + div.tabset-panel, ripetuti. */

@layer components {
  .tabset {
    --n: 7;

    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: repeat(var(--n), min-content) 1fr;
    column-gap: clamp(24px, 4vw, 64px);
    align-items: start;

    &:has(> .tabset-head:nth-of-type(3):last-of-type) { --n: 3; }
    &:has(> .tabset-head:nth-of-type(4):last-of-type) { --n: 4; }
    &:has(> .tabset-head:nth-of-type(5):last-of-type) { --n: 5; }
    &:has(> .tabset-head:nth-of-type(6):last-of-type) { --n: 6; }
    &:has(> .tabset-head:nth-of-type(8):last-of-type) { --n: 8; }
  }

  .tabset-head { grid-column: 1; margin: 0; font: inherit; letter-spacing: 0; }

  .tabset-tab {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 16px;
    width: 100%;
    padding: 18px 20px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);

    & .t { font-family: var(--display); font-size: var(--step-lead); line-height: 1.15; letter-spacing: -0.01em; }
    & .s { grid-column: 1; font-size: var(--step-small); color: var(--ink-soft); }
    & .icon {
      grid-row: 1 / span 2;
      grid-column: 2;
      width: 22px;
      height: 22px;
      color: var(--accent);
      transition: translate .25s var(--ease), color var(--dur-fast) var(--ease);
    }

    &:hover { background: var(--tint); }
    &:hover .icon { translate: 4px 0; }

    &[aria-expanded="true"] { background: var(--ink); color: var(--on-ink); }
    &[aria-expanded="true"] .s { color: color-mix(in srgb, var(--on-ink) 75%, transparent); }
    &[aria-expanded="true"] .icon { color: var(--accent-soft); }
  }

  .tabset-panel {
    grid-column: 2;
    grid-row: 1 / -1;
    display: grid;
    gap: 22px;
    align-content: start;

    & .pic { aspect-ratio: 16 / 10; }
    & h3 { font-size: var(--step-head); }
    & p { max-width: 60ch; }
    & .actions { display: flex; flex-wrap: wrap; gap: 10px; }
  }
  /* Con lo script una sola voce aperta; senza script si vedono tutte */
  .js .tabset-panel:not(.is-open) { display: none; }

  .tabset-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 6px;

    & .count { font-size: var(--step-small); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
    & .arrows { display: flex; gap: 8px; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .tabset-panel.is-open > * { animation: rise .6s var(--ease) both; }
    .tabset-panel.is-open > :nth-child(2) { animation-delay: .06s; }
    .tabset-panel.is-open > :nth-child(3) { animation-delay: .12s; }
  }

  /* Telefono e tablet: fisarmonica, il contenuto sotto la sua voce */
  @media (max-width: 1080px) {
    .tabset { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 6px; }
    .tabset-head, .tabset-panel { grid-column: 1; grid-row: auto; }
    .tabset-panel { padding: 12px 4px 28px; }
    .tabset-tab .icon { rotate: 90deg; }
    .tabset-tab[aria-expanded="true"] .icon { rotate: -90deg; }
    .tabset-tab:hover .icon { translate: none; }
  }
}