/* Phase 1 elevation — Image gallery component
 *
 * Editorial asymmetric gallery for property detail photo essays, magazine
 * photo essays, and curated journey imagery. Implements Site UI Elevation
 * §3 "Image Galleries" + Component Library §12.
 *
 * Pairs naturally with the lightbox: wrap items in
 *   <a data-lightbox data-lightbox-group="hotel-castello" href="full.jpg">
 *     <img src="thumb.jpg" alt="..." data-caption="..." data-photographer="...">
 *   </a>
 * and the existing lightbox.js controller handles the cinema view.
 */

/* ────────────────────────────────────────────────────────────────────────
 * Gallery hero — single dramatic full-bleed image. Used at the top of
 * property detail pages and magazine photo essays.
 * ──────────────────────────────────────────────────────────────────────── */

.bt-gallery-hero {
  position: relative;
  width: 100%;
  height: clamp(420px, 70vh, 760px);
  overflow: hidden;
  background: var(--ink);
}

.bt-gallery-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Subtle Ken Burns on entry — opt in by adding .ken-burns from motion.css */
}

.bt-gallery-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Soft bottom-only navy scrim so eyebrow/title/subtitle remain readable
     over varied photography without visually muddying the upper image. */
  background: linear-gradient(
    to bottom,
    rgba(15, 26, 48, 0) 55%,
    rgba(15, 26, 48, 0.55) 100%
  );
}

.bt-gallery-hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(var(--space-2xl), 8vh, var(--space-4xl));
  padding: 0 clamp(var(--space-lg), 6vw, var(--space-3xl));
  color: var(--cream);
  z-index: 1;
}

.bt-gallery-hero__eyebrow {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 var(--space-md);
}

.bt-gallery-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: clamp(var(--size-3xl), 7vw, var(--size-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--cream);
  margin: 0 0 var(--space-sm);
  max-width: 18ch;
  text-shadow: 0 1px 32px rgba(0, 0, 0, 0.45);
}

.bt-gallery-hero__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(var(--size-md), 2vw, var(--size-lg));
  line-height: var(--leading-snug);
  color: rgba(250, 248, 245, 0.85);
  margin: 0;
  max-width: 36ch;
}

.bt-gallery-hero__scroll-indicator {
  position: absolute;
  right: clamp(var(--space-lg), 6vw, var(--space-3xl));
  bottom: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: rgba(250, 248, 245, 0.6);
  font-family: var(--font-ui-sans);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  pointer-events: none;
}

.bt-gallery-hero__scroll-indicator::after {
  content: '';
  width: 1px;
  height: 32px;
  background: rgba(250, 248, 245, 0.4);
  animation: bt-gallery-scroll-pulse 2.6s ease-in-out infinite;
}

@keyframes bt-gallery-scroll-pulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%       { transform: scaleY(1); opacity: 1; }
}

/* ────────────────────────────────────────────────────────────────────────
 * Editorial gallery — asymmetric masonry-style grid. Mixed cell sizes
 * tell a story; curator-defined order via DOM order.
 * ──────────────────────────────────────────────────────────────────────── */

.bt-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 240px;
  gap: var(--space-md);
  padding: 0;
  list-style: none;
  margin: 0;
}

.bt-gallery--generous {
  gap: var(--space-lg);
  grid-auto-rows: 280px;
}

.bt-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--stone-light);
  cursor: zoom-in;
  display: block;
  text-decoration: none;
  color: inherit;
}

.bt-gallery__item--wide    { grid-column: span 2; }
.bt-gallery__item--tall    { grid-row: span 2; }
.bt-gallery__item--feature { grid-column: span 2; grid-row: span 2; }

.bt-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out),
              filter var(--duration-slower) var(--ease-out);
}

@media (hover: hover) {
  .bt-gallery__item:hover .bt-gallery__image {
    transform: scale(1.04);
    filter: brightness(1.04);
  }
}

/* Optional hover caption — surfaces on hover only, restrained */
.bt-gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: linear-gradient(
    to top,
    rgba(15, 26, 48, 0.75) 0%,
    rgba(15, 26, 48, 0) 100%
  );
  color: var(--cream);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) {
  .bt-gallery__item:hover .bt-gallery__caption,
  .bt-gallery__item:focus-visible .bt-gallery__caption {
    opacity: 1;
    transform: translateY(0);
  }
}

/* "View sequence" indicator on the first image of a multi-image story.
 * Sits in the top-right corner with a small icon + count. */
.bt-gallery__sequence-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: var(--space-xxs) var(--space-sm);
  background: rgba(15, 26, 48, 0.7);
  color: var(--cream);
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ────────────────────────────────────────────────────────────────────────
 * Photo-essay rhythm — alternating wide image / contained text blocks.
 * Used inside articles and on property "The Place" / "The Property"
 * sections. The container imposes max-width on text but lets imagery
 * full-bleed via .bt-essay__bleed.
 * ──────────────────────────────────────────────────────────────────────── */

.bt-essay {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  padding: var(--space-3xl) 0;
}

.bt-essay__text {
  max-width: var(--max-content-narrow);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  font-family: var(--font-ui-sans);
  font-size: var(--size-md);
  line-height: var(--leading-loose);
  color: var(--text-on-cream-primary);
}

.bt-essay__text > * + * {
  margin-top: var(--space-lg);
}

.bt-essay__figure {
  margin: 0;
}

.bt-essay__figure--bleed {
  /* Full-viewport-width image even inside a centered container */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.bt-essay__figure--contained {
  max-width: var(--max-content);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--space-lg);
}

.bt-essay__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  background: var(--stone-light);
}

.bt-essay__caption {
  margin-top: var(--space-md);
  padding: 0 var(--space-lg);
  max-width: var(--max-content-narrow);
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--size-sm);
  line-height: var(--leading-snug);
  color: var(--text-on-cream-secondary);
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────────────
 * Progressive image loading — blur-up technique
 * Wrap an image in <span class="bt-img-wrap"> with the LQIP as background
 * for the wrap, and the high-res <img> on top. Add .is-loaded via JS
 * once the high-res image loads.
 * ──────────────────────────────────────────────────────────────────────── */

.bt-img-wrap {
  position: relative;
  display: block;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.bt-img-wrap > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-slower) var(--ease-out);
}

.bt-img-wrap.is-loaded > img {
  opacity: 1;
}

/* ────────────────────────────────────────────────────────────────────────
 * Responsive — collapse spans on smaller viewports so layout doesn't
 * crush. At ≤ 768px: feature cells become full-width 1-col, wide/tall
 * lose their span and behave as single cells.
 * ──────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .bt-gallery__item--feature {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (max-width: 768px) {
  .bt-gallery,
  .bt-gallery--generous {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 200px;
    gap: var(--space-sm);
  }

  .bt-gallery__item--wide,
  .bt-gallery__item--feature {
    grid-column: span 2;
  }

  .bt-gallery__item--tall {
    grid-row: span 1;
  }

  .bt-gallery-hero {
    height: clamp(360px, 60vh, 540px);
  }

  .bt-essay__text,
  .bt-essay__caption {
    padding: 0 var(--space-md);
  }
}

@media (max-width: 480px) {
  .bt-gallery,
  .bt-gallery--generous {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .bt-gallery__item--wide,
  .bt-gallery__item--feature,
  .bt-gallery__item--tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}