/* =========================================
   NovaLuxe Projects Page CSS (CLEAN, HERO SAFE)
   Rule: I am NOT touching your hero visibility logic.
   Only elements you already mark for reveal (.fade-item/.fade-seed/.nlx-reveal/.reveal)
   get reveal styles.
   ========================================= */

/* Tokens */
:root{
  --gold:#c8a45b;
  --gold2:#e6cd8c;

  --fadeY:14px;
  --fadeDur:.65s;

  --cardRadius:24px;
}

/* Utilities */
.font-serif{ font-family:'DM Serif Display', serif; }

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

/* Prevent horizontal scrollbar flash */
html,body{ overflow-x:clip; }

/* IMPORTANT
   Keep projects safe from sideways scroll,
   but do NOT clip the filters row
*/
#projects{ overflow-x:hidden; }

/* Filters must be able to scroll horizontally on mobile */
#projects-filters{
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  padding-left:16px;
  padding-right:16px;
  scroll-padding-left:16px;
  scroll-padding-right:16px;
  scrollbar-width:none;
}
#projects-filters::-webkit-scrollbar{ display:none; }

/* Make the filter buttons stay in one row and not shrink */
#projects-filters .filters-row{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  width:max-content;
}
#projects .filter-btn{ flex:0 0 auto; }

/* Unified reveal (ONLY opt-in classes) */
.fade-item,
.fade-seed,
.reveal,
.nlx-reveal{
  opacity:0;
  transform:translateY(var(--fadeY));
  transition:opacity var(--fadeDur) ease, transform var(--fadeDur) ease;
  will-change:opacity,transform;
}

.fade-item.in-view,
.fade-seed.in-view,
.fade-seed.is-visible,
.reveal.in-view,
.nlx-reveal.in-view,
.is-visible{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  .fade-item,.fade-seed,.reveal,.nlx-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* Focus */
#projects a:focus-visible,
#projects button:focus-visible,
#investor-feature a:focus-visible,
#final-cta a:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(200,164,91,.60);
  border-radius:12px;
}

/* PROJECTS */
#projects{ background:#000; color:#fff; }

/* Filters */
#projects .filter-btn{
  background:#0c0c0c;
  border:1px solid rgba(200,164,91,.45);
  outline:none;
}
#projects .filter-btn:focus{ box-shadow:0 0 0 2px rgba(200,164,91,.60); }
#projects .filter-btn.is-active{
  background:linear-gradient(90deg,var(--gold),#fffbe3,var(--gold)) !important;
  color:#000 !important;
  font-weight:600;
}

/* Neutralize any old .group hover junk */
#projects .group,
#projects .group:hover{
  border:none;
  background:transparent;
  box-shadow:none;
  transform:none;
  transition:none;
}

/* Cards */
#projects .proj-card{
  position:relative;
  display:block;
  border-radius:var(--cardRadius);
  overflow:hidden;
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 6px 18px rgba(0,0,0,.35);

  opacity:0;
  transform:translateY(var(--fadeY));
  transition:
    opacity .7s ease,
    transform .7s ease,
    box-shadow .30s ease,
    border-color .30s ease;
  will-change:opacity,transform;
  backface-visibility:hidden;
}
#projects .proj-card.in-view,
#projects .proj-card.is-visible{
  opacity:1;
  transform:none;
}
#projects .proj-card.nlx-reveal{
  transition:opacity .7s ease, transform .7s ease !important;
}

#projects .proj-img{
  width:100%;
  height:16rem;
  object-fit:cover;
  display:block;
  transition:transform .50s ease;
  will-change:transform;
}

#projects .proj-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.10) 100%);
  pointer-events:none;
}

#projects .proj-pill{
  position:absolute;
  top:12px;
  left:12px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  color:#000;
  background:linear-gradient(90deg,var(--gold),#fffbe3,var(--gold));
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

#projects .proj-footer{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:16px;
}

#projects .proj-title{
  font-family:'DM Serif Display', serif;
  font-size:1.45rem;
  line-height:1.1;
  font-weight:600;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.65), 0 0 18px rgba(0,0,0,.35);
}

#projects .proj-meta{
  margin-top:6px;
  font-size:13px;
  color:rgba(255,255,255,.82);
}

/* Arrow on desktop */
#projects .proj-arrow{
  position:absolute;
  bottom:18px;
  right:18px;
  display:none;
  opacity:0;
  transform:translateX(12px);
  transition:opacity .30s ease, transform .30s ease;
}
@media (min-width:768px){ #projects .proj-arrow{ display:block; } }

/* Hover effects only where hover exists */
@media (hover:hover){
  #projects .proj-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 36px rgba(0,0,0,.55);
    border-color:rgba(200,164,91,.35);
  }
  #projects .proj-card:hover .proj-img{ transform:scale(1.03); }
  #projects .proj-card:hover .proj-arrow{ opacity:1; transform:none; }
}

/* Coming soon badge */
#projects .proj-soon-badge{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.75);
  pointer-events:none;
  opacity:1;
  font-size:0;
  transition:opacity .30s ease;
}
#projects .proj-soon-badge::before{
  content:"Photos coming soon";
  padding:.55rem 1rem;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  color:#000;
  background:linear-gradient(90deg,var(--gold),#fffbe3,var(--gold));
}

/* True desktop only */
@media (min-width:1280px){
  #projects .proj-soon-badge{ opacity:0; }
  #projects .proj-soon:hover .proj-soon-badge{ opacity:1; }
}

/* Touch devices should always show it */
@media (hover:none) and (pointer:coarse){
  #projects .proj-soon-badge{ opacity:1 !important; }
}

/* Mobile tap hint pill */
.proj-tap-arrow{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:6;
  pointer-events:none;
  display:none;
}
.proj-tap-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  color:#0b0b0b;
  background:linear-gradient(180deg,var(--gold),var(--gold2),#fff);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  opacity:.92;
}
.proj-tap-icon{ font-size:16px; line-height:1; }

@media (hover:none) and (pointer:coarse){
  .proj-tap-arrow{ display:block; }
  .proj-tap-pill{ animation:projTapHint 1.4s ease-out 1; }
  #projects .proj-card:hover .proj-img{ transform:none; }
}
@keyframes projTapHint{
  from{ opacity:0; transform:translate(10px,10px) scale(.98); }
  to{ opacity:.92; transform:translate(0,0) scale(1); }
}

/* Filters reveal on small screens (kept, filters only) */
@media (max-width:640px){
  #projects-filters,
  #projects-filters .filter-btn{
    opacity:0;
    transform:translateY(var(--fadeY));
    transition:opacity var(--fadeDur) ease, transform var(--fadeDur) ease;
  }
  #projects-filters.in-view,
  #projects-filters.in-view .filter-btn{
    opacity:1;
    transform:none;
  }
}

/* Optional replay */
@keyframes nlxFadeUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:none; }
}
#projects .proj-card.nlx-replay{ animation:nlxFadeUp .6s ease both; }

/* INVESTOR FEATURE */
#investor-feature{ background:#000; color:#fff; }

/* Layout */
#investor-feature .inv-grid{
  display:grid;
  gap:2.5rem;
  align-items:center;
}

/* Desktop 2-col only on 1280+ */
@media (min-width:1280px){
  #investor-feature .inv-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Image visibility */
#investor-feature .inv-mobile-img{ display:block; }
#investor-feature .inv-desktop-img{ display:none; }
@media (min-width:1280px){
  #investor-feature .inv-mobile-img{ display:none; }
  #investor-feature .inv-desktop-img{ display:block; }
}

/* Title underline */
#investor-feature .inv-title-text{
  position:relative;
  display:inline-block;
}
#investor-feature .inv-title-text::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-12px;
  width:100%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#c8a45b,#e6cd8c,#c8a45b);
}

/* List item alignment + icon sizing */
#investor-feature{
  --invIcon:64px;
  --invGap:1.25rem;
}

#investor-feature .inv-icon{
  width:var(--invIcon);
  height:var(--invIcon);
  flex:0 0 var(--invIcon);
  display:inline-flex;
  align-items:flex-start;
  justify-content:center;
  line-height:0;
}
#investor-feature .inv-icon img{
  width:100%;
  height:100%;
  display:block;
}

/* Desktop rows */
@media (min-width:1280px){
  #investor-feature .inv-text{ text-align:left; }
  #investor-feature .inv-li{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:var(--invGap);
    text-align:left;
  }
}

/* Mobile + tablet stacked */
@media (max-width:1279px){
  #investor-feature .inv-text{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    max-width:36rem;
  }

  #investor-feature .inv-text > p{
    max-width:34rem;
    margin-left:auto;
    margin-right:auto;
    font-size:16px;
    line-height:1.6;
  }

  #investor-feature .inv-li{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.85rem;
    text-align:center;
  }

  #investor-feature{ --invIcon:72px; }
}

/* iPad / tablet type crank */
@media (min-width:768px) and (max-width:1279px){
  #investor-feature .max-w-6xl{
    max-width:60rem !important;
  }

  #investor-feature h2.fade-item{
    font-size:3.25rem !important;
    line-height:1.05 !important;
  }

  #investor-feature .inv-text > p.fade-item{
    font-size:1.35rem !important;
    line-height:1.75 !important;
    max-width:52ch !important;
  }

  #investor-feature ul{ margin-top:2.25rem !important; }

  #investor-feature .inv-li .font-medium{
    font-size:1.35rem !important;
    line-height:1.2 !important;
  }

  #investor-feature .inv-li p.text-sm{
    font-size:1.15rem !important;
    line-height:1.7 !important;
  }

  #investor-feature{ --invIcon:88px; }

  #investor-feature .inv-mobile-img img{
    height:420px !important;
  }
}

/* FINAL CTA */
#final-cta{
  background:#000;
  color:#fff;
  position:relative;
  overflow:hidden;
}

.nlx-gradient-border{
  position:relative;
  border-radius:1.5rem;
  padding:2px;
  background:linear-gradient(180deg,var(--gold) 0%,var(--gold2) 55%,#fff 100%);
}
.nlx-border-inner{
  background:#000;
  border-radius:inherit;
  height:100%;
}

/* HIDE underline ONLY on iPhone SE-ish widths */
@media (max-width:420px){
  #investor-feature .inv-title-text::after{
    display:none;
  }
}

.nlx-wordgrad{
  background: linear-gradient(
    180deg,
    var(--gold) 0%,
    var(--gold2) 50%,
    #ffffff 80%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================
   FIX: Projects filter pills wrap into 2 rows
   Only on small screens (iPhone SE etc.)
   ========================================= */
@media (max-width:420px){

  /* make the filters container not clip anything */
  #projects-filters{
    overflow: visible !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* target the row that contains the pills
     (works whether it's a div, nav, etc. as the direct child) */
  #projects-filters > *{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px 12px !important; /* row gap, col gap */
    width: 100% !important;
  }

  /* force nice 3 on top, 2 on bottom */
  #projects-filters .filter-btn{
    flex: 0 0 calc((100% - 24px) / 3) !important; /* 3 across */
    max-width: calc((100% - 24px) / 3) !important;
    white-space: nowrap;
    text-align: center;
  }
}
/* =========================================
   BRUTE FIX: iPhone SE filters
   Force wrap into 2 rows no matter the HTML
   ========================================= */
@media (max-width:420px){

  /* kill clipping + allow wrap */
  #projects-filters{
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px 12px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* if your buttons are inside a UL/DIV wrapper, force that wrapper to wrap too */
  #projects-filters > *{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* force 3 per row (then the rest drops to row 2) */
  #projects-filters .filter-btn{
    flex: 0 0 calc((100% - 24px) / 3) !important;
    max-width: calc((100% - 24px) / 3) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
}