/* 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/components/topbar.js for åpne/lukke/tastatur, og «Følger»/«Lagret»-
   koblingen til de eksisterende knappene over. Ikonet er bilder/Vector.svg,
   inlinet i topbar.js 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 js/components/topbar.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: 8px;
  font-size: 0.8rem;
  color: var(--graa);
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  outline-offset: 2px;
}

.kategori-chip {
  gap: 0.4rem;
  --kort-farge: var(--aksent);
}

.kategori-chip[data-verdi="musikk"] { --kort-farge: var(--musikk); --kort-tekst: var(--musikk-tekst); }
.kategori-chip[data-verdi="klubb"]  { --kort-farge: var(--klubb);  --kort-tekst: var(--klubb-tekst); }
.kategori-chip[data-verdi="pafunn"] { --kort-farge: var(--pafunn); --kort-tekst: var(--pafunn-tekst); }

.kategori-filter-ikon {
  display: block;
  width: auto;
  height: 14px;
}

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

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

.kategori-chip.aktiv {
  background: var(--kort-farge);
  border-color: var(--kort-farge);
  color: var(--kort-tekst, 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;
}


/* === PRISFILTER: histogram + slider med to tommeler ===
   To range-inputs ligger oppå hverandre. Selve sporene er usynlige og
   slipper gjennom pekeren (pointer-events: none) — kun tommelene fanger
   klikk/dra, slik at begge kan nås. Se js/presentation/prisfilter.js. */

.pris-filter {
  --pris-tommel: 20px;
  display: flex;
  flex-direction: column;
  max-width: 320px;
}

.pris-histogram {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 48px;
  /* Stolpene skal flukte med sporet, som starter/slutter ved tommelens midtpunkt */
  padding: 0 calc(var(--pris-tommel) / 2);
}

.pris-stolpe {
  flex: 1;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--flate-2);
  transition: height 0.2s ease, background 0.15s;
}

.pris-stolpe.innenfor {
  background: var(--aksent);
}

.pris-stolpe.tom {
  height: 2px;
}

.pris-slider {
  position: relative;
  height: var(--pris-tommel);
  margin-top: 2px;
}

.pris-spor {
  position: absolute;
  top: 50%;
  left: calc(var(--pris-tommel) / 2);
  right: calc(var(--pris-tommel) / 2);
  height: 3px;
  transform: translateY(-50%);
  border-radius: 3px;
  background: var(--flate-2);
}

.pris-spor-fyll {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  background: var(--paper);
}

.pris-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.pris-range.foran {
  z-index: 1;
}

.pris-range::-webkit-slider-runnable-track {
  background: none;
  border: none;
}

.pris-range::-moz-range-track {
  background: none;
  border: none;
}

.pris-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--pris-tommel);
  height: var(--pris-tommel);
  border-radius: 50%;
  background: var(--hvit);
  border: 1.5px solid var(--graa);
  box-shadow: 0 1px 4px rgba(30, 12, 20, 0.18);
  cursor: grab;
  pointer-events: auto;
  transition: transform 0.1s;
}

.pris-range::-moz-range-thumb {
  width: var(--pris-tommel);
  height: var(--pris-tommel);
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--hvit);
  border: 1.5px solid var(--graa);
  box-shadow: 0 1px 4px rgba(30, 12, 20, 0.18);
  cursor: grab;
  pointer-events: auto;
}

.pris-range:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.1);
}

.pris-range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--aksent);
  outline-offset: 2px;
}

.pris-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--aksent);
  outline-offset: 2px;
}

.pris-akse {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--graa);
  margin-top: 2px;
}

.pris-rad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  margin-top: var(--gap-s);
}

.pris-verdi {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--paper);
}

/* 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: 60px;
}

.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 {
  --kort-farge: var(--aksent);
  --kort-tekst: var(--aksent-kontrast);
  position: relative;
  background: var(--kort-farge);
  border: 8px solid var(--kort-farge);
  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[data-kategori="musikk"],
.utvalg-kort[data-kategori="musikk"] {
  --kort-farge: var(--musikk);
  --kort-tekst: var(--musikk-tekst);
}

.kort[data-kategori="klubb"],
.utvalg-kort[data-kategori="klubb"] {
  --kort-farge: var(--klubb);
  --kort-tekst: var(--klubb-tekst);
}

.kort[data-kategori="pafunn"],
.utvalg-kort[data-kategori="pafunn"] {
  --kort-farge: var(--pafunn);
  --kort-tekst: var(--pafunn-tekst);
}

.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(--kort-farge);
  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 === */

.kategori-piktogram-event {
  position: absolute;
  top: var(--gap-s);
  left: var(--gap-s);
  z-index: 2;
  display: block;
  width: auto;
  height: 28px;
}

.gjentas-badge {
  position: absolute;
  bottom: 68px;
  left: var(--gap-s);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--kort-farge);
  color: var(--hvit);
  font-size: 0.73rem;
  font-weight: 500;
  pointer-events: none;
}

.gjentas-badge span {
  line-height: 1;
  transform: translateY(1px);
}

.gjentas-badge-ikon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}


/* === 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: color-mix(in srgb, var(--kort-farge) 55%, var(--svart) 45%);
}


/* === KORTINNHOLD === */

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

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

  background: var(--kort-farge);
  --kort-tekst: #FFFCF7;
  color: var(--kort-tekst);
  padding: var(--gap-s) var(--gap-m);

  border-top-right-radius: 5px;

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

  overflow: hidden;
}

.kort-innhold > *,
.utvalg-innhold > * {
  position: relative;
  top: 4px;
}

.kort-innhold {
  width: 55%;
}

.utvalg-innhold {
  width: 38%;
}

.kort-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



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

.kort-tittel,
.utvalg-tittel {
  font-family: var(--font-tittel);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.25;
}

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

.sted {
  min-width: 0;
}

.kort-meta-tekst {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.avstand {
  color: inherit;
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 600;
}

/* 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(--kort-tekst);
}

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

.pris-gratis {
  font-weight: 500;
}
#pris-gratis {
  align-self: flex-start;
  width: fit-content;
  padding: 0.3rem 0.8rem;
}

/* === 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 {
  --kort-farge: var(--aksent);
  --kort-tekst: var(--aksent-kontrast);
  background: var(--hvit);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  border: 4px solid var(--kort-farge);
  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[data-kategori="musikk"] .modal-container {
  --kort-farge: var(--musikk);
  --kort-tekst: var(--musikk-tekst);
}

.modal[data-kategori="klubb"] .modal-container {
  --kort-farge: var(--klubb);
  --kort-tekst: var(--klubb-tekst);
}

.modal[data-kategori="pafunn"] .modal-container {
  --kort-farge: var(--pafunn);
  --kort-tekst: var(--pafunn-tekst);
}

.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);
}

/* Flytende lukkeknapp — kun bunnark-visningen på mobil (< 640px, se
   «MODAL DESKTOP» lenger ned, samme brytpunkt som dra-håndtaket og
   dra-for-å-lukke-gesten i modal.js bruker). Ligger utenfor
   .modal-container (position: fixed relativt til selve viewporten, ikke
   det scrollbare kortet) — står derfor fast nederst til høyre uansett
   hvor langt man har scrollet i beskrivelsen, så tommelen alltid når den
   uten å måtte opp til krysset i det øvre hjørnet. */
.modal-lukk-flytende {
  position: fixed;
  right: calc(var(--gap-m) + env(safe-area-inset-right));
  bottom: calc(var(--gap-l) + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--hvit);
  background: color-mix(in srgb, var(--svart) 55%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 2;
  transition: background 0.15s;
}

.modal-lukk-flytende:hover,
.modal-lukk-flytende:active {
  background: color-mix(in srgb, var(--svart) 70%, transparent);
}

/* 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;
  background: var(--ink);
  color: var(--merke-tekst);
}

.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 {
  /* Mørknet mot svart, samme teknikk som --aksent-tekst, slik at teksten
     leser klart på den lyse modal-flaten uansett kategorifarge. */
  border-color: color-mix(in srgb, var(--kort-farge) 55%, var(--svart) 45%);
  color: color-mix(in srgb, var(--kort-farge) 55%, var(--svart) 45%);
}

/* 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(--kort-farge);
}

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

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

/* Teksten lagres med linjeskift fra admin sin textarea — uten dette slår
   nettleserens standard whitespace-håndtering dem sammen til én lang
   paragraf. pre-line bevarer avsnitt/linjeskift uten å bevare dobbel
   mellomrom o.l. (slik pre/pre-wrap ville gjort). Skopet til p-elementet
   spesifikt — .modal-beskrivelse gjenbrukes også som klasse på selve
   <textarea>-en i send-inn/index.html, og den skal fortsatt ha sin
   vanlige (naturlige) whitespace-oppførsel mens man skriver. */
p.modal-beskrivelse {
  white-space: pre-line;
}

.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(--kort-farge);
  color: var(--kort-tekst, 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;
}

/* === UTFORSK PÅ KART === */

.kart-knapp {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border: 1.5px solid var(--flate-2);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--paper);
  white-space: nowrap;
  transition: border-color 0.15s;
}

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

body.kart-aapen {
  overflow: hidden;
}

/* Under modalen (z-index 100), over bunn-nav og topbar */
.kart-visning {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  background: var(--hvit);
}

.kart-visning-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: var(--gap-m);
  padding-top: calc(var(--gap-m) + env(safe-area-inset-top));
  border-bottom: 1px solid var(--flate-2);
}

.kart-visning-tittel {
  font-family: var(--font-tittel);
  font-size: 1.1rem;
  font-weight: 700;
}

.kart-visning-info {
  font-size: 0.8rem;
  color: var(--graa);
}

.kart-visning-lukk {
  font-size: 1.75rem;
  line-height: 1;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 100px;
  color: var(--paper);
}

.kart-visning-lukk:hover {
  background: var(--flate-2);
}

.kart-visning-flate {
  flex: 1;
  isolation: isolate;
  background: var(--flate-2);
}

/* Stedspinne: sirkel i kategorifargen, antall eventer inni */
.kart-pin {
  background: none;
  border: none;
}

.kart-pin-sirkel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--svart);
  font-family: var(--font-tittel);
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Leaflet setter egen skrift og marg i popupen — bruk sidens */
.kart-visning-flate.leaflet-container {
  font-family: inherit;
}

.kart-visning-flate .leaflet-popup-content {
  margin: 0.75rem;
}

/* Ekstra klasse slår Leaflets «.leaflet-popup-content p { margin: 17px 0 }» */
.kart-popup .kart-popup-sted {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 0.4rem;
}

.kart-popup-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kart-popup-event {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.4rem 0.5rem 0.4rem 0.6rem;
  border-left: 3px solid var(--kort-farge);
  border-radius: var(--radius-s);
  text-align: left;
  font-family: inherit;
}

.kart-popup-event:hover {
  background: var(--flate-2);
}

.kart-popup-event.kategori-musikk { --kort-farge: var(--musikk); }
.kart-popup-event.kategori-klubb  { --kort-farge: var(--klubb); }
.kart-popup-event.kategori-pafunn { --kort-farge: var(--pafunn); }

.kart-popup-tittel {
  font-size: 0.85rem;
  color: var(--svart);
}

.kart-popup-tid {
  font-size: 0.75rem;
  color: var(--graa);
}

/* Kart i detaljvisningen — Leaflet tegner inn i denne */
.modal-kart {
  height: 200px;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--flate-2);
  isolation: isolate; /* holder Leaflets z-index-er inne i kartet */
}


/* === 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;
  }

  .modal-lukk-flytende {
    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;
  /* Samme årsak som .modal-beskrivelse — kuratortekst kommer også fra en
     textarea i admin og kan ha egne linjeskift. */
  white-space: pre-line;
}


/* === 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);
}

.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-meta {
  font-size: 0.85rem;
  color: var(--kort-tekst);
}


.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;
}

/* To likeverdige valg (Tillat/Nei takk) — samme størrelse/padding som
   .samtykke-knapp, kun fargen skiller dem, se oppgavens DEL 5. */
.samtykke-knapp-rad {
  display: flex;
  gap: var(--gap-s);
  flex-shrink: 0;
}

.samtykke-knapp--sekundaer {
  font-family: var(--font-tekst);
  font-size: 0.8rem;
  background: transparent;
  color: var(--graa);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.3rem 1rem;
  border-radius: var(--radius-s);
  white-space: nowrap;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

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

/* === PERSONVERN: STATISTIKK PÅ/AV === */

.personvern-statistikk-knapp {
  font-family: var(--font-tekst);
  font-size: 0.85rem;
  background: var(--aksent);
  color: var(--aksent-kontrast);
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-s);
  margin-top: var(--gap-s);
}

.personvern-statistikk-knapp[aria-pressed="false"] {
  background: transparent;
  color: var(--graa);
  border: 1px solid rgba(255, 255, 255, 0.2);
}


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

.side-footer {
    background: var(--blaa);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 28px 16px;
  text-align: center;
}

.side-footer a {
  display: inline-block;
  padding: var(--gap-s) 0.4rem;
  color: var(--kort-tekst);
  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;
}


/* === SEND INN (send-inn/index.html) ===
   Skjemaet gjenbruker eksisterende kort-/modal-klasser (.modal-container,
   .modal-bilde-wrapper, .modal-body, .modal-tittel, .modal-beskrivelse,
   .modal-faktarad/.faktarad-*, .chip/.kategori-chip, .knapp/.knapp-primaer)
   for at siden skal se ut som selve eventkortet. Denne seksjonen inneholder
   KUN det som ikke fantes fra før: selve input/textarea/select-feltene,
   bildeopplasting, tegnteller, honeypot og de to boksene under kortet som
   bevisst ser annerledes ut (bonusboks og "om deg"). */

.send-inn-innhold {
  max-width: 640px;
}

/* Kategorifargen settes på selve <form>-en (felles forelder for kortet OG
   send-knappen under), slik at BÅDE kortkanten og den fargede knappen får
   riktig farge — .modal[data-kategori] i den ekte modalen trenger ikke dette
   siden knappen der ligger inni selve modal-container. */
#innsending-skjema { --kort-farge: var(--aksent); --kort-tekst: var(--aksent-kontrast); }
#innsending-skjema[data-kategori="musikk"] { --kort-farge: var(--musikk); --kort-tekst: var(--musikk-tekst); }
#innsending-skjema[data-kategori="klubb"]  { --kort-farge: var(--klubb);  --kort-tekst: var(--klubb-tekst); }
#innsending-skjema[data-kategori="pafunn"] { --kort-farge: var(--pafunn); --kort-tekst: var(--pafunn-tekst); }

/* .modal-container setter --kort-farge: var(--aksent) på seg selv (for den
   ekte modalen, som ikke har noen fargesatt forelder) — det ville stjålet
   fargen tilbake her, så vi ber den heller arve fra <form> over. */
.send-inn-kort {
  --kort-farge: inherit;
}

/* .modal-container er designet som en SKJULT bunnark-modal som glir inn når
   en .modal.aktiv-forelder finnes (se MODAL/MODAL DESKTOP lenger opp). Uten
   den forelderen her blir kortet stående dyttet ned (transform) og med en
   intern scroll-boks (max-height) — begge deler nulles ut, siden dette
   kortet skal ligge rett i sidens vanlige flyt. */
.send-inn-kort {
  transform: none;
  transition: none;
  max-height: none;
  overflow-y: visible;
  max-width: none;
}

.send-inn-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.send-inn-bilde-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-inn-bilde-placeholder {
  color: var(--graa);
  font-size: 0.85rem;
}

.send-inn-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--graa);
  margin-bottom: 0.3rem;
}

.send-inn-privat-merke {
  text-transform: none;
  letter-spacing: normal;
  font-style: italic;
  color: var(--graa);
}

.send-inn-felt-gruppe {
  margin-bottom: var(--gap-m);
}

.send-inn-input,
.send-inn-textarea,
.send-inn-select {
  display: block;
  width: 100%;
  background: var(--flate-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-s);
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  color: var(--paper);
  transition: border-color 0.15s;
}

.send-inn-input:focus,
.send-inn-textarea:focus,
.send-inn-select:focus {
  outline: none;
  border-color: var(--kort-farge, var(--aksent));
}

.send-inn-textarea {
  resize: vertical;
  min-height: 4.5rem;
}

/* Tittel-feltet skal se ut som .modal-tittel (stor overskrift), ikke som et
   vanlig inputfelt — men beholder en diskré bunnlinje som viser at det kan
   redigeres. */
.send-inn-input--tittel {
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--flate-2);
  border-radius: 0;
  padding: 0.2rem 0;
}
.send-inn-input--tittel:focus {
  border-bottom-color: var(--kort-farge, var(--aksent));
}

.send-inn-fil {
  display: block;
  width: 100%;
  font-size: 0.85rem;
  color: var(--graa);
  margin-bottom: 0.4rem;
}

.send-inn-kategori-velger {
  display: flex;
  gap: var(--gap-s);
  flex-wrap: wrap;
}

.send-inn-faktarad {
  align-items: end;
}
.send-inn-faktarad .faktarad-verdi {
  width: auto;
  min-width: 0;
}

.send-inn-gjentas-rad {
  display: flex;
  gap: var(--gap-s);
  flex-wrap: wrap;
}
.send-inn-gjentas-rad .send-inn-select {
  width: auto;
  flex: 1;
  min-width: 8rem;
}

.send-inn-pris-velger {
  display: flex;
  gap: var(--gap-m);
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}

.send-inn-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

.send-inn-teller {
  font-size: 0.75rem;
  color: var(--graa);
  text-align: right;
  margin-top: 0.2rem;
}

.send-inn-feil {
  font-size: 0.8rem;
  color: #D9342B;
  margin-top: 0.3rem;
  min-height: 0;
}
.send-inn-feil:empty {
  display: none;
}
.send-inn-feil--generelt {
  margin-top: var(--gap-s);
  font-size: 0.85rem;
}

.send-inn-hjelpetekst {
  font-size: 0.78rem;
  color: var(--graa);
  margin-top: -0.4rem;
  margin-bottom: 0.6rem;
}

.send-inn-checkbox-rad {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.88rem;
  margin: var(--gap-s) 0;
  cursor: pointer;
}
.send-inn-checkbox-rad input {
  margin-top: 0.2rem;
  cursor: pointer;
}

.send-inn-send-knapp {
  width: 100%;
  margin-top: var(--gap-s);
}

/* "Om deg" — skal bevisst se annerledes ut enn selve eventkortet (stiplet
   kant, ingen kategorifarge). */
.send-inn-omdeg-boks {
  margin-top: var(--gap-l);
  padding: var(--gap-m) var(--gap-l);
  border: 1.5px dashed var(--flate-2);
  border-radius: var(--radius-m);
}

.send-inn-omdeg-tittel {
  font-family: var(--font-tittel);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--gap-m);
}

.send-inn-bekreftelse {
  max-width: 520px;
  margin: var(--gap-xl) auto 0;
  padding: var(--gap-xl) var(--gap-l);
  text-align: center;
  border: 2px solid var(--kort-farge, var(--aksent));
  border-radius: var(--radius-m);
}

.send-inn-bekreftelse-tekst {
  font-size: 1.05rem;
  margin-bottom: var(--gap-m);
}

/* === OVERSIKT — flere events i samme økt ===
   Grid med auto-fill: wrapper naturlig til én kolonne på mobil (2×minmax
   220px > de ~340px som er igjen av 375px-skjermen etter padding), og
   skalerer opp til 2-3 kolonner på bredere skjermer — uten egne
   media queries. */
.send-inn-eventgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap-m);
  margin-top: var(--gap-l);
}

.send-inn-eventkort {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--flate-2);
  border: 1.5px solid var(--flate-2);
  border-radius: var(--radius-m);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
  text-align: left;
}
.send-inn-eventkort:hover {
  border-color: var(--graa);
}
.send-inn-eventkort--sendt {
  opacity: 0.65;
  cursor: default;
}

.send-inn-eventkort-bilde-wrapper {
  aspect-ratio: 4 / 3;
  background: var(--hvit);
  overflow: hidden;
}
.send-inn-eventkort-bilde-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.send-inn-eventkort-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--graa);
  font-size: 0.78rem;
}

.send-inn-eventkort-innhold {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--gap-s) var(--gap-m);
  flex: 1;
}
.send-inn-eventkort-tittel {
  font-family: var(--font-tittel);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
}
.send-inn-eventkort-meta,
.send-inn-eventkort-sted {
  font-size: 0.8rem;
  color: var(--graa);
}

.send-inn-eventkort-status {
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0.15rem var(--gap-s);
  border-radius: var(--radius-s);
  font-size: 0.72rem;
}
.send-inn-eventkort-status--feilet { background: rgba(217, 52, 43, 0.15); color: #D9342B; }
.send-inn-eventkort-status--sendt  { background: rgba(140, 177, 244, 0.15); color: var(--blaa); }

.send-inn-eventkort-fjern {
  position: absolute;
  top: var(--gap-s);
  right: var(--gap-s);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.send-inn-eventkort-fjern:hover {
  background: rgba(0, 0, 0, 0.8);
}

.send-inn-legg-til-kort {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-s);
  min-height: 180px;
  background: none;
  border: 1.5px dashed var(--flate-2);
  border-radius: var(--radius-m);
  color: var(--graa);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.send-inn-legg-til-kort:hover {
  border-color: var(--graa);
  color: var(--paper);
}
.send-inn-legg-til-plus {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
}

.send-inn-tilbake-knapp {
  margin-bottom: var(--gap-m);
}


/* === 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-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: auto;
    min-height: 60px;
    padding: 0.5rem 0.75rem;
    gap: 2px;
    border-radius: 0 10px 0 0;
  }
}


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


@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;
  }
}
/* «utforsk på kart» deler rad med Sorter på mobil (se display:contents-
   oppsettet for .treff-linje over) — knappen til venstre, Sorter fyller resten. */
@media (max-width: 899px) {
  .kart-knapp {
    order: 1;
  }

  /* Basis = raden minus plass til kartknappen, så telleren fortsatt
     brytes ned til linja med «Denne uka». */
  .sortering-kontroll {
    flex: 1 0 calc(100% - 12rem);
    width: auto;
  }
}