/* ==========================================================================
   Preview C — Bold / Artistic (updated: masonry from preview-b + image hero)
   Minimal override — do not merge to develop
   ==========================================================================
   Key visual indicators:
   - Full-viewport hero with first artwork as background image
   - Title + bouncing scroll arrow over dark gradient overlay
   - Nav always frosted/solid (backdrop-filter blur)
   - Uniform masonry grid: 2px gaps, square corners, edge-to-edge
   - Gradient hover overlay (no mosaic/featured items)
   ========================================================================== */

/* Nav: always frosted backdrop */
.site-header {
  background: rgba(10, 25, 41, 0.6);
  backdrop-filter: blur(8px);
}

/* Hide original gallery intro — hero replaces it */
.gallery-intro {
  display: none;
}

/* -----------------------------------------------------------------------
   Edge-to-edge gallery layout
   ----------------------------------------------------------------------- */
.main-content .container {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

/* 2px gap, square corners */
.gallery-grid {
  gap: 2px;
  margin-bottom: 0;
}

.gallery-item {
  border-radius: 0;
}

/* Gradient hover overlay */
.gallery-item__overlay {
  background: linear-gradient(transparent 60%, rgba(10, 25, 41, 0.9));
}

/* -----------------------------------------------------------------------
   Hero Section — full-viewport with artwork background image
   ----------------------------------------------------------------------- */
.gallery-hero {
  height: 100svh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 4rem;
  margin-bottom: 0;
}

/* Dark overlay so title stays legible over any image */
.gallery-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 25, 41, 0.3) 0%,
    rgba(10, 25, 41, 0.7) 100%
  );
  z-index: 1;
}

/* picture wrapper fills the hero completely */
.gallery-hero__bg-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Background image (set via JS) */
.gallery-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.gallery-hero__content {
  position: relative;
  z-index: 2;
}

.gallery-hero__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--spacing-md, 1.5rem);
  color: var(--color-text, #e8eaf6);
}

.gallery-hero__scroll {
  display: inline-block;
  color: var(--color-accent, #3399ff);
  font-size: 1.5rem;
  text-decoration: none;
  animation: heroScrollBounce 2s ease-in-out infinite;
}

.gallery-hero__scroll:hover,
.gallery-hero__scroll:focus {
  color: var(--color-accent, #3399ff);
  opacity: 0.8;
}

@keyframes heroScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-hero__scroll {
    animation: none;
  }
}