/* Карточки блога и их слайдер: общие стили для страниц и блоков Views. */
.blog-block {
  --blog-gap: 40px;
  padding-block: var(--space-section);
  color: var(--color-black);
}
.blog-block > h2 {
  margin: 0 0 52px;
  color: inherit;
  font: 500 36px/44px var(--font-heading);
  letter-spacing: .36px;
}
.blog-block .view-display-id-block_1 > .view-content {
  display: block;
  margin: 0;
}
.blog-block .slick {
  padding: 0;
}
.blog-block .slick__slider {
  margin-inline: calc(var(--blog-gap) / -2);
}
.blog-block .slick-track {
  display: flex;
}
.blog-block .slick__slide {
  display: flex;
  flex-direction: column;
  height: auto;
  min-width: 0;
  padding-inline: calc(var(--blog-gap) / 2);
}
.views-page-blog-field-photo :is(a, picture) {
  display: block;
}
.blog-block {
  --blog-image-width: 328px;
}
.blog-block .slick__slide > [class^="views-page-blog-field-"] {
  width: 100%;
  max-width: var(--blog-image-width);
}
@media (min-width: 576px) {
  .blog-block {
    --blog-image-width: 445px;
  }
}
@media (min-width: 1200px) {
  .blog-block {
    --blog-image-width: 394px;
  }
}
.views-page-blog-field-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
}
.views-page-blog-field-title {
  flex-grow: 1;
  min-height: 64.8px;
  margin: 20px 0 12px;
  font: 400 20px/32.4px Arial, sans-serif;
}
.views-page-blog-field-title a {
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.views-page-blog-field-date {
  margin: 0 0 12px;
  padding-block: 1px;
  color: var(--blog-more-color);
  font: 400 10px/normal Arial, sans-serif;
  letter-spacing: 1px;
}
.views-page-blog-field-more {
  display: flex;
}
.views-page-blog-field-more a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 22.69px;
  color: var(--brand-color);
  font: 400 14px/21.7px Arial, sans-serif;
  text-decoration: none;
}
.views-page-blog-field-more a::after {
  content: '→';
}
.blog-block .slick__arrow {
  margin-top: 52px;
}
.blog-block .slick-dots {
  bottom: -92px;
}
.blog-block .slick__arrow:has(.slick-hidden) {
  display: none;
}
.blog-block .view-footer {
  margin-top: 52px;
}
.blog-block .read-blog {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--service-bg);
  color: var(--brand-color);
  font: 600 16px/28px var(--font-body);
  letter-spacing: .32px;
  text-decoration: none;
}
.blog-block .read-blog::after {
  content: '→';
  font: 700 20px/28px Arial, sans-serif;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .blog-block {
    --blog-gap: 52px;
  }
}
@media (max-width: 767.98px) {
  .blog-block {
    --blog-gap: 0px;
    padding-block: 28px;
  }
  .blog-block > h2 {
    margin-bottom: 24px;
    font-size: 28px;
    line-height: 34px;
    font-weight: 400;
    letter-spacing: .28px;
  }
  .views-page-blog-field-photo img {
    border-radius: 9.127px;
  }
  .blog-block .slick__slide > [class^="views-page-blog-field-"] {
    align-self: center;
  }
  .views-page-blog-field-title {
    min-height: 36.964px;
    margin-top: 12px;
    font: 400 14px/18.482px var(--font-body);
  }
  .views-page-blog-field-date {
    padding: 0;
    font-size: 12px;
    letter-spacing: .5704px;
  }
  .views-page-blog-field-more a {
    min-height: 16px;
    gap: 6px;
    font: 600 14px/15.972px var(--font-body);
    letter-spacing: .28px;
  }
  .views-page-blog-field-more a::after,
  .blog-block .read-blog::after {
    content: '';
    width: 16px;
    height: 16px;
    background: url('../images/review-arrow.svg') center no-repeat;
    transform: rotate(180deg);
  }
  .blog-block .slick__arrow {
    margin-top: 24px;
  }
  .blog-block .slick-dots {
    bottom: -64px;
  }
  .blog-block .view-footer {
    margin-top: 24px;
  }
  .blog-block .read-blog {
    gap: 6px;
    font-size: 14px;
    line-height: 15.972px;
    letter-spacing: .28px;
  }
}

/* Общие стили полной и сокращённой пагинации Views. */
.pagination.js-pager__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.pagination.js-pager__items .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--brand-color);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--brand-color);
  font: 500 14px/22px var(--font-body);
  text-decoration: none;
}
.pagination.js-pager__items a.page-link:hover {
  background: var(--region-bg);
}
.pagination.js-pager__items a.page-link:focus-visible {
  outline: 2px solid var(--brand-color);
  outline-offset: 3px;
  box-shadow: none;
}
.pagination.js-pager__items .active .page-link,
.pagination.js-pager__items .page-item:not(.disabled) > span.page-link {
  background: var(--brand-color);
  color: var(--text-color-light);
}
.pagination.js-pager__items .disabled .page-link {
  border-color: var(--border-color);
  color: var(--muted-color);
}
@media (max-width: 575.98px) {
  .pagination.js-pager__items {
    margin-top: 28px;
  }
  .pagination.js-pager__items .page-link {
    padding-inline: 12px;
  }
}
/* Общие карточки и сетка Views; отступы страниц задаются отдельно. */
.path-blog .view-nedelska-blog {
  padding-bottom: 60px;
}
:is(.views-page-item-list, .view-services-masaz .item-list) > ul > li {
  display: flex;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.path-blog .view-nedelska-blog .view-content {
  margin: 0;
}
.view-related-services .view-content {
  margin: 0;
}
.view-content > :is(.views-page-item-list, .view-services-masaz .item-list) {
  padding: 0;
}
:is(.views-page-item-list, .view-services-masaz .item-list) > ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.views-page-wrapper {
  --views-card-radius: 24px;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding-bottom: 12px;
  border-radius: var(--views-card-radius);
  background: var(--service-bg);
  box-shadow: inset 0 0 0 1px var(--border-color);
  color: var(--text-color);
  overflow-wrap: anywhere;
}
.views-page-wrapper .views-page-field-photo a,
.views-page-wrapper .views-page-field-photo picture {
  display: block;
}
.views-page-wrapper .views-page-field-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 393 / 196;
  object-fit: cover;
  border-radius: var(--views-card-radius) var(--views-card-radius) 0 0;
}
.views-page-wrapper .views-page-field-title {
  margin: 15px 12px 8px;
  font: 400 20px/29px var(--font-heading);
}
.views-page-wrapper .views-page-field-title a {
  color: var(--text-color);
  text-decoration: none;
}
.views-page-wrapper .views-page-field-title a:hover {
  color: var(--link-hover);
}
.views-page-wrapper .views-page-field-more {
  margin: auto 12px 0;
}
.views-page-wrapper .views-page-field-more a,
.views-page-actions .views-page-field-sing-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 49px;
  min-width: 0;
  padding: 6px 12px;
  border: 1px solid var(--text-color);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-color);
  font: 500 16px/34px var(--font-body);
  text-decoration: none;
}
.views-page-wrapper .views-page-field-more a:hover {
  background: var(--region-bg);
}
@media (max-width: 1199.98px) {
  .path-blog .view-nedelska-blog {
    padding-bottom: 39px;
  }
  .views-page-wrapper {
    --views-card-radius: var(--radius-card);
  }
  .views-page-wrapper .views-page-field-photo img {
    aspect-ratio: 288 / 163;
  }
  .views-page-wrapper .views-page-field-title {
    margin-top: 12px;
    font-size: 16px;
    line-height: 22px;
  }
}
@media (max-width: 959.98px) {
  :is(.views-page-item-list, .view-services-masaz .item-list) > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
@media (max-width: 575.98px) {
  :is(.views-page-item-list, .view-services-masaz .item-list) > ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .path-blog .view-nedelska-blog {
    padding-bottom: 28px;
  }
  .views-page-wrapper .views-page-field-photo img {
    aspect-ratio: 328 / 163;
  }
}
/* Services page spacing and service-specific card fields. */
.path-uslugi #block-nedelska-page-title h1 {
  margin: 0 0 16px;
  text-align: center;
  font: 400 40px/30px var(--font-heading);
}
.path-uslugi .view-services-masaz.view-display-id-page_1 {
  padding-bottom: 60px;
}
.path-uslugi .view-services-masaz .view-header {
  max-width: 833px;
  margin: 0 auto 56px;
  text-align: center;
  font: 300 16px/24px var(--font-body);
}
.path-uslugi .view-services-masaz .view-content {
  margin: 0;
}
.views-page-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: 0 12px 10px;
  font: 300 16px/29px var(--font-body);
}
.views-page-wrapper .views-page-field-price {
  color: var(--price-color);
  font-weight: 600;
}
.views-page-wrapper .views-page-field-description {
  min-height: 87px;
  margin: 0 12px 16px;
  font: 300 16px/29px var(--font-body);
}
.views-page-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: auto 12px 0;
}
.views-page-actions > div {
  min-width: 0;
}
.views-page-actions .views-page-field-more {
  margin: 0;
}
/* Support the currently configured sing-link class without changing Views. */
.views-page-actions .views-page-field-sing-link a {
  background: var(--brand-color);
  border-color: var(--brand-color);
  color: var(--text-color-light);
}
.views-page-actions .views-page-field-sing-link a:hover {
  background: var(--text-color);
  border-color: var(--text-color);
}
@media (max-width: 1199.98px) {
  .path-uslugi .view-services-masaz.view-display-id-page_1 {
    padding-bottom: 39px;
  }
  .path-uslugi .view-services-masaz .view-header {
    margin-bottom: 32px;
  }
  .views-page-details {
    column-gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 24px;
  }
  .views-page-wrapper .views-page-field-description {
    min-height: 96px;
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 24px;
  }
  .views-page-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 575.98px) {
  .path-uslugi #block-nedelska-page-title h1 {
    font-size: 28px;
  }
  .path-uslugi .view-services-masaz .view-header {
    margin-bottom: 24px;
    font-size: 14px;
  }
  .views-page-wrapper .views-page-field-description {
    min-height: 0;
  }
  .path-uslugi .view-services-masaz.view-display-id-page_1 {
    padding-bottom: 28px;
  }
}
/* Страница блога использует общие стили карточек выше. */
.path-blog .view-nedelska-blog .views-page-wrapper {
  max-width: 328px;
  padding-bottom: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-black);
}
.path-blog .views-page-blog-field-photo img {
  height: auto;
  aspect-ratio: auto;
}
/* Match the existing responsive image derivatives without enlarging them. */
@media (min-width: 576px) {
  .path-blog .view-nedelska-blog .views-page-wrapper {
    max-width: 445px;
  }
}
@media (min-width: 1200px) {
  .path-blog .view-nedelska-blog .views-page-wrapper {
    max-width: 394px;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .path-blog .view-nedelska-blog .views-page-item-list > ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 52px;
  }
}
@media (max-width: 767.98px) {
  .path-blog .view-nedelska-blog .views-page-wrapper {
    margin-inline: auto;
  }
  .path-blog .view-nedelska-blog .views-page-item-list > ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
/* Service cards must not exceed their prepared image width. */
.view-services-masaz,
.view-related-services {
  --service-image-width: 328px;
}
:is(.view-services-masaz, .view-related-services) .views-page-wrapper {
  max-width: var(--service-image-width);
  margin-inline: auto;
}
@media (min-width: 576px) {
  .view-services-masaz,
  .view-related-services {
    --service-image-width: 288px;
  }
}
@media (min-width: 1200px) {
  .view-services-masaz,
  .view-related-services {
    --service-image-width: 393px;
  }
}
