/* Pricing page: layout rules the home stylesheet does not have.
   Loaded after styles.css. The home page never loads this file. */
@media (max-width:1180px){
  [data-tierrow]{grid-template-columns:260px 1fr!important}
  [data-tierbody]{grid-template-columns:1fr!important;row-gap:22px!important}
  [data-grid="quotes"]{grid-template-columns:1fr!important;row-gap:30px}
  [data-grid="quotes"] > div{padding:0!important;border-left:0!important}
  [data-grid="faq"]{grid-template-columns:1fr!important;gap:34px!important}
}
@media (max-width:900px){
  [data-tierrow]{grid-template-columns:1fr!important}
  [data-tierbody]{padding:26px 22px!important}
  [data-grid="incl"]{grid-template-columns:1fr!important}
}

/* Package guide: which package, compare table, details */
@media (max-width:1180px){
  [data-grid="details"]{grid-template-columns:1fr!important;gap:44px!important}
}
@media (max-width:900px){
  [data-grid="choose"]{grid-template-columns:1fr!important}
  [data-grid="tierlist"]{grid-template-columns:1fr!important}
  [data-cmpbox]{padding:6px 20px 14px!important}
  [data-cta="pkg"]{padding:34px 24px!important}
  /* compare table becomes one block per detail, with the package named on each line */
  [data-cmp] colgroup,[data-cmp] thead{display:none}
  [data-cmp],[data-cmp] tbody,[data-cmp] tr,[data-cmp] th,[data-cmp] td{display:block;width:auto!important}
  [data-cmp] tr{padding:18px 0;border-bottom:1px solid rgba(0,0,0,.14)}
  [data-cmp] th[scope="row"]{padding:0 0 6px!important;border:0!important;white-space:normal!important;color:#F04E23!important}
  [data-cmp] td{padding:8px 0!important;border:0!important}
  [data-cmp] td::before{content:attr(data-pkg);display:block;font-size:13px;font-weight:600;color:#0A0A0A;margin-bottom:2px}
}
@media (min-width:901px){
  [data-tierrow] > div:first-child{aspect-ratio:auto!important;height:100%;min-height:240px}
}
/* package rows share one height on desktop, so the custom quote row matches the priced rows */
@media (min-width:901px){
  [data-grid="tiers"]{display:grid!important;grid-auto-rows:1fr}
}

/* package details (dark, list on the photo): below 1181px the photo moves above the list so it never sits behind the text */
@media (max-width:1180px){
  #details{padding-top:0!important;padding-bottom:80px!important}
  [data-details="photo"]{position:relative!important;width:auto!important;margin:0 -32px 52px;aspect-ratio:3/2}
  [data-details="shade"]{display:none}
  [data-details="text"]{max-width:none!important}
}
@media (max-width:900px){
  [data-details="photo"]{margin:0 -20px 52px}
}

/* pricing hero, 901px and wider: the portrait is sized by the hero's height and sits on the right, so his head is never cut off;
   its left edge fades into black. Tablets (640 to 900px) show the portrait pushed right, so the text stays off his eyes; narrower screens keep the club lights photo. */
@media (min-width:640px) and (max-width:900px){
  /* fixed height so the face lands right of the text; pushed further right on narrower tablets, never past his shoulder */
  [data-hero-photo]{position:absolute;right:calc(-1 * clamp(0px, 890px - 100vw, 130px));bottom:0;height:520px!important;width:auto!important;max-width:none;aspect-ratio:3/2;object-fit:cover}
}
@media (min-width:901px){
  [data-hero-photo]{position:absolute;right:0;bottom:0;height:calc(100% - 120px)!important;width:auto!important;max-width:100%;aspect-ratio:3/2;object-fit:cover;object-position:75% 0%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%)}
  [data-hero-shade]{background:linear-gradient(100deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.5) 36%,rgba(10,10,10,0) 60%)!important}
}