/* AsiatiqueHotels - "Atlas" theme.
   Split listing: results scroll, map stays put, a number binds the two.

   Same palette as site.css, deliberately. Only the type and the listing layout
   differ, so switching themes is not also a colour decision.

   Everything this theme does not override is served by base, which means this
   file has to style base's markup too - the header, footer, hotel page and
   legal pages all still come from there. It starts by importing site.css for
   exactly that reason, then replaces the type system and the listing. */

@import url('site.css');

:root{
  /* Manrope for headings, Inter for everything else, no monospace. */
  --display:'Manrope',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'Inter',system-ui,sans-serif;
}

/* Archivo has a width axis and Manrope does not, so every 'wdth' setting
   inherited from site.css is now a declaration the browser ignores. Cleared
   rather than left lying around, because a rule that does nothing is a rule
   somebody will later try to tune. */
.brand,.masthead__city,.stay__name,.panel__title,
h1,h2,h3,.card__name{font-variation-settings:normal}

/* DM Mono was keeping numeric columns aligned for free. Inter's digits are
   proportional, so ask. */
.rating__n,.results__facts,.chip__n,.card__n,.pin span,
.datastrip,.stay__rating{font-variant-numeric:tabular-nums}

/* ==================================================================== split */
.split{display:grid;grid-template-columns:1fr}
@media (min-width:1000px){
  .split{grid-template-columns:minmax(0,1fr) minmax(400px,42%)}
}

.results{padding:26px 24px 64px;min-width:0}
.results__eyebrow{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-2);margin:0 0 4px;font-weight:600;
}
.results h1{
  font-family:var(--display);font-weight:700;
  font-size:1.875rem;line-height:1.12;letter-spacing:-.02em;margin:0;
}
.results__facts{font-size:.8125rem;color:var(--ink-2);margin:6px 0 0}
.results__intro{margin:16px 0 22px;max-width:60ch;color:var(--ink-2)}
.results__intro p{margin:0 0 12px}
.results__intro h2{font-size:1.0625rem;margin:18px 0 8px;color:var(--ink)}
.results__intro ul{margin:0 0 12px;padding-left:1.1em}
.results__empty{color:var(--ink-2)}

.cards{display:grid;gap:14px;list-style:none;margin:0;padding:0}

/* Horizontal cards: in a column this narrow, a stacked photo takes more weight
   than the words, and the words are what was hand-picked. */
.card{
  position:relative;background:var(--surface);border:1px solid var(--mist);
  border-radius:var(--radius);display:grid;grid-template-columns:120px 1fr;
  overflow:hidden;transition:border-color .12s,box-shadow .12s;
}
@media (min-width:560px){.card{grid-template-columns:190px 1fr}}
.card:hover,.card.is-active{
  border-color:var(--petrol);box-shadow:0 6px 20px rgba(14,26,28,.09);
}
.card.is-active{outline:2px solid var(--amber);outline-offset:-2px}

.card__pic{position:relative;background:var(--tile);min-height:148px}
.card__pic img{width:100%;height:100%;object-fit:cover}
.card__pic svg{width:100%;height:100%;display:block}

/* The number: card, pin, legend. The only thing binding a listing to a point,
   which is what makes two panels read as one page. */
.card__n{
  position:absolute;top:0;left:0;z-index:2;
  width:30px;height:30px;display:grid;place-items:center;
  background:var(--petrol);color:#fff;font-size:.8125rem;font-weight:600;
}
.card.is-active .card__n{background:var(--amber);color:var(--petrol-deep)}

.card__body{padding:14px 16px 12px;min-width:0;display:flex;flex-direction:column}
.card__name{
  font-family:var(--display);font-weight:600;font-size:1.0625rem;
  line-height:1.25;margin:0 0 3px;
}
.card__name a{text-decoration:none}
.card__name a:hover{text-decoration:underline;text-underline-offset:2px}
.card__where{
  font-size:.75rem;color:var(--ink-2);text-transform:uppercase;
  letter-spacing:.07em;margin:0 0 8px;font-weight:600;
}
.card__desc{
  font-size:.875rem;color:var(--ink-2);margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card__foot{
  margin-top:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:10px;border-top:1px solid var(--mist);
}
.rating{display:flex;align-items:baseline;gap:6px}
.rating__n{font-size:1rem;font-weight:600;color:var(--petrol)}
.rating__of{font-size:.75rem;color:var(--ink-2)}
.stars{color:var(--amber);font-size:.8125rem;letter-spacing:.08em}
.stars__off{opacity:.26}
.card__cta{
  margin-left:auto;background:var(--petrol);color:#fff;text-decoration:none;
  padding:7px 14px;border-radius:var(--radius);
  font-size:.8125rem;font-weight:600;white-space:nowrap;
}
.card__cta:hover{background:var(--petrol-deep)}

/* Hotels with no coordinates still list; they simply have no number. */
.card--nogeo .card__pic::after{
  content:'';position:absolute;inset:0;box-shadow:inset 3px 0 0 var(--mist);
}

.results__section{
  font-family:var(--display);font-weight:700;font-size:1.125rem;
  margin:30px 0 12px;letter-spacing:-.01em;
}

.how{
  margin-top:36px;border-top:1px solid var(--mist);padding-top:20px;
  max-width:60ch;color:var(--ink-2);font-size:.9375rem;
}
.how h2{
  font-family:var(--display);font-weight:700;font-size:1rem;
  margin:0 0 10px;color:var(--ink);
}
.how p{margin:0 0 12px}

.alsonav{margin-top:34px;border-top:1px solid var(--mist);padding-top:18px}
.alsonav--top{margin-top:22px;border-top:0;padding-top:0}
.alsonav h2{font-family:var(--display);font-size:.9375rem;margin:0 0 10px}
.alsonav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.alsonav a{
  display:inline-flex;gap:7px;align-items:baseline;text-decoration:none;
  border:1px solid var(--mist);border-radius:100px;padding:5px 13px;
  font-size:.8125rem;background:var(--surface);
}
.alsonav a:hover{border-color:var(--petrol)}
.alsonav span{color:var(--ink-2);font-size:.75rem;font-variant-numeric:tabular-nums}

/* ====================================================================== map */
.mapwrap{position:relative;background:var(--tile)}
@media (min-width:1000px){
  .mapwrap{position:sticky;top:0;height:100vh}
}
@media (max-width:999px){
  .mapwrap{height:56vh;order:-1;border-bottom:1px solid var(--mist)}
}
#map{width:100%;height:100%;background:var(--tile)}

.maplead{
  position:absolute;top:14px;left:14px;right:14px;z-index:400;
  background:var(--surface);border:1px solid var(--mist);border-radius:var(--radius);
  padding:9px 13px;font-size:.8125rem;color:var(--ink-2);
  box-shadow:0 4px 14px rgba(14,26,28,.1);
}
.maplead strong{color:var(--ink)}
.maplead--none{position:static;margin:20px;box-shadow:none}

.pin{
  width:30px;height:30px;border-radius:50% 50% 50% 2px;transform:rotate(-45deg);
  background:var(--petrol);border:2px solid #fff;
  box-shadow:0 2px 6px rgba(14,26,28,.35);display:grid;place-items:center;cursor:pointer;
}
.pin span{transform:rotate(45deg);color:#fff;font-size:.75rem;font-weight:600}
.pin.is-active{background:var(--amber)}
.pin.is-active span{color:var(--petrol-deep)}

.leaflet-container{font-family:var(--body)}
.leaflet-popup-content{margin:10px 12px;font-size:.875rem}
.leaflet-popup-content b{font-family:var(--display)}

/* The map is full-bleed, so the shell's max-width must not apply to it. Base's
   header and footer keep theirs. */
.split{max-width:none;margin:0}

/* ================================================================= homepage
   Not the split layout, and no map. A listing answers "which of these"; the
   homepage answers "where should I go, and why believe you".

   Bands, not one column. Each section owns its full width and its background,
   and .wrapx holds the content to a readable measure inside it - which is how
   the rhythm of a travel homepage is made, and what the previous attempt was
   missing when every section floated in the same flat grey. */
.wrapx{max-width:1180px;margin:0 auto;padding:0 24px}

.band{padding:52px 0}
.band--paper{background:var(--paper)}
.band--white{background:var(--surface);border-top:1px solid var(--mist);
             border-bottom:1px solid var(--mist)}

.bandhead{margin:0 0 24px}
.bandhead h2{
  font-family:var(--display);font-weight:700;font-size:1.5rem;
  letter-spacing:-.02em;margin:0 0 6px;
}
.bandhead p{margin:0;color:var(--ink-2);font-size:.9375rem;max-width:60ch}

/* --------------------------------------------------------------- hero
   .homehero and not .hero. site.css is imported wholesale and already defines
   .hero{max-width:820px} for base's homepage - which is what stopped this band
   short of the right edge and left a grey column beside it. Anything only Atlas
   has now gets a name only Atlas uses, because a partial override of a shared
   class inherits whatever it did not think to reset. */
.homehero{
  position:relative;overflow:hidden;
  padding:56px 0 60px;background:var(--petrol-deep);color:#fff;
}
.homehero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.4;filter:saturate(.85);
}
/* Fixed gradient over a photograph nobody chose for this purpose - the feed
   supplies what it supplies, and the text has to stay legible over all of it
   rather than over the two that happen to be dark. */
.homehero--photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,
    rgba(10,54,52,.95) 0%, rgba(10,54,52,.9) 38%, rgba(10,54,52,.55) 100%);
}
.homehero__in{
  position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 24px;
  display:grid;gap:34px;grid-template-columns:1fr;align-items:center;
}
@media (min-width:900px){
  /* The empty half was the whole complaint. The form goes there, which also
     gives the hero something to be about other than a headline. */
  .homehero__in{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:48px}
}

.homehero__eyebrow{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--amber);font-weight:600;margin:0 0 14px;
}
.homehero__title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,4.6vw,3.25rem);line-height:1.04;letter-spacing:-.032em;
  margin:0 0 18px;
}
.homehero__lede{
  font-size:1.0625rem;color:#CFE2DF;margin:0 0 18px;max-width:44ch;line-height:1.55;
}
.homehero__note{
  font-size:.8125rem;color:#9BC1BC;margin:0;max-width:50ch;line-height:1.55;
}

/* ------------------------------------------------------------------ finder */
.finder{
  background:var(--surface);color:var(--ink);
  border-radius:6px;padding:22px 22px 20px;
  box-shadow:0 18px 44px rgba(6,26,25,.34);
}
.finder__title{
  font-family:var(--display);font-weight:700;font-size:1.125rem;
  margin:0 0 16px;letter-spacing:-.015em;
}
.finder__field{display:block;margin:0 0 13px}
.finder__field span{
  display:block;font-size:.6875rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;color:var(--ink-2);margin:0 0 5px;
}
.finder__field select{
  display:block;width:100%;font:inherit;font-size:.9375rem;padding:11px 12px;
  border:1px solid var(--mist);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
}
.finder__field select:focus{outline:2px solid var(--petrol);outline-offset:1px}

.finder__go{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.btn--go{
  background:var(--petrol);color:#fff;border:0;border-radius:var(--radius);
  padding:12px 22px;font:inherit;font-weight:600;font-size:.9375rem;cursor:pointer;
}
.btn--go:hover{background:var(--petrol-deep)}
.finder__lucky{
  font-size:.875rem;font-weight:600;color:var(--petrol);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
}
.finder__lucky:hover{color:var(--petrol-deep)}

/* ------------------------------------------------------------ destinations */
.placegrid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.place{
  display:block;text-decoration:none;background:var(--surface);
  border:1px solid var(--mist);border-radius:var(--radius);overflow:hidden;
  transition:border-color .12s,box-shadow .12s,transform .12s;
}
.place:hover{
  border-color:var(--petrol);box-shadow:0 8px 22px rgba(14,26,28,.11);
  transform:translateY(-2px);
}
.place__pic{position:relative;display:block;aspect-ratio:4/3;background:var(--tile)}
.place__pic img{width:100%;height:100%;object-fit:cover}
.place__pic svg{width:100%;height:100%;display:block}
.place__label{display:block;padding:12px 14px 14px}
.place__city{
  display:block;font-family:var(--display);font-weight:600;font-size:1.0625rem;
  line-height:1.2;
}
.place__meta{
  display:block;font-size:.75rem;color:var(--ink-2);margin-top:3px;
  font-variant-numeric:tabular-nums;
}

/* -------------------------------------------------------- recently picked */
.cards--row{
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;
}
/* Stacked, not horizontal: a wide row has no narrow column making the photo
   fight the words for space, which is the only reason the listing stacks the
   other way. */
.card--stack{grid-template-columns:1fr}
.card--stack .card__pic{aspect-ratio:16/10;min-height:0}
.card--stack .card__pic img{width:100%;height:100%;object-fit:cover}
.card--stack .card__foot{border-top:0;padding-top:0;margin-top:auto}

/* ------------------------------------------------------------- the argument */
.method{padding:56px 0 60px;background:var(--petrol);color:#CFE2DF}
.method h2{
  font-family:var(--display);font-weight:700;font-size:1.5rem;color:#fff;
  letter-spacing:-.02em;margin:0 0 26px;
}
.figures{
  list-style:none;margin:0 0 34px;padding:0;
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.figures li{font-size:.8125rem;color:#9BC1BC;line-height:1.35}
.figures__n{
  display:block;font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(1.625rem,3.6vw,2.25rem);letter-spacing:-.025em;line-height:1;
  font-variant-numeric:tabular-nums;margin-bottom:6px;
}
.method__cols{display:grid;gap:24px;grid-template-columns:1fr}
@media (min-width:720px){.method__cols{grid-template-columns:1fr 1fr;gap:40px}}
.method__cols p{margin:0;font-size:.9375rem;line-height:1.7}

/* ------------------------------------------------------------------ guides */
.guides{
  list-style:none;margin:0;padding:0;
  display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.guides a{
  display:flex;flex-direction:column;height:100%;text-decoration:none;
  background:var(--surface);border:1px solid var(--mist);
  border-radius:var(--radius);padding:18px 20px;transition:border-color .12s;
}
.guides a:hover{border-color:var(--petrol)}
.guides h3{font-family:var(--display);font-weight:600;font-size:1.0625rem;margin:0 0 8px}
.guides p{margin:0 0 14px;font-size:.875rem;color:var(--ink-2);line-height:1.55}
.guides__more{margin-top:auto;font-size:.8125rem;font-weight:600;color:var(--petrol)}