/* ROUND 91 — House & Land Package Detail (single-hl_package.php only, body.sh-r91).
   Scoped overrides of inner.css .hld*, r63.css §11 and r66.css §15. Nothing here is global. */

/* ---- 1. Containment: the site container instead of the 1440-only formula ----
   inner.css: .hld__inner{max-width:calc(var(--maxw) - 96px);padding:0} lost its gutters below 1440
   (x = 0 at 1280 and 1024). Same 1344 content box at 1440 and 1504 at 1920 as before. */
.sh-r91 .hld__inner{max-width:var(--maxw);padding:0 var(--global-padding);box-sizing:border-box}
@media (max-width:1023px){
  .sh-r91 .hld__inner{padding:0 24px}
}

/* ---- 2. Heading ----
   Desktop keeps the 101px × --fl token (r63). The 939px cap follows the content column below 1440
   so 46-49 character titles compose as two or three lines. Phones: fluid size, three lines at most
   for the longest title in the library (49 characters) at 320. Balanced wrapping where supported. */
.sh-r91 .hld__title{overflow-wrap:break-word;text-wrap:balance}
@media (min-width:1024px) and (max-width:1439px){
  /* the cap also keeps the title clear of the More Photos tile (154px + 24px from the right edge,
     24px breathing space) now that the tile paints above the content block */
  .sh-r91 .hld__title{max-width:min(939px,100%,calc(100vw - 250px))}
}
@media (max-width:768px){
  .sh-r91 .hld__title{font-size:clamp(32px,11.5vw,40px);line-height:1;margin:8px 0 20px}
}

/* ---- 3. Desktop tile: one real control ----
   The tile is a <button> now. It keeps the r66 look (photo, scrim, count) and sits above .hld__inner,
   which rides 93px up over the hero and used to cover the tile's lower half at 1024-1440. */
.sh-r91 .hld__more{z-index:3;cursor:pointer;pointer-events:auto;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.sh-r91.sh-r66.sh-r63 .hld__more{margin:0}
.sh-r91 .hld__more:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sh-r91 .hld__more::after{transition:background-color .3s var(--ease-fade,ease)}
.sh-r91 .hld__more:hover::after,.sh-r91 .hld__more:focus-visible::after{background:rgba(0,0,0,.52)}
@media (min-width:1024px){
  .sh-r91 .hld__teaser{display:none}
}

/* ---- 4. Mobile: no floating tile, one teaser in the content flow ----
   Below 1024 the hero is position:static, so the absolutely positioned tile was placed against the
   page and landed over the description (r66's display:flex outranked inner.css's display:none). */
@media (max-width:1023px){
  .sh-r91.sh-r66.sh-r63 .hld__more,.sh-r91 .hld__more{display:none}
  .sh-r91 .hld__teaser{
    position:relative;display:flex;align-items:flex-end;justify-content:flex-start;
    width:100%;aspect-ratio:3 / 2;margin:0;padding:16px;border:0;border-radius:12px;overflow:hidden;
    background:var(--warm-sand);color:var(--white);cursor:pointer;text-align:left;
    font:inherit;-webkit-appearance:none;appearance:none;box-shadow:0 1px 4px rgba(0,0,0,.15)}
  .sh-r91 .hld__teaser img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .sh-r91 .hld__teaser::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 45%,rgba(0,0,0,.1) 100%)}
  .sh-r91 .hld__teaser .label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;color:var(--white);text-shadow:0 2px 12px rgba(0,0,0,.5)}
  .sh-r91 .hld__teaser .label img{position:static;width:16px;height:16px;object-fit:contain;filter:brightness(0) invert(1);flex:none}
  .sh-r91 .hld__teaser:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
}

/* ---- 5. Viewer chrome on this template (shared .glb markup and code untouched) ----
   Close: the 20px glyph keeps its size; the hit area grows to 44px. Scroll lock: html.sh-r91-locked is
   added by r91.js while the viewer is open (body fixed at the saved offset, restored on close). */
.sh-r91 .glb .glb__close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:-12px -12px 0 0}
.sh-r91 .glb .glb__close svg{width:20px;height:20px}
.sh-r91 .glb .glb__close:focus-visible,.sh-r91 .glb .glb__nav:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:999px}
@media (max-width:1311px){
  .sh-r91 .glb .glb__close{top:12px;right:12px;margin:0}
}
@media (max-width:768px){
  .sh-r91 .glb{padding:max(56px,calc(env(safe-area-inset-top,0px) + 48px)) max(12px,env(safe-area-inset-left,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-right,0px))}
  .sh-r91 .glb .glb__nav{width:44px;height:44px}
}
html.sh-r91-locked body{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ---- 6. Consultant card: EMAIL / phone wrap when they do not fit ----
   inner.css §2 forces nowrap globally and r63 fixes the card at 132px with overflow hidden, so the
   phone left the card at 390 ("06 242 1170 (ext 1)") and 320. Scoped to the package sidebar. */
.sh-r91 .hld__side .person__links{flex-wrap:wrap;gap:4px 12px}
.sh-r91 .hld__side .person__links .link-btn{white-space:nowrap;min-height:33px;max-width:100%}
/* the card grows with a second row (r63 pinned it at 132px; a 19-character number such as
   "06 242 1170 (ext 1)" never fit beside EMAIL in the 205px column, even on desktop) */
.sh-r91.sh-r63 .hld__side .person{height:auto;min-height:132px}
.sh-r91.sh-r63 .hld__side .person__body{overflow:visible}
/* the photo column stretches with the card (r63's height:100% resolves to auto once the card is auto) */
.sh-r91.sh-r63 .hld__side .person__photo{height:auto;align-self:stretch}
@media (max-width:359px){
  /* 320: the links column is 108px beside the 132px photo; a narrower photo and a wrapping
     number keep every character inside the card */
  .sh-r91 .hld__side .person__photo{flex-basis:104px;width:104px}
  .sh-r91 .hld__side .person__links .link-btn{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
}