/* ══════════════════════════════
   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;
}

/* First case heading: top gap matches the gap under the block heading
   (subheading bottom-margin is overridden small by theme → first case was glued). */
.cs-subheading + .cs-case-heading,
.cs-heading + .cs-case-heading {
  margin-top: 20px !important;
}

/* Price line under the case heading — brand display font + site accent blue,
   so it reads as part of the title block (not a bolted-on blue label). */
.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(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s;
  z-index: 2;
}

.cs-arrow:hover {
  background: rgba(0, 0, 0, 0.6);
}

.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;
}

.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);
}

/* 25.06.2026 v32 — toggle triangle («Открыть кейс»/«Подробнее»/«Скрыть») sized to
   match the .csl interlink summary marker (13px). Both glyphs are from the Unicode
   small-triangle set (U+25BE ▾ / U+25B8 ▸), same metrics, so at 13px the sizes are
   equal (orientation differs by design). .up = «Скрыть» (rotated 180). */
.cs-tri {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  vertical-align: baseline;
}
.cs-tri.up { transform: rotate(180deg); }

/* ── 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;
}

/* ═══════════════════════════
   Set-level «Показать ещё кейсы» (accordion tail)
   ═══════════════════════════ */
.cs-tail[hidden] {
  display: none !important;
}

.cs-show-more-wrap {
  display: flex;
  justify-content: center;
  margin: 26px 0 34px;
}

/* Accent CTA (owner 25.06.2026): solid brand-blue fill, white text, XL size,
   prominent shadow — the user must not miss it. Full-width on mobile. */
.cs-show-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 36px;
  background: var(--main-color);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(51, 102, 204, 0.35);
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
  -webkit-appearance: none;
}

.cs-show-more:hover {
  background: #2a55ad;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(51, 102, 204, 0.45);
}

.cs-show-more:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(51, 102, 204, 0.35);
}

.cs-show-more:focus-visible {
  outline: 3px solid rgba(51, 102, 204, 0.4);
  outline-offset: 3px;
}

.cs-show-more svg {
  flex-shrink: 0;
  transition: transform .25s ease;
}

.cs-show-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ═══════════════════════════
   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-card {
    border-radius: 0;
    box-shadow: none;
  }

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

  .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: 2px;
  }

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

  .cs-content {
    min-height: auto;
    /* v37 (29.06.2026): more breathing room between the photo caption (.cs-title)
       and the «Открыть кейс ▾» toggle (.cs-more) on phones — owner request. */
    margin-top: 14px;
  }

  .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;
  }

  /* Mobile: first case gap = gap under heading (18px) */
  .cs-subheading + .cs-case-heading,
  .cs-heading + .cs-case-heading {
    margin-top: 18px !important;
  }

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

  /* Set-level «Показать ещё» — mobile sizing (full-width accent CTA) */
  .cs-show-more {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 16px;
  }

  /* Mobile case toggle "Открыть кейс ▾" — neutral dark text, no underline (per request) */
  .cs-more {
    color: #222;
    border-bottom: none;
  }
  .cs-more:hover {
    color: #000;
  }
}


/* ── Collapsed case accordion (ported from test2, 18.06.2026) ── */
.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-heading { font-size: 20px; font-weight: 400; color: #000; line-height: 1.3; }
.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-acc { margin: 10px 0; }
  .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; }
  .cs-acc-body .cs-main { width: 100%; margin-left: 0; border-radius: 4px; }
}

/* ── Запчасти и расходные материалы (case-parts-card) — единый блок, 18.06.2026 ──
   Один CSS + один PHP-шаблон (cl_parts_card_html). Авто-вставка после «Что сделали».
   Имена классов из ТЗ. Текстовые правила — ДВОЙНОЙ класс (0,2,0), чтобы перебить
   тему `.editor p {font-size:16px}` (0,1,1) и её p-отступы (см. why-choose.md). */
.case-parts-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 16px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.case-parts-card__body { flex: 1 1 auto; min-width: 0; }
.case-parts-card .case-parts-card__title {
  font-family: 'daimlercac-regular', Arial, sans-serif;
  font-size: 21px;
  font-weight: 400;
  color: #000;
  line-height: 1.25;
  margin: 0 0 12px;
  padding: 0;
}
.case-parts-card__list { display: flex; flex-direction: column; gap: 9px; }
.case-parts-card .case-parts-card__item {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #333;
}
.case-parts-card .case-parts-card__item strong { font-weight: 600; color: #111; }
.case-parts-card .case-parts-card__meta { color: #555; }
.case-parts-card__media {
  position: relative;
  display: block;
  flex: 0 0 32%;
  max-width: 32%;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  line-height: 0;
}
.case-parts-card__image { display: block; width: 100%; height: auto; }
.case-parts-card__zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  color: #3366cc;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .18);
  pointer-events: none;
  transition: transform .15s ease, background .15s ease;
}
.case-parts-card__media:hover .case-parts-card__zoom { background: #fff; transform: scale(1.06); }
.case-parts-card__zoom svg { display: block; }
@media (max-width: 600px) {
  .case-parts-card { gap: 12px; padding: 14px; border-radius: 10px; }
  .case-parts-card .case-parts-card__title { font-size: 17px; margin: 0 0 10px; }
  .case-parts-card__list { gap: 7px; }
  .case-parts-card .case-parts-card__item { font-size: 13.5px; line-height: 1.4; }
  .case-parts-card__media { flex-basis: 30%; max-width: 30%; }
  .case-parts-card__zoom { width: 26px; height: 26px; right: 5px; bottom: 5px; }
  .case-parts-card__zoom svg { width: 15px; height: 15px; }
}


/* 18.06.2026 v27 — per-photo description accordion (фото desc) port to prod.
   Triangle toggle at end of caption reveals .cs-photo-desc. Source: test2 v21.css.
   Mobile whole-case collapse and all other slider behavior left untouched. */
.cs-title { display: flex; align-items: center; flex-wrap: nowrap; column-gap: 2px; }
.cs-cap-text { min-width: 0; }
.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;
}
.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); }
.cs-photo-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #999; 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; }

/* ─── SEO interlinking block at the end of a case (.csl) ───────────────────────
   Class + model landing links built by cl_seo_links_html() into .cs-content
   (case-single.php). Native <details>: all links are in the HTML (indexable),
   the accordion only collapses them visually. --main-color is #3366CC (head.php). */
/* v33 (25.06.2026): bottom margin 2px → 16px so the case toggle button
   («Скрыть кейс»/«Закрыть кейс») that sits right after this links block no
   longer sticks to it. */
.csl { margin: 16px 0 16px; padding-top: 14px; border-top: 1px solid #e6e8ec; }
.csl__title { font-size: 16px; font-weight: 600; line-height: 1.3; color: #1a1a1a; margin: 0 0 10px; }
.csl__group { border: 1px solid #e6e8ec; border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: #fff; }
.csl__group:last-child { margin-bottom: 0; }
.csl__group > summary { list-style: none; cursor: pointer; padding: 11px 14px; font-size: 15px; font-weight: 500; color: #1a1a1a; display: flex; align-items: center; gap: 9px; user-select: none; }
.csl__group > summary::-webkit-details-marker { display: none; }
.csl__group > summary::before { content: "\25B8"; color: var(--main-color, #3366cc); font-size: 13px; line-height: 1; flex: 0 0 auto; transition: transform .2s ease; }
.csl__group[open] > summary::before { transform: rotate(90deg); }
.csl__group > summary:hover { background: #f6f8fb; }
.csl__list { list-style: none; margin: 0; padding: 2px 14px 12px 32px; }
/* Collapse explicitly, not via UA only: Safari/older-Firefox hide closed <details>
   content with display:none on the child, which an author `display:flex` would
   override (closed groups would show content). Scope display to state instead. */
.csl__group:not([open]) > .csl__list { display: none; }
.csl__group[open] > .csl__list { display: flex; flex-direction: column; gap: 7px; }
.csl__list li { margin: 0; }
.csl__list a { color: var(--main-color, #3366cc); text-decoration: none; font-size: 14px; line-height: 1.35; }
.csl__list a:hover { text-decoration: underline; }
@media (max-width: 768px) {
  .csl__title { font-size: 15px; }
  .csl__group > summary { font-size: 14px; padding: 10px 12px; }
  .csl__list { padding: 2px 12px 10px 28px; gap: 6px; }
  .csl__list a { font-size: 13px; }
}

/* ── Visit date next to the price (e.g. «26 900 ₽ | 12.04.2026») ──────────────
   Rendered as a secondary <span> inside .cs-case-price. .cs-case-sep = the «|»
   divider, .cs-case-date = the date. Same SIZE as the price (1em → 24px / mobile
   19px) so the line reads evenly; kept softer gray (#8a8a8a, not the brand blue) so
   the date is clearly distinct from the price and the two don't blend together. */
.cs-case-date {
  font-size: 1em !important;
  font-weight: 400 !important;
  color: #8a8a8a !important;
  white-space: nowrap;
}
.cs-case-sep {
  display: inline-block;
  margin: 0 .42em;
  color: #cfcfcf !important;
  font-weight: 400 !important;
}

/* 25.06.2026 — case-body bullet lists. Bare <ul>/<ol> inside .cs-text rendered with the
   browser default (list-style-position:outside + padding-left:0): markers cramped against the
   edge and clipped by .cs-description{overflow:hidden} on narrow screens. Give a real hanging
   indent. Markers keep the default (text) colour — black. :not([class]) keeps .csl__list intact. */
.cs-text ul:not([class]),
.cs-text ol:not([class]){
  margin: 4px 0 11px;
  padding-left: 20px;
  list-style-position: outside;
}
.cs-text ul:not([class]){ list-style-type: disc; }
.cs-text ol:not([class]){ list-style-type: decimal; }
.cs-text ul:not([class]) > li,
.cs-text ol:not([class]) > li{
  margin: 0 0 3px;
  line-height: 1.45;
}

/* ── Batch-reveal tail spacing (v38) ──
   Tail cases sit in their own `.cs-tail` wrapper, so the contextual heading
   top-margin (20px, applied to direct .service-block children) no longer
   matches and the inter-case gap collapses to the wrapper margin (10px on
   mobile). Restore it on the wrapper's first heading. Desktop already reads
   20px from `.cs-wrapper` margin, so this is a no-op there. */
.cs-tail[data-cs-tail] > .cs-case-heading { margin-top: 20px; }