/* public_html/c/galleri.css — bare det som er unikt for bildetavla paa
   /galleri. Farger, knapper, modaler og sidepanelet kommer fra stil.css, saa
   galleriet ikke kan drifte fra resten av flaten.

   Alt her er prefikset gx-. Klassen .galleri finnes fra foer i kort.js
   (fullskjermbildene i annonsekortene) og maa ikke roeres.

   Formen er Pinterests: ingen overskrift, ingen ingress — rutene starter
   oeverst og fyller bredden. Det eneste som staar over dem er fanene, og de
   ruller med. To handlinger er loeftet fram foran alt annet: SEND (skriv
   nederst, faa et bilde) og LAGRE (hjertet paa ruta). */

/* Tavla tar HELE bredden — ingen midtstilt spalte. Samtaletraaden er 48rem,
   som er riktig for tekst og helt feil for et rutenett; en tavle som stopper
   midt paa skjermen ser ikke ut som en tavle. (eier 2026-07-31) */
html[data-flate=galleri] .inner{max-width:none;padding:0 0 6px;gap:0}
html[data-flate=galleri] .traad{padding-inline:max(12px,var(--trygg-venstre)) max(12px,var(--trygg-hoyre))}
/* Ut- og inntoningene i topp og bunn hoerer til en samtale, der teksten skal
   gli under skrivefeltet. Paa en bildetavle legger de bare en graa slore over
   nederste rad. Begge av her (eier 2026-07-31); chatten beholder sine. */
html[data-flate=galleri] .traad-omslag::before,
html[data-flate=galleri] .traad-omslag::after{display:none}

/* Fanene foelger med opp naar du ruller, som Pinterests egen topprad. */
.gx-topp{position:sticky;top:0;z-index:6;padding:10px 2px;background:var(--flate)}
.gx-faner{display:flex;gap:6px}
.gx-fane{min-height:38px;padding-inline:16px;border:none;background:none;
  border-radius:9999px;font-size:14.5px;font-weight:600;color:var(--tekst-2);cursor:pointer}
.gx-fane:hover{background:var(--flate-2);color:var(--tekst)}
.gx-fane.valgt{background:var(--fyll-bg);color:var(--fyll-tx)}

/* ── Tavla ────────────────────────────────────────────────────────────────
   Kolonner, ikke rutenett: en Pinterest-tavle skal ha ruter i ulik hoeyde
   uten hull, og det er nettopp det column-count gjoer. CSS-grid kan ikke
   (masonry er ikke i noen nettleser ennaa), og et JS-oppsett ville maattet
   maale hver rute paa nytt ved hver endring av bredden.

   Bredden styres av column-width og IKKE av et fast antall kolonner: da har
   ruta omtrent samme stoerrelse uansett skjerm, og antallet foelger etter —
   akkurat slik forbildet gjoer det. Faste kolonnetall ga enten frimerker paa
   bred skjerm eller plakater paa smal. 232 px er forbildets egen rutebredde.
   Vil du ha dem stoerre eller mindre, er det ETT tall aa endre her.
   (eier 2026-07-31) */
.gx-tavle{column-width:232px;column-gap:14px}
/* Paa mobil ville 232 px gitt én kolonne. To er riktig der. */
@media(max-width:700px){.gx-tavle{column-width:auto;column-count:2;column-gap:10px}}

.gx-rute{position:relative;break-inside:avoid;margin:0 0 12px;border-radius:16px;
  overflow:hidden;background:var(--flate-2)}
@media(max-width:700px){.gx-rute{margin-bottom:8px;border-radius:14px}}
.gx-lenke{display:block;position:relative;line-height:0;color:inherit}
.gx-bilde{display:block;width:100%;height:auto;
  /* --f er den dominerende fargen i bildet. Ruta faar den som bakgrunn mens
     bildet laster, saa tavla fylles med farge i stedet for graa hull. */
  background:var(--f,var(--flate-3))}

/* Ulik hoeyde per rute. Det er staggeringen som gjoer at dette leses som en
   tavle og ikke som et rutenett — og bildene vaare er alle 3:4 fra kilden, saa
   variasjonen finnes ikke av seg selv. data-h settes fra bildets kode (se
   g_forhold() i galleri.php og forhold() i galleri.js), saa samme bilde har
   alltid samme hoeyde og tavla hopper ikke ved omlasting.
   Bildet dekker ruta; hele bildet uten beskjaering er ett klikk unna. */
.gx-rute[data-h] .gx-bilde{height:auto;object-fit:cover}
.gx-rute[data-h="0"] .gx-bilde{aspect-ratio:1/1}
.gx-rute[data-h="1"] .gx-bilde{aspect-ratio:4/5}
.gx-rute[data-h="2"] .gx-bilde{aspect-ratio:3/4}
.gx-rute[data-h="3"] .gx-bilde{aspect-ratio:5/7}
.gx-rute[data-h="4"] .gx-bilde{aspect-ratio:2/3}
/* Sloeret er Pinterests egen gest: hele ruta moerkner naar du holder over,
   saa knappene over den leses uansett hva bildet inneholder. */
.gx-slor{position:absolute;inset:0;background:#00000059;opacity:0;
  transition:opacity .12s ease;pointer-events:none}
.gx-rute:hover .gx-slor,.gx-rute:focus-within .gx-slor{opacity:1}
.gx-rute::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--kant-lett)}

/* Knappene kommer fram naar du holder over ruta, og lagre er BARE et ikon —
   en pille med tekst la seg over bildet hele tiden. Paa berooring finnes
   ingen hover, saa der staar de alltid. (eier 2026-07-31) */
.gx-hjerte,.gx-verktoy{position:absolute;z-index:2;opacity:0;transition:opacity .12s ease}
.gx-rute:hover .gx-hjerte,.gx-rute:hover .gx-verktoy,
.gx-rute:focus-within .gx-hjerte,.gx-rute:focus-within .gx-verktoy{opacity:1}
@media(hover:none){.gx-hjerte,.gx-verktoy{opacity:1}}

/* Lagre er den viktigste knappen paa sida. Den er derfor fylt, stor nok til
   aa treffe med tommelen, og staar der oeyet lander foerst. */
.gx-hjerte{top:10px;right:10px;display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding-inline:14px;border:none;border-radius:9999px;cursor:pointer;
  font-size:14px;font-weight:700;letter-spacing:-.01em;
  background:var(--fyll-bg);color:var(--fyll-tx);
  box-shadow:0 2px 10px #00000040;transition:transform .12s ease,opacity .12s ease}
.gx-hjerte:hover{background:var(--fyll-bg-h)}
.gx-hjerte:active{transform:scale(.95)}
/* Lagret: bokmerket fylles og pilla blir gjennomsiktig. Den vises fortsatt
   bare paa hover, som resten av knappene. */
.gx-rute.lagret .gx-hjerte{background:#ffffff24;color:#fff;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:none}
.gx-rute.lagret .gx-hjerte svg{fill:currentColor}
.gx-rute.lagret .gx-hjerte:hover{background:#ffffff38}
.gx-hjerte-tx{white-space:nowrap}
@media(max-width:700px){
  /* Smale ruter: bare ikonet, ellers dekker pilla halve bildet. */
  .gx-hjerte-tx{display:none}
  .gx-hjerte{padding:0;width:34px;min-height:34px;justify-content:center;top:8px;right:8px}
}

.gx-verktoy{bottom:10px;right:10px;display:flex;gap:6px}
.gx-kn2{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:9999px;cursor:pointer;color:#fff;text-decoration:none;
  background:#00000073;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gx-kn2:hover{background:#000000a6}
@media(max-width:700px){.gx-verktoy{bottom:8px;right:8px}.gx-kn2{width:32px;height:32px}}

.gx-tekst{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:26px 12px 11px;
  font-size:13px;line-height:1.35;font-weight:500;color:#fff;opacity:0;transition:opacity .12s ease;
  background:linear-gradient(transparent,#000000b3);pointer-events:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gx-rute:hover .gx-tekst,.gx-rute:focus-within .gx-tekst{opacity:1}
@media(max-width:700px){.gx-tekst{display:none}}

/* ── Ruta som venter paa et bilde ────────────────────────────────────────
   Den legges inn med én gang du trykker send, i det formatet du valgte, saa
   tavla ikke hopper naar bildet lander. gpt-image-2 bruker et par minutter,
   og et tomt felt i to minutter foeles som at ingenting skjedde. */
.gx-venter{position:relative;break-inside:avoid;margin:0 0 12px;border-radius:16px;
  overflow:hidden;background:var(--flate-2);text-align:center}
/* Ruta faar hoeyden fra formatet du valgte, FOER bildet finnes — ellers
   hopper tavla i det bildet lander. padding-top i prosent maaler mot
   bredden, som er hele trikset. */
.gx-venter::before{content:"";display:block;width:100%;padding-top:var(--rate,100%)}
.gx-venter-inn{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:16px}
.gx-venter-tx{font-size:12.5px;line-height:1.4;color:var(--tekst-3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gx-venter.feilet .gx-venter-tx{color:#e0776f}
.gx-venter-av{position:absolute;top:8px;right:8px;width:30px;height:30px;display:flex;
  align-items:center;justify-content:center;border:none;border-radius:9999px;cursor:pointer;
  background:var(--flate-3);color:var(--tekst-2)}
.gx-venter-av:hover{color:var(--tekst)}

.gx-melding{padding:26px 4px;font-size:14.5px;line-height:1.5;color:var(--tekst-3);max-width:34rem}
.gx-melding .gx-lenkeknapp{display:inline;border:none;background:none;padding:0;
  color:var(--tekst);font:inherit;text-decoration:underline;cursor:pointer}
.gx-slutt{display:flex;justify-content:center;padding:12px 0 28px}
.gx-slutt[hidden]{display:none}
.gx-slutt.laster .gx-mer{display:none}
.gx-slutt:not(.laster) .gx-spinner{display:none}
.gx-spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--kant-tung);
  border-top-color:var(--tekst-2);animation:gx-snurr .7s linear infinite}
@keyframes gx-snurr{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.gx-spinner{animation-duration:2s}}

/* ── Skrivefeltet: her lages bildene ─────────────────────────────────────
   Samme boks som i chatten, men den er sidas hovedhandling her og er derfor
   loeftet: bredere ramme, tydeligere sendeknapp, og formatvalget rett over.
   Mikrofonen er skjult — den ville sendt deg til samtaleflaten. */
html[data-flate=galleri] #mik{display:none}
html[data-flate=galleri] .komp-inner{max-width:52rem}
html[data-flate=galleri] .boks{border-color:var(--kant-tung)}
html[data-flate=galleri] .send:not(:disabled){background:var(--fyll-bg);color:var(--fyll-tx)}
/* Skrivefeltet skal ikke spise mer av skjermen enn noedvendig — tavla er
   det man er her for. */
html[data-flate=galleri] .komp{padding-bottom:max(10px,var(--trygg-bunn))}
html[data-flate=galleri] .fot{margin-top:5px;font-size:11.5px}

/* Kortet som viser hvilket bilde du redigerer. Uten det ville feltet sett
   likt ut enten du lager noe nytt eller endrer noe som finnes. */
.gx-redigerkort{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;
  margin:0 auto 8px;padding:5px 6px 5px 5px;border:1px solid var(--kant);
  border-radius:9999px;background:var(--flate-2)}
.gx-redigerkort img{width:34px;height:34px;border-radius:9999px;object-fit:cover;display:block}
.gx-redigerkort-tx{font-size:13px;font-weight:600;color:var(--tekst-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.gx-redigerkort-av{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;border:none;border-radius:9999px;background:none;
  color:var(--tekst-3);cursor:pointer}
.gx-redigerkort-av:hover{background:var(--flate-3);color:var(--tekst)}

.gx-form{display:flex;gap:6px;justify-content:center;padding:0 0 8px}
.gx-form[hidden]{display:none}
.gx-formkn{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding-inline:12px;
  border:1px solid var(--kant);border-radius:9999px;background:none;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--tekst-3)}
.gx-formkn:hover{background:var(--flate-2);color:var(--tekst-2)}
.gx-formkn.valgt{border-color:var(--tekst-3);color:var(--tekst)}
.gx-formkn i{display:block;border:1.6px solid currentColor;border-radius:2.5px;flex:0 0 auto}
.gx-formkn.kvadratisk i{width:11px;height:11px}
.gx-formkn.liggende i{width:14px;height:10px}
.gx-formkn.staaende i{width:10px;height:14px}
@media(max-width:520px){.gx-formkn span{display:none}.gx-formkn{padding-inline:12px}}

/* ── Bildevisningen ──────────────────────────────────────────────────────
   Egen overlay, ikke .skjerm fra stil.css: den er bygd for en modal med
   kort innhold og hvit flate, mens et bilde skal ligge paa moerkt uansett
   drakt. */
.gx-vis{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;
  background:#0b0b0bf2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .14s ease}
.gx-vis.inne{opacity:1}
.gx-vis[hidden]{display:none}
body.gx-apen{overflow:hidden}

.gx-vis-topp{display:flex;align-items:center;gap:8px;
  padding:max(10px,var(--trygg-topp)) max(12px,var(--trygg-hoyre)) 10px max(12px,var(--trygg-venstre))}
.gx-vis-topp .gx-tittel{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-kn{min-height:40px;display:inline-flex;align-items:center;gap:7px;padding-inline:15px;
  border:1px solid #ffffff2e;border-radius:9999px;background:#ffffff14;color:#fff;
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.gx-kn:hover{background:#ffffff26}
.gx-kn.fylt{background:#fff;border-color:transparent;color:#0d0d0d}
.gx-kn.fylt:hover{background:#ececec}
.gx-kn.fylt svg{fill:currentColor}
.gx-kn-ikon{width:40px;padding:0;justify-content:center}
@media(max-width:640px){.gx-kn .gx-kn-tx{display:none}.gx-kn{width:40px;padding:0;justify-content:center}}

.gx-vis-midt{flex:1;min-height:0;position:relative;display:flex;align-items:center;
  justify-content:center;padding:4px 12px}
.gx-vis-bilde{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  border-radius:10px;object-fit:contain}
.gx-pil{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;border:none;border-radius:9999px;
  background:#ffffff1f;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gx-pil:hover{background:#ffffff33}
.gx-forrige{left:14px}
.gx-neste{right:14px}
.gx-pil[hidden]{display:none}
@media(max-width:760px){.gx-pil{display:none}}

.gx-vis-bunn{padding:12px max(16px,var(--trygg-hoyre)) max(18px,var(--trygg-bunn)) max(16px,var(--trygg-venstre));
  text-align:center}
.gx-vis-om{max-width:44rem;margin:0 auto;font-size:13.5px;line-height:1.55;color:#c9c9c9;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gx-vis-om:empty{display:none}

/* ── Kvittering ──────────────────────────────────────────────────────────
   "Lenke kopiert" og lignende. Ett element, flyttes aldri, og ligger over
   bildevisningen slik at den ogsaa virker der. */
.gx-blaff{position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);z-index:200;
  max-width:min(92vw,30rem);padding:11px 18px;border-radius:9999px;
  background:var(--fyll-bg);color:var(--fyll-tx);text-align:center;
  font-size:13.5px;font-weight:600;box-shadow:0 8px 26px #00000059;
  opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.gx-blaff.inne{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){
  .gx-vis,.gx-blaff,.gx-hjerte,.gx-verktoy,.gx-slor,.gx-tekst{transition:none}
}