/* ============================================================
   UF Banners (uf-banners.css)
   Loaded by the UF Banners plugin ONLY on pages that show a banner.
   Relies on the .uf-clean tokens + fonts in uf-base.css (site-wide).
   Moved here from uf-base.css, Oct 2026.
   ============================================================ */
/* buttons (self-contained so they work on light + dark) */
.uf-clean .ufbtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:700;font-size:.98rem;
  padding:13px 26px;border-radius:100px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .2s ease, background .2s ease, color .2s ease;}
.uf-clean .ufbtn:hover{transform:translateY(-2px);}
.uf-clean .ufbtn--red{background:var(--red);color:#fff;}
.uf-clean .ufbtn--red:hover{background:#b50000;}
.uf-clean .ufbtn--ink{background:var(--ink);color:#fff;}
.uf-clean .ufbtn--ink:hover{background:#000;}
.uf-clean .ufbtn--light{background:#fff;color:var(--ink);}
.uf-clean .ufbtn--ghost{background:transparent;color:var(--ink);border-color:rgba(29,29,31,.22);}
.uf-clean .ufbtn--ghost:hover{background:var(--ink);color:#fff;}
.uf-clean .ufbtn--ghost-l{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.uf-clean .ufbtn--ghost-l:hover{background:#fff;color:var(--ink);}
/* fill placeholder for banner images */
.uf-clean .uf-ph{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;height:100%;min-height:280px;
  background:repeating-linear-gradient(45deg,#f3f3f1,#f3f3f1 12px,#ededeb 12px,#ededeb 24px);color:#9a9a98;
  font-family:var(--body);text-align:center;}
.uf-clean .uf-ph b{font-weight:700;color:#6e6e73;}
.uf-clean .uf-ph small{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;}
.uf-clean .uf-ph--dark{background:linear-gradient(135deg,#23262b,#3a3f47);color:#aeb3ba;}
.uf-clean .uf-ph--dark b{color:#dfe3e8;}
/* --- generic banner shell --- */
.uf-clean .uf-banner{position:relative;background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;}
.uf-clean .uf-banner__text{padding:clamp(30px,4.5vw,60px);}
.uf-clean .uf-banner__text h2{font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(2rem,4.4vw,3.3rem);line-height:.98;margin:14px 0;}
.uf-clean .uf-banner__text p{color:var(--grey);font-size:1.05rem;max-width:42ch;margin-bottom:24px;}
.uf-clean .uf-banner__cta{display:flex;gap:14px;flex-wrap:wrap;}
/* 3 · split */
.uf-clean .uf-banner--split{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;}
.uf-clean .uf-banner--split .uf-banner__text{align-self:center;}
.uf-clean .uf-banner--split .uf-banner__media{position:relative;min-height:320px;}
.uf-clean .uf-banner--split .uf-banner__media .uf-ph,
.uf-clean .uf-banner--split .uf-banner__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* 4 · feature (full-bleed image + floating card) */
.uf-clean .uf-banner--feature{min-height:460px;display:flex;align-items:flex-end;}
.uf-clean .uf-banner__bg{position:absolute;inset:0;}
.uf-clean .uf-banner__bg .uf-ph,.uf-clean .uf-banner__bg img{width:100%;height:100%;object-fit:cover;}
.uf-clean .uf-banner--feature::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,10,.78) 0%,rgba(8,8,10,.35) 52%,rgba(8,8,10,0) 100%);}
.uf-clean .uf-banner__card{position:relative;z-index:2;margin:clamp(26px,4vw,52px);max-width:540px;}
.uf-clean .uf-banner__card .ey{color:#fff;}
.uf-clean .uf-banner__card h2{font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1;margin:14px 0;}
.uf-clean .uf-banner__card p{color:rgba(255,255,255,.86);max-width:40ch;margin-bottom:24px;}
/* 5 · offer + countdown */
.uf-clean .uf-banner--offer{display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;
  background:linear-gradient(135deg,#1b1b1e,#2c2c31);}
.uf-clean .uf-banner--offer .uf-banner__text h2{color:#fff;}
.uf-clean .uf-banner--offer .uf-banner__text p{color:rgba(255,255,255,.8);}
.uf-clean .uf-banner--offer .ey{color:#fff;}
.uf-clean .countdown{display:flex;flex-wrap:nowrap;gap:8px;margin:4px 0 26px;}
.uf-clean .cd{flex:1 1 0;min-width:0;max-width:80px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:12px 4px;text-align:center;}
.uf-clean .cd b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,4.5vw,1.7rem);color:#fff;line-height:1;}
.uf-clean .cd small{font-size:clamp(.5rem,2.2vw,.58rem);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.uf-clean .uf-banner__deal{display:flex;align-items:center;justify-content:center;background:var(--red);color:#fff;text-align:center;padding:30px;}
.uf-clean .uf-banner__deal .big{font-family:var(--display);font-weight:700;font-size:clamp(3rem,7vw,5rem);line-height:.9;}
.uf-clean .uf-banner__deal .lab{font-family:var(--body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;margin-top:8px;}
/* 6 · carousel */
.uf-clean .uf-carousel{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--card);}
.uf-clean .uf-carousel__track{display:flex;transition:transform .55s cubic-bezier(.6,.05,.1,1);}
.uf-clean .uf-carousel__slide{min-width:100%;}
.uf-clean .uf-carousel .uf-banner--split{box-shadow:none;border-radius:0;}
.uf-clean .uf-carousel__dots{position:absolute;bottom:16px;left:clamp(30px,4.5vw,60px);display:flex;gap:8px;z-index:3;}
.uf-clean .uf-carousel__dots .dot{width:8px;height:8px;border-radius:50%;background:rgba(29,29,31,.25);border:0;padding:0;cursor:pointer;transition:width .25s ease,background .25s ease;}
.uf-clean .uf-carousel__dots .dot.active{background:var(--red);width:22px;border-radius:4px;}
.uf-clean .uf-carousel__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(255,255,255,.92);
  border:1px solid var(--line);width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.uf-clean .uf-carousel__nav:hover{background:#fff;}
.uf-clean .uf-carousel__nav--prev{left:16px;}
.uf-clean .uf-carousel__nav--next{right:16px;}
@media (max-width:760px){
  .uf-clean .uf-banner--split,.uf-clean .uf-banner--offer{grid-template-columns:1fr;}
  .uf-clean .uf-banner--split .uf-banner__media{min-height:230px;order:-1;}
  .uf-clean .uf-banner__deal{padding:34px;}
  .uf-clean .uf-carousel__nav{display:none;}
}

/* ===== banner responsive fixes (mobile fit + safe margins) ===== */
/* Outer spacing scales with the viewport instead of a fixed 40px, so banners
   never overflow on small screens. clamp(min, preferred-vw, max). */
.uf-clean .uf-banner,
.uf-clean .uf-banner--split,
.uf-clean .uf-banner--offer,
.uf-clean .uf-carousel{ margin:10px clamp(14px,4vw,40px); }

/* A banner INSIDE the carousel must have no margin of its own — otherwise it
   stacks with the carousel's margin and breaks the slide width/alignment. */
.uf-clean .uf-carousel .uf-banner{ margin:0; }

/* Extra breathing room + smaller inset on phones */
@media (max-width:560px){
  .uf-clean .uf-banner,
  .uf-clean .uf-banner--split,
  .uf-clean .uf-banner--offer,
  .uf-clean .uf-carousel{ margin:10px clamp(10px,3.5vw,16px); }
  .uf-clean .uf-banner__text{ padding:26px 20px; }
  .uf-clean .countdown{ gap:6px; }
}


/* ---- added for the plugin ---- */
/* any design can be a carousel slide: no double cards inside the carousel */
.uf-clean .uf-carousel .uf-banner{margin:0;box-shadow:none;border-radius:0;}
/* images from the Media Library fill their box */
.uf-clean .uf-banner__media img,.uf-clean .uf-banner__bg img{display:block;width:100%;height:100%;object-fit:cover;}
.uf-clean .uf-banner__text h2 .dot,.uf-clean .uf-banner__card h2 .dot{color:var(--red);}