.core-showcase{
  font-family: inherit;
  color: var(--text);
  max-width: var(--cs-container);
  margin: 0 auto;
  padding: var(--pad);
}

.core-showcase .cs-title{
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 18px;
}

/* Tabs */
.cs-tabs {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.cs-tab {
  background: #ffffff00;
  color: #ffffff;
  cursor: pointer;
  font-weight: 500;
  padding: 12px 25px;
  border-radius: 30px !important;   /* FORCE ROUND ALWAYS */
  box-shadow: none;
  transition: all 0.3s ease;
  border: none;
}

/* Hover */
.cs-tab:hover {
  background: #D43182;
  color: #fff;
  border-radius: 30px !important;   /* KEEP ROUND */
}

/* Active / Selected */
.cs-tab.active {
  background: #D43182;
  color: #fff;
  border-radius: 30px !important;
  box-shadow: none;
}

/* FIX: When clicking/focusing – prevent rectangle */
.cs-tab:focus,
.cs-tab:focus-visible,
.cs-tab:active {
  outline: none !important;
  border: none !important;
  border-radius: 30px !important;   /* STOP RECTANGLE */
  box-shadow: none !important;
}


/* Panels */
.cs-panel{ display:none; }
.cs-panel.active{ display:block; }

/* Generic grid */
.cs-grid{
  display:grid;
  gap:var(--gap);
  align-items:stretch;
  margin-bottom:30px;
}

/* Category specific aspect ratios using CSS aspect-ratio where available, else padding trick */
.cs-item, .cs-img{
  position:relative;
  overflow:hidden;
  border-radius:0px;
  background:#111;
}

/* Images inside items */
.cs-item img,
.cs-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.cs-item, .cs-img {
    margin: 2px;
}

/* Provide fallback aspect ratio containers if aspect-ratio not supported */
.cs-item--3x2{ aspect-ratio:3/2; }
.cs-item--4x3{ aspect-ratio:4/2; }
.cs-item--16x9{ aspect-ratio:16/9; }

/* For older browsers fallback */
.cs-item--3x2::before{ content:""; display:block; padding-top:66.66%; }
.cs-item--4x3::before{ content:""; display:block; padding-top:75%; }
.cs-item--16x9::before{ content:""; display:block; padding-top:56.25%; }
.cs-item img,
.cs-img img { position:absolute; top:0; left:0; right:0; bottom:0; width:100%; /*height:100%;*/ }

/* Play overlay for video thumbnails */
.cs-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.cs-play .cs-play-btn{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(0,0,0,0.6);
  border:3px solid rgba(255,255,255,0.08);
  color:#fff;
  font-size:20px;
  transition:transform .12s ease;
}
.cs-item:hover .cs-play-btn,
.cs-item:focus .cs-play-btn{
  transform:scale(1.06);
}

/* Lightbox / Popup */
#cs-lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  z-index:999999;
  align-items:center;
  justify-content:center;
  padding:20px;
}
#cs-lightbox[aria-hidden="false"]{ display:flex; }
#cs-lb-inner{
  position:relative;
  width:100%;
  max-width:1180px;
  max-height:92vh;
}
#cs-lb-close{
  position:absolute;
  top:-42px;
  right:0;
  background:transparent;
  color:#fff;
  font-size:32px;
  border:0;
  cursor:pointer;
}
#cs-lb-viewport{
  background:#000;
  width:100%;
  height:calc(92vh - 80px);
  display:flex;
  align-items:center;
  justify-content:center;
}
#cs-lb-viewport img,
#cs-lb-viewport iframe{ max-width:100%; max-height:100%; }

/* caption & nav */
#cs-lb-caption{ color:#fff; text-align:center; margin-top:8px; }
#cs-lb-prev,#cs-lb-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.45);
  color:#fff;
  border:0;
  padding:10px 12px;
  cursor:pointer;
  font-size:20px;
  border-radius:4px;
}
#cs-lb-prev{ left:-60px; }
#cs-lb-next{ right:-60px; }

/* Responsive grid rules per category */
/* Default: mobile (single column) */
.walkthrough .cs-grid { grid-template-columns: 1fr; }
.exterior .cs-grid { grid-template-columns: 1fr; }
.interiors .cs-grid { grid-template-columns: 1fr; }
.plans .cs-grid { grid-template-columns: 1fr; }
.drone .cs-grid { grid-template-columns: 1fr; }
.corporate .cs-grid { grid-template-columns: 1fr; }

/* Tablet */
@media (min-width:600px){
  .walkthrough .cs-grid { grid-template-columns: repeat(2,1fr); }
  .exterior .cs-grid { grid-template-columns: repeat(3,1fr); }
  .interiors .cs-grid { grid-template-columns: repeat(3,1fr); }
  .plans .cs-grid { grid-template-columns: repeat(2,1fr); }
  .drone .cs-grid, .corporate .cs-grid { grid-template-columns: 1fr; }
}

/* Desktop */
@media (min-width:992px){
  .walkthrough .cs-grid { grid-template-columns: repeat(3,1fr); } /* 3 columns */
  .exterior .cs-grid { grid-template-columns: repeat(4,1fr); }   /* 4 columns */
  .interiors .cs-grid { grid-template-columns: repeat(4,1fr); }   /* 4 columns */
  .plans .cs-grid { grid-template-columns: repeat(3,1fr); }       /* 3 columns */
  .drone .cs-grid, .corporate .cs-grid { grid-template-columns: 1fr; } /* single large */
}

/* Make single large thumbnail for drone/corporate appear taller */
.drone .cs-item--full,
.corporate .cs-item--full { aspect-ratio: 16 / 7; }

/* keyboard focus */
.cs-tab:focus, .cs-item:focus, #cs-lb-close:focus, #cs-lb-prev:focus, #cs-lb-next:focus {
  outline: 3px solid rgba(255,255,255,0.12);
  outline-offset: 2px;
  border-radius:4px;
}

/* small screens adjustments */
@media (max-width:420px){
  .cs-tab{ padding:10px 12px; font-size:14px; }
  .cs-title{ font-size:1.6rem; }
  #cs-lb-prev, #cs-lb-next { display:none; }
  #cs-lb-viewport { height:56vh; }
}

#cs-lb-viewport iframe {
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    display:block;
}