/* ── Amili FAQ v2 ─────────────────────────────────────────────
   Amili FAQ sitt uttrykk — samme bakgrunnsvarianter, samme
   skillelinjer, samme sirkel med pluss/minus — men i to kolonner.
   Kolonneforholdet 500/616 er hentet fra Amili Split Stack, så de
   to modulene rimer når de står på samme side.

   Trekkspillet er <details>/<summary>. Ingen .panel med max-height,
   ingen JS-toggle, ingen 600px-klipp. module.js er tom. */

.afq2-bg--white      { background: var(--color-white, #FFFFFF); }
.afq2-bg--cream      { background: var(--color-cream, #F7F7F5); }
.afq2-bg--light-blue { background: var(--color-ice, #E1FCFF); }
.afq2-bg--cyan       { background: var(--color-cyan, #00E2E2); }
.afq2-bg--near-black { background: var(--color-ink, #0A0D0D); }

.afq2-block {
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: minmax(0, 500fr) minmax(0, 616fr);
  gap: 72px;
  align-items: start;
  overflow: clip; /* IKKE hidden — det bryter sticky */
}

.afq2-block--text-left  .afq2-col--text  { order: 1; }
.afq2-block--text-left  .afq2-col--items { order: 2; }
.afq2-block--text-right .afq2-col--text  { order: 2; }
.afq2-block--text-right .afq2-col--items { order: 1; }
.afq2-block--text-right { grid-template-columns: minmax(0, 616fr) minmax(0, 500fr); }

/* ── Tekstkolonnen ── */
.afq2-col--text { display: flex; flex-direction: column; gap: var(--stack-gap, 2rem); align-items: flex-start; }
.afq2-col--sticky { position: sticky; top: 32px; align-self: start; }

.afq2-kicker { margin: 0; }
.afq2-bg--near-black .afq2-kicker { color: var(--color-cyan, #00E2E2); }
.afq2-bg--white .afq2-kicker,
.afq2-bg--cream .afq2-kicker      { color: var(--color-cyan, #00E2E2); }
.afq2-bg--cyan .afq2-kicker,
.afq2-bg--light-blue .afq2-kicker { color: rgba(10,13,13,0.55); }

.afq2-heading { margin: 0; line-height: 1.15; letter-spacing: -0.015em; max-width: 20ch; text-wrap: pretty; }
.afq2-bg--near-black .afq2-heading { color: var(--color-cream, #F7F7F5); }
.afq2-bg--white .afq2-heading,
.afq2-bg--cream .afq2-heading,
.afq2-bg--cyan .afq2-heading,
.afq2-bg--light-blue .afq2-heading { color: var(--color-ink, #0A0D0D); }

.afq2-intro { line-height: 1.6; max-width: 42ch; }
.afq2-intro > :first-child { margin-top: 0; }
.afq2-intro > :last-child { margin-bottom: 0; }
.afq2-bg--near-black .afq2-intro { color: rgba(247,247,245,0.72); }
.afq2-bg--white .afq2-intro,
.afq2-bg--cream .afq2-intro,
.afq2-bg--cyan .afq2-intro,
.afq2-bg--light-blue .afq2-intro { color: #575757; }
.afq2-intro a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.afq2-cta { margin-top: var(--stack-actions-offset, 0.8rem); }
.afq2-bg--near-black .afq2-cta.-primary { background: var(--color-cyan, #00E2E2); border-color: var(--color-cyan, #00E2E2); color: var(--color-ink, #0A0D0D); }
.afq2-bg--near-black .afq2-cta.-secondary { border-color: rgba(247,247,245,0.4); color: var(--color-cream, #F7F7F5); background: transparent; }

/* ── Spørsmålskolonnen ── */
.afq2-col--items { min-width: 0; }

.afq2-item { border-bottom: 1px solid rgba(10,13,13,0.1); }
.afq2-item:first-child { border-top: 1px solid rgba(10,13,13,0.1); }
.afq2-bg--near-black .afq2-item,
.afq2-bg--near-black .afq2-item:first-child { border-color: rgba(247,247,245,0.1); }

/* summary er display:list-item med egen trekant — begge må nulles,
   i to varianter for Safari. */
.afq2-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  text-align: left;
}
.afq2-q::-webkit-details-marker { display: none; }
.afq2-q::marker { content: ""; }
.afq2-q:focus-visible { outline: var(--focus-outline, 2px solid var(--color-cyan, #00E2E2)); outline-offset: 4px; border-radius: 4px; }

.afq2-question { margin: 0; line-height: 1.4; flex: 1; }
.afq2-bg--near-black .afq2-question { color: var(--color-cream, #F7F7F5); }
.afq2-bg--white .afq2-question,
.afq2-bg--cream .afq2-question,
.afq2-bg--cyan .afq2-question,
.afq2-bg--light-blue .afq2-question { color: var(--color-ink, #0A0D0D); }

.afq2-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.afq2-bg--near-black .afq2-icon { border: 1.5px solid rgba(247,247,245,0.2); color: var(--color-cream, #F7F7F5); }
.afq2-bg--white .afq2-icon,
.afq2-bg--cream .afq2-icon,
.afq2-bg--cyan .afq2-icon,
.afq2-bg--light-blue .afq2-icon { border: 1.5px solid rgba(10,13,13,0.15); color: var(--color-ink, #0A0D0D); }
.afq2-item[open] .afq2-icon { background: var(--color-ink, #0A0D0D); border-color: var(--color-ink, #0A0D0D); color: var(--color-cream, #F7F7F5); }
.afq2-bg--near-black .afq2-item[open] .afq2-icon { background: var(--color-cyan, #00E2E2); border-color: var(--color-cyan, #00E2E2); color: var(--color-ink, #0A0D0D); }

.afq2-plus  { display: block; }
.afq2-minus { display: none; }
.afq2-item[open] .afq2-plus  { display: none; }
.afq2-item[open] .afq2-minus { display: block; }

.afq2-a__inner { line-height: 1.7; padding-bottom: 24px; color: #7A786E; }
.afq2-a__inner > :first-child { margin-top: 0; }
.afq2-a__inner > :last-child { margin-bottom: 0; }
.afq2-a__inner p { margin: 0 0 12px; }
.afq2-a__inner ul, .afq2-a__inner ol { margin: 0 0 12px; padding-left: 20px; }
.afq2-a__inner li { margin-bottom: 6px; }
.afq2-a__inner a { color: var(--color-ink, #0A0D0D); text-decoration: underline; text-underline-offset: 2px; }
.afq2-bg--near-black .afq2-a__inner { color: rgba(247,247,245,0.6); }
.afq2-bg--near-black .afq2-a__inner a { color: var(--color-cyan, #00E2E2); }

/* Progressive enhancement: myk åpning der nettleseren støtter
   ::details-content. Ellers åpner svaret momentant — ingen feil. */
@supports selector(::details-content) {
  .afq2-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
  }
  .afq2-item[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .afq2-icon { transition: none; }
  @supports selector(::details-content) {
    .afq2-item::details-content { transition: none; }
  }
}

@media (max-width: 980px) {
  .afq2-block,
  .afq2-block--text-right { grid-template-columns: 1fr; gap: 40px; }
  .afq2-block--text-right .afq2-col--text  { order: 1; }
  .afq2-block--text-right .afq2-col--items { order: 2; }
  .afq2-col--sticky { position: static; }
  .afq2-heading, .afq2-intro { max-width: none; }
}

@media (max-width: 600px) {
  .afq2-q { padding: 20px 0; }
}