/* Park Details hero with the HOMEPAGE hero header (.pha__header): 150px logo, navy "Book Your Stay" pill, frosted
   "Menu" pill. Rules copied from park-here-aerial-live.css + hero-aerial-polish.css (classes renamed hph__*), so sizes,
   the 100px top offset (30px at <=900) and the 170px rails (clamp below 1450, 24px at <=900) are the homepage's.
   Above 1900 the rails follow this page's scaled frame (170/1900 of the width) so the header stays on its content rails.
   Linked LAST. Preview: /sandpiper/park-details-home-header/ */
.pdh{--hph-rail:170px;--hph-navy:#073b57}
@media (min-width:1901px){.pdh{--hph-rail:calc(170 * 100vw / 1900)}}
@media (max-width:1450px){.pdh{--hph-rail:clamp(80px,8.947vw,170px)}}
@media (max-width:900px){.pdh{--hph-rail:24px}}

.pdh .pdh__header.hph{
  position:absolute;
  inset:100px var(--hph-rail) auto;
  height:auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:48px;
}
.hph__brand{display:block;width:150px;height:150px;overflow:hidden;border-radius:12px;line-height:0;box-shadow:0 7px 22px rgba(13,62,69,.09);transition:opacity .2s ease,transform .2s ease}
.hph__brand img{display:block;width:100%;height:100%;object-fit:cover}
.hph__brand:hover{opacity:.9;transform:translateY(-2px)}
.hph__nav{display:flex;align-items:center;gap:32px}
.pdh .hph__book{
  display:inline-flex;align-items:center;justify-content:center;gap:24px;width:216px;height:60px;border-radius:999px;
  background:#074c69;color:#fff;font:500 18px/1 "HP Text",Arial,sans-serif;text-decoration:none;
  box-shadow:0 10px 24px rgba(7,59,87,.15);transition:background .2s ease,transform .2s ease;
}
.hph__book svg{width:18px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.pdh .hph__book:hover{background:#0a5a76;transform:translateY(-2px)}
.hph__book:hover svg{transform:translateX(3px)}
.pdh .hph__menu{
  position:relative;display:inline-flex;align-items:center;gap:14px;min-width:0;height:60px;padding:0 26px 0 22px;
  border:1px solid rgba(255,255,255,.72);border-radius:999px;
  background:linear-gradient(180deg,rgba(252,249,243,.9),rgba(246,240,229,.82));color:var(--hph-navy);
  font:600 20px/1 "HP Text",Arial,sans-serif;cursor:pointer;
  box-shadow:0 12px 30px -8px rgba(6,34,48,.38),0 2px 6px rgba(6,34,48,.12),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  transition:background-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.hph__menu-lines{display:grid;gap:6px;width:26px}
.hph__menu-lines i{display:block;width:100%;height:2px;border-radius:999px;background:currentColor;transition:transform .2s ease}
.hph__menu-label{letter-spacing:.01em}
.pdh .hph__menu:hover{background:linear-gradient(180deg,#fffdf8,#f8f2e7);transform:translateY(-2px);box-shadow:0 16px 34px -8px rgba(6,34,48,.42),0 2px 6px rgba(6,34,48,.12),inset 0 1px 0 #fff}
.hph__menu:hover .hph__menu-lines i:first-child{transform:translateX(4px)}
.hph__menu:hover .hph__menu-lines i:last-child{transform:translateX(-4px)}
.pdh .hph__menu:focus-visible{outline:3px solid #0f6f86;outline-offset:4px}

@media (max-width:1450px){
  .hph__brand{width:136px;height:136px}
  .hph__nav{gap:24px}
  .pdh .hph__book{width:200px;height:56px;font-size:17px}
  .pdh .hph__menu{height:56px;padding:0 22px 0 19px;font-size:19px}
}
/* below 1100 this page's hero flows; the header stays a row at the homepage's offsets */
@media (max-width:1100px){
  .pdh .pdh__frame{padding-top:100px;padding-left:var(--hph-rail);padding-right:var(--hph-rail)}
  .pdh .pdh__header.hph{position:static;inset:auto}
}
@media (max-width:900px){
  .pdh .pdh__frame{padding-top:30px}
  .hph__brand{width:116px;height:116px;border-radius:9px}
  .hph__nav{gap:14px}
  .pdh .hph__book{width:auto;height:48px;padding:0 18px;font-size:15px}
  .pdh .hph__menu{width:48px;min-width:48px;height:48px;padding:0;justify-content:center}
  .hph__menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hph__menu-lines{width:22px;gap:5px}
}
@media (max-width:480px){
  .pdh .hph__book{width:48px;padding:0;border-radius:50%;font-size:0;gap:0}
  .hph__book svg{width:20px;height:16px}
}

/* the logo is a fixed 150 / 136 px (homepage), while this hero's copy scales with the width: keep the copy below it */
@media (min-width:1101px){
  .pdh .pdh__copy{top:max(calc(306.5 * var(--u)), 306px)}
  .pdh{min-height:calc(306px + 500 * 100vw / 1900)}
}
@media (min-width:1101px) and (max-width:1450px){
  .pdh .pdh__copy{top:max(calc(306.5 * var(--u)), 290px)}
  .pdh{min-height:calc(290px + 500 * 100vw / 1900)}
}

/* 170px margins (client 2026-09-30): the copy block starts on the same left rail as the logo; nothing crosses 170 / 1730 */
@media (min-width:1101px){
  .pdh .pdh__copy{left:var(--hph-rail);max-width:calc(100% - 2 * var(--hph-rail))}
  body .pdh .pdh__crumbs{margin-left:0}
  body .pdh .pdh__title-main{margin-left:0}
  body .pdh .pdh__title-script{margin-left:calc(-14 * var(--hp))}
  body .pdh .pdh__lead{margin-left:0}
}