/* Hub-листы: catalog / compass / places / market — 1:1 с Featured Services на главной.
   Подключать после grid-card.css, places grid, market.css. */

/* Симметричный зазор между карточками: padding ячейки = боковой inset (как при max-width 90%). */
.homepage-featured-grid.services-grid,
.hub-listing-grid.services-grid,
.hub-listing-grid.compass-grid,
.hub-listing-grid.places-grid,
.hub-listing-grid.mkt-grid,
.cp-listings-grid.services-grid,
.pp-company-listings-grid.services-grid {
  --z-hub-card-fill: 90%;
}

.hub-listing-grid.services-grid,
.hub-listing-grid.compass-grid,
.hub-listing-grid.places-grid,
.hub-listing-grid.mkt-grid,
.homepage-featured-grid.services-grid {
  --z-card-radius: 20px;
  --z-card-gap: 0px;
  --z-card-photo-radius: 0;
  --z-card-photo-bottom-radius: var(--z-card-radius);
  --z-card-photo-aspect: 1 / 1;
  gap: 32px;
  max-width: 100%;
}

.hub-listing-grid.services-grid,
.hub-listing-grid.compass-grid,
.hub-listing-grid.places-grid,
.hub-listing-grid.mkt-grid {
  gap: 18px;
}

/* Ячейки сетки — одинаковый отступ между карточками по горизонтали и вертикали */
.homepage-featured-grid .svc-card-wrapper,
.homepage-featured-grid .compass-card-wrap,
.hub-listing-grid .svc-card-wrapper,
.hub-listing-grid .compass-card-wrap,
.hub-listing-grid.places-grid > .place-card-wrap,
.hub-listing-grid.mkt-grid > .mkt-card-wrap,
.cp-listings-grid .svc-card-wrapper,
.pp-company-listings-grid .svc-card-wrapper {
  position: relative;
  max-width: 100%;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
  --z-hub-card-inset: calc((100% - var(--z-hub-card-fill, 90%)) / 2);
  padding: var(--z-hub-card-inset);
}

/* Compass */
.homepage-featured-grid .compass-card,
.hub-listing-grid .compass-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: var(--z-card-radius, 28px);
  border: var(--z-card-gap, 0px) solid #fff;
}

.homepage-featured-grid .compass-card-img,
.hub-listing-grid .compass-card-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 0;
  max-height: none;
  border-radius: var(--z-card-photo-radius);
  isolation: isolate;
}

.homepage-featured-grid .compass-card-img img,
.homepage-featured-grid .compass-card-img picture,
.homepage-featured-grid .compass-card-img video,
.homepage-featured-grid .compass-card-img .card-carousel__slide img,
.hub-listing-grid .compass-card-img img,
.hub-listing-grid .compass-card-img picture,
.hub-listing-grid .compass-card-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: inherit;
}

.hub-listing-grid .compass-card {
  flex-direction: column !important;
  align-items: stretch !important;
}

.hub-listing-grid .compass-card-text {
  display: -webkit-box !important;
}

/* Places */
.hub-listing-grid.places-grid > .place-card-wrap > .place-card {
  box-sizing: border-box;
  border-radius: var(--z-card-radius, 28px);
  border: var(--z-card-gap, 0px) solid #fff;
}

.hub-listing-grid .place-card-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1 !important;
  min-height: 0;
  max-height: none;
  border-radius: var(--z-card-photo-radius);
  isolation: isolate;
}

.hub-listing-grid .place-card-img img,
.hub-listing-grid .place-card-img picture,
.hub-listing-grid .place-card-img video,
.hub-listing-grid .place-card-img .card-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
}

.hub-listing-grid .compass-card-img .card-carousel,
.hub-listing-grid .compass-card-img .card-carousel__track,
.hub-listing-grid .compass-card-img .card-carousel__slide,
.hub-listing-grid .compass-card-img .card-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
}

/* Market — inset на wrap (как svc-card-wrapper), белая карточка 100% ячейки */
.hub-listing-grid.mkt-grid > .mkt-card-wrap > .mkt-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: var(--z-card-radius, 28px);
  overflow: hidden;
}

.hub-listing-grid .mkt-card__img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1 !important;
  min-height: 0;
  max-height: none;
  border-radius: var(--z-card-photo-radius);
  isolation: isolate;
}

.hub-listing-grid .mkt-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: inherit;
  -webkit-clip-path: inset(0 round var(--z-card-photo-radius));
  clip-path: inset(0 round var(--z-card-photo-radius));
}

/* Catalog: hub-listing поверх catalog-page-body mobile overrides */
.hub-listing-grid.services-grid .svc-card {
  min-height: 0 !important;
  height: auto !important;
}

.hub-listing-grid.services-grid .svc-card-link {
  flex: 0 0 auto;
}

.catalog-page-body .services-grid.hub-listing-grid .svc-card-img {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: var(--z-card-photo-radius) !important;
  overflow: hidden !important;
  isolation: isolate;
}

.catalog-page-body .services-grid.hub-listing-grid .svc-card-img img,
.catalog-page-body .services-grid.hub-listing-grid .card-carousel,
.catalog-page-body .services-grid.hub-listing-grid .card-carousel__track,
.catalog-page-body .services-grid.hub-listing-grid .card-carousel__slide,
.catalog-page-body .services-grid.hub-listing-grid .card-carousel__slide img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: inherit;
}

.catalog-page-body .services-grid.hub-listing-grid .svc-card-body {
  gap: 4px !important;
  padding: 10px 12px 6px !important;
}

.catalog-page-body .services-grid.hub-listing-grid .svc-card-title {
  margin: 0 !important;
  font-size: 0.94rem !important;
  line-height: 1.18 !important;
  -webkit-line-clamp: 2 !important;
}

.catalog-page-body .services-grid.hub-listing-grid .svc-card-desc {
  margin: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 2 !important;
}

.catalog-page-body .services-grid.hub-listing-grid .svc-card-footer {
  padding: 6px 12px 10px !important;
  min-height: 0 !important;
}

@media (max-width: 1200px) {
  .homepage-featured-grid.services-grid,
  .hub-listing-grid.services-grid,
  .hub-listing-grid.compass-grid,
  .hub-listing-grid.places-grid,
  .hub-listing-grid.mkt-grid {
    gap: 28px;
  }

  .hub-listing-grid.services-grid,
  .hub-listing-grid.compass-grid,
  .hub-listing-grid.places-grid,
  .hub-listing-grid.mkt-grid {
    gap: 16px;
  }
}

@media (max-width: 992px) {
  .homepage-featured-grid.services-grid,
  .hub-listing-grid.services-grid,
  .hub-listing-grid.compass-grid,
  .hub-listing-grid.places-grid,
  .hub-listing-grid.mkt-grid,
  .services-grid:not(.trip-detail-catalog-grid):not(.trip-hub-catalog-grid):not(.transport-stop-cards-grid),
  .cp-listings-grid.services-grid,
  .pp-company-listings-grid.services-grid {
    --z-hub-card-fill: 94%;
  }

  .homepage-featured-grid.services-grid,
  .hub-listing-grid.services-grid,
  .hub-listing-grid.compass-grid,
  .hub-listing-grid.places-grid,
  .hub-listing-grid.mkt-grid {
    gap: 20px;
  }

  .hub-listing-grid.services-grid,
  .hub-listing-grid.compass-grid,
  .hub-listing-grid.places-grid,
  .hub-listing-grid.mkt-grid {
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .homepage-featured-grid .compass-card-wrap,
  .hub-listing-grid .svc-card-wrapper,
  .hub-listing-grid .compass-card-wrap,
  .hub-listing-grid.places-grid > .place-card-wrap,
  .hub-listing-grid.mkt-grid > .mkt-card-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hub-listing-grid .compass-card,
  .hub-listing-grid.places-grid > .place-card-wrap > .place-card,
  .hub-listing-grid.mkt-grid > .mkt-card-wrap > .mkt-card {
    width: 100%;
    max-width: 100%;
  }

  .catalog-page-body .services-grid.hub-listing-grid {
    gap: 12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 576px) {
  .homepage-featured-grid.services-grid,
  .hub-listing-grid.services-grid,
  .hub-listing-grid.compass-grid,
  .hub-listing-grid.places-grid,
  .hub-listing-grid.mkt-grid,
  .services-grid:not(.trip-detail-catalog-grid):not(.trip-hub-catalog-grid):not(.transport-stop-cards-grid),
  .cp-listings-grid.services-grid,
  .pp-company-listings-grid.services-grid {
    --z-hub-card-fill: 100%;
  }

  .homepage-featured-grid.services-grid {
    gap: 12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hub-listing-grid.services-grid,
  .hub-listing-grid.compass-grid,
  .hub-listing-grid.places-grid,
  .hub-listing-grid.mkt-grid {
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .homepage-featured-grid .svc-card-wrapper,
  .homepage-featured-grid .compass-card-wrap,
  .hub-listing-grid .svc-card-wrapper,
  .hub-listing-grid .compass-card-wrap,
  .hub-listing-grid.places-grid > .place-card-wrap,
  .hub-listing-grid.mkt-grid > .mkt-card-wrap,
  .services-grid:not(.trip-detail-catalog-grid):not(.trip-hub-catalog-grid):not(.transport-stop-cards-grid) .svc-card-wrapper,
  .cp-listings-grid .svc-card-wrapper,
  .pp-company-listings-grid .svc-card-wrapper {
    --z-hub-card-inset: 0;
    padding: 0;
  }
}

@media (max-width: 480px) {
  .hub-listing-grid .compass-card-img,
  .hub-listing-grid .place-card-img,
  .hub-listing-grid .mkt-card__img {
    width: 100%;
    min-width: 0;
    border-radius: var(--z-card-photo-radius);
    isolation: isolate;
  }
}