/* ==========================================================================
   c-slider - every carousel on the site, over Swiper 14.2.0.

   js1/c-slider.js is the behaviour; css/vendor/swiper.css is Swiper's own
   sheet, verbatim. Loaded by head.tpl on the three page types that draw a
   slider - home, brokers, property - and after cards.css, so it can undo the
   vendor's defaults and the page sheets after it can size the slides.

   A slider is a container, a `.c-slider__track` holding the slides, and an
   optional `.c-slider__dots`:

     <div class="p-…  c-rail">                 the container - clips, bleeds
       <div class="c-slider__track">…</div>    the row; its children slide
       <div class="c-slider__dots" aria-hidden="true"></div>
     </div>

   UNMOUNTED IS NOT BROKEN. Without the script, or at a width where the page
   says it is not a slider, the track is a native scroll-snap row - which is
   what every one of these was before Swiper (24 Sep 2026), so the no-script
   page is the old page. Swiper's class names are added by the script and
   only while it runs, so none of the vendor's rules reach a row that is not
   moving.
   ========================================================================== */

/* --- unmounted: a native scroll-snap row ---------------------------------- */

.c-slider__track{
  display:flex;
  gap:var(--c-slider-gap, 0px);
  /* max-content, so a container's trailing padding is scrollable overflow
     too and the unmounted row's last card rests at the gutter, not the edge */
  width:max-content;
}
.c-slider__track > *{
  flex:0 0 auto;
  scroll-snap-align:start;
}

/* --- mounted: Swiper moves the track ------------------------------------- */
/* Three classes, so they beat any one page's container rule whatever the
   order: the page sheets give their containers `overflow-x:auto` for the
   unmounted state, and a running slider must clip instead - it moves by
   transform, and a container that could also scroll would be two positions
   for one row. */

.swiper.swiper-initialized.swiper-horizontal{
  overflow:hidden;
  scroll-snap-type:none;
}
/* Swiper spaces the slides itself, from `--c-slider-gap` (c-slider.js); a CSS
   gap on top of it would be counted twice. */
.swiper.swiper-initialized > .swiper-wrapper{ gap:0; }

/* The vendor sizes a slide to the container, for one-at-a-time galleries.
   Every slider here is `slidesPerView:'auto'` - the slide is the card and the
   card has its own width - and `height:auto` is what lets a row of cards
   stretch to its tallest, as the grid it replaced did. */
.swiper-slide{
  width:auto;
  height:auto;
}

/* --- the dots ------------------------------------------------------------ */
/* 13px at a 20px pitch, the active one solid and the rest at half strength -
   measured on the Landing and Team mobile frames, where they sit under the
   service cards, the partner tiles, «Ръководство» and the team row. The
   colour is `currentColor`, because the frames draw them white on the green,
   dark and gold bands and ink on the warm one; the page sets `color`.

   The vendor positions pagination as an absolute overlay at the bottom of the
   slides. Here it is a row in flow under them, so its offsets go back to
   `auto`. */

.c-slider__dots{
  --swiper-pagination-bullet-size:13px;
  --swiper-pagination-bullet-horizontal-gap:3.5px;
  --swiper-pagination-color:currentColor;
  --swiper-pagination-bullet-inactive-color:currentColor;
  --swiper-pagination-bullet-inactive-opacity:.5;
  --swiper-pagination-top:auto;
  --swiper-pagination-bottom:auto;
  position:relative;
  margin-top:16px;
  font-size:0;
  line-height:0;
  text-align:center;
}
/* Empty is unmounted; locked is Swiper saying every slide is already in
   view. A page hides the dots at the widths the frames draw none by a
   min-width query, and never sets `display:block` to show them - that would
   beat the lock and leave an empty 16px strip under a row that fits. */
.c-slider__dots:empty,
.c-slider__dots.swiper-pagination-lock{ display:none; }

/* ==========================================================================
   c-rail - a page's row of cards that becomes a slider below 640.

   FIVE objects become one on mobile, and the frames are unambiguous about
   it: the landing frame's service cards, testimonials and partner tiles and
   the Екип frame's leadership and team cards all lay their siblings out
   off-canvas at a fixed pitch with a row of 13px dots underneath -
   -311/32/375 at a 343 pitch, -308/31/370 at 339, -146/34/214 at 180 and
   -40/122/284 at 162. Three of them are this class; the partner tiles start
   sliding at 1360 and the team row at every width, so those two are sliders
   of their own (page-home.css, page-team.css).

   Above 640 the container is the page's own grid, and the track is no box at
   all - `display:contents` hands its children straight to that grid - so the
   desktop rows are exactly the markup they were before the track existed.
   ========================================================================== */

@media (min-width: 640px){
  .c-rail > .c-slider__track{ display:contents; }
  .c-rail > .c-slider__dots{ display:none; }
}

@media (max-width: 639px){
  .c-rail{
    display:block;
    /* full-bleed out of the container, so a card can sit half off the screen
       edge the way every one of the frames draws it */
    margin-inline:calc(-1 * var(--c-page-gutter));
    padding-inline:var(--c-page-gutter);
    /* AND THE SAME INSET AS SCROLL PADDING, for the unmounted row. A snap
       container aligns an item to the SCROLLPORT'S SNAP AREA, which is inset
       by `scroll-padding` and not by `padding`, so with none declared the
       browser settles at scrollLeft = 16 and the first card rests at x0 -
       flush against the screen edge. docs/known-issues.md #66. Swiper does
       not scroll; it lays the row out from the container's content box, which
       is the padding above. */
    scroll-padding-inline:var(--c-page-gutter);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .c-rail::-webkit-scrollbar{ display:none; }
  .c-rail > .c-slider__track{ --c-slider-gap:var(--c-gutter); }
}
