/* ==========================================================
   Lucid Work Projects — Master Stylesheet (Option B)
   ========================================================== */

:root{
  --lw-gap: 30px;
  --lw-accent: #2b6f66;
  --lw-text: #ffffff;
}

/* ==========================================================
   Cards
   ========================================================== */

.lw-card{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:0;
  text-decoration:none;
  color:inherit;
  background:#f3f3f3;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
  transition:.25s;
}

.lw-card__media{
  aspect-ratio: 3 / 2;
  background:#d7d7d7;
  overflow:hidden;
}

.lw-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.lw-card__placeholder{
  width:100%;
  height:100%;
  background:#bdbdbd;
}

.lw-card__meta{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:25px;
  color:var(--lw-text);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 65%);
}

.lw-card__title{
  font-weight:600;
  font-family:'TradeGothicX';
}

/* ==========================================================
   PROJECT HERO (REAL 100VH HERO)
   ========================================================== */



/* ===============================
   Background Stage
   =============================== */
.single-lw_project .project-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.project-bg .bg-panel {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.project-bg .bg-panel.is-active {
  opacity: 1;
}

/* ===============================
   Sticky Hero
   =============================== 
.single-lw_project .project-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
}


.single-lw_project .project-hero h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 40px;
  color: #fff;
	transition: opacity 0.4s ease, transform 0.4s ease;
}


.single-lw_project.hero-switched .project-hero h1 {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

.single-lw_project .project-title {
  position: absolute;
  left: 30px;
  top: 0;
  transform: translateY(-200%);
  z-index: 9;
	color:#fff;
	font-family: 'TradeGothicX';
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
*/

.single-lw_project .featured-image {display:none;}

/* ===============================
   Scroll Content
   =============================== 
.single-lw_project .project-container,
.single-lw_project .project-section{
  position: relative;
  z-index: 2;
  
}

.single-lw_project .project-section{
  background: #d6d6d6;
  padding-top:10px !important;
}
*/

/* ===============================
   Fullwidth Spacer (empty)
   =============================== 
.single-lw_project .fullwidth {
  height: 100vh;
}

.single-lw_project .site-footer {position:relative;}

*/







/* ==========================================================
   Slider
   ========================================================== */

.lw-slider-wrap{
  position:relative;
  margin: 8px 0 24px 8%;
}

.lw-slider{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: calc((100% - var(--lw-gap) * 3) / 3.25);
  gap: var(--lw-gap);
  overflow-x:auto;
  padding-bottom:18px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  mask-image: linear-gradient(90deg,#000 0%,#000 90%,rgba(0,0,0,.05) 100%);
}

.lw-slider::-webkit-scrollbar{
  display:none;
}

.lw-slide{
  scroll-snap-align:none;
}

.lw-slider-progress{
  position:relative;
  height:6px;
  background:#c3c2c1;
  overflow:hidden;
  margin-top:8px;
  z-index:30;
  pointer-events:auto;
}

.lw-slider-progress__bar{
  position:absolute;
  inset:0 auto 0 0;
  width:10%;
  background:var(--lw-accent);
  cursor:default;
  z-index:31;
}

.lw-slider-progress__bar::after{
  content:"";
  position:absolute;
  inset:-8px -6px;
}

/* ==========================================================
   Gallery
   ========================================================== */

.lw-gallery{
  --lw-cols: 2;
}

.lw-grid{
  display:grid;
  grid-template-columns: repeat(var(--lw-cols), 1fr);
  gap: var(--lw-gap);
  padding:0 15px
}

.lw-see-more__grid{
  --lw-cols: 3;
}

@media (max-width:800px){
  .lw-grid{ --lw-cols:1; padding:0;}
}

/* ==========================================================
   Featured Project
   ========================================================== */

.lw-featured__link{
  display:block;
  text-decoration:none;
  color:inherit;
  position:relative;
}

.lw-featured__media{
  aspect-ratio: 3 / 2;
  overflow:hidden;
}

.lw-featured__img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ==========================================================
   Filters
   ========================================================== */

.lw-filters{
  display:flex;
  gap:18px;
  margin-bottom:18px;
}

.lw-filters button{
  background:none;
  border:0;
  padding:6px 0;
  cursor:pointer;
  font-weight:600;
  opacity:.55;
}

.lw-filters button.is-active{
  opacity:1;
  position:relative;
}

.lw-filters button.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:3px;
  background:var(--lw-accent);
}

/* ==========================================================
   Project Awards
   ========================================================== */

.project-awards{
  border-top:1px solid rgba(0,0,0,.35);
  border-bottom:1px solid rgba(0,0,0,.35);
  padding:40px 0;
}

.project-awards__label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.project-awards__row{
  display:grid;
  grid-template-columns:120px 1fr auto;
  align-items:center;
  padding:14px 0;
  border-top:1px solid rgba(0,0,0,.18);
}

.project-awards__row:first-child{
  border-top:0;
}

.pa-year,
.pa-name,
.pa-project{
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.pa-project{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
}

.pa-arrow{
  font-size:16px;
  line-height:1;
}

@media (max-width:900px){
  .project-awards__row{
    grid-template-columns:80px 1fr;
    row-gap:6px;
  }
  .pa-project{
    grid-column:2 / 3;
  }
}

/* ==========================================================
   Animations
   ========================================================== */

.anim{
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity var(--anim-dur,1s) ease-out,
    transform var(--anim-dur,1s) ease-out;
}

.anim.active{
  opacity:1;
  transform:none;
}

.fade-up{ transform:translateY(60px); }
.fade-left{ transform:translateX(60px); }
.fade-right{ transform:translateX(-60px); }

.dur-1s{ --anim-dur:.5s; }
.dur-2s{ --anim-dur:1s; }

.delay-1s{ transition-delay:.5s; }

/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (prefers-reduced-motion: reduce){
  .anim{
    transition:none;
    opacity:1;
    transform:none;
  }
}