/*
 * Canonical shared page-composition owner.
 *
 * data-layout="home-family" preserves the established cross-route shell
 * without pretending that About, Prices, Promotions, Reviews, Works or
 * Doctors are the Home route. Component files loaded later remain the owners
 * of component internals; this file owns the established outer composition.
 */
body[data-layout="home-family"] {
  --font-display: "Stem", "Century Gothic", Arial, sans-serif;
  --font-body: "Century Gothic", "Trebuchet MS", Arial, sans-serif;
  --home-gap: 20px;
}

body[data-layout="home-family"] h1,
body[data-layout="home-family"] h2,
body[data-layout="home-family"] h3,
body[data-layout="home-family"] .button,
body[data-route="doctor"] .button {
  font-family: var(--font-display);
}

body[data-layout="home-family"] h1,
body[data-layout="home-family"] h2,
body[data-layout="home-family"] h3 {
  font-weight: 600;
}

body[data-layout="home-family"] .button,
body[data-route="doctor"] .button,
body[data-layout="home-family"] .services .service-card>span,
body[data-layout="home-family"] .doctors .section-action {
  --corner-color: #010f77;
  --corner-hover-color: #7c7c7c;
  --corner-inset: -1px;
}

body[data-layout="home-family"] .button::before,
body[data-route="doctor"] .button::before,
body[data-layout="home-family"] .services .service-card>span::before,
body[data-layout="home-family"] .doctors .section-action::before,
body[data-layout="home-family"] .button::after,
body[data-route="doctor"] .button::after,
body[data-layout="home-family"] .services .service-card>span::after,
body[data-layout="home-family"] .doctors .section-action::after {
  position: absolute;
  width: 10px;
  height: 10px;
  background: transparent;
  pointer-events: none;
  content: "";
  transform-origin: center;
}

body[data-layout="home-family"] .button::before,
body[data-route="doctor"] .button::before,
body[data-layout="home-family"] .services .service-card>span::before,
body[data-layout="home-family"] .doctors .section-action::before {
  top: calc(100% - var(--corner-inset) - 10px);
  left: var(--corner-inset);
  border-bottom: 2px solid var(--corner-color);
  border-left: 2px solid var(--corner-color);
}

body[data-layout="home-family"] .button::after,
body[data-route="doctor"] .button::after,
body[data-layout="home-family"] .services .service-card>span::after,
body[data-layout="home-family"] .doctors .section-action::after {
  top: var(--corner-inset);
  left: calc(100% - var(--corner-inset) - 10px);
  border-top: 2px solid var(--corner-color);
  border-right: 2px solid var(--corner-color);
}

body[data-layout="home-family"] .button,
body[data-route="doctor"] .button {
  --corner-color: #fff;
  --corner-hover-color: #010f77;
  justify-content: center;
  padding-inline: 24px;
}

body[data-layout="home-family"] .doctors .section-action {
  --corner-inset: 10px;
}

@media (hover: hover) {

  body[data-layout="home-family"] .button:hover,
  body[data-route="doctor"] .button:hover {
    --corner-color: var(--corner-hover-color);
    color: #010f77;
    background: #fff;
    border-color: #010f77;
  }

  body[data-layout="home-family"] .services .service-card:hover>span {
    --corner-color: #fff;
    color: #fff;
    background: #010f77;
    border-color: #010f77;
  }

  body[data-layout="home-family"] .button:hover::before,
  body[data-route="doctor"] .button:hover::before,
  body[data-layout="home-family"] .services .service-card:hover>span::before,
  body[data-layout="home-family"] .doctors .section-action:hover::before {
    animation: home-corner-before-clockwise .58s cubic-bezier(.45, 0, .2, 1) both;
  }

  body[data-layout="home-family"] .button:hover::after,
  body[data-route="doctor"] .button:hover::after,
  body[data-layout="home-family"] .services .service-card:hover>span::after,
  body[data-layout="home-family"] .doctors .section-action:hover::after {
    animation: home-corner-after-clockwise .58s cubic-bezier(.45, 0, .2, 1) both;
  }
}

body[data-layout="home-family"] .button:focus-visible,
body[data-route="doctor"] .button:focus-visible {
  --corner-color: var(--corner-hover-color);
  color: #010f77;
  background: #fff;
  border-color: #010f77;
}

body[data-layout="home-family"] .button:focus-visible::before,
body[data-route="doctor"] .button:focus-visible::before,
body[data-layout="home-family"] .doctors .section-action:focus-visible::before {
  animation: home-corner-before-clockwise .58s cubic-bezier(.45, 0, .2, 1) both;
}

body[data-layout="home-family"] .button:focus-visible::after,
body[data-route="doctor"] .button:focus-visible::after,
body[data-layout="home-family"] .doctors .section-action:focus-visible::after {
  animation: home-corner-after-clockwise .58s cubic-bezier(.45, 0, .2, 1) both;
}

@keyframes home-corner-before-clockwise {
  0% {
    top: calc(100% - var(--corner-inset) - 10px);
    left: var(--corner-inset);
    transform: rotate(0);
  }

  50% {
    top: var(--corner-inset);
    left: var(--corner-inset);
    transform: rotate(90deg);
  }

  100% {
    top: var(--corner-inset);
    left: calc(100% - var(--corner-inset) - 10px);
    transform: rotate(180deg);
  }
}

@keyframes home-corner-after-clockwise {
  0% {
    top: var(--corner-inset);
    left: calc(100% - var(--corner-inset) - 10px);
    transform: rotate(0);
  }

  50% {
    top: calc(100% - var(--corner-inset) - 10px);
    left: calc(100% - var(--corner-inset) - 10px);
    transform: rotate(90deg);
  }

  100% {
    top: calc(100% - var(--corner-inset) - 10px);
    left: var(--corner-inset);
    transform: rotate(180deg);
  }
}

body[data-layout="home-family"] .button__arrow,
body[data-route="doctor"] .button__arrow {
  display: none;
}

body[data-layout="home-family"] .page-shell {
  width: min(1320px, calc(100% - 120px));
}

body[data-layout="home-family"] main {
  overflow: hidden;
}


body[data-page="services"] .rating {
  position: relative;
  padding: 0;
  overflow: hidden;
}

body[data-layout="home-family"] .section>.page-shell,
body[data-page="services"] .rating>.page-shell {
  position: relative;
}



body[data-layout="home-family"] .services .service-card h3,
body[data-layout="home-family"] .services .service-card p {
  user-select: text;
}

body[data-layout="home-family"] .about-intro {
  height: 835px;
  min-height: 835px;
  background: #fff;
}

body[data-layout="home-family"] .home-feature-grid {

  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 300px);
  gap: 20px;
  border: 0;
}

body[data-layout="home-family"] .services {
  height: 1383px;
  min-height: 1383px;
  background: #fafafa;
}

body[data-layout="home-family"] .services .service-grid {
  position: absolute;
  top: 239px;
  left: 0;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, 290px);
  gap: 20px;
}

body[data-layout="home-family"] .services .service-card {
  display: block;
  min-height: 0;
  padding: 40px 30px 30px;
  background: transparent;
  border: 1px solid rgba(196, 196, 193, .45);
  overflow: visible;
  transition: background .2s ease, border-color .2s ease;
}

@media (hover: hover) {
  body[data-layout="home-family"] .services .service-card:hover {
    background: #fff;
    border-color: transparent;
  }
}

body[data-layout="home-family"] .services .service-card h3 {
  position: relative;
  z-index: 2;
  width: 215px;
  margin: 0;
  color: #303030;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}

body[data-layout="home-family"] .services .service-card p {
  position: relative;
  z-index: 2;
  width: 360px;
  max-width: 92%;
  margin: 30px 0 0;
  opacity: .7;
  font-size: 14px;
  line-height: 1;
}

body[data-layout="home-family"] .services .service-card>span {
  position: absolute;
  z-index: 3;
  bottom: 30px;
  left: 30px;
  display: grid;
  width: 140px;
  height: 44px;
  place-items: center;
  border: 1px solid #c4c4c1;
  color: #303030;
  font-family: var(--font-display);
  font-size: 14px;
}

body[data-layout="home-family"] .services .service-card>span::before {
  left: -2px;
}

body[data-layout="home-family"] .services .service-card>span::after {
  top: -2px;
}

body[data-layout="home-family"] .services .service-card picture,
body[data-layout="home-family"] .services .service-card img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 215px;
  height: 143px;
  object-fit: contain;
  filter: none;
}

body[data-layout="home-family"] .services .service-card picture {
  overflow: hidden;
}

body[data-layout="home-family"] .video-reviews {
  height: 715px;
  min-height: 715px;
  color: #303030;
  background: #fff;
}

body[data-layout="home-family"] .home-video-layout {
  position: absolute;
  top: 95px;
  left: 0;
  display: block;
  width: 100%;
  height: 500px;
}

body[data-layout="home-family"] .home-video-layout .quote-card {

  display: block;
  width: 460px;
  min-height: 0;
  padding: 0;
  border: 0;
}

body[data-layout="home-family"] .home-video-layout .quote-card p {
  width: 459px;
  max-width: none;
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

body[data-layout="home-family"] .cases {
  height: 1011px;
  min-height: 1011px;
  background: #fafafa;
}

body[data-layout="home-family"] .doctors {
  height: 1165px;
  min-height: 1165px;
  background: #fff;
}

body[data-layout="home-family"] .doctors__intro {
  position: absolute;
  top: 229px;
  left: 0;
  width: 555px;
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

body[data-layout="home-family"] .doctors .doctor-grid {
  position: absolute;
  top: 335px;
  left: 0;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 345px);
  gap: 20px;
  border: 0;
  background: transparent;
}

body[data-layout="home-family"] .doctor-role--mobile {
  display: none;
}

body[data-layout="home-family"] .doctors .section-action {
  position: relative;
  z-index: 6;
  display: flex;
  width: min(340px, 100%);
  max-width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 29px auto 0;
  font-size: 14px;
}

body:is([data-layout="home-family"], [data-page="services"]) .rating {
  height: 949px;
  min-height: 949px;
  color: #303030;
  background: #fafafa;
}

body[data-layout="home-family"] .promotions {
  height: 689px;
  min-height: 689px;
  background: #fff;
}

body[data-layout="home-family"] .faq {
  height: auto;
  min-height: 799px;
  background: #fff;
}

@media (max-width: 1359px) and (min-width: 768px) {
  body[data-layout="home-family"] {
    --tablet-side: 32px;
  }

  body[data-layout="home-family"] .page-shell {
    width: calc(100% - (var(--tablet-side) * 2));
  }

  body[data-layout="home-family"] .section:not(.appointment)::before,
  body[data-page="services"] .rating::before {
    width: calc(100% - (var(--tablet-side) * 2));
  }

  body[data-layout="home-family"] .about-intro {
    height: 1100px;
    min-height: 1100px;
  }

  body[data-layout="home-family"] .home-feature-grid {
    top: 200px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, 250px);
    column-gap: 16px;
    row-gap: 40px;
  }

  /* На широкой части переходного диапазона держим ритм карточек: запись — обычная третья карточка, не строка на всю ширину. */
  @media (min-width: 1100px) {
    body[data-layout="home-family"] .about-intro {
      height: 800px;
      min-height: 800px;
    }

    body[data-layout="home-family"] .home-feature-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-template-rows: repeat(2, 250px);
      gap: 16px;
    }

  }

  body[data-layout="home-family"] .services {
    height: 1670px;
    min-height: 1670px;
    background: linear-gradient(to bottom, #fafafa calc(100% - 60px), #fff calc(100% - 60px));
    box-shadow: 0 -60px 0 0 #fafafa;
  }

  body[data-layout="home-family"] .services .service-grid {
    top: 205px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, 260px);
    gap: 16px;
  }

  body[data-layout="home-family"] .services .service-card {
    padding: 30px 24px 24px;
  }

  body[data-layout="home-family"] .services .service-card p {
    width: calc(100% - 24px);
    max-width: none;
  }

  body[data-layout="home-family"] .services .service-card>span {
    bottom: 24px;
    left: 24px;
  }

  body[data-layout="home-family"] .services .service-card picture,
  body[data-layout="home-family"] .services .service-card img {
    width: 195px;
    height: 135px;
  }

  /* Рука в макете должна быть 215×143; здесь просто масштабируем её под высоту карточки. */
  body[data-layout="home-family"] .services .service-card--prosthetics picture {
    width: 203px;
    height: 135px;
  }

  body[data-layout="home-family"] .services .service-card--prosthetics img {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    width: 203px;
    max-width: none;
    height: 135px;
    object-fit: fill;
  }

  @media (max-width: 900px) {
    body[data-layout="home-family"] .services {
      height: 2773px;
      min-height: 2773px;
    }

    body[data-layout="home-family"] .services .service-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(9, 260px);
      gap: 16px;
    }
  }

  body[data-layout="home-family"] .video-reviews {
    height: 805px;
    min-height: 805px;
  }

  body[data-layout="home-family"] .home-video-layout {
    top: 78px;
    height: 617px;
  }

  body[data-layout="home-family"] .home-video-layout .quote-card {

    width: 34%;
  }

  body[data-layout="home-family"] .home-video-layout .quote-card p {
    width: 100%;
  }

  body[data-layout="home-family"] .cases {
    height: calc(39.1304vw + 479.74px);
    min-height: 0;
    background: linear-gradient(to bottom, #fafafa calc(100% - 60px), #fff calc(100% - 60px));
    box-shadow: 0 -60px 0 0 #fafafa;
  }

  body[data-layout="home-family"] .doctors {
    height: 1160px;
    min-height: 1160px;
  }

  body[data-layout="home-family"] .doctors__intro {
    top: calc(108px + clamp(80px, 8.4vw, 100px));
    width: min(620px, 72vw);
  }

  body[data-layout="home-family"] .doctors .doctor-grid {
    top: 275px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 345px);
    gap: 16px;
  }

  /* Между опорными ширинами фотозона и исходный индивидуальный кроп масштабируются вместе. */

  body[data-layout="home-family"] .doctors .section-action {
    --corner-color: #fff;
    --corner-inset: 10px;
    top: auto;
    right: auto;
    bottom: 90px;
    left: 50%;
    width: 340px;
    height: 60px;
    font-size: 16px;
    transform: translateX(-50%);
  }

  @media (hover: hover) {
    body[data-layout="home-family"] .doctors .section-action:hover {
      --corner-color: #010f77;
    }
  }

  body[data-layout="home-family"] .doctors .section-action:focus-visible {
    --corner-color: #010f77;
  }

  @media (max-width: 1159px) {
    body[data-layout="home-family"] .doctors {
      height: 1880px;
      min-height: 1880px;
    }

    body[data-layout="home-family"] .doctors .doctor-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(4, 345px);
    }

  }

  body:is([data-layout="home-family"], [data-page="services"]) .rating {
    height: 970px;
    min-height: 970px;
    background: linear-gradient(to bottom, #fafafa calc(100% - 60px), #fff calc(100% - 60px));
    box-shadow: 0 -60px 0 0 #fafafa;
  }

  body[data-layout="home-family"] .promotions {
    height: 620px;
    min-height: 620px;
  }

  body[data-layout="home-family"] .faq {
    height: auto;
    min-height: 780px;
  }

}

@media (max-width: 767px) {
  body[data-layout="home-family"] {
    --home-side: 20px;
    font-size: 14px;
  }

  body[data-layout="home-family"] .page-shell {
    width: calc(100% - 40px);
  }



  /* Над секциями 3, 5 и 8 серые карточки уже оставляют белый хвост 40px, поэтому после них нужен только оставшийся зазор. */




  body[data-layout="home-family"] .video-reviews {
    height: 974px;
    min-height: 974px;
  }

  body[data-layout="home-family"] .cases {
    background: #fafafa;
  }

  body[data-layout="home-family"] .doctors {
    --doctor-mobile-photo-height: clamp(321px, calc(9.5vw + 280px), 353px);
    height: clamp(1682px, calc(19vw + 1600px), 1746px);
    min-height: clamp(1682px, calc(19vw + 1600px), 1746px);
  }


  body[data-layout="home-family"] .promotions {
    height: 1132px;
    min-height: 1132px;
  }

  body[data-layout="home-family"] .faq {
    height: auto;
    min-height: 540px;
  }

  body[data-layout="home-family"] .section:not(.appointment)::before,
  body[data-page="services"] .rating::before {
    width: calc(100% - 40px);
  }

  body[data-layout="home-family"] .home-feature-grid {

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }

  body[data-layout="home-family"] .services .service-grid {
    top: 152px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, 272px);
    gap: 10px;
  }

  body[data-layout="home-family"] .services .service-card {
    min-height: 0;
    padding: 30px 20px 20px;
  }

  body[data-layout="home-family"] .services .service-card h3 {
    width: 360px;
    max-width: none;
    font-size: 20px;
  }

  body[data-layout="home-family"] .services .service-card h3 br {
    display: none;
  }

  body[data-layout="home-family"] .services .service-card--diagnostics h3 {
    width: 210px;
  }

  body[data-layout="home-family"] .services .service-card p {
    width: 360px;
    max-width: none;
    margin-top: 30px;
    font-size: 14px;
  }

  body[data-layout="home-family"] .services .service-card>span {
    bottom: 22px;
    left: 20px;
  }

  body[data-layout="home-family"] .services .service-card picture,
  body[data-layout="home-family"] .services .service-card img {
    width: 202px;
    height: 143px;
  }

  body[data-layout="home-family"] .services .service-card picture {
    overflow: hidden;
  }

  body[data-layout="home-family"] .services .service-card picture img {
    right: auto;
    bottom: auto;
    max-width: none;
  }

  body[data-layout="home-family"] .services .service-card--diagnostics img {
    left: 0;
    top: -0.13%;
    width: 106.44%;
    height: 100.25%;
    object-fit: fill;
  }

  body[data-layout="home-family"] .services .service-card--hygiene img {
    object-fit: cover;
  }

  body[data-layout="home-family"] .services .service-card:is(.service-card--pediatric, .service-card--prosthetics) img {
    object-fit: fill;
  }

  body[data-layout="home-family"] .services .service-card--therapy img {
    left: 8.6%;
    top: -11.35%;
    width: 113.62%;
    height: 135.33%;
    object-fit: fill;
  }

  body[data-layout="home-family"] .services .service-card--braces img {
    left: -0.17%;
    top: 11.02%;
    width: 92.38%;
    height: 78.13%;
    object-fit: fill;
  }

  body[data-layout="home-family"] .services .service-card--aligners img {
    left: 7.07%;
    top: 9.81%;
    width: 86.76%;
    height: 80.38%;
    object-fit: fill;
  }

  body[data-layout="home-family"] .services .service-card--implants img {
    left: 11.64%;
    top: 10.93%;
    width: 76.71%;
    height: 80.68%;
    object-fit: fill;
  }

  body[data-layout="home-family"] .services .service-card--surgery img {
    left: 0.22%;
    top: 0;
    width: 141.35%;
    height: 100%;
    object-fit: fill;
  }

  body[data-layout="home-family"] .home-video-layout {
    top: 0;
    height: 100%;
  }

  body[data-layout="home-family"] .home-video-layout .quote-card {
    top: 152px;
    width: 100%;
  }

  body[data-layout="home-family"] .home-video-layout .quote-card p {
    width: 100%;
    font-size: 14px;
  }

  body[data-layout="home-family"] .doctors__intro {
    top: 152px;
    width: 100%;
    font-size: 14px;
  }

  body[data-layout="home-family"] .doctors .doctor-grid {
    top: 255px;
    display: block;
  }

  body[data-layout="home-family"] .doctor-role--desktop {
    display: none;
  }

  body[data-layout="home-family"] .doctor-role--mobile {
    display: inline;
  }

  body[data-layout="home-family"] .doctors .section-action {
    --corner-color: #fff;
    top: auto;
    right: 0;
    bottom: 0;
    width: min(340px, 100%);
    max-width: 100%;
    height: 60px;
  }

  @media (hover: hover) {
    body[data-layout="home-family"] .doctors .section-action:hover {
      --corner-color: #010f77;
    }
  }

  body[data-layout="home-family"] .doctors .section-action:focus-visible {
    --corner-color: #010f77;
  }

}

@media (max-width: 340px) {

  body[data-layout="home-family"] .services .service-card h3,
  body[data-layout="home-family"] .services .service-card p {
    width: 100%;
    max-width: 100%;
  }

}

/* От 768px сохраняем кропы миниатюр из макета; обычный center-cover слишком сильно их приближает. Коробки всё те же 90×90. */
@media (min-width: 768px) {}

/* На планшетах desktop-кропы оборудования не помещаются рядом с текстом.
   До 1200px сохраняем однокарточную логику с отдельной широкой геометрией. */
@media (min-width: 768px) and (max-width: 1199px) {}

/* На узком планшете три промо-карточки становятся слишком плотными.
   Используем мобильный порядок, но оставляем карточки широкими. */
@media (min-width: 768px) and (max-width: 999px) {
  body[data-layout="home-family"] .promotions {
    height: 1230px;
    min-height: 1230px;
  }

}

/* STAGE-07R: intrinsic collection owners. Figma floors stay unchanged for the
   canonical fixtures; added or longer data grows the owner instead of clipping. */
@media (min-width: 1360px) {

  body[data-layout="home-family"] .about-intro,
  body[data-layout="home-family"] .services,
  body[data-layout="home-family"] .promotions {
    height: auto;
  }


  body[data-layout="home-family"] .home-feature-grid {
    position: relative;
    top: auto;
    grid-template-rows: none;
    grid-auto-rows: minmax(300px, auto);
  }

  body[data-layout="home-family"] .services {
    padding-bottom: 234px;
  }

  body[data-layout="home-family"] .services .service-grid {
    position: relative;
    top: auto;
    grid-template-rows: none;
    grid-auto-rows: minmax(290px, auto);
  }


  body[data-layout="home-family"] .doctors,
  body:is([data-layout="home-family"], [data-page="services"]) .rating {
    height: auto;
  }

  body[data-layout="home-family"] .doctors {
    padding-bottom: 120px;
  }

  body[data-layout="home-family"] .doctors .doctor-grid {
    position: relative;
    top: auto;
    grid-template-rows: none;
    grid-auto-rows: minmax(345px, auto);
  }



}

@media (min-width: 1200px) {}

@media (min-width: 1100px) and (max-width: 1359px) {
  body[data-layout="home-family"] .about-intro {
    height: auto;
  }



  body[data-layout="home-family"] .home-feature-grid {
    position: relative;
    top: auto;
    grid-template-rows: none;
    grid-auto-rows: minmax(250px, auto);
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  body[data-layout="home-family"] .about-intro {
    height: auto;
  }


  body[data-layout="home-family"] .home-feature-grid {
    position: relative;
    top: auto;
    grid-template-rows: none;
    grid-auto-rows: minmax(250px, auto);
  }
}

@media (min-width: 901px) and (max-width: 1359px) {
  body[data-layout="home-family"] .services {
    height: auto;
    padding-bottom: 101px;
  }

  body[data-layout="home-family"] .services .service-grid {
    position: relative;
    top: auto;
    grid-template-rows: none;
    grid-auto-rows: minmax(260px, auto);
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  body[data-layout="home-family"] .services {
    height: auto;
    padding-bottom: 100px;
  }

  body[data-layout="home-family"] .services .service-grid {
    position: relative;
    top: auto;
    grid-template-rows: none;
    grid-auto-rows: minmax(260px, auto);
  }
}

@media (min-width: 1000px) and (max-width: 1359px) {
  body[data-layout="home-family"] .promotions {
    height: auto;
    padding-bottom: 80px;
  }

}

@media (min-width: 768px) and (max-width: 999px) {
  body[data-layout="home-family"] .promotions {
    height: auto;
    padding-bottom: 40px;
  }

}

@media (min-width: 768px) and (max-width: 1359px) {
  body[data-layout="home-family"] .doctors {
    height: auto;
  }

  body[data-layout="home-family"] .doctors .doctor-grid {
    position: relative;
    top: auto;
    grid-template-rows: none;
    grid-auto-rows: minmax(345px, auto);
  }

  body[data-layout="home-family"] .doctors .section-action {
    position: relative;
    inset: auto;
    display: flex;
    margin: 29px auto 90px;
    transform: none;
  }
}

@media (max-width: 767px) {

  body[data-layout="home-family"] .about-intro,
  body[data-layout="home-family"] .services,
  body[data-layout="home-family"] .doctors,
  body:is([data-layout="home-family"], [data-page="services"]) .rating,
  body[data-layout="home-family"] .promotions {
    height: auto;
  }


  /* body[data-layout="home-family"] .home-feature-grid {
    position: relative;
    top: auto;
    grid-template-rows: none;
    grid-auto-rows: minmax(227px, auto);
  } */

  body[data-layout="home-family"] .services .service-grid {
    position: relative;
    top: auto;
    grid-template-rows: none;
    grid-auto-rows: minmax(272px, auto);
  }

  body[data-layout="home-family"] .doctors .doctor-grid {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(2, max-content);
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  body[data-layout="home-family"] .doctors .section-action {
    position: relative;
    inset: auto;
    display: flex;
    margin: 35px auto 0;
  }


}

@media (max-width: 1199px) {}

@media (min-width: 768px) and (max-width: 1199px) {}

@media (max-width: 767px) {}

@media (max-width: 429px) {
  body[data-layout="home-family"] .services .service-card :is(h3, p) {
    width: 100%;
    max-width: 100%;
  }
}

/* От 1360px — точная геометрия кадров по каждому узлу макета. */
@media (min-width: 1360px) {
  /* D2: миниатюры прижаты к углу на 2px, кроп у каждой свой. */

  /* D3: точные окна картинок — отдельно окно и внутренний кроп. */
  body[data-layout="home-family"] .services .service-card picture {
    overflow: hidden;
  }

  body[data-layout="home-family"] .services .service-card picture img {
    right: auto;
    bottom: auto;
    max-width: none;
  }

  body[data-layout="home-family"] .services .service-card:is(.service-card--diagnostics, .service-card--hygiene) img {
    object-fit: cover;
  }

  body[data-layout="home-family"] .services .service-card:is(.service-card--pediatric, .service-card--prosthetics) img {
    object-fit: fill;
  }

  body[data-layout="home-family"] .services .service-card--therapy picture {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    width: 187px;
    height: 157px;
  }

  body[data-layout="home-family"] .services .service-card--therapy img {
    left: 24.26%;
    top: -9.84%;
    width: 101.46%;
    height: 120.84%;
    object-fit: fill;
    clip-path: none;
  }

  body[data-layout="home-family"] .services .service-card--braces img {
    left: -0.17%;
    top: 11.02%;
    width: 92.38%;
    height: 78.13%;
    object-fit: fill;
  }

  body[data-layout="home-family"] .services .service-card--aligners img {
    left: 7.07%;
    top: 9.81%;
    width: 86.76%;
    height: 80.38%;
    object-fit: fill;
    clip-path: none;
  }

  body[data-layout="home-family"] .services .service-card--implants img {
    left: 11.64%;
    top: 10.93%;
    width: 76.71%;
    height: 80.68%;
    object-fit: fill;
  }

  body[data-layout="home-family"] .services .service-card--surgery picture {
    top: auto;
    right: 30px;
    bottom: 0;
    left: auto;
    width: 156px;
    height: 143px;
  }

  body[data-layout="home-family"] .services .service-card--surgery img {
    left: 0.22%;
    top: 0;
    width: 141.35%;
    height: 100%;
    object-fit: fill;
    clip-path: none;
  }

  body[data-layout="home-family"] .services .service-card h3 {
    width: 210px;
  }

  body[data-layout="home-family"] .services .service-card p {
    max-width: none;
  }

  /* D4: кроп AirFlow как в макете. */

  /* D5: фото врачей — окно 271px и точный кроп. */

  /* D6: немного подправляем позиции в карточке рейтинга. */

  /* D7: точные кадры акций; у второй сначала кроп, потом переворот. */

  /* S10: цветные секции заходят на 60px выше верхнего разделителя и заканчиваются белым хвостом перед нижним. */
  body[data-layout="home-family"] .services {
    background: linear-gradient(to bottom, #fafafa calc(100% - 174px), #fff calc(100% - 174px));
    box-shadow: 0 -60px 0 0 #fafafa;
  }


}

/* Блок рейтинга доходит до desktop-опорника без жёстких 407px карточек:
   так крайняя карточка не выходит из фотозоны, а серый фон не перескакивает. */
@media (min-width: 1360px) and (max-width: 1439px) {
  body:is([data-layout="home-family"], [data-page="services"]) .rating {
    height: 970px;
    min-height: 970px;
    background: linear-gradient(to bottom, #fafafa calc(100% - 60px), #fff calc(100% - 60px));
  }

}

/* Три карточки начинают сжиматься раньше мобильного порога, поэтому рейтинг
   переходит в его одноколоночную композицию уже на узком планшете. */
@media (min-width: 768px) and (max-width: 999px) {
  body:is([data-layout="home-family"], [data-page="services"]) .rating {
    height: 1126px;
    min-height: 1126px;
    background: linear-gradient(to bottom, #fafafa calc(100% - 40px), #fff calc(100% - 40px));
    box-shadow: 0 -40px 0 0 #fafafa;
  }

}

@media (min-width: 768px) and (max-width: 999px) {
  body:is([data-layout="home-family"], [data-page="services"]) .rating {
    height: auto;
  }



}


@media (min-width: 1000px) and (max-width: 1439px) {
  body:is([data-layout="home-family"], [data-page="services"]) .rating {
    height: auto;
  }



}

@media (min-width: 1200px) and (max-width: 1359px) {}

/* Content/count resilience keeps the frozen fixture geometry but lets the
   owning rows and sections shrink or grow when loop data changes. */
body[data-layout="home-family"] .about-intro,
body[data-layout="home-family"] .services,
body[data-layout="home-family"] .doctors,
body:is([data-layout="home-family"], [data-page="services"]) .rating,
body[data-layout="home-family"] .promotions,
body[data-layout="home-family"] .faq {
  min-height: 0;
  overflow: visible;
}

.home-feature-grid>.about__title {
  margin: 0;
  padding: 0 20px 0 0;
}

.home-feature-grid>.about__title span {
  color: #c0c1cc;
}

body[data-layout="home-family"] .services .service-grid {
  grid-template-rows: none;
  grid-auto-rows: auto;
}

body[data-layout="home-family"] .services .service-card {
  height: auto;
  min-height: 0;
}

@media (min-width: 1360px) {
  body[data-layout="home-family"] .services .service-card {
    padding-bottom: 136px;
  }

  body[data-layout="home-family"] .services .service-card:is(.service-card--therapy,
    .service-card--braces,
    .service-card--aligners,
    .service-card--implants,
    .service-card--prosthetics,
    .service-card--surgery) {
    padding-bottom: 156px;
  }

  body[data-layout="home-family"] .doctors__intro {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 0 41.22px;
  }
}

@media (min-width: 901px) and (max-width: 1359px) {
  body[data-layout="home-family"] .services .service-card {
    padding-bottom: 108px;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  body[data-layout="home-family"] .services .service-card {
    padding-bottom: 108px;
  }
}

@media (min-width: 768px) and (max-width: 1359px) {
  body[data-layout="home-family"] .doctors__intro {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 0 20px;
  }
}

@media (max-width: 767px) {
  body[data-layout="home-family"] .services .service-card {
    padding-bottom: 148px;
  }

  body[data-layout="home-family"] .doctors__intro {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 0 27.44px;
  }

  .home-feature-grid>.about__title {
    margin-bottom: 20px;
  }
}

/* Below the 430px design anchor the service cards need an intrinsic bottom
   row: the 140px action and decorative media no longer fit side by side when
   both are absolutely positioned. */
@media (max-width: 405px) {
  body[data-layout="home-family"] .services .service-card {
    min-height: 272px;
    padding: 30px 20px 20px;
  }

  body[data-layout="home-family"] .services .service-card h3 {
    margin-bottom: 30px;
  }


}

/* Equipment media is clipped by a card-owned window and scales without distortion. */

@media (min-width: 1360px) {}

@media (min-width: 1200px) and (max-width: 1359px) {}

@media (min-width: 768px) and (max-width: 1199px) {}

@media (max-width: 1199px) {}

@media (max-width: 767px) {}

/* TASK-2026-09-01-05: content owners use intrinsic block geometry.  The
   reference fixture keeps its media floors and spacing, while longer copy or
   additional rows can extend the owner and reduced collections can remove
   rows without leaving a section-height reservation behind. */
body[data-layout="home-family"]:not([data-route="about"]) :is(.video-reviews, .cases, .rating) {
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* Video reviews: slide media and every text field participate in one grid.
   The tallest source slide owns track height; carousel transforms stay purely
   inline and no longer hide expanded copy. */


body[data-layout="home-family"]:not([data-route="about"]) .home-video-layout {
  position: relative;
  inset: auto;
  display: grid;
  height: auto;
  grid-template-columns: 460px 650px;
  justify-content: space-between;
}

body[data-layout="home-family"]:not([data-route="about"]) .home-video-layout .quote-card {
  position: relative;
  inset: auto;
  align-self: start;
  margin-top: 30px;
}

/* Work carousel shell is sized by the tallest card, not by the reference
   inventory. */




/* Только desktop-кнопка списка врачей получает крупные серые угловые шевроны. */
@media (min-width: 1360px) {

  body[data-layout="home-family"] .doctors .section-action::before,
  body[data-layout="home-family"] .doctors .section-action::after {
    width: 10px;
    height: 10px;
    border: 0;
  }

  body[data-layout="home-family"] .doctors .section-action::before {
    top: auto;
    right: auto;
    bottom: -1px;
    left: -1px;
    border-bottom: 2px solid #c4c4c1;
    border-left: 2px solid #c4c4c1;
  }

  body[data-layout="home-family"] .doctors .section-action::after {
    top: -1px;
    right: -1px;
    bottom: auto;
    left: auto;
    border-top: 2px solid #c4c4c1;
    border-right: 2px solid #c4c4c1;
  }

  @media (hover: hover) {

    body[data-layout="home-family"] .doctors .section-action:hover::before,
    body[data-layout="home-family"] .doctors .section-action:hover::after {
      animation: none;
    }
  }

  body[data-layout="home-family"] .doctors .section-action:focus-visible::before,
  body[data-layout="home-family"] .doctors .section-action:focus-visible::after {
    animation: none;
  }
}

/* Rating cards keep the reference artwork floor, but copy now owns rows and
   can increase card/grid/section height. */

@media (min-width: 768px) and (max-width: 1359px) {


  body[data-layout="home-family"]:not([data-route="about"]) .home-video-layout {
    grid-template-columns: 34% 63%;
    grid-template-rows: max-content minmax(0, 1fr);
  }

  body[data-layout="home-family"]:not([data-route="about"]) .home-video-layout .quote-card {
    width: auto;

  }
}

@media (max-width: 767px) {


  body[data-layout="home-family"]:not([data-route="about"]) .home-video-layout {
    display: block;
  }

  body[data-layout="home-family"]:not([data-route="about"]) .home-video-layout .quote-card {
    margin-top: 0;
  }


}