/* =========================================
   NovaLuxe — Gallery + Lightbox + CTA (Optimized)
   - No sideways clipping
   - CTA gradient border + gradient text restored
   - CTA layouts shrink safely on tiny screens
   ========================================= */

html, body { 
  font-family: "Inter", sans-serif !important; 
  max-width: 100vw; 
  overflow-x: hidden; 
}

h1, h2, h3, h4, h5, h6, .font-serif { 
  font-family: "DM Serif Display", serif !important; 
}

/* ===== Tokens ===== */
:root{
  --gold:#c8a45b;
  --gold2:#e6cd8c;
  --gold3:#fffbe3;
}

/* =========================
   Gallery
   ========================= */
#gallery { contain: paint; }

#gallery a{
  display:block; 
  border-radius:20px; 
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12); 
  background:#0b0b0b;
  transition: transform .18s ease, border-color .18s ease; 
  aspect-ratio:4/3;
}

@media (hover:hover){ 
  #gallery a:hover { 
    transform: translateY(-2px); 
    border-color: #c8a45b99; 
  } 
}

/* reserve height so IO can fire */
.ph{ display:block; padding-top:75%; }

#gallery img{ 
  display:block; 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  transition: opacity .25s ease; 
  opacity:0; 
}
#gallery img.loaded{ opacity:1; }

/* Extra rounding safety (covers any <button> tiles too) */
#gallery > a,
#gallery > button{
  border-radius: 24px;
  overflow: hidden;
  display: block;
  background: transparent;
}
#gallery > a > img,
#gallery > button > img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
#gallery > a > .ph,
#gallery > button > .ph{
  border-radius: inherit;
}

/* =========================
   Lightbox
   ========================= */
dialog#lightbox{
  border:none; padding:0; margin:0; inset:0;
  width:100vw; height:100svh;
  max-width:none; max-height:none;
  background: rgba(0,0,0,.96);
  -webkit-tap-highlight-color: transparent;
}
dialog#lightbox::backdrop{ background: rgba(0,0,0,.5); }
dialog#lightbox[open]{ overscroll-behavior: contain; }

#lb-stage{
  position: relative;
  width: 100vw;
  height: 100svh;
  box-sizing: border-box;
  padding:
    calc(clamp(8px,2.2vw,16px) + env(safe-area-inset-top))
    calc(clamp(8px,2.2vw,16px) + env(safe-area-inset-right))
    calc(clamp(10px,2.6vw,18px) + env(safe-area-inset-bottom))
    calc(clamp(8px,2.2vw,16px) + env(safe-area-inset-left));
}

.lb-canvas{
  position:absolute; inset:0;
  display:grid; place-items:center;
  overflow:hidden;
  touch-action:none;
}

#lb-img,#lb-img2{
  position:absolute; inset:0; margin:auto;
  max-width:100vw; max-height:100svh;
  width:auto; height:auto;
  object-fit: contain;
  will-change: transform, opacity;
  transition: opacity .16s ease;
}
.lb-fade{ opacity:0; }

.lb-btn{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:999px;
  background: linear-gradient(135deg,var(--gold),var(--gold2),var(--gold3));
  border:none;
  color:#111;
  font-size:26px;
  font-weight:700;
  transition: transform .18s ease, filter .18s ease;
}

@media (hover:hover){
  .lb-btn:hover{ transform: scale(1.08); filter: brightness(1.15); }
}

#lb-prev{ left:12px; top:50%; transform: translateY(-50%); }
#lb-next{ right:12px; top:50%; transform: translateY(-50%); }
#lb-close{
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
}

@media (hover:none),(pointer:coarse){
  #lb-prev,#lb-next,.lb-zone{ display:none !important; }
}

#lb-counter{
  position:absolute;
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  font: 600 13px/1 Inter,system-ui,-apple-system,"Segoe UI",Roboto;
  color:#fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  padding: .42rem .64rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.lb-zone{
  position:absolute; top:0; bottom:0;
  width:34%;
  -webkit-tap-highlight-color: transparent;
}
.lb-zone.left{ left:0; }
.lb-zone.right{ right:0; }

/* =========================
   Hover disable for touch
   ========================= */
@media (hover:none),(pointer:coarse){
  .hover\:scale-105:hover,
  .hover\:scale-110:hover,
  .hover\:-translate-y-1:hover,
  .hover\:opacity-90:hover,
  .hover\:shadow:hover,
  .hover\:shadow-lg:hover,
  .hover\:shadow-2xl:hover,
  .hover\:bg-white:hover,
  .hover\:text-black:hover,
  .hover\:border-white\/60:hover{
    transform:none !important;
    opacity:1 !important;
    box-shadow:none !important;
    background:inherit !important;
    color:inherit !important;
    border-color:inherit !important;
  }
}

/* =========================
   Fade / reveal (generic)
   ========================= */
.fade-item{
  opacity:0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.fade-item.in-view{
  opacity:1;
  transform: translateY(0);
}

/* keep your customhome CTA in-view hook */
.js #customhome-cta .fade-item{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.js #customhome-cta.in-view .fade-item{
  opacity:1;
  transform:none;
}

/* =========================
   CTA Core (gradient border + gradient text)
   ========================= */

/* Gradient text utility */
.nlx-gradient-text{
  background: linear-gradient(180deg,var(--gold),var(--gold2),#ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* If you use wrapper version on some CTAs */
.nlx-gradient-border{
  position:relative;
  border-radius: 1.5rem;
  padding: 2px;
  background: linear-gradient(180deg,var(--gold),var(--gold2),#ffffff);
  max-width: 100%;
  box-sizing: border-box;
}
.nlx-border-inner{
  border-radius: calc(1.5rem - 2px);
  background:#000;
  max-width: 100%;
  box-sizing: border-box;
}

/* If any old pseudo-element border exists anywhere, kill it cleanly */
.nlx-gradient-border::before,
.nlx-gradient-border::after{
  content:none !important;
}

/* =========================
   CTA Bulletproofing (ALL CTAs)
   Apply to any section ending in -cta or containing "cta"
   ========================= */

/* pick up your CTA ids without you listing them forever */
section[id$="-cta"],
section[id*="cta"]{
  overflow: visible; /* do NOT clip internal text/buttons */
}

/* allow grid kids to shrink (this is the real anti-clip) */
section[id$="-cta"] .grid > *,
section[id*="cta"]  .grid > *{
  min-width: 0;
}

/* prevent long words from forcing overflow */
section[id$="-cta"] h2,
section[id*="cta"]  h2,
section[id$="-cta"] p,
section[id*="cta"]  p{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Buttons never force width wider than card */
section[id$="-cta"] a,
section[id*="cta"]  a{
  max-width: 100%;
}

/* On phones, always stack CTA grids */
@media (max-width: 767.98px){
  section[id$="-cta"] .grid,
  section[id*="cta"]  .grid{
    grid-template-columns: 1fr !important;
  }

  /* make buttons consistent when stacked */
  section[id$="-cta"] .flex,
  section[id*="cta"]  .flex{
    justify-content: center;
  }

  /* only shrink headings on tiny screens (fixes your squeeze test) */
  section[id$="-cta"] h2,
  section[id*="cta"]  h2{
    font-size: clamp(1.75rem, 7vw, 3rem);
    line-height: 1.1;
  }
}

/* Extra-tiny padding safety (only affects the card you showed that has .fade-item padding) */
@media (max-width: 360px){
  #customhome-cta .fade-item{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =========================
   iPad Mini / iPad Air centering (single rule, no duplicates)
   ========================= */
@media (min-width: 768px) and (max-width: 1023px){
  #contact-cta .md\:grid-cols-\[1\.2fr_auto\],
  #renovations-cta .md\:grid-cols-\[1\.2fr_auto\],
  #projects-cta .md\:grid-cols-\[1\.2fr_auto\],
  #contact-cta-basement .md\:grid-cols-\[1\.2fr_auto\],
  #final-cta .md\:grid-cols-\[1\.2fr_auto\],
  #customhome-cta .md\:grid-cols-\[1\.2fr_auto\]{
    grid-template-columns: 1fr !important;
  }

  #contact-cta .md\:text-left,
  #renovations-cta .md\:text-left,
  #projects-cta .md\:text-left,
  #contact-cta-basement .md\:text-left,
  #final-cta .md\:text-left,
  #customhome-cta .md\:text-left{
    text-align: center !important;
  }

  #contact-cta .md\:mx-0,
  #renovations-cta .md\:mx-0,
  #projects-cta .md\:mx-0,
  #contact-cta-basement .md\:mx-0,
  #final-cta .md\:mx-0,
  #customhome-cta .md\:mx-0{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #contact-cta .md\:items-end,
  #renovations-cta .md\:items-end,
  #projects-cta .md\:items-end,
  #contact-cta-basement .md\:items-end,
  #final-cta .md\:items-end,
  #customhome-cta .md\:items-end{
    align-items: center !important;
  }
}