/* Full-bleed visual cards for the 10 core travel services. */
.subcategories .subcategory-card {
  position: relative;
  display: flex;
  min-height: 210px;
  flex-direction: column;
  border: 1px solid #28566b;
  border-radius: 11px;
  padding: 15px;
  background-color: #031019;
  background-position: center;
  background-size: cover;
  color: #fff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 28px rgba(0, 8, 14, .28);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.subcategories .subcategory-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(1, 10, 17, .24) 0%, rgba(1, 9, 15, .46) 38%, rgba(1, 7, 12, .96) 100%),
    linear-gradient(90deg, rgba(1, 8, 14, .68), transparent 72%);
}

.subcategories .subcategory-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, rgba(39, 180, 232, .14), transparent 48%, rgba(255, 145, 54, .08));
  opacity: .7;
  transition: opacity .2s;
}

.subcategories .subcategory-card[data-subcategory="hotels"] { background-image: url('assets/travel-categories/hotels.webp'); }
.subcategories .subcategory-card[data-subcategory="flights"] { background-image: url('assets/travel-categories/flights.webp'); }
.subcategories .subcategory-card[data-subcategory="activities"] { background-image: url('assets/travel-categories/activities.webp'); }
.subcategories .subcategory-card[data-subcategory="travel-insurance"] { background-image: url('assets/travel-categories/travel-insurance.webp'); }
.subcategories .subcategory-card[data-subcategory="esim"] { background-image: url('assets/travel-categories/esim.webp'); }
.subcategories .subcategory-card[data-subcategory="airport-transfer"] { background-image: url('assets/travel-categories/airport-transfer.webp'); }
.subcategories .subcategory-card[data-subcategory="ground-transport"] { background-image: url('assets/travel-categories/ground-transport.webp'); }
.subcategories .subcategory-card[data-subcategory="car-rental"] { background-image: url('assets/travel-categories/car-rental.webp'); }
.subcategories .subcategory-card[data-subcategory="tours"] { background-image: url('assets/travel-categories/tours.webp'); }
.subcategories .subcategory-card[data-subcategory="travel-pass"] { background-image: url('assets/travel-categories/travel-pass.webp'); }

.subcategories .subcategory-card:hover,
.subcategories .subcategory-card:focus-visible {
  transform: translateY(-3px);
  border-color: #71d8fb;
  box-shadow: 0 14px 30px rgba(0, 8, 14, .52);
}

.subcategories .subcategory-card:hover::after,
.subcategories .subcategory-card:focus-visible::after { opacity: 1; }

.subcategories .subcategory-card .icon {
  background: rgba(3, 19, 29, .76);
  border-color: rgba(113, 216, 251, .62);
  color: #a6e8ff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .24);
  backdrop-filter: blur(5px);
}

.subcategories .subcategory-card b {
  margin-top: auto;
  padding-top: 38px;
  font-size: .86rem;
  text-shadow: 0 2px 8px #000;
}

.subcategories .subcategory-card small {
  color: #8edcf6;
  text-shadow: 0 2px 7px #000;
}

.subcategories .subcategory-card p {
  color: #d3e1e7;
  text-shadow: 0 2px 7px #000;
}

@media (max-width: 900px) {
  .subcategories .subcategory-card { min-height: 190px; }
}

@media (max-width: 600px) {
  .subcategories .subcategory-card { min-height: 178px; padding: 13px; }
  .subcategories .subcategory-card b { padding-top: 28px; }
}

@media (max-width: 400px) {
  .subcategories .subcategory-card { min-height: 190px; }
}