.gallery-page { background: #f7f3ed; }

.gallery-hero {
  position: relative;
  min-height: min(780px, 84vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #07151d;
  color: #fff;
}

.gallery-hero-image {
  position: absolute;
  inset: 0;
  background: url("../img/gallery/little-lagoon-sunset-reflections-gulf-shores-fine-art.jpeg") center 55% / cover no-repeat;
  transform: scale(1.01);
}

.gallery-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,17,24,.9) 0%, rgba(5,17,24,.55) 50%, rgba(5,17,24,.12) 100%), linear-gradient(0deg, rgba(5,17,24,.78), transparent 58%);
}

.gallery-hero-copy {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  margin-left: max(28px, calc((100vw - 1240px) / 2));
  padding: 110px 28px 88px 0;
}

.gallery-eyebrow {
  margin: 0 0 16px;
  color: #bb8742;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .19em;
  line-height: 1.4;
  text-transform: uppercase;
}

.gallery-hero .gallery-eyebrow { color: #e2bc7f; }
.gallery-hero h1 { max-width: 720px; font-size: clamp(3.2rem, 7vw, 6.3rem); }
.gallery-hero p:not(.gallery-eyebrow) { max-width: 680px; margin: 24px 0 0; color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.5vw, 1.18rem); }
.gallery-hero .btn { margin-top: 30px; }

.gallery-intro,
.gallery-seo {
  max-width: 1080px;
  margin: 0 auto;
  padding: 82px 28px;
}

.gallery-intro { text-align: center; }
.gallery-intro h2,
.gallery-heading h2,
.gallery-seo h2 { font-size: clamp(2.25rem, 4.4vw, 4rem); }
.gallery-intro > p:last-child { max-width: 860px; margin: 26px auto 0; color: #4f5659; font-size: 1.05rem; }

.gallery-section { padding: 78px max(18px, 3vw) 92px; }
.gallery-section-dark { background: #0b1c25; color: #fff; }
.gallery-heading { max-width: 800px; margin: 0 auto 44px; text-align: center; }
.gallery-heading > p:last-child { max-width: 700px; margin: 20px auto 0; color: #586167; }
.gallery-section-dark .gallery-heading > p:last-child { color: rgba(255,255,255,.72); }

.gallery-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(12px, 1.8vw, 28px);
}

.gallery-item {
  position: relative;
  min-height: 340px;
  margin: 0;
  overflow: hidden;
  background: #d7d0c5;
  box-shadow: 0 15px 38px rgba(8,22,30,.14);
}

.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.gallery-item:hover img { transform: scale(1.025); }
.gallery-item figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 52px 20px 18px;
  background: linear-gradient(transparent, rgba(4,13,18,.82));
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
}

.gallery-wide { grid-column: span 2; }
.gallery-tall { grid-row: span 2; min-height: 708px; }
.gallery-grid-wildlife .gallery-item { min-height: 400px; }
.gallery-people { background: #e8ded1; }
.gallery-portrait-feature { width: min(680px, 100%); min-height: 720px; margin: 0 auto; }

.gallery-seo {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(42px, 7vw, 94px);
  max-width: 1240px;
}
.gallery-seo p { color: #4f5659; }
.gallery-seo .text-link { margin-top: 14px; }
.gallery-final-cta { background: #07151d; }

@media (max-width: 900px) {
  .gallery-page .mobile-menu { display: block !important; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-tall { min-height: 660px; }
  .gallery-seo { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .gallery-hero { min-height: 690px; }
  .gallery-hero-copy { margin-left: 24px; padding-right: 24px; padding-bottom: 62px; }
  .gallery-grid { display: block; }
  .gallery-item,
  .gallery-tall,
  .gallery-grid-wildlife .gallery-item,
  .gallery-portrait-feature { min-height: 0; margin-bottom: 16px; }
  .gallery-item img { height: auto; aspect-ratio: auto; object-fit: contain; }
  .gallery-item figcaption { position: relative; padding: 13px 16px 15px; background: #0b1c25; }
  .gallery-section { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item img { transition: none; }
}