/* ============================================================
   LIVING ATLAS — content-area design layer (approved v2)
   Fonts: Poppins only. Colors: design-tokens values only
   (scene gradients interpolate #1E284A/#2E74B8/#F1C9AE).
   Every class is atl- prefixed; legacy-class restyles are
   scoped under .atl-page. Loaded ONLY by atlas templates.
   ============================================================ */

.atl-page {
  --atl-ink: var(--ag-color-text-heading, #1e284a);
  --atl-body: var(--ag-color-text-body, #2a2a55);
  --atl-muted: var(--ag-color-text-muted, #6b7491);
  --atl-blue: var(--ag-color-brand-primary, #2e74b8);
  --atl-sand: var(--ag-color-brand-accent, #f1c9ae);
  --atl-good: var(--ag-color-success, #059669);
  --atl-warn: var(--ag-color-warning, #ea580c);
  --atl-glass: rgba(255, 255, 255, .86);
  --atl-glass-border: var(--ag-color-brand-primary-softer, rgba(46, 116, 184, .12));
  --atl-shadow-soft: var(--ag-shadow-md, 0 10px 22px rgba(24, 33, 51, .08));
  --atl-shadow-lift: var(--ag-shadow-lg, 0 18px 36px rgba(18, 32, 38, .12));
  --atl-r: var(--ag-radius-3xl, 16px);
  /* Owner-chosen price colour (E2). There is no design-token equivalent --
     the nearest, --ag-color-brand-primary-active #1d4ed8, is a different and
     more violet blue -- so this is a deliberate raw hex in a file that
     otherwise takes its colours from tokens. 10.7:1 on the card. */
  --atl-price-ink: #0b3a7c;
  --atl-price-cur: #3d6bad;
  --atl-dusk: linear-gradient(158deg, #1e284a 0%, #2e74b8 55%, #f1c9ae 100%);
  position: relative;
}

/* aurora wash behind the content column */
.atl-page::before {
  content: ""; position: absolute; inset: -26px -40px auto; height: 520px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(560px 300px at 12% 0%, rgba(46, 116, 184, .10), transparent 68%),
    radial-gradient(520px 280px at 88% 4%, rgba(241, 201, 174, .18), transparent 70%);
}
.atl-page > * { position: relative; z-index: 1; }

/* ---------- data voice (Poppins, tracked caps) ---------- */
.atl-mono {
  font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--atl-muted);
}

/* ---------- horizon header ---------- */
.atl-horizon {
  border-radius: 20px; overflow: hidden; position: relative; isolation: isolate;
  color: #fdf6ee; padding: 26px 28px 24px;
  background: var(--atl-dusk);
  box-shadow: 0 18px 44px rgba(30, 40, 74, .28);
}
.atl-horizon::before { /* star field */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 24%, rgba(255,255,255,.9), transparent 55%),
    radial-gradient(1px 1px at 32% 12%, rgba(255,255,255,.7), transparent 55%),
    radial-gradient(1.5px 1.5px at 57% 20%, rgba(255,255,255,.8), transparent 55%),
    radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.7), transparent 55%);
}
.atl-horizon::after { /* terrain silhouette */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52px; z-index: -1;
  background: rgba(20, 27, 51, .55);
  clip-path: polygon(0 78%, 7% 58%, 13% 74%, 22% 40%, 30% 70%, 39% 52%, 47% 78%, 58% 34%, 66% 66%, 74% 48%, 83% 72%, 91% 55%, 100% 70%, 100% 100%, 0 100%);
}
.atl-horizon-kicker {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-weight: 600; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--atl-sand);
}
.atl-horizon-kicker::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }
.atl-horizon h1 { font-weight: 800; font-size: 31px; letter-spacing: -.01em; line-height: 1.08; color: #fff; margin: 0; }
.atl-horizon-sub { font-size: 13.5px; color: rgba(253, 246, 238, .85); margin-top: 7px; max-width: 560px; }
.atl-horizon-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.atl-coord-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(12, 18, 38, .38); color: #f4e9dd;
  border: 1px solid rgba(241, 201, 174, .35);
  backdrop-filter: blur(6px);
}
.atl-coord-chip .atl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--atl-sand); box-shadow: 0 0 8px var(--atl-sand); }

/* ---------- glass surface ---------- */
.atl-glass {
  background: var(--atl-glass);
  backdrop-filter: saturate(1.15) blur(14px);
  -webkit-backdrop-filter: saturate(1.15) blur(14px);
  border: 1px solid var(--atl-glass-border);
  border-radius: var(--atl-r);
  box-shadow: var(--atl-shadow-soft);
}

/* ---------- legacy components restyled inside the atlas page ---------- */
.atl-page .results-summary,
.atl-page .filters-panel > form,
.atl-page .filters-panel .card,
.atl-page .filters-panel fieldset {
  background: var(--atl-glass);
  border: 1px solid var(--atl-glass-border);
  border-radius: var(--atl-r);
  box-shadow: var(--atl-shadow-soft);
}
.atl-page .results-summary { padding: 12px 16px; }
.atl-page .results-chip {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px;
  background: #fff; border: 1px solid #dbe3f0; font-size: 12px; font-weight: 600; color: var(--atl-body);
}
.atl-page .results-toggle {
  border-radius: 999px; padding: 4px 14px; font-weight: 600; text-decoration: none;
}
.atl-page .results-toggle.is-active {
  background: linear-gradient(135deg, #22406d, var(--atl-blue)); color: #fff;
  box-shadow: 0 5px 14px rgba(46, 116, 184, .35);
}

/* ---------- panorama result card ---------- */
/* Stack panoramas full-width: the reused legacy .grid-cards container is a
   2–3 col grid (static/styles.css) which would crush the wide panorama body.
   The skeleton selector is deliberately gated on .is-loading — an unscoped
   .atl-page .grid-cards--skeleton (0,2,0) out-cascades the resting-state hide
   rule (.results-list .grid-cards--skeleton{display:none}, styles.css:2367)
   and pins a ghost skeleton above the real results forever. */
.atl-page .grid-cards--real,
.atl-page .results-list.is-loading .grid-cards--skeleton {
  display: flex; flex-direction: column; gap: 14px;
}
/* E2 (screenshot 18) — "cards styles on services search results pages to be
   reconsidered as this one is not a neat nor practical one". The approved
   direction is Option E: the image column is PROPORTIONAL rather than a fixed
   252px, so a narrow results column takes width from the photo instead of
   strangling the text; the photo becomes an inset plate with a hairline
   instead of bleeding to the card edge; and the card furniture that used to
   compete with the heading -- the rating, the "New" badge, the globe link --
   moves onto that plate. What is left in the body is heading, location,
   description, facts, price: nothing fighting for the same inches.
   Mockup + rationale: docs/mockups/service-cards/index.html #blend-ac */
.atl-panorama {
  display: grid; grid-template-columns: minmax(150px, 32%) 1fr; overflow: hidden;
  padding: 10px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.atl-panorama:hover { transform: translateY(-3px); box-shadow: var(--atl-shadow-lift); }
.atl-panorama .atl-media {
  position: relative; min-height: 172px;
  border-radius: 12px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.atl-panorama .atl-media img,
.atl-panorama .atl-media .atl-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.atl-card-body { padding: 4px 6px 2px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* E2 (screenshot 18): this row is a flex pair — title block on the left,
   rating/badge on the right — and neither side could shrink. A flex item's
   min-width defaults to auto, so a long title pushed the row wider than the
   card and the badge on the right ran off the edge. Both sides now shrink,
   and the title clamps rather than growing to three lines and squeezing
   everything under it. */
.atl-card-title-row { display: flex; flex-direction: column; gap: 3px; }
.atl-card-title-row > * { min-width: 0; }
.atl-card-title {
  font-weight: 700; font-size: 16px; color: var(--atl-ink); letter-spacing: -.01em;
  line-height: 1.25; margin: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.atl-card-loc { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--atl-muted); }
/* The location flies to the globe, so it has to look like a control at rest
   -- a pin glyph and grey text read as metadata. The underline is the
   affordance; the colour shift is only the response. It stays off the
   price's navy so the two do not compete for the same job. */
.atl-card-loc--live {
  inline-size: fit-content; max-inline-size: 100%;
  color: var(--atl-body); text-decoration: none;
  transition: color .14s ease;
}
/* The underline goes on the NAME rather than on the <a>. The anchor inherits
   display:flex from .atl-card-loc, and a flex container does not paint its
   text decoration onto blockified flex items -- so an underline declared up
   there is a rule that computes correctly and draws nothing. On the inline
   span it always paints, and it correctly skips the pin glyph, which looked
   wrong underlined anyway. */
.atl-card-loc--live .atl-loc-name {
  text-decoration: underline;
  /* .28 computed and painted correctly but was invisible at 12px on a light
     card, which makes it a decoration rather than an affordance. .48 reads as
     a link at real size and is still quieter than the price. */
  text-decoration-color: rgba(42, 42, 85, .48);
  text-underline-offset: 3px; text-decoration-thickness: from-font;
  transition: text-decoration-color .14s ease;
}
.atl-card-loc--live:hover { color: var(--atl-blue); }
.atl-card-loc--live:hover .atl-loc-name { text-decoration-color: currentColor; }
.atl-card-loc--live:focus-visible {
  outline: 2px solid var(--atl-blue); outline-offset: 3px; border-radius: 5px;
}
.atl-card-loc--live:focus-visible .atl-loc-name { text-decoration-color: currentColor; }
/* Hovering either control highlights both, so the card teaches that the pin
   and the button are the same action. Progressive: engines without :has()
   simply do not get the hint. */
.atl-panorama:has(.atl-card-loc--live:hover) .atl-globe-btn { transform: scale(1.08); }
.atl-panorama:has(.atl-globe-btn:hover) .atl-card-loc--live { color: var(--atl-blue); }
.atl-panorama:has(.atl-globe-btn:hover) .atl-card-loc--live .atl-loc-name {
  text-decoration-color: currentColor;
}

/* The description is prose, not a chip truncated at 60 characters mid-word. */
.atl-card-desc {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--atl-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
/* Facts read as one quiet line, not as a row of chips. Chips gave every
   fact the same visual weight as the heading's neighbours and made a card
   with three of them look like a toolbar. */
.atl-micro-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 0;
  font-size: 11.5px; font-weight: 600; color: var(--atl-muted);
}
.atl-micro {
  display: inline-flex; align-items: center; gap: 10px;
  height: auto; padding: 0; border-radius: 0; background: none;
  color: inherit; font-size: inherit; font-weight: inherit;
}
/* Separator belongs BETWEEN facts, so it hangs off every item but the first
   rather than being markup the templates have to interleave. */
.atl-micro + .atl-micro::before {
  content: ""; flex: none;
  inline-size: 3px; block-size: 3px; border-radius: 50%;
  background: var(--atl-sand);
}
/* The hairline divides what you read from what you pay -- which is what
   lets the price be as big as it is without shouting over the description.
   Solid and lighter than the old dashed rule: a dashed border reads as a
   tear-off, and this is a totals line. */
.atl-card-foot {
  margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  padding-top: 9px; border-top: 1px solid var(--atl-glass-border);
  flex-wrap: wrap;
}
/* Markers STACK down the plate's leading corner rather than sitting at
   opposite ends of a row. Side by side they need the plate wide enough for
   both, which a narrow results column is not -- that is how the flag lost its
   last letters. Stacked, each owns its full width at every size, and the
   globe keeps the opposite corner to itself. */
.atl-media-top {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  max-inline-size: calc(100% - 20px);
}
/* On the plate these sit over a photograph, so they carry their own light
   ground rather than inheriting the card's. Per-call-site, not theme-driven. */
.atl-media-top .atl-badge-new,
.atl-media-top .atl-review {
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(12, 20, 38, .18);
  max-inline-size: 100%;
}
.atl-media-top .atl-badge-new { border-color: rgba(255, 255, 255, .65); }
.atl-media-top .atl-review {
  height: 23px; padding: 0 9px; border-radius: 999px;
  align-items: center; gap: 4px; font-size: 11px;
}
.atl-media-top .atl-review .atl-score { font-size: 12px; }
.atl-media-top .atl-review .atl-star { font-size: 11px; }

/* "Show on globe" as a button on the thumbnail: it is where the globe
   belongs, and it stops the link eating a whole footer row. */
.atl-globe-btn {
  position: absolute; inset-block-end: 10px; inset-inline-end: 10px; z-index: 3;
  inline-size: 31px; block-size: 31px; border-radius: 50%; border: 0;
  display: grid; place-items: center; text-decoration: none;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 12px rgba(12, 20, 38, .3);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: transform .16s ease;
}
.atl-globe-btn:hover { transform: scale(1.08); }
.atl-globe-btn:focus-visible { outline: 2px solid var(--atl-blue); outline-offset: 3px; }

.atl-type-flag {
  position: static; z-index: 2;
  max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
  background: rgba(12, 18, 38, .5); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fbf3e9; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* review lockup + designed zero state */
.atl-review { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.atl-review .atl-star { color: var(--ag-color-rating-fill, #f4b45c); font-size: 13px; }
.atl-review .atl-score { font-weight: 800; font-size: 15px; color: var(--atl-ink); }
.atl-review .atl-count { font-size: 11.5px; color: var(--atl-muted); }
.atl-badge-new {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 11px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(241, 201, 174, .5), rgba(241, 201, 174, .22));
  border: 1px solid rgba(217, 155, 102, .45);
  color: var(--atl-ink); font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  /* Never let the badge be the thing that overflows the card: it is the least
     important element in the row, so it is the one that yields. */
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.atl-badge-new::before { content: "✦"; font-size: 10px; }

/* E2 price lockup. A SEPARATE class from .atl-price on purpose: .atl-price
   is still used by the flight card and flight_detail_atlas.html, neither of
   which is being restyled, so restyling it in place would have changed two
   surfaces nobody asked about. */
.atl-price-lockup {
  display: flex; align-items: baseline; gap: 2px;
  white-space: nowrap; color: var(--atl-price-ink);
}
.atl-price-cur {
  font-weight: 700; font-size: 11px; line-height: 1;
  color: var(--atl-price-cur); position: relative; top: -.62em;
}
.atl-price-whole { font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.022em; }
/* Minor units at full weight but a smaller face, so "80.00" costs barely more
   width than "80" and still reads as a real price. */
.atl-price-frac { font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: -.01em; }
.atl-price-per {
  font-size: 11.5px; font-weight: 600; color: var(--atl-muted);
  margin-inline-start: 4px;
}

/* screen-reader-only suffix on the location link */
.atl-vh {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* price lockup (legacy — flight card and flight detail) */
.atl-price { text-align: right; }
.atl-price .atl-price-from { font-weight: 600; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--atl-muted); }
.atl-price .atl-price-value { font-weight: 800; font-size: 22px; color: var(--atl-ink); line-height: 1.05; }
.atl-price .atl-price-unit { font-size: 11px; font-weight: 600; color: var(--atl-muted); }

/* globe link in card foot */
.atl-globe-link {
  font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--atl-blue); text-decoration: none;
}

/* ---------- scene postcards (official photo-less fallback) ---------- */
.atl-scene { position: relative; overflow: hidden; background: var(--atl-dusk); }
.atl-scene .atl-sun {
  position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; top: 14%; right: 12%;
  background: radial-gradient(circle, #ffe9cf 0 42%, rgba(255, 233, 207, .35) 60%, transparent 72%);
}
.atl-scene .atl-land { position: absolute; left: -2%; right: -2%; bottom: -1px; height: 50%; }
.atl-scene .atl-land i { display: block; height: 100%; background: linear-gradient(180deg, #22335c, #121a35); }
.atl-scene-caption {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 248, 240, .85);
}
.atl-scene-caption::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--atl-sand); }
.atl-scene-scrim { position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(180deg, transparent, rgba(13, 18, 38, .62)); z-index: 1; }

.atl-scene--petra { background: linear-gradient(165deg, #1a2547 0%, #3d6ba3 45%, #d9ab7f 78%, #f1c9ae 100%); }
.atl-scene--petra .atl-land { height: 58%; }
.atl-scene--petra .atl-land i { clip-path: polygon(0 100%, 0 34%, 12% 30%, 13% 62%, 20% 60%, 21% 12%, 36% 8%, 38% 58%, 46% 55%, 48% 26%, 60% 22%, 62% 60%, 74% 58%, 76% 30%, 88% 26%, 90% 64%, 100% 60%, 100% 100%); }
.atl-scene--wadirum { background: linear-gradient(168deg, #141d3a 0%, #28518a 52%, #d9a06b 84%, #f1c9ae 100%); }
.atl-scene--wadirum .atl-land i { clip-path: polygon(0 100%, 0 55%, 10% 40%, 24% 58%, 33% 30%, 45% 62%, 56% 44%, 68% 66%, 79% 38%, 90% 58%, 100% 46%, 100% 100%); background: linear-gradient(180deg, #1c2a4e, #0f1630); }
.atl-scene--deadsea { background: linear-gradient(172deg, #1b3a63 0%, #2e74b8 50%, #7fa8d1 70%, #f0dcc0 100%); }
.atl-scene--deadsea .atl-land { height: 34%; }
.atl-scene--deadsea .atl-land i { clip-path: polygon(0 100%, 0 62%, 16% 55%, 30% 66%, 47% 52%, 63% 64%, 80% 50%, 100% 60%, 100% 100%); background: linear-gradient(180deg, rgba(22, 34, 66, .92), #0e1832); }
.atl-scene--citadel { background: linear-gradient(160deg, #1e284a 0%, #35619c 46%, #d9a97e 80%, #f1c9ae 100%); }
.atl-scene--citadel .atl-land { height: 52%; }
.atl-scene--citadel .atl-land i { clip-path: polygon(0 100%, 0 48%, 9% 46%, 10% 30%, 13% 30%, 14% 46%, 26% 44%, 27% 20%, 30% 18%, 33% 20%, 34% 42%, 48% 40%, 49% 26%, 56% 24%, 57% 44%, 70% 42%, 71% 28%, 82% 26%, 83% 48%, 100% 44%, 100% 100%); background: linear-gradient(180deg, #263764, #131b38); }
.atl-scene--skyline { background: linear-gradient(165deg, #111834 0%, #22406d 46%, #b8875e 78%, #efc4a0 100%); }
.atl-scene--skyline .atl-land { height: 62%; }
.atl-scene--skyline .atl-land i { clip-path: polygon(0 100%, 0 70%, 8% 68%, 9% 42%, 12% 40%, 13% 66%, 22% 64%, 23% 18%, 26% 10%, 29% 18%, 30% 60%, 41% 58%, 42% 34%, 47% 30%, 48% 62%, 58% 60%, 59% 8%, 61% 2%, 63% 8%, 64% 56%, 74% 54%, 75% 36%, 80% 32%, 81% 60%, 92% 58%, 93% 44%, 100% 42%, 100% 100%); background: linear-gradient(180deg, #16203f, #0a0f24); }
.atl-scene--reef { background: linear-gradient(170deg, #143a5e 0%, #2e74b8 54%, #9cc4de 78%, #f1e2c8 100%); }
.atl-scene--reef .atl-land { height: 30%; }
.atl-scene--reef .atl-land i { clip-path: polygon(0 100%, 0 70%, 12% 58%, 25% 72%, 40% 55%, 55% 70%, 72% 52%, 86% 68%, 100% 58%, 100% 100%); background: linear-gradient(180deg, rgba(14, 30, 56, .9), #0a1a30); }

/* ---------- endcap (replaces bare pagination footer line) ---------- */
.atl-endcap { display: flex; align-items: center; gap: 14px; margin: 26px 0 8px; }
.atl-endcap p { margin: 0; white-space: nowrap; font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--atl-muted); }
.atl-route-line { flex: 1; height: 2px; border-radius: 2px; background-image: linear-gradient(90deg, rgba(46,116,184,.45) 0 4px, transparent 4px 11px); background-size: 11px 2px; }
.atl-route-line--tail { max-width: 60px; }

/* ---------- one orchestrated load ---------- */
@keyframes atl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.atl-rise { animation: atl-rise .55s cubic-bezier(.22, .8, .3, 1) both; }
.atl-rise-1 { animation-delay: .04s; } .atl-rise-2 { animation-delay: .1s; }
.atl-rise-3 { animation-delay: .16s; } .atl-rise-4 { animation-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
  .atl-rise, .atl-rise-1, .atl-rise-2, .atl-rise-3, .atl-rise-4 { animation: none; }
  .atl-panorama, .atl-panorama:hover { transition: none; transform: none; }
  .atl-globe-btn, .atl-card-loc--live { transition: none; }
  .atl-globe-btn:hover,
  .atl-panorama:has(.atl-card-loc--live:hover) .atl-globe-btn { transform: none; }
}

@media (max-width: 767.98px) {
  /* Below this width the card stops being horizontal: the plate becomes a
     banner and the body sits under it. The proportional column has nothing
     left to be proportional to. */
  .atl-panorama { grid-template-columns: 1fr; }
  .atl-panorama .atl-media { min-height: 168px; position: relative; }
  .atl-card-body { padding: 12px 6px 2px; }
  /* On a phone the description and the price are what matter; the amenities
     are one tap away on the detail page. Dropping the row beats cramming it. */
  .atl-micro-row { display: none; }
  .atl-horizon h1 { font-size: 25px; }

  /* G17: .atl-card-title-row and .atl-card-foot are horizontal flex rows
     with no mobile stacking. The bare title/loc <div> in the title row has
     no min-width floor removed, so a long nowrap sibling badge (esp.
     .atl-badge-new's "New -- be the first to review", shown on zero-review
     listings) squeezes it toward overflow instead of just wrapping. In the
     foot row, the globe link and the price+View button compete for the
     same line, which can force the price value to wrap mid-digit. Let the
     title shrink; stack the foot so price gets its own line. */
  .atl-card-title-row > div:first-child {
    min-inline-size: 0;
  }
  /* The foot no longer needs to stack. The globe link that used to compete
     for this row now lives on the plate, so the price and the button fit on
     one baseline at phone widths -- verified down to 330px. */
  .atl-card-foot .atl-price {
    flex: none;
  }
}

/* ---------- results layout: proper filter rail (P1 polish) ----------
   The legacy Bootstrap col-md-4/col-lg-3 gave the filter aside ~200px on a
   896px canvas — cramped fields, wrong proportions. On >=768px the results
   row becomes a 300px rail + fluid results grid; the rail is sticky so long
   filter stacks scroll independently. Mobile keeps the off-canvas panel. */
@media (min-width: 768px) {
  .atl-page .atl-results-row {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .atl-page .atl-results-row__toggle { display: none; }
  /* neutralize the Bootstrap column sizing inside the grid */
  .atl-page .atl-results-row > .filters-panel,
  .atl-page .atl-results-row > section {
    width: auto;
    max-width: none;
    flex: none;
    padding-inline: 0;
  }
  .atl-page .atl-results-row > .filters-panel {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
.atl-page .filters-panel .results-filters-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ============ P2 — results verticals ============ */

/* vibe/category chip row (restyle of ag-category-pills inside atlas) */
.atl-page .ag-category-pill {
  border-radius: 999px; border: 1px solid #dbe3f0; background: #fff;
  font-weight: 600; font-size: 12.5px; color: var(--atl-body);
  padding: 6px 14px; text-decoration: none;
}
.atl-page .ag-category-pill.is-active {
  background: linear-gradient(135deg, #22406d, var(--atl-blue));
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(46, 116, 184, .35);
}

/* tour itinerary route strip */
.atl-itin {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  padding: 8px 12px; border-radius: 10px;
  background: var(--ag-color-brand-primary-softer, rgba(46, 116, 184, .12));
  border: 1px dashed rgba(46, 116, 184, .3);
}
.atl-itin-stop {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--atl-ink);
}
.atl-itin-stop::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--atl-blue); box-shadow: 0 0 0 2.5px rgba(46, 116, 184, .18);
}
.atl-itin-leg { width: 26px; height: 2px; background-image: linear-gradient(90deg, rgba(46,116,184,.55) 0 4px, transparent 4px 10px); background-size: 10px 2px; }
.atl-day-ribbon {
  position: absolute; inset-inline-start: 10px; inset-block-end: 10px; z-index: 2;
  /* Keep clear of the globe button in the opposite corner: 20px of margins,
     the 31px button, and a 10px gap. Without this the ribbon slides under it
     on a narrow results column. */
  max-inline-size: calc(100% - 71px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 999px; background: rgba(241, 201, 174, .93); color: var(--atl-ink);
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

/* flight boarding-pass row */
/* Stub widened 168 -> 196 and the middle track floored at 0 so it can shrink
   rather than push the stub. The stub holds either a compact price lockup or
   .atl-badge-new, and that badge is a whole sentence — "Fares open closer to
   departure" measured 217px against a 168px column. With `white-space: nowrap`
   it could not wrap, so it overflowed; and because the stub is
   `align-items: flex-end`, the overflow spilled LEFT, landing 47px on top of the
   arrival airport code. See the badge rule below, which lets it wrap too. */
.atl-fpass { display: grid; grid-template-columns: 148px minmax(0, 1fr) 196px; align-items: stretch; position: relative; }
.atl-fpass-ablock { padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.atl-roundel {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 11px; color: #fff; letter-spacing: .04em;
  background: linear-gradient(135deg, #22406d, var(--atl-blue));
}
.atl-fpass-rblock { padding: 16px 18px 12px; border-left: 1px dashed rgba(46, 116, 184, .2); min-width: 0; }
.atl-fpass-stub {
  padding: 16px; border-left: 2px dashed rgba(46, 116, 184, .3);
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px;
}
/* Belt-and-braces with the widened column above: the badge is a sentence, so it
   must be allowed to wrap inside the stub rather than overflow it. The base
   .atl-badge-new is a fixed-height nowrap pill, which suits its other homes
   (stay/experience heroes, where the copy is short) — this only relaxes it where
   it shares a row with the route. */
.atl-fpass-stub .atl-badge-new {
  white-space: normal;
  height: auto;
  min-height: 24px;
  max-inline-size: 100%;
  padding-block: 5px;
  line-height: 1.3;
  text-align: end;
}
.atl-airport-code { font-weight: 800; font-size: 24px; color: var(--atl-ink); }
.atl-airport-time { font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--atl-muted); }
.atl-route-arc { position: relative; height: 34px; }
.atl-route-arc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atl-route-arc .atl-arc { fill: none; stroke: rgba(46, 116, 184, .55); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.atl-mono-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px;
  background: #eef2fa; color: var(--atl-ink);
  font-weight: 600; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
}
.atl-status-direct { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border-radius: 999px; background: rgba(5, 150, 105, .1); color: var(--atl-good); font-size: 10px; font-weight: 700; }
.atl-status-stop { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border-radius: 999px; background: rgba(234, 88, 12, .12); color: var(--atl-warn); font-size: 10px; font-weight: 700; }

/* legacy fare calendar + corridor components, glassed inside atlas */
.atl-page .fare-calendar, .atl-page [class*="fare-calendar"] > .card,
.atl-page .corridor-advisory, .atl-page [class*="corridor-banner"] {
  background: var(--atl-glass); border: 1px solid var(--atl-glass-border);
  border-radius: var(--atl-r); box-shadow: var(--atl-shadow-soft);
}

@media (max-width: 767.98px) {
  .atl-fpass { grid-template-columns: 1fr; }
  .atl-fpass-rblock, .atl-fpass-stub { border-left: 0; border-top: 2px dashed rgba(46, 116, 184, .25); align-items: flex-start; }
}

/* ---------- filter rail: inner padding + slider breathing room ----------
   The rail's glass panel sat directly on the form with zero padding: labels,
   inputs and the noUiSlider handles rendered flush against the card border
   (user-reported). The booking-bar partial keeps its own inner card look. */
.atl-page .filters-panel > form {
  padding: 16px 16px 20px;
}
.atl-page .filters-panel .noUi-target {
  margin-inline: 10px;
}

/* ---------- flight boarding-pass: center the airline block ----------
   The airline column top-aligned into a tall card leaving dead space under
   the code chip; center it against the route block. */
.atl-fpass-ablock {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* ============ P3 — detail pages ============ */

/* gallery mosaic: 1 large + 4 tiles */
.atl-mosaic {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 168px 168px;
  gap: 10px; border-radius: 20px; overflow: hidden;
}
.atl-mosaic .atl-mosaic-tile { position: relative; overflow: hidden; }
.atl-mosaic .atl-mosaic-tile:first-child { grid-row: 1 / 3; }
.atl-mosaic .atl-mosaic-tile img, .atl-mosaic .atl-mosaic-tile .atl-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.atl-mosaic-more {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  background: rgba(13, 18, 38, .55); color: #fff; font-weight: 700; font-size: 13px;
  text-decoration: none;
}

/* sticky section tabs (restyle of the legacy detail tab pills — the real
   detail pages render them as .ag-section-nav; the other selectors are kept
   from the spec for template variants that use them) */
.atl-page .ag-section-nav, .atl-page .ag-tabs, .atl-page [role="tablist"].nav, .atl-page .detail-tabs {
  position: sticky; top: 76px; z-index: 30;
  background: var(--atl-glass); backdrop-filter: blur(14px);
  border: 1px solid var(--atl-glass-border); border-radius: 999px;
  box-shadow: var(--atl-shadow-soft); padding: 5px;
}

/* booking aside glassed + sticky */
.atl-aside { position: sticky; top: 84px; }
.atl-aside .card, .atl-aside form, .atl-page aside .card {
  background: var(--atl-glass); border: 1px solid var(--atl-glass-border);
  border-radius: var(--atl-r); box-shadow: var(--atl-shadow-soft);
}

/* designed empty state (reviews / seat map) */
.atl-empty { text-align: center; padding: 42px 24px 40px; }
.atl-empty .atl-orb {
  width: 92px; height: 92px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--atl-dusk);
  box-shadow: 0 16px 36px rgba(30, 40, 74, .3), inset 0 0 0 5px rgba(255, 255, 255, .18);
}
.atl-empty h3 { font-weight: 800; font-size: 19px; color: var(--atl-ink); margin: 0 0 6px; }
.atl-empty p { font-size: 13px; color: var(--atl-muted); max-width: 380px; margin: 0 auto 18px; }

/* instrument chip (quick facts) */
.atl-instrument {
  background: var(--atl-glass); border: 1px solid var(--atl-glass-border);
  border-radius: var(--atl-r); box-shadow: var(--atl-shadow-soft);
  padding: 13px 14px; position: relative; overflow: hidden;
}
.atl-instrument .atl-k { font-weight: 600; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--atl-muted); }
.atl-instrument .atl-v { font-weight: 800; font-size: 17px; color: var(--atl-ink); margin-top: 3px; }
.atl-instrument::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--atl-blue); opacity: .55; }

/* vertical timeline (what to expect / itinerary) */
.atl-timeline { padding: 18px 20px; }
.atl-t-row { display: grid; grid-template-columns: 64px 20px 1fr; gap: 12px; padding-bottom: 20px; position: relative; }
.atl-t-row:last-child { padding-bottom: 2px; }
.atl-t-time { font-weight: 600; font-size: 10px; letter-spacing: .08em; color: var(--atl-ink); text-align: right; padding-top: 2px; }
.atl-t-dot i { display: block; width: 12px; height: 12px; border-radius: 50%; margin: 3px auto 0; background: #fff; border: 3px solid var(--atl-blue); }
.atl-t-row:not(:last-child) .atl-t-dot { position: relative; }
.atl-t-row:not(:last-child) .atl-t-dot::after {
  content: ""; position: absolute; left: 50%; top: 18px; bottom: -4px; transform: translateX(-50%);
  width: 2px; background-image: linear-gradient(180deg, rgba(46,116,184,.45) 0 4px, transparent 4px 10px); background-size: 2px 10px;
}
.atl-t-body h4 { font-weight: 700; font-size: 14px; color: var(--atl-ink); margin: 0; }
.atl-t-body p { font-size: 12px; color: var(--atl-muted); margin: 2px 0 0; }

/* flight fare columns */
.atl-fare-col {
  background: var(--atl-glass); border: 1px solid var(--atl-glass-border);
  border-radius: var(--atl-r); box-shadow: var(--atl-shadow-soft);
  padding: 18px 16px 16px; position: relative; display: flex; flex-direction: column; gap: 10px;
}
.atl-reco-ribbon {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; height: 22px; padding: 0 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--atl-sand), #d99b66); color: var(--atl-ink);
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}

@media (max-width: 767.98px) {
  .atl-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 140px 140px; }
  .atl-mosaic .atl-mosaic-tile:first-child { grid-row: auto; grid-column: 1 / 3; }
}

/* ---------- filter rail v2 — benchmarked against the flights panel ----------
   The flights results rail (fl-sidebar) is a designed component; the other
   three verticals inherited the raw legacy filter form (heavy caps labels,
   mismatched input chrome, dashed dividers, default checkboxes). This block
   brings .atl-page rails to the same standard without touching the shared
   legacy partials (scoped restyle only). */
.atl-rail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 2px 12px;
}
.atl-rail-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--atl-ink);
}
.atl-rail-title svg { width: 16px; height: 16px; color: var(--atl-blue); flex: none; }
.atl-rail-reset { font-size: 11.5px; font-weight: 600; color: var(--atl-blue); text-decoration: none; white-space: nowrap; }
.atl-rail-reset:hover { text-decoration: underline; }

/* quiet caps labels (flights-style) */
.atl-page .filters-panel .form-label {
  display: block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--atl-muted); margin-bottom: 6px;
}

/* one input voice: 40px, 12px radius, soft field, brand focus ring */
.atl-page .filters-panel .form-control,
.atl-page .filters-panel .form-select,
.atl-page .filters-panel input[type="text"],
.atl-page .filters-panel input[type="number"],
.atl-page .filters-panel input[type="date"],
.atl-page .filters-panel .stays-booking-bar__input {
  height: 40px; border-radius: 12px;
  border: 1px solid #dbe3f0; background: #f8fafd;
  font-size: 13.5px; color: var(--atl-body);
  padding-inline: 12px; box-shadow: none;
}
.atl-page .filters-panel .form-control:focus,
.atl-page .filters-panel .form-select:focus,
.atl-page .filters-panel input:focus,
.atl-page .filters-panel .stays-booking-bar__input:focus {
  border-color: var(--atl-blue);
  box-shadow: 0 0 0 3px rgba(46, 116, 184, .14);
  background: #fff; outline: none;
}

/* group rhythm: soft hairlines instead of the legacy dashed dividers */
.atl-page .filters-panel .filters .filter-group + .filter-group {
  border-top: 1px solid rgba(46, 116, 184, .08);
  padding-top: 14px; margin-top: 14px;
}

/* checkboxes (amenities etc.) */
.atl-page .filters-panel .form-check { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.atl-page .filters-panel .form-check-input {
  width: 16px; height: 16px; margin: 0; flex: none;
  border-radius: 5px; border: 1.5px solid #c5d1e4;
  accent-color: var(--atl-blue);
}
.atl-page .filters-panel .form-check-label { font-size: 13px; color: var(--atl-body); }
.atl-page .filters-panel .filter-checklist {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 250px; overflow-y: auto; scrollbar-width: thin;
}

/* range sliders (noUiSlider): slim brand track, clean round handles */
.atl-page .filters-panel .noUi-target {
  border: 0; box-shadow: none; background: #e3eaf5;
  height: 5px; border-radius: 999px;
}
.atl-page .filters-panel .noUi-connect { background: linear-gradient(90deg, #2e74b8, #4f46e5); }
.atl-page .filters-panel .noUi-horizontal .noUi-handle {
  width: 18px; height: 18px; right: -9px; top: -7px;
  border-radius: 50%; background: #fff;
  border: 2px solid var(--atl-blue);
  box-shadow: 0 2px 6px rgba(30, 40, 74, .18); cursor: grab;
}
.atl-page .filters-panel .noUi-handle::before,
.atl-page .filters-panel .noUi-handle::after { display: none; }

/* rail buttons: pill like the rest of the atlas voice */
.atl-page .filters-panel .btn { border-radius: 999px; font-weight: 600; }