/* ==========================================================================
   Virtual Hotelier template kit: vh-cardpop.css
   Description card pop-up: any card matching VH.cardPopup.selector that has a
   title and body opens a 95vw x 95dvh cream dialog (title beside the icon,
   large text); close with x, backdrop or Escape; focus returns to the card.
   Ported from artifact/index.live.html <style id="vh-patch-css"> 255-265.
   Adapted: the hard-coded `.service-card.vh-pop-able, .feature-capability.vh-pop-able`
   became the generic `.vh-pop-able` class vh-cardpop.js adds; the cloned icon
   gets class .vhp-icon (source matched svg.lucide); body clones get .vhp-p so a
   non-<p> body selector is styled the same.

   Scope: .vh-pop-able is the only rule that touches host elements (cursor and
   focus ring, at every width, as in the source - the pop-up is a desktop/tablet
   feature; on phones the cards sit inside sections core hides). Everything else
   matches markup this module creates.
   Colours: --vhp-* custom properties (defaults = Virtual Hotelier cream dialog);
   the gold ring/border and backdrop fall back to the --vh-* brand tokens.
   ========================================================================== */
.vh-pop-able{cursor:pointer}
.vh-pop-able:focus-visible{outline:2px solid var(--vh-accent,#b9953f);outline-offset:3px}
.vhp-wrap{--vhp-bg:#fbf7ee;--vhp-text:#1d2b2b;--vhp-title:#0d5c5e;--vhp-border:#9a7a2c;--vhp-backdrop:rgba(var(--vh-primary-rgb,3,22,23),.62);
  position:fixed;inset:0;z-index:2147483000;background:var(--vhp-backdrop);display:flex;align-items:center;justify-content:center;animation:vhpIn .2s ease}
.vhp-card{position:relative;width:95vw;height:95vh;height:95dvh;box-sizing:border-box;overflow:auto;background:var(--vhp-bg);color:var(--vhp-text);border:2px solid var(--vhp-border);border-radius:20px;padding:clamp(28px,5vw,64px);box-shadow:0 20px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;justify-content:center}
.vhp-head{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding-right:48px}
.vhp-card .vhp-icon{flex:none;width:48px;height:48px;color:var(--vhp-title);margin:0}
.vhp-card .vhp-icon img{width:100%;height:100%;object-fit:contain}
.vhp-head h3{margin:0 !important}
.vhp-card h3{margin:0 0 18px;color:var(--vhp-title);font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.15}
.vhp-card p,.vhp-card .vhp-p{margin:0;font-size:clamp(1.15rem,1.8vw,1.6rem);line-height:1.65;max-width:62ch}
.vhp-card .vhp-p + .vhp-p,.vhp-card p + p{margin-top:.6em}
.vhp-x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--vhp-border);background:#fff;color:var(--vhp-title);font-size:26px;line-height:1;cursor:pointer}
@keyframes vhpIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.vhp-wrap{animation:none}}