/* press-affisch.css: affischverktyget i den mörka sektionen på presssidan,
   och den egna sidan public/press-affisch.html.

   Filen laddas av BÅDA sidorna. press.html får tokens och typsnitt ur
   press.css; press-affisch.html laddar bara den här filen och måste därför
   bära sina egna typsnitt och sin egen grund. Reglerna nedan är sorterade
   därefter: typsnitt och grund först, verktyget sedan, arkets egna stilar
   (redigerbara luckor, bildstatus) därefter, och utskriftsläget sist.

   REGELN OM RAMAR (press.css)
   Inga ramar runt element. Knappar bärs av fyllning och av en ring i
   valt läge, inte av en kant. */

/* --- Typsnitt: affischmallarnas tre familjer -------------------------------
   Mallarna i public/affisch-mallar/ sätter DM Sans, Newsreader och JetBrains
   Mono. press.css laddar Newsreader och JetBrains Mono men INTE DM Sans, så
   den deklareras här: utan den ritas affischen i ett reservtypsnitt och
   krympbudgetarna mäter fel text.
   INGA CDN-ANROP. Utskriftsläget i pressPdf blockerar allt utanför eget
   ursprung, och ett CDN-typsnitt ger då en PDF som inte ser ut som
   förhandsvisningen. */
@font-face { font-family: 'DM Sans'; font-weight: 400; src: url('../fonts/dm-sans-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'DM Sans'; font-weight: 600; src: url('../fonts/dm-sans-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'DM Sans'; font-weight: 700; src: url('../fonts/dm-sans-700.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Newsreader'; font-weight: 500; src: url('../fonts/newsreader-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Newsreader'; font-weight: 600; src: url('../fonts/newsreader-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: url('../fonts/jetbrains-mono-500.woff2') format('woff2'); font-display: swap; }

/* --- Den mörka sektionen ---------------------------------------------------
   Färgerna är press.css tokens, med värdena skrivna som reserv så filen även
   fungerar på press-affisch.html, som inte laddar press.css. */
#press-affisch {
  background: var(--mork, #16281F);
  color: var(--mork-text, #F1F3E6);
}

.pa-overrubrik {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-mjuk, #A8D6C4);
  margin: 0 0 16px;
}
.pa-h2 { color: var(--mork-text, #F1F3E6); margin: 0 0 14px; }
.pa-intro { font-size: 16.5px; line-height: 1.6; color: var(--mork-dampad, #B7C4B3); margin: 0; max-width: 46em; }
.pa-notis {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--gul-text, #26301C);
  background: var(--gul, #FFC53D);
  border-radius: 10px;
  padding: 13px 18px;
  margin: 18px 0 0;
  max-width: 46em;
}

/* --- Tvåspaltig yta --------------------------------------------------------
   Radbrytningen är `wrap`, aldrig omvänd. En omvänd radbrytning kopplar
   spalternas höjd till varandra, och då flyttar sig affischen flera hundra
   pixlar när mallen byts och fältspalten blir högre eller lägre.
   Förhandsvisningen ska stå still. */
.pa-rutnat {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(26px, 4vw, 46px);
  margin-top: clamp(28px, 5vw, 44px);
}
.pa-falt {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pa-forhands {
  flex: 0 0 clamp(260px, 42%, 500px);
  /* min-width: 0 är inte kosmetik. Utan den ger flexboxens automatiska
     minimistorlek spalten innehållets bredd, alltså arkets 630 px, och
     motorns skalning får då aldrig veta hur bred spalten egentligen är. */
  min-width: 0;
  align-self: flex-start;
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
@media (max-width: 860px) {
  .pa-forhands { flex: 1 1 100%; }
}
.pa-ark {
  position: relative;
  flex: none;
  background: #0e1a14;
  box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.6);
}
.pa-klick { font-size: 13.5px; color: var(--mork-dampad, #B7C4B3); margin: 0; text-align: center; }

/* --- Fälten ---------------------------------------------------------------- */
.pa-grupp { display: flex; flex-direction: column; gap: 8px; }
.pa-grupp[hidden] { display: none; }
.pa-etikett {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mork-dampad, #B7C4B3);
}
.pa-behovs {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--gul, #FFC53D);
  margin-left: 8px;
}
.pa-input {
  font: 400 16px/1.45 var(--typ-brod, 'Hanken Grotesk', system-ui, sans-serif);
  color: var(--mork-text, #F1F3E6);
  background: rgba(241, 243, 230, 0.08);
  border: none;
  border-radius: 9px;
  padding: 12px 14px;
  width: 100%;
  resize: vertical;
}
.pa-input::placeholder { color: rgba(183, 196, 179, 0.7); }
.pa-input:focus { outline: 2px solid var(--accent-mjuk, #A8D6C4); outline-offset: 2px; background: rgba(241, 243, 230, 0.14); }
/* Datumväljarens ikon är svart mot den mörka plattan och syns annars inte. */
.pa-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.75; cursor: pointer; }

/* --- Mallvalet: fyra riktiga affischer ------------------------------------- */
.pa-mallar { display: flex; flex-wrap: wrap; gap: 14px; }
.pa-mall {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 96px;
}
.pa-mall-ruta {
  display: block;
  position: relative;
  width: 96px;
  height: 136px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(241, 243, 230, 0.1);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.7);
  transition: transform .18s ease;
}
.pa-mall:hover .pa-mall-ruta { transform: translateY(-3px); }
.pa-mall.pa-aktiv .pa-mall-ruta { box-shadow: 0 0 0 2px var(--mork, #16281F), 0 0 0 4px var(--gul, #FFC53D); }
.pa-mall-ark { display: block; }
/* Reserverad höjd för TVÅ rader. "Bild + kort text" bryter på smala spalter,
   och utan reserverad höjd hoppar hela knappraden när den gör det. */
.pa-mall-namn {
  font-size: 12.5px;
  line-height: 1.25;
  min-height: 2.5em;
  text-align: center;
  color: var(--mork-dampad, #B7C4B3);
}
.pa-mall.pa-aktiv .pa-mall-namn { color: var(--mork-text, #F1F3E6); font-weight: 600; }

/* --- Färg- och bildbrickor -------------------------------------------------- */
.pa-brickor { display: flex; flex-wrap: wrap; gap: 10px; }
.pa-farg {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.pa-farg.pa-aktiv { box-shadow: 0 0 0 2px var(--mork, #16281F), 0 0 0 4px var(--gul, #FFC53D); }
.pa-bild {
  width: 44px;
  height: 44px;
  border-radius: 7px;
  border: none;
  padding: 0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}
.pa-bild.pa-aktiv { box-shadow: 0 0 0 2px var(--mork, #16281F), 0 0 0 4px var(--gul, #FFC53D); }

/* --- Knappraden ------------------------------------------------------------- */
.pa-knappar { display: flex; flex-wrap: wrap; gap: 11px; }
.pa-ladda, .pa-kopiera {
  font: 700 15px var(--typ-brod, 'Hanken Grotesk', system-ui, sans-serif);
  border: none;
  border-radius: 999px;
  padding: 13px 24px;
  cursor: pointer;
}
.pa-ladda { background: var(--gul, #FFC53D); color: var(--gul-text, #26301C); }
.pa-ladda:hover:not(:disabled) { background: #FFD469; }
/* Spärren är ett riktigt disabled-attribut, inte bara en nedtoning: en knapp
   som ser släckt ut men går att trycka på skickar en halv affisch till trycket. */
.pa-ladda:disabled { background: rgba(241, 243, 230, 0.14); color: rgba(183, 196, 179, 0.75); cursor: not-allowed; }
.pa-kopiera { background: rgba(241, 243, 230, 0.14); color: var(--mork-text, #F1F3E6); }
.pa-kopiera:hover { background: rgba(241, 243, 230, 0.22); }

.pa-hjalprad { font-size: 14px; line-height: 1.55; color: var(--mork-dampad, #B7C4B3); margin: 0; max-width: 40em; }
.pa-hjalprad-sparrad { color: var(--gul, #FFC53D); }
.pa-fel { font-size: 14px; line-height: 1.55; color: #FFB4A6; margin: 0; max-width: 40em; }
.pa-fel[hidden] { display: none; }

/* --- Arkets egna stilar ----------------------------------------------------
   Motsvarigheterna bor i css/affisch.css för arrangörens affischsida. Den
   filen laddas inte här, så luckornas markering och bildstatusrutan skrivs
   om för presspaketets yta. Affischens UTSEENDE ligger i mallarna och rörs
   inte av något av detta. */
[data-red] { cursor: text; min-width: 1ch; overflow-wrap: normal; word-break: normal; }
[data-red]:hover { outline: 1.5px solid; outline-offset: 4px; border-radius: 3px; outline-color: color-mix(in srgb, currentColor 40%, transparent); }
[data-red]:focus { outline: 2px solid; outline-offset: 4px; border-radius: 3px; outline-color: color-mix(in srgb, currentColor 75%, transparent); }
[data-red][data-tom="1"] { outline: 1.5px dashed; outline-offset: 4px; border-radius: 3px; outline-color: color-mix(in srgb, currentColor 60%, transparent); opacity: .6; }
/* Radbryt i löptexten bevaras: skärm och PDF renderar samma sida. */
[data-slot="beskrivning"] { white-space: pre-line; }

/* Statusrutan medan affischbilden hämtas (motorns visaBildstatus). Pillret
   motskalas mot --ark-skala så texten är lika stor oavsett hur arket skalats. */
.aff-bildladdning {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 20, 22, .45);
  pointer-events: none;
}
.aff-bildladdning[data-forhands="1"] { background: none; }
.aff-bildladdning-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 7px 13px 7px 9px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
  transform: scale(calc(1 / var(--ark-skala, 1)));
}
.aff-spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(22, 22, 26, .12);
  border-top-color: #0F7A5A;
  animation: pa-snurr .8s linear infinite;
}
@keyframes pa-snurr { to { transform: rotate(360deg); } }
.aff-bildladdning-text { font: 500 12px/1 'DM Sans', sans-serif; color: #67676b; white-space: nowrap; }
/* Miniatyrerna och toppbilden är för små för en statusruta: den skulle täcka
   hela affischen. Beskedet hör hemma i förhandsvisningen. */
.pa-mall-ark .aff-bildladdning, #hero-affisch .aff-bildladdning { display: none; }

/* --- Den egna sidan, public/press-affisch.html ------------------------------ */
body.pa-ensam {
  margin: 0;
  background: #e9e8e5;
  color: #1D2B25;
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
}
body.pa-ensam [hidden] { display: none !important; }
.pa-ensam-scen { padding: 26px 14px 34px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pa-ensam-ark { position: relative; flex: none; box-shadow: 0 18px 44px rgba(0, 0, 0, .14); }
.pa-ensam-fot { font-size: 13.5px; text-align: center; }
.pa-ensam-fot a { color: #0F7A5A; font-weight: 600; }
.pa-ensam-besked {
  max-width: 30em;
  margin: 12vh auto;
  background: #fff;
  border-radius: 14px;
  padding: 28px 30px;
  font-size: 15.5px;
  line-height: 1.6;
}

/* --- Utskriftsläget --------------------------------------------------------
   Sätts av press-affisch.js som body.print plus body.print-a4 / body.print-a3.
   Allt som inte är arket bär data-chrome="1" och släcks här. */
body.print [data-chrome] { display: none !important; }
body.print [data-red] { outline: none !important; }
body.print .mall, body.print .mall * { box-shadow: none !important; }
body.print [data-valfri="1"][data-tom="1"] { display: none !important; }
body.print .vp-ark-scen { position: fixed !important; left: 0 !important; top: 0 !important; }
@media print { @page { margin: 0; } }

/* Arkets wrapper sätts till exakta millimeter av motorn (renderaMall med
   printFormat). Måtten här är samma tal, så pappersytan stämmer även innan
   motorn hunnit rita. */
body.print { background: #fff; margin: 0; }
body.print .pa-ensam-scen { padding: 0; display: block; }
body.print .pa-ensam-ark { box-shadow: none; }
body.print-a4 .vp-ark-scen { width: 210mm; height: 297mm; }
body.print-a3 .vp-ark-scen { width: 297mm; height: 420mm; }