/* Sovana — the two "How long will you stay?" pages: daily-stay.html and
   long-stay.html (2026-10-02, the client's content, the site's layout;
   re-laid 2026-10-14 after the client's mockup — the tabbed bar, compact
   cards, the location card with its live 360° — at the foot of this file).
   Layered on tokens + styles-alt (+ styles-flow for the hero, styles-fees
   for the groups, styles-blog for the facility cards, styles-avail for the
   inline booking bar). Everything here is a small variant of a section that
   already exists — nothing new in kind. */

/* ── Points in four (the location page's .locpage__pts, one more column) ─ */
/* four across on desktop, two on a tablet, one under 900 (styles-alt's rule) */
@media (min-width: 1081px) {
  .locpage__pts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1080px) and (min-width: 901px) {
  .locpage__pts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .locpage__pts--4 li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .locpage__pts--4 li:nth-child(even) { padding-right: 0; }
}
/* the points without a map under them close the section on its own padding */
.locpage__pts--end { margin-bottom: 0; }

/* ── The groups (styles-fees.css) under a centred section head ────────── */
.stay-groups .sec-head { margin-bottom: 100px; }
@media (max-width: 900px) {
  .stay-groups .sec-head { justify-items: start; text-align: left; margin-bottom: 40px; }
}

/* ── Facility cards (the journal's related-article cards, not links) ──── */
.stay-fac .rel__grid { row-gap: 48px; }
/* the photo credit the licence asks for (Plaza Senayan CC BY 4.0, Senayan City
   with permission) — on the picture's corner, the home Facilities' .amen__credit */
.rel__media:has(.rel__credit) { position: relative; }
.rel__credit {
  position: absolute; right: 0; bottom: 0; margin: 0; padding: 6px 10px;
  background: rgba(14, 43, 33, .55); color: var(--ivory);
}
.rel__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Level 5's padel, pickleball and Noll Coffee (2026-10-07, by request): the
   picture dark with "Coming soon" centred on it — the sold-out frame's dress
   (.unit__sold, styles-alt.css); the "Coming soon · Dec 2026" line stays */
.rel__card.is-soon .rel__media { position: relative; }
.rel__card.is-soon .rel__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(0, 0, 0, .5);
}



/* a link inside an FAQ answer: the answer's own colour, a gold rule under it */
.faq__link {
  color: var(--green); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--gold); text-underline-offset: 4px;
}
.faq__link:focus-visible { outline: 2px solid var(--gold-700); outline-offset: 3px; }

/* a white section straight after another white one: one section's padding
   between them, not two (daily "Made for", 2026-10-02, by request) */
.stay-follow { padding-top: 0; }

/* the enquiry lede reads as two even lines (2026-10-02, by request) */
.contact__info > p { text-wrap: balance; }
/* …and so does each group's note (2026-10-02, by request) */
.stay-groups .fees__gnote { text-wrap: balance; }

/* Long stay rows: the four media (2026-10-06, the client's A5) as the
   results page's underline actions, in one wrapping line under the words;
   what has no asset yet reads "coming soon" and does nothing */
.row__acts { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 4px; }
.row__plan { text-decoration: none; }
.row__plan.is-soon { cursor: default; opacity: .55; }
.row__plan.is-soon::after { content: none; }

/* ── Compare the five residences (long stay, 2026-10-06 — the client's
   table, in the site's dress) ───────────────────────────────────────────
   Hairline rows, an ivory band for the head, the row names as tracked
   labels, each residence a column; Enquire as the underline action. It
   scrolls sideways on its own below 900, so the page never does. */
.cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp table { width: 100%; min-width: 820px; border-collapse: collapse; }
.cmp th, .cmp td {
  padding: 18px 20px; text-align: left; vertical-align: top;
  border-bottom: var(--hairline); font-weight: var(--weight-regular);
}
.cmp thead th, .cmp thead td { background: var(--ivory); padding-block: 22px; border-bottom: 0; }
.cmp__name { display: block; color: var(--green); }
.cmp__kind { display: block; margin-top: 4px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }
.cmp tbody th { width: 16%; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; vertical-align: middle; }
.cmp td { color: var(--ink); }
.cmp__sub { display: block; color: var(--muted); }
.cmp__acts td { border-bottom: 0; padding-top: 24px; }
/* Enquire: the outline button (by request), fitted to its column */
.cmp__acts .btn { padding-inline: 20px; white-space: nowrap; }
/* Sold out (Two, Grande — 2026-10-07, by request): the same button, inactive */
.cmp .btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
/* On tablet and phone (≤1080, 2026-10-07, by request — no sideways swipe):
   a card per residence, built from the table by js/stay.js — white lifted,
   name + kind, then label | value rows on hairlines, then the action. Two
   across on a tablet, one on a phone. */
.cmp__cards { display: none; }
@media (max-width: 1080px) {
  .cmp.has-cards .cmp__scroll { display: none; }
  .cmp__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .cmp__card {
    display: flex; flex-direction: column; background: var(--white); padding: 28px 24px;
    box-shadow: 0 0 0 1px var(--hairline-color), var(--shadow-card);
  }
  .cmp__card .cmp__name { margin: 0; }
  .cmp__list { margin: 20px 0 0; border-top: var(--hairline); }
  .cmp__list > div {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px;
    align-items: baseline; padding: 14px 0; border-bottom: var(--hairline);
  }
  .cmp__list dt { color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }
  .cmp__list dd { margin: 0; color: var(--ink); text-align: right; }
  .cmp__card .btn { margin-top: 24px; align-self: stretch; text-align: center; justify-content: center; }
}
@media (max-width: 720px) { .cmp__cards { grid-template-columns: minmax(0, 1fr); } }

/* ── Living here (long stay, 2026-10-06 — the client's A7 order) ─────────
   terms in a row → two cards (included · in proposal) → four steps;
   100 between the three blocks (64 at ≤1080), roomier cards — by request */
.stay-living .sec-head { margin-bottom: var(--head-gap); }
.lv-label { display: block; margin-bottom: 10px; color: var(--muted); letter-spacing: .16em; text-transform: uppercase; }
.lv-terms { margin-bottom: 100px; }
.lv-terms h3 { margin-bottom: 6px; }
.lv-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 100px; }
.lv-card {
  background: var(--white); padding: clamp(28px, 3.6vw, 56px);
  box-shadow: 0 0 0 1px var(--hairline-color), var(--shadow-card);
}
.lv-card h3 { margin: 0; color: var(--green); }
.lv-card__note { margin: 12px 0 32px; color: var(--muted); text-wrap: balance; }
.lv-list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.lv-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 18px 0; border-bottom: var(--hairline);
}
.lv-list__k { color: var(--ink); }
.lv-list__v { flex: none; color: var(--green); letter-spacing: .16em; text-transform: uppercase; }
.lv-list__v.is-soft { color: var(--gold-700); }
.lv-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
}
.lv-steps li { position: relative; padding-top: 28px; border-top: var(--hairline); }
.lv-steps li::before {   /* a gold square on the rule — marker, never fill */
  content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; background: var(--gold);
}
.lv-steps h3 { margin: 0 0 8px; color: var(--green); }
.lv-steps p { margin: 0; color: var(--muted); text-wrap: pretty; }
@media (max-width: 1080px) {
  .lv-terms, .lv-cols { margin-bottom: 64px; }
  .lv-cols { grid-template-columns: minmax(0, 1fr); }
  .lv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 720px) {
  .lv-steps { grid-template-columns: minmax(0, 1fr); }
  .lv-list li { flex-direction: column; gap: 4px; }
}

.tr-list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.tr-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 0; border-bottom: var(--hairline); }
.tr-list__k { display: flex; flex-direction: column; gap: 4px; }
.tr-list__k .t-h4 { color: var(--green); }
.tr-list__line { color: var(--muted); }
.tr-list__v { flex: none; color: var(--gold-700); letter-spacing: .16em; text-transform: uppercase; }
.loc-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.loc-days h3 { margin: 0 0 10px; color: var(--green); }
.loc-days p { margin: 0; color: var(--muted); text-wrap: pretty; }
@media (max-width: 1080px) { .loc-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .loc-days { grid-template-columns: minmax(0, 1fr); } }

/* ── Long-stay hero, the client's (2026-10-06) ───────────────────────────
   After the client's second reference: the words on the left on ivory, the
   photograph on the right running to the page edge and the hero's full
   height under the solid nav; the client's flower behind the headline.
   Shorter on both stay pages since 2026-10-14 (.lhero--tab, below). */
.lhero {
  position: relative; overflow: hidden; background: var(--ivory);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;   /* 50 / 50, by request */
  min-height: 82svh; margin-top: 93px;
  /* inside the page frame (max 1600, by request) — the photo no longer
     bleeds to the window edge; --frame-x is read here, on the full-width
     section, where its 100% is the page */
  padding-inline: var(--frame-x);
}
.lhero__flower {
  position: absolute; z-index: 0; pointer-events: none;
  width: clamp(280px, 30vw, 500px); left: calc(-1 * clamp(80px, 8vw, 150px)); top: clamp(-40px, -2vw, 0px);
  opacity: .85;
}
.lhero__text {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(56px, 6vw, 96px) clamp(32px, 3.6vw, 64px) clamp(56px, 6vw, 96px) 0;
}
.lhero__title { margin: 0; color: var(--green); }
.lhero__title em { font-style: italic; }
/* TWO LINES, always (2026-10-13, by request): each sentence a line that never
   wraps, the size held to the column — a line is ~8.1em wide, so beside the
   photo (>1080) the h1 steps down with the window to fit (84 from ~1830 up,
   66 at 1440, 51 at 1100), and on phones to 10vw (39 at 390). Tablets keep
   the scale's 64, full width. */
.lhero__line { display: block; white-space: nowrap; }
@media (min-width: 1081px) { .lhero__title { font-size: min(var(--size-84), 4.6vw); } }
@media (max-width: 720px)  { .lhero__title { font-size: min(var(--size-48), 10vw); } }
/* daily's headline (2026-10-14, its copy of before): two lines too, the
   longer one ~9.8em, so a step smaller to fit the same column */
@media (min-width: 1081px) { .lhero__title--long { font-size: min(var(--size-84), 3.7vw); } }
@media (max-width: 720px)  { .lhero__title--long { font-size: min(var(--size-48), 8.2vw); } }
.lhero__media { position: relative; margin: 0; min-height: 420px; }
/* the photograph runs to the window's edge (by request) while the words
   stay on the page frame: --frame-vw, the 100vw measure, for a child that
   bleeds out of the section's padding */
.lhero__media { margin-right: calc(-1 * var(--frame-vw)); }
.lhero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1080px) {
  .lhero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .lhero__text { padding: 56px 0 48px; }
  .lhero__media { min-height: 0; aspect-ratio: 4 / 3; margin: 0 calc(-1 * var(--frame-vw)); }
}
@media (max-width: 720px) {
  .lhero { margin-top: 64px; }
  .lhero__flower { width: 220px; left: -70px; top: -20px; }
}

/* Why Sovana — the client's design (2026-10-07): four link cards, white
   lifted (the day cards' dress), the whole card the link. FOUR ACROSS in one
   row on desktop (by request), two at 721–1080 — inside, ONE column (by
   request): the round ivory icon tile with the chevron at the right on its
   row, then — spaced between, so every card's copy ends on one line — the
   figure, the gold label, the line. On phones one a row, laid sideways as the
   client's mockup: figure · label · line | tile | chevron. Hover: the ring
   steps up, the chevron moves 4px. */
.reasons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.reasons > li { display: flex; }
.reason {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "ico chev" "n n" "label label" "line line";
  padding: clamp(24px, 2.6vw, 40px); color: inherit; text-decoration: none;
  transition: box-shadow var(--dur-quick) var(--ease-out);
}
.reason__text { display: contents; }
.reasons__n { grid-area: n; align-self: end; margin-top: 48px; display: block; color: var(--green); }
.reason__label { grid-area: label; display: block; margin: 16px 0 10px; color: var(--gold-700); text-wrap: balance; }
.reason__line { grid-area: line; display: block; color: var(--muted); text-wrap: balance; }
.reason__ico {
  grid-area: ico; display: grid; place-items: center; width: clamp(44px, 3.4vw, 56px); aspect-ratio: 1;
  border-radius: 50%; background: var(--ivory); color: var(--gold-700);
}
.reason__ico svg { width: 46%; height: auto; }
.reason__chev { grid-area: chev; justify-self: end; align-self: center; width: 22px; height: 22px; color: var(--gold-700); transition: translate var(--duration) var(--ease-out); }
.reason:hover, .reason:focus-visible { box-shadow: 0 0 0 1px rgba(14, 43, 33, .16), var(--shadow-card); }
.reason:hover .reason__chev, .reason:focus-visible .reason__chev { translate: 4px 0; }
@media (max-width: 1080px) { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .reasons { grid-template-columns: minmax(0, 1fr); }
  .reason {
    grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: none; grid-template-areas: none;
    align-items: center; column-gap: 14px; padding: 24px 20px;
  }
  .reason__text { display: block; }
  .reason__ico, .reason__chev { grid-area: auto; }
  .reasons__n { margin-top: 0; }
  .reason__label { margin: 12px 0 10px; }
  .reason__ico { width: 48px; }
  .reason__chev { width: 18px; height: 18px; }
}
/* ── Four reasons with a title in place of the figure (long stay, 2026-10-13,
   the client's copy) — the title takes the figure's place, the line follows. */
.reasons--titled .reason { grid-template-rows: auto auto 1fr; grid-template-areas: "ico chev" "n n" "line line"; }
.reasons--titled .reasons__n { align-self: start; margin-top: 40px; text-wrap: balance; }
.reasons--titled .reason__line { margin-top: 10px; }
@media (max-width: 720px) {
  .reasons--titled .reason { grid-template-rows: none; grid-template-areas: none; }
  .reasons--titled .reasons__n { margin-top: 0; }
}

/* ── What we are / what we are not (long stay, 2026-10-13) — the Living
   section's two lifted cards under a centred head. */
.stay-what .sec-head { margin-bottom: var(--head-gap); }
.stay-what .lv-cols { margin-bottom: 0; }
.stay-what .lv-card h3 { margin-bottom: 14px; }
.stay-what .lv-card p { margin: 0; color: var(--muted); text-wrap: pretty; }

/* ── Comparing options? (long stay, 2026-10-13) — under the compare table,
   centred, a hairline above; the client's words. */
.cmp-note {
  max-width: 760px; margin: 64px auto 0; padding-top: 48px; border-top: var(--hairline);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.cmp-note p { margin: 14px 0 0; color: var(--ink); text-wrap: balance; }
@media (max-width: 720px) { .cmp-note { margin-top: 48px; padding-top: 40px; } }


/* ══ RE-LAYOUT, 2026-10-14 — the client's mockup, in Sovana's dress ═════════
   Both stay pages: a shorter split hero, then ONE bar with Daily · Residence
   TABS (links — the tab marks the page you are on), then five compact cards
   in a row. Daily: a location card beside a green WhatsApp panel. Long: an
   "Included" strip, the location card beside getting around.
   Square, sentence case, no arrows — the mockup's caps, pills and arrows are
   not Sovana's. */

/* ── The hero, shorter: the bar shows on the first screen ─────────────── */
.lhero--tab { min-height: clamp(420px, 56svh, 600px); }
.lhero--tab .lhero__text { padding-block: clamp(48px, 5vw, 80px); }
/* the copy of before (2026-10-14, by request): the lede and the long page's
   note (its two hero buttons taken out the same day, by request) */
.lhero__lede { margin: 28px 0 0; max-width: 42ch; color: var(--muted); text-wrap: pretty; }
.lhero__note { margin: 28px 0 0; color: var(--muted); }
/* the photograph fades into the ivory on its left edge (the mockup's) */
.lhero--tab .lhero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--ivory) 0%, rgba(252, 251, 248, 0) 32%);
}
@media (max-width: 1080px) {
  .lhero--tab .lhero__media { aspect-ratio: 16 / 9; }
  .lhero--tab .lhero__media::after { background: linear-gradient(to bottom, var(--ivory) 0%, rgba(252, 251, 248, 0) 24%); }
}

/* ── The section under the hero: the bar, the head, the cards ─────────── */
.stay-top { padding-top: 32px; }
.stay-top .book--inline { margin-bottom: clamp(56px, 6vw, 88px); }

/* ── The bar's tabs (.book--tabs): Daily · Residence ──────────────────── */
.book__tabs { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px; border-right: var(--hairline); }
.book__tab {
  display: flex; align-items: center; gap: 12px; min-width: 168px; padding: 0 20px;
  color: var(--green); text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(14, 43, 33, .28);   /* the buttons' outline */
  transition: background-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out);
}
.book__tab .book__ico { color: inherit; }
.book__tab:hover { background: rgba(14, 43, 33, .04); }
.book__tab:focus-visible { outline: 2px solid var(--gold-700); outline-offset: 3px; }
.book__tab.is-on { background: var(--green); color: var(--ivory); box-shadow: none; cursor: default; }
.book__tabsub { color: var(--muted); }
.book__tab.is-on .book__tabsub { color: rgba(252, 251, 248, .72); }
.book--tabs .book__field { min-width: 160px; flex-basis: 160px; padding-inline: 20px; }
/* below 1280 the tabs take a row of their own, the fields fill the next */
@media (max-width: 1280px) {
  .book__tabs { flex: 1 1 100%; border-right: 0; border-bottom: var(--hairline); }
  .book__tab { flex: 1; min-height: 52px; }
}
@media (max-width: 720px) {
  .book__tabs { gap: 8px; padding: 10px; }
  .book__tab { min-width: 0; padding: 0 12px; gap: 10px; }
  /* the long bar's lists ("Select month", "3 months") a row each: two to a
     row broke them onto two lines */
  .book[data-wa-quote] .book__field { flex-basis: 100%; }
}

/* ── The five residences, compact, in one row (.scard) ────────────────── */
.scards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.scard {
  display: flex; flex-direction: column; background: var(--white);
  box-shadow: 0 0 0 1px var(--hairline-color), var(--shadow-card);
}
.scard__body { flex: 1; display: flex; flex-direction: column; padding: 20px 20px 18px; }
.scard__name { margin: 0; color: var(--green); font-size: var(--size-24); }   /* five across: a step under .t-h4's 28 */
.scard__specs { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--muted); }
.scard__specs li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.scard__specs .spec__ico { width: 16px; height: 16px; }
.scard__foot { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.scard__price { margin: 0; display: flex; align-items: baseline; gap: 6px; color: var(--green); white-space: nowrap; }
.scard__price .t-caption { color: var(--muted); }
.scard__desc { margin: 14px 0 0; color: var(--muted); text-wrap: pretty; }
.scard__label { display: block; width: 100%; margin-bottom: 4px; color: var(--muted); }
.scard__price:has(.scard__label) { flex-wrap: wrap; }
.scard .unit__more { margin-top: 0; }
/* the four media along the foot, under a hairline, spread across */
.scard__acts { justify-content: space-between; gap: 4px 6px; margin: 0; padding: 10px 16px 12px; border-top: var(--hairline); }
@media (max-width: 1439px) { .scards { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 1080px) { .scard__name { font-size: var(--fs-h4); } }
@media (max-width: 900px)  { .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .scards { grid-template-columns: minmax(0, 1fr); row-gap: 48px; } }
/* Compare, under the long page's head note */
.stay-cmp { display: inline-block; margin-top: 14px; }

/* ── What is included (long), one strip under the cards ───────────────── */
.incl {
  list-style: none; margin: 40px 0 0; padding: 0; display: flex; background: var(--white);
  box-shadow: 0 0 0 1px var(--hairline-color), var(--shadow-card);
}
.incl li { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px 14px; color: var(--muted); text-align: left; }
.incl li + li { border-left: var(--hairline); }
.incl svg { width: 22px; height: 22px; flex: none; color: var(--gold-700); }
.incl .incl__head { flex: 0 0 auto; padding-inline: 28px; color: var(--green); }
@media (max-width: 1280px) {
  .incl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .incl .incl__head { grid-column: 1 / -1; justify-content: flex-start; border-bottom: var(--hairline); }
  .incl li + li { border-left: 0; }
  .incl li:not(.incl__head) { justify-content: flex-start; }
}
@media (max-width: 720px) { .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── The location card (.loccard): the LIVE From above 360° with its pins
   (2026-10-14, by request — a flat still of it for an hour first), the
   whole card. Its copy sits on a white gradient rising from the foot (by
   request: "gradient kayak sebelumnya, di bawah untuk headline") — the
   chips are laid out clear of it (drone.js obstacles). Not a link: a drag
   on the panorama turns the view; "Location & 360°" goes to the page. ── */
.loccard {
  position: relative; overflow: hidden; background: var(--white);
  box-shadow: 0 0 0 1px var(--hairline-color), var(--shadow-card);
}
.loccard__media { position: relative; margin: 0; height: clamp(440px, 34vw, 560px); }
/* the 360° fills the card — not the section's full bleed, not 85 of the
   screen; the preview is the scene's own opening view */
.drone--card .drone__stage { position: relative; margin: 0; }   /* the stage IS the picture */
.drone--card .drone__frame { position: absolute; inset: 0; height: auto; background-image: url("../assets/site/drone-still.jpg"); }
.drone--card .pnlm-controls-container { top: 12px; right: 12px; }
/* the pins a size under the tablet's: a card is a small frame on any screen */
.drone--card .drone-pin__name { font-size: var(--size-11); }
.drone--card .drone-pin__label { gap: 7px; padding: 6px 11px; }
.drone--card .drone-pin__icon { width: 14px; height: 14px; margin-right: -2px; }
.drone--card .drone-pin--own .drone-pin__label { gap: 9px; padding: 8px 12px 8px 15px; }
.drone--card .drone-pin--own .drone-pin__icon { width: 15px; height: 15px; padding-left: 9px; }
.drone--card .drone-pin__dot { left: -4.5px; top: -4.5px; width: 9px; height: 9px; }
/* the copy over the foot: white, fading up into the picture; it lets the
   drag through everywhere but its link */
.loccard__text {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  padding: 96px clamp(24px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  background: linear-gradient(to top, var(--white) 0%, var(--white) 38%, rgba(255, 255, 255, .78) 64%, rgba(255, 255, 255, 0) 100%);
}
.loccard__copy { display: flex; flex-direction: column; align-items: flex-start; }
.loccard__title { margin: 8px 0 0; color: var(--green); text-wrap: balance; }
/* the site's eyebrow rule pulls a title up 10px against an 18px gap this
   column does not have: here the title sits its own 8px under the eyebrow */
.loccard .eyebrow.eyebrow + .loccard__title { margin-top: 8px; }
.loccard__row { align-self: stretch; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; margin-top: 14px; }
.loccard__malls { margin: 0; color: var(--muted); }
.loccard__more { margin-top: 0; text-decoration: none; pointer-events: auto; }
/* phones: the card's 360° portrait, as the 360° is everywhere on a phone —
   the lens narrows (drone.js caps it on tall frames) and opens on Sovana */
@media (max-width: 720px) {
  .loccard__media { height: auto; aspect-ratio: 4 / 5; }
  .loccard__text { padding-top: 72px; }
}

/* ── Daily: the location card beside the green WhatsApp panel ─────────── */
.stay-duo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
.wacard {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(28px, 3vw, 48px); background: var(--green); color: var(--ivory);
}
.wacard__title { margin: 8px 0 0; color: var(--ivory); }
.wacard__line { margin: 14px 0 28px; color: rgba(252, 251, 248, .78); text-wrap: balance; }
@media (max-width: 1080px) {
  .stay-duo { grid-template-columns: minmax(0, 1fr); }
}


/* ── Long: the location card beside getting around ────────────────────── */
.loc2 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); align-items: start; margin-bottom: 100px; }
.loc2__around .eyebrow { display: block; margin-bottom: 20px; }
/* long: the section head already names it — the card's copy is the row alone */
.loc2 .loccard__copy > .eyebrow, .loc2 .loccard__title { display: none; }
.loc2 .loccard__row { margin-top: 0; }
.loc2 .loccard__text { padding-top: 56px; }
@media (max-width: 1080px) { .loc2 { grid-template-columns: minmax(0, 1fr); margin-bottom: 64px; } }