/* ── Gallery: real image styles ─────────────────────────────────────────── */

/* Allow absolutely-positioned img inside placeholder to fill it */
.img-placeholder { position: relative; overflow: hidden; }

.img-block img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94);
}
.img-block:hover img { transform: scale(1.04); }

.jewel-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.7s ease;
}
.jewel-card:hover .jewel-img img { transform: scale(1.05); }

.acc-tile img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.7s ease;
}
.acc-tile:hover img { transform: scale(1.05); }

.social-post img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.social-post:hover img { transform: scale(1.06); }

/* ── Captions ───────────────────────────────────────────────────────────── */
.fig-name {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 300;
  color: var(--green);
  margin-top: 12px;
  letter-spacing: 0.06em;
}

/* Jewellery captions are on dark background */
#jewellery .fig-name {
  color: var(--canvas);
}

/* ── "View All" button area ─────────────────────────────────────────────── */
.gallery-actions {
  display: flex;
  justify-content: flex-start;
}

/* On jewellery (dark bg) override btn-outline colors */
#jewellery .btn-outline {
  color: var(--canvas);
  border-color: rgba(242,239,233,0.45);
}
#jewellery .btn-outline:hover {
  background: var(--canvas);
  color: var(--green);
}

/* ── Expanded gallery panel ─────────────────────────────────────────────── */
.gallery-expanded {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 0.5px solid var(--divider);
}

.gallery-expanded.open { display: grid; }

#jewellery .gallery-expanded {
  border-top-color: rgba(143,169,152,0.3);
}

.gallery-expanded .gallery-item {
  display: flex;
  flex-direction: column;
}

.gallery-expanded .gallery-item img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.gallery-expanded .gallery-item .fig-name {
  font-size: 0.85rem;
  margin-top: 10px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .gallery-expanded { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .gallery-expanded { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gallery-actions { margin-top: 24px !important; }
}