/* ==========================================================================
   NearStay — theme-specific overrides on top of base.css (the cloned system)
   Only additions/rebrand hooks live here; base.css carries the exact layout.
   ========================================================================== */

/* Text logo fallback when no custom logo image is set */
.hnp-logo-text{
  font-family: var(--font-family, "DM Sans", Helvetica, Arial);
  font-weight: 700; font-size: 26px; line-height: 1;
  color: #fff; letter-spacing: .2px; white-space: nowrap; display: inline-block;
}
/* Keep the logo hard-left and the nav on the SAME row, right-aligned. base.css has
   a generic .logo{width:100%;display:flex;justify-content:center} rule that stretches
   the logo full-width (which drops the nav onto a second line) — override decisively
   and force the header into a single centred flex row. */
.header .header-container{
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; justify-content: space-between !important;
  gap: 24px; text-align: left !important;
}
.header .header-container > .logo,
.header .logo{
  width: auto !important; height: auto !important; max-width: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important; align-items: center;
  justify-content: flex-start !important;
  margin: 0 !important;
}
.header .header-container > .content{
  flex: 0 1 auto !important; width: auto !important; margin: 0 !important;
}
.header .menu_container{
  display: flex !important; flex-direction: row !important; align-items: center !important;
}
/* Breathing room above the lockup. base.css sets `.header{padding:3px 0}` on
   desktop, which left the logo all but touching the top edge of the band. The
   padding goes on .header, not on .logo: .header-container centres its row, so
   padding on the logo alone would drop it out of line with the nav. */
.header{ padding-top: var(--ns-header-pad-top, 16px); }
.header .logo img{ max-height: var(--logo-height, 44px); width: auto !important; height: auto; }
.header .switch.header-switch{ position:relative; flex:0 0 30px; height:30px; }
.header .switch .selected-language{
  display:block; width:30px; height:30px; padding:0; border:0; border-radius:50%;
  background-color:transparent; background-repeat:no-repeat; background-size:30px 30px;
}
@media (max-width:799px){
  .header .row,
  .header .col-12,
  .header .header-container{ width:100%; max-width:100%; min-width:0; box-sizing:border-box; }
  .header .header-container{ gap:8px; }
  .header .header-container > .logo,
  .header .logo{ flex:0 1 auto !important; min-width:0; max-width:calc(100% - 120px) !important; }
  .header .logo .custom-logo-link{ display:block; max-width:100%; }
  .header .logo img,
  .header .logo .custom-logo{ width:auto !important; max-width:100% !important; }
  .header .header-container > .content{ flex:0 0 auto !important; }

  /* Grid items default to min-width:auto, which let the two date inputs widen
     their 350px parent. Zero-min tracks keep the search band inside the viewport. */
  .search_form_container .search_form .dates{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .search_form_container .search_form .dates > .search_spt,
  .search_form_container .search_form .dates input{ min-width:0; max-width:100%; box-sizing:border-box; }
}

/* base.css only gives .col-12 a width from 1024px up. Below that it is a bare
   float (`.row [class^="col"]{float:left}`) and shrink-wraps to its CONTENT,
   which is never what a "12 of 12 columns" element means. Every band built on it
   is affected; the three that showed it were:
     header — the logo, currency and hamburger bunched together on the left
       instead of splitting logo-left / nav-right.
     footer — the navy panel is this column's child, so it drew only as wide as
       its text.
     newsletter — once the band became a grid, the column shrink-wrapped to the
       paragraph's max-content width and the whole panel overflowed the screen.
   Fixed for the class rather than per band, so the next grid put inside a
   .col-12 does not rediscover it. */
@media (max-width:1023.98px){
  .row > .col-12{ width:100%; box-sizing:border-box; }
}

/* The map is a JS/WebGL widget. Until a map provider key is set, show a clean
   static placeholder in its exact slot instead of an empty box. */
.map_container.is-placeholder{
  position: relative; min-height: 420px; border-radius: 6px; overflow: hidden;
  background: #e6edf0 linear-gradient(135deg,#e9eff2,#d7e2e7);
}
.map_container.is-placeholder > *{ display: none !important; }
.map_container.is-placeholder::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(#c4d3da 1px,transparent 1px),linear-gradient(90deg,#c4d3da 1px,transparent 1px);
  background-size:46px 46px;
}
.map_container.is-placeholder::after{
  content: attr(data-label); position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:#5b7683; font-weight:600;
  font-size:15px; font-family: var(--font-family,"DM Sans",Helvetica,Arial); letter-spacing:.02em;
}

/* Map markers. Two tiers in the brand palette: the hotel the page is about is
   primary and larger, every other reviewed hotel nearby is secondary. Both are
   clickable, so give them a pointer and a hover lift.
   The secondary fill is the pale brand blue, which needs the primary outline to
   stay legible against light map tiles. */
.ns-map{ border-radius:6px; overflow:hidden; }
.ns-map .leaflet-marker-icon{ background:none; border:0; }
.ns-pin{
  display:block; width:100%; height:100%; overflow:visible;
  filter: drop-shadow(0 2px 3px rgba(6,12,28,.4));
  transition: transform .12s ease-out;
}
.ns-pin path{ fill: var(--col-primary,#0e2049); stroke:#fff; stroke-width:1.5; }
.ns-pin circle{ fill:#fff; }
.ns-pin--secondary path{
  fill: var(--col-secondary,#cbe7ff);
  stroke: var(--col-primary,#0e2049); stroke-width:2;
}
.ns-pin--secondary circle{ fill: var(--col-primary,#0e2049); }
.leaflet-marker-icon:hover .ns-pin,
.leaflet-marker-icon:focus .ns-pin{ transform: translateY(-2px) scale(1.08); }

/* The hotel the page is about. Red, like every "this is the one" marker on the
   site, and larger than its neighbours; the colour is a Customizer field so it
   can be moved off the brand accent. */
.ns-pin--current path{ fill: var(--ns-col-current,var(--col-red,#eb4335)); }
.ns-pin--current circle{ fill:#fff; }

/* The landmark a Where-to-stay roundup is named after. Gold rather than the
   brand navy, and a star on a disc rather than a teardrop, so it is not read as
   "one more hotel" at a glance — and not red either, which is reserved for
   whichever marker the card being read owns. */
.ns-pin--landmark{ overflow:visible; filter: drop-shadow(0 2px 4px rgba(6,12,28,.45)); }
.ns-pin--landmark .ns-pin-disc{ fill: var(--ns-col-landmark,#f2a51a); stroke:#fff; stroke-width:2; }
.ns-pin--landmark .ns-pin-star{ fill:#fff; }
.ns-pin--landmark.ns-pin--active .ns-pin-disc{ fill: var(--col-red,#eb4335); }
.leaflet-marker-icon .ns-pin--landmark.ns-pin--active{ transform: scale(1.2); }
/* A named landmark keeps its label upright above the disc. */
.ns-map .leaflet-tooltip.ns-tooltip--landmark{ font-weight:700; }
.ns-map .leaflet-tooltip{
  font-family: var(--font-family,"DM Sans",Helvetica,Arial);
  font-size:13px; font-weight:600; color: var(--col-primary,#0e2049);
  border:0; border-radius:4px; box-shadow:0 2px 8px rgba(6,12,28,.22);
}

/* Destination hub buttons.

   base.css reproduces the reference's fixed `body .btn{width:194px}`, which is
   fine for the short chips it was drawn for but clips longer labels — "View all
   hotels in Tangier" wrapped onto three lines inside the same 194px box. These
   rules keep 194px as a minimum so the reference rhythm survives, and let the
   button grow when the label needs it. Scoped to the hub rather than applied to
   `body .btn` globally, because that would also beat base.css's mobile
   full-width rule.

   The "Read the {place} guide" link also has to win over
   `.summary p a{color:var(--col-primary)}` — otherwise it renders navy-on-navy
   and reads as a solid empty block. */
body .summary .description p a.btn,
body .keyword_links .links a.btn,
body .hotel_list_content .buttons a.btn{
  width: auto; min-width: 194px; max-width: 100%;
}
body .summary .description p a.btn{
  display: inline-flex; color: var(--col-white);
}
body .summary .description p:has(> a.btn){ width: 100%; margin-top: 4px; }
@media (max-width: 599px){
  body .summary .description p a.btn,
  body .keyword_links .links a.btn,
  body .hotel_list_content .buttons a.btn{ width: 100%; min-width: 0; }
}

/* Optional: kill link underlines site-wide (Customizer toggle adds body.no-underlines) */
body.no-underlines a,
body.no-underlines .hotel_card .hotel_details .title:hover{ text-decoration: none !important; }

/* Verified entity links stay visibly interactive even when the optional global
   no-underlines mode is active. The quiet sky highlight is reserved for hover;
   at rest, brand blue + a deliberate underline is enough to signal a link. */
body a.ns-entity-link,
body.no-underlines a.ns-entity-link{
  color:var(--brand-blue,#2563EB)!important;
  font-weight:600;
  text-decoration-line:underline!important;
  text-decoration-thickness:1.5px!important;
  text-decoration-color:#93B4F5!important;
  text-underline-offset:3px;
  border-radius:3px;
  transition:color .16s ease,background-color .16s ease,text-decoration-color .16s ease;
}
body a.ns-entity-link:hover{
  color:var(--brand-blue-dark,#1D4FD7)!important;
  background:var(--brand-sky,#EAF2FF);
  text-decoration-color:currentColor!important;
}
body a.ns-entity-link:focus-visible{
  outline:3px solid rgba(37,99,235,.28);
  outline-offset:3px;
  background:var(--brand-sky,#EAF2FF);
}
/* Hotel-card titles are clickable as a whole card action, not prose links.
   Keep their typography consistent with the card even when the automatic
   internal-link layer recognises the hotel name. Place/landmark links retain
   the blue underlined entity treatment above. */
body .hotel_card .hotel_details a.title,
body.no-underlines .hotel_card .hotel_details a.title{
  color:var(--brand-navy,var(--col-primary,#101828))!important;
  text-decoration:none!important;
  transition:opacity .16s ease;
}
body .hotel_card .hotel_details a.title:hover{
  color:var(--brand-navy,var(--col-primary,#101828))!important;
  text-decoration:none!important;
  opacity:.72;
}
body .hotel_card .hotel_details a.title:focus-visible,
.breadcrumbs ul a:focus-visible{ outline:3px solid rgba(37,99,235,.28); outline-offset:3px; border-radius:2px; }
.breadcrumbs ul a{ text-decoration:underline!important; text-decoration-color:#93B4F5!important; text-underline-offset:3px; }
@media (prefers-reduced-motion:reduce){ body a.ns-entity-link{transition:none} }

/* Guides (listicle) — keep the theme working even before base.css classes are matched */
.hotel_card .hotel_details .buttons .btn.book{ background: var(--col-primary); color:#fff; }

/* Keep the strapline below the gallery in the flex-ordered .hotel_details
   (base.css orders breadcrumbs:1, gallery:2, details:3; strapline defaults to 0). */
.hotel_page .hotel_details .strapline{ order: 4; width: 100%; }

/* Accent colour hook (Customizer) — used on primary buttons/badges if desired */
:root{ --ns-accent: var(--col-primary); }

/* Footer social icons — white glyphs (thehotelguru .social_bar uses <img>; we use inline SVG) */
.footer .social_bar a{ color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.footer .social_bar a svg{ width:100%; height:100%; fill:currentColor; display:block; }
.footer .social_bar a:hover{ opacity:.75; }

/* Footer logo — keep it small and top-left. Override both the generic
   .logo{width:100%;justify-content:center} rule and base.css's two-image sizing. */
.footer .logo{
  width:auto !important; height:auto !important; max-width:none !important;
  display:inline-flex !important; align-items:center;
  justify-content:flex-start !important;
  grid-column:1 !important; justify-self:start;
  margin:0 0 24px 0 !important;
}
.footer .logo img,
.footer .logo .custom-logo{ width:auto !important; height:var(--logo-height,44px) !important; max-height:52px; }
.footer .logo .hnp-logo-text{ font-size:24px; color:#fff; }

/* Footer grid — four regions, one row of content each side (the home-page
   footer, now on every page): brand top-left with the copyright beneath it, the
   two link columns in the middle, language flags top-right with the socials
   beneath them.

   base.css builds a 7fr/3fr grid for a footer that had ONE list and no flags,
   and drives the phone stack with `order` values on the children. Every child
   is placed explicitly here so those orders no longer decide anything above
   800px — which is also why this block is inside the same 800px query base.css
   uses: below it, its single-column flex stack is still the right answer and
   the two lists simply follow each other.

   The panel's fill, rounding and padding are brand.css's (search "footer"). */
@media (min-width:800px){
  .footer .footer_content{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);
    grid-template-rows:auto 1fr;
    align-items:start;
    grid-row-gap:24px;
    grid-column-gap:32px;
  }
  /* The 24px below the logo is the phone stack's spacing; here grid-row-gap
     already provides it, and keeping both doubled the gap to the copyright. */
  .footer .footer_content .logo{ grid-column:1; grid-row:1; margin-bottom:0 !important; }
  .footer .footer_content .copyright{ grid-column:1; grid-row:2; justify-self:start; align-self:end; }
  .footer .footer_content > ul{ grid-row:1 / span 2; justify-self:start; }
  .footer .footer_content > ul:nth-of-type(1){ grid-column:2; }
  .footer .footer_content > ul:nth-of-type(2){ grid-column:3; }
  /* A custom menu assigned to the `footer` location renders as one list, so it
     takes both link columns and splits itself rather than crowding into one. */
  .footer .footer_content > ul:only-of-type{ grid-column:2 / 4; justify-self:stretch; columns:2; }
  .footer .footer_content > ul:only-of-type li{ break-inside:avoid; }
  .footer .footer_content .language_selector{ grid-column:4; grid-row:1; justify-self:end; margin:0; }
  .footer .footer_content .social_bar{ grid-column:4; grid-row:2; justify-self:end; align-self:end; margin:0; }
}
/* base.css spaces a list's first item to clear the site-name heading. Only the
   first column has that heading; in the second the gap opened UNDER "About us",
   splitting it off from the pages it belongs with. Outside the query above
   because the two lists follow each other on a phone, where it reads worst. */
.footer .footer_content > ul:nth-of-type(2) li:first-of-type{ margin-bottom:6px; }
.footer .ns-footer-language-title{ display:none; }
@media (max-width:799px){
  .footer .language_selector{ width:100%; margin:18px 0 24px; }
  .footer .ns-footer-language-title{ display:block; margin:0 0 10px; color:var(--col-white); font-weight:700; }
  .footer .language_selector .switch{ width:100%; height:auto; margin:0; }
  .footer .language_selector .switch .switch_content{
    position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%; min-width:0; height:auto; margin:0; gap:8px; background:transparent;
  }
  .footer .language_selector .switch .switch_content a{
    display:flex; min-width:0; padding:8px 10px; gap:8px; box-sizing:border-box;
    align-items:center; color:var(--col-white) !important; border:1px solid rgba(255,255,255,.3);
    border-radius:4px; background:rgba(255,255,255,.06);
  }
  .footer .language_selector .switch .switch_content a:first-of-type,
  .footer .language_selector .switch .switch_content a:last-of-type{ border-radius:4px; }
  .footer .language_selector .switch .switch_content a.active{ border-color:var(--col-secondary); background:rgba(255,255,255,.14); }
  .footer .language_selector .switch .switch_content a span{ flex:0 0 30px; }
  .footer .language_selector .switch .switch_content a div{
    display:block; min-width:0; overflow:hidden; color:var(--col-white);
    font-size:14px; white-space:nowrap; text-overflow:ellipsis;
  }
}

/* Compact WordPress search widget. The full hotel search band deliberately keeps
   the reference `.search-form .search_form` layout from base.css. */
.ns-simple-search{ display:flex; gap:10px; align-items:center; }
.ns-simple-search .search-field{
  flex:1; padding:12px 14px; border:1px solid var(--col-mid-grey,#d8d8d8);
  border-radius:8px; font-family:var(--font-family,"DM Sans",Helvetica,Arial); font-size:15px;
}

/* Date controls preserve the two-line "Check-in / Add dates" appearance while
   retaining a real, keyboard-accessible native date picker over the text field. */
.search_form_container .ns-date-field{ position:relative; }
.search_form_container .ns-native-date{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; opacity:0;
  cursor:pointer; padding:0; border:0;
}
.search_form_container .ns-friendly-date{ pointer-events:none; }

/* Native date controls have a sizeable intrinsic minimum on desktop. Without
   zero-min grid tracks they steal width from the adjacent occupancy field and
   clip its icon/label even though the declared column percentages total 100%. */
.search_form_container .search_form .dates{
  min-width:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.search_form_container .search_form .dates > .search_spt,
.search_form_container .search_form .dates input{
  min-width:0; max-width:100%; box-sizing:border-box;
}

/* Keep the shared search action exactly as tall as the destination and date
   controls. Flex wrapping previously stretched the button across both rows on
   wide screens, producing the oversized block shown in the search band. */
.search_form_container #search_form > .search_spt.search_spt_region,
.search_form_container #search_form > .dates,
.search_form_container #search_form > .ns-guests-field,
.search_form_container #search_form > .btn-search,
.search_form_container #search_form > .search_spt.search_spt_region > input,
.search_form_container #search_form > .dates .ns-friendly-date{
  height:50px;
  min-height:50px;
  max-height:50px;
  box-sizing:border-box;
}
.search_form_container .ns-guests-field{
  display:flex; align-items:center; gap:10px; padding:6px 12px; border:1px solid var(--col-mid-grey,#d8d8d8);
  background:var(--col-white,#fff); color:var(--col-primary,#0e2049); box-sizing:border-box;
}
.search_form_container .ns-guests-field::after{ display:none; }
.search_form_container .ns-guests-field > svg{ flex:0 0 auto; }
.search_form_container .ns-guests-copy{ min-width:0; width:100%; }
.search_form_container .ns-guests-copy label{
  display:block; margin:0 0 1px; color:var(--col-black,#111); font-size:12px; font-weight:600; line-height:14px;
}
.search_form_container .ns-guests-copy select{
  appearance:none; -webkit-appearance:none; width:100%; min-width:0; border:0; outline:0; padding:0 18px 0 0;
  color:var(--col-black,#111); background:transparent; font:600 14px/18px var(--font-family,"DM Sans",Helvetica,Arial);
  white-space:nowrap; text-overflow:ellipsis; cursor:pointer;
}
@media (min-width:1024px){
  .search_form_container #search_form > .search_spt.search_spt_region{ width:27%; }
  .search_form_container #search_form > .dates{ width:36%; }
  .search_form_container #search_form > .ns-guests-field{ order:3; width:22%; border-left:0; }
  .search_form_container #search_form > .btn-search{ order:4; width:15%; }
  .search_form_container #search_form > .toggle{ order:5; }
}
@media (max-width:1023.98px){
  .search_form_container #search_form > .ns-guests-field{ width:100%; margin-bottom:10px; }
}
.search_form_container #search_form > .btn-search{
  align-self:flex-start;
  padding-top:0;
  padding-bottom:0;
}

/* Hotel carousel preview cells are semantic buttons; reset browser button chrome
   so base.css can size them exactly like the reference image rail. */
.hotel_page .preview-carousel{
  appearance:none; -webkit-appearance:none; padding:0; border:0; cursor:pointer;
  display:block; min-width:0; position:relative;
}
.hotel_page .preview-carousel:focus-visible{ outline:3px solid var(--col-secondary); outline-offset:-3px; }
.hotel_page .preview-carousel .preview-caption,
.gallery_container .ns-image-label{
  position:absolute; left:10px; bottom:10px; z-index:2; max-width:calc(100% - 20px);
  padding:7px 9px; box-sizing:border-box; overflow:hidden; color:var(--col-white);
  background:rgba(0,0,0,.78); font-size:12px; line-height:14px; text-align:left;
  white-space:nowrap; text-overflow:ellipsis;
}

/* Captioned listicle gallery. Its two side cells are live previews; arrows and
   swipe rotate through the complete gallery without changing the reference grid. */
.gallery_container .main_image,
.gallery_container .side_images .image{ position:relative; margin:0; }
.gallery_container .side_images .image{
  appearance:none; -webkit-appearance:none; width:100%; min-width:0; padding:0;
  border:0; cursor:pointer; overflow:hidden;
}
.gallery_container .side_images .image:focus-visible{ outline:3px solid var(--col-secondary); outline-offset:-3px; }
.gallery_container .ns-gallery-count{
  position:absolute; right:10px; bottom:10px; z-index:2; padding:7px 9px;
  border-radius:4px; color:var(--col-white); background:rgba(0,0,0,.78);
  font-size:12px; line-height:14px;
}
.gallery_container .ns-gallery-prev,
.gallery_container .ns-gallery-next{
  position:absolute; top:50%; z-index:3; width:42px; height:48px; margin-top:-24px;
  padding:0; border:0; border-radius:4px; cursor:pointer; color:#fff;
  background:rgba(0,0,0,.58); font:400 38px/44px Arial,sans-serif;
}
.gallery_container .ns-gallery-prev{ left:10px; }
.gallery_container .ns-gallery-next{ right:10px; }
.gallery_container .ns-gallery-prev:hover,
.gallery_container .ns-gallery-next:hover{ background:var(--col-primary); }
.gallery_container .ns-gallery-sources{ display:none !important; }
/* base.css gives figure captions a full-width bottom strip. The Guide hero
   needs a concise photo credit instead: keep the Hotel name readable as a
   compact navy pill and reserve the bottom-right corner for the image count. */
.gallery .gallery_container .main_image figcaption.ns-image-label{
  left:16px; right:auto; bottom:16px; width:max-content;
  max-width:calc(100% - 112px); padding:8px 12px;
  border-left:3px solid var(--brand-coral,#ff5757); border-radius:4px;
  color:#fff; background:rgba(14,32,73,.92); box-shadow:0 3px 12px rgba(0,0,0,.2);
  font-size:13px; font-weight:650; line-height:16px; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gallery .gallery_container .side_images .image .ns-image-label{
  max-width:calc(100% - 20px); border-radius:3px;
  background:rgba(14,32,73,.88); font-weight:650;
}
@media (min-width:800px){
  .gallery .gallery_container .main_image figcaption.ns-image-label{ left:20px; bottom:20px; }
  .gallery_container .ns-gallery-count{ right:20px; bottom:20px; }
  .gallery_container .ns-gallery-prev{ left:20px; }
  .gallery_container .ns-gallery-next{ right:20px; }
}

/* Guide intros must shrink with the mobile viewport. The accordion builder adds
   an unclassed wrapper around the lead paragraphs, so constrain that wrapper too. */
@media (max-width:799px){
  .summary #description,
  .summary #description > div,
  .summary .main-container,
  .summary .right-section-container{
    width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  }
  .summary #description p,
  .summary #description li,
  .summary #description a{ overflow-wrap:anywhere; }
}

/* 404 page: base.css's .error_page/.history grid does the layout; entries are
   filled client-side. Padding keeps the copy off the header, and the underline
   base.css puts on history entries is removed (site-wide no-underline rule);
   hover feedback stays as opacity. */
.error_page > .container:first-child{ padding-top:40px; }
.error_page .history{ margin:36px 0 56px; }
.error_page .history a,
.error_page .history a span:first-of-type{ text-decoration:none; }
.error_page .history a:hover{ opacity:.8; }
.error_page .history a span:first-of-type{ margin-bottom:4px; }

/* Listing templates (archive.php / index.php) put the page heading in the left rail
   (3fr) of the shared `.hotel_list_content` grid and the card feed in the right (7fr),
   so every headline in the theme sits on the left. */
.hotel_list .hotel_list_content .hotel_list_head h1{ margin:0; }

/* Listicle posts (single.php) — price tier badge on the card title + intro spacing.
   The card itself reuses thehotelguru's `.hotel_card` (empty `.skeleton` = grey photo
   placeholder for the graceful, data-light version). */
.ns-price-tier{ color:var(--col-red,#eb4335); font-size:.8em; font-weight:600; margin-left:6px; letter-spacing:1px; }
.listicle-intro{ margin-bottom:10px; }
.hotel_list_content .hotel_list_body .hotel_cards{ margin-top:6px; }

/* Star rating (hotel header) — colour is the plugin's customisable --hf-star,
   falling back to the theme red. Placement (name/price row) is set in the
   Hotel Fiche plugin's "Star rating placement" setting. */
.hf-stars-row{ margin:2px 0 8px; }
.hf-stars{ display:inline-flex; gap:2px; line-height:1; font-size:16px; letter-spacing:1px; color:var(--hf-star,var(--col-red,#eb4335)); }
.hf-stars .hf-star{ color:inherit; }

/* Intent-tag pills — the fiche "Tags" section on hotel singles. Same light-pill
   look as the Destinations sidebar tags; navy text, no underline (site rule). */
.hf-content-tags .hf-tag-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.hf-content-tags .hf-tag-pills a{ background:#eef0f3; color:var(--col-primary,#0e2049); padding:8px 16px; border-radius:999px; font-weight:600; font-size:14px; line-height:1.2; text-decoration:none; }
.hf-content-tags .hf-tag-pills a:hover{ opacity:.75; }

/* Search page — list + sticky map split. base.css only sets .map_row{display:flex}
   and makes .map sticky; the column widths are ours. The map fills its column. */
.search_page .map_row{ align-items:flex-start; }
.search_page .map_row > .ns-results{ flex:1 1 58%; min-width:0; }
.search_page .map_row > .map{ flex:1 1 42%; max-width:42%; box-sizing:border-box; }
.search_page .map .map_container{ position:relative; width:100%; height:calc(100dvh - 160px); min-height:420px; }
.search_page .map .ns-map{ width:100%; height:100% !important; }
@media (max-width: 1023px){
	.search_page .map_row{ display:block; }
	.search_page .map_row > .map{ max-width:none; }
	.search_page .map.open .map_container{ height:90%; }
	.search_page .map.open .map_container .ns-map{ height:100% !important; }
}
/* The banner keeps its navy identity when a guide has no photo yet. */
.search_page .banner{ background-color:var(--col-primary,#0e2049); }
.search_page .banner a{ text-decoration:none; }

/* Tag x place combo pages + their link blocks. base.css's .keyword_links .links
   styles the pill buttons; we add the small heading and the FAQ column. */
.ns-tp-links-h{ font-size:20px; margin:0 0 12px; }
.keyword_links + .keyword_links{ margin-top:8px; }
.ns-tp-faq .ns-tp-faq-body h3{ margin:0 0 6px; }
.ns-tp-faq .ns-tp-faq-body p{ margin:0 0 18px; }
.ns-tp-updated{ opacity:.7; }

/* ---------------------------------------------- ROLL-UP LISTING (country) ---
   A place with child destinations shows its hotels as a compact three-up grid
   in the reference — photo on top, then name, place, and one row carrying the
   guest score on the left and the rate on the right. A single-city listing
   keeps the full-width rows. `.ns-rollup` is set in taxonomy-destination.php
   from the same flag that decides whether the rail lists cities.
   The card component is shared, so this skin only restacks it and drops the
   parts the compact card does not carry. */
.ns-rollup .hotel_cards{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; align-items:stretch;
}
/* One class more than `.hotel_list .hotel_card` further down this file, which
   sets the row split and would otherwise win on source order. */
.ns-rollup .hotel_cards .hotel_card{
  display:grid; grid-template-columns:1fr; grid-template-rows:196px minmax(0,1fr);
  align-content:stretch; height:100%; margin:0; overflow:hidden; position:relative;
}
/* base.css draws a hairline above each row; a grid of cards does not want it. */
.ns-rollup .hotel_card:after{ display:none; }
/* Fixed photo box. Without it the card stretches to the tallest in its row and
   the picture grows with it, so a one-line title and a two-line title got
   visibly different image heights side by side. */
.ns-rollup .hotel_cards .hotel_card .skeleton{
  height:196px !important; min-height:196px; max-height:196px;
  overflow:hidden; align-self:start;
}
.ns-rollup .hotel_cards .hotel_card .skeleton img{ height:100%; width:100%; object-fit:cover; }
.ns-rollup .hotel_card .hotel_details{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline;
  grid-template-rows:auto auto minmax(0,1fr); height:100%; box-sizing:border-box;
  gap:2px 12px; padding:14px 16px 16px;
}
.ns-rollup .hotel_card .hotel_details > h3,
.ns-rollup .hotel_card .hotel_details > .location{ grid-column:1 / -1; margin:0; }
.ns-rollup .hotel_card .hotel_details > h3{
  height:48px; min-height:48px; max-height:48px;
  font-size:20px; line-height:24px; overflow:hidden;
}
.ns-rollup .hotel_card .hotel_details > h3 .title{
  display:-webkit-box; overflow:hidden; font-size:20px; line-height:24px;
  -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.ns-rollup .hotel_card .hotel_details > .location{
  height:1.4em; overflow:hidden; color:var(--brand-slate,#667085); font-size:14px;
  line-height:1.4; white-space:nowrap; text-overflow:ellipsis;
}
.ns-rollup .hotel_card .hotel_details > .ns-card-score{
  grid-column:1; align-self:end; margin:6px 0 0; font-size:14px;
}
/* The score reads as text on this card, not as a link — navy, like the
   reference, rather than the interactive blue brand.css gives .ns-score. */
.ns-rollup .hotel_card .hotel_details .ns-score{ color:var(--brand-navy,#101828); font-weight:700; }
.ns-rollup .hotel_card .hotel_details .ns-score-label{ color:var(--brand-slate,#667085); font-weight:400; }
.ns-rollup .hotel_card .hotel_details > .price{
  grid-column:2; align-self:end; justify-self:end; margin:6px 0 0; text-align:right;
}
.ns-rollup .hotel_card .hotel_details > .price b{ font-size:14px; font-weight:600; }
/* "for 1 room, 1 night" belongs to the row card, not this one. */
.ns-rollup .hotel_card .hotel_details > .price > span{ display:none; }
.ns-rollup .hotel_card .hotel_details > .description,
.ns-rollup .hotel_card .hotel_details > .overview_tags,
.ns-rollup .hotel_card .hotel_details > .buttons{ display:none; }
/* The country roll-up CTA is a sibling of the grid, not a card footer. Give it
   a clear gutter after the final row and keep the action at its natural width;
   display:flex buttons otherwise stretch across the complete card grid. */
.ns-rollup .hotel_list_content > .buttons{
  display:flex; justify-content:flex-start; margin-top:26px;
}
body .ns-rollup .hotel_list_content > .buttons a.btn{
  width:max-content; min-width:194px; max-width:100%; margin:0;
}
@media (max-width:1023.98px){ .ns-rollup .hotel_cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:599.98px){
  .ns-rollup .hotel_cards{ grid-template-columns:1fr; gap:20px; }
  .ns-rollup .hotel_cards .hotel_card{ grid-template-rows:220px minmax(0,1fr); }
  .ns-rollup .hotel_cards .hotel_card .skeleton{
    height:220px !important; min-height:220px; max-height:220px;
  }
  body .ns-rollup .hotel_list_content > .buttons a.btn{ width:100%; min-width:0; }
}
@media (min-width:600px) and (max-width:1023.98px){
  .ns-rollup .hotel_card .hotel_details > h3 .title{ overflow-wrap:anywhere; }
}
@media (min-width:1024px){
  .ns-rollup .hotel_card .hotel_details > h3{
    height:58px; min-height:58px; max-height:58px;
    font-size:24px; line-height:29px;
  }
  .ns-rollup .hotel_card .hotel_details > h3 .title{ font-size:24px; line-height:29px; }
}
/* The score is the roll-up card's; the full rows do not show one. */
.hotel_card .hotel_details > .ns-card-score{ display:none; }
.ns-rollup .hotel_card .hotel_details > .ns-card-score{ display:block; }

/* ------------------------------------------ BEST-HOTELS-IN PLACE INTRO ---
   Geographic Guide containers use the reference's editorial opening sequence:
   title + breadcrumb, destination gallery, three booking actions, About copy,
   then a crawlable next-level directory before the live Hotel results. */
.ns-bhi-place-head{ padding:34px 0 18px; }
.ns-bhi-place-head h1{
  margin:0 0 6px; color:var(--brand-navy,var(--col-primary,#0e2049));
  font-family:var(--font-heading,inherit); font-size:clamp(28px,3vw,38px);
  font-weight:700; line-height:1.18; letter-spacing:-.02em;
}
.ns-bhi-place-crumb ul{ display:flex; flex-wrap:wrap; gap:0; list-style:none; margin:0; padding:0; }
.ns-bhi-place-crumb li{ position:relative; padding-right:17px; color:var(--brand-slate,#667085); font-size:14px; line-height:24px; }
.ns-bhi-place-crumb li::after{ content:">"; position:absolute; right:5px; top:0; color:#98a2b3; }
.ns-bhi-place-crumb li:last-child{ padding-right:0; }
.ns-bhi-place-crumb li:last-child::after{ display:none; }
.ns-bhi-place-crumb a{ color:var(--brand-blue,#2563eb); font-weight:600; text-decoration:none; }
.ns-bhi-place-crumb a:hover{ text-decoration:underline; text-underline-offset:3px; }
.ns-bhi-place-actions{ margin-top:14px; }
.ns-bhi-place-actions .links{ align-items:stretch; }
.ns-bhi-place-actions .links a.btn{ width:auto; min-width:0; flex:1 1 220px; }
.ns-bhi-about{ margin:28px 0 38px; }
.ns-bhi-about .row > .col-1{ display:none; }
.ns-bhi-about .row > .col-10,
.ns-bhi-about .row > .ns-bhi-about__inner{ width:100%; max-width:none; }
.ns-bhi-about__inner{ width:100%; max-width:none; box-sizing:border-box; }
.ns-bhi-about h2{ color:var(--brand-navy,var(--col-primary,#0e2049)); font-family:var(--font-heading,inherit); }
.ns-bhi-trustline{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr) minmax(0,1fr);
  overflow:hidden; width:100%; max-width:none; margin:0 0 20px; padding:0;
  border:1px solid #dfe4ec; border-left:3px solid var(--brand-coral,#ff5757);
  border-radius:7px; background:#fff; color:#344054;
  box-shadow:0 5px 16px rgba(16,24,40,.04);
}
.ns-bhi-trustline.no-author{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ns-bhi-trustline > div{ min-width:0; padding:13px 18px 14px; }
.ns-bhi-trustline > div + div{ border-left:1px solid #e4e7ec; }
.ns-bhi-trustline dt{
  margin:0 0 4px; color:#667085; font-size:11px; font-weight:800;
  letter-spacing:.055em; line-height:1.25; text-transform:uppercase;
}
.ns-bhi-trustline dd{
  margin:0; color:var(--brand-navy,var(--col-primary,#0e2049));
  font-size:14px; font-weight:700; line-height:1.38; overflow-wrap:anywhere;
}
.ns-bhi-trustline a{
  color:var(--brand-blue,#2563eb); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
}
.ns-bhi-trustline a:hover{ color:var(--brand-navy,var(--col-primary,#0e2049)); }
.ns-bhi-about .description{ display:block; width:100%; max-width:none; }
.ns-bhi-about .description p{ width:100%; max-width:none; color:#344054; }
.ns-bhi-about__copy{ display:block; width:100%; max-width:none; }
.ns-bhi-about__copy p{
  width:100%; max-width:none; margin:0 0 17px; color:#344054; font-size:16px;
  line-height:1.72;
}
.ns-bhi-about__copy p:first-child{
  color:#1d2939; font-size:17px; line-height:1.68;
}
.ns-bhi-about__copy p:last-child{ margin-bottom:0; }
.ns-bhi-about__copy a{
  color:var(--brand-blue,#2563eb); font-weight:650; text-decoration:underline;
  text-decoration-color:#93b4f5; text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.ns-bhi-about__copy a:hover{ color:var(--brand-navy,var(--col-primary,#0e2049)); }
.ns-bhi-about__copy a:focus-visible{
  outline:3px solid rgba(37,99,235,.28); outline-offset:3px; border-radius:2px;
}
.ns-bhi-about h3{
  margin:32px 0 13px; color:var(--brand-navy,var(--col-primary,#0e2049));
  font-family:var(--font-heading,inherit); font-size:22px; line-height:1.25;
}
.ns-bhi-collections ul{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 32px;
  max-width:980px; margin:0; padding:0; list-style:none;
}
.ns-bhi-collections a,
.ns-bhi-place-notes a,
.ns-bhi-hotel-directory a{
  color:var(--brand-blue,#2563eb); font-weight:600; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
}
.ns-bhi-collections a:hover,
.ns-bhi-place-notes a:hover,
.ns-bhi-hotel-directory a:hover{ color:var(--brand-navy,var(--col-primary,#0e2049)); }
.ns-bhi-place-notes ul{ max-width:980px; margin:0; padding-left:22px; }
.ns-bhi-place-notes li{ margin:0 0 14px; padding-left:4px; color:#344054; line-height:1.62; }

/* One hierarchy-aware guide replaces the former collections, place notes and
   directory modules. Country pages separate regions from leaf destinations;
   state pages show leaf destinations only. Each place therefore appears once. */
.ns-bhi-place-index,
.ns-bhi-where-to-stay{ margin:0 0 44px; }
.ns-bhi-place-index h2,
.ns-bhi-where-to-stay h2{
  margin:0 0 8px; color:var(--brand-navy,var(--col-primary,#0e2049));
  font-family:var(--font-heading,inherit); font-size:clamp(24px,2.3vw,30px);
  line-height:1.2;
}
.ns-bhi-section-intro{ max-width:70ch; margin:0 0 22px; color:#475467; line-height:1.58; }
.ns-bhi-place-index__groups{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px;
  padding-top:22px; border-top:1px solid #dfe4ec;
}
.ns-bhi-place-index__group{ min-width:0; }
.ns-bhi-place-index__group h3{
  margin:0 0 12px; color:#344054; font-family:var(--font-heading,inherit);
  font-size:17px; line-height:1.3;
}
.ns-bhi-place-index__cards{ display:grid; gap:10px; }
.ns-bhi-place-card{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 18px;
  min-width:0; padding:16px 18px; border:1px solid #e4e7ec;
  border-left:3px solid var(--brand-coral,#ff5757); border-radius:7px;
  background:#fff; color:inherit; text-decoration:none;
  box-shadow:0 5px 16px rgba(16,24,40,.045);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.ns-bhi-place-card strong{
  min-width:0; color:var(--brand-navy,var(--col-primary,#0e2049));
  font-size:17px; line-height:1.28; overflow-wrap:anywhere;
}
.ns-bhi-place-card > span{
  grid-column:1/-1; color:#667085; font-size:14px; line-height:1.45;
}
.ns-bhi-place-card em{
  grid-column:2; grid-row:1; align-self:center; color:var(--brand-blue,#2563eb);
  font-size:13px; font-style:normal; font-weight:700; white-space:nowrap;
}
.ns-bhi-place-card:hover{
  border-color:#cbd5e1; border-left-color:var(--brand-coral,#ff5757);
  box-shadow:0 9px 24px rgba(16,24,40,.09); transform:translateY(-1px);
}
.ns-bhi-place-card:focus-visible,
.ns-bhi-wts-card__link:focus-visible,
.ns-bhi-wts-more:focus-visible{
  outline:3px solid rgba(37,99,235,.28); outline-offset:3px;
}
.ns-bhi-wts-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
  padding-top:22px; border-top:1px solid #dfe4ec;
}
.ns-bhi-wts-card{
  position:relative; min-width:0; min-height:134px; overflow:hidden;
  border:1px solid #e4e7ec; border-radius:8px; background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.ns-bhi-wts-card__link{
  display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none;
}
.ns-bhi-wts-card__image{
  display:block; aspect-ratio:16/9; overflow:hidden; background:#e9eef5;
}
.ns-bhi-wts-card__image img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .28s ease;
}
.ns-bhi-wts-card__body{
  display:flex; flex:1; flex-direction:column; min-height:132px; padding:15px 17px 17px;
}
.ns-bhi-wts-card__eyebrow{
  margin:0 0 7px; color:var(--brand-coral,#e8414d); font-size:12px;
  font-weight:800; letter-spacing:.035em; line-height:1.3; text-transform:uppercase;
}
.ns-bhi-wts-card strong{
  color:var(--brand-navy,var(--col-primary,#0e2049)); font-size:16px;
  line-height:1.32; overflow-wrap:anywhere;
}
.ns-bhi-wts-card__meta{
  display:flex; flex-wrap:wrap; gap:5px 13px; margin-top:auto; padding-top:12px;
  color:#667085; font-size:13px; line-height:1.35;
}
.ns-bhi-wts-card__meta > span + span{ position:relative; }
.ns-bhi-wts-card__meta > span + span::before{
  content:""; position:absolute; left:-8px; top:50%; width:3px; height:3px;
  margin-top:-1px; border-radius:50%; background:#98a2b3;
}
.ns-bhi-wts-card:hover{
  border-color:#cbd5e1; box-shadow:0 9px 24px rgba(16,24,40,.08);
  transform:translateY(-1px);
}
.ns-bhi-wts-card:hover .ns-bhi-wts-card__image img{ transform:scale(1.025); }
.ns-bhi-wts-card__credit{
  position:absolute; z-index:2; top:8px; right:8px; max-width:calc(100% - 16px);
  overflow:hidden; padding:4px 7px; border-radius:4px; background:rgba(9,20,42,.78);
  color:#fff; font-size:9px; font-weight:650; line-height:1.2; text-decoration:none;
  text-overflow:ellipsis; white-space:nowrap; opacity:.82; pointer-events:auto; cursor:default; user-select:text;
}
.ns-bhi-wts-more{
  display:inline-flex; align-items:center; margin-top:17px; color:var(--brand-blue,#2563eb);
  font-size:14px; font-weight:750; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
}

/* Planning FAQs read like a compact travel desk: a navy contents card beside
   quiet disclosure rows. The page's existing Hotel, place and landmark lists
   remain the visual stars; this block only answers the decisions between them. */
.ns-bhi-faq{ margin:4px 0 52px; }
.ns-bhi-faq__layout{
  display:grid; grid-template-columns:minmax(230px,3fr) minmax(0,7fr);
  overflow:hidden; border:1px solid #dfe4ec; border-radius:9px;
  background:#fff; box-shadow:0 10px 28px rgba(16,24,40,.07);
}
.ns-bhi-faq__head{
  padding:28px 25px; background:var(--brand-navy,var(--col-primary,#0e2049));
  color:#fff;
}
.ns-bhi-faq__head > span{
  display:block; margin:0 0 10px; color:#ff8585; font-size:11px;
  font-weight:850; letter-spacing:.09em; line-height:1.3; text-transform:uppercase;
}
.ns-bhi-faq__head h2{
  margin:0 0 13px; color:#fff; font-family:var(--font-heading,inherit);
  font-size:clamp(23px,2.1vw,29px); line-height:1.16; letter-spacing:-.015em;
}
.ns-bhi-faq__head p{ margin:0; color:#dbe6f7; font-size:14px; line-height:1.55; }
.ns-bhi-faq__questions{ min-width:0; padding:3px 24px; }
.ns-bhi-faq .ns-paa{ border-top:0; }
.ns-bhi-faq .ns-paa-item:last-child{ border-bottom:0; }
.ns-bhi-faq .ns-paa-btn{ padding:16px 1px; }
.ns-bhi-faq .ns-paa-q{ font-size:16px; font-weight:700; }
.ns-bhi-faq .ns-paa-answer{ color:#475467; font-size:14px; line-height:1.62; }
.ns-bhi-faq .ns-paa-answer a{
  color:var(--brand-blue,#2563eb); font-weight:700; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
}

/* The reference's long prose gets one strong navigational anchor: a navy
   contents panel joined to compact native accordions. The color comes from the
   site's existing identity, while details/summary remains useful without JS. */
.ns-bhi-stay-guide{ margin:0 0 42px; }
.ns-bhi-stay-guide__layout{
  display:grid; grid-template-columns:minmax(210px,3fr) minmax(0,7fr);
  overflow:hidden; border:1px solid #dfe4ec; border-radius:10px;
  background:#fff; box-shadow:0 10px 28px rgba(16,24,40,.07);
}
.ns-bhi-stay-guide__layout > h2{
  margin:0; padding:27px 24px; color:#fff;
  background:var(--brand-navy,var(--col-primary,#0e2049));
  font-family:var(--font-heading,inherit); font-size:25px; line-height:1.16;
}
.ns-bhi-stay-guide__items details{ border-bottom:1px solid #e4e7ec; }
.ns-bhi-stay-guide__items details:last-child{ border-bottom:0; }
.ns-bhi-stay-guide__items summary{
  position:relative; padding:16px 52px 16px 22px; color:#101828;
  font-weight:650; line-height:1.35; cursor:pointer; list-style:none;
}
.ns-bhi-stay-guide__items summary::-webkit-details-marker{ display:none; }
.ns-bhi-stay-guide__items summary::after{
  content:"+"; position:absolute; right:22px; top:50%; width:22px; height:22px;
  margin-top:-11px; color:var(--brand-blue,#2563eb); font-size:22px;
  font-weight:400; line-height:20px; text-align:center;
}
.ns-bhi-stay-guide__items details[open] summary::after{ content:"−"; }
.ns-bhi-stay-guide__items summary:focus-visible{ outline:3px solid var(--brand-coral,#ff5757); outline-offset:-3px; }
.ns-bhi-stay-guide__items p{ margin:0; padding:0 52px 17px 22px; color:#475467; line-height:1.55; }
.ns-bhi-stay-guide__items p a{ color:var(--brand-blue,#2563eb); font-weight:700; }

.ns-bhi-hotel-directory{ margin:0 0 44px; }
.ns-bhi-hotel-directory h2{
  margin:0 0 18px; color:var(--brand-navy,var(--col-primary,#0e2049));
  font-family:var(--font-heading,inherit); font-size:25px;
}
.ns-bhi-hotel-directory ul{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px 30px;
  margin:0; padding:0; list-style:none;
}
.ns-bhi-hotel-directory li{ min-width:0; }
.ns-bhi-hotel-directory a{ display:inline; overflow-wrap:anywhere; font-size:14px; }
.ns-bhi-place-directory{ margin:0 0 44px; }
.ns-bhi-place-directory h2{ margin:0 0 18px; color:var(--brand-navy,var(--col-primary,#0e2049)); font-family:var(--font-heading,inherit); font-weight:700; }
.ns-bhi-place-links{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; border-top:1px solid #dfe4ec; }
.ns-bhi-place-links a{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:12px 0; border-bottom:1px solid #e9edf2; color:var(--brand-navy,var(--col-primary,#0e2049)); font-size:15px; font-weight:600; text-decoration:none; }
.ns-bhi-place-links a:hover{ color:var(--brand-blue,#2563eb); }
.ns-bhi-place-links small{ color:#98a2b3; font-size:13px; font-weight:500; }
/* Country and state overviews are editorial roll-ups, not card directories.
   One destination owns a left label/CTA column and two complete Hotel reviews
   in the right column, matching the reference's Best-hotels-in hierarchy. */
.ns-bhi-results{ display:block; }
.ns-bhi-results .hotel_list_content{
  display:grid; grid-template-columns:minmax(190px,3fr) minmax(0,7fr);
  gap:20px; align-items:start; margin-bottom:54px;
}
.ns-bhi-results .hotel_list_head{ min-width:0; }
.ns-bhi-results .hotel_list_head h2{ margin:0 0 16px; font-size:25px; line-height:1.2; font-weight:700; }
.ns-bhi-results .hotel_list_head h2 a{ color:var(--brand-navy,var(--col-primary,#0e2049)); text-decoration:none; }
.ns-bhi-results .hotel_list_head h2 a:hover{ text-decoration:underline; text-underline-offset:3px; }
.ns-bhi-results .hotel_list_head .buttons{ display:block; margin:0; }
.ns-bhi-results .hotel_list_head .buttons a.btn{ width:100%; max-width:194px; margin:0; }
.ns-bhi-results .hotel_cards{ min-width:0; }
.ns-bhi-results .hotel_card:first-child{ margin-top:0; }
.ns-bhi-results .ns-pagination{ grid-column:2; }
/* The results map is navigation, not editorial content. Keep it with the style
   filters in a sticky browse rail beside the Hotel cards instead of inserting
   a full-width map between the guide and the first result. */
.ns-bhi-results.has-side{ gap:42px; }
.ns-bhi-results.has-side .ns-dest-side{ flex-basis:280px; }
.ns-bhi-results.has-side .ns-dest-side > .ns-style-h:first-child{
  padding-bottom:12px; border-bottom:1px solid #dfe4ec;
}
.ns-bhi-results.has-side .ns-rail-map--browse{ margin-top:28px; }
.ns-bhi-results.has-side .ns-rail-map .map_container{
  height:300px; border:1px solid #dfe4ec; border-radius:10px;
  box-shadow:0 8px 24px rgba(16,24,40,.08);
}
.ns-bhi-results.has-side .hotel_list_content{
  display:block; margin-bottom:54px;
}
.ns-bhi-results.has-side .hotel_list_head{ margin-bottom:18px; }
.ns-bhi-results.has-side .hotel_list_head .buttons a.btn{ max-width:194px; }
@media(min-width:800px) and (max-width:1023.98px){
  .ns-bhi-wts-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ns-bhi-results.has-side{ gap:32px; }
  .ns-bhi-results.has-side .ns-dest-side{ flex-basis:252px; }
  .ns-bhi-results.has-side .hotel_card{ grid-template-columns:1fr; }
  .ns-bhi-results.has-side .hotel_card > .skeleton{
    height:260px!important; min-height:260px; margin:0;
  }
  .ns-bhi-results.has-side .hotel_card .hotel_details{ padding:16px 18px 18px; }
  .ns-bhi-results.has-side .hotel_card .hotel_details .buttons .btn{ width:100%; }
}
@media(max-width:799px){
  .ns-bhi-place-head{ padding:26px 0 14px; }
  .ns-bhi-place-index,
  .ns-bhi-where-to-stay{ margin-bottom:36px; }
  .ns-bhi-place-index__groups{ grid-template-columns:1fr; gap:24px; }
  .ns-bhi-wts-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ns-bhi-wts-card__body{ min-height:126px; padding:13px 14px 15px; }
  .ns-bhi-wts-card strong{ font-size:15px; }
  .ns-bhi-faq{ margin-bottom:40px; }
  .ns-bhi-faq__layout{ grid-template-columns:1fr; }
  .ns-bhi-faq__head{ padding:23px 20px; }
  .ns-bhi-faq__questions{ padding:2px 19px; }
  .ns-bhi-place-links{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.ns-bhi-stay-guide__layout{ grid-template-columns:1fr; }
	.ns-bhi-stay-guide__layout > h2{ padding:22px 20px; font-size:23px; }
	.ns-bhi-hotel-directory ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.ns-bhi-results .hotel_list_content{ display:block; margin-bottom:42px; }
	.ns-bhi-results .hotel_list_head{ margin-bottom:20px; }
	.ns-bhi-results .hotel_list_head .buttons a.btn{ width:100%; max-width:none; }
	.ns-bhi-results.has-side{ gap:36px; }
	.ns-bhi-results.has-side .ns-dest-side{ padding-top:30px; border-top:1px solid #dfe4ec; }
	.ns-bhi-results.has-side .ns-rail-map .map_container{ height:320px; }
}
@media(max-width:559px){
  .ns-bhi-place-actions .links a.btn{ flex-basis:100%; width:100%; }
  .ns-bhi-about__copy p,
  .ns-bhi-about__copy p:first-child{ font-size:15px; line-height:1.65; }
  .ns-bhi-trustline{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ns-bhi-trustline > div{ padding:12px 13px 13px; }
  .ns-bhi-trustline > .ns-bhi-trustline__author{
    grid-column:1/-1; border-bottom:1px solid #e4e7ec;
  }
  .ns-bhi-trustline > .ns-bhi-trustline__author + div{ border-left:0; }
  .ns-bhi-trustline dd{ font-size:13px; }
  .ns-bhi-place-card{ grid-template-columns:1fr; gap:6px; padding:15px 16px; }
  .ns-bhi-place-card em{ grid-column:1; grid-row:auto; margin-top:3px; white-space:normal; }
  .ns-bhi-wts-grid{ grid-template-columns:1fr; }
  .ns-bhi-wts-card{ min-height:0; }
  .ns-bhi-place-links{ grid-template-columns:1fr; }
	.ns-bhi-collections ul,
	.ns-bhi-hotel-directory ul{ grid-template-columns:1fr; }
	.ns-bhi-collections li{ padding:3px 0; }
}
@media (prefers-reduced-motion:reduce){
  .ns-bhi-place-card,
  .ns-bhi-wts-card{ transition:none; }
}

/* ------------------------------------------------------ REPEATED CARD RHYTHM --
   Editorial discovery cards share one responsive image, title, summary and CTA
   rhythm. Reserving each text row keeps every card in a grid aligned even when
   a translation is longer or a source article has no excerpt. */
.locations_menu .articles_grid .content .grid,
.featured_grid .content .grid{ align-items:stretch; }
.locations_menu .articles_grid .content .grid .article_card,
.featured_grid .content .grid .article_card{
  display:flex; flex-direction:column; min-width:0; height:100%;
}
.locations_menu .articles_grid .content .grid .article_card > .ns-article-card__media,
.featured_grid .content .grid .article_card > .ns-article-card__media{
  flex:0 0 auto; margin-bottom:10px;
}
.locations_menu .articles_grid .content .grid .article_card .image-container,
.featured_grid .content .grid .article_card .image-container{
  display:block; height:189px; overflow:hidden;
}
.locations_menu .articles_grid .content .grid .article_card .ns-article-card__title,
.featured_grid .content .grid .article_card .ns-article-card__title{
  min-height:84px; max-height:84px; margin:0 0 10px; overflow:hidden;
  font-size:18px; line-height:21px;
}
.locations_menu .articles_grid .content .grid .article_card .ns-article-card__title > a,
.featured_grid .content .grid .article_card .ns-article-card__title > a{
  display:-webkit-box; margin:0; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:4;
}
.locations_menu .articles_grid .content .grid .article_card .ns-article-card__excerpt,
.featured_grid .content .grid .article_card .ns-article-card__excerpt{
  display:-webkit-box; min-height:102px; max-height:102px; margin:0 0 10px; overflow:hidden;
  font-size:14px; line-height:17px; -webkit-box-orient:vertical; -webkit-line-clamp:6;
}
.locations_menu .articles_grid .content .grid .article_card > .ns-article-card__more,
.featured_grid .content .grid .article_card > .ns-article-card__more{
  width:max-content; max-width:100%; margin:auto 0 0;
}

/* The three Hotel previews under a destination use the same bottom baseline. */
.article_hotels .hotels{ align-items:stretch; }
.article_hotels .hotels .card{ display:flex; flex-direction:column; min-width:0; height:100%; }
.article_hotels .hotels .card .image-container{ flex:0 0 auto; }
.article_hotels .hotels .card p.name{
  display:-webkit-box; min-height:2.8em; max-height:2.8em; overflow:hidden;
  line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.article_hotels .hotels .card p.price{ margin-top:auto; }

@media (min-width:800px){
  .locations_menu .articles_grid .content .grid .article_card .image-container,
  .featured_grid .content .grid .article_card .image-container{ height:220px; }
  .locations_menu .articles_grid .content .grid .article_card .ns-article-card__title,
  .featured_grid .content .grid .article_card .ns-article-card__title{
    min-height:63px; max-height:63px;
  }
  .locations_menu .articles_grid .content .grid .article_card .ns-article-card__title > a,
  .featured_grid .content .grid .article_card .ns-article-card__title > a{ -webkit-line-clamp:3; }
  .locations_menu .articles_grid .content .grid .article_card .ns-article-card__excerpt,
  .featured_grid .content .grid .article_card .ns-article-card__excerpt{
    min-height:119px; max-height:119px; -webkit-line-clamp:7;
  }
}
@media (min-width:1024px){
  .locations_menu .articles_grid .content .grid .article_card .ns-article-card__excerpt,
  .featured_grid .content .grid .article_card .ns-article-card__excerpt{
    min-height:152px; max-height:152px; font-size:16px; line-height:19px; -webkit-line-clamp:8;
  }
}

/* "All Categories" above a destination's guide grid is a navigation chip, not a
   call to action — Location Blue in the reference, where coral is kept for
   "View all" and the booking buttons on the same page. */
.articles_grid .content > div > a.btn{
  background:var(--brand-blue,#2563EB);
  border-color:var(--brand-blue,#2563EB);
}
.articles_grid .content > div > a.btn:hover{
  background:var(--brand-blue-dark,#1D4FD7);
  border-color:var(--brand-blue-dark,#1D4FD7);
}

/* base.css splits the listing card 4fr/5fr, giving the photo 44% of the row.
   The reference gives it 31%, and the difference lands on the text: at 44% the
   description wrapped into half again as many lines, so each card stood ~40%
   taller than the design and only two fitted a screen instead of three.
   Measured: photo 386px of a 1234px card in the reference (31.3%); 3.2fr/7fr
   reproduces that here. */
.hotel_list .hotel_card{ grid-template-columns:3.2fr 7fr; }

/* Listings run the container's FULL twelve columns.
   base.css offsets these bands by one column (`.col-1` spacer + `.col-10`),
   which left every listing ~240px narrower than the reference at 1440px and up.
   The browse rail is 3fr of that grid, so the loss landed there: it came out
   240px instead of 414px, and "Luxury 5 Star Hotels in Miami (10)" wrapped its
   count onto a second line inside every pill. Measured against the reference —
   with the offset gone the rail is 414px at a 1920 viewport, which is exactly
   what the design shows. Applied to the shared .hotel_list block and to the
   guide template's other bands, so the H1, breadcrumb, map and list stay on one
   left edge. */
.hotel_list .row > .col-1,
.single-guide .row > .col-1{ display:none; }
.hotel_list .row > .col-10,
.single-guide .row > .col-10{ width:100%; }

/* =========================================================== STYLES RAIL ===
   THE ONE definition of the "browse by style" menu, for every template that
   renders it. Three markups, one rule; every value is a --ns-rail-* token
   declared once in brand.css, so a change there moves all three at once.
     .dx-cats                          hub pages (hubs.css markup)
     .ns-style-pills                   destination taxonomy + /best-hotels-in/
     .categories_menu .menu_list li a  the Destinations browse menu (base.css)
   This block lives in theme.css because theme.css is the only one of the three
   stylesheets loaded on EVERY template — hubs.css is enqueued on hub pages
   only, which is what let the rails diverge in the first place.
   ⚠️ The .categories_menu selectors are long on purpose: they must outrank
   base.css's own `.locations_menu .locations_menu_container .menu_list li a`
   (0,3,2). Grouped selectors keep their individual specificity, so the short
   .dx-cats / .ns-style-pills forms are unaffected by sharing the block.
   ⚠️ hubs.css loads AFTER this file, so it must not restate any of these
   properties for .dx-cats or it wins on source order. It no longer does.
   ========================================================================= */
.dx-cats,
.ns-style-pills,
.locations_menu .locations_menu_container .categories_menu .menu_list{
	display:flex; flex-direction:column; gap:var(--ns-rail-gap,9px);
}
.dx-cats a,
.ns-style-pills a,
.locations_menu .locations_menu_container .categories_menu .menu_list li a{
	display:block; text-align:center; text-decoration:none;
	background:var(--ns-rail-bg,#fff);
	color:var(--ns-rail-fg,var(--col-primary,#0e2049));
	border:var(--ns-rail-border,1px solid rgba(102,112,133,.25));
	border-radius:var(--ns-rail-radius,999px);
	padding:var(--ns-rail-pad,13px 12px);
	font-size:var(--ns-rail-size,15px);
	font-weight:var(--ns-rail-weight,600);
	line-height:1.35;
	transition:background .18s,border-color .18s,color .18s;
}
.dx-cats a:hover,
.ns-style-pills a:hover,
.locations_menu .locations_menu_container .categories_menu .menu_list li a:hover{
	background:var(--ns-rail-hover-bg,#e7e7e2);
	border-color:var(--ns-rail-hover-border,#2563EB);
	color:var(--ns-rail-hover-fg,#2563EB);
}
/* The count, muted. */
.dx-cats a span,
.ns-style-pills a span,
.locations_menu .locations_menu_container .categories_menu .menu_list li a span{
	color:var(--ns-rail-count,#8a90a3); font-weight:400;
}
/* Inverted current pill. Both hooks are covered because the pill rails mark the
   active row on the <a> while the base.css list marks the <li>. */
.dx-cats a.is-active,
.ns-style-pills a.is-active,
.locations_menu .locations_menu_container .categories_menu .menu_list li.active a,
.locations_menu .locations_menu_container .categories_menu .menu_list li a.active{
	background:var(--ns-rail-active-bg,var(--col-primary,#0e2049));
	color:var(--ns-rail-active-fg,#fff);
}
.dx-cats a.is-active span,
.ns-style-pills a.is-active span,
.locations_menu .locations_menu_container .categories_menu .menu_list li.active a span,
.locations_menu .locations_menu_container .categories_menu .menu_list li a.active span{
	color:var(--ns-rail-active-count,#dfe5f1);
}
/* `display:block` above outranks the UA's [hidden]{display:none}, so a
   collapsed pill would stay on screen without this. */
.dx-cats a[hidden],
.ns-style-pills a[hidden]{ display:none; }
/* Rail headings, wherever they come from.
   ⚠️ `.dx .dx-side h2` (0,2,1), not `.dx-side h2` (0,1,1): hubs.css loads after
   this file and resets `.dx h1,.dx h2,.dx h3{margin:0}` at equal specificity,
   which flattened the heading's bottom margin to 0. `.dx-side` only ever exists
   inside `.dx`, so the extra class costs nothing. */
.dx .dx-side h2,
.ns-dest-side .ns-style-h,
.locations_menu .locations_menu_container h2{
	font-size:var(--ns-rail-head-size,22px); font-weight:600; line-height:1.2;
	color:var(--ns-rail-fg,var(--col-primary,#0e2049));
	margin:0 0 var(--ns-rail-head-space,16px);
}
/* Its "Show more" matches across the rails — left, underlined — rather than the
   right-aligned link base.css's Destinations block uses. */
.locations_menu .locations_menu_container .categories_menu .ns-browse-toggle{display:inline-block;margin:10px 0 0;padding:6px 0;text-decoration:underline;line-height:inherit}
/* ======================================================= end STYLES RAIL === */

/* Rail width and gutter measured off the reference: the rail is ~18.6% of the
   content box and the gutter ~4.4%, which at this template's width is 260/60.
   The old 240px rail was just too narrow for a style label and its count. */
.ns-dest-split{ display:flex; gap:60px; align-items:flex-start; }
.ns-dest-side{ flex:0 0 260px; position:sticky; top:20px; }
.ns-dest-main{ flex:1 1 auto; min-width:0; }
/* Vertical "Destinations in {country}" city list in the left rail — name left,
   muted hotel count right, thin separators (the reference Destinations sidebar). */
.ns-dest-side .ns-city-list{ list-style:none; margin:0 0 6px; padding:0; }
.ns-dest-side .ns-city-list li{ margin:0; }
.ns-dest-side .ns-city-list a{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:9px 0; text-decoration:none; border-bottom:1px solid #e3e1d8; color:var(--col-primary,#0e2049); font-weight:500; font-size:15.5px; transition:opacity .15s; }
.ns-dest-side .ns-city-list li:last-child a{ border-bottom:0; }
.ns-dest-side .ns-city-list a:hover{ opacity:.68; }
.ns-dest-side .ns-city-list li.is-active a{ font-weight:700; }
.ns-dest-side .ns-city-count{ color:#8a90a3; font-weight:400; font-size:14px; }
/* A second heading in the same rail (style pills below the cities) gets top space. */
.ns-dest-side .ns-style-h--stacked{ margin-top:34px; }
.ns-dest-main .hotel_list_content + .hotel_list_content{ margin-top:44px; }
/* With the rail taking 240px, the per-city heading stacks ABOVE its cards
   (the base.css 3fr/7fr head-rail would squeeze the cards). Full width when
   there is no rail keeps the classic head-left grid. */
.ns-dest-split.has-side .hotel_list_content{ display:block; }
.ns-dest-split.has-side .hotel_list_head{ margin-bottom:18px; }
@media (max-width:800px){
	.ns-dest-split{ flex-direction:column; gap:26px; }
	.ns-dest-side{ position:static; flex:1 1 auto; width:100%; }
	/* Stacked on a phone the rail would bury the cards — up to ~1900px down on a
	   place with many styles. Desktop keeps the rail beside the content; mobile
	   always puts the browse links after the hotels they filter, whatever page
	   the rail appears on. */
	.ns-dest-split .ns-dest-side{ order:2; }
	.ns-dest-split .ns-dest-main{ order:1; }
}

/* keyword_links button rows (combo cross-links, destination city rows): base.css
   makes them a NO-WRAP flex row of min-194px buttons, so many items overflow the
   viewport into a horizontal scroll. Wrap instead — few-item rows look identical. */
.keyword_links .links{ flex-wrap:wrap; row-gap:10px; }

/* Guide/listicle gallery below 1024px. base.css only sets the gallery grid
   columns AND the fixed 450px height inside @media(min-width:1024px); under it
   the container is display:grid with no columns and only max-height:450px, so
   the main image renders at its natural height, overflows the cap and spills
   over the About section + accordion (its "1/N" counter and label float
   mid-page). Bound the container and let object-fit:cover crop the image. */
@media (max-width:1023.98px){
  .gallery .gallery_container{
    grid-template-columns:1fr;
    height:clamp(220px,58vw,420px);
    max-height:420px;
    overflow:hidden;
    border-radius:8px;
  }
  .gallery .gallery_container .side_images{ display:none; }
}
/* AND at every width: base.css gives .gallery_container a fixed height but never
   constrains its single grid ROW, so a tall/portrait hotel image grows the row
   past the height and the whole gallery overflows onto the About + accordion
   (the "1/N" counter and photo label float mid-page). Pin the row to the
   container height and crop with object-fit:cover. min-height:0 lets the grid
   cells shrink below their image's intrinsic height. */
.gallery .gallery_container{ grid-auto-rows:1fr; overflow:hidden; }
.gallery .gallery_container .main_image,
.gallery .gallery_container .side_images,
.gallery .gallery_container .side_images .image{ min-height:0; overflow:hidden; }
.gallery .gallery_container .main_image > img,
.gallery .gallery_container .side_images .image > img{ width:100%; height:100%; object-fit:cover; }

/* Nearby landmarks list (single hotel — POI entities + distances, GEO gold). */
.ns-landmarks{ list-style:none; margin:0; padding:0; }
.ns-landmarks li{ padding:12px 0; border-bottom:1px solid var(--hf-border,#e4e7eb); }
.ns-landmarks li:last-child{ border-bottom:0; }
.ns-landmark-name{ margin:0 0 6px; font-weight:700; color:var(--col-primary,#0e2049); }
.hf-controlled .ns-landmark-name a.ns-landmark-link{
  color:var(--brand-blue,#2563EB)!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:3px;
  text-decoration-color:currentColor!important;
}
.hf-controlled .ns-landmark-name a.ns-landmark-link::after{
  content:"\2192";
  display:inline-block;
  margin-left:.38em;
  font-size:.9em;
  line-height:1;
  text-decoration:none;
  transition:transform .15s ease;
}
.hf-controlled .ns-landmark-name a.ns-landmark-link:hover{
  color:var(--brand-blue-dark,#1D4FD7)!important;
  text-decoration-thickness:2px!important;
}
.hf-controlled .ns-landmark-name a.ns-landmark-link:hover::after{transform:translateX(3px)}
.hf-controlled .ns-landmark-name a.ns-landmark-link:focus-visible{
  outline:3px solid var(--brand-sky,#EAF2FF);
  outline-offset:3px;
  border-radius:2px;
}
@media (prefers-reduced-motion:reduce){
  .hf-controlled .ns-landmark-name a.ns-landmark-link::after{transition:none}
}
.ns-landmark-meta{ color:var(--hf-muted,#6b7280); font-size:14px; margin-left:8px; }
.ns-landmark-desc{ margin:4px 0 0; color:var(--col-black,#172033); }

/* ---- Browse rails: "Show more" / "Show less" ----------------------------
   The rails print every row and hide the overflow with [hidden], so crawlers
   still see every link. The toggle is a plain text button, not a pill, so it
   reads as a control rather than as one more destination. */
.ns-browse-toggle{ display:inline-block; margin:10px 0 0; padding:6px 0; background:none; border:0; cursor:pointer;
	font:inherit; font-size:14px; font-weight:600; color:var(--col-primary,#0e2049); text-decoration:underline; text-underline-offset:3px; }
.ns-browse-toggle:hover{ opacity:.68; }
.ns-browse-toggle:focus-visible{ outline:2px solid var(--col-primary,#0e2049); outline-offset:2px; border-radius:2px; }

/* ---- Where-to-stay rail beside an article -------------------------------
   The same rail the /where-to-stay/ hub shows, in the left column of a POI
   roundup. Restated here rather than reused from hubs.css, which is enqueued
   only on the hub pages — a single post should not pull a hub stylesheet in
   for one list. */
.ns-wts-post-menu{ margin-top:26px; }
.ns-wts-post-menu h2{ font-size:20px; font-weight:600; color:var(--col-primary,#0e2049); margin:0 0 12px; }
.ns-wts-post-menu h2.dx-cat-h{ margin-top:30px; }
.ns-wts-post-menu ul{ list-style:none; margin:0; padding:0; }
.ns-wts-post-menu li a{ display:flex; justify-content:space-between; gap:10px; text-decoration:none;
	color:var(--col-primary,#0e2049); font-size:15.5px; font-weight:500; padding:9px 0; border-bottom:1px solid #e3e1d8; }
.ns-wts-post-menu li a:hover{ opacity:.68; }
.ns-wts-post-menu li.is-active a{ font-weight:700; }
.ns-wts-post-menu li a span{ color:#8a90a3; font-weight:400; }

/* ---- Map: grouped pins --------------------------------------------------
   A count disc replaces a crowd of markers that cannot be told apart at the
   current zoom; clicking it zooms to what it holds. */
.ns-cluster{ display:flex; align-items:center; justify-content:center; box-sizing:border-box;
	min-width:34px; height:34px; padding:0 7px; border-radius:999px; border:2px solid #fff;
	background:var(--col-primary,#0e2049); color:#fff; font-size:13px; font-weight:700; line-height:1;
	box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; }
.ns-cluster--lg{ min-width:44px; height:44px; font-size:15px; }
.ns-cluster:hover{ background:var(--col-red,#eb4335); }

.ns-cluster--landmark{ background:var(--ns-col-landmark,#f2a51a); color:#231a05; gap:2px; letter-spacing:.2px; }
.ns-cluster--landmark:hover{ background:var(--col-red,#eb4335); color:#fff; }
.ns-cluster--landmark.is-active{ color:#fff; }

/* The pin (or the disc holding it) belonging to the card being read. */
.ns-pin--active path{ fill:var(--col-red,#eb4335); }
.leaflet-marker-icon .ns-pin--active{ transform:translateY(-3px) scale(1.16); }
.ns-cluster.is-active{ background:var(--col-red,#eb4335); color:#fff; }

/* Key to a map carrying both kinds of marker. */
.ns-map-legend{
	display:flex; flex-wrap:wrap; gap:6px 16px; margin:8px 0 0;
	font-size:12.5px; line-height:1.4; color:#6b7280;
}
.ns-map-legend-item{ display:inline-flex; align-items:center; gap:6px; }
.ns-map-legend-dot{
	width:11px; height:11px; border-radius:50%; border:1.5px solid #fff;
	box-shadow:0 0 0 1px rgba(6,12,28,.18); flex:0 0 auto;
}
.ns-map-legend-dot--landmark{ background:var(--ns-col-landmark,#f2a51a); }
.ns-map-legend-dot--hotel{ background:var(--col-primary,#0e2049); }

/* ---- Where to stay: the map lives in the rail ---------------------------
   Under the browse menu, sticky, so it stays with the reader while the cards
   scroll past and the pins light up in turn. The rail is widened from the hub
   default because a 240px map is a thumbnail, not a map. */
/* Two classes deep on purpose: hubs.css loads after this file and pins every
   `.dx-side` to 240px, which a single-class rule here cannot outrank. */
.dx-body .ns-wts-side{ flex:0 0 320px; }
.ns-rail-map{ margin-top:28px; }
.ns-rail-map .map_container{ position:relative; width:100%; height:400px; overflow:hidden; border-radius:6px; }
.ns-rail-map .ns-map{ width:100%; height:100%!important; }

/* The rail travels with the reader — a map you have scrolled past cannot show
   you where the card you are reading is. A rail taller than the window scrolls
   inside itself rather than pinning its top and hiding the map off-screen. */
.dx-body .ns-wts-side,
.hotel_list_head:has(.ns-rail-map){
	position:sticky; top:20px; align-self:start;
	max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain;
}

/* A rail taller than the window has to scroll inside itself or its map ends up
   permanently off-screen — but the scrollbar track running down the middle of
   the page reads as a stray line, so the rails scroll without drawing one. */
.dx-body .ns-wts-side,
.hotel_list_head:has(.ns-rail-map),
.locations_menu .page_body .locations_menu_container{ -ms-overflow-style:none; scrollbar-width:none; }
.dx-body .ns-wts-side::-webkit-scrollbar,
.hotel_list_head:has(.ns-rail-map)::-webkit-scrollbar,
.locations_menu .page_body .locations_menu_container::-webkit-scrollbar{ width:0; height:0; }

/* The browse rail on a Collection article. base.css styles these lists only
   under `.locations_menu`, which is why the markup carries that class here; the
   section padding it would bring on a hub page is not wanted in a listicle head. */
.ns-post-rail{ margin-top:26px; }
.ns-post-rail .locations_menu_container h2{ font-weight:600; margin:0 0 16px; }
.ns-post-rail .menu > .locations_menu + .categories_menu{ margin-top:30px; }

/* ---- Destinations browse rail: menus, then the map ----------------------
   The rail carries Destinations, Styles and the map, and travels with the
   reader the same way the Where-to-stay rail does — a map scrolled past cannot
   show you where the cards you are reading are. Below 800px base.css already
   drops the rail underneath the grid, so the sticky treatment is desktop-only. */
/* The two menus stack in the rail, so the second heading needs the air the
   original side-by-side layout got from the column gap. Sibling selector: on a
   city page the Destinations list is absent and Styles leads the rail. */
.locations_menu_container .menu > .locations_menu + .categories_menu{ margin-top:30px; }
.ns-rail-map--browse{ margin-top:30px; }
@media(min-width:900px){
	.ns-dest-split.has-side .ns-dest-side{
		position:sticky; top:20px; align-self:start;
		max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain;
		-ms-overflow-style:none; scrollbar-width:none;
	}
	.ns-dest-split.has-side .ns-dest-side::-webkit-scrollbar{ width:0; height:0; }
}
@media(min-width:800px){
	.locations_menu .page_body .locations_menu_container{
		position:sticky; top:20px; align-self:start;
		max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain;
	}
}

/* The same treatment on a Where-to-stay article, whose left column is the
   listicle head rather than a hub sidebar. */
.hotel_list_head .ns-rail-map{ margin-top:26px; }

@media(max-width:1023px){
	.dx-body .ns-wts-side,
	.hotel_list_head:has(.ns-rail-map){
		flex:1 1 auto; width:100%; position:static; max-height:none; overflow:visible;
	}
	.ns-rail-map .map_container{ height:340px; }
}

/* Destination discovery feature pair. base.css already owns the Hotel preview
   and 30/70 menu/grid layout; article_cards was the one reference component it
   did not contain, so its original responsive rules live here. */
.article_cards{display:flex;min-width:0;max-width:100%;margin-bottom:20px;flex-direction:column}
.article_cards .left{overflow:hidden;position:relative;margin-bottom:10px;border-radius:.25rem;aspect-ratio:59/28}
.article_cards .left .ns-destination-lead-link{width:100%;height:100%;display:block;color:inherit;text-decoration:none}
.article_cards .left .ns-destination-lead-link:focus-visible{outline:3px solid var(--col-secondary,#cbe7ff);outline-offset:-3px}
.article_cards .left img{width:100%;height:100%;display:block;object-fit:cover}
.article_cards .left .label{bottom:0;width:100%;padding:1.25rem;position:absolute;color:#fff;box-sizing:border-box;background:rgba(0,0,0,.4)}
.article_cards .left .label b,.article_cards .left .label p{margin:0;font-size:24px;line-height:31px}
.article_cards .right{display:flex;min-width:0;max-width:100%;grid-row-gap:10px;flex-direction:column}
.article_cards .right .card{display:grid;width:100%;min-width:0;max-width:100%;padding:1.25rem;box-sizing:border-box;border-radius:4px;background:#cad3e6;text-decoration:none;grid-column-gap:10px;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.article_cards .right .card b{display:block;font-size:16px;line-height:21px;margin-bottom:12px;color:var(--col-primary,#0e2049)}
.article_cards .right .card p{font-size:14px;overflow:hidden;line-height:18px;display:-webkit-box;-webkit-line-clamp:6;color:var(--col-black,#172033);text-overflow:ellipsis;overflow-wrap:anywhere;-webkit-box-orient:vertical}
.article_cards .right .card span{cursor:pointer;font-size:14px;font-weight:600;line-height:18px;width:max-content;position:relative;color:var(--col-primary,#0e2049)}
.article_cards .right .card span:after{top:4px;width:7px;content:"";right:-13px;height:7px;display:block;position:absolute;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.article_cards .right .card span:hover{text-decoration:underline}
.article_cards .right .card img{width:100%;height:100%;display:block;object-fit:cover;border-radius:4px}
.article_cards .ns-destination-placeholder{width:100%;height:100%;min-height:220px;background:linear-gradient(135deg,var(--col-primary,#0e2049),var(--col-secondary,#cbe7ff))}
.article_cards .right .card>div:first-child{min-height:0;overflow:hidden;border-radius:4px}
.article_cards .right .card>div{min-width:0}
.locations_menu .locations_menu_container .ns-browse-toggle{display:block;margin:8px 0 8px auto;padding:0;text-decoration:none;line-height:24px}
.locations_menu .locations_menu_container .ns-browse-toggle:hover{text-decoration:underline}

/* ---------------------------------------------------------------- MOBILE NAV
   base.css ships the CLOSED half of the mobile menu only. Below 1024px it turns
   #menu-list into a fixed full-width panel and sets display:none; theme.js
   toggles `.show` on .menu_container when the hamburger is tapped — and no rule
   in any stylesheet responds to that class (the only `.show` rule in the sheet
   belongs to the currency switcher). So the button has never opened anything.
   This is the missing open state.
   top:58px is the real height of the mobile header; base.css assumed 60px,
   which left a 2px strip of the page showing above the panel. */
@media (max-width:1023.98px){
	.header .menu_container.show #menu-list{
		display:flex;
		top:58px;
		/* base.css builds a full-screen navy drawer with the links centred
		   (height:calc(100dvh - 120px), align/justify:center, width:100vw,
		   background:var(--col-primary)). On the white brand header a sheet that
		   size for three links is out of proportion, so this is a panel that
		   hangs under the header instead: auto height, rows stretched full width.
		   right:0 with width:auto rather than base's 100vw — 100vw counts the
		   scrollbar, and its 40px of side padding sat OUTSIDE it, which made the
		   panel 415px wide in a 375px viewport and scrolled the page sideways. */
		right:0;
		width:auto;
		height:auto;
		box-sizing:border-box;
		align-items:stretch;
		justify-content:flex-start;
		padding:8px 20px 20px;
		row-gap:0;
		background:#fff;
		border-top:1px solid var(--brand-border,rgba(102,112,133,.25));
		box-shadow:0 14px 28px rgba(16,24,40,.14);
		max-height:calc(100dvh - 58px);
		overflow-y:auto;
	}
	/* Three classes beat brand.css's `header.header #menu-list{background:transparent}`
	   (1,3,0 vs 1,1,1), which is what keeps the open panel opaque. */
	.header .menu_container.show #menu-list > li{width:100%}
	.header .menu_container.show #menu-list > li > a{display:block;padding:14px 2px;font-size:17px;font-weight:600;border-bottom:1px solid var(--brand-border,rgba(102,112,133,.25))}
	.header .menu_container.show #menu-list > li:last-child > a{border-bottom:0}
}

/* On a phone the browse rail always FOLLOWS the content it filters.
   .dx-body and .ns-dest-split already do this in their own blocks; these are
   the two rails that were left, and they are the ones that hurt most — both sit
   inside .hotel_list_head, the 3fr column of a grid base.css only builds from
   800px up. Below that the head simply stacked first, so a Collection article
   opened with ~930px of Destinations, Styles and map before a single word of
   the piece, and a POI roundup did the same.
   `display:contents` dissolves the head's box so its H1 and its rail become
   items of the same flex column as the body and can be ordered apart. At this
   width the head carries no background, border, padding or margin of its own,
   so there is no box to lose. The H1 selector is one element more specific than
   the `> *` catch-all, which is what keeps the heading on top. */
@media (max-width:799.98px){
	.hotel_list .hotel_list_content{display:flex;flex-direction:column}
	.hotel_list .hotel_list_content > .hotel_list_head{display:contents}
	.hotel_list .hotel_list_content > .hotel_list_head > *{order:3}
	.hotel_list .hotel_list_content > .hotel_list_head > h1{order:1}
	.hotel_list .hotel_list_content > .hotel_list_body{order:2}
	.hotel_list .hotel_list_content > .hotel_list_head > .locations_menu,
	.hotel_list .hotel_list_content > .hotel_list_head > .ns-wts-post-menu,
	.hotel_list .hotel_list_content > .hotel_list_head > .ns-rail-map{margin-top:34px}
	/* Country/state Best Hotels In rollups deliberately keep each child place's
	   heading and View all action together above its two full hotel previews. */
	.ns-bhi-results .hotel_list_content{display:block}
	.ns-bhi-results .hotel_list_content > .hotel_list_head{display:block;margin-bottom:20px}
	.ns-bhi-results .hotel_list_content > .hotel_list_head > *{order:initial}
	/* The Destinations/Collection discovery grid: same intent, and here the rail
	   is already a direct child so it only needs ordering. base.css sets
	   `order:2` on it at this width but `.page_body` is not a flex container
	   below 800px, so the declaration never applied. */
	.locations_menu .page_body{display:flex;flex-direction:column}
	.locations_menu .page_body > .locations_menu_container{order:2;margin-top:34px}
	.locations_menu .page_body > .articles_grid{order:1}
}

.ns-directory-map-wrap{padding-bottom:50px}
.ns-directory-map{margin:0 0 34px}
.ns-directory-map--bottom{margin:46px 0 64px}
.ns-directory-map h2{margin:0 0 16px;font-size:24px;line-height:29px;font-weight:600;color:var(--col-primary,#0e2049)}
.ns-directory-map .map_container{overflow:hidden;border-radius:8px}
.locations_menu .articles_grid .ns-directory-map--center{margin:5px 0 30px}
.ns-best-hotels-page .ns-directory-map--top{margin-bottom:34px}
.ns-best-hotels-page .ns-directory-map--center{margin-bottom:34px}
.ns-best-hotels-page .ns-directory-map--bottom{margin-bottom:0}
@media(min-width:800px){
	.article_cards{display:grid;margin-bottom:50px;grid-column-gap:40px;grid-template-columns:5fr 4fr;align-items:stretch}
	/* The panorama and the two guide cards are one editorial unit. The mobile
	   panorama uses a deliberate 59:28 crop, but keeping that ratio on desktop
	   made the left block stop hundreds of pixels before the stacked cards. Let
	   the grid row determine its height here: it now follows whatever height the
	   translated card copy on the right actually needs. */
	.article_cards .left{margin-bottom:0;align-self:stretch}
	/* With both companion guides present, their combined content height is the
	   sizing authority. Absolutely positioning the lead link removes the photo's
	   intrinsic 4:3 height from grid measurement; the left grid cell still
	   stretches normally, and object-fit crops the panorama to the exact shared
	   top/bottom baseline. A destination with only one companion keeps the
	   original panoramic ratio instead of collapsing to a shallow strip. */
	.article_cards:has(.ns-where-to-stay-card) .left{aspect-ratio:auto;min-height:0}
	.article_cards:has(.ns-where-to-stay-card) .left .ns-destination-lead-link{position:absolute;inset:0}
	.article_cards .right{grid-row-gap:20px}
}

/* People-Also-Ask style FAQ. Every answer is in the HTML expanded; theme.js
   collapses them and animates height, so the text survives without JavaScript
   and the panel is never a fixed pixel height once it has finished opening. */
.ns-paa{border-top:1px solid var(--hf-border,#e4e7eb)}
.ns-paa-item{border-bottom:1px solid var(--hf-border,#e4e7eb)}
.ns-paa-h{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.ns-paa-btn{
	display:flex;align-items:flex-start;gap:16px;width:100%;
	margin:0;padding:15px 2px;border:0;border-radius:4px;background:none;
	font:inherit;text-align:left;color:var(--hf-text,var(--col-primary,#0e2049));cursor:pointer;
}
.ns-paa-q{flex:1 1 auto;font-size:17px;font-weight:600;line-height:1.4}
.ns-paa-icon{
	flex:0 0 20px;width:20px;height:20px;margin-top:2px;opacity:.6;
	transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.ns-paa-icon svg{
	display:block;width:100%;height:100%;
	fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.ns-paa-btn[aria-expanded="true"] .ns-paa-icon{transform:rotate(180deg)}
.ns-paa-btn:hover .ns-paa-q{text-decoration:underline}
.ns-paa-btn:focus-visible{outline:2px solid var(--hf-accent,var(--col-primary,#0e2049));outline-offset:-2px}
.ns-paa-panel{overflow:hidden}
.ns-paa-answer{padding:0 0 17px}
.ns-paa-answer > :last-child{margin-bottom:0}
.ns-paa-js .ns-paa-panel{transition:height .3s cubic-bezier(.4,0,.2,1)}
@media(prefers-reduced-motion:reduce){
	.ns-paa-js .ns-paa-panel,.ns-paa-icon{transition-duration:0s}
}

/* ------------------------------------------------------------------ *\
   SEARCH BAR — the submit button must not reveal the bar behind it.
   The button carries the brand 10px radius while .dx-searchbar /
   .hx-searchbar were square and white, so the button's rounded right
   corners showed two white notches. Give the bar the same radius and
   clip it: one silhouette, no notch, and the corner stays rounded.
\* ------------------------------------------------------------------ */
.dx-searchbar,
.hx-searchbar{
  border-radius: var(--brand-radius-sm, 10px);
  overflow: hidden;
}
.dx-searchbar .dx-btn-search,
.hx-searchbar .hx-btn-search{
  border-radius: 0;          /* the bar's own clip supplies the corner */
  align-self: stretch;
  height: auto;
}

/* ------------------------------------------------------------------ *\
   HOTEL CARD — the photo fills its column.
   base.css pins .skeleton and the img to 25rem, so a card whose text
   ran taller than 400px left dead white space under the photo. The
   image column is a grid item, so stretching it and letting the img
   cover gives image and text the same height at every width.
\* ------------------------------------------------------------------ */
.hotel_card > .skeleton{
  height: auto !important;
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
}
.hotel_card > .skeleton > a{ display: block; height: 100%; }
.hotel_card > .skeleton img,
.hotel_card > .skeleton > a > img{
  height: 100% !important;
  width: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}

/* Full-size listing cards use their 20px grid gap as the left inset beside the
   photo. Match it on the other three edges so the right-aligned rate and coral
   Booking button do not touch the rounded card border. Compact roll-up cards
   have a more specific two-column skin above and keep their own padding. */
@media (min-width:800px){
  .hotel_card .hotel_details{
    box-sizing:border-box;
    padding:18px 20px 20px 0;
  }
}

/* On the dark search band the navy CTA is the band's own colour, so the button
   only registered because of the white notches the clip above removed. Invert
   it there — the same treatment base.css ships as `.btn.light`. Bars that sit
   on a photo or on Sky Tint keep the navy button. */
.dx-searchband .dx-btn-search{
  background: #fff;
  border-color: #fff;
  color: var(--brand-navy, #101828);
}
.dx-searchband .dx-btn-search:hover{
  background: var(--brand-sky, #EAF2FF);
  border-color: var(--brand-sky, #EAF2FF);
  color: var(--brand-navy, #101828);
}

/* ------------------------------------------------------------ MOBILE CARDS --
   Stacked on a phone, the listing card's copy sat flush against the card's own
   border on all four sides — base.css relies on the desktop grid's 20px column
   gap for that breathing room, and there is no column when the photo is on top.
   The roll-up grid already pads its details; this is the row card. */
@media (max-width:799.98px){
  .hotel_card{ grid-template-columns:1fr; }
  .hotel_card .hotel_details{ padding:14px 16px 16px; }
  .hotel_card .skeleton{ margin:0; }
  /* Full-width CTA rather than a 194px button floated against the edge. */
  .hotel_card .hotel_details .buttons .btn{ width:100%; }
}

/* base.css paints the listing card's rate black from `.hotel_card
   .hotel_details .price b` (0,3,1), which outranks the brand sheet's coral
   `.hf-price` (0,1,0) — so every listing card showed a black price while the
   reference has the amount coral and the "from" muted. */
.hotel_card .hotel_details .price b .hf-price{ color:var(--brand-coral,#F97066); }
.hotel_card .hotel_details .price b > span:first-child{ color:var(--brand-slate,#667085); font-weight:500; }

/* ------------------------------------------------------- CARD PAGINATION --
   One quiet, touch-friendly navigator for all four browse families. The page
   count remains visible instead of relying on number buttons alone. */
.ns-pagination{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:32px 0 12px;
  padding-top:20px;
  border-top:1px solid var(--brand-mist,#D0D5DD);
}
.ns-pagination__summary{
  color:var(--brand-slate,#667085);
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}
.ns-pagination__links{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:7px; }
.ns-pagination a{ text-decoration:none; }
.ns-pagination__number,
.ns-pagination__direction{
  min-width:40px;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  border:1px solid var(--brand-mist,#D0D5DD);
  border-radius:999px;
  background:#fff;
  color:var(--brand-navy,#101828);
  font-size:14px;
  font-weight:700;
  line-height:1;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.ns-pagination__direction{ gap:7px; padding:0 15px; }
.ns-pagination__number:hover,
.ns-pagination__direction:hover{
  text-decoration:none;
  border-color:var(--brand-navy,#101828);
  background:var(--brand-sky,#EAF2FF);
  transform:translateY(-1px);
}
.ns-pagination__number:focus-visible,
.ns-pagination__direction:focus-visible{
  outline:3px solid color-mix(in srgb,var(--brand-coral,#F97066) 45%,transparent);
  outline-offset:2px;
}
.ns-pagination__number.is-current{
  border-color:var(--brand-navy,#101828);
  background:var(--brand-navy,#101828);
  color:#fff;
}
.ns-pagination__ellipsis{ min-width:18px; text-align:center; color:var(--brand-slate,#667085); }
@media (max-width:699.98px){
  .ns-pagination{ flex-direction:column; align-items:stretch; margin-top:24px; }
  .ns-pagination__summary{ text-align:center; }
  .ns-pagination__links{ justify-content:center; gap:6px; }
  .ns-pagination__number,
  .ns-pagination__direction{ min-width:42px; min-height:42px; }
  .ns-pagination__direction{ padding:0 12px; }
}

/* ------------------------------------------------------ CONTACT FORM NOTICE --
   The contact form is the only way to reach the site now that no email address
   is printed anywhere, so its two outcomes have to be unmissable rather than a
   line of body text. Both sit in column 1 of `.contact_container`'s 8fr/4fr
   grid — the slot the form itself occupies — so the `.contact_block` panel
   beside them does not move when either appears. */
.ns-form-notice{
  padding:16px 18px;
  border-radius:6px;
  border:1px solid transparent;
  margin:0 0 20px 0;
}
.ns-form-notice p{ margin:0 0 6px 0; font-size:15px; line-height:22px; }
.ns-form-notice p:last-child{ margin-bottom:0; }
.ns-form-notice ul{ margin:0; padding-left:20px; }
.ns-form-notice li{ font-size:15px; line-height:22px; }
.ns-form-notice--ok{
  border-color:#A6E9C3;
  background:#ECFDF3;
  color:#05603A;
}
.ns-form-notice--error{
  border-color:#FDA29B;
  background:#FEF3F2;
  color:#B42318;
}
/* Sent: the form is replaced by the notice, so nothing is left to fill the grid
   column. Let the notice take the column rather than shrink to its own text. */
.contact_container > .ns-form-notice{ align-self:start; }

/* ---------------------------------------------------- AUTHOR PROFILE MAP --
   base.css styles .map_container for ONE job — the search page's floating
   overlay — and does it with `width:95%` plus `top:50%;left:50%` and a
   centring transform. Dropped into normal flow at the foot of a profile, that
   translate(-50%,-50%) lifted the map by half its own height, so it climbed
   over the last row of cards and still ran nearly the full width beneath them.
   Put it back in flow, then give it the whole width of the page.

   It used to sit in column 2 of the profile's 3fr/7fr grid, lined up with the
   cards. One map standing for every hotel on the page is the widest thing the
   profile shows and the only one a reader scans geographically, so it spans
   both columns instead: the 3fr heading rail is empty at that point anyway,
   and at 7/10ths width the pins for a country-sized spread sat on top of each
   other. */
.static_page .ns-author-map .map_container{
  position:relative;
  top:auto; left:auto; transform:none;
  width:100%;
  /* Grows with the viewport instead of the single fixed number the search
     overlay wants, but never so tall that the pager below it leaves the fold. */
  height:clamp(380px,58vh,680px);
  overflow:hidden;
  border-radius:6px;
}
/* nearstay_map_pins() prints one fixed pixel height inline on .ns-map, which
   would crop or letterbox inside the responsive container above. The container
   owns the height here; the map fills it. */
.static_page .ns-author-map .ns-map{ height:100%!important; }
@media (min-width:800px){
  /* .static_content is the profile's 3fr/7fr grid — both columns. */
  .static_page .ns-author-map .static_content > .map_container{ grid-column:1 / -1; }
}

/* -------------------------------------------- AUTHOR PROFILE CARD LINKS --
   Each card was a single anchor wrapping image, title and location, which is
   why the location could only ever be plain text — an <a> cannot hold another
   <a>. The card is now an image link plus a title link, with the place trail
   as sibling links beside them (author.php, nearstay_card_place_links()).

   Two base.css rules were written for the old shape and have to be answered
   here, both under the full `.static_page .favourites_container .favourites`
   prefix they carry — anything shorter loses to them on specificity no matter
   that this file loads second:

     .author_favourites a          full-height block in fixed 15px card type.
                                   `height:100%` was written for an anchor that
                                   WAS the whole card. Now that it wraps only
                                   the image, that 100% resolves against the
                                   li — which is itself sized by its content —
                                   and the anchor claimed the entire tile. The
                                   details block was pushed to start exactly
                                   where the beige tile ended, so every title
                                   and place line sat outside its own card,
                                   looking like a caption for the row below.
                                   All three descendants are put back to auto.
     .author_favourites_hotels
       li a p                      gave the title its 18px. The title's <p> is
                                   no longer inside an anchor, so that rule
                                   stopped matching altogether and the type is
                                   restored below instead. */
.static_page .favourites_container .favourites .author_favourites li .hotel_title{
  margin:0 0 4px 0;
  font-size:18px;
  font-weight:600;
  line-height:22px;
  color:var(--col-black);
}
/* The image link: a block, as base.css wants, but only as tall as its image. */
.static_page .favourites_container .favourites .author_favourites li a.ns-card-media{
  height:auto;
  display:block;
}
.static_page .favourites_container .favourites .author_favourites li .hotel_title a,
.static_page .favourites_container .favourites .author_favourites li .ns-card-places a,
.static_page .favourites_container .favourites .author_favourites li .ns-card-places .ns-card-place{
  height:auto;
  display:inline;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
}
.static_page .favourites_container .favourites .author_favourites li .hotel_title a{
  color:inherit;
  text-decoration:none;
}
.static_page .favourites_container .favourites .author_favourites li .hotel_title a:hover{
  opacity:.72;
  text-decoration:none;
}
.static_page .favourites_container .favourites .author_favourites li .ns-card-places{
  margin:0;
  font-size:14px;
  font-weight:400;
  line-height:19px;
  color:var(--brand-slate,#667085);
}
/* Colour rather than an underline: this is three or four links on one dense
   card, and the site's optional no-underline mode is about exactly this kind
   of chrome. The underline returns on hover, so a target is never ambiguous
   once it is pointed at. */
.static_page .favourites_container .favourites .author_favourites li .ns-card-places a,
body.no-underlines .static_page .favourites_container .favourites .author_favourites li .ns-card-places a{
  color:var(--brand-blue,#2563EB);
  text-decoration:none;
}
.static_page .favourites_container .favourites .author_favourites li .ns-card-places a:hover{
  color:var(--brand-blue-dark,#1D4FD7);
  text-decoration:underline;
  text-underline-offset:3px;
}
.static_page .favourites_container .favourites .author_favourites li .ns-card-places a:focus-visible{
  outline:3px solid rgba(37,99,235,.28);
  outline-offset:2px;
  border-radius:2px;
}
/* The image link is decorative — the title link beside it goes to the same
   page — so it must not pick up the hover underline base.css gives every
   anchor in this grid. */
.static_page .favourites_container .favourites .author_favourites li a.ns-card-media:hover{
  text-decoration:none;
}