/* =================================================================
   fiskefabrikken.css — faelles design for alle frontend-sider
   Alt det ensartede ligger KUN her: design-tokens, header, footer,
   menu, titelbaand, filter, grid, bevaegelse. Sidespecifik layout
   ligger i den enkelte sides egen <style>.
   ================================================================= */

/* Display-font: Syne → Archivo → Bricolage Grotesque (Jans afproevning
   04-07: Syne var ekstra bred; Bricolage valgt for mere personlighed).
   Samme vaegte (600/700/800). */
@import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&family=Bricolage+Grotesque:wght@600;700;800&family=Spline+Sans:wght@400;500;600&display=swap');

/* ---- DESIGN-TOKENS (ret kun her) ---- */
:root{
  --papir:#f3f1ea;
  --papir-rent:#fbfaf6;
  --blaek:#1c1b18;
  --graa:#86837a;
  --staal:#5b6b70;
  --oxid:#b4502e;
  --groen:#5e7a52;
  --hairline:#1c1b1820;

  --bredde:1280px;        /* gennemgaaende sidebredde */
  --radius:16px;          /* afrunding paa kasser */
  --radius-sm:9px;        /* afrunding paa knapper/smaa elementer */

  --font-display:'Bricolage Grotesque',sans-serif;
  --font-brod:'Spline Sans',sans-serif;
  --font-logo:'Chelsea Market',cursive;
}

/* ---- BASIS ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--papir);color:var(--blaek);font-family:var(--font-brod);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E")}
.skitse-flag{position:fixed;top:0;left:0;z-index:10000;background:var(--blaek);color:var(--papir);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px}

/* ---- HEADER / MENU ---- */
header{position:sticky;top:0;z-index:500;background:rgba(243,241,234,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;padding:18px 48px}
.logo{font-family:var(--font-logo);font-weight:400;font-size:23px;letter-spacing:.02em;text-transform:uppercase}
.logo i{font-style:normal;color:var(--oxid)}
/* gap 34→20 (menu-eftersynet 07-07): 9 menupunkter + sprogvaelger skal
   kunne staa paa smallere skaerme; se ogsaa menu-breakpointet nederst. */
nav{display:flex;gap:20px;align-items:center}
nav a{color:var(--blaek);text-decoration:none;font-weight:500;font-size:14px;position:relative}
nav a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--blaek);transition:width .25s}
nav a:hover::after,nav a.aktiv::after{width:100%}
nav a.aktiv{font-weight:600}
.nav-billet{background:var(--blaek);color:var(--papir);padding:9px 18px;font-weight:500;font-size:13px;border-radius:var(--radius-sm)}
.nav-billet::after{display:none}

/* ---- TITELBAAND MED FOTO (faelles for liste-/indholdssider) ---- */
.sidehero{position:relative;overflow:hidden;min-height:300px;display:flex;align-items:flex-start;padding:64px 48px 64px;border-bottom:1px solid var(--hairline)}
.sidehero-bg{position:absolute;inset:0;z-index:0;will-change:transform;animation:aande 34s ease-in-out infinite alternate;
  /* foto.jpg-laget FJERNET (19-08): filen har aldrig eksisteret (skitse-
     levn) — kun 404-stoej; gradienterne er det reelle udtryk. */
  background:
    radial-gradient(70% 60% at 70% 10%,rgba(255,250,234,.4),transparent 62%),
    linear-gradient(180deg,#c9c4b7,#a39d8f 52%,#6e695d);}
.sidehero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(243,241,234,.05),rgba(28,27,24,.34))}
.sidehero-ind{position:relative;z-index:1;max-width:var(--bredde);margin:0 auto;width:100%;color:var(--papir)}
/* hyphens+break-word: lange enkeltord ("Pressemeddelelser") klippede paa
   mobil — bindestreg foretraekkes, vilkaarligt brud kun som noedvaerge. */
.sidehero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,7vw,82px);line-height:.96;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(0,0,0,.35);hyphens:auto;overflow-wrap:break-word}
.sidehero p{margin-top:16px;max-width:56ch;font-size:18px;line-height:1.6;color:#f0ece0e6;text-shadow:0 2px 16px rgba(0,0,0,.4)}
@keyframes aande{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.12) translate(-1.5%,-1.5%)}}

/* ---- FILTER-BJAELKE (events, udstillinger) ---- */
.filter{position:sticky;top:61px;z-index:400;background:rgba(243,241,234,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.filter-in{max-width:var(--bredde);margin:0 auto;padding:14px 48px}
.raekke{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.raekke+.raekke{margin-top:10px}
.tab{border:1px solid var(--hairline);background:none;cursor:pointer;font-family:var(--font-brod);font-weight:500;font-size:14px;color:var(--blaek);padding:9px 18px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:8px;transition:.2s}
.tab:hover{border-color:var(--blaek)}
.tab.valgt{background:var(--blaek);color:var(--papir);border-color:var(--blaek)}
.tab .ant{font-family:var(--font-display);font-weight:700;font-size:12px;opacity:.7}
.tab.valgt .ant{opacity:.85}
.typer{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.typer .lab{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--graa);margin-right:4px}
.chip{border:1px solid var(--hairline);background:none;cursor:pointer;font-family:var(--font-brod);font-weight:500;font-size:13px;color:var(--blaek);padding:6px 14px;border-radius:var(--radius-sm);transition:.2s}
.chip:hover{border-color:var(--blaek)}
.chip.valgt{background:var(--oxid);color:#fff;border-color:var(--oxid)}

/* ---- FAELLES 3-SPALTET GRID ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}

/* ---- FAELLES SCROLL-REVEAL ---- */
.reveal,.rev{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.vist,.rev.vist{opacity:1;transform:none}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--blaek);background:var(--papir)}
.f-in{max-width:var(--bredde);margin:0 auto;padding:56px 48px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px}
.f-in .logo{font-size:40px}
.f-info{color:var(--graa);font-size:14px;line-height:1.8;text-align:right}

/* ---- PLACEHOLDER-PALETTER (kun skitse; erstattes af rigtige fotos) ---- */
.f1{background:linear-gradient(150deg,#d7cfc2,#a89478 70%,#7d6b52)}
.f2{background:linear-gradient(150deg,#c9d2d1,#8fa3a2 70%,#62736f)}
.f3{background:linear-gradient(150deg,#d8c9bb,#b78a6c 60%,#7a5236)}
.f4{background:linear-gradient(150deg,#bcb3c4,#6f6885 65%,#433d57)}
.f5{background:linear-gradient(150deg,#d9cdd6,#a895a8 70%,#7c6479)}
.f6{background:linear-gradient(150deg,#cdd2cb,#94a08c 65%,#63704f)}
.f7{background:linear-gradient(150deg,#c6bfa8,#9a8f6a 70%,#6b5f3c)}
.f-jl{background:linear-gradient(150deg,#cfd6d4,#9aa9a8 60%,#6f7e7d)}
.f-nat{background:linear-gradient(150deg,#bcb3c4,#6f6885 60%,#433d57)}
.f-bet{background:linear-gradient(150deg,#cfd6d4,#9aa9a8 60%,#6f7e7d)}
.f-omv{background:linear-gradient(150deg,#cdd2cb,#94a08c 60%,#63704f)}
.f-fore{background:linear-gradient(150deg,#c9c3d2,#8f87a3 60%,#5d5572)}
.f-kon{background:linear-gradient(150deg,#bcb3c4,#6f6885 65%,#433d57)}
.f-uds{background:linear-gradient(150deg,#d7cfc2,#a89478 70%,#7d6b52)}
.f-rund{background:linear-gradient(150deg,#cdd2cb,#94a08c 65%,#63704f)}
.f-fam{background:linear-gradient(150deg,#d8c9bb,#b78a6c 60%,#7a5236)}
.f-his{background:linear-gradient(150deg,#cdd2cb,#94a08c 60%,#5e6b4d)}
.p1{background:linear-gradient(135deg,#cfd6d4,#9aa9a8 55%,#5f6f6e)}
.p2{background:linear-gradient(135deg,#d8c9bb,#b78a6c 55%,#7a5236)}
.p3{background:linear-gradient(135deg,#bcb3c4,#6f6885 60%,#433d57)}
.p4{background:linear-gradient(135deg,#cdd2cb,#94a08c 60%,#5e6b4d)}
.p5{background:linear-gradient(135deg,#d9cdd6,#a895a8 60%,#7c6479)}

/* ---- MINDRE BEVAEGELSE (tilgaengelighed) ---- */
@media (prefers-reduced-motion: reduce){
  .sidehero-bg{animation:none!important}
  .reveal,.rev{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- MENU-BREAKPOINT (menu-eftersynet 07-07) ----
   Hamburger-graensen er HAEVET fra 860 til 1100px og adskilt fra det
   faelles indholds-breakpoint (860, nedenfor): menuen er vokset til 9
   punkter, og mellem 860 og ~1150px naaede den at kollidere med logoet,
   ombryde punkter og til sidst overloebe skaermen — paa tysk allerede
   fra ~1200px. Drawer-CSS'en i Sidehoved.astro bruger SAMME graense. */
@media(max-width:1100px){
  nav{display:none}
}

/* ---- FAELLES MOBIL ---- */
@media(max-width:860px){
  header{padding:16px 22px}
  .filter{top:57px}
  .sidehero{padding:32px 22px 44px}
  .sidehero-ind,.filter-in,.f-in{padding-left:22px;padding-right:22px}
  .grid{grid-template-columns:1fr}
}