/* ==========================================================================
   Bypuls – feedsektion ("Et almindeligt feed viser alt." → "Bypuls viser kun byen.")
   Alle klasser har præfikset bpf- og alle tokens ligger på .bpf, så intet lækker
   ind i resten af sitet. Breakpoint 960px skal matche MOBILE_BP i feed-section.js.
   bypuls.pro: byfarven kommer fra sidens by (.t-<slug> i towns.css, README punkt 6), fontene er sitets egne
   (tokens.css), og uden JS står slutbilledet ligesom med reduceret bevægelse.
   ========================================================================== */

/* Pin-wrapper: giver scroll-længde, sektionen selv beholder sin størrelse */
.bpf-pin{position:relative}
.bpf-pin > .bpf{position:sticky;top:var(--bpf-top,0px)}
.bpf-pin.is-static{height:auto !important}
.bpf-pin.is-static > .bpf{position:relative;top:auto}

.bpf{
  --bpf-paper:#FFFFFF;
  --bpf-tint:#F6F1F8;
  --bpf-ink:#17141C;
  --bpf-muted:#675F72;
  --bpf-lyng:#7A2C91;
  --bpf-lyng-hover:#65227A;
  --bpf-cross:#E0322E;            /* bruges kun til krydset */
  --bpf-town:var(--town,#0B2463);           /* byfarve – fra .t-<slug> (towns.css) */
  --bpf-town-on:var(--town-on,#fff);        /* tekst på byfarven */
  --bpf-town-ink:var(--town-ink,var(--bpf-town)); /* byfarven som tekst på hvidt */
  --bpf-skeleton:#ECEAF0;
  --bpf-display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --bpf-text:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;

  position:relative;
  background:var(--bpf-tint);
  color:var(--bpf-ink);
  font-family:var(--bpf-text);
  line-height:1.45;
  padding:clamp(28px,4.5vw,56px) clamp(20px,4.5vw,56px);
}
.bpf *,.bpf *::before,.bpf *::after{box-sizing:border-box}
.bpf :focus-visible{outline:2px solid var(--bpf-lyng);outline-offset:3px}

/* ---------- layout (desktop) ---------- */
/* bypuls.pro: feed og telefon holdes samlet i en bredde på 1180 px, også på brede skærme */
.bpf-grid{will-change:transform;max-width:1180px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:clamp(24px,6vw,96px);row-gap:clamp(28px,4vw,52px);align-items:start}
.bpf-heads{grid-column:1;display:grid}
.bpf-area{grid-column:1;position:relative}
.bpf-phonecol{grid-column:2;grid-row:1 / span 2;align-self:center}

/* ---------- headline swap ---------- */
.bpf-h{grid-area:1/1;margin:0;font:700 clamp(40px,5.4vw,66px)/.98 var(--bpf-display);letter-spacing:-.035em;text-wrap:balance;
  transition:opacity .5s ease,transform .5s ease}
.bpf-h--b{opacity:0;transform:translateY(16px)}
.bpf-h--b em{font-style:normal;color:var(--bpf-lyng)}
.bpf.is-swapped .bpf-h--a{opacity:0;transform:translateY(-16px)}
.bpf.is-swapped .bpf-h--b{opacity:1;transform:none}
/* den indgående overskrift venter, til den udgående er væk – ingen overlap */
.bpf-h--a{transition-delay:.14s}
.bpf.is-swapped .bpf-h--a{transition-delay:0s}
.bpf.is-swapped .bpf-h--b{transition-delay:.14s}

/* ---------- cards ---------- */
.bpf-cards{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-content:start}
.bpf-cards--locals{position:absolute;inset:0}

.bpf-card{position:relative;background:var(--bpf-paper);border-radius:16px;padding:14px 14px 14px 18px;min-height:100px;margin:0;
  display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:14px;align-items:center;min-width:0}
.bpf-card--noimg{grid-template-columns:minmax(0,1fr)}
.bpf-k{font-size:13px;color:var(--bpf-muted)}
.bpf-t{font:600 16.5px/1.22 var(--bpf-display);margin:4px 0 0;letter-spacing:-.005em}
.bpf-s{font-size:13.5px;margin-top:4px;opacity:.8}
.bpf-card img{width:72px;height:72px;border-radius:12px;object-fit:cover;display:block}
/* bypuls.pro: et lokalt kort uden Commons-foto får kategoriens motiv (som karrusellen); tilbuddet appens tilbudsfarve */
.bpf-art{position:relative;display:block;width:72px;height:72px;border-radius:12px;overflow:hidden;color:var(--m,var(--bpf-lyng));background:color-mix(in srgb,var(--m,var(--bpf-lyng)) 12%,#fff)}
.bpf-art .ph-pat path{stroke-width:1.6;opacity:.5}
.bpf-art--offer{background:color-mix(in srgb,var(--bpf-town) 14%,#fff);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--bpf-town) 55%,#fff)}
.bpf-card--local .bpf-k [data-chip] b{font-weight:600}
.bpf-card--noise{will-change:transform,opacity,filter}
.bpf-card--local{box-shadow:inset 0 0 0 2px var(--bpf-lyng);opacity:0;transform:translateY(10px) scale(.96);will-change:transform,opacity}
.bpf-card--local .bpf-k{color:var(--bpf-lyng);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:12px;font-variant-numeric:tabular-nums}
.bpf-card--local[data-kind="offer"] .bpf-k{color:var(--bpf-town-ink)}

/* ---------- cross ---------- */
.bpf-cross{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);overflow:visible;pointer-events:none;z-index:3}
.bpf-cross path{fill:none;stroke:var(--bpf-cross);stroke-width:18;stroke-linecap:round}
.bpf-xlabel{position:absolute;left:50%;top:50%;z-index:4;white-space:nowrap;pointer-events:none;
  background:var(--bpf-cross);color:#fff;font:700 15px/1 var(--bpf-text);letter-spacing:.06em;text-transform:uppercase;
  padding:10px 14px;border-radius:10px;box-shadow:0 10px 24px -8px rgba(224,50,46,.55);
  opacity:0;transform:translate(-50%,-50%) rotate(-6deg) scale(.6)}

/* ---------- payoff ---------- */
/* opacity/transform styres af scroll i JS */
.bpf-payoff{position:absolute;inset:0;max-width:520px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  opacity:0;transform:translateY(16px);pointer-events:none}
.bpf-payoff h3{margin:0;font:700 clamp(24px,2.6vw,34px)/1.06 var(--bpf-display);letter-spacing:-.02em;text-wrap:balance}
.bpf-payoff p{margin:12px 0 0;color:var(--bpf-muted);font-size:17px;max-width:38ch}
.bpf-btn{display:inline-flex;align-items:center;border:0;border-radius:999px;padding:12px 18px;margin-top:20px;cursor:pointer;
  font:600 16px/1.2 var(--bpf-text);background:var(--bpf-lyng);color:#fff;text-decoration:none}
.bpf-btn:hover{background:var(--bpf-lyng-hover)}
.bpf-for{margin-top:10px;font-size:13.5px;color:var(--bpf-muted)}

/* ---------- phone ---------- */
.bpf-phone{width:300px;max-width:100%;aspect-ratio:300/620;border-radius:46px;background:#141218;padding:9px;margin-inline:auto}
.bpf-screen{position:relative;height:100%;border-radius:38px;overflow:hidden;background:#F5F5F8;display:flex;flex-direction:column}
.bpf-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:24px;border-radius:99px;background:#141218;z-index:2}

/* bypuls.pro: telefonen er appens skærm (phone.css: statuslinje, titel, Puls-kortet, ListRow og tilbudskortet) i rigtig
   iPhone-bredde (393 px), skaleret samlet ned i rammen som et skærmbillede (Ulrik 25.10.2026: 1:1 med appen; B3-gulvet
   gælder ikke for de dekorative, aria-hidden telefoner). JS sætter --bpf-scale og højden. */
.bpf-app{position:absolute;left:0;top:0;width:393px;height:806px;overflow:hidden;transform-origin:0 0;transform:scale(var(--bpf-scale,.7176))}
.bpf-app .ph-status .ph-island{display:none}
.bpf-app :is(.ph-status,.ph-head){position:relative;z-index:1;background:var(--ph-bg,#fff)}
/* appen ruller, mens kortene lander (--bpf-scroll fra feed-section.js); statuslinje og titel står fast */
.bpf-app .ph-body{transform:translateY(calc(-1 * var(--bpf-scroll,0px)))}
.bpf-slots{display:grid;gap:.75rem}
/* Pladserne: en tom plads i kortets form; højden er kortets (sat af JS, så den matcher appens kort) */
.bpf-slot{border-radius:1.25rem;background:var(--bpf-skeleton)}
.bpf-slot[data-kind="offer"]{border-radius:1.4rem}

.bpf-fly{position:absolute;inset:0;pointer-events:none;z-index:5;--ph-bg:#FFFFFF;--ph-card:#F2F1F6;--ph-ink:#17141C;--ph-ink2:#5C5866;--ph-line:#E3E0E8} /* appens farver (phone.css .ph-app) */
.bpf-fly .bpf-pcard{position:absolute;opacity:0;transform-origin:0 0;will-change:transform,opacity;
  font:400 16px/1.3 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;color:var(--ph-ink,#17141C)}


/* ---------- end state without motion (prefers-reduced-motion) ---------- */
.bpf.is-static [data-bpf-noise],.bpf.is-static .bpf-cross,.bpf.is-static .bpf-cards--locals,.bpf.is-static .bpf-fly{display:none}
.bpf.is-static .bpf-xlabel{display:none}
.bpf.is-static .bpf-payoff{position:static;opacity:1;transform:none;pointer-events:auto}
/* uden JS: samme slutbillede (telefonens kort står i HTML'en) */
html:not(.js) .bpf [data-bpf-noise],html:not(.js) .bpf .bpf-cross,html:not(.js) .bpf .bpf-xlabel,html:not(.js) .bpf .bpf-cards--locals,html:not(.js) .bpf .bpf-fly{display:none}
html:not(.js) .bpf .bpf-payoff{position:static;opacity:1;transform:none;pointer-events:auto}
html:not(.js) .bpf .bpf-h--a{opacity:0}
html:not(.js) .bpf .bpf-h--b{opacity:1;transform:none}

/* ---------- mobile: cards and phone share one stage ---------- */
@media (max-width:960px){
  .bpf-pin{--bpf-offset:76px}     /* bypuls.pro: den faste header (bund 74 px) dækker ellers toppen af sektionen */
  .bpf-grid{grid-template-columns:minmax(0,1fr);row-gap:24px}
  .bpf-heads{grid-row:1;grid-column:1}
  .bpf-h{font-size:clamp(34px,9.6vw,48px)}
  .bpf-area{grid-row:2;grid-column:1;z-index:2}
  .bpf-phonecol{grid-row:2;grid-column:1;align-self:start;justify-self:center;z-index:1;
    opacity:0;transform:translateY(24px) scale(.94);transition:opacity .5s ease,transform .5s ease}
  .bpf.is-phone-on .bpf-phonecol,html:not(.js) .bpf-phonecol{opacity:1;transform:none}
  .bpf-phone{width:min(290px,80vw)}
  .bpf-cards{grid-template-columns:minmax(0,1fr);gap:8px}
  [data-bpf-noise] .bpf-card:nth-child(n+6){display:none}
  .bpf-card{min-height:74px;padding:10px 10px 10px 14px;grid-template-columns:minmax(0,1fr) 54px;gap:12px;border-radius:14px}
  .bpf-card img,.bpf-art{width:54px;height:54px;border-radius:10px}
  .bpf-t{font-size:15px}
  .bpf-k{font-size:12px}
  .bpf-s{font-size:12.5px}
  .bpf-cross path{stroke-width:14}
  .bpf-xlabel{font-size:13px;padding:8px 12px}
  .bpf-payoff{position:static;max-width:none;display:block;grid-row:3;grid-column:1}
}