/* ===== Base (Desktop) - keep your original design ===== */
.gallery-wrapper {
  position: relative;
  height: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gallery-card {
  position: absolute;
  width: 420px;
  height: 300px;
  background: white;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  padding: 10px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Left stack */
.left-card {
  transform: translateX(calc(-150px - var(--i) * 100px)) rotateY(20deg) scale(calc(1 - var(--i) * 0.05));
  z-index: calc(3 - var(--i));
  padding: 10px;
}

/* Right stack */
.right-card {
  transform: translateX(calc(150px + var(--i) * 100px)) rotateY(-20deg) scale(calc(1 - var(--i) * 0.05));
  z-index: calc(3 - var(--i));
  padding: 10px;
}

/* Center collage */
.center-card {
  z-index: 5;
  transform: translateX(0) scale(1.05);
  height: 400px;
}

.collage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
  height: calc(100% - 40px);
}

.collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.load-more {
  display: block;
  margin: 8px auto 0 auto;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  background-color: #ff7e05;
  color: white;
  border-radius: 6px;
  cursor: pointer;
}

.center-card:hover {
  transform: scale(1.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

/* Hover effect */
.gallery-card:hover {
  transform:
    translateX(var(--hover-translate-x, 0)) translateY(-15px) scale(1.1) rotateY(var(--hover-rotate-y, 0deg));
  box-shadow: 0 20px 40px rgba(255, 126, 5, 0.7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 10 !important;
}

.left-card {
  --hover-translate-x: calc(-150px - var(--i) * 100px);
  --hover-rotate-y: 20deg;
}

.right-card {
  --hover-translate-x: calc(150px + var(--i) * 100px);
  --hover-rotate-y: -20deg;
}

.center-card {
  --hover-translate-x: 0;
  --hover-rotate-y: 0deg;
}

/* ===== Responsive Fixes ===== */

/* Medium screens (tablets ≤991px) */
/* Medium screens (tablets: 768px – 991px) */
@media (max-width: 991.98px) and (min-width: 576px) {
  .gallery-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    gap: 20px;
  }

  .gallery-card {
    position: relative;
    width: 45%;        /* two cards per row */
    height: auto;      /* flexible */
    max-height: none;
    transform: none !important;
    margin-bottom: 20px;
    padding: 0;
  }

  .gallery-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
  }

  .center-card {
    width: 100%;       /* center collage spans full row */
    height: auto;
  }

  .collage {
    grid-template-columns: repeat(3, 1fr); /* 3 per row */
    gap: 6px;
  }

  .collage img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
  }

  .load-more {
    font-size: 14px;
    padding: 6px 14px;
  }
}


/* Small screens (phones ≤575px, iPhone XR) */
/* Small screens (phones ≤575px, iPhone XR) */
@media (max-width: 575.98px) {
  .gallery-wrapper {
    flex-direction: column;
    align-items: center;
    height: auto;
    gap: 20px;
  }

  .gallery-card {
    position: relative;
    width: 90%;
    height: auto;
    max-height: none;
    transform: none !important;
    padding: 0;
  }

  .gallery-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
  }

  .collage {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .collage img {
    height: auto;
    object-fit: cover;
    border-radius: 4px;
  }

  .load-more {
    font-size: 13px;
    padding: 6px 12px;
    margin-bottom: 5px;
  }

  /* ✅ Fix for welcome overlay */
  #portfolio {
    height: auto;    /* remove fixed 200px */
    padding: 0;                 /* no extra top/bottom padding */
  }

  #portfolio-welcome {
    font-size: 20px !important;  /* smaller text */
    padding: 8px 14px !important;
    line-height: 1.3;
    max-width: 90%;
  }
}



.load-more {
  display: inline-block;
  padding:8px 20px;
  background-color: #ff7e05;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background 0.3s ease;
  
  
}

.load-more:hover {
  background-color: #e86e00;
}