/* Klubbmallar (mallar.js). Används både på skärmen och i appens förhandsvisning, så allt är i
   containerenheter (cqw/cqh) och färgerna ligger på mallen själv – grafiska profilen 2026. */
.mallram { position: relative; width: 100%; aspect-ratio: 1338 / 848; container-type: size; border-radius: 12px; overflow: hidden; background: #184261; }
.mallyta {
  --m-natt: #103652; --m-core: #184261; --m-bla: #085c99; --m-trojor: #164a7a; --m-ljus: #3081c2;
  --m-gul: #ffe60d; --m-orange: #ffad33; --m-svart: #16181a; --m-vit: #ffffff; --m-dim: #b3b3b3;
  --m-display: "Alfa Slab One", Rockwell, Georgia, serif;
  --m-smal: "Barlow Condensed", "Arial Narrow", "Barlow", system-ui, sans-serif;
  --m-text: "Barlow", "Segoe UI", system-ui, sans-serif;
  position: absolute; inset: 0; overflow: hidden; color: var(--m-vit); font-family: var(--m-text);
  /* Klubbens randiga grungebakgrund, som på affischerna */
  background: url('/bilder/rander.webp') 0 0 / auto 100% repeat-x, var(--m-svart);
}
/* Rund bricka i blått med gul text, som "Välkomna!" på affischerna */
.mallyta .mall-bricka { position: absolute; z-index: 3; width: 22cqh; height: 22cqh; border-radius: 50%; background: var(--m-bla); display: grid; place-content: center; text-align: center; padding: 2cqh; box-shadow: 0 .6cqh 2cqh rgba(0,0,0,.35); font-family: var(--m-display); font-size: 3.3cqh; line-height: 1.1; color: var(--m-gul); text-transform: uppercase; text-wrap: balance; }
.mallyta .mall-bricka.mellan { font-size: 2.8cqh; }
.mallyta .mall-bricka.lang { width: 26cqh; height: 26cqh; font-size: 2.5cqh; }
.mallyta .mall-bricka small { display: block; font-size: .78em; color: var(--m-vit); margin-bottom: .4em; }
.mallyta h2 { margin: 0; font-weight: 400; }
.mallyta img { display: block; }
.mallyta .mall-tom { opacity: .45; }
.mallyta .mall-marke { width: auto; height: 7cqh; }

/* Bildlager: bilderna fyller ytan och beskärs automatiskt; flera bilder tonar över i tur och ordning
   med en långsam inzoomning (Ken Burns). */
.mallyta .mb { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.mallyta .mb.syns { opacity: 1; }
.mallyta .mb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.02); }
.mallyta .mb.syns img { animation: mall-zoom 9s ease-out both; }
@keyframes mall-zoom { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.mallyta .mb-tom { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--m-core) 0 2cqw, var(--m-trojor) 2cqw 4cqw); color: var(--m-dim); font-family: var(--m-smal); font-weight: 700; font-size: 3cqw; letter-spacing: .1em; text-transform: uppercase; }
.mallyta .mk-ruta .mb-tom { position: static; height: 100%; }
@media (prefers-reduced-motion: reduce) { .mallyta .mb.syns img, .mallyta .mk-ruta { animation: none; opacity: 1; } }

/* Profilens randband (blå/svart) */
.mallyta .mall-rander { position: absolute; left: 0; right: 0; bottom: 0; height: 2.4cqh; background: url('/bilder/band.webp') center / cover, repeating-linear-gradient(90deg, var(--m-bla) 0 6cqw, var(--m-svart) 6cqw 9cqw); }

/* Matchaffisch: bild till vänster, panel till höger */
.mallyta.mall-match .mm-bild { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; overflow: hidden; }
.mallyta.mall-match .mm-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,24,26,0) 70%, rgba(22,24,26,.6) 100%); }
.mallyta.mall-match .mm-panel { position: absolute; right: 0; top: 0; bottom: 2.4cqh; width: 46%; padding: 6cqh 4cqw 5cqh 3cqw; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqh; background: linear-gradient(90deg, rgba(22,24,26,.15), rgba(22,24,26,.55)); }
.mallyta .mm-ogon { font-family: var(--m-smal); font-weight: 700; font-size: 2.3cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--m-gul); }
.mallyta .mm-lag { font-family: var(--m-display); font-size: 6.4cqw; line-height: 1; letter-spacing: .04em; color: var(--m-gul) !important; text-transform: uppercase; color: var(--m-vit); text-wrap: balance; }
.mallyta .mm-mot { font-family: var(--m-smal); font-weight: 700; font-size: 3.6cqw; line-height: 1.05; text-wrap: balance; }
.mallyta .mm-mot span { color: var(--m-dim); font-weight: 600; text-transform: lowercase; }
.mallyta .mm-marken { display: flex; align-items: center; gap: 1.6cqw; margin: 1cqh 0; }
.mallyta .mm-marken > img, .mallyta .mm-marken .marke img, .mallyta .mm-marken > svg { height: 11cqh; width: auto; }
.mallyta .mm-marken > span { font-family: var(--m-display); font-size: 3cqw; color: var(--m-dim); }
.mallyta .mm-marken .marke { display: contents; }
.mallyta .mm-nar { font-family: var(--m-smal); font-weight: 700; font-size: 3.4cqw; color: var(--m-gul); line-height: 1.05; }
.mallyta .mm-hall { font-family: var(--m-smal); font-weight: 600; font-size: 2.6cqw; color: var(--m-dim); text-transform: uppercase; letter-spacing: .08em; }
.mallyta.mall-match .mall-bricka { left: 3cqw; bottom: 7cqh; }

/* Evenemang: bilden i en snedskuren ruta, fakta till vänster */
.mallyta.mall-event .me-bild { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; overflow: hidden; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.mallyta.mall-event .mall-bricka { right: 3cqw; bottom: 6cqh; }
.mallyta.mall-event .me-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, rgba(22,24,26,.55), rgba(22,24,26,.15)); padding: 6cqh 2cqw 6cqh 4.5cqw; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqh; }
.mallyta .me-komet { width: 30%; height: auto; box-sizing: content-box; padding: 1.4cqh 1.4cqw; background: #fff; border-radius: 1.4cqw; box-shadow: 0 .6cqh 2cqh rgba(0,0,0,.35); }
.mallyta .me-ogon { display: flex; align-items: center; gap: 1cqw; font-family: var(--m-smal); font-weight: 700; font-size: 2.1cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--m-dim); }
.mallyta .me-ogon .mall-marke, .mallyta .mko-ogon .mall-marke { height: 7cqh; }
.mallyta .me-ogon small, .mallyta .mko-ogon small { display: block; margin-top: .3cqh; font-size: .78em; letter-spacing: .06em; color: var(--m-dim); text-transform: none; font-weight: 600; }
.mallyta .me-rubrik { font-family: var(--m-display); font-size: 5.2cqw; line-height: 1; letter-spacing: .04em; color: var(--m-gul); text-transform: uppercase; text-wrap: balance; }
.mallyta .me-rubrik.mellan { font-size: 4.2cqw; }
.mallyta .me-rubrik.lang { font-size: 3.4cqw; }
.mallyta .me-fakta { display: grid; gap: .8cqh; }
.mallyta .me-fakta div { display: grid; grid-template-columns: 8cqw 1fr; align-items: baseline; font-family: var(--m-smal); font-weight: 700; font-size: 3.2cqw; line-height: 1.1; }
.mallyta .me-fakta span { font-size: 1.7cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--m-orange); }
.mallyta .me-text { margin: 0; font-size: 2.1cqw; line-height: 1.35; color: #e6e6e6; max-width: 34ch; }

/* Grattis: bilden fyller allt, text i en gul ruta längst ned */
.mallyta.mall-grattis .mg-bild { position: absolute; inset: 0; }
.mallyta.mall-grattis .mg-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,54,82,0) 40%, rgba(16,54,82,.85) 100%); }
.mallyta .mg-text { position: absolute; left: 4cqw; right: 4cqw; bottom: 5cqh; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqh; }
.mallyta .mg-ogon { padding: .8cqh 1.6cqw; background: var(--m-svart); color: var(--m-gul); font-family: var(--m-smal); font-weight: 700; font-size: 2.2cqw; letter-spacing: .16em; text-transform: uppercase; }
.mallyta .mg-rubrik { padding: 1.2cqh 2.4cqw 1.6cqh; background: var(--m-gul); color: var(--m-svart); font-family: var(--m-display); font-size: 6cqw; line-height: 1; text-transform: uppercase; max-width: 100%; text-wrap: balance; }
.mallyta .mg-rubrik.mellan { font-size: 4.8cqw; }
.mallyta .mg-rubrik.lang { font-size: 3.8cqw; }
.mallyta .mg-text p { margin: 0; padding: 1cqh 2cqw; background: rgba(22,24,26,.82); font-family: var(--m-smal); font-weight: 600; font-size: 2.6cqw; line-height: 1.2; max-width: 46ch; }
.mallyta .mall-marke.horn { position: absolute; right: 3cqw; top: 4cqh; height: 13cqh; filter: drop-shadow(0 .4cqw 1cqw rgba(0,0,0,.5)); }
.mallyta .mg-text, .mallyta .mall-marke.horn { z-index: 2; }

/* Bildkollage: rubrik överst, rutnät som anpassar sig efter antalet bilder */
.mallyta.mall-kollage { display: flex; flex-direction: column; padding: 3.5cqh 2.4cqw 2.4cqw; gap: 2.4cqh; }
.mallyta .mk-topp { display: flex; align-items: center; gap: 1.4cqw; }
.mallyta .mk-rubrik { font-family: var(--m-display); font-size: 4.2cqw; line-height: 1; color: var(--m-gul); text-transform: uppercase; }
.mallyta .mk-rubrik.mellan { font-size: 3.6cqw; }
.mallyta .mk-rubrik.lang { font-size: 2.9cqw; }
.mallyta .mk-rutnat { flex: 1; min-height: 0; display: grid; gap: 1cqw; }
.mallyta .mk-rutnat.n1 { grid-template: 1fr / 1fr; }
.mallyta .mk-rutnat.n2 { grid-template: 1fr / 1fr 1fr; }
.mallyta .mk-rutnat.n3 { grid-template: 1fr 1fr / 1.5fr 1fr; }
.mallyta .mk-rutnat.n3 .mk-ruta:first-child { grid-row: span 2; }
.mallyta .mk-rutnat.n4 { grid-template: 1fr 1fr / 1fr 1fr; }
.mallyta .mk-rutnat.n5 { grid-template: 1fr 1fr / 1.4fr 1fr 1fr; }
.mallyta .mk-rutnat.n5 .mk-ruta:first-child { grid-row: span 2; }
.mallyta .mk-rutnat.n6 { grid-template: 1fr 1fr / 1fr 1fr 1fr; }
.mallyta .mk-ruta { position: relative; overflow: hidden; border-radius: 1cqw; background: var(--m-core); opacity: 0; animation: mall-in .7s ease-out forwards; }
.mallyta .mk-ruta img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.mallyta .mk-ruta:nth-child(2) { animation-delay: .15s; }
.mallyta .mk-ruta:nth-child(3) { animation-delay: .3s; }
.mallyta .mk-ruta:nth-child(4) { animation-delay: .45s; }
.mallyta .mk-ruta:nth-child(5) { animation-delay: .6s; }
.mallyta .mk-ruta:nth-child(6) { animation-delay: .75s; }
@keyframes mall-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* Lagbild: bilden stort, namnband längst ned */
.mallyta.mall-lagbild .ml-bild { position: absolute; inset: 0 0 17cqh 0; }
.mallyta .ml-band { position: absolute; left: 0; right: 0; bottom: 0; height: 17cqh; display: flex; align-items: center; gap: 2.4cqw; padding: 0 3cqw; background: linear-gradient(90deg, var(--m-svart), var(--m-trojor)); border-top: .6cqh solid var(--m-gul); }
.mallyta .ml-lag { font-family: var(--m-display); font-size: 5cqw; line-height: 1; color: var(--m-gul); text-transform: uppercase; white-space: nowrap; }
.mallyta .ml-text { flex: 1; font-family: var(--m-smal); font-weight: 600; font-size: 2.4cqw; line-height: 1.15; color: #e6e6e6; }
.mallyta .ml-band .mall-marke { margin-left: auto; height: 12cqh; }

/* Kiosk och lotteri: prislista till vänster, bild till höger */
.mallyta.mall-kiosk { display: grid; grid-template-columns: 1.1fr 1fr; }
.mallyta .mko-text { background: linear-gradient(90deg, rgba(22,24,26,.55), rgba(22,24,26,.15)); padding: 6cqh 3cqw 5cqh 4.5cqw; display: flex; flex-direction: column; gap: 2.2cqh; justify-content: center; }
.mallyta .mko-ogon { display: flex; align-items: center; gap: 1cqw; font-family: var(--m-smal); font-weight: 700; font-size: 2cqw; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.mallyta .mko-rubrik { font-family: var(--m-display); font-size: 5.4cqw; line-height: 1; color: var(--m-gul); text-transform: uppercase; text-wrap: balance; }
.mallyta .mko-rubrik.mellan { font-size: 4.4cqw; }
.mallyta .mko-rubrik.lang { font-size: 3.5cqw; }
.mallyta .mko-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6cqh; }
.mallyta .mko-lista li { display: flex; align-items: baseline; gap: 1cqw; font-family: var(--m-smal); font-weight: 700; font-size: 3.2cqw; line-height: 1.15; }
.mallyta .mko-lista i { flex: 1; border-bottom: .3cqh dotted rgba(255,255,255,.45); transform: translateY(-.6cqh); }
.mallyta .mko-lista b { color: var(--m-gul); white-space: nowrap; }
.mallyta .mko-swish { align-self: flex-start; padding: .8cqh 1.8cqw; border-radius: .8cqw; background: var(--m-svart); font-family: var(--m-smal); font-weight: 700; font-size: 2.4cqw; color: var(--m-gul); }
.mallyta .mko-bild { position: relative; overflow: hidden; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }

/* Video med rubrik: videon fyller ytan, rubrikband längst ned */
.mallyta.mall-video { background: #000; }
.mallyta .mv-video, .mallyta .mv-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mallyta .mv-band { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 2cqw; padding: 2.4cqh 3cqw; background: linear-gradient(90deg, rgba(22,24,26,.92), rgba(22,74,122,.85)); border-top: .5cqh solid var(--m-gul); }
.mallyta .mv-band .mall-marke { height: 10cqh; }
.mallyta .mv-rubrik { font-family: var(--m-display); font-size: 4.2cqw; line-height: 1; color: var(--m-gul); text-transform: uppercase; }
.mallyta .mv-rubrik.mellan { font-size: 3.4cqw; }
.mallyta .mv-rubrik.lang { font-size: 2.8cqw; }
.mallyta .mv-text { margin-top: .6cqh; font-family: var(--m-smal); font-weight: 600; font-size: 2.3cqw; color: #e6e6e6; }

/* Mallväljaren i appen */
.mallval { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 14px; }
.mallval label { display: grid; gap: 6px; padding: 6px; border: 2px solid transparent; border-radius: 14px; cursor: pointer; background: var(--yta, #fff); }
.mallval label:has(input:checked) { border-color: var(--klubb-bla, #085c99); }
.mallval input { position: absolute; opacity: 0; pointer-events: none; }
.mallval .mallram { border-radius: 8px; pointer-events: none; }
.mallval b { font-size: 14px; } .mallval small { font-size: 12px; color: var(--dim, #6b7280); line-height: 1.3; }
.mallforhand { margin: 12px 0; }