/* LiveTV.eu - Black Friday 2026 preview (tijdelijke homepagesectie, includes/blackfriday.php + assets/js/blackfriday.js).
 * Zelfde opbouw als de December-preview (teaserbalk -> uitklapbaar paneel), eigen bf-klassen; alleen geladen zolang actief.
 * Partneruitingen ongewijzigd en volledig zichtbaar (object-fit:contain, nooit groter dan de bron). */
.bf{scroll-margin-top:clamp(90px,10vw,140px);--bf-ink:#05070f;--bf-gold:#f6c86a;--bf-line:rgba(246,200,106,.42);padding-inline:var(--gx)}
.home-main > .bf{margin-top:clamp(16px,1.6vw,28px)}
.bf-teaser,.bf-panel{--gx:clamp(16px,2.6vw,40px);position:relative;overflow:hidden;isolation:isolate;border-radius:20px;
  background:radial-gradient(70% 140% at 100% 0%,rgba(246,200,106,.16),transparent 60%),
             repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 14px,transparent 14px 28px),var(--bf-ink);
  border:1px solid var(--bf-line);
  box-shadow:0 0 0 1px rgba(246,200,106,.08),0 0 26px rgba(246,200,106,.14),0 24px 60px rgba(0,0,0,.45)}
.bf-eyebrow{margin:0 0 4px;font-size:.72rem;font-weight:800;letter-spacing:.2em;line-height:1.3;text-transform:uppercase;color:var(--bf-gold)}

/* ----------------------------------------------------------- teaser */
.bf-teaser{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:96px;
  padding:12px var(--gx) 12px clamp(14px,1.8vw,28px)}
.bf-teaser[hidden]{display:none}
.bf-teaser-copy{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);min-width:0}
.bf-tag{width:clamp(36px,3.2vw,46px);height:auto;flex:0 0 auto;fill:none;stroke:var(--bf-gold);stroke-width:2.6;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(246,200,106,.5))}
.bf-teaser-title,.bf-title{margin:0;font-weight:800;line-height:1;letter-spacing:.01em;text-transform:uppercase;color:#fff}
.bf-teaser-title{font-size:clamp(1.55rem,1rem + 1.9vw,2.6rem)}
.bf-teaser-title span,.bf-title span{background:linear-gradient(180deg,#ffe3a3,#f6c86a 55%,#d99a2b);-webkit-background-clip:text;background-clip:text;color:transparent}
.bf-teaser-sub{margin:4px 0 0;font-size:clamp(.82rem,.76rem + .25vw,1rem);font-weight:600;color:#dfe8ff}

/* ----------------------------------------------------------- knoppen */
.bf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;min-height:46px;padding:0 20px;
  border-radius:12px;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;
  transition:background-color .2s ease,box-shadow .2s ease,border-color .2s ease}
.bf-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bf-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.bf-btn--open{color:#1b1300;background:linear-gradient(180deg,#ffd98a,#e9a93a);border:1px solid rgba(255,227,163,.8);
  box-shadow:0 0 18px rgba(246,200,106,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.bf-btn--open:hover{box-shadow:0 0 26px rgba(246,200,106,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.bf-btn--close{color:#fff;background:rgba(5,7,15,.78);border:1px solid rgba(246,200,106,.45)}
.bf-btn--close:hover{background:rgba(30,24,10,.9);border-color:rgba(255,227,163,.75)}
.bf-btn--close svg{transform:rotate(180deg)}

/* ------------------------------------------------------------ paneel */
.bf-panel[hidden]{display:none}
.bf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:clamp(20px,2.4vw,34px) var(--gx) 0}
.bf-head-copy{min-width:0;max-width:660px}
.bf-title{font-size:clamp(2rem,1.2rem + 2.8vw,3.4rem);outline:none}
.bf-lead{margin:12px 0 0;max-width:40em;font-size:clamp(.95rem,.9rem + .25vw,1.1rem);line-height:1.5;color:#e6edff}

/* ------------------------------------------------------------ kaarten: desktop één rij, mobiel onder elkaar */
.bf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,340px));justify-content:start;gap:clamp(14px,1.6vw,22px);
  margin:0;padding:clamp(18px,2vw,26px) var(--gx) 0;list-style:none}
.bf-card{min-width:0}
.bf-card-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none;border-radius:14px}
.bf-card-link:focus-visible{outline:2px solid #fff;outline-offset:4px}
.bf-media{position:relative;display:grid;place-items:center;flex:1 1 auto;min-height:230px;padding:10px;overflow:hidden;border-radius:14px;
  border:1px solid var(--bf-line);background:radial-gradient(80% 90% at 50% 110%,rgba(246,200,106,.18),transparent 60%),#0b1020;
  transition:border-color .2s ease,box-shadow .2s ease}
.bf-creative{display:block;width:auto;height:auto;max-width:100%;
  filter:drop-shadow(0 0 16px rgba(0,0,0,.6))}
.bf-media--text{place-items:center start;align-content:center;gap:8px;padding:clamp(16px,1.8vw,24px);
  background:linear-gradient(135deg,#0f2a44 0%,#0b1626 55%,#070b14 100%)}
.bf-word{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem);font-weight:800;line-height:1.05;color:#fff;letter-spacing:-.01em}
.bf-word-sub{font-size:.95rem;line-height:1.4;color:#cfe0f5}
.bf-cta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:8px 14px;border-radius:10px;background:#00a8e1;color:#fff;
  font-size:.92rem;font-weight:700}
/* Tweede tekstkaart (DAZN): neutraal donker met de gouden huisaccent, geen nagemaakte merkstijl. */
.bf-media--alt{background:linear-gradient(135deg,#23232a 0%,#101016 55%,#05070f 100%)}
.bf-media--alt .bf-cta{background:var(--bf-gold);color:#1b1300}
.bf-body{display:flex;flex-direction:column;gap:3px;padding:10px 2px 0}
.bf-name{font-size:1rem;color:#fff}
.bf-meta{font-size:.84rem;color:#9fb2cf}
.bf-badge{display:inline-block;margin-inline-start:6px;padding:2px 7px;border-radius:5px;background:var(--bf-gold);vertical-align:2px;
  color:#1b1300;font-size:.66rem;font-weight:800;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}
@media (hover:hover){
  .bf-card-link:hover .bf-media{border-color:rgba(255,227,163,.85);box-shadow:0 0 22px rgba(246,200,106,.25)}
}
.bf-note{margin:0;padding:clamp(14px,1.6vw,20px) var(--gx) clamp(16px,1.8vw,24px);font-size:.78rem;line-height:1.45;color:#8ea4c3}

/* ------------------------------------------------------------ mobiel */
@media (max-width:759px){
  .bf-teaser,.bf-panel{border-radius:16px}
  .bf-teaser{flex-wrap:wrap;gap:12px;min-height:0;padding:12px 14px}
  .bf-teaser-copy{flex:1 1 210px}
  .bf-teaser-sub{font-size:.8rem}
  .bf-btn--open{min-height:42px;padding:0 16px}
  .bf-head{padding:16px 14px 0}
  .bf-btn--close{min-height:40px;padding:0 14px;font-size:.92rem}
}
@media (max-width:899px){
  .bf-cards{grid-template-columns:repeat(2,minmax(0,340px))}
}
@media (max-width:599px){
  .bf-cards{grid-template-columns:minmax(0,1fr);padding-inline:14px}
  .bf-note{padding-inline:14px}
}
@media (max-width:379px){
  .bf-tag{display:none}
  .bf-btn--close span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bf-btn--close{width:44px;padding:0}
}
@media (prefers-reduced-motion:reduce){
  .bf-btn,.bf-media{transition:none}
}