/* 9. Vanliga frågor (biljett 06). <details name="fragor"> ger bara en öppen åt gången. Fungerar utan JS. */

.faq__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 40px;
  align-items: start;
}
.faq__head { grid-column: 1 / span 4; }
.faq { grid-column: 6 / -1; border-top: 1px solid var(--ink); }

.faq__item { border-bottom: 1px solid var(--line-2); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  transition: color var(--dur-1) var(--ease-out-soft);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--green); }
.faq__item summary:focus-visible { outline-offset: 4px; border-radius: 6px; }

.faq__item summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat,
    rgb(17 18 20 / 0.06);
  transition: background-color var(--dur-1) var(--ease-out-soft);
}
.faq__item summary:hover::after { background-color: rgb(31 77 69 / 0.1); }
.faq__item[open] summary::after { transform: rotate(45deg); }

.faq__answer { padding: 0 48px 26px 0; }
.faq__answer p { color: var(--ink-2); max-width: 38em; text-wrap: pretty; }

@keyframes faq-answer-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Rörelse bara när den är tillåten. Utan den öppnas och stängs svaren direkt. */
@media (prefers-reduced-motion: no-preference) {
  .faq__item summary::after {
    transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1) var(--ease-out-soft);
  }
  .faq__item summary:active::after {
    transform: scale(0.94);
    transition-duration: var(--dur-press), var(--dur-1);
  }
  .faq__item[open] summary:active::after { transform: rotate(45deg) scale(0.94); }

  .faq__item[open] .faq__answer-inner {
    animation: faq-answer-in 300ms var(--ease-out) 60ms both;
  }

  @supports (interpolate-size: allow-keywords) {
    .faq { interpolate-size: allow-keywords; }
    .faq__item::details-content {
      height: 0;
      overflow: clip;
      transition: height 300ms var(--ease-in-out), content-visibility 300ms allow-discrete;
    }
    .faq__item[open]::details-content { height: auto; }
  }
}

@media (max-width: 960px) {
  .faq__head, .faq { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .faq__answer { padding-right: 0; }
}