/* ===================================================================
   CAROUSEL — every paginated carousel on the site, sourced from Catalogues.

   .slider          carries --per and --gap; JS writes --page back
     .slider-view   the overflow:hidden window
       .slide-track the flex row, translated by --page
         .slide     any card; sized from --per
     .carnav        .arrow.prev + .dots + .arrow.next

   CSS owns the breakpoints, JS owns the state.

   Load order matters: several rules here tie with site.css at (0,2,0), where
   source order decides, so this file is linked after it.
   =================================================================== */


/* ---------- engine ---------- */
/* Defaults are one full-width slide, which is all Home's two carousels need. */
.slider{--per:1;--gap:0px;--page:0;}
.slider-view{overflow:hidden;width:100%;}
.slide-track{
  display:flex;align-items:stretch;gap:var(--gap);
  transform:translateX(calc(-1 * var(--page,0) * (100% + var(--gap))));
  transition:transform .35s ease;
}
/* min/max-width are neutralised so .pcard's 220/448px can't fight the basis. */
.slide-track>.slide{
  flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  min-width:0;max-width:none;
}
/* --gap needs a unit: --space-0 is unitless, and calc(100% + 0) is invalid. */
@media (prefers-reduced-motion:reduce){
  .slide-track{transition:none;}
}


/* ---------- controls ---------- */
.carnav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;}
.carnav[hidden]{display:none;}
/* Promotions and Services draw their controls below the breakpoint only (frames 1:1468 /
   1:2360); the reveal sits in the 900px block at the end of this file. (0,2,0) so it beats
   .carnav above whatever the load order, and beats site.css .only-mobile{display:block},
   which would flatten this flex row into a stack. Revealed with :not([hidden]) so the
   single-page hide in carousel.js stays authoritative at every width. */
.carnav.only-mobile{display:none;}
.arrow{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;padding:var(--space-0);
  background:var(--white);border:var(--stroke-sm) solid var(--gray-4);
  cursor:pointer;flex:none;color:var(--gray-2);
}
.arrow .icon{width:16px;height:16px;}
/* Button 14:9 — Type=icon, State=Hover. */
.arrow:hover{background:var(--gray-4);border-color:var(--gray-3);}
.arrow[disabled],.arrow:disabled{opacity:.4;cursor:default;}
.arrow[disabled]:hover,.arrow:disabled:hover{background:var(--white);color:var(--gray-2);border-color:var(--gray-4);}
.dots{display:flex;align-items:center;justify-content:center;gap:6px;}
.dot{
  width:10px;height:10px;padding:var(--space-0);flex:none;cursor:pointer;
  background:transparent;border:var(--stroke-sm) solid var(--gray-3);
  transition:width .2s ease,background .2s ease;
}
/* One engine, one attribute — this used to list .on and [aria-current] too. */
.dot[aria-selected="true"]{width:28px;background:var(--green);border-color:var(--green);}
.count{
  margin:0 0 0 var(--space-1);font-family:var(--font-mono);font-weight:var(--fw-regular);
  font-size:11px;line-height:14px;color:var(--gray-3);white-space:nowrap;
}


/* ---------- HOME ---------- */
/* The card is a fixed 650px column, so the view carries the column flex. */
.page-home .promo-card>.slider-view{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.page-home .promo-card>.slider-view>.slide-track{flex:1 1 auto;min-height:0;}
.page-home .promo-card .slide{display:flex;flex-direction:column;gap:var(--space-6);}

/* Benefits slides a whole .ben-page of four; its inner grid stays in site.css. */
/* Button 14:9 — Type=Icon Darkmode, lifted off the --gray band. */
.page-home .benefits .arrow{background:transparent;border-color:var(--gray-2);color:var(--white);}
.page-home .benefits .arrow:hover{background:var(--gray-2);border-color:var(--white);color:var(--white);}
.page-home .benefits .dot{border-color:var(--gray-2);}
/* Restated: the (0,3,0) rule above would otherwise hold the grey border. */
.page-home .benefits .dot[aria-selected="true"]{background:var(--green);border-color:var(--green);}


/* ---------- PROMOTIONS + SERVICES ---------- */
.page-promotions .slider,
.page-services .slider{--per:4;--gap:var(--space-4);}


/* ---------- CATALOGUES ---------- */
.page-catalogues .slider{--per:6;--gap:var(--space-4);}
/* The only carousel that paginates far enough to need a second dot row. */
.page-catalogues .dots{flex-wrap:wrap;}


/* ---------- responsive ----------
   Widest query first: the last match wins, so each narrower block restates
   only what changes. */
@media (max-width:1200px){
  .page-promotions .slider,.page-services .slider{--per:3;}
  .page-catalogues .slider{--per:4;}
}
@media (max-width:900px){
  .carnav.only-mobile:not([hidden]){display:flex;}
  .page-promotions .slider,.page-services .slider{--per:2;}
  .page-catalogues .slider{--per:3;--gap:var(--space-3);}
}
@media (max-width:600px){
  .page-promotions .slider,.page-services .slider{--per:1;}
  /* Three across squashes the plate and clips the nowrap supplier name. */
  .page-catalogues .slider{--per:2;}
}