/* =====================================================================
   HvaSkjer – eventvisningen som «mapper» (detail-folders.css)
   Øverst: bilde, kategori, tittel og tre hovedknapper (Interessert · Jeg skal · Del).
   Under: én rad per mappe – Når, Hvor, Pris og billetter, (Lokalt øyeblikk), Kommentarer.
   Lukket viser hver mappe et kort sammendrag; ett trykk åpner den, og bare én er åpen om gangen.
   Bygger på temavariablene (--surface, --soft, --line, --ink, --muted, --accent-*), så den passer i alle temaer.
   ===================================================================== */

/* hovedknappene: tre like brede, ikon + tekst på én linje */
#detail .action-row.action-row-main{grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 6px}
#detail .action-row.action-row-main button{flex-direction:row;gap:7px;min-height:48px;padding:0 8px;font-size:13px;border-radius:14px}
#detail .action-row.action-row-main button .ico{width:18px;height:18px}

#detail .ev-segs{display:grid;gap:8px;margin:12px 0 14px}
#detail .ev-seg{border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--soft) 55%,transparent);overflow:hidden;
  transition:background-color .25s,border-color .25s,box-shadow .25s}
#detail .ev-seg > summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#detail .ev-seg > summary::-webkit-details-marker{display:none}
#detail .ev-seg > summary:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
#detail .ev-seg > summary:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-2px;border-radius:16px}
#detail .ev-seg-ico{flex:0 0 36px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
#detail .ev-seg-ico .ico{width:18px;height:18px}
#detail .ev-seg-txt{flex:1;min-width:0;display:grid;gap:2px}
#detail .ev-seg-txt > small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#detail .ev-seg-prev{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* chevron: peker ned når lukket, opp når åpen */
#detail .ev-seg-chev{flex:0 0 auto;width:9px;height:9px;margin:0 4px 4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s ease,margin .25s ease}
#detail .ev-seg[open] .ev-seg-chev{transform:rotate(-135deg);margin:4px 4px 0}

#detail .ev-seg[open]{background:var(--surface);border-color:color-mix(in srgb,var(--accent-ink) 30%,var(--line));box-shadow:0 10px 26px -18px rgba(0,0,0,.45)}
#detail .ev-seg[open] .ev-seg-prev{color:var(--muted);font-weight:500}
#detail .ev-seg-body{padding:2px 14px 14px;animation:evSegIn .22s ease-out}
@keyframes evSegIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* innholdet i mappene */
#detail .ev-seg-line{margin:2px 0 8px;font-size:15px;font-weight:600;color:var(--ink)}
#detail .ev-seg-muted{color:var(--muted);font-weight:500}
#detail .ev-seg-source{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
#detail .ev-seg-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
#detail .ev-seg-actions button{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 15px;border-radius:999px;background:var(--soft);color:var(--ink);font-size:13px;font-weight:700}
#detail .ev-seg-actions button .ico{width:17px;height:17px}
#detail .ev-seg-actions button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-ink)}
#detail .ev-seg .detail-meta{margin:2px 0 4px}
#detail .ev-seg .detail-mynote{margin:4px 0 8px}
#detail .ev-seg .showtimes{margin:12px 0 0}
#detail .ev-seg .nearby-partners-cta{margin:10px 0 0;width:100%}
#detail .ev-seg .event-talk{margin:0;padding:0;background:none;border:0;box-shadow:none}
#detail .ev-seg .event-talk .talk-heading{display:none}
#detail .ev-seg video{display:block;width:100%;max-height:300px;border-radius:12px;background:#0b0d10}

@media (prefers-reduced-motion:reduce){#detail .ev-seg-body{animation:none}#detail .ev-seg-chev{transition:none}}
html.reduce-motion #detail .ev-seg-body{animation:none}
html.reduce-motion #detail .ev-seg-chev{transition:none}