/* ==================================================================
   Final Film — kategorivælger til /produktioner/
   Rører kun filterbjælken. Produktionernes eget markup og styling
   er urørt; det eneste, filtreringen gør ved dem, er .ff-hidden.
   ================================================================== */

:root{
  --ff-peri:#8D8DFF;
  --ff-white:#fff;
  --ff-text:#D9D9D9;
  --ff-muted:rgba(217,217,217,.62);
  --ff-faint:rgba(217,217,217,.38);
  --ff-line:rgba(217,217,217,.08);
  --ff-bg:rgba(29,32,40,.9);   /* = #1D2028 med gennemsigtighed */
  --ff-radius:8px;
}

/* ---------- sektionens overskrift ---------- */
.ff-head{padding-block:clamp(3rem,7vw,6rem) clamp(1.5rem,3vw,2.5rem);display:grid;gap:1.1rem 3rem}
.ff-kicker{font-family:"REM-Regular","REM",Verdana,Arial,sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ff-peri);
  display:flex;align-items:center;gap:.8rem;margin:0;min-height:1rem}
.ff-kicker::before{content:"";display:inline-block;width:1.75rem;height:1px;background:currentColor;opacity:.7}
.ff-head h1{font-family:"Libre Baskerville",Georgia,serif;font-weight:700;color:var(--ff-white);margin:0;
  font-size:clamp(2.125rem,1.61rem + 2.1vw,3.5rem);line-height:1.08;letter-spacing:-.012em;
  max-width:20ch;text-wrap:balance}
.ff-head h1 em{font-weight:400;font-style:italic}
.ff-head p{color:var(--ff-muted);max-width:60ch;margin:0}

/* ------------------------------------------------------------------
   Tema-overrides: Kadence sætter globalt `h1{text-transform:capitalize}`.
   Mockuppet bruger sentence-case — overrider det her. Baggrunden
   efterlades gennemsigtig, så header og filter bruger samme baggrund
   som resten af siden (ingen boks bag teksten).
   ------------------------------------------------------------------ */
.ff-head{color:var(--ff-text)}
.ff-head h1{text-transform:none;letter-spacing:-.012em}
.ff-head h1 em{font-style:italic;font-weight:400}
.ff-kicker{text-transform:uppercase;letter-spacing:.22em}
@media (min-width:900px){
  .ff-head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end}
  .ff-kicker{grid-column:1/-1}
  .ff-head p{padding-bottom:.4rem}
}

/* ---------- filterbjælken ---------- */
.ff-filter{position:static;
  border-block:1px solid var(--ff-line)}
.ff-filter-in{display:flex;flex-direction:column;gap:0;padding-block:clamp(.85rem,2vw,1.05rem)}
.ff-row{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.25rem;justify-content:space-between}

/* segmenteret hovedkategori-vælger */
.ff-seg{display:inline-flex;gap:.25rem;padding:.25rem;border:1px solid var(--ff-line);border-radius:999px;
  background:rgba(255,255,255,.02);flex-wrap:wrap}
.ff-seg button{font-family:"REM-Regular",Verdana,Arial,sans-serif;font-size:.87rem;color:var(--ff-muted);
  background:none;border:0;cursor:pointer;padding:.55rem 1.1rem;border-radius:999px;
  display:inline-flex;align-items:center;gap:.45rem;
  text-transform:none;letter-spacing:normal;
  transition:background-color .25s ease,color .25s ease}
.ff-seg button:hover{color:var(--ff-white)}
.ff-seg button[aria-pressed="true"]{background:rgba(141,141,255,.16);color:var(--ff-white)}
.ff-seg button[aria-pressed="true"] .ff-n{color:rgba(255,255,255,.7)}

.ff-n{font-size:.75rem;color:var(--ff-faint);font-variant-numeric:tabular-nums}

/* type-knap + søgefelt */
.ff-right{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;flex:1 1 auto;justify-content:flex-end}
@media (min-width:760px){.ff-right{flex-wrap:nowrap}}

.ff-toggle{flex:none;font-family:"REM-Regular",Verdana,Arial,sans-serif;font-size:.87rem;color:var(--ff-muted);
  cursor:pointer;background:rgba(255,255,255,.02);border:1px solid var(--ff-line);border-radius:999px;
  padding:.55rem 1rem;display:inline-flex;align-items:center;gap:.5rem;
  transition:color .25s ease,border-color .25s ease,background-color .25s ease}
.ff-toggle:hover{color:var(--ff-white);border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.04)}
/* Type-knappen viser ALDRIG lilla — også når panelet er udvidet eller en
   type er valgt. Kun den aktive hovedkategori-pill bruger lilla accent. */
.ff-toggle[aria-expanded="true"]{color:var(--ff-white);border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.04)}
.ff-toggle.is-set{color:var(--ff-white);border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.04)}
.ff-chev{width:.7rem;height:.7rem;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.ff-toggle[aria-expanded="true"] .ff-chev{transform:rotate(180deg)}
.ff-x{display:inline-grid;place-items:center;width:1.1rem;height:1.1rem;border-radius:50%;
  background:rgba(255,255,255,.14);font-size:.8rem;line-height:1}
.ff-x:hover{background:rgba(255,255,255,.28)}

/* ------------------------------------------------------------------
   Fokus-/hover-fix: temaet (Kadence) sætter en solid lilla baggrund via
   globale `button:hover/:focus/:active`-regler. Når man klikker på en
   filterknap og bevarer fokus/hover, skinner den fulde lilla fyld
   igennem, indtil man klikker et andet sted. Vi overstyrer det her med
   eksplicitte baggrunde (med !important, så temaet aldrig trumfer), så
   filterknapperne kun viser de tilsigtede nuancer — aldrig solid lilla.
   ------------------------------------------------------------------ */
.ff-seg button, .ff-seg button:hover, .ff-seg button:focus, .ff-seg button:focus-visible, .ff-seg button:active,
.ff-toggle, .ff-toggle:hover, .ff-toggle:focus, .ff-toggle:focus-visible, .ff-toggle:active,
.ff-chips button, .ff-chips button:hover, .ff-chips button:focus, .ff-chips button:focus-visible, .ff-chips button:active,
.ff-search .ff-clear, .ff-search .ff-clear:hover, .ff-search .ff-clear:focus, .ff-search .ff-clear:active{
  background-color: rgba(255,255,255,0) !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Fokus-/hover-kant: temaet sætter en lilla fokus-border (rgb 78,78,255).
   Dæmp den til en neutral kant, så filterknapperne aldrig får lilla ramme
   når de bevarer fokus efter et klik. */
.ff-seg button:focus, .ff-seg button:focus-visible,
.ff-toggle:focus, .ff-toggle:focus-visible, .ff-toggle:hover, .ff-toggle[aria-expanded="true"],
.ff-chips button:focus, .ff-chips button:focus-visible, .ff-chips button:hover,
.ff-search .ff-clear:focus, .ff-search .ff-clear:focus-visible{
  border-color: rgba(255,255,255,.35) !important;
}
/* Den lilla nuance skal kun optræde på de AKTIVE valg (hovedkategori-pill
   og valgte type-chips). Type-knappen skal ALTID være neutral. */
.ff-seg button[aria-pressed="true"]{background-color:rgba(141,141,255,.16) !important}
.ff-chips button[aria-pressed="true"]{background-color:rgba(141,141,255,.14) !important}
/* Type-knappen: aldrig lilla, uanset tilstand. */
.ff-toggle, .ff-toggle[aria-expanded="true"], .ff-toggle.is-set{background-color:rgba(255,255,255,.04) !important}
/* Hover: kun en meget let hvid nuance, aldrig lilla. */
.ff-toggle:hover, .ff-toggle:focus, .ff-toggle:focus-visible,
.ff-chips button:hover, .ff-chips button:focus, .ff-chips button:focus-visible{background-color:rgba(255,255,255,.04) !important}

.ff-search{position:relative;display:flex;align-items:center;flex:0 1 260px;min-width:min(200px,100%)}
.ff-search svg{position:absolute;left:.85rem;width:15px;height:15px;color:var(--ff-faint);pointer-events:none}
.ff-search input{width:100%;font-family:inherit;font-size:.9rem;color:var(--ff-white) !important;
  -webkit-text-fill-color:var(--ff-white) !important;
  background:rgba(255,255,255,.03);border:1px solid var(--ff-line);border-radius:999px;
  padding:.62rem 2.4rem;transition:border-color .25s ease,background-color .25s ease}
.ff-search input::placeholder{color:var(--ff-faint) !important;-webkit-text-fill-color:var(--ff-faint) !important}
/* Fjern browserens indbyggede ryd-knap (x) på type=search — vi har vores egen .ff-clear. */
.ff-search input::-webkit-search-cancel-button,
.ff-search input::-webkit-search-decoration,
.ff-search input::-webkit-search-results-button,
.ff-search input::-webkit-search-results-decoration{-webkit-appearance:none;display:none}
.ff-search input:focus{outline:none;border-color:rgba(141,141,255,.55);background:rgba(141,141,255,.05)}
.ff-search .ff-clear{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);
  width:1.5rem;height:1.5rem;border:0;border-radius:50%;margin:0;padding:0;
  background:none;color:var(--ff-faint);cursor:pointer;display:none;
  place-items:center;align-items:center;justify-content:center;
  font-size:1.15rem;line-height:1;font-weight:400;text-align:center}
.ff-search .ff-clear:hover{color:var(--ff-white)}
.ff-search[data-filled="true"] .ff-clear{display:grid}

/* sammenfoldeligt typepanel — mellemrummet ligger indeni, så det
   folder sammen med panelet og luften over/under bjælken bliver ens */
.ff-panel{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1),opacity .3s ease}
.ff-panel[data-open="true"]{grid-template-rows:1fr;opacity:1}
.ff-panel-inner{overflow:hidden;min-height:0}
.ff-chips{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:clamp(.7rem,1.6vw,.9rem)}
.ff-chips button{font-family:"REM-Regular",Verdana,Arial,sans-serif;font-size:.8rem;color:var(--ff-muted);
  background:transparent;cursor:pointer;padding:.5rem .9rem;border:1px solid var(--ff-line);
  border-radius:var(--ff-radius);display:inline-flex;align-items:center;gap:.45rem;
  transition:color .25s ease,border-color .25s ease,background-color .25s ease}
.ff-chips button:hover{color:var(--ff-white);border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.04)}
.ff-chips button[aria-pressed="true"]{color:var(--ff-white);border-color:rgba(141,141,255,.75);
  background:rgba(141,141,255,.14)}
.ff-chips button[aria-pressed="true"] .ff-n{color:rgba(255,255,255,.65)}

/* ---------- filtrering af eksisterende produktionselementer ---------- */
.ff-hidden{display:none !important}

/* Domino-fade: når der skiftes kategori/type, fader de synlige produktioner
   ind en ad gangen ned ad siden (stagger), så man tydeligt ser at noget skifter.
   Kun opacity+transform animeres — layoutet ændres ikke. */
@keyframes ff-domino{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
.ff-domino-in{
  animation:ff-domino .4s ease both;
  will-change:opacity,transform}
@media (prefers-reduced-motion:reduce){
  .ff-domino-in{animation:none}
}

/* Luft fra filterbjælkens nederste streg ned til produktionerne. */
.produktioner-grid{margin-top:clamp(1.25rem,2.2vw,2rem)}

/* ---------- indlæsning + tom tilstand ---------- */
.ff-loader{display:flex;justify-content:center;margin-top:clamp(2.5rem,5vw,4rem)}
.ff-loader[hidden]{display:none}
.ff-loader span{font-family:"REM-Regular",Verdana,Arial,sans-serif;font-size:.82rem;letter-spacing:.06em;
  color:var(--ff-faint);display:inline-flex;align-items:center;gap:.6rem}
.ff-loader span::before{content:"";width:14px;height:14px;border-radius:50%;
  border:1.5px solid rgba(141,141,255,.3);border-top-color:var(--ff-peri);animation:ff-spin .7s linear infinite}
@keyframes ff-spin{to{transform:rotate(1turn)}}

.ff-empty{padding:clamp(3rem,7vw,5rem) 0;text-align:center;color:var(--ff-muted)}
.ff-empty[hidden]{display:none}
.ff-empty strong{font-family:"Libre Baskerville",Georgia,serif;color:var(--ff-white);display:block;
  font-size:1.3rem;margin-bottom:.5rem}
.ff-empty button{background:none;border:0;cursor:pointer;color:var(--ff-peri);font-family:inherit;
  font-size:inherit;text-decoration:underline;text-underline-offset:3px;padding:0;margin-top:1rem}
.ff-empty button:hover{color:var(--ff-white)}

/* ---------- små skærme (skal stå efter grundreglerne) ---------- */
@media (max-width:600px){
  /* Kategoribjælken: .ff-seg er kun en transparent scrollbar. Baggrund + border
     + fade ligger på .ff-row (fast ramme der IKKE scroller), så de aldrig kan
     scrolle med knapperne. Knapperne overflower frit mod højre. */
  .ff-row{--ff-gutter:1.5rem;position:relative}   /* = sidens kant på mobil (24px) */
  .ff-row::before{content:"";position:absolute;top:0;bottom:auto;left:0;z-index:0;
    right:calc(var(--ff-gutter) * -1);            /* rammen strækker sig til skærmkanten */
    pointer-events:none;
    background:rgba(255,255,255,.02);
    border:1px solid var(--ff-line);
    border-right:0;
    border-radius:999px 0 0 999px;            /* åben højre side */
    /* Kun den øverste række (kategoribjælken) får rammen — ikke Type+søg. */
    height:2.9rem}
  /* Fade-overlay i højre kant af kategoribjælken: fast (på .ff-row), og fader
     mod SIDEBAGGRUNDEN (transparent), ikke sort. */
  .ff-row::after{content:"";position:absolute;top:0;bottom:auto;z-index:1;
    right:calc(var(--ff-gutter) * -1);            /* faden strækker sig til skærmkanten */
    width:1.5rem;height:2.9rem;pointer-events:none;
    background:linear-gradient(90deg,rgba(37,44,57,0),rgba(37,44,57,.92));
    border-radius:0}

  /* .ff-seg: ren scrollbar, transparent, flugter venstre med Type+søg (x=24),
     fylder linjen og bryder kun ud af den HØJRE padding, så knapperne kan
     scrolle ud til skærmkanten. Mere venstre-padding så "Alle" ikke sidder ude. */
  .ff-seg{flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-ms-overflow-style:none;
    width:auto;flex:1 1 auto;height:2.9rem;align-items:center;
    margin-right:calc(var(--ff-gutter) * -1);
    padding-left:.5rem;padding-right:0;
    scroll-padding-left:.5rem;
    background:none;border:0;position:relative;z-index:2;
    scroll-snap-type:x proximity}
  /* afstand efter sidste knap, når der er scrollet i bund.
     padding-right på en scroll-container ignoreres i flere browsere — brug en spacer. */
  .ff-seg::after{content:"";flex:none;width:var(--ff-gutter)}
  .ff-seg::-webkit-scrollbar{display:none}
  .ff-seg button{white-space:nowrap;scroll-snap-align:start}
  .ff-right{width:100%;flex-wrap:nowrap;gap:.5rem;position:relative;z-index:2}
  .ff-search{flex:1 1 120px;min-width:0}
  .ff-search input{padding-inline:2.2rem 2rem;font-size:.85rem}
  .ff-toggle{padding:.5rem .85rem;font-size:.84rem}
  .ff-panel[data-open="true"] .ff-panel-inner{max-height:46vh;overflow-y:auto;overscroll-behavior:contain}
  .ff-panel{position:relative;z-index:2}
}

@media (prefers-reduced-motion:reduce){
  .ff-panel,.ff-chev,.ff-seg button,.ff-chips button,.ff-toggle{transition:none}
  .ff-loader span::before{animation:none}
}