/* ROUND 81 — Plan detail pages only (body.sh-r81-pd, inc/round81.php). Desktop keeps the round 63
   composition; the housekeeping (map action, price guide, Try it at your place) is a template
   switch, not CSS. Below 769px the hero becomes a fixed frame with the name and one photo trigger. */

/* SEE PRICING GUIDE sits where PLACE ON A MAP did, full width of the spec column */
.sh-r81-pd .pd--r63 .pd__pricing-guide{width:100%;justify-content:center;margin-top:8px}
.sh-r81-pd .pd__gallery{display:none}
/* Desktop: round 67 anchors the description to the foot of the spec column (level with the drawing)
   with 96px above it; with the price guide withheld that reads as a hole, so the space above is 40px. */
@media (min-width:769px){
  .sh-r67.sh-r81-pd .pd--r63 .pd__desc{padding-top:40px}
}
/* The shared viewer hides its tag / Save pill / link with the hidden attribute, but display rules on
   those classes (.gt__tag inline-block, .gt__save--pill inline-flex, .gt__more flex) outrank it, so an
   empty tag and a SAVE pill showed over the plan photos. Plan detail pages only: hidden means hidden. */
.sh-r81-pd .glb [hidden]{display:none!important}

@media (max-width:768px){
  /* ---- hero: a fixed 4:3 frame so the height never depends on the render, the roof choice or
          the photo count; the render covers it, the name sits bottom-left ---- */
  .sh-r63.sh-r81-pd .pd--r63 .pd__hero{position:relative;height:auto;min-height:0;overflow:hidden;background:var(--charcoal)}
  .sh-r63.sh-r81-pd .pd--r63 .pd__media{position:relative;inset:auto;width:100%;aspect-ratio:4 / 3;max-height:70vh;overflow:hidden}
  .sh-r81-pd .pd--r63 .pd__render{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .sh-r81-pd .pd--r63 .pd__render:not(.is-current){display:none}
  .sh-r81-pd .pd--r63 .pd__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  /* readable name on any photo: a soft foot shade in addition to the existing head shade */
  .sh-r81-pd .pd--r63 .pd__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top,rgba(20,20,20,.62),rgba(20,20,20,0));pointer-events:none;z-index:1}
  /* roof swatches: hidden on phones (AJ, 30 Sep); the viewer carries every roof render */
  .sh-r81-pd .pd--r63 .pd__roofs{display:none}

  /* the name: bottom-left, wraps, leaves the trigger's column free */
  .sh-r63.sh-r81-pd .pd--r63 .pd__name--travel{position:absolute;left:24px;right:auto;bottom:20px;max-width:calc(100% - 24px - 132px);margin:0;
    font-size:clamp(30px,9vw,44px);line-height:1.05;padding-bottom:.04em;overflow-wrap:anywhere;z-index:2;
    text-shadow:0 2px 18px rgba(0,0,0,.45)}
  .sh-r81-pd .pd--r63.pd--one-photo .pd__name--travel{max-width:calc(100% - 48px)}
  /* descriptive names (e.g. "166m² with double garage and 4th bedroom or office") step down so they
     sit in the frame in three or four lines instead of covering the home */
  .sh-r63.sh-r81-pd .pd--r63.pd--long-name .pd__name--travel{font-size:clamp(24px,6.5vw,32px);line-height:1.1}

  /* the one photo trigger: thumbnail + label, bottom-right */
  .sh-r81-pd .pd--r63 .pd__gallery{position:absolute;right:16px;bottom:16px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:6px;
    width:108px;padding:0;border:0;background:none;color:var(--off-white);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sh-r81-pd .pd--r63 .pd__gallery-thumb{display:block;width:108px;height:72px;border-radius:8px;overflow:hidden;border:2px solid var(--white);background:var(--white);box-shadow:0 2px 10px rgba(0,0,0,.3);
    transition:transform .3s var(--ease-soft)}
  .sh-r81-pd .pd--r63 .pd__gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .sh-r81-pd .pd--r63 .pd__gallery-label{display:block;padding:4px 8px;border-radius:4px;background:rgba(20,20,20,.55);color:var(--off-white);white-space:nowrap;text-shadow:none}
  .sh-r81-pd .pd--r63 .pd__gallery:active .pd__gallery-thumb{transform:scale(.97)}
  .sh-r81-pd .pd--r63 .pd__gallery:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:8px}
  .sh-r81-pd .pd--r63 .pd__media[data-pd-tap]{cursor:pointer}

  /* ---- information block: flat, straight edge under the hero, no card ---- */
  .sh-r63.sh-r81-pd .pd--r63 .pd__body{margin-top:0;border-radius:0;padding:24px 24px 56px}
  .sh-r63.sh-r81-pd .pd--r63 .pd__top{margin-bottom:16px}
  .sh-r63.sh-r81-pd .pd--r63 .pd__actions{padding-top:0;flex-wrap:wrap;gap:12px}
  .sh-r81-pd .pd--r63 .pd__actions .btn{white-space:nowrap}
  .sh-r63.sh-r81-pd .pd--r63 .pd__cols{gap:24px}
  .sh-r67.sh-r81-pd .pd--r63 .pd__summary{margin:14px 0 8px;white-space:normal}
  .sh-r67.sh-r81-pd .pd--r63 .pd__specs{margin:0 0 20px}
  .sh-r81-pd .pd--r63 .pd__pricing-guide{margin:0 0 4px}
  .sh-r81-pd .pd--r63 .pd__desc{margin-top:20px}
}
@media (max-width:359px){
  .sh-r63.sh-r81-pd .pd--r63 .pd__name--travel{max-width:calc(100% - 24px - 112px);font-size:clamp(26px,8.5vw,32px)}
  .sh-r81-pd .pd--r63 .pd__gallery{width:92px}
  .sh-r81-pd .pd--r63 .pd__gallery-thumb{width:92px;height:62px}
}
@media (max-width:768px) and (orientation:landscape){
  .sh-r63.sh-r81-pd .pd--r63 .pd__media{aspect-ratio:16 / 9;max-height:80vh}
}
@media (prefers-reduced-motion: reduce){
  .sh-r81-pd .pd--r63 .pd__gallery-thumb{transition:none}
}