/* Two composition modes for every Place page: mobile through 900px, desktop
   from 901px. This final shared layer overrides older page-local fallbacks. */

/* Keep MANNA's inline setting facts out of the compact interface-label role. */
@layer qc-type-roles {
  html body main.qc-place .stay-intro__facts .practical__grid .facts-tag {
    font-family: Newsreader, Georgia, serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
}

html body main.qc-place .stay-intro .facts-booking__button.facts-booking__button--primary {
  background: #ded2c2 !important;
  border-color: rgba(73, 55, 41, .32) !important;
  color: #493729 !important;
}
html body main.qc-place .stay-intro .facts-booking__button.facts-booking__button--primary:is(:hover, :focus-visible) {
  background: #d5c6b3 !important;
  border-color: rgba(73, 55, 41, .42) !important;
  color: #493729 !important;
}

@media (min-width: 901px) {
  html body main.qc-place .location-note__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
    gap: clamp(24px, 4vw, 64px) !important;
    align-items: stretch !important;
  }
  html body main.qc-place .location-note__map {
    align-self: stretch !important;
    height: auto !important;
    min-height: 400px !important;
  }
  html body main.qc-place .location-note__body {
    align-self: stretch !important;
  }
  html body main.qc-place .elsewhere {
    --elsewhere-gutter: var(--qc-article-text-gutter, clamp(40px, 4vw, 64px));
  }
  html body main.qc-place .elsewhere .elsewhere__list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  html body main.qc-place .elsewhere .elsewhere__card {
    display: grid !important;
    flex: initial !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    height: clamp(420px, 30vw, 460px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html body main.qc-place .elsewhere .elsewhere__media {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  html body main.qc-place .elsewhere .elsewhere__copy {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(34px, 5vw, 76px) !important;
  }
  html body main.qc-place .elsewhere .manna-preview-description--full {
    display: inline !important;
  }
  html body main.qc-place .elsewhere .manna-preview-description--mobile {
    display: none !important;
  }
}

/* Desktop article grid: copy follows one calm outer measure while the
   photographs in side columns meet the physical viewport edge. */
@media (min-width: 981px) {
  html body main.qc-place {
    --qc-article-text-gutter: clamp(40px, 4vw, 64px);
    --qc-side-image-bleed: var(--qc-article-text-gutter);
    --qc-article-image-bleed: max(
      40px,
      4vw,
      calc((100vw - 1440px) / 2)
    );
    --qc-desktop-rules-image: linear-gradient(
      to right,
      transparent 0,
      transparent calc(25% - .5px),
      rgba(21, 35, 28, .05) calc(25% - .5px),
      rgba(21, 35, 28, .05) calc(25% + .5px),
      transparent calc(25% + .5px),
      transparent calc(50% - .5px),
      rgba(21, 35, 28, .05) calc(50% - .5px),
      rgba(21, 35, 28, .05) calc(50% + .5px),
      transparent calc(50% + .5px),
      transparent calc(75% - .5px),
      rgba(21, 35, 28, .05) calc(75% - .5px),
      rgba(21, 35, 28, .05) calc(75% + .5px),
      transparent calc(75% + .5px),
      transparent 100%
    );
    background-image: var(--qc-desktop-rules-image) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: min(1440px, calc(100vw - 2 * var(--qc-article-text-gutter))) 100% !important;
  }
  html body main.qc-place .quiet-story {
    background-image: var(--qc-desktop-rules-image) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: min(1440px, calc(100vw - 2 * var(--qc-article-text-gutter))) 100% !important;
  }
  html body main.qc-place .quiet-story {
    --article-gutter: var(--qc-article-text-gutter);
  }
  html body main.qc-place .practical__grid .facts-tags :is(.facts-taxonomy-tag, .facts-tag) {
    background: rgba(244, 241, 234, .94) !important;
  }
  html body main.qc-place :is(.facts-booking__button--secondary, .location-note__route) {
    background: rgba(244, 241, 234, .94) !important;
  }
  html body main.qc-place :is(.facts-booking__button--secondary, .location-note__route):is(:hover, :focus-visible) {
    background: rgba(232, 226, 215, .96) !important;
  }
  html body main.qc-place :is(.opening, .stay-intro, .location-note) {
    width: min(1440px, calc(100% - 2 * var(--qc-article-text-gutter))) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
  /* Keep both article text edges on the same viewport gutter. The image-side
     bleed must match this gutter, not the wider 1440px container inset. */
  html body main.qc-place :is(.after-opening-pair, .city-story) {
    width: calc(100% - 2 * var(--qc-article-text-gutter)) !important;
    max-width: none !important;
    margin-inline: auto !important;
  }
  html body main.qc-place :is(.after-opening-pair, .city-story:not(.city-story--reversed)) {
    column-gap: var(--qc-article-text-gutter) !important;
  }
  /* On image-left stories, the heading leads the single sticky copy block.
     Keep its internal gap restrained so the paragraph does not drift away. */
  html body main.qc-place .after-opening-pair .after-opening-pair__copy,
  html body main.qc-place .city-story:not(.city-story--reversed) .city-story__copy {
    column-gap: clamp(18px, 1.4vw, 24px) !important;
  }
  html body main.qc-place :is(.after-opening-pair__images, .city-story:not(.city-story--reversed) .city-story__images) {
    width: calc(100% + var(--qc-side-image-bleed));
    margin-inline-start: calc(-1 * var(--qc-side-image-bleed));
  }
  html body main.qc-place :is(.opening__media-sticky, .stay-intro__landscape-track) {
    width: calc(100% + var(--qc-article-image-bleed));
    margin-inline-end: calc(-1 * var(--qc-article-image-bleed));
  }
  html body main.qc-place .city-story--reversed .city-story__images {
    width: calc(100% + var(--qc-side-image-bleed));
    margin-inline-end: calc(-1 * var(--qc-side-image-bleed));
  }
  html body main.qc-place .location-note__map {
    width: calc(100% + var(--qc-article-image-bleed));
    margin-inline-start: calc(-1 * var(--qc-article-image-bleed));
  }
}

@media (max-width: 900px) {
  html body main.qc-place .stay-intro__facts {
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  html body main.qc-place .opening__media-left .practical__grid {
    box-sizing: border-box !important;
    width: calc(100% - 48px) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
  html body main.qc-place .elsewhere {
    --elsewhere-gutter: 20px;
    --qc-rail-inset: max(24px, var(--qc-mobile-gutter, 20px));
    padding-inline: max(24px, var(--qc-mobile-gutter, 20px)) !important;
  }
  html body main.qc-place .elsewhere .elsewhere__list {
    display: flex !important;
    flex-flow: row nowrap !important;
    width: calc(100% + var(--qc-rail-inset)) !important;
    max-width: none !important;
    gap: 16px !important;
    margin: 0 calc(-1 * var(--qc-rail-inset)) 0 0 !important;
    padding: 0 var(--qc-rail-inset) 12px 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    scroll-snap-type: x mandatory !important;
    touch-action: pan-x pan-y;
  }
  html body main.qc-place .elsewhere .elsewhere__list::-webkit-scrollbar {
    display: none !important;
  }
  html body main.qc-place .elsewhere .elsewhere__card {
    --elsewhere-card: #f1eee7;
    --elsewhere-ink: #15231c;
    display: grid !important;
    flex: 0 0 min(360px, calc(100vw - 48px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    width: min(360px, calc(100vw - 48px)) !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
  }
  html body main.qc-place .elsewhere .elsewhere__media {
    position: relative !important;
    box-sizing: content-box !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 125% 0 0 !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }
  html body main.qc-place .elsewhere .elsewhere__copy {
    align-self: stretch !important;
    padding: 24px 20px 26px !important;
  }
  html[data-qc-mobile-page] body main.qc-place .elsewhere .manna-preview-description--full {
    display: inline !important;
  }
  html[data-qc-mobile-page] body main.qc-place .elsewhere .manna-preview-description--mobile {
    display: none !important;
  }
}

@media (max-width: 580px) {
  html body main.qc-place .elsewhere {
    --elsewhere-gutter: 14px;
  }
}

/* Editorial At a glance tables only. Keep the surrounding article untouched. */
html body main.qc-place .practical__grid.qc-facts-editorial {
  box-sizing: border-box !important;
  min-width: 0;
}
html body main.qc-place .practical__grid.qc-facts-editorial > dl {
  display: grid !important;
  grid-template-columns: 118px minmax(0, 1fr) !important;
  column-gap: 20px !important;
  row-gap: 6px !important;
  margin: 0 !important;
  padding: 13px 0 !important;
  border: 0 !important;
}
html body main.qc-place .practical__grid.qc-facts-editorial > dl:first-child {
  padding-top: 0 !important;
}
html body main.qc-place .practical__grid.qc-facts-editorial > .facts-desktop-hidden {
  display: none !important;
}
html body main.qc-place .practical__grid.qc-facts-editorial > dl > :is(dt, dd) {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
html body main.qc-place .practical__grid.qc-facts-editorial > dl > dd::before {
  content: none !important;
}
html body main.qc-place .qc-facts-editorial .facts-season-note {
  display: block;
  margin-top: 3px;
  color: var(--muted, #6f716b);
}
html body main.qc-place .qc-facts-editorial .facts-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 0;
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid rgba(21, 35, 28, .12);
}
html body main.qc-place .qc-facts-editorial .facts-keywords > span + span::before {
  content: "·";
  padding-inline: 8px;
}
html body main.qc-place .qc-facts-editorial .facts-explore-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 9px;
  margin-top: 26px;
}
html body main.qc-place .qc-facts-editorial .facts-explore-link {
  grid-column: 2;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100% !important;
  min-height: 48px !important;
  padding: 13px 16px !important;
  text-decoration: none !important;
}
html body main.qc-place .qc-facts-editorial .facts-explore-link::after {
  content: none !important;
}
html body main.qc-place .qc-facts-editorial .facts-explore-icon {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body main.qc-place .qc-facts-editorial .facts-explore-hint {
  grid-column: 2;
  text-align: center;
}
@media (min-width: 981px) {
  html body main.qc-place .qc-facts-editorial .facts-keywords {
    border-top: 0;
    padding-top: 12px;
  }
}
@layer qc-type-roles {
  html body main.qc-place .practical__grid.qc-facts-editorial > dl > dd {
    font: 400 15px/1.55 Newsreader, Georgia, serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  html body main.qc-place .practical__grid.qc-facts-editorial > dl > dt {
    color: var(--muted, #6f716b);
    font: 400 10px/1.6 "DM Sans", Arial, sans-serif !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }
  html body main.qc-place .qc-facts-editorial :is(.facts-keywords, .facts-explore-hint) {
    color: var(--muted, #6f716b);
    font: 400 10px/1.5 "DM Sans", Arial, sans-serif !important;
    letter-spacing: .03em !important;
    text-transform: none !important;
  }
  html body main.qc-place .qc-facts-editorial .facts-explore-link {
    font: 400 11px/1.4 "DM Sans", Arial, sans-serif !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }
}
@media (max-width: 980px) {
  html body main.qc-place .opening__media-left .practical__grid.qc-facts-editorial {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
  html body main.qc-place .practical__grid.qc-facts-editorial > dl {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-block: 12px !important;
  }
  html body main.qc-place .qc-facts-editorial .facts-explore-row {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
  }
  html body main.qc-place .qc-facts-editorial :is(.facts-explore-link, .facts-explore-hint) {
    grid-column: 1;
  }
}
