/* press-bilder.css: pressbildsgalleriet, beskärningen, målmåtten och
   nedladdningen. Hör ihop med public/js/press-bilder.js och fyller sektionen
   #bilder. Tokens (--kort, --sida, --platta, --accent, --varning, --fel,
   --regel, typsnittsstaplarna) kommer från press.css och definieras aldrig om
   här.

   REGELN OM RAMAR GÄLLER OCKSÅ HÄR
   Inga ramar runt element. Korten bärs av fyllning mot den tonade
   sidbakgrunden plus en svag skugga. Den enda border-regeln i filen är en vågrät
   avdelare över resultatblocket, alltså en linje som delar, inte som ramar in.
   Fälten under "Egna mått" får border: none med flit: webbläsarens egen ram
   runt <input> är precis den sorts inramning regeln handlar om. */

/* --- Rutnätet ------------------------------------------------------------- */

/* TAKADE SPÅR, INTE 1fr. Avsiktligt och viktigt: med auto-fit och 1fr blev en
   ensam bild 845 px bred och 631 px hög, alltså exakt den stora mittsidesbild
   som skulle bort ur designen. Med auto-fill och ett tak på 240 px ligger en
   bild på 240 px precis som tio gör. Gruppernas bildantal skiljer sig åt (en
   grupp har i dag en enda bild) och kommer att växa, och rutnätet ska se
   likadant ut i båda ändarna. Byt aldrig till 1fr. */
.pb-rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 240px));
  justify-content: start;
  gap: clamp(13px, 2.4vw, 18px);
}

.pb-kort {
  cursor: pointer;
  padding: 0;
  border: none;
  background: var(--kort);
  box-shadow: 0 1px 2px rgba(40,26,8,0.04);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--stark);
  font: inherit;
  /* Genomskinlig outline även när kortet inte är valt: då flyttar ingenting
     sig i rutnätet i det ögonblick markeringen tänds. */
  outline: 3px solid transparent;
  outline-offset: 2px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pb-kort:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -14px rgba(40,26,8,0.42); }
.pb-kort[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.pb-kort:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.pb-kortbild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--platta); }
.pb-kortbild img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pb-korttext { display: flex; flex-direction: column; gap: 2px; padding: 13px 15px 15px; }
.pb-korttitel { font-size: 14.5px; font-weight: 600; }
.pb-kortfoto { font-size: 13px; color: var(--dampad); }

/* --- Panelen -------------------------------------------------------------- */
.pb-panel {
  margin-top: clamp(18px, 3vw, 26px);
  background: var(--kort);
  box-shadow: 0 1px 2px rgba(40,26,8,0.04);
  border-radius: 12px;
  padding: clamp(20px, 4vw, 30px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 4vw, 40px);
}

.pb-etikett {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dampad);
  font-weight: 600;
}

/* --- Beskärningen --------------------------------------------------------- */
.pb-utsnitt { flex: 0 1 min(320px, 100%); min-width: 0; display: flex; flex-direction: column; gap: 11px; }

.pb-etikettrad { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }

.pb-lank {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
}

/* DEN YTTRE RUTAN ÄR FAST: 320 x 290 px i samtliga lägen, oavsett vilket
   målmått som är valt. Det var ett uttryckligt krav. När ramen inuti ändrade
   form flyttade sig allt under den på sidan, och en arrangör som växlade
   mellan A4 stående och 16:9 tappade bort var knappen låg. Ändra aldrig till
   auto-höjd. */
.pb-ruta {
  width: 100%;
  max-width: 320px;
  height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Utsnittsramen har RAKA HÖRN, eftersom filen man får inte har rundade. */
.pb-ram {
  position: relative;
  overflow: hidden;
  background: var(--platta);
  border-radius: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.pb-ram--drar { cursor: grabbing; }

.pb-forhandsbild { position: absolute; display: block; height: auto; pointer-events: none; }

.pb-zoomrad { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--brod); }
.pb-zoomord { white-space: nowrap; }
.pb-zoom { flex: 1; min-width: 0; accent-color: var(--accent); }

.pb-drarad { font-size: 13.5px; color: var(--dampad); line-height: 1.5; margin: 0; }

/* --- Målmåtten ------------------------------------------------------------ */
.pb-mal { flex: 1 1 min(280px, 100%); min-width: 0; display: flex; flex-direction: column; gap: 22px; }

.pb-grupp { display: flex; flex-direction: column; gap: 10px; }
.pb-piller { display: flex; flex-wrap: wrap; gap: 8px; }

.pb-pill {
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: none;
  background: var(--sida);
  color: var(--stark);
}
.pb-pill[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.pb-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Siffror i måttknapparna sätts i monospace, så 1600 × 900 och 1200 × 1200 blir
   lika breda och listan står still. */
.pb-piller--matt .pb-pill { font-family: var(--typ-matt); font-size: 13.5px; font-weight: 500; }

.pb-tryck { display: flex; flex-direction: column; gap: 16px; }
.pb-tryckrad { display: flex; flex-wrap: wrap; gap: 22px; }

.pb-egenrad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pb-falt {
  width: 116px;
  background: var(--sida);
  border: none;
  border-radius: 8px;
  color: var(--stark);
  font-family: inherit;
  font-size: 15px;
  padding: 11px 13px;
}
.pb-falt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-gange { color: var(--dampad); font-size: 15px; }
.pb-hjalp { font-size: 13.5px; color: var(--dampad); }

/* --- Resultatet ----------------------------------------------------------- */
.pb-resultat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--regel);   /* avdelare, inte ram */
}

.pb-mattrad { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pb-mattpost { display: flex; flex-direction: column; gap: 3px; }
.pb-siffra { font-family: var(--typ-matt); font-size: 17px; font-weight: 500; }
.pb-siffra--dampad { color: var(--dampad); }

.pb-status { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; margin: 0; }
.pb-prick { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; margin-top: 6px; }
.pb-status--ok { color: var(--accent); }
.pb-status--varning { color: var(--varning); }
.pb-status--fel { color: var(--fel); }

.pb-ned {
  align-self: flex-start;
  cursor: pointer;
  border: none;
  color: var(--accent-text);
  background: var(--accent);
  padding: 14px 26px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15.5px;
}
.pb-ned:focus-visible { outline: 2px solid var(--stark); outline-offset: 2px; }

/* Raden som visas när originalet är för stort för att hämtas här (413 från
   pressPublic). Knappen står kvar aktiv: nästa val kan mycket väl rymmas. */
.pb-felrad { font-size: 14px; color: var(--fel); margin: 0; line-height: 1.55; }

.pb-notis { font-size: 13.5px; color: var(--dampad); margin: 0; line-height: 1.55; }

/* --- Sista raden ---------------------------------------------------------- */
.pb-sista { font-size: 14.5px; color: var(--dampad); margin: 22px 0 0; line-height: 1.6; }
.pb-mejl { font-weight: 600; color: var(--accent); }