/* HOTEL PAGES (venue_kind stay), on top of city.css and the venue layout's own
   <style>. Written by gen-venue-pages.mjs through lib/stay-page.mjs; the map is
   stay.js. Kept out of city.css on purpose: that file is shared by town,
   big-city and venue pages. Type and rules follow full-town.css so a hotel page
   reads as part of the town page it hangs off. */

/* ---- the booking link, at the head ---- */
.st-bookwrap{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto;padding-top:6px}
.st-book{display:inline-block;font:600 14px/1 'Inter',sans-serif;letter-spacing:.01em;color:#F4F4F2;background:var(--ink);
  border:1px solid var(--ink);border-radius:999px;padding:15px 24px;text-decoration:none;white-space:nowrap;transition:background .16s,color .16s}
.st-book:hover{background:#fff;color:var(--ink)}
.st-booknote{font:400 12px 'Inter',sans-serif;color:var(--muted)}
@media(max-width:760px){
  .st-bookwrap{align-items:center;padding-top:0;margin-top:22px}
  .st-book{padding:15px 26px}
}

/* ---- section heads in the column: the town page's, not 9px labels ---- */
body.stay .vsec{gap:14px}
body.stay .vsec h2{font:800 clamp(22px,2.4vw,28px)/1.05 'Archivo',sans-serif;text-transform:uppercase;
  letter-spacing:.01em;color:var(--ink);margin:12px 0 4px}
body.stay .vcol{gap:clamp(22px,2.6vw,32px)}
body.stay .vverdict{font-size:clamp(22px,2.8vw,32px)}
/* Know before you go as the full venue page sets it: a bold label over the line,
   under a dashed rule, no box. */
body.stay .vnote{margin-top:clamp(6px,1vw,12px);padding:18px 0 0;border:0;border-top:1px dashed var(--dash);
  background:none;font-size:clamp(16px,1.5vw,17.5px);line-height:1.7;color:var(--ink)}
body.stay .vnote .k{display:block;margin:0 0 10px;font:800 15px/1.2 'Archivo',sans-serif;letter-spacing:.04em;color:var(--ink)}
/* The FAQ link in the town page's gold, bold (2026-11-08). */
body.stay .vfaqbar button,body.stay .vfaqbar a{color:var(--gold);font-weight:700}
/* Black links, as on the town page. */
body.stay .vhead .crumbs a,body.stay .vrecord .what a,body.stay .vdetail dd a{color:var(--ink)}
body.stay .vdetail dd a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
body.stay .vdetail dd a:hover{text-decoration-color:var(--ink)}
/* Without the locator map the rail is a short list; it stops being sticky. */
body.stay .vlocator{position:static}

/* ---- shared section furniture ---- */
.st-wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,5vw,44px)}
.st-h{font:800 clamp(26px,3.4vw,40px)/1.02 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin:0}
.st-sub{font:400 clamp(16px,1.5vw,18px)/1.55 'Lora',Georgia,serif;color:var(--ink-2);margin:12px 0 0}
.st-eyebrow{font:400 11px 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin:0 0 12px}
.st-btn{display:inline-block;margin-top:24px;padding:13px 22px;border-radius:999px;background:#0E0E10;color:#fff;
  font:600 13.5px/1 'Inter',sans-serif;text-decoration:none;transition:background .16s}
.st-btn:hover{background:#2a2a2e}

/* ---- things to do near the hotel: list beside the map ---- */
.st-near{border-top:1px dashed var(--dash);padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,64px)}
.st-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,3.4vw,48px);margin-top:clamp(24px,3vw,36px);align-items:stretch}
.st-listcol{display:flex;flex-direction:column;min-width:0}
.st-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.st-list li{border-bottom:1px solid var(--line)}
.st-item{display:grid;grid-template-columns:116px minmax(0,1fr);gap:16px;padding:16px 0;color:inherit;text-decoration:none}
.st-thumb{display:block;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden}
.st-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.st-noimg{display:block;width:100%;height:100%}
.st-item:hover .st-thumb img,.st-item.on .st-thumb img{transform:scale(1.04)}
.st-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.st-meta{font:400 12.5px 'Inter',sans-serif;color:var(--muted)}
.st-meta b{font-weight:600;color:var(--ink)}
.st-name{font:800 17px/1.2 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.st-item:hover .st-name,.st-item.on .st-name{text-decoration:underline;text-underline-offset:3px}
.st-best{font:600 12.5px/1.3 'Inter',sans-serif;color:var(--gold)}
.st-desc{font:400 14px/1.55 'Lora',Georgia,serif;color:var(--ink-2);margin-top:2px}
/* The map is as tall as the list beside it and does not move on scroll; the
   list pages (stay.js) instead of running on past it (owner, 2026-11-08). */
.st-mapcol{display:flex;flex-direction:column;min-width:0}
.st-map{width:100%;flex:1;min-height:420px;background:var(--bg-2);border:1px solid var(--line-strong)}
.st-list li[hidden]{display:none}
.st-pager{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:auto;padding-top:16px;
  font:400 13px 'Inter',sans-serif;color:var(--muted)}
.st-pager[hidden]{display:none}
.st-pg{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:none;color:var(--ink);
  font:400 20px/1 'Inter',sans-serif;cursor:pointer;display:grid;place-items:center;padding:0 0 2px}
.st-pg:hover{border-color:var(--ink)}
.st-pg:disabled{opacity:.35;cursor:default;border-color:var(--line-strong)}
.st-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.st-mapcol:fullscreen .st-map{max-height:none;height:100%;aspect-ratio:auto}
/* Full screen: the column keeps the page ground, so the key is not grey on black. */
.st-mapcol:fullscreen{background:var(--bg);padding:0 0 12px}
.st-mapcol:-webkit-full-screen{background:var(--bg);padding:0 0 12px}
.st-mapcol:-webkit-full-screen .st-map{max-height:none;height:100%;aspect-ratio:auto;border:0}
.st-mapcol:fullscreen .st-map{border:0}
.st-mapcol:fullscreen .st-key,.st-mapcol:-webkit-full-screen .st-key{padding:0 16px}
.st-key{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0;font:400 12.5px 'Inter',sans-serif;color:var(--muted)}
.st-k{width:14px;height:14px;border-radius:50%;display:inline-block;border:2px solid #fff;box-shadow:0 0 0 1px var(--line-strong)}
.st-k-h{background:var(--gold)}
.st-k-p{background:var(--ink);margin-left:12px}
@media(max-width:900px){
  .st-grid{grid-template-columns:1fr}
  .st-mapcol{order:-1}
  .st-map{flex:none;aspect-ratio:4/3;min-height:0}
}
@media(max-width:560px){
  .st-item{grid-template-columns:92px minmax(0,1fr);gap:13px;padding:14px 0}
  .st-name{font-size:15.5px}
  .st-desc{font-size:13.5px}
}

/* ---- map pins ---- */
.st-pin{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:block}
/* The look is on the inner span, never the button: MapLibre positions a marker
   by writing the button's transform, and both a transform and a `scale` here
   moved the pin itself (the `scale` property multiplies the marker's translate),
   so hovering threw it off the cursor and the click never landed (owner,
   2026-11-08: "the popups seem finicky"). */
.st-pin-in{display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;border-radius:50%;
  border:2px solid #fff;background:var(--ink);color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);
  font:700 11px/1 'Inter',sans-serif;transition:transform .15s,background-color .15s}
.st-pin.on{z-index:3}
.st-pin.on .st-pin-in{transform:scale(1.25);background:var(--gold)}
.st-pin.hotel{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:2px solid #fff;background:var(--gold);cursor:default;z-index:4;box-shadow:0 0 0 5px rgba(156,111,18,.22),0 2px 8px rgba(0,0,0,.35)}
.st-pin.hotel svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-pin:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* The popup over every pin, the hotel's included. */
.st-map .maplibregl-popup{z-index:10}
.maplibregl-popup-content{font:400 13px/1.4 'Inter',sans-serif;padding:12px 14px;border-radius:2px}
.maplibregl-popup-content .st-pop b{display:block;font:800 14px/1.2 'Archivo',sans-serif;text-transform:uppercase;color:var(--ink)}
.maplibregl-popup-content .st-pop span{display:block;color:var(--muted);margin-top:3px}
.maplibregl-popup-content .st-pop a{display:table;margin-top:9px;padding:8px 14px;border-radius:999px;background:#0E0E10;color:#fff;font:600 12.5px/1 'Inter',sans-serif;text-decoration:none}

/* ---- the town ---- */
.st-town{border-top:1px dashed var(--dash);padding:clamp(48px,6vw,84px) 0}
.st-townin{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.st-townin.noimg{grid-template-columns:minmax(0,720px)}
.st-townimg{display:block;aspect-ratio:4/3;overflow:hidden}
.st-townimg img{width:100%;height:100%;object-fit:cover;display:block}
.st-towntxt p:not(.st-eyebrow){font:400 clamp(16px,1.55vw,18.5px)/1.7 'Lora',Georgia,serif;color:var(--ink-2);margin:16px 0 0}
@media(max-width:900px){.st-townin{grid-template-columns:1fr}}

/* ---- one Book button, one map ----
   The booking link is at the head now, so the rail's Book row and the phone
   copy under the band go; with the live map below, the rail's static map goes. */
body.stay .vbookrow,body.stay .vbookm{display:none!important}
body.staymap .vlocator .vmap,body.staymap .vlocator .vmaplink{display:none}

/* No Directions row on a hotel (owner, 2026-11-08). With the live map below and
   nothing left in the rail, the rail goes and the prose takes the column. */
body.staymap .vlocator:not(:has(.vdetail > div:not(.vbookrow), .vtickets, .st-stats)){display:none}
body.staymap .vbody:not(:has(.vlocator .vdetail > div:not(.vbookrow), .vlocator .vtickets, .vlocator .st-stats)){grid-template-columns:minmax(0,64ch)}

/* ---- DESKTOP SET LIKE THE PHONE (owner, 2026-11-08: "mobile looks good,
   desktop needs serious work"). One centred axis down the page, as on the town
   page: the name, its kind, the Book button and the trail centred over the
   standfirst, and the prose one centred column instead of a left column beside
   an empty rail. ---- */
@media(min-width:761px){
  body.stay .vhead{padding-top:clamp(40px,4.4vw,60px);text-align:center}
  body.stay .vtitle{display:flex;flex-direction:column;align-items:center;gap:0}
  body.stay .vhead h1{margin:0 auto;max-width:18ch}
  body.stay .vkind{display:block;margin-top:14px;font-family:'Space Mono',monospace;font-size:11px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
  body.stay .st-bookwrap{align-items:center;padding-top:0;margin-top:26px}
  /* The trail runs under the name and its Book button, above the standfirst,
     as the town page runs it above its lede (owner, 2026-11-08). */
  body.stay .vhead .crumbs{order:0;margin:clamp(22px,2.4vw,30px) 0 0;text-align:center;
    font:500 13px 'Inter',sans-serif;letter-spacing:0;text-transform:none;color:var(--muted)}
  body.stay .vhead .crumbs a{color:var(--ink)}
  /* A hotel sells on its pictures: the photograph runs near the full screen,
     with nothing laid over it but the credit and Submit a photo. */
  body.stay .c-hero{height:min(84vh,920px);min-height:520px}
  body.stay .vrecord{display:none}
  body.stay .vstand{margin-top:clamp(34px,3.6vw,48px)}
  body.staymap .vbody:not(:has(.vlocator .vdetail > div:not(.vbookrow), .vlocator .vtickets, .vlocator .st-stats)){
    grid-template-columns:minmax(0,720px);justify-content:center}
}

/* The Book button sits directly under the name (owner, 2026-11-08). The "Hotel"
   kind line goes: the standfirst's byline already says Hotel, Valletta. */
body.stay .vkind{display:none!important}
body.stay .st-bookwrap{margin-top:clamp(20px,2.2vw,28px)}

/* ---- THE HOTEL, the right-hand column beside the prose: the hotel's own
   facts, one per row, the label in Inter, the value in Archivo, its gloss in
   Lora. Static: nothing moves on scroll. Below 900px it follows the prose. ---- */
body.stay .vbody{grid-template-columns:minmax(0,64ch) minmax(260px,320px);justify-content:space-between;column-gap:clamp(40px,5vw,80px)}
@media(max-width:900px){body.stay .vbody{grid-template-columns:1fr}}
.st-stats{border-top:2px solid var(--ink);padding-top:16px}
.st-stats h2{font:800 clamp(20px,1.9vw,24px)/1.05 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin:0 0 6px}
.st-stats dl{margin:0}
.st-stats dl > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.st-stats dt{font:500 13px/1.35 'Inter',sans-serif;color:var(--muted);padding-top:2px}
.st-stats dd{margin:0;min-width:0}
.st-stats dd b{display:block;font:700 17px/1.25 'Archivo',sans-serif;color:var(--ink)}
.st-stats dd span{display:block;margin-top:4px;font:400 14px/1.5 'Lora',Georgia,serif;color:var(--ink-2)}
/* The rail's empty list under the panel goes: no stray rule. */
body.stay .vlocator .vdetail:not(:has(> div:not(.vbookrow))){display:none}

/* ---- THE LOCATOR, the top of the right-hand column (owner, 2026-11-08):
   the country's outline (data/outlines/, lib/stay-page.mjs > stayLocatorHtml)
   in limestone on the paper, the hotel's pin and name, a scale bar in km. ---- */
body.stay{--st-land:#E5DAC2;--st-coast:#B4A07A}
.st-loc{margin:0}
.st-loc svg{display:block;width:100%;height:auto;overflow:visible}
.st-loc-land{fill:var(--st-land);stroke:var(--st-coast);stroke-width:.8;stroke-linejoin:round}
.st-loc-ring{fill:none;stroke:var(--ink);stroke-width:1;opacity:.4}
.st-loc-pin{fill:var(--ink);stroke:var(--bg);stroke-width:2}
.st-loc-n,.st-loc-t{paint-order:stroke;stroke:var(--bg);stroke-width:3.5px;stroke-linejoin:round}
.st-loc-n{font:800 11.5px 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.02em;fill:var(--ink)}
.st-loc-t{font:500 11px 'Inter',sans-serif;fill:var(--muted)}
.st-loc-scale path{fill:none;stroke:var(--ink-2);stroke-width:1}
.st-loc-scale text{font:400 9.5px 'Space Mono',monospace;fill:var(--muted)}
.st-loc figcaption{margin-top:8px;font:400 10.5px/1 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* The outline opens the country on the globe (owner, 2026-11-08). */
.st-loc-go{display:block;color:inherit}
.st-loc-go:hover .st-loc-land{fill:#DCCDAE}
.st-loc-go:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---- THE ROOMS, under The hotel: largest first, a bar to scale for each. ---- */
.st-rooms{border-top:2px solid var(--ink);padding-top:16px;margin-top:18px}
.st-rooms h2{font:800 clamp(20px,1.9vw,24px)/1.05 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin:0 0 8px}
.st-roomsub{margin:0 0 6px;font:400 14px/1.5 'Lora',Georgia,serif;color:var(--ink-2)}
.st-rooms ol{list-style:none;margin:0;padding:0}
.st-rooms li{display:grid;grid-template-columns:minmax(0,1fr) 64px 46px;column-gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.st-rn{display:block;font:700 14.5px/1.2 'Archivo',sans-serif;color:var(--ink)}
.st-rc{display:block;margin-top:2px;font:400 12.5px/1.4 'Lora',Georgia,serif;color:var(--muted)}
.st-rbar{position:relative;height:3px;background:var(--bg-2)}
.st-rbar::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--st-coast)}
.st-rm{font:600 13px/1 'Inter',sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}

/* ---- THE HOTEL'S PHOTOGRAPHS in the prose: an equal-height pair. ---- */
.st-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:clamp(26px,3vw,36px) 0}
.st-pair.one{grid-template-columns:1fr}
.st-pair figure{margin:0;min-width:0}
.st-pair img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--bg-2)}
.st-pair.one img{aspect-ratio:3/2}
.st-pair figcaption{margin-top:8px;font:italic 400 13px/1.4 'Lora',Georgia,serif;color:var(--muted)}

/* The rooms' read more: the six largest, then the button. */
.st-rooms.clip .st-rx{display:none}
.st-rmore{display:inline-flex;align-items:baseline;gap:9px;margin:14px 0 0;background:none;border:0;padding:2px 0;cursor:pointer;
  font:700 10.5px/1 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);transition:opacity .18s}
.st-rmore:hover{opacity:.62}
.st-rmore:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.st-rmore .fs{font-size:14px;line-height:1}

/* THINGS TO DO NEAR, centred like the town page's section heads (owner,
   2026-11-08), with the hotel's position (logistics.near) in the line under it. */
.st-near .st-h{text-align:center;text-wrap:balance}
.st-near .st-sub{text-align:center;max-width:62ch;margin-left:auto;margin-right:auto;text-wrap:pretty}
.st-near .st-grid{margin-top:clamp(28px,3.4vw,44px)}

/* ---- PHONE: THE HOTEL AND THE ROOMS AS CAROUSELS (owner, 2026-11-08: "the
   hotel and rooms should be presented as carousels"). Each fact and each room
   is a card in a row that swipes, bleeding to the screen edge so the next card
   peeks in. Every room shows here, so the desktop's read more is off. ---- */
@media(max-width:760px){
  .st-stats dl,.st-rooms ol{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * clamp(20px,5vw,44px));padding:4px clamp(20px,5vw,44px) 14px;
    scroll-padding-inline:clamp(20px,5vw,44px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .st-stats dl::-webkit-scrollbar,.st-rooms ol::-webkit-scrollbar{display:none}
  .st-stats dl > div,.st-rooms li{flex:0 0 min(62%,240px);scroll-snap-align:start;box-sizing:border-box;
    border:1px solid var(--line-strong);background:var(--bg);padding:14px 15px 15px}
  /* A fact card: label on top, value, gloss. */
  .st-stats dl > div{display:flex;flex-direction:column;gap:6px}
  .st-stats dt{font:400 10px/1.2 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;padding:0}
  .st-stats dd b{font-size:19px}
  /* A room card: name and kind, then the size large over its bar. */
  .st-rooms li{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:10px;align-content:start}
  .st-rooms li > span:first-child{order:0}
  .st-rm{order:1;text-align:left;font:800 26px/1 'Archivo',sans-serif}
  .st-rbar{order:2}
  .st-rooms.clip .st-rx{display:flex}
  .st-rooms.clip li.st-rx{display:grid}
  .st-rmore{display:none!important}
  .st-roomsub{margin-bottom:10px}
}

/* The carousels must not widen the column: a grid item's min-width is its
   content's, and a row of cards is 1400px of content. */
body.stay .vbody > *,.st-stats,.st-rooms{min-width:0}

/* ---- PHONE: the rail dissolves into the column (display:contents) so The
   hotel and The rooms come after the prose. The locator is desktop only. ---- */
@media(max-width:760px){
  body.stay .vlocator{display:contents}
  body.stay .vbody{row-gap:0}
  body.stay .vcol{order:1}
  body.stay .st-loc{display:none}   /* no locator on a phone (owner, 2026-11-08: "lets hide this on mobile") */
  body.stay .st-stats{order:2;margin-top:clamp(32px,8vw,44px)}
  body.stay .st-rooms{order:3}
  body.stay .vlocator > :not(.st-loc):not(.st-stats):not(.st-rooms){order:4}
}

/* PHONE: Things to do near, set left (owner, 2026-11-08); desktop stays centred. */
@media(max-width:760px){
  .st-near .st-h,.st-near .st-sub{text-align:left}
  .st-near .st-sub{margin-left:0;margin-right:0}
}

/* PHONE: more air around and inside the two carousels (owner, 2026-11-08). */
@media(max-width:760px){
  body.stay .st-stats{margin-top:clamp(44px,12vw,56px)}
  body.stay .st-rooms{margin-top:clamp(36px,10vw,48px)}
  .st-stats h2,.st-rooms h2{margin-bottom:14px}
  .st-roomsub{margin-bottom:14px}
  .st-stats dl,.st-rooms ol{padding-top:6px;padding-bottom:22px}
  .st-stats dl > div,.st-rooms li{padding:18px 16px 19px}
  .st-stats dl > div{gap:8px}
  .st-rooms li{row-gap:12px}
}

/* PHONE: the Things to do pager centred under the list (owner, 2026-11-08). */
@media(max-width:760px){
  .st-pager{justify-content:center}
}

/* The Hotel's subtitle (logistics.stats_sub), set like The rooms' (owner, 2026-11-08). */
.st-statsub{margin:0 0 6px;font:400 14px/1.5 'Lora',Georgia,serif;color:var(--ink-2)}
@media(max-width:760px){.st-statsub{margin-bottom:14px}.st-stats h2{margin-bottom:8px}}