/* press.css - presspaketets skal: tokens, typsnitt, sidhuvud, hero, ingångar,
   sektionsramar, kontakt-CTA och sidfot. Utseendet är Claude Designs leverans
   "Vild Produktion - Press" (2026-08-18), hi-fi och godkänd av kund.

   EGEN YTA, EGEN STILFIL
   Presspaketet importerar ingenting ur public/css/style.css och lägger
   ingenting där. Appens stilar är byggda för en inloggad användare; den här
   sidan möter en journalist eller en arrangör som aldrig sett appen.

   REGELN OM RAMAR
   Inga ramar runt element någonstans på sidan. Kort bärs av fyllning mot den
   tonade sidbakgrunden plus en svag skugga. De enda border-reglerna som får
   finnas här, och i press-bilder.css, press-text.css och press-affisch.css, är
   vågräta avdelare: under sektionsrubriker, mellan faktarader, under sidhuvudet
   och över sidfoten. Linjer som delar, aldrig linjer som ramar in.

   TONEN HETER PAPPER
   Sidbakgrunden är #F7F5F1. Huvudsajten vildproduktion.se kör i dag Citrus-vitt
   #FFFBEC, som lästes som gult och därför togs bort här. Samma ton bör in på
   vildproduktion.se, annars skiljer sig de två sidorna åt i bakgrunden när
   besökaren klickar mellan dem. */

/* --- Typsnitt, självhostade -------------------------------------------------
   Inga <link> mot typsnitts-CDN. Prototypen hämtar från CDN och säger själv att
   det är en avvikelse som ska bytas mot det här blocket. Skälet är hårdare än
   smak: den publika sidan ska inte läcka besökarnas IP-adresser till en tredje
   part, och PDF-renderingen blockerar allt utanför eget ursprung. */
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400; src: url('../fonts/hanken-grotesk-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 500; src: url('../fonts/hanken-grotesk-500.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 600; src: url('../fonts/hanken-grotesk-600.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 700; src: url('../fonts/hanken-grotesk-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; }

:root {
  /* Sidans ytor. */
  --sida: #F7F5F1;
  --kort: #FFFFFF;
  --platta: #ECE8E0;
  --sidhuvud: rgba(247,245,241,0.85);
  --regel: #E5E0D6;

  /* Text. */
  --stark: #1D2B25;          /* bläck, rubriker och stark text */
  --brod: #3E4F45;           /* brödtext */
  --dampad: #6F7A6F;         /* dämpad, underrader och meta */

  /* Varmvit text på mörk eller färgad botten. Två snarlika toner ur facit,
     båda behållna: knappens text är en aning varmare än brickans. Ingen av
     dem får stå som lös hex ute i filerna. */
  --vit-knapp: #FFF6EF;
  --vit-bricka: #FFF7EC;

  /* Accent. */
  --accent: #0F7A5A;
  --accent-text: #FFFBEC;
  --accent-mjuk: #A8D6C4;

  /* Mörk sektion (affischen). */
  --mork: #16281F;
  --mork-text: #F1F3E6;
  --mork-dampad: #B7C4B3;

  /* Gul accent (kontakt-CTA och det förifyllda affischkortet). */
  --gul: #FFC53D;
  --gul-text: #26301C;

  /* Statusfärger i bildexportens ärlighetsrad (uppgift 10). */
  --varning: #B26A12;
  --fel: #B0402F;

  /* Brickan i "Fler grupper" för en grupp utan pressbild. Fyra toner ur
     affischpaletten (public/affisch-mallar/manifest.js), valda ur gruppens
     slug i press-text.js. Har gruppen en egen färg i svaret vinner den. */
  --bricka-1: #b04a2f;       /* Tegel */
  --bricka-2: #2f4d76;       /* Bläck */
  --bricka-3: #1f5c40;       /* Skog */
  --bricka-4: #5c3557;       /* Plommon */

  /* Typsnittsstaplar. */
  --typ-brod: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --typ-rubrik: 'Newsreader', Georgia, serif;
  --typ-matt: 'JetBrains Mono', ui-monospace, monospace;
}

/* --- Grund ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* hidden ska betyda dolt, även på element som har ett eget display-värde här i
   filen. Utan den här raden vinner till exempel .p-nav { display: flex } över
   webbläsarens [hidden]-regel, och menyn står kvar på kortet "Vi hittar inte
   gruppen" med länkar som pekar på sektioner som inte finns. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--sida);
  color: var(--stark);
  font-family: var(--typ-brod);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Rörelsen är en enda invänjning på hero. Släcks den ska ingenting annat på
   sidan röra sig heller, inte heller de tre modulernas övergångar. */
@keyframes vp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Rörelse av: animationen SLÄCKS, den snabbspolas inte. En varaktighet på
   0.001ms är fortfarande en animation som startar, kan blinka till och som
   skärmläsare och webbläsare räknar som rörelse. `none` tar bort den. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- Sidhuvud ------------------------------------------------------------- */
.p-huvud {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--sidhuvud);
  border-bottom: 1px solid var(--regel);   /* avdelare, inte ram */
}
.p-huvud-inre {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px clamp(18px, 5vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.p-ordmarke { text-decoration: none; color: var(--stark); display: flex; align-items: baseline; gap: 9px; }
.p-ordmarke-namn { font-family: var(--typ-rubrik); font-size: clamp(19px, 5vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
.p-prick { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; transform: translateY(-2px); }
.p-ordmarke-press { font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dampad); font-weight: 600; padding-left: 4px; }

.p-nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(13px, 3.2vw, 26px); row-gap: 10px; font-size: 15px; }
.p-nav a { text-decoration: none; color: var(--brod); white-space: nowrap; transition: color .15s ease; }
.p-nav a:hover { color: var(--accent); }

/* --- Kortet när gruppen inte finns ---------------------------------------- */
.p-saknas { max-width: 1240px; margin: 0 auto; padding: clamp(48px, 9vw, 96px) clamp(18px, 5vw, 32px); }
.p-saknas-kort {
  background: var(--kort);
  border-radius: 12px;
  padding: clamp(28px, 5vw, 44px);
  max-width: 34em;
  box-shadow: 0 6px 16px -10px rgba(40,26,8,0.28);
}
.p-saknas-rubrik { font-family: var(--typ-rubrik); font-weight: 500; font-size: clamp(26px, 5.4vw, 38px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 12px; }
.p-saknas-text { font-size: 16.5px; line-height: 1.6; color: var(--brod); margin: 0 0 24px; }

/* --- Hero ----------------------------------------------------------------- */
.p-hero {
  scroll-margin-top: 120px;
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(38px, 7vw, 68px) clamp(18px, 5vw, 32px) 0;
}
.p-hero-rad {
  animation: vp-rise .7s ease both;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 56px);
}
.p-hero-text { flex: 1 1 min(300px, 100%); min-width: 0; max-width: 40em; }

.p-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);
  margin: 0 0 20px;
}
.p-overrubrik-linje { width: 28px; height: 1px; background: var(--accent); }

.p-h1 {
  font-family: var(--typ-rubrik);
  font-weight: 500;
  font-size: clamp(36px, 7.6vw, 76px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  text-wrap: balance;
  hyphens: none;
}
.p-hero-line { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.55; color: var(--brod); margin: 0; max-width: 30em; }
.p-hero-who { font-size: 15px; color: var(--dampad); margin: 14px 0 0; }
.p-hero-who[hidden] { display: none; }

/* Affischen som toppbild. Måttet är LÅST: rutan är lika stor tom som fylld, så
   den aldrig kan flytta något på sidan när uppgift 12 renderar in arket. */
.p-hero-affisch { flex: none; text-decoration: none; color: var(--stark); display: flex; flex-direction: column; gap: 11px; }
.p-hero-ark {
  display: block;
  position: relative;
  width: 190px;
  height: 269px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--platta);
  box-shadow: 0 14px 30px -14px rgba(40,26,8,0.4);
  transition: transform .25s ease, box-shadow .25s ease;
}
.p-hero-affisch:hover .p-hero-ark { transform: translateY(-4px); box-shadow: 0 22px 40px -16px rgba(40,26,8,0.45); }
.p-hero-affisch-lank { font-size: 14px; font-weight: 600; color: var(--accent); }

/* --- De tre ingångarna ---------------------------------------------------- */
.p-ingangar {
  position: relative;
  margin-top: clamp(30px, 5vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 13px;
}
.p-ingang {
  text-decoration: none;
  color: var(--stark);
  background: var(--kort);
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: 0 6px 16px -10px rgba(40,26,8,0.28);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.p-ingang:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -14px rgba(40,26,8,0.42); }
.p-ingang-rubrik { font-family: var(--typ-rubrik); font-size: 21px; font-weight: 600; }
.p-ingang-under { font-size: 14.5px; color: var(--dampad); }

/* Förifylld länk: affischkortet blir gult, för då är det kortet besökaren kom
   för. Färgbytet sätts på <body> av press.js, inte på kortet självt, så samma
   klass styr både kortet och ordningsvändningen nedan. */
body.p-forifylld #ingang-affisch { background: var(--gul); color: var(--gul-text); }
body.p-forifylld #ingang-affisch .p-ingang-under { color: rgba(38,48,28,0.78); }

/* --- Sektionerna och ordningsvändningen ------------------------------------
   Sektion 3 till 7 plus kontakt-CTA ligger i en flexkolumn. Kommer besökaren
   via en förifylld länk flyttas #affisch till toppen med `order`. Ingenting
   dupliceras, och ordningen mellan de övriga är oförändrad. */
.p-kolumn { display: flex; flex-direction: column; }

.p-sektion {
  scroll-margin-top: 120px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(52px, 9vw, 84px) clamp(18px, 5vw, 32px) 0;
}

#bilder  { order: 1; }
#text    { order: 2; }
#om      { order: 3; }
#affisch { order: 4; }
#grupper { order: 5; }
.p-sektion--kontakt { order: 90; }

body.p-forifylld #affisch { order: 0; }

/* Den mörka sektionen går kant i kant, så max-bredden sitter på insidan. */
.p-sektion--affisch {
  max-width: none;
  padding: 0;
  margin-top: clamp(48px, 8vw, 80px);
  background: var(--mork);
  color: var(--mork-text);
}
.p-affisch-inre {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(44px, 8vw, 72px) clamp(18px, 5vw, 32px);
}

/* Sektionsrubrikernas gemensamma stil. Definierad här och återanvänd av
   uppgift 10, 11 och 12: underraden ligger till höger på samma rad och faller
   under rubriken när bredden inte räcker. */
.p-sektionshuvud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--regel);   /* avdelare, inte ram */
  margin-bottom: clamp(22px, 4vw, 34px);
}
/* En rubrik utan text är ingen rubrik, bara ett streck. Så länge en sektion
   väntar på sin modul (Om gruppen fylls i uppgift 11) står avdelaren inte kvar
   ensam. Regeln slocknar av sig själv i samma stund som rubriken får text. */
.p-sektionshuvud:has(> .p-h2:empty) { display: none; }

.p-h2 { font-family: var(--typ-rubrik); font-weight: 500; font-size: clamp(28px, 6vw, 40px); letter-spacing: -0.02em; margin: 0; }
.p-underrad { font-size: 15px; color: var(--dampad); margin: 0; max-width: 34em; }
.p-sektion--affisch .p-sektionshuvud { border-bottom-color: rgba(241,243,230,0.18); }
.p-sektion--affisch .p-underrad { color: var(--mork-dampad); }

/* --- Kontakt-CTA ---------------------------------------------------------- */
.p-kontakt {
  background: var(--gul);
  color: var(--gul-text);
  border-radius: 12px;
  padding: clamp(30px, 5vw, 46px) clamp(24px, 5vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 32px);
}
.p-kontakt-rubrik { font-family: var(--typ-rubrik); font-weight: 500; font-size: clamp(26px, 5.4vw, 38px); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 8px; }
.p-kontakt-brod { font-size: 16.5px; line-height: 1.6; margin: 0; max-width: 40em; }
.p-kontakt-knappar { display: flex; flex-wrap: wrap; gap: 12px; }

.p-knapp-mork, .p-knapp-ljus {
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  display: inline-block;
}
.p-knapp-mork { color: var(--vit-knapp); background: var(--gul-text); }
.p-knapp-ljus { color: var(--gul-text); background: rgba(38,48,28,0.12); }

/* --- Sidfot --------------------------------------------------------------- */
.p-sidfot { border-top: 1px solid var(--regel); margin-top: clamp(52px, 9vw, 84px); }  /* avdelare, inte ram */
.p-sidfot-inre {
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px clamp(18px, 5vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 13.5px;
  color: var(--dampad);
}
.p-sidfot-marke { display: flex; align-items: baseline; gap: 8px; }
.p-sidfot-marke a { font-family: var(--typ-rubrik); font-size: 17px; font-weight: 600; color: var(--stark); text-decoration: none; }
.p-sidfot-marke .p-prick { width: 6px; height: 6px; transform: none; }