/* 2025-katalogerne: samme mål og stil som Landingi-widgetsene, men i et rigtigt grid */
.fk-katalog-sektion { position: relative; padding: 0 0 50px; }
.fk-wrap { width: 1200px; margin: 0 auto; }

.fk-sort { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 0 45px; }
.fk-sort button {
  height: 32px; padding: 0 18px; border: 0; border-radius: 4px; cursor: pointer;
  font: 700 12px/1 Lato, arial, sans-serif; text-transform: uppercase; color: #fff;
  background: linear-gradient(rgb(25, 0, 72), rgb(44, 0, 120));
  box-shadow: rgba(0, 0, 0, .5) 1px 1px 3px 0px; opacity: .65; transition: opacity .3s, background .3s;
}
.fk-sort button:hover { opacity: 1; }
.fk-sort button[aria-pressed="true"] { opacity: 1; background: linear-gradient(rgb(67, 16, 211), rgb(44, 0, 120)); }
.fk-sort button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.fk-grid { display: grid; grid-template-columns: repeat(5, 200px); column-gap: 50px; row-gap: 55px; }
.fk-card { position: relative; width: 200px; }
.fk-cover { display: block; width: 200px; height: 265px; transition: all .6s ease; }
.fk-cover:hover { transform: scale(1.04); }
.fk-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fk-btn {
  position: absolute; left: 9px; top: 225px; width: 182px; height: 32px; z-index: 2;
  display: flex; align-items: center; justify-content: center; border-radius: 4px;
  background: linear-gradient(rgb(25, 0, 72), rgb(44, 0, 120)); box-shadow: rgba(0, 0, 0, .5) 1px 1px 3px 0px;
  font: 700 12px/15.6px Lato, arial, sans-serif; color: #fff !important; text-decoration: none !important;
}
.fk-cap { margin-top: 10px; height: 25px; }
.fk-cap p { margin: 0; font: 300 12px/25.2px Lato, arial, sans-serif; color: #fff; text-align: center; white-space: nowrap; }
.fk-cap b { font-weight: 700; }
.fk-cap a { color: #fff; text-decoration: none; }

/* mobil: samme mål som Landingis mobil-layout (320px container, 2 kolonner) */
@media (max-width: 763px) {
  .fk-katalog-sektion { padding-bottom: 30px; }
  .fk-wrap { width: 320px; }
  .fk-sort { margin-bottom: 30px; gap: 8px; }
  .fk-sort button { padding: 0 12px; font-size: 10px; height: 30px; }
  .fk-grid { grid-template-columns: repeat(2, 150px); column-gap: 20px; row-gap: 29px; }
  .fk-card { width: 150px; }
  .fk-cover { width: 150px; height: 200px; }
  .fk-btn { left: 5px; top: 165px; width: 142px; height: 30px; font-size: 10px; line-height: 13px; }
  .fk-cap { margin-top: 10px; height: 21px; }
  .fk-cap p { font-size: 10px; line-height: 21px; }
}
@media (prefers-reduced-motion: reduce) { .fk-cover { transition: none; } .fk-cover:hover { transform: none; } }

/* ---------- Nyhed-badge: guld-stjerneskud (bruges på nye kataloger) ---------- */
.fk-ny {
  --s: 58px; position: absolute; top: -14px; right: -14px; z-index: 6; width: var(--s); height: var(--s);
  display: grid; place-items: center; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)) drop-shadow(0 0 10px rgba(255, 194, 61, .35));
}
.fk-ny::before { /* stjerne med 14 takker, roterer langsomt */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 35% 30%, rgb(255, 244, 205), rgb(255, 194, 61) 45%, rgb(255, 128, 50));
  clip-path: polygon(50% 0%, 57.1% 15.5%, 71.7% 5.9%, 72.4% 22.9%, 89.5% 20.5%, 84.1% 36.7%, 100% 43.3%, 87.2% 54.7%,
    98.2% 68.7%, 81.5% 72.2%, 82.5% 89.3%, 67.3% 81.6%, 60.4% 97.3%, 50% 84%, 39.6% 97.3%, 32.7% 81.6%, 17.5% 89.3%,
    18.5% 72.2%, 1.8% 68.7%, 12.8% 54.7%, 0% 43.3%, 15.9% 36.7%, 10.5% 20.5%, 27.6% 22.9%, 28.3% 5.9%, 42.9% 15.5%);
  animation: fk-ny-spin 14s linear infinite;
}
.fk-ny::after { /* glimt der løber hen over */
  content: ""; position: absolute; inset: 18%; border-radius: 50%;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: fk-ny-shine 3.6s ease-in-out infinite 1s;
}
.fk-ny b {
  position: relative; z-index: 1; transform: rotate(-12deg);
  font: italic 900 calc(var(--s) * .2)/1 Lato, arial, sans-serif; letter-spacing: .02em; color: #2a0a48; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
@keyframes fk-ny-spin { to { transform: rotate(360deg); } }
@keyframes fk-ny-shine { 0%, 55% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
.fk-ny--sm { --s: 34px; top: -9px; right: -9px; }
.fk-ny--xs { --s: 24px; top: -7px; right: -7px; }
.fk-ny--xs b { font-size: 6px; }
@media (prefers-reduced-motion: reduce) { .fk-ny::before, .fk-ny::after { animation: none; } }
/* Landingis billed-widget klipper alt udenfor, så stjernen sidder inde i hjørnet her */
.fk-nyhed-wrap .fk-ny { top: 8px; right: auto; left: 8px; --s: 56px; }
@media (max-width: 763px) { .fk-nyhed-wrap .fk-ny { --s: 44px; top: 6px; left: 6px; } }

/* "Nyhed" på SFAC 2026 – samme udtryk som Krudt Tycoon-knappen:
   lilla knap, guld-gradient tekst (Baloo 2), guldstjerne og løbende guldkant */
@property --ny-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.fk-nyhed-kt {
  position: absolute; top: 10px; left: 10px; z-index: 6; isolation: isolate;
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 8px; border-radius: 4px;
  background: linear-gradient(rgb(25, 0, 72), rgb(44, 0, 120));
  box-shadow: rgba(0, 0, 0, .55) 1px 2px 6px 0px, inset 0 0 0 1px rgba(255, 194, 61, .35), 0 0 14px rgba(255, 194, 61, .25);
  pointer-events: none;
}
.fk-nyhed-kt::before {
  content: ""; position: absolute; inset: -1px; border-radius: 5px; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--ny-angle), rgba(255, 194, 61, .15) 0deg, rgba(255, 194, 61, .15) 240deg,
    rgb(255, 230, 160) 295deg, rgb(255, 138, 61) 330deg, rgba(255, 194, 61, .15) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ny-spin 3s linear infinite;
}
.fk-nyhed-kt svg { width: 15px; height: 15px; fill: rgb(255, 194, 61); filter: drop-shadow(0 0 4px rgba(255, 194, 61, .6)); animation: ny-twinkle 2.4s ease-in-out infinite; }
.fk-nyhed-kt b {
  font: 700 13px/1 Lato, arial, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
}
@keyframes ny-spin { to { --ny-angle: 360deg; } }
@keyframes ny-twinkle { 50% { transform: scale(1.18) rotate(18deg); } }
@media (max-width: 763px) { .fk-nyhed-kt { top: 7px; left: 7px; height: 24px; padding: 0 8px 0 6px; } .fk-nyhed-kt b { font-size: 11px; } .fk-nyhed-kt svg { width: 13px; height: 13px; } }
@media (prefers-reduced-motion: reduce) { .fk-nyhed-kt::before, .fk-nyhed-kt svg { animation: none; } }

/* ---------- sortering: samlet glas-pille med "liquid glass" indikator ---------- */
.fk-sort {
  position: relative; display: flex; width: max-content; margin: 0 auto 45px; padding: 5px; gap: 0; flex-wrap: nowrap;
  border-radius: 999px; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)), rgba(20, 8, 50, .35);
  -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .10), 0 14px 34px -14px rgba(0, 0, 0, .8);
}
.fk-sort button {
  position: relative; z-index: 2; height: 36px; padding: 0 20px; border-radius: 999px; opacity: 1;
  background: transparent !important; box-shadow: none !important;
  font: 700 12px/1 Lato, arial, sans-serif; letter-spacing: .04em; color: rgba(255, 255, 255, .62);
  transition: color .9s cubic-bezier(.22, .61, .36, 1);
}
.fk-sort button:hover { color: rgba(255, 255, 255, .9); }
.fk-sort button[aria-pressed="true"] { color: #fff; }
.fk-sort-glass { /* den flydende glasdråbe der glider hen under det valgte punkt */
  position: absolute; z-index: 1; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; pointer-events: none;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, rgba(120, 80, 255, .55), rgba(67, 16, 211, .45));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .55), inset 0 -2px 6px rgba(20, 0, 80, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 18px -4px rgba(67, 16, 211, .75);
  -webkit-backdrop-filter: blur(6px) saturate(1.8); backdrop-filter: blur(6px) saturate(1.8);
  transition: transform 1.1s cubic-bezier(.65, 0, .25, 1), width 1.1s cubic-bezier(.65, 0, .25, 1);
}
.fk-sort-glass.is-moving { animation: fk-liquid 1.1s cubic-bezier(.65, 0, .25, 1); }
@keyframes fk-liquid { /* dråben strækker sig og trækker sig sammen undervejs */
  0% { border-radius: 999px; scale: 1 1; }
  35% { scale: 1.12 .82; }
  65% { scale: .96 1.08; }
  100% { scale: 1 1; }
}
.fk-sort.no-anim .fk-sort-glass { transition: none; }
@media (max-width: 763px) {
  .fk-sort { margin-bottom: 30px; padding: 4px; }
  .fk-sort button { height: 32px; padding: 0 13px; font-size: 10.5px; }
  .fk-sort-glass { top: 4px; bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .fk-sort-glass { transition: none; animation: none !important; } }

/* ---------- EKSEMPEL: liquid glass "SE KATALOGET" (kun SFAC 2026) ---------- */
.fk-lg-box {
  background: none !important; border-radius: 999px !important; overflow: hidden;
  background-color: rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(1.1); backdrop-filter: blur(14px) saturate(1.8) brightness(1.1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(255, 255, 255, .15),
    inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 -10px 18px -10px rgba(120, 80, 255, .55),
    0 8px 20px -6px rgba(0, 0, 0, .6) !important;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s;
}
.fk-lg-box::before { /* lysrefleks i toppen af glasset */
  content: ""; position: absolute; left: 8%; right: 8%; top: 1px; height: 46%; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); opacity: .55;
}
.fk-lg-box::after { /* langsomt glimt der glider hen over */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) -160% 0 / 220% 100% no-repeat;
  animation: fk-lg-shine 5s ease-in-out infinite 1.5s;
}
@keyframes fk-lg-shine { 0%, 60% { background-position: -160% 0; } 100% { background-position: 160% 0; } }
.fk-lg-txt p, .fk-lg-txt a { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); letter-spacing: .04em; }
.widget-image:hover ~ .fk-lg-box, .fk-lg-box:hover { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .fk-lg-box::after { animation: none; } }

/* ---------- UDKAST: liquid glass "SE KATALOGET" på alle kataloger (lidt mørkere glas, så teksten står tydeligt) ---------- */
.fk-lg-box, .fk-btn {
  background-color: rgba(14, 6, 40, .58) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) brightness(.75); backdrop-filter: blur(18px) saturate(1.6) brightness(.75);
}
.fk-btn {
  background-image: none !important; border-radius: 999px; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(255, 255, 255, .15),
    inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 -10px 18px -10px rgba(120, 80, 255, .55),
    0 8px 20px -6px rgba(0, 0, 0, .6) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6); letter-spacing: .04em;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), background-color .4s;
}
.fk-btn::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 1px; height: 46%; border-radius: 999px; z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); opacity: .5;
}
.fk-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .4) 50%, transparent 65%) -160% 0 / 220% 100% no-repeat;
  animation: fk-lg-shine 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .35s + 1.5s);
}
.fk-card:hover .fk-btn { transform: scale(1.04); background-color: rgba(67, 16, 211, .45) !important; }
.fk-lg-box:hover { background-color: rgba(67, 16, 211, .45) !important; }
@media (prefers-reduced-motion: reduce) { .fk-btn::after { animation: none; } }

/* glimtet kører kun, når musen er over knappen/kataloget */
.fk-btn::after, .fk-lg-box::after { animation: none; }
.fk-card:hover .fk-btn::after, .fk-btn:focus-visible::after,
#J09bb2dc05dc89686aff7718c55c7d3c .container:hover .fk-lg-box::after { animation: fk-lg-shine-hover .9s ease-out 1 forwards; }
@keyframes fk-lg-shine-hover { from { background-position: -160% 0; } to { background-position: 160% 0; } }

/* ---------- VALGT: lilla pille (udkast 7) på alle "SE KATALOGET" ---------- */
.fk-btn, .fk-lg-box {
  background: linear-gradient(rgb(67, 16, 211), rgb(44, 0, 120)) !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px -6px rgba(67, 16, 211, .8) !important;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), background .3s, box-shadow .3s;
}
.fk-btn::before, .fk-btn::after, .fk-lg-box::before, .fk-lg-box::after { display: none !important; }
.fk-btn { text-shadow: none; }
.fk-card:hover .fk-btn, .fk-btn:hover,
#J09bb2dc05dc89686aff7718c55c7d3c .container:hover .fk-lg-box {
  transform: scale(1.04);
  background: linear-gradient(rgb(95, 50, 235), rgb(67, 16, 211)) !important;
}
.fk-lg-txt p, .fk-lg-txt a { text-shadow: none; }

/* tekst under kataloger: 1 px større */
.fk-cap p { font-size: 13px; }
#J09bb2dc05dc89686aff7718c55c7d3c .widget-text:not(.fk-lg-txt) p { font-size: 13px !important; }
@media (max-width: 763px) {
  .fk-cap p { font-size: 11px; }
  #J09bb2dc05dc89686aff7718c55c7d3c .widget-text:not(.fk-lg-txt) p { font-size: 11px !important; }
}

/* forsider strækkes til kortets format i stedet for at blive beskåret */
.fk-cover img { object-fit: fill; }
#J09bb2dc05dc89686aff7718c55c7d3c .widget-image img { object-fit: fill !important; }
/* brede forsider (fx Jem & Fix) vises mindre i deres eget format, med bunden på linje med de andre */
.fk-card--wide .fk-cover { height: calc(200px / var(--ar)); margin-top: calc(265px - 200px / var(--ar)); }
@media (max-width: 763px) {
  .fk-card--wide .fk-cover { height: calc(150px / var(--ar)); margin-top: calc(200px - 150px / var(--ar)); }
}

/* ---------- kataloger lagt op via /admin/ ---------- */
.fk-nye[hidden] { display: none !important; }
.fk-nye { position: relative; height: auto !important; padding: 40px 0 10px; }
.fk-nye-h { margin: 0 0 34px; text-align: center; font: italic 700 2.1875rem/1.3 Lato, arial, sans-serif; color: #fff; text-shadow: 0.0625rem 0.0625rem 0.0625rem #000; }
.fk-card--ny .fk-cover { position: relative; }
.fk-nyhed-kt--kort { z-index: 2; }
@media (max-width: 763px) { .fk-nye { padding-top: 24px; } .fk-nye-h { font-size: 1.375rem; margin-bottom: 20px; } }
.fk-nye--samlet { padding-top: 0; }
.fk-nye--samlet .fk-nye-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- fyrværkerivideo.dk: samme katalog-visning som fyrværkerikatalog.dk ---------- */
.fv-kat { padding-top: 30px; }
.fv-kat .fk-wrap { width: auto; max-width: 1200px; padding-inline: 16px; }
.fv-kat .fk-grid { justify-content: center; }
.fv-kat .fk-nye-h { margin-bottom: 34px; }
.fv-kat .fk-katalog-sektion + .fk-katalog-sektion .fk-nye-h { margin-top: 20px; }
@media (min-width: 764px) and (max-width: 1231px) {
  .fv-kat .fk-grid { grid-template-columns: repeat(auto-fill, 200px); column-gap: 40px; }
}
@media (max-width: 763px) {
  .fv-kat .fk-wrap { width: 320px; padding-inline: 0; }
}
.fv-kat-alle { text-align: center; margin: 10px 0 0; }
.fv-kat-alle a { color: #fff; font: 700 13px Lato, arial, sans-serif; opacity: .8; text-decoration: none; }
.fv-kat-alle a:hover { opacity: 1; }
/* årstals-knapper på /kataloger/<år>/ */
.fv-aar-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -14px 0 26px; }
.fv-aar-nav a { padding: 7px 14px; border-radius: 999px; color: rgba(255,255,255,.75); font: 700 13px Lato, arial, sans-serif; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.fv-aar-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.fv-aar-nav a[aria-current="page"] { color: #fff; background: linear-gradient(rgb(67, 16, 211), rgb(44, 0, 120)); box-shadow: 0 6px 16px -6px rgba(67, 16, 211, .8); }
.page-kataloger .fv-kat { padding-top: 10px; }
.fv-kat h1.fk-nye-h { font-size: 2.1875rem; }
@media (max-width: 763px) { .fv-kat h1.fk-nye-h { font-size: 1.375rem; } }