/* stil.css — all visuell styling. Mobil-først. */


/* === BASIS === */

body {
  background: var(--hvit);
  color: var(--paper);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.5;
  min-height: 100dvh;
}

/* Skjemakontroller arver samme typografi som resten av Påby. */
button,
input,
select,
textarea {
  font-family: var(--font-tekst);
}


/* === TOPBAR (sticky: header + filtre) ===
   Én felles sticky container gjør at begge elementer
   klistrer seg til toppen som én blokk ved scrolling. */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--hvit);
  box-shadow: 0 1px 0 var(--flate-2);
  padding-top: env(safe-area-inset-top);
}

/* Sentrert innhold-wrapper brukt av både header og filtre */
.topbar-innhold {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gap-m);
  padding-left: max(var(--gap-m), env(safe-area-inset-left));
  padding-right: max(var(--gap-m), env(safe-area-inset-right));
}


/* === TOPPTEKST === */

.topptekst {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
  padding-top: var(--gap-s);
  padding-bottom: var(--gap-s);
}

/* Logo-lockup: merket (symbolet) først, så ordmerket — begge PNG med
   den mørke fyllfargen byttet til papir/off-white ("-lys"-variantene,
   se bilder/), siden de sitter på den mørke topbaren. Naturlig-fargede
   versjoner (mørk på transparent) brukes til favicon og OG-bildet,
   der bakgrunnen er lys. */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-hovedlogo {
  display: block;
  width: auto;
  height: 48px;
  max-width: 160px;
  object-fit: contain;
}

.tagline {
  flex: 1;
  font-size: 0.8rem;
  color: var(--graa);
}

.lagret-knapp {
  padding: var(--gap-s);
  border-radius: var(--radius-s);

  border: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;

  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lagret-knapp:focus {
  outline: none;
}

.lagret-knapp:focus-visible {
  outline: 2px solid var(--aksent);
  outline-offset: 2px;
}

.lagret-knapp:hover,
.lagret-knapp.aktiv {
  background: var(--flate-2);
}

.følger-topbar-knapp {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--flate-2);
  color: var(--graa);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}

.følger-topbar-knapp:hover {
  border-color: var(--paper);
  color: var(--paper);
}

.følger-topbar-knapp.aktiv {
  border-color: var(--aksent);
  color: var(--aksent);
  background: rgba(255, 77, 94, 0.08);
}

/* Skjult — funksjonen ligger nå i hamburgermenyen (.meny-dropdown under).
   Selve knappene og JS-en som klikker dem beholdes urørt, kun skjult. */
#vis-følger,
#vis-lagret {
  display: none;
}


/* === HAMBURGERMENY ===
   Enkel, håndbygd meny (ingen ekstern komponent) — se initMeny() i
   js/main.js for åpne/lukke/tastatur, og «Følger»/«Lagret»-koblingen
   til de eksisterende knappene over. Ikonet er bilder/Vector.svg,
   inlinet i index.html med fill="currentColor". */

.meny-dropdown {
  position: relative;
  flex-shrink: 0;
}

.meny-knapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-s);
  color: var(--paper);
  cursor: pointer;
  transition: background 0.15s;
}

.meny-knapp:hover {
  background: var(--flate-2);
}

.meny-knapp:focus-visible {
  outline: 2px solid var(--aksent);
  outline-offset: 2px;
}

.meny-ikon {
  width: 30px;
  height: auto;
  transition: transform 0.2s ease;
}

/* Åpnet — via klikk/trykk/tastatur, likt på alle enheter: full 90° slik
   at strekene står loddrett. Ingen hover-åpning lenger (den gjorde det
   umulig å bevege musen ned til et menypunkt uten at panelet lukket seg
   underveis). */
.meny-dropdown.apen .meny-ikon {
  transform: rotate(90deg);
}

.meny-panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--gap-s));
  right: 0;
  z-index: 20;
  min-width: 170px;
  flex-direction: column;
  padding: var(--gap-s);
  background: var(--hvit);
  border: 1.5px solid var(--flate-2);
  border-radius: var(--radius-m);
}

.meny-dropdown.apen .meny-panel {
  display: flex;
}

.meny-lenke {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  border-radius: var(--radius-s);
  background: none;
  font-family: var(--font-tekst);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--paper);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

.meny-lenke:hover {
  background: var(--flate-2);
}

.meny-lenke:focus-visible {
  outline: 2px solid var(--aksent);
  outline-offset: -2px;
}

/* Diskret markering når Følger/Lagret-visningen er aktiv — se
   synkroniserAktiv() i main.js sin initMeny(). */
.meny-lenke.aktiv {
  color: var(--aksent-tekst);
}

.meny-skille {
  border: none;
  border-top: 1px solid var(--flate-2);
  margin: var(--gap-s) 0.2rem;
}


/* === FILTRE === */

.filtre {
  padding: var(--gap-s) 0 var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.filter-gruppe {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-etikett {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--graa);
}

.filter-chips {
  display: flex;
  gap: var(--gap-s);
  flex-wrap: wrap;
}

/* Bunnraden: Nærhets-chip + Nullstill på samme linje */
.filter-bunn-rad {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  margin-top: 2px;
}

.chip {
  padding: 0.3rem 0.8rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--flate-2);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--graa);
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  outline-offset: 2px;
}

.chip:hover {
  border-color: var(--graa);
  color: var(--paper);
}

.chip.aktiv {
  background: var(--aksent);
  border-color: var(--aksent);
  color: var(--aksent-kontrast);
}

.nullstill-knapp {
  font-size: 0.8rem;
  color: var(--aksent);
  border: none;
  background: none;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  font-family: var(--font-tekst);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s;
}

.nullstill-knapp:hover {
  opacity: 0.75;
}

/* Filter-knapp: skjult på desktop (filtrene vises alltid der).
   Vises og får funksjon kun på mobil, se @media (max-width: 899px) under. */
.filter-toggle-knapp {
  display: none;
}


/* === HOVEDDEL — to-kolonne-layout ===
   Mobil-default: én kolonne, sidestolpe over feedkolonne.
   Desktop (≥900px): flex-rad, sidestolpe sticky til venstre. */

.hoveddel {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gap-m);
  padding-left: max(var(--gap-m), env(safe-area-inset-left));
  padding-right: max(var(--gap-m), env(safe-area-inset-right));
}

/* Sidestolpe: filtre. Ingen spesialbehandling på mobil — flyter normalt over feeden. */
.sidestolpe {
  padding-top: var(--gap-m);
}

/* Feedkolonne: treff-teller + feed */
.feedkolonne {
  /* Arver bredde fra hoveddel på mobil */
}

@media (min-width: 900px) {
  .topbar-innhold {
    /* Ingen padding-shorthand her — .topbar-innhold er samme element som
       .topptekst (<header class="topptekst topbar-innhold">), og en
       shorthand ville nullstilt .topptekst sin topp/bunn-padding igjen
       (samme bug som tidligere, se forklaringen ved .topptekst). Venstre/
       høyre dekkes fullt ut av de to linjene under. */
    max-width: 1020px;
    padding-left: max(var(--gap-xl), env(safe-area-inset-left));
    padding-right: max(var(--gap-xl), env(safe-area-inset-right));
  }

  .hoveddel {
    max-width: 1020px;
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xl);
    padding: 0 var(--gap-xl);
    padding-left: max(var(--gap-xl), env(safe-area-inset-left));
    padding-right: max(var(--gap-xl), env(safe-area-inset-right));
  }

  .sidestolpe {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--topbar-h) + env(safe-area-inset-top));
    padding-top: var(--gap-m);
  }

  .feedkolonne {
    flex: 1;
    min-width: 0;
  }
}


/* === TREFF-LINJE === */

.treff-linje {
  padding: var(--gap-m) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--graa);
  min-height: 2rem;
}

.tilbake-knapp {
  color: var(--aksent);
  font-size: 0.875rem;
}

.skjult {
  display: none !important;
}


/* === UKE-NAVIGASJON === */

.uke-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  padding: var(--gap-s) 0 0;
  font-size: 0.8rem;
}

.uke-knapp {
  color: var(--aksent);
  background: none;
  border: none;
  padding: 0.3rem 0.2rem;
  font-family: var(--font-tekst);
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.uke-knapp:hover {
  opacity: 0.75;
}

.uke-knapp:last-child {
  margin-left: auto;
}

.uke-label {
  color: var(--graa);
  font-weight: 600;
  text-align: center;
  flex: 1;
}


/* === DAG-SEKSJON === */

.dag-gruppe {
  margin-top: var(--gap-l);
}

.dag-gruppe:first-child {
  margin-top: var(--gap-m);
}

.dag-overskrift {
  font-family: var(--font-tittel);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paper);
  padding-bottom: var(--gap-s);
  border-bottom: 1px solid var(--flate-2);
  margin-bottom: var(--gap-m);
}

.dag-kort {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}


/* === FEED === */

.feed {
  padding-bottom: calc(var(--gap-xl) + env(safe-area-inset-bottom));
}

.tom-feed,
.laster {
  text-align: center;
  color: var(--graa);
  padding: var(--gap-xl) var(--gap-m);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: var(--gap-l);
}

.proev-igjen-knapp {
  margin: var(--gap-m) auto 0;
  display: block;
  padding: 0.6rem 1.4rem;
  background: var(--aksent);
  border: 1.5px solid var(--aksent);
  border-radius: var(--radius-m);
  color: var(--aksent-kontrast);
  font-family: var(--font-tekst);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}

.proev-igjen-knapp:hover {
  opacity: 0.85;
}

.proev-igjen-knapp:disabled {
  opacity: 0.6;
  cursor: default;
}


/* === FØLGER-VISNING === */

.følger-seksjon {
  margin-top: var(--gap-xl);
}

.følger-seksjon:first-child {
  margin-top: var(--gap-m);
}

.følger-seksjon-header {
  display: flex;
  align-items: baseline;
  gap: var(--gap-m);
  padding-bottom: var(--gap-s);
  border-bottom: 1px solid var(--flate-2);
  margin-bottom: var(--gap-m);
}

.følger-seksjon-tittel {
  font-family: var(--font-tittel);
  font-size: 1rem;
  font-weight: 600;
  color: var(--paper);
}

.avfølg-knapp {
  font-size: 0.72rem;
  color: var(--graa);
  margin-left: auto;
  transition: color 0.15s;
}

.avfølg-knapp:hover {
  color: var(--aksent);
}

.følger-tom {
  font-size: 0.875rem;
  color: var(--graa);
  padding: var(--gap-m) 0;
  opacity: 0.7;
}


/* Lokal-lagring-info — vises kun i lagret-visning */
.lagret-info {
  font-size: 0.78rem;
  color: var(--graa);
  padding: var(--gap-s) 0 0;
  opacity: 0.7;
}


/* === KORT === */

/* Vanlige kort og utvalgte kort bruker samme grunnstruktur:
   blå kortflate, fast bildeformat og tekst som overlay nederst til venstre. */
.kort,
.utvalg-kort {
  position: relative;
  background: var(--aksent);
  border: 8px solid var(--aksent);
  border-radius: var(--radius-l);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.kort:hover,
.utvalg-kort:hover {
  transform: scale(1.015);
}

.kort:active,
.utvalg-kort:active {
  transform: translateY(0);
}

/* Bildet har en egen radius. Den blå kortflaten ligger bak og blir synlig
   i de avrundede hjørnene. */
.kort-bilde-wrapper,
.utvalg-bilde-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--aksent);
  border-radius: 12px;
}

.kort-bilde-wrapper {
  aspect-ratio: 16 / 7;
}

.utvalg-bilde-wrapper {
  aspect-ratio: 16 / 6;
}

.kort-bilde,
.utvalg-bilde {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.kort:hover .kort-bilde,
.utvalg-kort:hover .utvalg-bilde {
  transform: scale(1.03);
}

.kort-bilde-placeholder {
  width: 100%;
  height: 100%;
  background: var(--flate-2);
}


/* === SKELETON-LASTETILSTAND === */

@keyframes skeleton-puls {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.kort-skeleton,
.utvalg-kort-skeleton {
  background: var(--flate-1);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.kort-skeleton-bilde {
  aspect-ratio: 16 / 7;
  background: var(--flate-2);
  animation: skeleton-puls 1.6s ease-in-out infinite;
}

.utvalg-kort-skeleton .kort-skeleton-bilde {
  aspect-ratio: 16 / 6;
}

.kort-skeleton-innhold {
  padding: var(--gap-m);
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.utvalg-kort-skeleton .kort-skeleton-innhold {
  padding: var(--gap-m) var(--gap-l);
}

.kort-skeleton-linje {
  height: 0.9rem;
  border-radius: var(--radius-s);
  background: var(--flate-2);
  animation: skeleton-puls 1.6s ease-in-out infinite;
}

.kort-skeleton-linje--tittel { width: 70%; height: 1.1rem; }
.kort-skeleton-linje--meta   { width: 45%; }
.kort-skeleton-linje--footer { width: 30%; margin-top: var(--gap-s); }

.kort-bilde-wrapper::before,
.utvalg-bilde-wrapper::before,
.modal-bilde-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--flate-2);
  animation: skeleton-puls 1.6s ease-in-out infinite;
  transition: opacity 0.25s ease;
}

.kort-bilde-wrapper.bilde-lastet::before,
.utvalg-bilde-wrapper.bilde-lastet::before,
.modal-bilde-wrapper.bilde-lastet::before {
  opacity: 0;
  animation: none;
  pointer-events: none;
}


/* === BADGES === */

.kort-kategori {
  position: absolute;
  top: var(--gap-s);
  left: var(--gap-s);
  z-index: 2;
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kategori-musikk,
.kategori-klubb,
.kategori-pafunn {
  background: var(--ink);
  color: var(--merke-tekst);
}

.gjentas-badge {
  position: absolute;
  top: 45px;
  right: -40px;
  z-index: 2;
  width: 180px;
  padding: 3px 0;
  transform: rotate(45deg);
  text-align: center;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: var(--aksent);
  color: var(--paper);
  pointer-events: none;
}
.gjentas-badge {
  display: none;
}


/* === BINDERS / LAGRE === */

.binders-ikon {
  display: block;
  color: rgba(244, 241, 234, 0.68);
  transition: color 0.15s;
  flex-shrink: 0;
}

.lagret .binders-ikon {
  color: var(--aksent);
}

@keyframes binders-pop {
  0%   { transform: scale(1)    rotate(0deg); }
  30%  { transform: scale(1.35) rotate(-8deg); }
  60%  { transform: scale(0.88) rotate(3deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

.binders-pop .binders-ikon {
  animation: binders-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.hjerte-knapp {
  position: absolute;
  top: var(--gap-s);
  right: var(--gap-s);
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 19, 24, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.hjerte-knapp:hover {
  transform: scale(1.08);
  background: var(--aksent);
}

.hjerte-knapp:hover .binders-ikon {
  color: var(--paper);
}

.hjerte-knapp:focus-visible {
  outline: 2px solid var(--hvit);
  outline-offset: 2px;
}

/* Topbar-bindersen bruker samme ikon, men uten native button-border. */
.lagret-knapp .binders-ikon {
  color: var(--graa);
}

.lagret-knapp:hover .binders-ikon {
  color: var(--paper);
}

.lagret-knapp.aktiv .binders-ikon {
  color: var(--aksent-tekst);
}

/* Modal lagre-knapp */
.modal-hjerte {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.modal-hjerte .binders-ikon {
  color: var(--graa);
}

.modal-hjerte.lagret .binders-ikon {
  color: var(--aksent-tekst);
}


/* === KORTINNHOLD === */

.kort-innhold,
.utvalg-innhold {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;

  
  height: 75px;
  box-sizing: border-box;

  background: var(--aksent);
  padding: var(--gap-s) var(--gap-m);

  border-top-right-radius: 12px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;

  overflow: hidden;
}

.kort-innhold {
  width: 50%;
}

.utvalg-innhold {
  width: 38%;
}

.kort-innhold *,
.utvalg-innhold *,
.modal-body * {
  margin: 0;
}

.kort-tittel {
  font-family: var(--font-tittel);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
}

.kort-meta {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  min-width: 0;
  font-size: 0.85rem;
  color: var(--paper);
}

.sted {
  min-width: 0;
}

.avstand::before {
  content: '· ';
}

.avstand {
  color: inherit;
  flex-shrink: 0;
}

/* Tid og pris er fakta på samme nivå og skal alltid ha samme grå farge. */
.kort-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--paper);
}

.tid,
.pris-gratis {
  color: var(--paper);
}

.pris-gratis {
  font-weight: 500;
}

/* === UTGÅTT I DAG === */
.kort--utgatt,
.utvalg-kort--utgatt {
  opacity: 0.55;
}

.kort--utgatt .kort-tittel,
.utvalg-kort--utgatt .utvalg-tittel {
  text-decoration: line-through;
}

.kort-utgatt-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--graa);
}


/* === MODAL === */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 19, 24, 0.85);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal.aktiv {
  opacity: 1;
  pointer-events: all;
}

.modal-container {
  background: var(--hvit);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  border: 4px solid var(--aksent);
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  /* Hindrer nettleserens EGEN gummistrikk-sprett-tilbake-effekt når man
     drar forbi scrollTop 0 — uten denne konkurrerer den native bounce-en
     med dra-for-å-lukke-gesten under, og vinner (det er "popper rett opp
     igjen"-symptomet). Endrer ikke vanlig scrolling ellers. */
  overscroll-behavior-y: contain;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.modal.aktiv .modal-container {
  transform: translateY(0);
}

.modal-lukk {
  position: absolute;
  top: var(--gap-m);
  right: var(--gap-m);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--flate-2);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background 0.15s;
}

.modal-lukk:hover {
  background: var(--graa);
}

/* Dra-håndtak — visuelt signal om at arket kan dras ned for å lukkes
   (i tillegg til kryss-knappen, klikk på bakgrunn og Escape). Kun bunnark-
   visningen (< 640px, se «MODAL DESKTOP» lenger ned) har denne gesten —
   håndtaket skjules derfor når modalen blir et sentrert vindu på desktop. */
.modal-drahandtak {
  position: absolute;
  top: var(--gap-s);
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: 100px;
  background: rgba(244, 241, 234, 0.35);
  z-index: 1;
  pointer-events: none;
}

.modal-bilde-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--flate-2);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
}

.modal-bilde {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  /* Se forklaring ved .kort-bilde — garanterer at bildet males over
     skeleton-pulsen uansett JS-timing. */
  position: relative;
  z-index: 1;
}

.modal-body {
  padding: var(--gap-l);
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.modal-kategori {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-tittel {
  font-family: var(--font-tittel);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.modal-sted-rad {
  display: flex;
  align-items: baseline;
  gap: var(--gap-s);
  flex-wrap: wrap;
}

.modal-sted {
  font-size: 0.9rem;
  color: var(--graa);
}

.følg-knapp {
  font-size: 0.72rem;
  padding: 2px 10px;
  border-radius: 100px;
  border: 1px solid var(--flate-2);
  color: var(--graa);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

.følg-knapp:hover {
  border-color: var(--paper);
  color: var(--paper);
}

.følg-knapp.fulgt {
  /* --aksent-pa-lys: knappen står direkte på den lyse modal-kortflaten */
  border-color: var(--aksent-tekst);
  color: var(--aksent-tekst);
}

/* Faktarad: Type / Tid / Pris / Avstand */
.modal-faktarad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-m) var(--gap-l);
  padding: var(--gap-m);
  background: var(--flate-2);
  border-radius: var(--radius-m);
}

.faktarad-felt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.faktarad-etikett {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--aksent);
}

.faktarad-verdi {
  font-size: 0.9rem;
  font-weight: 500;
}

.modal-beskrivelse {
  font-size: 1rem;
  line-height: 1.65;
}

.modal-handlinger {
  display: flex;
  gap: var(--gap-s);
}

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-m);
  font-size: 0.9rem;
  font-weight: 500;
  transition: opacity 0.15s, transform 0.1s;
}

.knapp:hover  { opacity: 0.85; }
.knapp:active { transform: scale(0.98); }

.knapp-primaer {
  background: var(--aksent);
  color: var(--aksent-kontrast);
  flex: 1;
}

.knapp-sekundaer {
  background: var(--flate-2);
  color: var(--paper);
}

.knapp-ghost {
  border: 1.5px solid var(--flate-2);
  color: var(--graa);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-m);
  font-size: 0.875rem;
  transition: border-color 0.15s, color 0.15s;
}

.knapp-ghost:hover {
  border-color: var(--graa);
  color: var(--paper);
}

.modal-bunn {
  display: flex;
  gap: var(--gap-s);
  padding-bottom: calc(var(--gap-m) + env(safe-area-inset-bottom));
}

body.modal-aapen {
  overflow: hidden;
}


/* === MODAL DESKTOP === */

@media (min-width: 640px) {
  .modal {
    align-items: center;
  }

  .modal-container {
    max-width: 520px;
    border-radius: var(--radius-l);
    margin: auto;
  }

  .modal-bilde-wrapper {
    border-radius: var(--radius-l) var(--radius-l) 0 0;
  }

  .modal-drahandtak {
    display: none;
  }
}


/* === LANDSCAPE TELEFON ===
   Reduser topbar-høyde når skjermen er lav og bred (f.eks. iPhone i sidestilt). */

@media (orientation: landscape) and (max-height: 500px) {
  .topptekst {
    padding-top: var(--gap-s);
    padding-bottom: var(--gap-xs, 0.25rem);
  }

  .filtre {
    padding-bottom: var(--gap-s);
  }
}


/* === KURATORTEKST === */

.modal-kuratortekst {
  font-size: 0.875rem;
  color: var(--graa);
  font-style: italic;
  line-height: 1.55;
}


/* === TILLITSSIGNALER === */

.modal-tillit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-s);
  padding-top: var(--gap-s);
  border-top: 1px solid var(--flate-2);
  font-size: 0.8rem;
}

.tillit-verifisert {
  color: var(--graa);
}

.tillit-feedback {
  color: var(--graa);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tillit-feedback:hover {
  color: var(--paper);
}


/* === BILDE-PLACEHOLDER MED KATEGORIIDENTITET === */

.kort-bilde-placeholder.kategori-musikk  { background: rgba(200, 255, 77, 0.08); }
.kort-bilde-placeholder.kategori-klubb   { background: rgba(244, 241, 234, 0.06); }
.kort-bilde-placeholder.kategori-pafunn  { background: rgba(180, 77, 255, 0.08); }


/* === FILTER BUNNRAD (Vis avstand + Nullstill) === */

.filter-bunn-rad {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
  margin-top: var(--gap-s);
  flex-wrap: wrap;
}

#vis-avstand.aktiv {
  background: color-mix(in srgb, var(--sekundaer) 15%, transparent);
  border-color: var(--sekundaer);
  color: var(--sekundaer);
}

#vis-avstand:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* === POSISJONSSTATUS === */

.posisjon-status {
  font-size: 0.8rem;
  margin-top: var(--gap-s);
  line-height: 1.4;
}

.posisjon-info { color: var(--graa); }
.posisjon-feil { color: var(--aksent); }


/* === SORTERINGSKONTROLL ===
   Plasseres i .treff-linje — legg til flex-wrap for mobilstøtte. */

.treff-linje {
  flex-wrap: wrap;
  gap: var(--gap-s);
}

.sortering-kontroll {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.sortering-label {
  font-size: 0.8rem;
  color: var(--graa);
  white-space: nowrap;
  user-select: none;
}

.sortering-select {
  font-family: var(--font-tekst);
  font-size: 0.8rem;
  color: var(--paper);
  background: var(--flate-2);
  border: 1.5px solid var(--flate-2);
  border-radius: var(--radius-s);
  padding: 0.25rem 1.6rem 0.25rem 0.5rem;
  cursor: pointer;
  outline-offset: 2px;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239994A2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 8px 5px;
}

.sortering-select:hover {
  border-color: var(--graa);
}

.sortering-select:focus-visible {
  outline: 2px solid var(--aksent);
  outline-offset: 2px;
  border-color: var(--graa);
}

@media (max-width: 380px) {
  .sortering-kontroll {
    margin-left: 0;
    width: 100%;
  }
}


/* === FORSIDE === */

.forside {
  padding: var(--gap-xl) 0 var(--gap-m);
}

.forside-innhold {
  max-width: 640px;
  margin: 0 auto;
  padding-left: max(var(--gap-m), env(safe-area-inset-left));
  padding-right: max(var(--gap-m), env(safe-area-inset-right));
}

.forside-tittel {
  font-family: var(--font-tittel);
  font-size: 2rem;
  font-weight: 200;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  text-align: center;
}

.forside-undertittel {
  color: var(--graa);
  font-size: 1rem;
  margin-bottom: var(--gap-xl);
  text-align: center;
}

.forside-utvalg {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
  margin-bottom: var(--gap-s);
}

/* Spesifikk typografi for utvalgte kort. Geometri ligger i KORT-seksjonen. */
.utvalg-badge-rad {
  position: absolute;
  top: var(--gap-s);
  left: var(--gap-s);
  z-index: 2;
  display: flex;
  gap: var(--gap-s);
  align-items: center;
  flex-wrap: wrap;
}

.utvalg-badge {
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.utvalg-fremhevet-badge {
  padding: 0.25rem 0.625rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--ink);
  color: #ffd700;
}

.utvalg-innhold {
  padding: var(--gap-m) var(--gap-l);
  gap: 0.35rem;
}

.utvalg-tittel {
  font-family: var(--font-tittel);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}

.utvalg-meta {
  font-size: 0.85rem;
  color: var(--paper);
}


.se-alt-flytende {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
  padding: 0.55rem 1.4rem;
  border-radius: 100px;
  border: 1.5px solid var(--aksent);
  background: var(--aksent);
  color: var(--aksent-kontrast);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

.se-alt-flytende.vis {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.se-alt-flytende:hover {
  opacity: 0.85;
}

@media (min-width: 900px) {
  .forside {
     padding: var(--gap-xl) 0 var(--gap-s);
  }

  .forside-innhold {
    max-width: 1020px;
    padding-left: max(var(--gap-xl), env(safe-area-inset-left));
    padding-right: max(var(--gap-xl), env(safe-area-inset-right));
  }

  .forside-tittel {
    font-size: 2.5rem;
  }
}


/* === SAMTYKKE-STRIPE === */

.samtykke-stripe {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: var(--gap-s) var(--gap-m);
  padding-bottom: calc(var(--gap-s) + env(safe-area-inset-bottom));
  background: var(--flate-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  color: var(--graa);
}

.samtykke-knapp {
  font-family: var(--font-tekst);
  font-size: 0.8rem;
  background: var(--aksent);
  color: var(--aksent-kontrast);
  padding: 0.3rem 1rem;
  border-radius: var(--radius-s);
  white-space: nowrap;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.samtykke-knapp:hover {
  opacity: 0.85;
}


/* === SIDE-FOOTER === */

.side-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.1rem;
  text-align: center;
  padding: var(--gap-s) var(--gap-m);
  padding-bottom: max(var(--gap-s), env(safe-area-inset-bottom));
}

.side-footer a {
  display: inline-block;
  padding: var(--gap-s) 0.4rem;
  color: var(--graa);
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.side-footer a:hover {
  color: var(--paper);
}

.side-footer span {
  color: var(--graa);
  font-size: 0.75rem;
}


/* === BUNN-NAV — mobil (< 900px) === */

.bunn-nav {
  display: none;
}


/* === MOBILTILPASNING === */

@media (max-width: 899px) {
  /* Mobil og tablet bruker én kolonne. */
  .hoveddel,
  .forside-innhold,
  .topbar-innhold {
    max-width: 640px;
  }

  .sidestolpe {
    padding-top: var(--gap-m);
  }

  /* Kortene trenger mer bildehøyde på smale skjermer, slik at overlayet
     ikke spiser opp nesten hele motivet. */
  .kort-bilde-wrapper,
  .utvalg-bilde-wrapper,
  .kort-skeleton-bilde,
  .utvalg-kort-skeleton .kort-skeleton-bilde {
    aspect-ratio: 4 / 3;
  }

  .kort-innhold,
  .utvalg-innhold {
    max-width: 94%;
    padding: 0.5rem 0.75rem;
    gap: 2px;
    border-radius: 0 10px 0 0;
  }

  .kort-tittel {
    font-size: 1rem;
    line-height: 1.15;
  }

  .kort-meta,
  .kort-footer {
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .kort-footer {
    gap: 0.6rem;
  }

  .utvalg-tittel {
    font-size: 1.08rem;
    line-height: 1.15;
  }

  .utvalg-meta {
    font-size: 0.78rem;
    line-height: 1.25;
  }

  .hjerte-knapp {
    width: 34px;
    height: 34px;
  }

  

  /* === "X forslag" flyttes ned til linja med "Denne uka" (kun mobil) ===
     .treff-linje "løses opp" med display:contents slik at barna dens
     (telleren, tilbake-knappen og sorteringskontrollen) blir direkte
     flex-elementer i .feedkolonne og kan omorganiseres fritt med
     order/flex-basis — uten å røre selve HTML-strukturen eller JS-en som
     leser #treff-teller / #vis-alle / #uke-nav via getElementById.
     Desktop (≥900px) bruker fortsatt den opprinnelige .treff-linje-raden
     og er helt urørt. */
  .feedkolonne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: var(--gap-s);
    column-gap: var(--gap-s);
    padding-top: var(--gap-m);
  }

  .treff-linje {
    display: contents;
  }

  /* Sorter får hele sin egen rad, høyrejustert som før. */
  .sortering-kontroll {
    order: 1;
    flex-basis: 100%;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-end;
  }

  /* Neste rad: telleren til venstre, "Denne uka"/"← alle arrangementer"
     til høyre — de to er aldri synlige samtidig, så de kan dele plass.
     padding/margin nullstilles slik at teksten linjer opp med telleren
     (ellers gir .uke-nav sin egen padding-top en liten forskyvning). */
  #treff-teller {
    order: 2;
  }

  #vis-alle,
  #uke-nav {
    order: 3;
    padding-top: 0;
    margin-top: 0;
  }

  #lagret-info,
  #feed {
    order: 4;
    flex-basis: 100%;
  }


  /* === Filter-knapp: skjuler filtrene bak "Filter" på mobil ===
     Filtrene (.filter-innhold) er skjult som default og vises kun når
     #filter-toggle-knapp er trykket (se initFilterToggle() i js/main.js,
     som setter/fjerner .filter-vis på .sidestolpe). Desktop (≥900px) har
     ingen slik regel, så .filter-toggle-knapp forblir display:none der
     (fra base-stilen) og .filter-innhold vises alltid. */
  .filter-toggle-knapp {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.9rem;
    min-height: 40px;
    border: 1.5px solid var(--flate-2);
    border-radius: 100px;
    font-family: var(--font-tekst);
    font-size: 0.8rem;
    color: var(--paper);
    margin-bottom: var(--gap-s);
  }

  .filter-toggle-pil {
    transition: transform 0.15s;
  }

  .sidestolpe.filter-vis .filter-toggle-pil {
    transform: rotate(180deg);
  }

  .sidestolpe:not(.filter-vis) .filter-innhold {
    display: none;
  }

  /* Fast, lys og safe-area-riktig mobilfooter. */
  .bunn-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    height: calc(var(--bunn-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--hvit);
    border-top: 1px solid var(--flate-2);
    box-shadow: 0 -6px 20px rgba(30, 12, 20, 0.06);
  }

  .bunn-nav-knapp {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--graa);
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
  }

  .bunn-nav-knapp:focus-visible {
    outline: 2px solid var(--aksent-tekst);
    outline-offset: -3px;
  }

  .bunn-nav-ikon {
    width: 22px;
    height: 22px;
  }

  .bunn-nav-knapp.aktiv {
    color: var(--aksent-tekst);
  }

  .logo-lockup {
  margin-right: auto;
}

.topptekst {
  gap: var(--gap-s);
}

.tagline {
  display: none;
}


  /* Safe-area håndteres av bunn-nav, ikke av side-footeren under den. */
  .side-footer {
    padding-bottom: var(--gap-m);
  }
}

@media (max-width: 520px) {
  .sortering-kontroll {
    width: 100%;
    margin-left: 0;
  }

  .sortering-select {
    flex: 1;
    min-width: 0;
  }

  .forside-tittel {
    font-size: 1.85rem;
  }

  .forside-undertittel {
    margin-bottom: var(--gap-l);
  }
}

@media (max-width: 899px) {
  .kort-innhold,
  .utvalg-innhold {
    width: 82%;
    max-width: none;
    height: 75px;

    padding: 0.5rem 0.75rem;
    gap: 2px;
    border-radius: 0 10px 0 0;
  }
}


  .kort-tittel,
  .utvalg-tittel {
    font-size: 0.96rem;
  }


@media (max-width: 899px) and (orientation: landscape) and (max-height: 500px) {
  .bunn-nav-knapp span {
    display: none;
  }

  .kort-bilde-wrapper,
  .utvalg-bilde-wrapper {
    aspect-ratio: 16 / 7;
  }
}
@media (max-width: 899px) {
  .logo-hovedlogo {
    height: 40px;
    max-width: 135px;
  }
}