/* ============================================================
   TravelServices page — styles
   Loaded AFTER responsive.css so these rules win by source order.
   Scoped to .services-full so no other page/component is affected.
   ============================================================ */

/* ---- Services section heading -------------------------------------------
   Eyebrow, title and description in one left-aligned column (max 640px)
   with a hairline rule beneath. */
.services-full .ts-services-header {
  margin-bottom: 52px;
  padding-bottom: 26px;
  border-bottom: 1px solid oklch(87% 0.022 62deg); /* sand-300 hairline */
}

.services-full .ts-services-intro {
  max-width: 640px;
  text-align: left;
}

.services-full .ts-services-intro .desc {
  max-width: 58ch;
}

/* ---- Service card grid ---------------------------------------------------
   A fixed three-column grid. The base .tourism-teaser-grid
   rule is auto-fit/minmax(260px) which renders four-up at 1280px and makes
   the cards too small; pin it to three columns to match the card
   size/proportion in the design. */
.services-full .tourism-teaser-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 2.4vw, 34px);
}

@media only screen and (max-width: 1024px) {
  .services-full .tourism-teaser-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 640px) {
  .services-full .tourism-teaser-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Lottie hover-play icons --------------------------------------------
   The static disc SVGs were swapped for the <lottie-icon> component, which
   plays once on hover of the card. Size the element to the 22px icon box the
   disc expects; the component's rendered <svg> fills that box. */
.services-full .tourism-card.photo-card .tourism-card-icon lottie-icon {
  display: block;
  width: 28px;
  height: 28px;
}
.services-full .tourism-card.photo-card .tourism-card-icon lottie-icon svg {
  width: 100%;
  height: 100%;
}

/* The air ticket glyph is wide and fills its disc edge to edge; bring it
   down to the same visual weight as the bus / car hire icon beside it. */
.services-full .tourism-card.photo-card .tourism-card-icon lottie-icon[src*="air-ticket"] {
  transform: scale(0.8);
}