/* Oytel component: hero.
   No approved DestinationHeroAsset pipeline exists yet (WHYBLE-749), so the
   hero renders a themed gradient fallback. Region hue comes from
   themes/{asia,eu,us,link}.css; do not hardcode region colors here. */

.oytel-hero {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(64px, 12vmin, 80px) var(--oytel-spacing-md) clamp(2rem, 15vmin, 12rem);
  z-index: 0;
  background:
    radial-gradient(circle at 78% 25%, var(--oytel-color-brand-secondary) 0%, transparent 45%),
    linear-gradient(135deg, var(--oytel-color-brand-primary) 0%, color-mix(in srgb, var(--oytel-color-brand-primary) 55%, black) 120%);
  color: var(--oytel-color-text-inverse);
}

/* Left/top scrim guarantees text contrast in the DestinationHeroAsset safe
   zone (desktop_safe_zone: left, mobile_safe_zone: top) regardless of the
   region gradient or, later, the approved photo behind it (WHYBLE-749). */
.oytel-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 31, 38, 0.55) 0%,
    rgba(7, 31, 38, 0.2) 55%,
    transparent 85%
  );
  pointer-events: none;
}

.oytel-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
  box-sizing: border-box;
  animation:
    oytel-hero-reveal
    var(--oytel-motion-duration-medium)
    var(--oytel-motion-easing-standard)
    both;
}

.oytel-hero__content h1 {
  color: var(--oytel-color-text-inverse);
  font-size: clamp(2rem, 5vmin + 1rem, 4rem);
  line-height: 1.1;
  margin: 0;
  max-width: 620px;
}

.oytel-hero__summary {
  color: var(--oytel-color-text-inverse);
  opacity: 0.92;
  font-size: clamp(1.05rem, 2vmin + 0.2rem, 1.25rem);
  line-height: 1.5;
  margin: var(--oytel-spacing-sm) 0 0;
  max-width: 620px;
}

.oytel-hero__actions {
  margin-top: var(--oytel-spacing-lg);
}

.oytel-hero__search {
  margin-top: clamp(var(--oytel-spacing-md), 3vmin, var(--oytel-spacing-lg));
  width: 100%;
}

.oytel-hero__search .oytel-search-dock {
  margin-top: 0;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--oytel-color-text-inverse);
}

.oytel-hero__search .oytel-search-dock label {
  color: rgba(255, 255, 255, 0.92);
}

.oytel-hero__search .oytel-search-dock input {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--oytel-color-text-primary);
}

.oytel-hero__search .oytel-search-dock input:focus {
  border-color: var(--oytel-color-brand-primary);
  background: #ffffff;
}

.oytel-hero__search .oytel-search-dock label,
.oytel-hero__search .oytel-search-dock__details summary,
.oytel-hero__search .oytel-search-dock__microcopy {
  color: rgba(255, 255, 255, 0.92);
}

.oytel-hero__search .oytel-search-dock .oytel-preference span {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--oytel-color-text-inverse);
}

.oytel-hero__search .oytel-search-dock .oytel-preference input:checked + span {
  background: var(--oytel-color-brand-primary);
  border-color: var(--oytel-color-brand-primary);
}

.oytel-hero__quick-routes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oytel-spacing-sm);
  margin-top: clamp(var(--oytel-spacing-sm), 2vmin, var(--oytel-spacing-md));
}

.oytel-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--oytel-color-text-inverse);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.oytel-chip:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--oytel-color-text-inverse);
}

.oytel-hero--pending-image .oytel-hero__fallback {
  position: absolute;
  inset: 0;
}

@keyframes oytel-hero-reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Foreground content surface that slides over the pinned hero */
.oytel-page-content {
  position: relative;
  z-index: 1;
  background: var(--oytel-color-surface-canvas);
  border-radius: 1.5rem 1.5rem 0 0;
  padding-top: 80px;
}

@media (max-width: 640px) {
  .oytel-hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(64px, 12vmin, 80px) var(--oytel-spacing-md) clamp(2rem, 15vmin, 8rem);
    text-align: left;
  }

  .oytel-hero::before {
    background: linear-gradient(
      180deg,
      rgba(7, 31, 38, 0.55) 0%,
      rgba(7, 31, 38, 0.2) 55%,
      transparent 85%
    );
  }

  .oytel-hero__content {
    max-width: 100%;
  }

  .oytel-hero__content h1 {
    font-size: 2rem;
  }
}