/**
 * SkyStayTravel — unified hub & commercial card polish
 * Load after page inline styles (link before </head>) or via sst-commercial.css
 */
:root {
  --sst-card-radius: 16px;
  --sst-card-radius-lg: 20px;
  --sst-card-border: 1px solid #e2e8f0;
  --sst-card-border-hover: #bfdbfe;
  --sst-card-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
  --sst-card-shadow-hover: 0 14px 32px rgba(7, 112, 227, 0.12);
  --sst-card-lift: -2px;
  --sst-card-gap: 14px;
  --sst-card-img-h: 156px;
  --sst-card-ease: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* —— Shared text / link cards —— */
.route-link,
.hub-card,
.sst-route-plan-card,
.sst-route-related-grid a,
.planning-card,
.planning article,
.ed-card,
.tool-card,
.sst-flight-hub-links a {
  border-radius: var(--sst-card-radius) !important;
  border: var(--sst-card-border) !important;
  box-shadow: var(--sst-card-shadow) !important;
  transition:
    transform var(--sst-card-ease),
    box-shadow var(--sst-card-ease),
    border-color var(--sst-card-ease),
    background var(--sst-card-ease) !important;
  text-decoration: none !important;
}

.route-link,
.sst-route-plan-card,
.hub-card,
.planning-card,
.planning article {
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%) !important;
}

.route-link:hover,
.hub-card:hover,
.sst-route-plan-card:hover,
.sst-route-related-grid a:hover,
.planning-card:hover,
.planning article:hover,
.ed-card:hover,
.tool-card:hover,
.sst-flight-hub-links a:hover {
  transform: translateY(var(--sst-card-lift)) !important;
  border-color: var(--sst-card-border-hover) !important;
  box-shadow: var(--sst-card-shadow-hover) !important;
}

.route-link strong,
.hub-card strong,
.sst-route-plan-card strong,
.sst-route-related-grid a strong {
  color: #0f172a !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
}

.route-link span,
.hub-card span,
.sst-route-plan-card span,
.sst-route-related-grid a span {
  color: #64748b !important;
  line-height: 1.55 !important;
}

.route-grid,
.planning-grid,
.other-grid,
.hub-grid,
.sst-hub-grid--commercial,
.sst-route-plan-grid,
.sst-route-related-grid,
.city-grid,
.sst-commercial-route-grid,
.sst-pop-routes-grid,
.sst-act-featured-grid,
.tool-grid,
.sst-dest-grid {
  gap: var(--sst-card-gap) !important;
}

/* —— Image destination cards —— */
.city-card,
.area-card,
.sst-pop-route-card,
.sst-commercial-route-card {
  border-radius: var(--sst-card-radius-lg) !important;
  border: var(--sst-card-border-soft, 1px solid #dfe9f5) !important;
  box-shadow: var(--sst-card-shadow) !important;
  overflow: hidden;
  transition:
    transform var(--sst-card-ease),
    box-shadow var(--sst-card-ease),
    border-color var(--sst-card-ease) !important;
}

.city-card:hover,
.area-card:hover,
.sst-pop-route-card:hover,
.sst-commercial-route-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--sst-card-border-hover) !important;
  box-shadow: var(--sst-card-shadow-hover) !important;
}

.city-card img,
.area-card img {
  height: var(--sst-card-img-h) !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  width: 100% !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.city-card:hover img,
.area-card:hover img,
.sst-pop-route-card:hover .sst-pop-route-img {
  transform: scale(1.04) !important;
}

.city-card-body,
.area-card-body {
  padding: 16px 17px 17px !important;
}

.city-card strong,
.area-card strong {
  display: block !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
  margin-bottom: 5px !important;
  letter-spacing: -0.01em !important;
}

.city-card span,
.area-card span {
  display: block !important;
  color: #64748b !important;
  font-size: 0.84rem !important;
  line-height: 1.55 !important;
}

/* Stays hub overlay cards — shadow/hover only (layout stays in sky22.html) */
body.sst-page-sky22 .sst-dest-card {
  border-radius: var(--sst-card-radius-lg) !important;
  box-shadow: var(--sst-card-shadow) !important;
}

body.sst-page-sky22 .sst-dest-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sst-card-shadow-hover) !important;
}

/* —— Flights hub: pop route + featured route —— */
body.sst-page-flights #home-flights-destinations .sst-pop-route-card {
  border-radius: 18px !important;
  min-height: 200px !important;
}

body.sst-page-flights #home-flights-destinations .sst-pop-route-overlay {
  background: linear-gradient(
    180deg,
    rgba(5, 25, 60, 0.05) 0%,
    rgba(5, 25, 60, 0.72) 68%,
    rgba(5, 25, 60, 0.88) 100%
  ) !important;
}

body.sst-page-flights #home-flights-destinations .sst-pop-route-body {
  padding: 14px 16px 16px !important;
}

body.sst-page-flights #home-flights-destinations .sst-pop-route-title {
  font-weight: 950 !important;
  letter-spacing: -0.02em !important;
}

body.sst-page-flights .sst-commercial-route-card {
  position: relative !important;
  display: block !important;
  min-height: 220px !important;
  border-radius: var(--sst-card-radius-lg) !important;
  overflow: hidden !important;
  background: #0f172a !important;
  color: #fff !important;
  text-decoration: none !important;
}

body.sst-page-flights .sst-commercial-route-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to top,
    rgba(2, 6, 23, 0.78) 0%,
    rgba(2, 6, 23, 0.2) 48%,
    rgba(2, 6, 23, 0.05) 100%
  ) !important;
}

body.sst-page-flights .sst-commercial-route-card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.sst-page-flights .sst-commercial-route-card:hover img {
  transform: scale(1.06) !important;
}

body.sst-page-flights .sst-commercial-route-card span {
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 2 !important;
  display: block !important;
  padding: 0 !important;
}

body.sst-page-flights .sst-commercial-route-card strong {
  display: block !important;
  color: #ffd166 !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 4px !important;
  line-height: 1.25 !important;
}

body.sst-page-flights .sst-commercial-route-card small {
  display: block !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

body.sst-page-flights .sst-commercial-route-card--priced span {
  bottom: 12px !important;
}

body.sst-page-flights .sst-commercial-route-card .sst-home-priced-route__guide,
body.sst-page-flights .sst-commercial-route-card .sst-home-priced-route__title {
  color: inherit;
  text-decoration: none;
}

body.sst-page-flights .sst-commercial-route-card .sst-home-route-live-price {
  display: block !important;
  margin: 0 0 4px !important;
  font-style: normal !important;
  font-size: 0.9rem !important;
  font-weight: 900 !important;
  color: #7dd3fc !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
}

body.sst-page-flights .sst-commercial-route-card .sst-home-route-origin {
  display: block !important;
  margin: 0 0 5px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}

body.sst-page-flights .sst-commercial-route-card .sst-home-route-origin-code {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2.4em !important;
  margin-right: 5px !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

body.sst-page-flights .sst-commercial-route-card .sst-home-route-live-price:not([data-sst-price-loaded="1"]) {
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
}

body.sst-page-flights .sst-fl-route-prices-note {
  margin: 8px 2px 0;
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.45;
  font-weight: 600;
  max-width: 72ch;
  grid-column: 1 / -1;
}

body.sst-page-flights .hub-grid .hub-card,
body.sst-page-flights a.hub-card {
  border-radius: var(--sst-card-radius) !important;
  padding: 18px 20px !important;
  text-align: left !important;
}

/* —— Editorial article cards —— */
.sst-article-card--editorial {
  border-radius: var(--sst-card-radius) !important;
  box-shadow: var(--sst-card-shadow) !important;
}

.sst-article-card--editorial:hover {
  transform: translateY(var(--sst-card-lift)) !important;
  box-shadow: var(--sst-card-shadow-hover) !important;
  border-color: var(--sst-card-border-hover) !important;
}

.sst-article-card--editorial img {
  width: 100% !important;
  height: 120px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  max-width: none !important;
}

body.sst-page-articles-hub .sst-article-card--editorial img {
  height: 150px !important;
}

.sst-article-card--editorial .sst-article-card-body {
  padding: 14px 16px 16px !important;
}

/* —— Tours featured + travel services tools —— */
.sst-act-featured-card {
  border-radius: var(--sst-card-radius) !important;
  box-shadow: var(--sst-card-shadow) !important;
  padding: 18px !important;
}

.sst-act-featured-card:hover {
  transform: translateY(var(--sst-card-lift)) !important;
  box-shadow: var(--sst-card-shadow-hover) !important;
  border-color: var(--sst-card-border-hover) !important;
}

.tool-card.lead {
  border-color: #bfdbfe !important;
  background: linear-gradient(180deg, #fff 0%, #f0f7ff 100%) !important;
}

.tool-card .cta {
  color: #0770e3 !important;
  font-weight: 850 !important;
}

/* —— Region panels on route/stays hubs —— */
.region-block {
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.055) !important;
}

.editorial-band,
.related {
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.06) !important;
}

.related-grid a {
  border-radius: var(--sst-card-radius) !important;
  transition:
    transform var(--sst-card-ease),
    background var(--sst-card-ease),
    border-color var(--sst-card-ease) !important;
}

.related-grid a:hover {
  transform: translateY(var(--sst-card-lift)) !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

/* —— Mobile —— */
@media (max-width: 680px) {
  :root {
    --sst-card-img-h: 168px;
    --sst-card-gap: 12px;
  }

  .sst-article-card--editorial img {
    height: 76px !important;
  }

  body.sst-page-articles-hub .sst-article-card--editorial img {
    height: 145px !important;
  }

  body.sst-page-flights #home-flights-destinations .sst-pop-route-card {
    min-height: 188px !important;
    border-radius: var(--sst-card-radius) !important;
  }

  .route-link,
  .hub-card,
  .sst-route-plan-card {
    padding: 15px 16px !important;
  }
}

@media (max-width: 390px) {
  .sst-article-card--editorial img {
    height: 70px !important;
  }

  body.sst-page-articles-hub .sst-article-card--editorial img {
    height: 132px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-card,
  .area-card,
  .route-link,
  .hub-card,
  .sst-route-plan-card,
  .sst-pop-route-card,
  .sst-commercial-route-card,
  .sst-article-card--editorial,
  .tool-card,
  .sst-act-featured-card {
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  }

  .city-card:hover,
  .area-card:hover,
  .route-link:hover,
  .hub-card:hover,
  .sst-pop-route-card:hover,
  .sst-commercial-route-card:hover {
    transform: none !important;
  }

  .city-card:hover img,
  .area-card:hover img,
  .sst-pop-route-card:hover .sst-pop-route-img {
    transform: none !important;
  }
}