/* =============================================================================
   Polished category tiles
   -----------------------------------------------------------------------------
   Restyles the photo-tile tab menus used on explorekl.php, beyondkl.php,
   accommodation.php and medical-tourism.php (the `.features .nav-tabs`
   pattern). Loaded AFTER main.css so these rules win without touching the
   minified blob.

   Goals: keep the photos, but make labels always crisp (gradient scrim),
   uniform, with an icon accent, a subtle hover lift and a clean active state.

   Scoped to `.nav-link[data-bs-toggle="tab"]` so the label-less promo/external
   tiles (ids beyond the category set) keep their original look.
   ============================================================================ */

.features .nav-tabs .nav-link[data-bs-toggle="tab"] {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background-color: var(--color-secondary);
  box-shadow: 0 6px 18px rgba(var(--color-secondary-rgb), .12);
  transition: transform .35s ease, box-shadow .35s ease;
}

/* Image fills the whole tile regardless of its natural size */
.features .nav-tabs .nav-link[data-bs-toggle="tab"] img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .5s ease;
}

/* Dark gradient scrim along the bottom so the label is always legible */
.features .nav-tabs .nav-link[data-bs-toggle="tab"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top,
      rgba(0, 0, 0, .78) 0%,
      rgba(0, 0, 0, .38) 38%,
      rgba(0, 0, 0, 0) 68%);
  transition: background .35s ease;
  pointer-events: none;
}

/* Label anchored to the bottom, icon + text on one crisp line */
.features .nav-tabs .nav-link[data-bs-toggle="tab"] h4 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  margin: 0;
  padding: .8rem .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

.features .nav-tabs .nav-link[data-bs-toggle="tab"] h4 .tile-icon {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
}

/* Hover: lift the card and gently zoom the photo */
.features .nav-tabs .nav-link[data-bs-toggle="tab"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(var(--color-secondary-rgb), .25);
}

.features .nav-tabs .nav-link[data-bs-toggle="tab"]:hover img {
  transform: scale(1.07);
}

/* Active tab: keep the photo visible, tint it with the brand colour */
.features .nav-tabs .nav-link[data-bs-toggle="tab"].active img {
  display: block;
}

.features .nav-tabs .nav-link[data-bs-toggle="tab"].active::after {
  background: linear-gradient(to top,
      rgba(var(--color-primary-rgb), .92) 0%,
      rgba(var(--color-primary-rgb), .55) 55%,
      rgba(var(--color-primary-rgb), .22) 100%);
}

.features .nav-tabs .nav-link[data-bs-toggle="tab"].active {
  box-shadow: 0 10px 26px rgba(var(--color-primary-rgb), .35);
}

/* -----------------------------------------------------------------------------
   Section background for the tile menus
   -----------------------------------------------------------------------------
   Light (supervisor-friendly) but not bland: a near-white cool base with three
   large, soft brand-teal "glows" drifting in from the corners. Tied to the
   theme variables so the tint follows the brand. Scoped via the `tiles-section`
   marker class so it only lands on the four tile pages (explorekl / beyondkl /
   accommodation / medical-tourism) and NOT on other `.features` sections
   (spa, where-to-shop).

   To tune: raise/lower the alpha values (.10 / .09 / .06) for more/less colour,
   or change --tiles-bg-base for a different base tone.
   ============================================================================ */

.features.tiles-section {
  --tiles-bg-base: #f5f8fa;
  background-color: var(--tiles-bg-base);
  background-image:
    radial-gradient(38rem 38rem at 8% 8%, rgba(var(--color-primary-rgb), .10), transparent 60%),
    radial-gradient(34rem 34rem at 96% 6%, rgba(var(--color-primary-light-rgb), .09), transparent 60%),
    radial-gradient(44rem 44rem at 62% 102%, rgba(var(--color-primary-rgb), .06), transparent 60%);
  background-repeat: no-repeat;
}

/* Smaller screens: trim the label so it stays on one line */
@media (max-width: 575.98px) {
  .features .nav-tabs .nav-link[data-bs-toggle="tab"] h4 {
    font-size: .9rem;
    padding: .6rem .4rem;
    gap: .3rem;
  }
  .features .nav-tabs .nav-link[data-bs-toggle="tab"] h4 .tile-icon {
    font-size: 1rem;
  }
}