/* ============================================================
   Gallery — pinned single + double horizontal scroll
   Driven by src/gallery/gallery.js (GSAP ScrollTrigger).

   Uses BR brand tokens from br-market-group.br.css:
     --tiers--platinum  (light backdrop)
     --bg-primary       (dark backdrop)
     Satoshi font family inherits globally — no override here.
   ============================================================ */

/* ── Section header (existing About Us) ─────────────────────── */
.section-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
  color: #e5e4e2;
  padding: 4rem 2rem;
  text-align: center;
}

.section-header h1 {
  color: #e5e4e2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(2rem, 5vw, 7rem);
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
}

/* ── Shared ─────────────────────────────────────────────────── */
.container { position: relative; }

.container h1 {
  font-size: clamp(2rem, 5vw, 7rem);
  margin: 0;
}

/* ── First / last spacer containers ─────────────────────────── */
.firstContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
  padding: 2rem;
}

.firstContainer h1 {
  font-size: clamp(2rem, 5vw, 7rem);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.lastContainer {
  display: flex;
  height: 100vh;
  background: var(--bg-primary, #121212);
}

/* ── Tier-color backdrops (1 + 2 = platinum, 3 + 4 = dark) ─── */
.bg--platinum {
  background: var(--tiers--platinum, #e5e4e2);
  color: #121212;
}
.bg--platinum h1 { color: #121212; }

.bg--dark {
  background: var(--bg-primary, #121212);
  color: #e5e4e2;
}
.bg--dark h1 { color: #e5e4e2; }

/* ── Single container (one long row, horizontal scroll) ─────── */
.container.single {
  position: relative;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.container.single .inner-container {
  z-index: 2;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
}

.container.single .jump-btn {
  z-index: 5;
  white-space: nowrap;
  min-width: 5rem !important;
  height: 5rem;
  padding: 0 1.5rem;
  border-radius: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 3rem;
  bottom: 3rem;
  color: #282623;
  background-color: #fff4e4;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.container.single .jump-btn:focus-visible {
  outline: 2px solid #121212;
  outline-offset: 3px;
}

.container.single .container-text {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 3rem;
  z-index: 2;
  mix-blend-mode: color-burn;
  max-width: 100vw;
  pointer-events: none;
}

.container.single .container-text h1 {
  max-width: 900px;
}

.container.single .panel {
  position: relative;
  z-index: 3;
  width: 700px;
  max-width: 200vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

.container.single .panel.behind { z-index: 1; }

.container.single .panel figure {
  width: 100%;
  margin: 0;
}

.container.single .panel img,
.container.single .panel video {
  height: 60vh;
  max-height: 95vh;
  width: 100%;
  object-fit: cover;
  display: block;
}

.container.single .panel.width--thin       { width: 300px; }
.container.single .panel.width--small      { width: 500px; }
.container.single .panel.width--normal     { width: 700px; }
.container.single .panel.width--wide       { width: 900px; }
.container.single .panel.width--extra-wide { width: 1100px; }

.container.single .panel.height--extra-short img,
.container.single .panel.height--extra-short video { height: 20vh; }
.container.single .panel.height--short img,
.container.single .panel.height--short video       { height: 40vh; }
.container.single .panel.height--normal img,
.container.single .panel.height--normal video      { height: 60vh; }
.container.single .panel.height--tall img,
.container.single .panel.height--tall video        { height: 75vh; }
.container.single .panel.height--extra-tall img,
.container.single .panel.height--extra-tall video  { height: 90vh; }

/* ── Double container (two rows, opposite directions) ───────── */
.container.double {
  position: relative;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.container.double .inner-container {
  z-index: 2;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.container.double .row--top,
.container.double .row--bottom {
  height: 50vh;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  position: relative;
  align-items: center;
  z-index: 1;
}

.container.double .container-text {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 3rem;
  z-index: 6;
  mix-blend-mode: color-burn;
  max-width: 100vw;
  pointer-events: none;
}

.container.double .container-text h1 {
  max-width: 800px;
}

.container.double .panel {
  position: relative;
  z-index: 7;
  width: 700px;
  max-width: 200vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
  margin: 0;
}

.container.double .panel.behind { z-index: 1; }

.container.double .panel figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container.double .panel img,
.container.double .panel video {
  height: 100%;
  max-height: 55vh;
  width: 100%;
  object-fit: cover;
  display: block;
}

.container.double .panel.width--thin       { width: 150px; }
.container.double .panel.width--small      { width: 250px; }
.container.double .panel.width--normal     { width: 350px; }
.container.double .panel.width--wide       { width: 450px; }
.container.double .panel.width--extra-wide { width: 600px; }

.container.double .panel.height--extra-short { height: 45%; }
.container.double .panel.height--short       { height: 60%; }
.container.double .panel.height--normal      { height: 70%; }
.container.double .panel.height--tall        { height: 85%; }
.container.double .panel.height--extra-tall  { height: 100%; }

/* ── Skip anchor target ─────────────────────────────────────── */
#skip {
  position: relative;
  height: 0;
  scroll-margin-top: 4rem;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .container.single .panel.width--extra-wide { width: 800px; }
  .container.single .panel.width--wide       { width: 650px; }
  .container.double .panel.width--extra-wide { width: 450px; }
  .container.double .panel.width--wide       { width: 350px; }
}

@media (max-width: 768px) {
  /* Drop horizontal scroll on small screens; stack vertically. */
  .container.single,
  .container.double {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 2rem 0;
  }

  .container.single .inner-container,
  .container.double .inner-container {
    height: auto !important;
    flex-direction: column !important;
  }

  .container.single .panel,
  .container.double .panel {
    width: 100% !important;
    height: 40vh !important;
    flex-shrink: 1;
  }

  .container.single .panel img,
  .container.single .panel video,
  .container.double .panel img,
  .container.double .panel video {
    height: 40vh !important;
  }

  .container.double .row--top,
  .container.double .row--bottom {
    height: auto !important;
    width: 100% !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }

  .container.single .jump-btn {
    right: 1.5rem;
    bottom: 1.5rem;
    height: 4rem;
    min-width: 4rem !important;
  }

  .firstContainer,
  .lastContainer { height: 60vh; }

  .section-header {
    min-height: 40vh;
    padding: 2rem 1rem;
  }

  .section-header h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
}

@media (max-width: 480px) {
  .section-header h1 { font-size: clamp(1.25rem, 3vw, 2rem); }
  .firstContainer h1 { font-size: clamp(1.5rem, 6vw, 3rem); }
}

/* ── Accessibility & performance ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .section-header,
  .firstContainer,
  .container.single,
  .container.double,
  .lastContainer {
    transition: none !important;
    animation: none !important;
  }
}

.container.single .panel,
.container.double .panel {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.container.single .panel img,
.container.double .panel img {
  will-change: opacity;
}