/* ══════════════════════════════
   Cases Slider Component
   Prefix: cs- (Cases Slider)
   Desktop: image left, text right
   Mobile: stacked
   ══════════════════════════════ */

/* ── Block heading ── */
.cs-heading {
  font-size: 24px;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 0 0 8px;
}

.cs-subheading {
  font-size: 18px;
  font-weight: 400 !important;
  color: #000;
  line-height: 1.3;
  margin: 0 0 20px;
}

.cs-wrapper {
  width: 100%;
  margin: 20px 0;
}

/* ── Case heading ── */
.cs-case-heading {
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #000;
  margin: 0 0 10px;
  line-height: 1.3 !important;
}

/* ── Case price line (v18; mirrors prod) — under the heading, brand blue ── */
.cs-case-price {
  font-family: 'daimlercac-regular', 'MBCorpoS', Arial, sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #3366cc !important;
  margin: -8px 0 6px !important;
  line-height: 1.1 !important;
}

/* ── Card ── */
.cs-card {
  background: #fff;
  border-radius: 4px;
  width: 100%;
}

/* ── Media column (image + thumbnails) ── */
.cs-media {
  width: 100%;
}

/* ── Main image area ── */
.cs-main {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #e8e8e8;
  border-radius: 4px;
}

.cs-track {
  display: flex;
  height: 100%;
  transition: transform 0.35s ease;
  will-change: transform;
}

.cs-slide {
  min-width: 100%;
  height: 100%;
}

.cs-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.cs-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* ── Arrows ── */
.cs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: background 0.2s;
  z-index: 2;
}

.cs-arrow:hover {
  background: rgba(255, 255, 255, 0.9);
}

.cs-arrow--left {
  left: 12px;
}

.cs-arrow--right {
  right: 12px;
}

/* ── Counter ── */
.cs-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 2;
  user-select: none;
}

/* ── Content ── */
.cs-content {
  min-height: auto;
}

.cs-title {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #999 !important;
  margin: 8px 0 0 !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  /* flex so the triangle is vertically centered to the caption regardless of font-size (v16) */
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  column-gap: 2px;
}

/* caption text shrinks/wraps inside; triangle stays centered at the end */
.cs-cap-text {
  min-width: 0;
}

/* ── Per-photo description accordion (v15; centering v16) ── */
.cs-cap-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 6px;
  margin: 0;
  cursor: pointer;
  line-height: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: #999; /* v17: gray triangle (matches caption color), not brand blue */
}

/* v17: triangle points DOWN by default (like every other accordion arrow), gray via currentColor */
.cs-cap-tri {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid currentColor;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  transition: transform 0.2s ease;
}

.cs-cap-toggle.open .cs-cap-tri {
  transform: rotate(180deg); /* v17: down → up when open */
}

.cs-photo-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #999; /* v18: gray like the main caption (.cs-title) — signals it belongs to the photo */
  text-align: left;
}

.cs-photo-desc[hidden] {
  display: none;
}

.cs-photo-desc p {
  margin: 0 0 8px;
}

.cs-photo-desc p:last-child {
  margin-bottom: 0;
}

.cs-photo-desc h3,
.cs-photo-desc h4 {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 10px 0 4px !important;
  line-height: 1.3;
}

.cs-description {
  overflow: hidden;
}

.cs-description h3 {
  font-size: inherit !important;
  font-weight: 600 !important;
  margin: 12px 0 4px !important;
  line-height: 1.3;
}

.cs-text {
  line-height: 1.5;
  margin-top: 6px;
}

/* ── Long text expand/collapse ── */
.cs-long-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease;
}

.cs-long-wrap.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.cs-long-wrap > .cs-long-text {
  overflow: hidden;
  margin-top: 0;
}

.cs-long-wrap.open > .cs-long-text {
  margin-top: 4px;
}

/* ── Hidden tail (reset .service-block p span {font-size:120%}) ── */
.cs-tail-hidden {
  font-size: inherit !important;
}

/* ── Show more / Hide buttons ── */
.cs-more {
  display: inline;
  font-size: inherit;
  font-weight: 400;
  color: var(--main-color);
  text-decoration: none !important;
  text-underline-offset: 4px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 1px dashed var(--main-color);
  transition: color 0.2s;
}

.cs-more:hover {
  color: var(--main-color-darken);
}

/* ── Bottom row (thumbnails + arrows) ── */
.cs-bottom-row {
  margin-top: 10px;
  position: relative;
  width: 100%;
}

/* ── Thumbnail arrows (overlay on edge thumbs) ── */
.cs-thumb-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: background 0.2s;
  z-index: 2;
}

.cs-thumb-arrow:hover {
  background: rgba(255, 255, 255, 0.95);
}

.cs-thumb-arrow--left {
  left: 6px;
}

.cs-thumb-arrow--right {
  right: 6px;
}

/* ── Thumbnails (single row, no wrap) ── */
.cs-thumbnails {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
  width: 100%;
}

.cs-thumb {
  position: relative;
  flex-shrink: 0;
  width: 130px;
  height: 73px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s;
  background: #1a1a1a;
}

/* Play-иконка на миниатюре видео */
.cs-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  pointer-events: none;
  display: block;
}

.cs-thumb-play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.cs-thumb.active {
  border-color: var(--main-color);
  opacity: 1;
}

.cs-thumb:hover {
  opacity: 1;
}

.cs-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ═══════════════════════════
   DESKTOP (>600px) — two columns
   ═══════════════════════════ */
@media (min-width: 601px) {
  .cs-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
  }

  .cs-media {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .cs-main {
    aspect-ratio: 16/9;
  }

  /* Выровнять верх описания с верхом фото — жёстко обнуляем margin/padding сверху */
  .cs-content > .cs-description,
  .cs-content > .cs-description > *:first-child,
  .cs-content > .cs-description > *:first-child > *:first-child,
  .cs-content > .cs-description > *:first-child > *:first-child > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .cs-content {
    flex: 1;
    min-width: 0;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }

  .cs-description {
    flex: 1;
    overflow: hidden;
    position: relative;
  }

  .cs-description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(transparent, #fff);
    pointer-events: none;
  }

  .cs-content > .cs-more {
    flex-shrink: 0;
    margin-top: 6px;
    align-self: flex-start;
  }

  /* Desktop: show long text by default, let overflow clip it */
  .cs-long-wrap {
    display: block;
    opacity: 1;
    grid-template-rows: unset;
    transition: none;
  }

  .cs-long-wrap > .cs-long-text {
    overflow: visible;
    margin-top: 4px;
  }

  /* Expanded state */
  .cs-card.cs-expanded {
    align-items: flex-start;
  }

  .cs-card.cs-expanded .cs-description {
    overflow: visible;
  }

  .cs-card.cs-expanded .cs-description::after {
    display: none;
  }
}

/* ═══════════════════════════
   MOBILE (<= 600px)
   ═══════════════════════════ */
@media (max-width: 600px) {
  .cs-heading {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .cs-wrapper {
    margin: 10px 0;
  }

  .cs-acc {
    margin: 10px 0;
  }

  .cs-card {
    border-radius: 0;
    box-shadow: none;
  }

  .cs-main {
    height: auto;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }

  .cs-track {
    height: auto;
  }

  .cs-slide {
    height: auto;
  }

  .cs-slide img {
    height: auto;
    object-fit: contain;
  }

  .cs-arrow {
    width: 36px;
    height: 36px;
  }

  .cs-arrow--left {
    left: 12px;
  }

  .cs-arrow--right {
    right: 12px;
  }

  .cs-content {
    min-height: auto;
  }

  .cs-title {
    font-size: 16px;
  }

  .cs-case-heading {
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
  }

  .cs-case-price {
    font-size: 19px !important;
    margin: -11px 0 9px !important;
    line-height: 1.1 !important;
  }

  .cs-bottom-row {
    display: none;
  }
}

/* ══════════════════════════════
   v19 — eyebrow + closed-case accordion (mode="closed")
   ══════════════════════════════ */

/* ── Eyebrow (раздел перед заголовком) ── */
.cs-eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #3366cc;
  margin: 0 0 6px;
  line-height: 1.2;
}

/* ── Collapsed case accordion ── */
.cs-acc {
  margin: 20px 0;            /* same vertical rhythm as open .cs-wrapper, so collapsed cases don't touch */
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

.cs-acc-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 18px 20px;
  font: inherit;
}

.cs-acc-head:hover { background: #f7f8fa; }

.cs-acc-titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-acc-eyebrow { margin: 0; }

.cs-acc-heading {
  font-size: 20px;
  font-weight: 400;
  color: #000;
  line-height: 1.3;
}

/* override generic .cs-case-price negative margins inside the head */
.cs-acc-price { margin: 4px 0 0 !important; }

.cs-acc-chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-right: 2px solid #3366cc;
  border-bottom: 2px solid #3366cc;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.cs-acc.open .cs-acc-chevron { transform: rotate(-135deg); }

.cs-acc-body { padding: 0 20px 4px; }
.cs-acc-body[hidden] { display: none; }
.cs-acc-body .cs-wrapper { margin-top: 8px; }

@media (max-width: 600px) {
  .cs-eyebrow { font-size: 12px; margin: 0 0 4px; }
  .cs-acc-head { padding: 14px; gap: 12px; }
  .cs-acc-heading { font-size: 17px; }
  .cs-acc-price { font-size: 19px !important; }
  .cs-acc-body { padding: 0 14px 4px; }
  /* v20: inside the accordion the slider must NOT full-bleed to 100vw — the card has
     overflow:hidden + a border, so the bleed (and its edge arrows/counter) got clipped.
     Constrain the media to the card body width; arrows/counter then sit inside. */
  .cs-acc-body .cs-main {
    width: 100%;
    margin-left: 0;
    border-radius: 4px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   v22 (12.07.2026, ported from PROD v39) — DESKTOP: expanded case wraps its text around the gallery.

   Collapsed state is unchanged: .cs-card stays a 2-column flex row and JS
   clips the text to the gallery height («Подробнее ▾»).
   Expanded (.cs-expanded): the card leaves flex, the gallery floats left at
   50%, the body text runs to its right and then CONTINUES FULL-WIDTH below
   the gallery — no more empty column under the photo, no manual right/bottom
   text split. Wide children (tables, parts card, thematic accordion, SEO
   block, embedded media, galleries) clear the float, so they start below the
   gallery at full width. The card clears its float at the end, so the next
   page section can never ride up beside the photo.
   Mobile (<=600px) is untouched: heading → price/date → gallery → text.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 601px) {
  .cs-card.cs-expanded {
    display: block;
  }

  /* 50% + 24px right margin reproduces the collapsed flex geometry
     (flex:0 0 50% + gap:24px), so the switch causes no width jump. */
  .cs-card.cs-expanded .cs-media {
    float: left;
    width: 50%;
    max-width: 50%;
    margin: 0 24px 16px 0;
  }

  /* height:auto beats the inline height JS writes for the collapsed state
     (it also clears it on expand — this is the belt-and-braces half). */
  .cs-card.cs-expanded .cs-content {
    display: block;
    height: auto !important;
  }

  .cs-card.cs-expanded::after {
    content: '';
    display: block;
    clear: both;
  }

  .cs-card.cs-expanded .cs-content table,
  .cs-card.cs-expanded .cs-content .case-parts-card,
  .cs-card.cs-expanded .cs-content .uta,
  .cs-card.cs-expanded .cs-content .csl,
  .cs-card.cs-expanded .cs-content .cs-wrapper,
  .cs-card.cs-expanded .cs-content .wp-block-gallery,
  .cs-card.cs-expanded .cs-content .gallery,
  .cs-card.cs-expanded .cs-content iframe,
  .cs-card.cs-expanded .cs-content video {
    clear: left;
  }
}