/* servicios-cnc2.html — variant s vyezzhayushchey snizu panelyu uslug.
   Podklyuchaetsya VMESTO service-d.css, ostalnye fayly ne tragayutsya. */

/* ---------------------------------------------------------------
   Nizhnyaya gruppa uslug (kak v service-d.css).
   Do 1200px: dve pary kartochek drug pod drugom (2x2).
   Ot 1200px: obe pary slivayutsya v odin flex-ryad iz 4 kartochek
   cherez display:contents, chtoby rabotala rodnaya razdvizhka
   .card-service-expandable:hover { width: 150% }.
   --------------------------------------------------------------- */

.services-bottom-group {
  grid-column-gap: var(--spacing--16);
  grid-row-gap: var(--spacing--16);
  flex-flow: column;
  display: flex;
}

@media screen and (min-width: 1200px) {
  .services-bottom-group {
    flex-flow: row;
  }

  .services-bottom-group > .services-expandable-halves {
    display: contents;
  }
}

/* ---------------------------------------------------------------
   Panel uslug: po kliku podnimaetsya snizu vverh na vsyu ploshchad
   plitki, zatemnyaya kartinku. Vnutri — spisok uslug i knopka.
   Kartochka uzhe imeet overflow:clip, poetomu panel v zakrytom
   sostoyanii spryatana za nizhney granicey.
   --------------------------------------------------------------- */

.card-service-expandable .overlay-client-story {
  z-index: 4;
  inset: 0;
  padding: var(--spacing--24);
  align-items: center;
  border-radius: inherit;
  background-color: var(--_🎨-color--tokens---background--lift-80-opacity);
  background-color: color-mix(in srgb, var(--_🎨-color--tokens---background--lift-80-opacity) 78%, #0000);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .5s cubic-bezier(.2, .8, .25, 1), visibility 0s linear .5s;
}

.card-service-expandable.is-open .overlay-client-story {
  transform: translateY(0);
  visibility: visible;
  transition: transform .5s cubic-bezier(.2, .8, .25, 1), visibility 0s;
}

/* Zatemnenie osnovnoy kartinki pod panelyu. */

.card-service-expandable .image-wrap-service-expandable {
  transition: filter .5s ease;
}

.card-service-expandable.is-open .image-wrap-service-expandable {
  filter: brightness(.68) saturate(.92);
}

/* Kartochka spiska zanimaet vsyu panel: bez sobstvennogo stekla,
   fon i blur uzhe na .overlay-client-story. */

.card-service-expandable .card-client-story {
  width: 100%;
  max-width: none;
  max-height: 100%;
  padding: 0;
  grid-row-gap: var(--spacing--16);
  background-color: #0000;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: auto;
}

/* Soderzhimoe vsplyvaet s nebolshoy zaderzhkoy posle panely.
   Sdvig — na samom skrollere, a ne na ego detyah: transform u detey
   rasshiryaet scrollable overflow area, i na vremya animacii vnutri
   kartochki uspevaet mignut skrollbar. */

.card-service-expandable .card-client-story {
  transform: translateY(12px);
  transition: transform .3s ease;
}

.card-service-expandable.is-open .card-client-story {
  transform: none;
  transition: transform .45s cubic-bezier(.2, .8, .25, 1) .18s;
}

.card-service-expandable .card-client-story > * {
  opacity: 0;
  transition: opacity .3s ease;
}

.card-service-expandable.is-open .card-client-story > * {
  opacity: 1;
  transition: opacity .35s ease .18s;
}

/* Punkty bez ikonok: mezhdu strokami volosyanaya liniya
   na tom zhe tokene, chto i .divider-light-16. */

.card-client-story .plan-list {
  width: 100%;
  grid-row-gap: var(--spacing--12);
}

.card-client-story .plan-list-item + .plan-list-item {
  border-top: 1px solid var(--_🎨-color--base---neutral--light-16);
  padding-top: var(--spacing--12);
}

/* Knopka cen: po centru i na 20% menshe. Vse metriki — tokeny * .8,
   poetomu propocii sohranyayutsya i na mobilnom brakepointe. */

.card-client-story .cta-main {
  align-self: center;
  margin-top: var(--spacing--16);
  padding: calc(var(--spacing--8) * .8) calc(var(--spacing--16) * .8);
  grid-column-gap: calc(var(--spacing--8) * .8);
  grid-row-gap: calc(var(--spacing--8) * .8);
  font-size: calc(var(--_🔠-typography---size--button-1) * .8);
  line-height: calc(var(--_🔠-typography---line-height--button-1) * .8);
}

/* Maska teksta v ns_styles.css imeet fiksirovannuyu vysotu line-height
   knopki: bez masshtabirovaniya iz-pod nee vidno hover-kopiyu nadpisi. */

.card-client-story .cta-main .button-text-mask {
  height: calc(var(--_🔠-typography---line-height--button-1) * .8);
}

.card-client-story .cta-main .button-circle {
  width: calc(var(--spacing--8) * .8);
  height: calc(var(--spacing--8) * .8);
}

@media screen and (max-width: 767px) {
  .card-service-expandable .overlay-client-story {
    padding: var(--spacing--16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-service-expandable .overlay-client-story,
  .card-service-expandable .card-client-story,
  .card-service-expandable .card-client-story > *,
  .card-service-expandable .image-wrap-service-expandable {
    transition-duration: .01ms;
    transition-delay: 0s;
  }

  .card-service-expandable .card-client-story {
    transform: none;
  }
}