/* ==========================================================================
   HERO IMAGE COLLAGE — Floating Glassmorphism Grid
   ========================================================================== */

/* Container — positioned right side of hero */
.hero__collage {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  height: 520px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}

/* Individual image card */
.hero__collage-item {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

[data-theme="light"] .hero__collage-item {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.hero__collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.hero__collage-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

.hero__collage-item:hover img {
  transform: scale(1.05);
}

/* ── Staggered layout — each card offset for depth ─────────────────── */

/* Top-left: taller, slight left offset */
.hero__collage-item--1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  transform: translateY(20px) rotate(-1.5deg);
  z-index: 2;
}

.hero__collage-item--1:hover {
  transform: translateY(16px) rotate(-1.5deg);
}

/* Top-right: shifted down for asymmetry */
.hero__collage-item--2 {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  transform: translateY(-10px) rotate(1deg);
  z-index: 1;
}

.hero__collage-item--2:hover {
  transform: translateY(-14px) rotate(1deg);
}

/* Bottom-left: shifted up to overlap */
.hero__collage-item--3 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  transform: translateY(-15px) rotate(1.5deg);
  z-index: 3;
}

.hero__collage-item--3:hover {
  transform: translateY(-19px) rotate(1.5deg);
}

/* Bottom-right: slight offset */
.hero__collage-item--4 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  transform: translateY(5px) rotate(-1deg);
  z-index: 2;
}

.hero__collage-item--4:hover {
  transform: translateY(1px) rotate(-1deg);
}

/* ── Glassmorphism shine effect ─────────────────────────────────────── */
.hero__collage-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

[data-theme="light"] .hero__collage-item::after {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 50%,
    transparent 100%
  );
}

/* ── Dark theme adjustments ─────────────────────────────────────────── */
[data-theme="dark"] .hero__collage-item {
  background: rgba(13, 38, 56, 0.3);
  border-color: rgba(87, 172, 231, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .hero__collage-item:hover {
  box-shadow: 0 16px 48px rgba(87, 172, 231, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 1400px) {
  .hero__collage {
    width: 400px;
    height: 440px;
    right: 3%;
    gap: 12px;
  }
}

@media (max-width: 1200px) {
  .hero__collage {
    width: 340px;
    height: 380px;
    right: 2%;
  }
}

/* Tablet: below hero content instead of absolute right */
@media (max-width: 1024px) {
  .hero__collage {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 500px;
    height: 280px;
    margin: var(--sp-10) auto 0;
    gap: 10px;
  }

  .hero__collage-item--1 { transform: rotate(-1deg); }
  .hero__collage-item--2 { transform: rotate(0.5deg); }
  .hero__collage-item--3 { transform: rotate(1deg); }
  .hero__collage-item--4 { transform: rotate(-0.5deg); }

  .hero__collage-item--1:hover { transform: rotate(-1deg) translateY(-4px); }
  .hero__collage-item--2:hover { transform: rotate(0.5deg) translateY(-4px); }
  .hero__collage-item--3:hover { transform: rotate(1deg) translateY(-4px); }
  .hero__collage-item--4:hover { transform: rotate(-0.5deg) translateY(-4px); }
}

/* Mobile: smaller grid */
@media (max-width: 768px) {
  .hero__collage {
    max-width: 100%;
    height: 240px;
    gap: 8px;
    margin-top: var(--sp-8);
  }

  .hero__collage-item {
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .hero__collage {
    height: 200px;
    gap: 6px;
  }

  .hero__collage-item {
    border-radius: var(--radius-md);
  }

  /* Remove rotations on small mobile */
  .hero__collage-item--1,
  .hero__collage-item--2,
  .hero__collage-item--3,
  .hero__collage-item--4 {
    transform: none;
  }
}