/* ===========================================================================
   offers.css — home hero split: slider (3/4) + Latest Offers panel (1/4).
   Loaded only when Admin → Latest Offers is switched on and has an image.
   =========================================================================== */
.hero-split{
  display:grid; grid-template-columns:minmax(0,3fr) minmax(0,1fr);
  height:450px; background:var(--ink-900);
}
.hero-split > .slider{height:100%; min-width:0}
/* the copy sits inside a 3/4 box now — keep it clear of the round arrows */
.hero-split .slide .container{max-width:none; padding-inline:92px 84px}

.offers{
  position:relative; display:flex; flex-direction:column; gap:12px; min-width:0;
  padding:18px 18px 16px; background:var(--ink-800);
  border-left:1px solid rgba(255,255,255,.08);
}
.offers__head{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px}
.offers__title{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400);
}
.offers__title::before{content:''; width:22px; height:2px; background:var(--gold-500); border-radius:2px}
.offers__nav{display:inline-flex; align-items:center; gap:6px}
.offers__count{font-size:12px; color:#B8B1A5; min-width:34px; text-align:center; font-variant-numeric:tabular-nums}
.offers__count b{color:#fff; font-weight:600}
.offers__btn{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  transition:background-color .25s, border-color .25s, color .25s;
}
.offers__btn:hover,.offers__btn:focus-visible{background:var(--gold-500); border-color:var(--gold-500); color:var(--ink-900)}

.offers__stage{position:relative; flex:1; min-height:0; overflow:hidden; border-radius:12px; background:var(--ink-700)}
.offers__track{display:flex; height:100%; transition:transform .7s var(--ease); will-change:transform}
.offer{position:relative; flex:0 0 100%; height:100%; overflow:hidden}
/* blurred copy fills the sides, so a square offer never shows empty bars */
.offer__blur{
  position:absolute; inset:-20px; width:calc(100% + 40px); height:calc(100% + 40px);
  object-fit:cover; filter:blur(18px) brightness(.55); transform:scale(1.05);
}
.offer__link{position:absolute; inset:0; display:block}
.offer__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; object-position:center; z-index:1;
}
.offer__link .offer__img{transition:transform .5s var(--ease)}
.offer__link:hover .offer__img{transform:scale(1.02)}

.offers__dots{display:flex; justify-content:center; gap:7px}
.offers__dot{width:18px; height:4px; border-radius:3px; background:rgba(255,255,255,.28); transition:background-color .3s, width .3s var(--ease)}
.offers__dot.is-active{background:var(--gold-500); width:30px}

/* laptops: give the panel a little more room so a square offer stays readable */
@media (max-width:1280px){
  .hero-split{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}
}
@media (max-width:1024px){
  .hero-split{height:420px; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr)}
  /* narrow slider: dots + swipe are enough, arrows would sit on the heading */
  .hero-split .slider-arrow{display:none}
  .hero-split .slide .container{padding-inline:32px}
}
/* tablets & phones: slider on top, offers below as a full square */
@media (max-width:860px){
  .hero-split{display:block; height:auto}
  .hero-split > .slider{height:420px}
  .offers{border-left:0; border-top:1px solid rgba(255,255,255,.08); padding:18px 16px 18px}
  .offers__stage{flex:none; width:100%; max-width:520px; margin-inline:auto; aspect-ratio:1/1}
}
@media (max-width:760px){
  .hero-split > .slider{height:auto}
  .hero-split .slide .container{padding-inline:20px}
}
@media (prefers-reduced-motion:reduce){
  .offers__track{transition:none}
}