/*
 * MJF Fotogalleri — bare det galleriet trenger.
 *
 * ⚠️ UTTRYKKET LIGGER I mjf.css, som er delt med MJ-bladet og
 * nyhetstjenesten. Her står KUN det som er særegent for et bildegalleri:
 * rutenettet, bilderuta og opplastingsfeltet.
 *
 * ⚠️ mjf.css er IKKE lenger bit for bit lik nyhetstjenestens (05.10.2026):
 * de smale kolonnene (`.side--smal`, 72ch, 62ch) er fjernet her, etter
 * grunnregelen over `.side`. Kopier aldri en søsterfil over denne uten å
 * beholde det.
 *
 * Alt her bygger på variablene i mjf.css — ingen nye farger, ingen nye
 * fonter. Trenger noe en farge som ikke finnes der, er det et tegn på at
 * enten fargen eller komponenten er feil.
 *
 * ⚠️ Galleriets miniatyrer heter `.bildekort`, ikke `.kort`. `.kort` er
 * mjf.css sitt hvite panel, og to ting med samme navn i samme stilark er en
 * felle som utløses den dagen noen endrer den ene.
 */

/* --- Driftsvarsel --------------------------------------------------------
 *
 * Bare synlig når noe er galt med oppsettet. Skal skurre mot resten.
 */

.drift {
  max-width: var(--brei);
  margin: 0 auto;
  padding: .6rem 1.25rem;
  background: #fff4d6;
  color: #5a4300;
  font-size: .85rem;
  border-bottom: 1px solid #e8d9a8;
}

/* --- Rutenettet ----------------------------------------------------------
 *
 * auto-fill med minmax gir to kort på en telefon og flere når det er plass,
 * uten et eneste knekkpunkt å vedlikeholde.
 */

.rutenett {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .8rem;
}

.bildekort a {
  display: block;
  text-decoration: none;
  color: var(--tekst);
  background: var(--flate);
  border: 1px solid var(--ramme);
  height: 100%;
}

.bildekort a:hover { border-color: var(--mjf); }

.bildekort a:focus-visible {
  outline: 2px solid var(--mjf);
  outline-offset: 2px;
}

.bildekort img {
  display: block;
  width: 100%;
  /*
   * ⚠️ `height: auto` ER PÅKREVD, ikke ryddighet.
   *
   * <img> har width- og height-attributter så nettleseren kan sette av
   * plassen før bildet er lastet. Men et height-attributt gir en BRUKT høyde,
   * og `aspect-ratio` gjelder bare når én av dimensjonene er `auto` — uten
   * denne linja blir attributtet stående, beskjæringen slår aldri inn, og
   * kortene får hver sin høyde etter bildets eget format.
   *
   * Målt i nettleseren, ikke lest ut av koden: attributt 400×225 ga brukt
   * høyde 225 px der 4:3 skulle gitt 123.
   */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bakgrunn);
}

.bildekort-tittel {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: .5rem .6rem .15rem;
  font-family: var(--overskrift);
  font-size: 1rem;
  line-height: 1.25;
  /* Alltid plass til to linjer, så kortene i en rad blir like høye. */
  min-height: calc(2 * 1.25em + .65rem);
}

.bildekort-type {
  display: block;
  padding: 0 .6rem .55rem;
  font-size: .8rem;
  color: var(--dempet);
}

.antall { color: var(--dempet); font-size: .88rem; margin: 0 0 .9rem; }

.tomt { text-align: center; padding: 3rem 1rem; color: var(--dempet); }
.tomt h1 { color: var(--tekst); }

/* --- Ett bilde ----------------------------------------------------------- */

.ett { display: grid; gap: 1.25rem; }

.bilderute {
  margin: 0;
  background: #12171a;
  overflow: hidden;
}

.bilderute img {
  display: block;
  width: 100%;
  height: auto;
  /* Hele bildet skal få plass uten å skrolle på en telefon i landskap. */
  max-height: 78vh;
  object-fit: contain;
  cursor: zoom-in;
}

.bilderute img.zoomet { max-height: none; cursor: zoom-out; }

.fotograf { margin: 0 0 .6rem; color: var(--dempet); }
.beskrivelse { margin: 0 0 1rem; }

.exif {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .9rem;
  margin: 0 0 1rem;
  font-size: .88rem;
}

.exif dt { color: var(--dempet); }
.exif dd { margin: 0; font-family: var(--tallfont); font-size: .85rem; }

.blaing {
  display: flex;
  gap: .5rem;
  justify-content: space-between;
  margin-top: 1.5rem;
  border-top: 1px solid var(--ramme-svak);
  padding-top: .75rem;
}

.blaing a, .blaing .av {
  padding: .5rem .3rem;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.blaing .av { color: var(--dempet); opacity: .5; }

@media (min-width: 860px) {
  .ett { grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); align-items: start; }
}

/* --- Opplasting ---------------------------------------------------------- */

.filvelger input[type="file"] {
  font: inherit;
  padding: .8rem;
  border: 2px dashed var(--ramme);
  background: var(--flate);
  width: 100%;
}

.kategorier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .9rem;
}

.avkryssing {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  margin-bottom: 1rem;
}

.avkryssing input { width: 1.15rem; height: 1.15rem; flex: none; }

/* --- Innlogging ---------------------------------------------------------- */

.vippsknapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 48px;
  padding: .7rem 1.2rem;
  /* Vipps' egen oransje. Den ene fargen som har lov å bryte paletten, fordi
     knappen skal kjennes igjen som Vipps og ikke som vår. */
  background: #ff5b24;
  color: #fff;
  border: 1px solid #ff5b24;
  font: inherit;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
}

.vippsknapp:hover { background: #e94e1b; border-color: #e94e1b; }

/* --- Administrasjon ------------------------------------------------------ */

.admin-rad {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: center;
  padding: .7rem 0;
  border-bottom: 1px solid var(--ramme-svak);
}

.admin-rad img {
  width: 90px;
  height: 68px;
  object-fit: cover;
  background: var(--bakgrunn);
  display: block;
}

.admin-rad .skjult-merke { color: var(--feil-kant); font-weight: 600; font-size: .85rem; }

@media (max-width: 560px) {
  .admin-rad { grid-template-columns: 70px minmax(0, 1fr); }
  .admin-rad img { width: 70px; height: 53px; }
  .admin-rad form { grid-column: 1 / -1; }
}

/* --- Filterrad -----------------------------------------------------------
 *
 * mjf.css sin `.filtre` er bygget for et <details>/<summary>-panel, som er
 * riktig der lista er lang. Her er det fire nedtrekk som skal stå framme, så
 * de får sin egen rad — men bruker `.felt` til selve feltene, så de ser ut som
 * skjemafelter overalt ellers i huset.
 */

.filterrad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .75rem;
  align-items: end;
  margin: 0 0 1.25rem;
}

.filterrad .felt { margin-bottom: 0; }

.filterknapp { display: flex; gap: .5rem; align-items: center; }

/* --- Skjema --------------------------------------------------------------- */

/* Feltene har egen bredde, teksten har det ikke: hjelpetekstene og
   krediteringslinja bruker hele .side (grunnregelen over .side i mjf.css).
   ⚠️ `display: block`, ellers legger en hjelpetekst seg ved SIDEN AV et felt
   som ikke lenger fyller linja. */
.skjema .felt > input,
.skjema .felt > textarea { display: block; max-width: 40rem; }
.skjema .kategorier,
.skjema .avkryssing { max-width: 40rem; }
.skjema textarea {
  width: 100%;
  font: inherit;
  padding: .45rem .55rem;
  border: 1px solid var(--ramme);
  background: var(--flate);
  color: var(--tekst);
}