/* Offers & Promotions — a plain-CSS/JS port of the "Squeeze Carousel" React component.
   One panel gets the room (a 16:9 block), the next three share what is left, the rest are slats.
   Widths and positions are worked out in app.js (renderOffers) and eased here. */

.offers-sec{padding-top:84px}
.offers-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:30px}
.sec-head.left{text-align:left;margin:0}
.sq{--sq-ms:1000ms;--sq-ease:cubic-bezier(.16,1,.3,1)}
.sq-ctrl{display:flex;gap:8px;flex:none}
.sq-arrow{all:unset;box-sizing:border-box;width:46px;height:46px;display:grid;place-items:center;cursor:pointer;border-radius:2px;
  background:linear-gradient(180deg,#b9853f,#8f5d24);color:#FFF7E8;box-shadow:inset 0 1px 0 rgba(255,236,200,.45);transition:opacity .2s}
.sq-arrow:hover{opacity:.86}
.sq-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sq-arrow svg{width:20px;height:20px}

.sq-view{position:relative;width:100%;overflow:hidden}
.sq-strip{position:absolute;inset:0}
.sq-card{all:unset;box-sizing:border-box;position:absolute;left:0;top:0;height:100%;overflow:hidden;cursor:pointer;border-radius:4px;
  background:var(--sand);will-change:transform,width;
  transition:transform var(--sq-ms) var(--sq-ease),width var(--sq-ms) var(--sq-ease),border-radius var(--sq-ms) var(--sq-ease)}
.sq.still .sq-card,.sq.still .sq-ov{transition:none}
.sq-card img{position:absolute;top:0;left:50%;height:100%;width:var(--sq-hero);min-width:100%;max-width:none;object-fit:cover;
  transform:translateX(-50%);pointer-events:none}
.sq-card::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,240,210,0);border-radius:2px;pointer-events:none;transition:border-color .6s}
.sq-card[aria-selected="true"]::after{border-color:rgba(255,240,210,.7)}
.sq-card:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.sq-ov{position:absolute;left:0;right:0;bottom:0;padding:70px 26px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  background:linear-gradient(to top,rgba(36,20,10,.78),rgba(36,20,10,0));opacity:0;transition:opacity var(--sq-ms) var(--sq-ease);pointer-events:none}
.sq-card[aria-selected="true"] .sq-ov{opacity:1}
.sq-tag{background:linear-gradient(180deg,#e9cf95,#c99a4e);color:#2a1709;font:500 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:6px 9px}
.sq-ov b{font:500 clamp(15px,1.6vw,20px)/1.2 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:#FFF6E6}
.sq-sample{position:absolute;top:16px;right:16px;background:rgba(36,20,10,.72);color:var(--gold-3);font:500 9.5px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;padding:6px 9px;opacity:0;transition:opacity .6s}
.sq-card[aria-selected="true"] .sq-sample{opacity:1}

.sq-copy{display:grid;margin-top:28px}
.sq-c{grid-area:1/1;display:flex;align-items:flex-start;justify-content:space-between;gap:40px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--sq-ms) var(--sq-ease),visibility var(--sq-ms)}
.sq-c.on{opacity:1;visibility:visible;pointer-events:auto}
.sq-c p{margin:0;max-width:46rem;font:500 clamp(18px,2vw,24px)/1.45 var(--serif);text-wrap:balance}
.sq-c .t{color:var(--ink)}
.sq-c .d{color:var(--muted)}
.sq-c .btn{flex:none}
.sq-c .btn svg{width:14px;height:14px;transition:transform .2s}
.sq-c .btn:hover svg{transform:translateX(3px)}

@media (max-width:760px){
  .offers-head{align-items:center}
  .sq-arrow{width:40px;height:40px}
  .sq-c{flex-direction:column;gap:16px}
  .sq-ov{padding:50px 16px 16px}
}
@media (prefers-reduced-motion:reduce){.sq{--sq-ms:0ms}}