/* The Pearl Edition - shared stay cards + expanded hotel reader */
.stay-sec { padding: 88px clamp(24px,5vw,80px) 64px; background: var(--white); overflow: hidden; }
.stay-row { display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px 0 16px; scrollbar-width: none; -ms-overflow-style: none; }
.stay-row::-webkit-scrollbar { display: none; }
.stay-card2 { --card-gap: 14px; flex: 0 0 268px; scroll-snap-align: start; scroll-snap-stop: always; }
.stay-img2 { aspect-ratio: 4/5; background-size: cover; background-position: center; border-radius: var(--image-card-radius); box-shadow: 0 8px 24px rgba(26,26,23,0.06); margin-bottom: 18px; transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
.stay-card2:hover .stay-img2 { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(26,26,23,0.1); }
.stay-name2 { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 8px; line-height: 1.2; }
.stay-rating { display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.stay-rating .stars { color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.stay-rating .src { font-size: 10px; font-weight: 500; color: var(--ink-40); text-transform: uppercase; letter-spacing: 0.04em; }
.stay-desc2 { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--ink-70); margin-bottom: var(--card-gap); }
.stay-facts { margin-bottom: var(--card-gap); border-top: 1px solid rgba(201,168,108,0.25); padding-top: var(--card-gap); }
.stay-fact { margin-bottom: var(--card-gap); }
.stay-fact:last-child { margin-bottom: 0; }
.stay-fact-k { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); display: block; margin-bottom: 3px; }
.stay-fact-v { font-family: var(--sans); font-size: 12.5px; color: var(--ink-70); line-height: 1.5; }
/* Four lines. Longest of the 124 descriptions is 152 characters, so at
   desktop column width nothing truncates; on narrower cards the tail is
   cut and Read more opens the full copy. min-height equals the clamp so
   short and long descriptions settle on the same box height. */
.stay-desc-txt { display: -webkit-box; min-height: 6.4em; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
/* Read more is a text link, not a button. The card already carries one
   gold pill (Add to my trip); a second filled pill competed with it. */
.stay-more { position: relative; z-index: 2; display: inline-flex; align-items: center; margin-top: 12px; white-space: nowrap; font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--gold-ink); background: transparent; border: 0; padding: 0; text-decoration: none; cursor: pointer; transition: color .22s ease; }
.stay-more:hover { color: var(--gold-dim); text-decoration: none; }
.stay-price-row { display: flex; align-items: baseline; gap: 7px; margin-bottom: var(--card-gap); }
.stay-price-k { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); }
.stay-price-v { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--ink); line-height: 1; }
.stay-price-u { font-family: var(--sans); font-size: 11px; color: var(--ink-40); }
.stay-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.stay-more .arw { display: inline-block; margin-left: 5px; transition: transform .22s ease; }
.stay-more:hover .arw { transform: translateX(3px); }
@media (max-width: 760px) {
  .stay-row { margin: 0 -22px; padding: 24px 22px 16px; gap: 20px; scroll-padding-left: 22px; }
  .stay-card2 { flex: 0 0 78vw; }
  .stay-img2 { aspect-ratio: 1/1; }
  /* The 4-line reserve exists to level card bottoms across a desktop row.
     Here the cards are a swipe rail seen one at a time, so it only leaves a
     blank line between a 3-line description and Read more. Clamp stays at 4
     so nothing extra gets cut; the reserve goes, and the 12px margin on
     .stay-more becomes the whole gap. */
  .stay-desc-txt { min-height: 0; }
}
/* Hotel story - expands inline within the page flow, directly below the row */
.hotel-reader { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.2,0.7,0.2,1), opacity 0.4s ease; }
.hotel-reader.open { opacity: 1; }
.hotel-reader-inner { max-width: 780px; margin: 0 auto; }
.hotel-reader.open .hotel-reader-inner { margin-top: 40px; padding-bottom: 72px; }
.hotel-reader-close { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-40); background: none; border: none; padding: 0; cursor: pointer; margin-bottom: 28px; }
.hotel-reader-close:hover { color: var(--ink); }
.hotel-reader-name { font-family: var(--serif); font-size: clamp(30px,4.6vw,44px); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); margin: 0; max-width: 16ch; }
.hr-hood { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); margin: 16px 0 0; }
.hr-lede { font-family: var(--serif); font-size: clamp(21px,2.7vw,27px); font-weight: 300; line-height: 1.45; color: var(--gold-dim); margin: 28px 0 0; max-width: 34ch; }
.hr-carousel { margin: 40px 0 0; }
.hr-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hr-track::-webkit-scrollbar { display: none; }
/* Was 1/1 — a full-width square is 780px tall on desktop and swallows the
   screen. 3/2 is the editorial ratio used elsewhere on the site. */
.hr-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; aspect-ratio: 3/2; background-size: cover; background-position: center; border-radius: var(--image-card-radius); }
.hr-dots { display: flex; justify-content: center; gap: 7px; margin-top: 18px; }
.hr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-15); border: 0; padding: 0; cursor: pointer; transition: background .25s ease, width .25s ease; }
.hr-dot.on { background: var(--gold-dim); width: 20px; border-radius: 99px; }
.hr-body { margin-top: 44px; }
.hotel-reader-intro { font-family: var(--sans); font-size: 14.5px; line-height: 1.85; color: var(--ink-70); margin: 0 0 20px; }
.hr-heading { font-family: var(--serif); font-size: 20px; font-style: italic; font-weight: 400; color: var(--ink); margin: 38px 0 14px; }
.hr-know { margin: 52px 0 0; }
.hr-know-label { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); margin: 0; }
.hr-know-rule { height: 1px; background: var(--ink-10); margin: 16px 0 0; }
.hr-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.hr-cell { padding: 26px 26px 26px 0; border-right: 1px solid var(--ink-06); }
.hr-cell:last-child { border-right: 0; padding-right: 0; }
.hr-cell:not(:first-child) { padding-left: 26px; }
.hr-fact-k { display: block; font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); margin: 0 0 9px; }
.hr-fact-v { font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.35; color: var(--ink); margin: 0; }
.hr-foot { margin: 56px 0 0; border-top: 1px solid var(--ink-10); padding-top: 26px; }
.hr-foot-price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 14px; }
.hr-foot-k { font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); }
.hr-foot-v { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ink); }
.hr-foot-u { font-family: var(--sans); font-size: 11px; color: var(--ink-40); }
.hr-foot-btns { display: block; }
.hr-foot-btns .stay-itin { display: inline-flex; width: auto; }
.hr-foot-btns .stay-sub2 { text-align: left; }
.hr-foot-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--gold); border-radius: 99px; padding: 13px 24px; text-decoration: none; transition: background .25s ease; }
.hr-foot-btn:hover { background: rgba(201,168,108,0.12); }
.stay-price-row.on-request .stay-price-k, .stay-price-row.on-request .stay-price-u { display: none; }
.stay-price-row.on-request .stay-price-v { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink-70); letter-spacing: 0.01em; }
.hr-foot-price.on-request .hr-foot-k, .hr-foot-price.on-request .hr-foot-u { display: none; }
.hr-foot-price.on-request .hr-foot-v { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-70); }
.hr-foot-note { font-family: var(--sans); font-size: 10.5px; line-height: 1.55;
  color: var(--ink-40); margin: 14px auto 0; max-width: 46ch; text-align: center; }
@media (max-width: 760px) {
  .hotel-reader-inner { padding: 0 20px; }
  .hr-track { margin: 0 -20px; padding: 0 20px; }
  .hr-facts { grid-template-columns: 1fr; }
  .hr-cell { border-right: 0; border-bottom: 1px solid var(--ink-06); padding: 22px 0; }
  .hr-cell:not(:first-child) { padding-left: 0; }
  .hr-foot-btns .stay-itin { display: block; width: 100%; text-align: center; }
  .hr-foot-btns .stay-sub2 { text-align: center; }
  /* the square was worst on a phone — 3/2 keeps the panel scannable */
  .hr-slide { aspect-ratio: 3/2; }
}

/* ═══════════════════════════════════════════════════════════════════
   ONE ACTION PER CARD
   Three buttons became two became one. The gold pill builds the trip;
   the partners sit beneath as plain text so the card reads as ours.
═══════════════════════════════════════════════════════════════════ */
.stay-book-row { display:block; }

.stay-itin {
  /* Matches .dest-cta / .xp-cta exactly — the established in-card action
     style. Was previously the section-level primary (gold fill, .16em,
     full width), which made it the largest element on the card. */
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); background: transparent;
  border: 1px solid var(--gold); border-radius: var(--r-pill);
  padding: 11px 17px; white-space: nowrap; flex: 0 0 auto;
  cursor: pointer; transition: background .25s ease, gap .25s ease;
}
.stay-itin:hover { background: var(--gold-soft); }
.stay-itin:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Selected: gold-soft fill, identical geometry so the card never reflows. */
.stay-itin[data-added="1"] { background: var(--gold-soft); color: var(--gold-ink); }

.stay-sub2 {
  margin:11px 0 0;
  font-family:var(--sans); font-size:11px; font-weight:300;
  color:var(--paper-mid); line-height:1.6;
}
.stay-alt { color:var(--paper-dim); text-decoration:none; border-bottom:1px solid var(--ink-15); }
.stay-alt:hover { color:var(--gold-ink); border-bottom-color:var(--gold); }
.stay-alt[hidden] { display:none; }
/* The connector belongs to the link that follows it. affiliate.js hides the
   Agoda button for any town it has no city slug for, which used to leave a
   trailing "or" with nothing after it. */
.stay-or:has(.stay-alt[hidden]) { display: none; }


/* The card row was bounded by the section's inner padding, so on desktop a
   card was sliced by a straight line ~80px in from the screen edge with dead
   canvas beyond it. Mobile already ran edge to edge (see the 760px rule
   above); this gives desktop the same treatment — pulled out to full width,
   with the padding put back inside so the first card still lines up under
   the heading.

   .stay-sec keeps overflow:hidden, which clips at its border box — the full
   width — so this widens the row without introducing a horizontal scrollbar
   on the page. */
@media (min-width: 761px) {
  .stay-row {
    margin-left: calc(-1 * clamp(24px, 5vw, 80px));
    margin-right: calc(-1 * clamp(24px, 5vw, 80px));
    padding-left: clamp(24px, 5vw, 80px);
    padding-right: clamp(24px, 5vw, 80px);
    scroll-padding-left: clamp(24px, 5vw, 80px);
  }
}