/**
 * CFS Homepage - Custom CSS overrides
 * Minimal overrides on top of Tailwind utility classes.
 * Add component-specific styles here only when Tailwind utilities are insufficient.
 */

/* Centres section — card image shadow */
.centre-card__image {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Centres section — backdrop blur on card images */
.centre-card__image {
  backdrop-filter: blur(2px);
}

/* Specialities — inactive triggers 75px, active 92px (desktop only) */
@media (min-width: 1024px) {
  .spec-trigger {
    width: 75px;
  }
  .spec-trigger[aria-expanded="true"] {
    width: 92px;
  }
}


/* Doctor cards: hover effects */
.doctor-card {
  transition: box-shadow 0.3s, border-color 0.3s;
  border: 2px solid transparent;
}
.doctor-card:hover {
  border-color: #2b286f;
  box-shadow: 0 4px 16px rgba(43, 40, 111, 0.12);
}
.doctor-card:hover .doctor-card__book {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.doctor-card:hover .doctor-card__image img {
  transform: scale(1.05);
}
.doctor-card .doctor-card__image img {
  transition: transform 0.3s;
}

/* Why Us: background highlight grid */
.whyus-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.whyus-tile {
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(circle at center, rgba(43, 40, 111, 0.08) 0%, transparent 70%);
}
.whyus-tile.active {
  opacity: 1;
}

/* Phone bar: text and icon turn navy on hover (yellow bg) */
.phone-bar__item:hover span {
  color: #2b286f;
  transition: color 0.3s;
}
.phone-bar__item:hover svg path {
  fill: #2b286f;
  transition: fill 0.3s;
}