/* =========================================
   PREMIUM SIDE-BY-SIDE IMAGE SHOWCASE
   ========================================= */

.image-showcase {
  width: min(1400px, 94%);
  margin: 50px auto;
  padding: 24px;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;

  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(120, 140, 255, 0.08), transparent 35%),
    linear-gradient(135deg, #0b0d12, #171a22 50%, #0c0e13);

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 30px;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  overflow: hidden;
}


/* Individual image panels */

.image-panel {
  position: relative;
  min-height: 520px;

  overflow: hidden;
  border-radius: 22px;

  background: #111318;

  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);

  isolation: isolate;
}


/* Image */

.image-panel img {
  width: 100%;
  height: 100%;
  min-height: 520px;

  display: block;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(1.08)
    contrast(1.04)
    brightness(1.02);

  transform: scale(1.001);

  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease;
}


/* Cinematic gradient overlay */

.image-panel::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0) 45%,
      rgba(0, 0, 0, 0.28) 100%
    );

  transition: opacity 0.5s ease;
}


/* Soft premium glow */

.image-panel::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;
  pointer-events: none;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 50px rgba(255, 255, 255, 0.025);
}


/* Hover effect */

.image-panel:hover img {
  transform: scale(1.045);

  filter:
    saturate(1.15)
    contrast(1.06)
    brightness(1.05);
}

.image-panel:hover::after {
  opacity: 0.7;
}


/* =========================================
   OPTIONAL IMAGE LABEL
   ========================================= */

.image-label {
  position: absolute;
  left: 20px;
  bottom: 20px;

  z-index: 5;

  padding: 9px 15px;

  color: #fff;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;

  background: rgba(15, 17, 23, 0.55);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.25);
}


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

@media (max-width: 800px) {
  .image-showcase {
    width: 92%;
    padding: 16px;
    gap: 16px;
    border-radius: 22px;

    grid-template-columns: 1fr;
  }

  .image-panel,
  .image-panel img {
    min-height: 400px;
  }
}


@media (max-width: 500px) {
  .image-showcase {
    margin: 25px auto;
    padding: 10px;
    gap: 10px;
  }

  .image-panel,
  .image-panel img {
    min-height: 300px;
  }

  .image-panel {
    border-radius: 16px;
  }

  .image-label {
    left: 12px;
    bottom: 12px;
    font-size: 11px;
    padding: 7px 12px;
  }
}