/* ============================================================
   AIRLINKS — LANDING + DASHBOARD HERO
   Hero gradient, search card, destination grid, service tiles,
   reel teaser strip.
   ============================================================ */

.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding: 64px 24px 96px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.hero-inner { max-width: var(--container); margin: 0 auto; position: relative; }
.hero h1 { color: #fff; font-size: 44px; font-weight: 600; margin: 0 0 12px; }
.hero p { color: rgba(255,255,255,0.85); font-size: 18px; margin: 0 0 32px; max-width: 560px; }

.search-card {
  background: var(--color-bg-card); color: var(--color-text-primary);
  border-radius: var(--radius-xl); padding: 24px;
  box-shadow: var(--shadow-md); margin-top: -56px;
  max-width: var(--container); margin-left: auto; margin-right: auto;
  position: relative; z-index: 1;
}
.search-tabs {
  display: flex; gap: 4px; border-bottom: 0.5px solid var(--color-border);
  margin: -24px -24px 20px; padding: 0 24px;
}
.search-tabs button {
  background: none; border: none; cursor: pointer;
  padding: 14px 18px; font-size: 14px; font-weight: 500;
  color: var(--color-text-secondary); border-bottom: 2px solid transparent;
}
.search-tabs button.active { color: var(--color-text-info); border-bottom-color: var(--color-text-info); }

/* Service tiles — uses per-service color palette from theme.css */
.service-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 32px; }
.service-tile {
  background: var(--color-bg-card); border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 20px 12px; text-align: center;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  color: var(--color-text-primary);
}
.service-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--svc-active, var(--color-primary));
}
.service-tile .ico {
  width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--svc-active-bg, var(--color-bg-info));
  color: var(--svc-active, var(--color-text-info));
  font-size: 22px;
}
.service-tile .title { font-size: 13px; font-weight: 500; }

/* Per-service color overrides — applied via data-service attribute */
.service-tile[data-service="flights"]         { --svc-active: var(--svc-flights);         --svc-active-bg: var(--svc-flights-bg); }
.service-tile[data-service="hotels"]          { --svc-active: var(--svc-hotels);          --svc-active-bg: var(--svc-hotels-bg); }
.service-tile[data-service="airportTransfer"] { --svc-active: var(--svc-airportTransfer); --svc-active-bg: var(--svc-airportTransfer-bg); }
.service-tile[data-service="schoolDrop"]      { --svc-active: var(--svc-schoolDrop);      --svc-active-bg: var(--svc-schoolDrop-bg); }
.service-tile[data-service="intlSupport"]     { --svc-active: var(--svc-intlSupport);     --svc-active-bg: var(--svc-intlSupport-bg); }
.service-tile[data-service="travelInsurance"] { --svc-active: var(--svc-travelInsurance); --svc-active-bg: var(--svc-travelInsurance-bg); }
.service-tile[data-service="discover"]        { --svc-active: var(--svc-discover);        --svc-active-bg: var(--svc-discover-bg); }

/* Destination cards */
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dest-card {
  border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
  aspect-ratio: 4/3; display: flex; align-items: end; padding: 16px;
  color: #fff; font-weight: 600; font-size: 16px; border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.dest-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Reel teaser strip on landing/dashboard */
.reel-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.reel-strip-card {
  position: relative; aspect-ratio: 9/16;
  border-radius: var(--radius-lg); overflow: hidden;
  cursor: pointer; border: none; padding: 0;
  background-size: cover; background-position: center;
}
.reel-strip-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7) 100%);
}
.reel-strip-card .label {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
  color: #fff; font-weight: 600; font-size: 14px;
  z-index: 1; text-align: left;
}
.reel-strip-card .play-icon {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; z-index: 1; backdrop-filter: blur(8px);
}