.showcase{ padding: 70px 0 20px; }

.showcase-frame{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/8;
  box-shadow: var(--shadow);
  background: var(--ink);
}

.showcase-track{ position: relative; width: 100%; height: 100%; }

.showcase-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.showcase-slide.is-active{ opacity: 1; }

.showcase-slide img{ width: 100%; height: 100%; object-fit: cover; }

.showcase-slide figcaption{
  position: absolute;
  right: 30px; bottom: 26px;
  color: var(--white);
  font-family: 'Aref Ruqaa', serif;
  font-size: 1.3rem;
  padding: 10px 22px;
  background: rgba(7,58,82,.55);
  backdrop-filter: blur(6px);
  border-radius: 999px;
}

.showcase-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.85);
  color: var(--blue-deep);
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease, transform .3s ease;
}

.showcase-arrow:hover{ background: var(--white); transform: translateY(-50%) scale(1.08); }

.showcase-arrow.prev{ right: 20px; }
.showcase-arrow.next{ left: 20px; }

.showcase-dots{
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.showcase-dots button{
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}

.showcase-dots button.is-active{ background: var(--gold); transform: scale(1.3); }

.gallery-grid-section{ padding: 80px 0; }

.gallery-masonry{
  columns: 4 220px;
  column-gap: 18px;
}

.g-item{
  break-inside: avoid;
  margin-bottom: 18px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.g-item img{
  width: 100%;
  display: block;
  transition: transform .5s ease;
}

.g-item:hover img{ transform: scale(1.06); }

.gallery-cta{
  padding: 80px 0 110px;
  text-align: center;
  background: linear-gradient(160deg, var(--blue-deep), var(--blue));
  color: var(--white);
}

.gallery-cta h2{ color: var(--white); margin-bottom: 12px; }

.gallery-cta p{ color: rgba(255,255,255,.85); max-width: 480px; margin: 0 auto 28px; }

@media (max-width: 720px){
  .showcase-frame{ aspect-ratio: 4/5; }
  .gallery-masonry{ columns: 2 160px; }
}