/* ===== Caravan Parks — page-specific CSS (keeps existing look) =====
   Loads AFTER home.css so it can override where needed.
   You can safely change the hero image here without touching home.css.
*/

/* Swap hero background ONLY for this page (change URL when ready) */
:root{
  /* Currently same as home; replace with a parks hero when you decide */
  --hero-img: url('https://halconcaravans.com/assets/img/hero/caravan-park-bg.png');
  --hero-ratio: 2465 / 1220;
}

/* Hero panel copy spacing remains same — styles come from home.css */

/* Section: intro band */
.parks-hero { padding: clamp(48px, 8vw, 88px) 0 0; background: var(--surface); }
.parks-intro { margin-top: 8px; color: #475569; font-size: 1.05rem; max-width: 900px; }

/* Cards grid */
.parks-grid{ display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
@media (max-width:1024px){ .parks-grid{ grid-template-columns:1fr; } }
.parks-card{
  background: var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm);
  padding:18px; display:flex; flex-direction:column; gap:8px; height:100%;
  text-align:left; cursor:pointer; transition:transform .18s, box-shadow .18s, border-color .18s;
}
.parks-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#d1d5db; }

/* Icon + title alignment */
.parks-head{ display:flex; align-items:center; gap:0px; margin:0 0 6px; }
.parks-badge{
  width:52px; height:52px; border-radius:14px; flex:0 0 auto; display:grid; place-items:center;
}
.parks-badge .ico{ width:28px; height:28px; }
.parks-card svg{ display:block; stroke-width:1.6; }
.parks-card h3{ margin:0; line-height:1.25; }
.parks-card p{ margin:4px 0 0; }

/* ===== Image-only Lightbox (hplx) ===== */
#hplx{ position:fixed; inset:0; z-index:10000; display:grid; place-items:center; background:rgba(0,0,0,.72); }
#hplx[hidden]{ display:none !important; }

#hplx .hplx-box{ position:relative; display:inline-block; }
#hplx .hplx-img{
  display:block; width:min(96vw, 820px); height:auto; border-radius:14px;
  box-shadow:0 14px 44px rgba(0,0,0,.4);
}

/* Close button on image, a bit inset */
#hplx .hplx-close{
  position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center; font-size:20px; line-height:1; color:#fff;
  background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.25);
  cursor:pointer; backdrop-filter:saturate(120%) blur(2px);
}

.parks-head h3 {
  font-size:  20px !important;
}

/* Lightbox loading state */
#hplx .hplx-img { opacity: 0; transition: opacity .2s ease; }
#hplx.ready .hplx-img { opacity: 1; }

#hplx.loading::after{
  content:"";
  position: fixed; inset: 0;
  display:block;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.9) 0 8px, transparent 9px) 
    center/24px 24px no-repeat;
}

/* Center the lightbox image */
#hplx {
  display: flex;
  align-items: center;
  justify-content: center;
}

#hplx .hplx-box {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#hplx .hplx-img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

/* --- Force-center the lightbox in the viewport --- */
#hplx[hidden] { display: none !important; }

#hplx {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.72) !important; /* keep the dark backdrop */
}

#hplx .hplx-box {
  max-width: min(86vw, 1000px) !important;
  max-height: 90vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important; /* fallback */
}

#hplx .hplx-img {
  display: block;
  width: auto;                                /* let image size itself */
  max-width: min(96vw, 1000px);               /* contain to viewport */
  max-height: 70vh;
  margin-inline: auto;                        /* center horizontally */
  height: auto;
  border-radius: 14px;
  box-shadow: 0 14px 44px rgba(0,0,0,.4);
  object-fit: contain;
  object-position: center center;
}

/* Fade-in after image loads + minimal loader */
#hplx .hplx-img { opacity: 0; transition: opacity .2s ease; }
#hplx.ready .hplx-img { opacity: 1; }

#hplx.loading::after {
  content: "";
  position: fixed; inset: 0;
  display: block;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.9) 0 8px, transparent 9px)
    center/24px 24px no-repeat;
}

/* --- Force-center the lightbox horizontally (and vertically) --- */
#hplx[hidden] { display: none !important; }

#hplx {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;

  display: grid !important;
  place-items: center !important;          /* centers the .hplx-box */
  background: rgba(0,0,0,.72) !important;
}

#hplx .hplx-box {
  display: grid !important;
  place-items: center !important;          /* centers the image inside */
  justify-items: center !important;
  align-items: center !important;

  /* Make the box hug the image so close button doesn’t skew width */
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  position: relative !important;
}

#hplx .hplx-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
}

/* keep your fade-in if you added it earlier */
#hplx .hplx-img { opacity: 0; transition: opacity .2s ease !important; }
#hplx.ready .hplx-img { opacity: 1 !important; }


/* Lightbox loading spinner (replaces the dot) */
#hplx.loading::after{
  content:"";
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.72); /* keep the dim backdrop while loading */
}

#hplx.loading::before{
  content:"";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hplxSpin .9s linear infinite;
}

@keyframes hplxSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
#hplx, #hplx * { user-select: none; }