/* v984 city page UX (loaded last). Same strong selector as the v779 phone styles so these rules win:
   1 phone bars slide away while scrolling down, 3 History/Geography "Read more", 4 "At a glance" open,
   6 date fields fit on phones, + text-only tourist place cards (no photos). */

/* ---------- 1. phones: more room while reading ---------- */
@media (max-width: 900px) {
  html body[data-lead-page="city"].city-linked-page.city-linked-page .cp-sticky-tabs,
  html body[data-lead-page="city"].city-linked-page.city-linked-page .cp779-bar {
    transition: transform .25s ease, opacity .2s ease;
    will-change: transform;
  }
  html body.cp984-down[data-lead-page="city"].city-linked-page.city-linked-page .cp-sticky-tabs {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
  }
  html body.cp984-down[data-lead-page="city"].city-linked-page.city-linked-page .cp779-bar {
    transform: translateY(calc(100% + 80px));
    opacity: 0;
    pointer-events: none;
  }
  /* a tab jump lands the heading just under the header and the tabs */
  html body[data-lead-page="city"].city-linked-page.city-linked-page .cp-section { scroll-margin-top: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  html body[data-lead-page="city"].city-linked-page.city-linked-page .cp-sticky-tabs,
  html body[data-lead-page="city"].city-linked-page.city-linked-page .cp779-bar { transition: none; }
}

/* ---------- 3. History / Geography: a few lines + "Read more" (JS adds the class; no JS = full text) ---------- */
.cp984-clamp { max-height: 230px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.cp984-clamp.cp984-open { max-height: none; -webkit-mask-image: none; mask-image: none; }
.cp984-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 9px 16px; min-height: 40px;
  border: 1px solid #E0D5C2; border-radius: 999px; background: #fff; color: #A63F00; font: 600 14px/1 Inter, Arial, sans-serif; cursor: pointer; }
.cp984-more:after { content: '↓'; font-size: 13px; }
.cp984-more[aria-expanded="true"]:after { content: '↑'; }
.cp984-more:hover { border-color: #F56A00; }
.cp984-more:focus-visible { outline: 3px solid #E77524; outline-offset: 3px; }

/* ---------- 4. "At a glance": always open, label on top, text below (no + / − toggle) ---------- */
html body #cityQuickFacts .cp922-editor details.cp984-fact > summary { cursor: default; min-height: 0; padding: 0; pointer-events: none; }
html body #cityQuickFacts .cp922-editor details.cp984-fact > summary:after { content: none !important; display: none !important; }
html body #cityQuickFacts .cp922-editor details.cp984-fact > summary strong,
html body #cityQuickFacts .cp922-editor details.cp984-fact > summary b { font-weight: 700; color: #062B5C; }
html body #cityQuickFacts .cp922-editor details.cp984-fact .cp922-answer { display: block !important; margin-top: 2px; color: #33414E; }
html body #cityQuickFacts .cp922-editor li.cp922-accordion-item { padding-top: 12px !important; padding-bottom: 12px !important; }

/* ---------- 6. phones: check-in / check-out dates fit ("08/11/20" was cut) ---------- */
@media (max-width: 480px) {
  /* tested at 375px: dates 95px, guests 71px - "08/11/2026", "09/11/2026" and "2 guests" all fit */
  html body .ys819-card .ys819-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) !important; }
  html body .ys819-card .ys819-row > * { padding-left: 9px !important; padding-right: 9px !important; }
  html body .ys819-card .ys819-row input[type="date"] { letter-spacing: -.3px; min-width: 0; width: 100%; }
  html body .ys819-card .ys819-row input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
  html body .ys819-card .ys819-row input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}

/* ---------- tourist place cards: text only, no photos ---------- */
.cp984-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0 14px; }
.cp984-pl { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 196px; padding: 18px 18px 16px;
  border: 1px solid #E8DFD0; border-radius: 16px; background: linear-gradient(180deg, #FFFDF9 0%, #FBF5EA 100%);
  color: #062B5C; text-decoration: none !important; overflow: hidden; isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cp984-pl:before { /* a soft saffron arc in the corner: colour without a photo */
  content: ""; position: absolute; right: -46px; top: -46px; width: 128px; height: 128px; border-radius: 50%;
  border: 14px solid rgba(245, 106, 0, .08); z-index: -1; }
a.cp984-pl:hover { transform: translateY(-2px); border-color: #F2C594; box-shadow: 0 12px 26px -14px rgba(6, 43, 92, .35); }
a.cp984-pl:focus-visible { outline: 3px solid #E77524; outline-offset: 3px; }
.cp984-pl-top { display: flex; align-items: center; gap: 10px; }
.cp984-pl-ico { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #062B5C; color: #FFC27A; }
.cp984-pl[data-kind="hill"] .cp984-pl-ico, .cp984-pl[data-kind="nature"] .cp984-pl-ico { background: #1F5B46; color: #FFD9A0; }
.cp984-pl[data-kind="water"] .cp984-pl-ico { background: #0E5A78; color: #CFEFFF; }
.cp984-pl[data-kind="place"] .cp984-pl-ico { background: #A63F00; color: #FFE3C4; }
.cp984-pl-kind { font: 700 11.5px/1.2 Inter, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #A63F00; }
.cp984-pl-num { margin-left: auto; font: 600 13px/1 Inter, Arial, sans-serif; color: #B9A88F; letter-spacing: .04em; }
.cp984-pl-name { display: block; margin-top: 4px; font: 600 21px/1.2 Fraunces, Georgia, serif; color: #062B5C; }
.cp984-pl-blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 400 14.5px/1.5 Inter, Arial, sans-serif; color: #4A5966; }
.cp984-pl-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.cp984-pl-meta > span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: #fff; border: 1px solid #EADFCD; font: 500 12.5px/1.3 Inter, Arial, sans-serif; color: #33414E; white-space: nowrap; }
.cp984-pl-dist:before { content: ""; width: 9px; height: 9px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #F56A00; }
.cp984-pl-time:before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #062B5C; box-sizing: border-box; }
.cp984-pl-go { font: 700 13.5px/1 Inter, Arial, sans-serif; color: #A63F00; }
.cp984-pl-meta + .cp984-pl-go { margin-top: 2px; }
.cp984-pl-blurb + .cp984-pl-go, .cp984-pl-name + .cp984-pl-go { margin-top: auto; }
.cp984-pl--plain { min-height: 0; }
/* the main temple: a little more presence, still no photo */
.cp984-places > .cp984-pl:first-child { background: linear-gradient(160deg, #062B5C 0%, #0D3F80 100%); border-color: #062B5C; color: #fff; }
.cp984-places > .cp984-pl:first-child .cp984-pl-name { color: #fff; }
.cp984-places > .cp984-pl:first-child .cp984-pl-blurb { color: #DCE6F2; }
.cp984-places > .cp984-pl:first-child .cp984-pl-kind { color: #FFB066; }
.cp984-places > .cp984-pl:first-child .cp984-pl-num { color: #8FA7C6; }
.cp984-places > .cp984-pl:first-child .cp984-pl-ico { background: #F56A00; color: #fff; }
.cp984-places > .cp984-pl:first-child .cp984-pl-meta > span { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff; }
.cp984-places > .cp984-pl:first-child .cp984-pl-time:before { border-color: #FFB066; }
.cp984-places > .cp984-pl:first-child .cp984-pl-go { color: #FFB066; }
.cp984-places > .cp984-pl:first-child:before { border-color: rgba(255, 176, 102, .16); }

@media (max-width: 1100px) { .cp984-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  /* phones: a compact list - icon on the left, two lines of text, about half the height of the old photo cards */
  .cp984-places { grid-template-columns: 1fr; gap: 10px; margin: 14px 0 12px; }
  .cp984-pl { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; min-height: 0; padding: 14px 14px 13px; border-radius: 14px; }
  .cp984-pl-top { display: contents; }
  .cp984-pl-ico { grid-column: 1; grid-row: 1 / span 4; align-self: start; width: 44px; height: 44px; }
  .cp984-pl-kind { grid-column: 2; grid-row: 1; font-size: 11px; }
  .cp984-pl-num { position: absolute; right: 14px; top: 14px; font-size: 12px; }
  .cp984-pl-name { grid-column: 2; margin-top: 0; font-size: 18px; padding-right: 22px; }
  .cp984-pl-blurb { grid-column: 2; font-size: 14px; }
  .cp984-pl-meta { grid-column: 2; padding-top: 2px; padding-right: 22px; }
  .cp984-pl-go { display: none; }
  a.cp984-pl:after { content: "→"; position: absolute; right: 14px; bottom: 13px; font: 700 15px/1 Inter, Arial, sans-serif; color: #A63F00; }
  .cp984-places > a.cp984-pl:first-child:after { color: #FFB066; }
}