/* Container: CSS Grid with Divi breakpoints */
.nkhp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* desktop */
    gap: 2rem;
}

/* Tablet (Divi ~ 981px and down) */
@media (max-width: 980px) {
    .nkhp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phone (Divi ~ 767px and down) */
@media (max-width: 767px) {
    .nkhp-grid {
        grid-template-columns: 1fr;
    }
}

/* Card base */
.nkhp-plan-card {
  background:#000;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nkhp-plan-card:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.nkhp-card-link { color:inherit; text-decoration:none; display:block; height:100%; }

/* Thumb */
.nkhp-thumb { --nkhp-card-ratio:16/9; --nkhp-fit:cover; aspect-ratio:var(--nkhp-card-ratio); overflow:hidden; width:100%; }
.nkhp-thumb img { width:100%; height:100%; object-fit:var(--nkhp-fit); display:block; }

/* Content */
.nkhp-card-content { padding:1rem; }
.nkhp-title { font-size:26px!important; margin:0 0 .5rem 0;padding:0; font-weight:500; color:#a6c23f}
.nkhp-byline { margin-bottom:0rem; color:#fff; }

/* Meta row with icons */
.nkhp-meta {
  --icon:30px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem;
}

.nkhp-meta .meta {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  line-height:1.2;
}

.plan-card-icon {
  width:var(--icon);
  height:var(--icon);
  flex:0 0 var(--icon);
  display:block;
  max-width:none; /* guards against theme img rules */
}


.nkhp-meta span {
    display: inline-block;
    margin-right: 10px;
    font-size: 0.9rem;
}

/* Gallery grid (responsive; Divi-like breakpoints) */
.nkhp-gallery {
  display: grid;
  gap: 1rem;
  /* default columns via CSS var (set by class and media queries) */
  --nkhp-cols: 3;
  grid-template-columns: repeat(var(--nkhp-cols), 1fr);

  /* frame controls (can be overridden inline by shortcode) */
  --nkhp-gallery-ratio: 4/3;
  --nkhp-gallery-fit: cover;
}

/* class-based column helpers (from shortcode's nkhp-cols-N) */
.nkhp-gallery:where(.nkhp-cols-1) { --nkhp-cols: 1; }
.nkhp-gallery:where(.nkhp-cols-2) { --nkhp-cols: 2; }
.nkhp-gallery:where(.nkhp-cols-3) { --nkhp-cols: 3; }
.nkhp-gallery:where(.nkhp-cols-4) { --nkhp-cols: 4; }
.nkhp-gallery:where(.nkhp-cols-5) { --nkhp-cols: 5; }
.nkhp-gallery:where(.nkhp-cols-6) { --nkhp-cols: 6; }

/* Divi-style breakpoints: 3 → 2 → 1 */
@media (max-width: 980px) {
  .nkhp-gallery { --nkhp-cols: 2; }
}
@media (max-width: 767px) {
  .nkhp-gallery { --nkhp-cols: 1; }
}

/* Reset figure spacing so grid gap is the only spacing */
.nkhp-gallery .nkhp-gallery-item {
  margin: 0;
}

/* Frame wrapper ensures uniform tile height without server crops */
.nkhp-gallery .nkhp-frame {
  aspect-ratio: var(--nkhp-gallery-ratio);
  overflow: hidden;
  width: 100%;
  display: block;
}
.nkhp-gallery .nkhp-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: var(--nkhp-gallery-fit);
  display: block;
}

/* Optional: caption styling */
.nkhp-gallery .nkhp-caption {
  font-size: 0.9rem;
  color: #666;
  margin-top: .35rem;
}

.nkhp-gallery .nkhp-frame {
  aspect-ratio: var(--nkhp-gallery-ratio, 4/3); /* fallback */
  overflow: hidden;
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.nkhp-gallery .nkhp-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: var(--nkhp-gallery-fit, cover);   /* fallback */
  display: block;
}

/* Force gallery images to fill the frame so object-fit can crop */
.nkhp-gallery .nkhp-gallery-item a.nkhp-lightbox { 
  display: block; 
  width: 100% !important;
  height: 100% !important;
}

.nkhp-gallery .nkhp-gallery-item .nkhp-frame {
  aspect-ratio: var(--nkhp-gallery-ratio, 4/3);
  overflow: hidden;
  width: 100%;
  display: block;
}

/* Stronger selector + resets override Divi/global rules */
.nkhp-gallery .nkhp-gallery-item .nkhp-frame > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: var(--nkhp-gallery-fit, cover) !important;
  display: block;
}

.nkhp-gallery .nkhp-gallery-item > .nkhp-frame > img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: var(--nkhp-gallery-fit, cover) !important;
  display: block;
}

/* Lightbox overlay */
.nkhp-lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999; /* sit above Divi header etc. */
}
.nkhp-lb-overlay.open { display: flex; }
.nkhp-lb-overlay img {
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.nkhp-lb-close {
  position: absolute;
  top: 16px; right: 20px;
  font-size: 2rem;
  color: #fff;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nkhp-lb-nav .prev, .nkhp-lb-nav .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  border: 0;
  color: #fff;
  font-size: 2rem;
  width: 48px; height: 56px;
  cursor: pointer;
  border-radius: 6px;
}
.nkhp-lb-nav .prev { left: 16px; }
.nkhp-lb-nav .next { right: 16px; }

/* Roof section */
.nkhp-roof-profiles-wrap { margin-top: 1.25rem; }
.nkhp-roof-heading { margin: 0;padding:0; }
.nkhp-roof-intro { margin: 0 0 .75rem; }

/* Cards (same as before) */
.nkhp-roof-profiles { display: grid; gap: 12px; }
.nkhp-roof-inline { display: flex; flex-wrap: wrap; gap: 12px; }
.nkhp-roof-inline .nkhp-roof-item { flex: 1 1 280px; }

.nkhp-roof-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: 12px;
  /*padding: 12px 14px;
  border: 2px solid currentColor;
  border-radius: 6px;*/
}
.nkhp-roof-icon svg { width: 36px; height: 36px; display: block; }
.nkhp-roof-title { font-weight: 700; line-height: 1.2; margin-bottom: 2px; }
.nkhp-roof-desc {  }