/* =========================================================
   SHOWROOM PAGE
========================================================= */

.page-showroom{
  background:#050505;
  color:#f5f5f7;
}

/* =========================================================
   HERO
========================================================= */

.showroom-page{
  min-height:100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(187, 0, 255, 0.16), transparent 22%),
    radial-gradient(circle at 80% 18%, rgba(88, 0, 255, 0.14), transparent 22%),
    radial-gradient(circle at 50% 70%, rgba(255, 80, 120, 0.10), transparent 26%),
    linear-gradient(180deg, rgba(8,8,10,0.96) 0%, rgba(5,5,7,0.98) 100%);
}

.showroom-hero{
  position:relative;
  min-height:42vh;
  display:flex;
  align-items:flex-end;
  padding:140px clamp(20px, 5vw, 72px) 56px;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.showroom-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.60) 100%),
    radial-gradient(circle at 30% 30%, rgba(175, 0, 255, 0.18), transparent 22%),
    radial-gradient(circle at 75% 20%, rgba(90, 0, 255, 0.16), transparent 24%);
  pointer-events:none;
}

.showroom-hero__content{
  position:relative;
  z-index:1;
  max-width:860px;
}

.showroom-back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:22px;
  color:#f3edf9;
  font-size:.98rem;
  text-decoration:none;
  opacity:.9;
  transition:opacity .22s ease, transform .22s ease;
}

.showroom-back-link:hover{
  opacity:1;
  transform:translateX(-2px);
}

.showroom-eyebrow{
  margin:0 0 10px;
  color:#b799d6;
  font-size:.92rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.showroom-hero h1{
  margin:0;
  font-size:clamp(2.5rem, 6vw, 5.6rem);
  line-height:.95;
  font-weight:800;
  letter-spacing:-.04em;
}

.showroom-hero h1 span{
  background:linear-gradient(90deg, #ffffff 0%, #cf9cff 52%, #8f35ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.showroom-subtitle{
  margin:18px 0 0;
  max-width:720px;
  color:#cfc8d8;
  font-size:clamp(1rem, 1.6vw, 1.18rem);
  line-height:1.75;
}

/* =========================================================
   INTRO BOX
========================================================= */

.showroom-intro{
  padding:28px clamp(20px, 5vw, 72px) 8px;
}

.showroom-intro__box{
  max-width:980px;
  padding:24px 28px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  box-shadow:
    0 16px 50px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.04);
  backdrop-filter:blur(10px);
}

.showroom-intro__box p{
  margin:0;
  color:#d7d0e0;
  font-size:1.04rem;
  line-height:1.8;
}

/* =========================================================
   GRID
========================================================= */

.showroom-grid-section{
  padding:34px clamp(20px, 5vw, 72px) 84px;
}

.showroom-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  grid-auto-rows:8px;
  grid-auto-flow:dense;
  align-items:start;
}

.showroom-card{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(255,255,255,0.08);
  background:#0b0b0f;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.04);
  cursor:pointer;
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.showroom-card::before{
  content:"";
  position:absolute;
  inset:auto -20% -30% auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(175,0,255,0.24) 0%, rgba(175,0,255,0.10) 35%, transparent 72%);
  opacity:0;
  transform:translateY(16px);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
  z-index:1;
}

.showroom-card:hover{
  transform:translateY(-6px);
  border-color:rgba(177, 92, 255, 0.42);
  box-shadow:
    0 22px 48px rgba(0,0,0,0.38),
    0 0 0 1px rgba(163, 70, 255, 0.14);
}

.showroom-card:hover::before{
  opacity:1;
  transform:translateY(0);
}

.showroom-card img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  background:#090909;
}

/* optional style differences */
.showroom-card--landscape.showroom-card--featured{
  grid-column:span 2;
}

.showroom-empty{
  grid-column:1 / -1;
  padding:48px 24px;
  border:1px dashed rgba(255,255,255,0.12);
  border-radius:24px;
  text-align:center;
  color:#b7afc3;
  background:rgba(255,255,255,0.02);
}

/* =========================================================
   LIGHTBOX
========================================================= */

.showroom-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(10px);
}

.showroom-lightbox[hidden]{
  display:none;
}

.showroom-lightbox__media-wrap{
  position:relative;
  max-width:min(94vw, 1440px);
  max-height:88vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.showroom-lightbox__media-wrap img{
  display:block;
  max-width:100%;
  max-height:88vh;
  width:auto;
  height:auto;
  border-radius:22px;
  box-shadow:0 28px 80px rgba(0,0,0,0.42);
  background:#090909;
}

.showroom-lightbox__close{
  position:absolute;
  top:20px;
  right:20px;
  width:52px;
  height:52px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:1.8rem;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:background .2s ease, transform .2s ease;
}

.showroom-lightbox__close:hover{
  background:rgba(181, 88, 255, 0.18);
  transform:scale(1.04);
}

.showroom-lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:58px;
  height:58px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:background .2s ease, transform .2s ease;
}

.showroom-lightbox__nav:hover{
  background:rgba(181, 88, 255, 0.18);
  transform:translateY(-50%) scale(1.04);
}

.showroom-lightbox__nav--prev{
  left:24px;
}

.showroom-lightbox__nav--next{
  right:24px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px){
  .showroom-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .showroom-card--landscape.showroom-card--featured{
    grid-column:span 1;
    aspect-ratio:16 / 10;
  }
}

@media (max-width: 760px){
  .showroom-hero{
    min-height:36vh;
    padding:120px 18px 38px;
  }

  .showroom-intro{
    padding:20px 18px 6px;
  }

  .showroom-grid-section{
    padding:24px 18px 56px;
  }

  .showroom-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .showroom-intro__box{
    padding:18px 16px;
    border-radius:22px;
  }

  .showroom-lightbox{
    padding:12px;
  }

  .showroom-lightbox__close{
    top:12px;
    right:12px;
    width:46px;
    height:46px;
  }

  .showroom-lightbox__nav{
    width:48px;
    height:48px;
    font-size:1.7rem;
  }

  .showroom-lightbox__nav--prev{
    left:10px;
  }

  .showroom-lightbox__nav--next{
    right:10px;
  }
}