/* HM Builders: shared page layout (Oct 2026). Loaded by includes/header.php on every page.
   One side-padding system for hero, homepage sections, header and footer,
   plus one card grid (4 / 3 / 2 / 1 columns) for Featured, Packages and Rates. */

:root{
  --hm-max:1440px;
  --hm-pad:clamp(24px,6.25vw,80px);
  --hm-edge:max(var(--hm-pad),calc((100% - var(--hm-max)) / 2 + var(--hm-pad)));
}
@media (max-width:899.98px){
  :root{--hm-pad:clamp(20px,5vw,48px)}
}

/* ---------- Homepage sections: side space comes from the inner container ---------- */
section.section{padding-left:0;padding-right:0}
section.section > .container{max-width:var(--hm-max);padding-left:var(--hm-pad);padding-right:var(--hm-pad)}
section.pkg-section:after,section.rates-section:after{left:var(--hm-edge);right:var(--hm-edge)}
section.property-services{padding-left:var(--hm-edge);padding-right:var(--hm-edge)}
section.cta-section{padding-left:var(--hm-edge);padding-right:var(--hm-edge)}

/* ---------- Header and footer ---------- */
.site-header > .container{max-width:var(--hm-max);padding-left:var(--hm-pad);padding-right:var(--hm-pad)}
.hm-footer .hm-footer-top,.hm-footer .hm-footer-bottom{padding-left:var(--hm-edge);padding-right:var(--hm-edge)}

/* ---------- Card grid: 4 / 3 / 2 / 1 columns ---------- */
.hm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hm-grid > .col-12{grid-column:1 / -1}
@media (max-width:1279.98px){.hm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:959.98px){.hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599.98px){.hm-grid{grid-template-columns:minmax(0,1fr)}}

/* How many cards show, so rows stay full:
   Featured = 8 / 6 / 6 / 4     Packages and Rates = 4 / 3 / 4 / 3   (at 4 / 3 / 2 / 1 columns) */
@media (max-width:1279.98px){.hm-grid--feat > :nth-child(n+7){display:none}}
@media (min-width:960px) and (max-width:1279.98px){.hm-grid--few > :nth-child(n+4){display:none}}
@media (max-width:599.98px){
  .hm-grid--feat > :nth-child(n+5){display:none}
  .hm-grid--few > :nth-child(n+4){display:none}
  .hm-grid .prop-card-img{height:auto;aspect-ratio:4/3}
}

/* ---------- Cards: tidy spec row, buttons level (Featured, Packages, Rates) ---------- */
.hm-grid__item{display:flex;min-width:0}
.hm-grid__item > .cardx{flex:1;min-width:0;display:flex;flex-direction:column}
.hm-grid .prop-body{flex:1;display:flex;flex-direction:column;container-type:inline-size}
.hm-grid .prop-btn,.hm-grid .pkg-btn{margin-top:auto}
.hm-grid .pkg-btn{align-self:flex-start}
.hm-grid .prop-specs{flex-wrap:wrap;row-gap:4px}
.hm-grid .prop-specs .spec-item{white-space:nowrap}
@container (max-width:300px){
  .hm-grid .prop-specs{font-size:14px}
  .hm-grid .prop-specs .spec-item{margin-right:10px}
  .hm-grid .prop-specs svg{margin-right:4px}
}