/* Holidaymaker homepage strip — intentionally self-contained. */
.hhf-hm-home{
  padding:0;
  background:#eef6fb;
  border-top:1px solid #dce8ee;
  border-bottom:1px solid #dce8ee;
  overflow:hidden;
}
.hhf-hm-home *{box-sizing:border-box}

/* Shared Holidaymaker strip. Keep the compact, proven layout:
   account copy on the left, four feature cards on the right. */
.hhf-hm-home .hhf-hm-shell{
  width:min(1280px,calc(100% - 32px));
  max-width:none;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:minmax(320px,390px) minmax(0,1fr);
  gap:16px;
  align-items:stretch;
  min-height:214px;
}

/* No separate lifestyle image in the shared banner. It made the strip too wide. */
.hhf-hm-lead{
  position:relative;
  min-width:0;
  min-height:214px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
}
.hhf-hm-scene{display:none!important}
.hhf-hm-script{display:none!important}

.hhf-hm-intro{
  position:relative;
  z-index:2;
  width:100%;
  min-width:0;
  padding:18px 6px 16px;
  text-align:center;
}
.hhf-hm-kicker{
  margin:0 0 5px;
  color:#174f68;
  font-size:.64rem;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hhf-hm-intro h2{
  margin:0;
  color:#153d52;
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.72rem;
  line-height:.98;
  font-weight:500;
  letter-spacing:-.025em;
}
.hhf-hm-intro h2 span{display:block}
.hhf-hm-intro h2 span:last-child{font-size:1em;white-space:nowrap}
.hhf-hm-intro h2 strong{font-weight:700}
.hhf-hm-copy{
  margin:7px auto 10px;
  max-width:360px;
  color:#264e61;
  font-size:.73rem;
  line-height:1.34;
}
.hhf-hm-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(310px,100%);
  min-height:36px;
  margin:0 auto;
  padding:8px 13px;
  border-radius:3px;
  background:#bd9840;
  color:#fff!important;
  font-size:.68rem;
  line-height:1.18;
  font-weight:800;
  text-align:center;
  text-decoration:none;
  box-shadow:0 5px 15px rgba(108,82,26,.14);
  transition:transform .15s ease,filter .15s ease;
}
.hhf-hm-cta:hover{transform:translateY(-1px);filter:brightness(.98)}
.hhf-hm-signin{margin:5px 0 0;color:#526f7e;font-size:.64rem}
.hhf-hm-signin a{color:#174f68;font-weight:700}

/* RIGHT: four low, wide feature cards — NOT tall columns. */
.hhf-hm-features{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:12px 14px 12px 0;
  align-items:stretch;
}
.hhf-hm-card{
  min-width:0;
  height:190px;
  overflow:hidden;
  border:1px solid #dfe7eb;
  border-radius:9px;
  background:#fff;
  box-shadow:0 5px 15px rgba(20,52,65,.055);
}
.hhf-hm-card-image{
  position:relative;
  height:102px;
  background-position:center;
  background-size:cover;
}
/* Existing HHF destination/lifestyle images only — no owner's listing photography. */
.hhf-hm-card:nth-child(1) .hhf-hm-card-image{background-image:url('../images/holidaymaker/save-favourites.webp')}
.hhf-hm-card:nth-child(2) .hhf-hm-card-image{background-image:url('../images/holidaymaker/compare-shortlist.webp')}
.hhf-hm-card:nth-child(3) .hhf-hm-card-image{background-image:url('../images/holidaymaker/easy-enquiries.webp')}
.hhf-hm-card:nth-child(4) .hhf-hm-card-image{background-image:url('../images/holidaymaker/track-search.webp')}
.hhf-hm-icon{
  position:absolute;
  left:50%;
  bottom:-17px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  transform:translateX(-50%);
  border:3px solid #fff;
  border-radius:50%;
  background:#fff;
  color:#07556f;
  box-shadow:0 2px 9px rgba(20,52,65,.10);
}
.hhf-hm-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hhf-hm-card-body{
  padding:24px 8px 8px;
  text-align:center;
}
.hhf-hm-card h3{
  margin:0 0 4px;
  color:#163f55;
  font-size:.75rem;
  line-height:1.12;
}
.hhf-hm-card p{
  margin:0 auto;
  max-width:165px;
  color:#607581;
  font-size:.62rem;
  line-height:1.26;
}

/* On ordinary laptop widths keep the approved one-row composition. */
@media(max-width:1360px){
  .hhf-hm-home .hhf-hm-shell{width:min(1220px,calc(100% - 28px));grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:12px;min-height:202px}
  .hhf-hm-lead{min-height:202px}
  .hhf-hm-intro{padding:14px 4px 12px}
  .hhf-hm-intro h2{font-size:1.58rem}
  .hhf-hm-copy{font-size:.70rem;margin:6px auto 9px}
  .hhf-hm-features{gap:8px;padding:10px 0}
  .hhf-hm-card{height:182px}
  .hhf-hm-card-image{height:93px}
  .hhf-hm-card h3{font-size:.71rem}
  .hhf-hm-card p{font-size:.59rem}
}

/* Tablet: lead across full width, cards below. */
@media(max-width:980px){
  .hhf-hm-home .hhf-hm-shell{width:min(760px,calc(100% - 24px));grid-template-columns:1fr;gap:0}
  .hhf-hm-lead{min-height:auto}
  .hhf-hm-intro{padding:18px 12px 12px}
  .hhf-hm-intro h2{font-size:1.8rem}
  .hhf-hm-features{padding:10px 0 14px;grid-template-columns:repeat(2,1fr)}
  .hhf-hm-card{height:188px}
}

@media(max-width:700px){
  .hhf-hm-lead{min-height:auto;background:none}
  .hhf-hm-intro{padding:18px 12px 14px}
  .hhf-hm-intro h2{font-size:1.92rem}
  .hhf-hm-features{grid-template-columns:1fr 1fr}
  .hhf-hm-card{height:204px}
  .hhf-hm-card-image{height:110px}
  .hhf-hm-card h3{font-size:.82rem}
  .hhf-hm-card p{font-size:.67rem}
}

@media(max-width:430px){
  .hhf-hm-features{grid-template-columns:1fr}
  .hhf-hm-card{height:210px}
}

/* Small phones: keep the Holidaymaker strip deliberately simple.
   The account/signup message remains; the four image cards are hidden. */
@media(max-width:700px){
  .hhf-hm-home .hhf-hm-shell{
    width:min(100%,calc(100% - 20px));
    display:block;
    min-height:0;
  }
  .hhf-hm-features{display:none!important}
  .hhf-hm-lead{min-height:0}
  .hhf-hm-intro{padding:16px 4px 15px}
  .hhf-hm-kicker{font-size:.64rem}
  .hhf-hm-intro h2{font-size:1.72rem;line-height:1.02}
  .hhf-hm-copy{max-width:360px;margin:7px auto 10px;font-size:.73rem}
  .hhf-hm-cta{width:min(310px,100%)}
}
