/* Design tokens (from Figma) */
:root {
  --green: #4d9d34;
  --magenta: #da1884;
  --black: #000;
  --white: #fff;
  --bg: #f5f5f5;
  /* Fyra färger för menyn */
  --palette-green: #4D9D34;
  --palette-magenta: #DA1884;
  --palette-orange: #EA7600;
  --palette-blue: #489FDF;
  --font-body: "Raleway", system-ui, sans-serif;
  /* Figma uses DIN Condensed Bold; Barlow Condensed is only the fallback where DIN is not installed */
  --font-display: "DIN Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: #111; overflow: hidden; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }

/* The kiosk is designed at 1024x1366 (iPad Pro 12.9") and scaled to fit the window */
#stage { position: fixed; inset: 0; }
#kiosk {
  width: 1024px; height: 1366px; position: absolute; left: 50%; top: 50%; overflow: hidden;
  background: var(--bg);
  transform: translate(-50%, -50%) scale(var(--scale, 1));
}

.screen { position: absolute; inset: 0; overflow: hidden; }

/* ---------- Idle ---------- */
.idle { background: var(--white); cursor: pointer; }
.hero { position: absolute; left: -703px; top: 0; width: 2429px; height: 1366px; object-fit: cover; }
.gradient-green { position: absolute; inset: 0 auto auto 0; width: 1024px; height: 1366px; background: linear-gradient(to bottom, rgba(77,157,52,.9), rgba(77,157,52,0)); }
.idle .logo { position: absolute; left: 32px; top: 32px; width: 141px; height: 62px; }
.idle-copy { position: absolute; left: 32px; top: 428px; width: 960px; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--white); }
.tapbox { position: relative; width: 290px; height: 239px; }
.tapbox img { position: absolute; left: 72.5px; top: 0; width: 145px; height: 188px; }
.idle-copy h1 { font-size: 64px; line-height: 1.11; font-weight: 700; }
.idle-copy p { font-size: 32px; line-height: 1.11; font-weight: 400; }
.idle-copy .tap { width: 145px; height: 188px; margin-top: 0; }

/* ---------- List / gallery ---------- */
.index { background: var(--white); }
.topbar { position: absolute; z-index: 5; inset: 0 0 auto 0; height: 126px; background: rgba(255,255,255,.8); backdrop-filter: blur(16px); }
.topbar .logo { position: absolute; left: 32px; top: 32px; width: 141px; height: 62px; }
.lang { position: absolute; left: 578px; top: 36px; width: 188px; padding: 16px 24px; border-radius: 31.5px; display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: 28px; line-height: 1.11; }
.lang .flag { width: 31px; height: 31px; border-radius: 20px; object-fit: cover; }
.lang .chev { width: 17px; height: 9px; }
.viewtype { position: absolute; right: 32px; top: 31px; display: flex; align-items: center; gap: 16px; }
.viewtype button { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; }
/* Active list button = magenta circle behind the white glyph; the grid icon files already carry their own look */
.viewtype img { display: block; }
.viewtype button[data-view="grid"] img { width: 63.33px; height: 63.33px; }
.viewtype button[data-view="list"] { padding: 16px; width: auto; height: auto; border-radius: 40px; }
.viewtype button[data-view="list"] img { width: 32px; height: 30px; }
.viewtype button[data-view="list"].active { background: var(--magenta); }

.categories { position: absolute; z-index: 4; top: 140px; left: 32px; width: 960px; display: flex; flex-wrap: wrap; gap: 16px; align-content: flex-start; }
.cat { padding: 16px 24px; border-radius: 40px; border: 2px solid var(--magenta); color: var(--magenta); font-weight: 700; font-size: 28px; line-height: 1.11; white-space: nowrap; }
.cat.active { background: var(--magenta); color: var(--white); }

.scroller { position: absolute; top: 314px; bottom: 0; left: 0; right: 0; overflow-y: auto; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller.gallery { top: 338px; }

.row { display: flex; align-items: center; width: 100%; height: 172px; background: var(--white); text-align: left; position: relative; }
.scroller.list > .row:nth-child(even) { background: #f2f2f2; }
.row .pic { position: absolute; left: 32px; top: 32px; width: 108px; height: 108px; border-radius: 16px; overflow: hidden; background: var(--green); }
.row .title { padding: 32px 32px 10px 172px; font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1.25; text-transform: uppercase; }
.row .pic, .tile .pic { background-size: cover; background-position: center; }

.grid { display: grid; grid-template-columns: repeat(3, 298px); gap: 33px 33px; padding: 0 32px 32px; justify-content: center; }
.tile { position: relative; width: 298px; height: 298px; border-radius: 16px; overflow: hidden; background: var(--green); text-align: left; }
.tile .pic { position: absolute; inset: 0; }
.tile .shade { position: absolute; inset: 0; background: linear-gradient(22.8deg, rgba(0,0,0,.5) 10.5%, rgba(0,0,0,0) 57.5%); }
.tile .title { position: absolute; left: 32px; bottom: 16px; width: 254px; color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.25; text-transform: uppercase; }

/* ---------- Detail ---------- */
.detail { background: #0b2a10; color: var(--white); }
.detail .bg { position: absolute; left: -311px; top: 0; width: 1646px; height: 1366px; object-fit: cover; }
.detail .bg-green { position: absolute; inset: 0; background: var(--green); }
.detail .gradient-dark { position: absolute; inset: 0 auto auto 0; width: 1024px; height: 1366px; background: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.2)); }
.back { position: absolute; left: 64px; top: 64px; display: flex; align-items: center; gap: 16px; padding: 16px 32px; border-radius: 40px; background: var(--magenta); color: var(--white); font-weight: 700; font-size: 32px; line-height: 1.11; }
.back img { width: 24px; height: 24px; }
.detail h1 { position: absolute; left: 64px; top: 188px; width: 896px; font-family: var(--font-display); font-weight: 700; font-size: 96px; line-height: 1.2; text-transform: uppercase; }
.detail .copy { position: absolute; left: 64px; top: 316px; width: 768px; font-size: 32px; line-height: 1.5; font-weight: 400; }
.detail .link { position: absolute; left: 64px; display: inline-flex; align-items: center; gap: 16px; padding: 16px 32px; border-radius: 40px; background: var(--white); color: var(--magenta); font-weight: 700; font-size: 28px; line-height: 1.11; }
.detail .link img { width: 32px; height: 14.667px; margin: 8.67px 0; }
.qr { position: absolute; left: 772px; top: 1054px; width: 188px; text-align: center; font-weight: 700; font-size: 16px; line-height: 1.3; }
.qr img { width: 188px; height: 188px; display: block; margin-bottom: 18px; background: var(--white); }

/* ---------- A–Ö ---------- */
.scroller.az { padding-bottom: 32px; }
.letter { height: 132px; padding-top: 32px; display: flex; align-items: flex-end; }
.letter span { display: block; padding: 24px 8px 20px 32px; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1.4; text-transform: uppercase; }
.halves { display: grid; grid-template-columns: 512px 512px; margin-top: 32px; }
.row.half { width: 512px; margin: 0; }
.row.half .title { font-size: 32px; padding: 20px 32px 10px 164px; }
.az .grid { margin-top: 32px; }

/* ---------- Övrigt ---------- */
.scroller.ovrigt { padding-bottom: 32px; }
.letter.heading { height: auto; padding-top: 64px; padding-bottom: 16px; }
.letter.heading:first-child { padding-top: 32px; }
.letter.heading span { padding: 32px; }
.puffs { display: flex; flex-direction: column; gap: 32px; padding: 0 32px; }
.puff { display: flex; background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 0 16px rgba(0,0,0,.08); min-height: 288px; }
.puff-img { position: relative; flex: none; width: 312px; display: flex; align-items: center; justify-content: center; }
.puff-img img { display: block; max-width: none; }
.puff-img img.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.puff-text { flex: 1; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.puff-text h2 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.25; text-transform: uppercase; }
.puff-text p { font-size: 24px; line-height: 1.5; font-weight: 400; }
.puff-link { display: inline-flex; align-items: center; gap: 16px; padding: 16px 32px; border-radius: 40px; background: var(--magenta); color: var(--white); font-weight: 700; font-size: 28px; line-height: 1.11; white-space: nowrap; }
.puff-link img { width: 32px; height: 14.667px; margin: 8.67px 0; }

/* List pages have a white background */
.index.list { background: var(--white); }
.index.list .scroller.list { padding-bottom: 32px; }

/* ---------- Meny ---------- */
.menu { background: var(--white); color: var(--black); }
.menu .logo { position: absolute; left: 32px; top: 32px; width: 141px; height: 62px; cursor: pointer; }
.menu h1 { position: absolute; left: 32px; top: 168px; width: 960px; font-size: 64px; line-height: 1.11; font-weight: 700; }
.menu-items { position: absolute; left: 32px; top: 126px; bottom: 32px; width: 960px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 32px; }
.menu-item { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 48px; padding: 120px 32px 32px; background: var(--c); color: var(--white); border-radius: 40px; box-shadow: 0 12px 32px rgba(0,0,0,.25); text-align: center; transition: transform .2s; }
/* Foto under en kraftig färgton, så varje val får sin egen färg */
.mi-bg::before { content: ""; position: absolute; inset: 0; background: var(--img) center / cover; mix-blend-mode: multiply; opacity: .55; }
.mi-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(0,0,0,.25)); }
.menu-item > * { position: relative; z-index: 1; }
/* Egen klippt behållare för fotot: klipper hörnen även i Safari/WebKit, där overflow + animerade barn annars kan gå utanför */
.menu-item > .mi-bg { position: absolute; inset: 0; z-index: 0; background: var(--c); border-radius: inherit; overflow: hidden; isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.menu-item:active { transform: scale(.96); }
.menu-item .mi-icon { background: var(--white); color: var(--c); box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.mi-icon { flex: none; display: grid; place-items: center; width: 160px; height: 160px; border-radius: 50%; background: var(--magenta); color: var(--white); }
.mi-icon svg { width: 90px; height: 90px; }
.mi-text { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mi-text strong { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 1.2; text-transform: uppercase; }
.mi-text small { font-size: 28px; line-height: 1.3; font-weight: 400; }

/* ---------- Platshållarvyer ---------- */
.placeholder { background: var(--white); }
.back.dark { top: 158px; }
.ph-body { position: absolute; inset: 300px 64px 0; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.ph-body h1 { font-family: var(--font-display); font-size: 96px; line-height: 1.2; font-weight: 700; text-transform: uppercase; }
.ph-body p { font-size: 32px; line-height: 1.5; }
.ph-body .mi-icon { width: 192px; height: 192px; margin-top: 96px; }
.ph-body .mi-icon svg { width: 108px; height: 108px; }

/* Innehållet animeras in när menyn visas (efter tryck på vilaskärmen) */
@keyframes rise { from { opacity: 0; transform: translateY(48px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.menu .logo { animation: fade .5s ease-out backwards; }
.menu h1 { animation: rise .6s cubic-bezier(.2,.8,.2,1) .1s both; }
.menu-item { animation: rise .6s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i) * .12s) backwards; }
@media (prefers-reduced-motion: reduce) { .menu .logo, .menu h1, .menu-item { animation: none; } }

/* Höga kort: större ikon och rubrik */
.menu-item .mi-icon { width: 200px; height: 200px; }
.menu-item .mi-icon svg { width: 112px; height: 112px; }
.menu-item .mi-text strong { font-size: 56px; }

/* Mikroanimationer på menyikonerna: korta, mjuka rörelser med lång paus emellan.
   Olika längd och startpunkt så att de inte rör sig i takt.
   Negativa delays gör att första rörelsen kommer redan ~1–1,6 s efter att korten visats. */
.menu-item .mi-icon svg { transform-origin: 50% 50%; }
.needle { transform-box: view-box; transform-origin: 24px 24px; }

@keyframes wiggle  { 0%, 84%, 100% { rotate: 0deg; } 88% { rotate: -7deg; } 92% { rotate: 5deg; } 96% { rotate: -2deg; } }
@keyframes swing   { 0%, 30%, 100% { rotate: 0deg; } 8% { rotate: 28deg; } 16% { rotate: -16deg; } 24% { rotate: 7deg; } }
@keyframes sweep   { 0%, 72%, 100% { translate: 0 0; rotate: 0deg; } 80% { translate: 3px -3px; rotate: 6deg; } 90% { translate: -2px 1px; rotate: -4deg; } }
@keyframes hop     { 0%, 82%, 100% { translate: 0 0; } 87% { translate: 0 -6px; } 93% { translate: 0 0; } 96% { translate: 0 -2px; } }

.menu-item[data-menu="events"] .mi-icon svg { animation: wiggle 7s ease-in-out -5s infinite; }
.menu-item[data-menu="find"] .needle        { animation: swing 9s ease-in-out 1s infinite; }
.menu-item[data-menu="search"] .mi-icon svg { animation: sweep 8s ease-in-out -4.5s infinite; }
.menu-item[data-menu="help"] .mi-icon svg   { animation: hop 6.5s ease-in-out -3.7s infinite; }

@media (prefers-reduced-motion: reduce) { .menu-item .mi-icon svg, .needle { animation: none !important; } }

/* Långsam "Ken Burns"-rörelse i bakgrundsfotona: ett svagt drag och en liten zoom, olika riktning per kort */
@keyframes drift {
  from { transform: scale(1.12) translate(var(--dx0, 0), var(--dy0, 0)); }
  to   { transform: scale(1.38) translate(var(--dx1, 0), var(--dy1, 0)); }
}
.mi-bg::before { animation: drift 10s ease-in-out -3s infinite alternate; will-change: transform; }
.menu-item[data-menu="events"] .mi-bg::before { --dx0: -4%; --dy0: 3%;  --dx1: 4%;  --dy1: -3%; animation-duration: 11s; }
.menu-item[data-menu="find"] .mi-bg::before   { --dx0: 4%;  --dy0: 3%;  --dx1: -4%; --dy1: -3%; animation-duration: 9s; }
.menu-item[data-menu="search"] .mi-bg::before { --dx0: -3%; --dy0: -4%; --dx1: 3%;  --dy1: 4%;  animation-duration: 12s; }
.menu-item[data-menu="help"] .mi-bg::before   { --dx0: 3%;  --dy0: -3%; --dx1: -3%; --dy1: 4%;  animation-duration: 10s; }
@media (prefers-reduced-motion: reduce) { .mi-bg::before { animation: none; } }

/* Å Ä Ö i Safari: DIN Condensed klipper prickarna om rubriken saknar utrymme uppåt.
   Lösningen (verifierad i Safari, variant B): padding ovanför texten, utan negativ marginal.
   Layouten kompenseras med mindre avstånd/offset på respektive plats. */
.tile .title, .detail h1, .puff-text h2, .mi-text strong, .ph-body h1 { padding-top: .35em; }
.detail h1 { top: calc(188px - .35em); }                 /* texten ligger kvar på samma ställe */
.menu-item { gap: 28px; }                                /* 48px minus rubrikens nya padding */
.puff-text { padding-top: 20.8px; }                       /* 32px minus h2:ns nya padding (.35 × 32px) */
.letter span { padding-top: calc(24px + .35em); }        /* bokstaven är bottenjusterad */