/* ---------- PREMIUM GALLERY ENHANCEMENTS & BENTO BOX ---------- */

/* --- Magnetic Filter Bar --- */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 48px;
}

.gallery-filter-btn {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 20px;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.gallery-filter-btn:hover {
  background: #ffffff;
  color: #111827;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.gallery-filter-btn.active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.2);
}

.theme-dark .gallery-filter-btn {
  background: rgba(20, 20, 35, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
  color: #9ca3af;
}
.theme-dark .gallery-filter-btn:hover {
  background: rgba(40, 40, 60, 0.8);
  color: #f3f4f6;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.theme-dark .gallery-filter-btn.active {
  background: #f9fafb;
  color: #111827;
  border-color: #f9fafb;
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.1);
}

/* --- Bento Box Layout --- */
.gallery {
  display: grid;
  align-items: stretch;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 320px; /* Base height */
  gap: 24px; /* Clean spacing */
}

.gallery-cell {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 16px;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transform: perspective(1000px) rotateX(0) rotateY(0) scale3d(1,1,1);
  display: flex;
  flex-direction: column;
}
.theme-dark .gallery-cell {
  border-color: rgba(255,255,255,0.06);
}

/* The Image Background */
.gallery-cell img.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  background-color: #f3f4f6;
}
.theme-dark .gallery-cell img.bg-img {
  background-color: #1f2937;
}

.gallery-cell:hover img.bg-img {
  transform: scale(1.04);
}

/* Elegant Overlay for Text Contrast */
.cell-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.1) 100%);
  z-index: 2;
  opacity: 0.8;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.gallery-cell:hover .cell-overlay {
  opacity: 0.95;
}

/* Content Layout inside Card */
.cell-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 24px;
  pointer-events: none;
}

.cell-top {
  display: flex;
  justify-content: flex-start;
}

.cell-top .tag {
  background: rgba(255, 255, 255, 0.95);
  color: #111827;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transform: translateY(-5px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gallery-cell:hover .cell-top .tag {
  transform: translateY(0);
  opacity: 1;
}

.cell-bottom {
  display: flex;
  flex-direction: column;
  transform: translateY(10px);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gallery-cell:hover .cell-bottom {
  transform: translateY(0);
}

.cell-bottom .ttl {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cell-bottom .ttl span {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.cell-bottom .ttl small {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
  line-height: 1.4;
}

/* Grid Spanning Rules */
.bento-hero { grid-column: span 8; grid-row: span 2; }
.bento-tall { grid-column: span 4; grid-row: span 2; }
.bento-wide { grid-column: span 6; grid-row: span 1; }
.bento-square { grid-column: span 4; grid-row: span 1; }

/* Adjust typography for hero size */
.bento-hero .cell-bottom .ttl span { font-size: 28px; }
.bento-hero .cell-bottom .ttl small { font-size: 16px; }

@media (max-width: 1024px) {
  .bento-hero { grid-column: span 12; grid-row: span 2; }
  .bento-tall { grid-column: span 6; grid-row: span 2; }
  .bento-wide { grid-column: span 6; grid-row: span 1; }
  .bento-square { grid-column: span 6; grid-row: span 1; }
}

@media (max-width: 768px) {
  .gallery { 
    grid-auto-rows: minmax(280px, auto); 
    gap: 16px;
  }
  .bento-hero, .bento-tall, .bento-wide, .bento-square {
    grid-column: span 12;
    grid-row: span 1;
  }
  .bento-hero { grid-row: span 1; }
}

/* --- Filtering Transitions --- */
.gallery-cell.hide-cell {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  pointer-events: none;
  position: absolute !important; 
  visibility: hidden;
}

/* --- Entrance Animation (Scroll Reveal) --- */
.gallery-cell.reveal-pending {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
}
.gallery-cell.reveal-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- Spotlight Dimming Effect --- */
.gallery:hover .gallery-cell:not(:hover):not(.hide-cell) {
  opacity: 0.6;
}

.gallery .gallery-cell:hover {
  z-index: 10;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}
.theme-dark .gallery .gallery-cell:hover {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

/* Focused three-image carousel used by the Output Gallery. */
.gallery-sections-nav { margin-bottom: 34px; }
.gallery-showcase { display:grid; grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr); gap:clamp(34px,6vw,90px); align-items:center; min-height:560px; padding:clamp(28px,4vw,56px); border:1px solid rgba(26,23,53,.10); border-radius:28px; background:radial-gradient(circle at 81% 13%,rgba(115,71,255,.13),transparent 30%),linear-gradient(135deg,#fff 0%,#fbfaff 100%); box-shadow:0 20px 55px rgba(26,23,53,.08); overflow:hidden; }
.gallery-copy { max-width:470px; }
.gallery-kicker { display:inline-flex; padding:7px 11px; border-radius:999px; background:rgba(83,57,231,.10); color:#4f35df; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.gallery-copy h3 { margin:16px 0 14px; color:#151225; font-size:clamp(30px,3vw,48px); line-height:1.04; letter-spacing:-.045em; }
.gallery-copy p { margin:0; color:#686475; font-size:16px; line-height:1.75; }
.showcase-stage { position:relative; min-height:455px; display:grid; align-items:center; }
.showcase-stack { position:relative; height:390px; max-width:630px; width:100%; margin:auto; }
.showcase-card { position:absolute; inset:0; margin:auto; width:73%; height:350px; overflow:hidden; border-radius:20px; border:1px solid rgba(25,19,51,.12); background:#e9e7ef; box-shadow:0 20px 44px rgba(22,16,55,.17); transition:transform .62s cubic-bezier(.2,.9,.2,1),opacity .62s ease,filter .62s ease; }
.showcase-card img { width:100%; height:100%; object-fit:cover; display:block; }
.showcase-card:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(14,10,30,.67)); }
.showcase-card-caption { position:absolute; z-index:2; bottom:18px; inset-inline:20px; color:#fff; font-size:14px; font-weight:700; letter-spacing:.01em; }
.showcase-card.is-active { z-index:3; opacity:1; transform:translateX(0) scale(1); }
.showcase-card.is-left { z-index:1; opacity:.68; filter:saturate(.76) brightness(.91); transform:translateX(-27%) scale(.84) rotate(-5deg); }
.showcase-card.is-right { z-index:2; opacity:.68; filter:saturate(.76) brightness(.91); transform:translateX(27%) scale(.84) rotate(5deg); }
.showcase-controls { position:absolute; z-index:4; bottom:0; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:18px; padding:8px 10px; border:1px solid rgba(31,25,59,.10); border-radius:999px; background:rgba(255,255,255,.86); box-shadow:0 12px 28px rgba(27,20,61,.12); backdrop-filter:blur(12px); }
.showcase-arrow { width:43px; height:43px; border:0; border-radius:50%; background:#1d1832; color:#fff; cursor:pointer; font-size:21px; line-height:1; transition:transform .2s ease,background .2s ease; }
.showcase-arrow:hover { background:#6042ef; transform:scale(1.08); }
.showcase-count { min-width:48px; color:#514b65; font-size:13px; font-weight:800; text-align:center; }
.showcase-count i { display:inline-block; width:17px; height:1px; margin:0 4px 4px; background:#bdb7ce; }
@media (max-width:800px) { .gallery-showcase { grid-template-columns:1fr; min-height:0; gap:28px; padding:28px 18px 34px; } .showcase-stage { min-height:370px; } .showcase-stack { height:315px; } .showcase-card { height:290px; width:78%; } .showcase-card.is-left { transform:translateX(-23%) scale(.83) rotate(-5deg); } .showcase-card.is-right { transform:translateX(23%) scale(.83) rotate(5deg); } }
@media (max-width:440px) { .gallery-filters { justify-content:center; flex-wrap:nowrap; overflow:visible; gap:6px; padding:2px 2px 10px; } .gallery-filter-btn { flex:1 1 0; min-width:0; font-size:11px; padding:8px 6px; text-align:center; white-space:normal; line-height:1.15; border-radius:14px; } .showcase-card { width:84%; } .showcase-card.is-left { transform:translateX(-18%) scale(.80) rotate(-4deg); } .showcase-card.is-right { transform:translateX(18%) scale(.80) rotate(4deg); } }