/* ─────────────────────────────────────────────────────────────────────────
   AddisFly — Modern hero layer (2026-06-15)
   Additive override on top of homepage.min.css. Preserves all markup/JS hooks;
   transforms the visual layer toward a calm, premium, Apple-grade hero:
   stronger text contrast, refined type scale, a floating glass search card,
   single-accent CTA discipline, decluttered toggles, and subtle entrance motion.
   Reversible — remove the <link> to revert.
   ───────────────────────────────────────────────────────────────────────── */

/* 1 ── Stronger, cleaner scrim so the headline is always crisp ── */
.af-homepage .af-hero {
  min-height: 620px;
  /* Image lives on ::before (animated); scrim on ::after (below). Background is
     just a dark base so there's never a flash before the image paints. */
  background: #0a0e1a;
}
/* Scrim layer: sits ABOVE the drifting image, BELOW the content — keeps the
   headline readable + the left darker (renders after ::before, so on top).
   Lives on .af-hero-bg so it's clipped with the image, not with the hero. */
.af-homepage .af-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Lighter now that the headline has its own scrim → the plane/sunset shows. */
  background: linear-gradient(100deg,
              rgba(6,10,26,.6) 0%, rgba(8,12,28,.3) 42%, rgba(8,12,28,.06) 100%);
}

/* 1b ── Headline stays crisp via the global scrim + text-shadow (no boxed scrim
   layer — it showed a faint rectangle). ── */
.af-homepage .af-hero-text {
  position: relative;
  z-index: 2;
}

/* 1c ── Subtle "alive" Ken-Burns drift on the hero IMAGE (GPU/compositor only,
   no layout, no TTFB). The image + scrim live on a dedicated .af-hero-bg layer
   with its OWN overflow:hidden, so the zoom never reveals an edge — WITHOUT
   clipping the hero's own children. Critical: the date-picker popup in the
   search card extends BELOW the hero; clipping it on .af-hero (the old bug) hid
   the calendar's day grid behind the section below. The hero stays
   overflow:visible; only the image layer clips. ── */
.af-homepage .af-hero > * { position: relative; z-index: 1; }
.af-homepage .af-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;             /* behind the hero content */
  overflow: hidden;       /* clips the drifting image, NOT the hero content/popups */
  pointer-events: none;
}
.af-homepage .af-hero-bg::before {
  content: "";
  position: absolute;
  inset: -3%;            /* breathing room so the zoom never reveals an edge */
  z-index: 0;
  /* Anchor toward the TOP, not center — the plane sits in the upper part of the
     landscape image, so on a wide desktop hero (where cover crops top+bottom) a
     centered position clipped the plane's nose. Top-anchoring keeps it whole;
     on tall/narrow viewports cover crops the sides instead, so Y is ignored. */
  background: var(--hero-bg, url('/assets/addisfly/images/hero-aircraft-v2.webp')) 50% 12% / cover no-repeat;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .af-homepage .af-hero-bg::before {
    animation: afHeroDrift 28s ease-in-out infinite alternate;
  }
  @keyframes afHeroDrift {
    from { transform: scale(1) translate3d(0,0,0); }
    to   { transform: scale(1.06) translate3d(-1.2%, -1%, 0); }
  }
}

/* 2 ── Hero text: tighter, larger, calmer hierarchy ── */
/* Force consistent LEFT alignment — the base style centers the block, which
   left the eyebrow/subtitle visually indented against the headline. */
.af-homepage .af-hero-text {
  max-width: 780px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.af-homepage .af-hero-text > * { text-align: center; }
.af-homepage .af-hero-proof-row { justify-content: center; }

.af-homepage .af-hero-tagline {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(234,29,36,.92);
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 .85rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.af-homepage .af-hero-text h1 {
  font-size: clamp(2.4rem, 5.2vw, 3.85rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .85rem;
  text-shadow: 0 2px 6px rgba(6,10,26,.45), 0 4px 30px rgba(6,10,26,.55);
}

.af-homepage .af-hero-sub {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  color: rgba(255,255,255,.92);
  /* Balance wrapping so we never get an orphan word ("...Best prices / worldwide"). */
  max-width: 560px;
  text-wrap: balance;
  margin: 0 auto 1.1rem;
}
/* Same balanced wrap on the headline so line breaks stay even. */
.af-homepage .af-hero-text h1 { text-wrap: balance; }

/* 3 ── Social proof: quiet, confident, evenly spaced single line ── */
.af-homepage .af-hero-proof-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  color: rgba(255,255,255,.86);
  font-size: .92rem;
  margin: 0 0 1.6rem;
}
.af-homepage .af-hero-proof {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  padding: 5px 13px;
  line-height: 1.2;
  color: rgba(255,255,255,.95);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.af-homepage .af-hero-proof b { color: #fff; font-weight: 700; }
.af-homepage .af-proof-sep { display: none; }

/* 4 ── The search card = the ONE focal point: floating glass + depth ── */
/* Frosted-glass search card (Apple / Mercury style): semi-transparent so the
   sunset hints through the frame, strong blur, a bright glass edge-highlight,
   and layered depth. The form INPUTS stay solid white, so readability is intact.
   One blur surface only — no scroll/perf cost. */
.af-homepage .af-search-card {
  border-radius: 24px;
  /* Frosted glass floor. Opacity is ADMIN-CONFIGURABLE (Booking Portal Settings →
     Display → "Search Card Opacity" → --card-opacity); fallback .85 if unset. A
     touch more blur + saturate keeps the form perfectly legible even as the floor
     is dialled more see-through, so the plane/sunset hints through without ever
     costing readability. The form INPUTS stay solid white (below) = conversion-safe. */
  background: rgba(255,255,255, var(--card-opacity, .85));
  backdrop-filter: saturate(140%) blur(32px);
  -webkit-backdrop-filter: saturate(140%) blur(32px);
  box-shadow:
    0 30px 70px -20px rgba(8,12,30,.5),
    0 6px 18px rgba(8,12,30,.16),
    inset 0 1px 0 rgba(255,255,255,.9),        /* bright top edge highlight */
    inset 0 0 0 1px rgba(255,255,255,.28);      /* crisp inner glass rim */
  border: 1px solid rgba(255,255,255,.55);       /* brighter glass edge */
  padding: 1.4rem 1.5rem 1.5rem;
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.af-homepage .af-search-card:hover {
  box-shadow:
    0 40px 88px -20px rgba(8,12,30,.58),
    0 8px 22px rgba(8,12,30,.18),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.32);
}

/* Service tabs — light, brand-accented active state (NOT a heavy fill; the bold
   red is reserved for the single Search CTA). Keeps the brand system consistent. */
.af-homepage .af-service-tab {
  border-radius: 10px;
  font-weight: 600;
  color: var(--af-text-light);
  border-bottom: 2px solid transparent;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.af-homepage .af-service-tab.active {
  background: rgba(234,29,36,.07);
  color: var(--af-red);
  box-shadow: none;
  border-bottom-color: var(--af-red);
}
.af-homepage .af-service-tab:hover { color: var(--af-red); }

/* 5 ── Declutter: tuck the advanced toggles back, quieter ── */
.af-homepage .af-filter-checks { opacity: .9; }
.af-homepage .af-check-toggle { font-size: .82rem; color: var(--af-text-light); }

/* 6 ── Single accent CTA — confident gradient + hover lift ── */
.af-homepage .af-search-btn {
  background: linear-gradient(135deg, #ff2a31 0%, #ea1d24 55%, #c8171d 100%);
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 10px 26px -8px rgba(234,29,36,.6);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.af-homepage .af-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -8px rgba(234,29,36,.7);
  filter: brightness(1.04);
}
.af-homepage .af-search-btn:active { transform: translateY(0); }

/* 6b ── 'Smart default' date badge ("Tomorrow") — red reads as an error.
   Recolour to a calm, helpful slate so it feels like a convenience, not a warning. */
.af-homepage .af-date-smart {
  color: #334155;
  background: rgba(15,23,42,.06);
  font-weight: 600;
}

/* 6c ── SEARCH UX → 10/10: premium focus rings, field icons, CTA microinteraction ── */
/* Clear, premium focus affordance on every field */
.af-homepage .af-search-card .af-input,
.af-homepage .af-search-card .af-date-trigger {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.af-homepage .af-search-card .af-input:hover,
.af-homepage .af-search-card .af-date-trigger:hover {
  border-color: #cbd5e1;
}
.af-homepage .af-search-card .af-input:focus,
.af-homepage .af-search-card .af-date-trigger:focus,
.af-homepage .af-search-card .af-field-airport:focus-within .af-input {
  border-color: var(--af-red) !important;
  box-shadow: 0 0 0 3px rgba(234,29,36,.13) !important;
  outline: none;
}

/* Field icons — instantly scannable (plane up = from, plane down = to, calendar) */
.af-homepage #af-from, .af-homepage #af-to,
.af-homepage #af-depart, .af-homepage #af-return {
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 17px;
  padding-left: 38px !important;
}
.af-homepage #af-from {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.4-.1.9.3 1.1l6.4 3.7-3.9 3.9-2.2-.7c-.4-.1-.8 0-1 .3l-.3.3c-.3.3-.3.7-.1 1L5 19l2.4 1.4c.3.2.7.2 1-.1l.3-.3c.3-.3.4-.7.3-1l-.7-2.2 3.9-3.9 3.7 6.4c.2.4.7.5 1.1.3l.5-.3c.4-.2.6-.6.5-1.1z'/%3E%3C/svg%3E");
}
.af-homepage #af-to {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 19h17M21 12.6c.2.8-.3 1.6-1.1 1.9l-15 4-3-5 2-.5 2 1.4 3.6-1L8.4 4.3l1.9-.5 3.4 6.6 4.3-1.2c.8-.2 1.6.3 1.8 1.1z'/%3E%3C/svg%3E");
}
.af-homepage #af-depart, .af-homepage #af-return {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

/* CTA already carries the gradient + hover lift + search icon — keep it clean. */

/* Advanced toggles quieter so the eye goes to From → To → Date → Search */
.af-homepage .af-filter-checks .af-check-toggle { font-size: .8rem; opacity: .85; }

/* 7 ── Hero trust strip — REMOVED. It duplicated the white "IATA Accredited
   Agency / All Payment Methods / 24/7 Support" band directly below it (same three
   signals, two rows back-to-back = filler). The white band does it better (icons +
   descriptions), so we drop the in-hero strip for a cleaner, more premium frame. */
.af-homepage .af-hero-trust-strip { display: none !important; }

/* 8 ── Subtle, premium entrance motion (respects reduced-motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .af-homepage .af-hero-text > * { animation: afHeroIn .7s cubic-bezier(.22,.61,.36,1) both; }
  .af-homepage .af-hero-text > *:nth-child(1) { animation-delay: .02s; }
  .af-homepage .af-hero-text > *:nth-child(2) { animation-delay: .10s; }
  .af-homepage .af-hero-text > *:nth-child(3) { animation-delay: .18s; }
  .af-homepage .af-hero-text > *:nth-child(4) { animation-delay: .26s; }
  .af-homepage .af-search-card { animation: afHeroIn .7s cubic-bezier(.22,.61,.36,1) both; animation-delay: .30s; }
  @keyframes afHeroIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* 8b ── Live 'from' fare on popular-route cards ── */
.af-homepage .af-route-fare {
  display: block;
  font-size: .9rem;
  color: var(--af-text-light);
  margin: 2px 0 8px;
}
.af-homepage .af-route-fare b { color: #111; font-weight: 800; font-size: 1.02rem; }

/* 9 ── Mobile (≤640px): portrait hero image, left-aligned text, one-row pills ── */
@media (max-width: 640px) {
  .af-homepage .af-hero { min-height: 0; padding: 2rem 0 1.5rem; }
  .af-homepage .af-hero-text { text-align: left; }
  .af-homepage .af-hero-text > * { text-align: left; }
  .af-homepage .af-hero-text h1 { font-size: 2.1rem; }
  .af-homepage .af-search-card { border-radius: 18px; padding: 1.1rem; }

  /* PORTRAIT hero image — the landscape plane crops to nothing on a tall phone
     viewport. Swap to a vertical composition (clean sky top for the headline,
     plane lower) so mobile keeps its focal element. */
  .af-homepage .af-hero-bg::before {
    background-image: url('/assets/addisfly/images/hero-aircraft-mobile.webp') !important;
    background-position: center !important;
  }
  /* Vertical scrim on mobile: dark at the top (headline legibility) → clears
     through the middle so the plane shows → slight darken into the card. */
  .af-homepage .af-hero-bg::after {
    background: linear-gradient(to bottom,
      rgba(6,10,26,.74) 0%, rgba(8,12,28,.44) 36%,
      rgba(8,12,28,.12) 60%, rgba(8,12,28,.30) 100%) !important;
  }
  /* Stat pills: ONE compact wrapping row, not three stacked rows (base CSS forces
     a column on mobile — override to row + wrap). */
  .af-homepage .af-hero-proof-row {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    font-size: .8rem;
    gap: .4rem;
    margin-bottom: 1.1rem;
  }
  .af-homepage .af-hero-proof { padding: 4px 10px; font-size: .74rem; }
}

/* 9b ── Small phones (≤380px): keep the headline tight and the trip toggle on one
   line (was wrapping "Round Trip"/"Multi-City" to two lines each). ── */
@media (max-width: 380px) {
  .af-homepage .af-hero-text h1 { font-size: 1.82rem; }
  .af-homepage .af-hero-tagline { font-size: .64rem; letter-spacing: .1em; padding: 5px 11px; }
  .af-homepage .af-trip-btn {
    padding-left: .55rem !important;
    padding-right: .55rem !important;
    font-size: .78rem !important;
    white-space: nowrap;
  }
  .af-homepage .af-hero-proof { font-size: .68rem; padding: 3px 8px; }
}

/* 9c ── Large desktop / TV: the content was a small ~1140px island marooned in a
   sea of empty space on 2K/4K screens. Widen the shared container + scale the hero
   so it fills the frame like a premium brand site at any size. ── */
@media (min-width: 1800px) {
  .af-homepage { --af-container: 1380px; }
  .af-homepage .af-hero { min-height: 720px; }
  .af-homepage .af-hero-text { max-width: 940px; }
  .af-homepage .af-hero-text h1 { font-size: 4.4rem; }
  .af-homepage .af-hero-sub { font-size: 1.34rem; max-width: 660px; }
  .af-homepage .af-hero-proof { font-size: 1rem; padding: 7px 16px; }
}
@media (min-width: 2400px) {
  .af-homepage { --af-container: 1680px; }
  .af-homepage .af-hero { min-height: 900px; }
  .af-homepage .af-hero-text { max-width: 1120px; }
  .af-homepage .af-hero-text h1 { font-size: 5.6rem; }
  .af-homepage .af-hero-sub { font-size: 1.6rem; max-width: 820px; }
  .af-homepage .af-hero-proof { font-size: 1.18rem; padding: 9px 20px; }
  .af-homepage .af-search-card { border-radius: 30px; padding: 2rem 2.2rem 2.2rem; }
}
/* True 4K / large TV — fill the frame, cinematic scale. */
@media (min-width: 3200px) {
  .af-homepage { --af-container: 2100px; }
  .af-homepage .af-hero { min-height: 1180px; }
  .af-homepage .af-hero-text { max-width: 1400px; }
  .af-homepage .af-hero-text h1 { font-size: 7rem; }
  .af-homepage .af-hero-sub { font-size: 2rem; max-width: 1040px; }
  .af-homepage .af-hero-proof { font-size: 1.5rem; padding: 12px 26px; }
}

/* Round-Trip & Multi-City shipped 2026-06-18 (backend leg-combination + N-leg
   render + all-legs booking). The interim hide rule was removed on deploy. */