/* Homepage categories: photo bg + ONE glass data block
   (same recipe as hero cinematic .stat-item: 715 Active Users). */

/* PC: Y = ~24.5% edge (ещё −30% от 35%); mob: Y = 50% edge.
   Главный «воздух» сверху у карт — не section pad, а margin header/grid (~60px). */
.homepage-categories-section.section {
  --hpc-edge: 24px;
  --hpc-edge-y: calc(var(--hpc-edge) * 0.245);
  padding-top: var(--hpc-edge-y) !important;
  padding-bottom: var(--hpc-edge-y) !important;
}

html .homepage-categories-section.section {
  padding-top: var(--hpc-edge-y) !important;
  padding-bottom: var(--hpc-edge-y) !important;
}

/* World: единый вертикальный воздух блока Discover Asia */
html.market-is-world,
html[data-market-asset='world'] {
  --world-cats-title-gap: clamp(2.7rem, 5.6vw, 4.2rem);
  --home-promo-bottom-inset: 25px; /* fallback если секция вне стека */
}

html.market-is-world .homepage-categories-section.section,
html[data-market-asset='world'] .homepage-categories-section.section {
  /* сверху от баннеров = воздух до фото-карт (компенсируем inset стека) */
  padding-top: var(--world-cats-title-gap) !important;
  margin-top: calc(-1 * var(--home-promo-bottom-inset, 25px)) !important;
  padding-bottom: 0 !important;
}

@media (max-width: 767px) {
  html.market-is-world .homepage-categories-section.section,
  html[data-market-asset='world'] .homepage-categories-section.section {
    padding-top: var(--world-cats-title-gap) !important;
    margin-top: calc(-1 * var(--home-promo-bottom-inset, 22px)) !important;
  }
}

/* World: заголовок Discover Asia + воздух до фото-карт */
html.market-is-world .homepage-categories-section .section-header,
html[data-market-asset='world'] .homepage-categories-section .section-header {
  margin-bottom: var(--world-cats-title-gap) !important;
}

html.market-is-world .homepage-categories-section .section-title,
html[data-market-asset='world'] .homepage-categories-section .section-title,
html.market-is-world .homepage-compass-section .section-title,
html[data-market-asset='world'] .homepage-compass-section .section-title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(0.95rem, 2.1vw, 1.7rem) !important; /* как Popular categories на странах */
  font-weight: 800 !important;
  margin-bottom: 1rem !important;
}

html.market-is-world .homepage-categories-section .section-description,
html[data-market-asset='world'] .homepage-categories-section .section-description,
html.market-is-world .homepage-compass-section .section-description,
html[data-market-asset='world'] .homepage-compass-section .section-description {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(0.8rem, 1.35vw, 1.08rem) !important;
  font-weight: 600 !important;
  /* иначе +15px к воздуху до карт и отступ сверху ≠ снизу */
  margin-bottom: 0 !important;
}

/* World: BlaBla — тот же отступ от фото-карт, что у надписей Discover Asia */
html.market-is-world .home-ai-promo-section.section,
html[data-market-asset='world'] .home-ai-promo-section.section {
  padding-top: var(--world-cats-title-gap) !important;
  margin-top: 0 !important;
}

/* PC: убрать огромный gap title→cards (spacing-2xl ≈ 60px) */
@media (min-width: 768px) {
  html .homepage-categories-section .section-header {
    margin-bottom: var(--hpc-edge-y) !important;
  }
  html .homepage-categories-section .category-grid {
    margin-top: 0 !important;
  }
  /* World: после crush — снова единый --world-cats-title-gap */
  html.market-is-world .homepage-categories-section .section-header,
  html[data-market-asset='world'] .homepage-categories-section .section-header {
    margin-bottom: var(--world-cats-title-gap) !important;
  }
}

@media (max-width: 767px) {
  .homepage-categories-section.section {
    --hpc-edge: 14px;
    --hpc-edge-y: calc(var(--hpc-edge) * 0.5);
  }
}

html .homepage-categories-section .category-grid .category-card.category-card--photo {
  /* Transparent — dark #0f172a was leaking 1px at rounded corners on hover */
  background: transparent !important;
  border: none !important;
  outline: none !important;
  isolation: isolate;
  --cat-glass-inset: 0.85rem;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  min-height: unset !important;
  height: auto !important;
  max-width: 90% !important;
  border-radius: var(--z-card-radius, 20px) !important;
  overflow: hidden !important;
  justify-self: center;
  /* Soft gray volume — no hard edge ring */
  box-shadow:
    0 1px 2px rgba(60, 64, 67, 0.06),
    0 4px 14px rgba(60, 64, 67, 0.08) !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

.homepage-categories-section .category-card--photo .category-card__photo {
  position: absolute;
  /* Bleed past edges so subpixel gaps never show under the radius */
  inset: -2px;
  z-index: 0;
  background-image: var(--cat-bg, none),
    linear-gradient(145deg, #1e3a5f 0%, #0d9488 55%, #0f172a 100%);
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition: transform 0.45s ease;
  /* Parent overflow clips — no own radius (avoids corner hairline) */
  border-radius: 0 !important;
  transform: scale(1.01);
  transform-origin: center center;
}

.homepage-categories-section .category-card--photo:hover .category-card__photo {
  transform: scale(1.05);
}

/* No darkening overlay — user visible on photo */
.homepage-categories-section .category-card--photo::after {
  display: none !important;
}

.homepage-categories-section .category-card--photo > *:not(.category-card__photo) {
  position: relative;
  z-index: 2;
}

.homepage-categories-section .category-card--photo .category-icon,
.homepage-categories-section .category-card--photo .category-card__trains-glow,
.homepage-categories-section .category-card--photo .category-card__buses-glow {
  display: none !important;
}

/* Title block — text on photo, NO glass (data glass is only .category-count) */
.homepage-categories-section .category-card--photo .category-card__glass-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 auto;
  width: 100%;
  margin: 0.65rem 0 0;
  padding: 0.65rem 0.25rem;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  overflow: visible;
}

.homepage-categories-section .category-card--photo .category-card__glass-top::before {
  display: none !important;
  content: none !important;
}

/*
  Glyph-only dual halo (no plate / no photo wash):
  dark stroke → readable on light photos;
  soft white rim → readable on dark photos + green hover.
*/
.homepage-categories-section .category-grid .category-card.category-card--photo .category-title {
  margin: 0 0 0.3rem;
  padding: 0 !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0.35px rgba(15, 23, 42, 0.35);
  paint-order: stroke fill;
  text-shadow:
    /* dark ring — light backgrounds */
    -1px -1px 0 rgba(15, 23, 42, 0.72),
     1px -1px 0 rgba(15, 23, 42, 0.72),
    -1px  1px 0 rgba(15, 23, 42, 0.72),
     1px  1px 0 rgba(15, 23, 42, 0.72),
     0   -1px 0 rgba(15, 23, 42, 0.55),
     0    1px 0 rgba(15, 23, 42, 0.55),
    -1px  0   0 rgba(15, 23, 42, 0.55),
     1px  0   0 rgba(15, 23, 42, 0.55),
    /* depth */
     0 2px 4px rgba(15, 23, 42, 0.45),
    /* white outer rim — dark backgrounds */
     0 0 2px rgba(255, 255, 255, 0.55),
     0 0 5px rgba(255, 255, 255, 0.25);
}

.homepage-categories-section .category-grid .category-card.category-card--photo .category-description {
  margin: 0;
  padding: 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
  flex-grow: 0;
  -webkit-text-stroke: 0.3px rgba(15, 23, 42, 0.3);
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 rgba(15, 23, 42, 0.68),
     1px -1px 0 rgba(15, 23, 42, 0.68),
    -1px  1px 0 rgba(15, 23, 42, 0.68),
     1px  1px 0 rgba(15, 23, 42, 0.68),
     0   -1px 0 rgba(15, 23, 42, 0.5),
     0    1px 0 rgba(15, 23, 42, 0.5),
    -1px  0   0 rgba(15, 23, 42, 0.5),
     1px  0   0 rgba(15, 23, 42, 0.5),
     0 2px 3px rgba(15, 23, 42, 0.4),
     0 0 2px rgba(255, 255, 255, 0.45),
     0 0 4px rgba(255, 255, 255, 0.2);
}

/* ONE glass data block = hero .stat-item */
.homepage-categories-section .category-card--photo .category-count {
  position: relative !important;
  overflow: hidden;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  width: auto;
  max-width: 48%;
  height: auto !important;
  min-height: clamp(44px, 6vw, 68px) !important;
  margin: auto auto 0.65rem !important;
  padding: 0.55rem 0.65rem !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  text-align: center;
  background: linear-gradient(
    155deg,
    rgba(122, 182, 217, 0.12) 0%,
    rgba(73, 98, 117, 0.22) 48%,
    rgba(38, 52, 64, 0.3) 100%
  ) !important;
  border-radius: clamp(0.5rem, 1.5vw, 1.4rem) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-top-color: rgba(255, 255, 255, 0.36) !important;
  border-left-color: rgba(255, 255, 255, 0.28) !important;
  border-top-width: 1px !important;
  box-shadow:
    0 8px 28px rgba(15, 23, 42, 0.22),
    0 2px 8px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.homepage-categories-section .category-card--photo .category-count::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.03) 22%,
    transparent 38%
  );
  pointer-events: none;
  z-index: 0;
}

.homepage-categories-section .category-card--photo .category-count span {
  position: relative;
  z-index: 1;
}

.homepage-categories-section .category-card--photo .category-count span:first-child {
  font-size: clamp(0.95rem, 1.6vw, 1.35rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #fff !important;
  -webkit-text-stroke: 0.3px rgba(15, 23, 42, 0.3);
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 rgba(15, 23, 42, 0.65),
     1px -1px 0 rgba(15, 23, 42, 0.65),
    -1px  1px 0 rgba(15, 23, 42, 0.65),
     1px  1px 0 rgba(15, 23, 42, 0.65),
     0 2px 3px rgba(15, 23, 42, 0.4),
     0 0 2px rgba(255, 255, 255, 0.4) !important;
}

.homepage-categories-section .category-card--photo .category-count span:last-child {
  font-size: clamp(0.55rem, 0.85vw, 0.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
  color: #fff !important;
  -webkit-text-stroke: 0.25px rgba(15, 23, 42, 0.28);
  paint-order: stroke fill;
  text-shadow:
    -1px -1px 0 rgba(15, 23, 42, 0.6),
     1px -1px 0 rgba(15, 23, 42, 0.6),
    -1px  1px 0 rgba(15, 23, 42, 0.6),
     1px  1px 0 rgba(15, 23, 42, 0.6),
     0 1px 2px rgba(15, 23, 42, 0.35),
     0 0 2px rgba(255, 255, 255, 0.35) !important;
}

.homepage-categories-section .category-card--photo:hover .category-count {
  /* No background / text color change — photo zoom is enough */
}

/* Keep default white + dual-halo text on hover (no teal recolor) */
.homepage-categories-section .category-grid .category-card.category-card--photo:hover .category-count span:first-child,
.homepage-categories-section .category-grid .category-card.category-card--photo:hover .category-count span:last-child,
.homepage-categories-section .category-grid .category-card.category-card--photo:hover .category-title,
.homepage-categories-section .category-grid .category-card.category-card--photo:hover .category-description {
  color: #fff !important;
}

.homepage-categories-section .category-card--photo:hover {
  border: none !important;
  border-color: transparent !important;
  transform: translateY(-4px);
  box-shadow:
    0 2px 6px rgba(60, 64, 67, 0.08),
    0 10px 28px rgba(60, 64, 67, 0.12) !important;
}

/* Ensure square at all viewports — override competing min-height from grid CSS */
/*
 * Между рядами (снизу у верхних карт) — тот же визуальный зазор, что между
 * левой и правой картой. Карточки max-width < 100% + center → горизонт. щель
 * = column-gap + боковые «поля» ячеек; row-gap считаем так же.
 */
body .homepage-categories-section .category-grid {
  --hpc-cols: 4;
  --hpc-col-gap: 32px;
  --hpc-card-mw: 0.9;
  column-gap: var(--hpc-col-gap) !important;
  row-gap: calc(
    var(--hpc-col-gap) + (1 - var(--hpc-card-mw)) *
      ((100% - (var(--hpc-cols) - 1) * var(--hpc-col-gap)) / var(--hpc-cols))
  ) !important;
}

@media (max-width: 1200px) {
  html .homepage-categories-section .category-grid .category-card.category-card--photo {
    min-height: unset !important;
    max-width: 90% !important;
  }
  body .homepage-categories-section .category-grid {
    --hpc-col-gap: 28px;
    --hpc-card-mw: 0.9;
  }
}
@media (max-width: 992px) {
  body .homepage-categories-section .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    --hpc-cols: 2;
    --hpc-col-gap: 20px;
    --hpc-card-mw: 0.94;
  }
  html .homepage-categories-section .category-grid .category-card.category-card--photo {
    max-width: 94% !important;
  }
}
@media (max-width: 768px) {
  .homepage-categories-section .category-card--photo {
    --cat-glass-inset: 0.55rem;
    padding: 0 !important;
  }

  .homepage-categories-section .category-card--photo .category-card__glass-top {
    margin: 0.4rem 0 0;
    padding: 0.4rem 0.25rem;
  }

  body .homepage-categories-section .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    --hpc-cols: 2;
    --hpc-col-gap: 20px;
    --hpc-card-mw: 0.94;
  }
  html .homepage-categories-section .category-grid .category-card.category-card--photo {
    min-height: unset !important;
    max-width: 94% !important;
  }

  .homepage-categories-section .category-card--photo .category-count {
    width: auto;
    max-width: 55%;
    min-height: clamp(32px, 8vw, 46px) !important;
    padding: 0.35rem 0.45rem !important;
    border-radius: clamp(0.3rem, 1.5vw, 0.6rem) !important;
    margin: auto auto 0.4rem !important;
  }
}
@media (max-width: 576px) {
  html .homepage-categories-section .category-grid .category-card.category-card--photo {
    min-height: unset !important;
    max-width: 100% !important;
  }
  body .homepage-categories-section .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    --hpc-cols: 2;
    --hpc-col-gap: 12px;
    --hpc-card-mw: 1;
  }
}