/* gallery.html ONLY — home-matching banner dimensions (index.css §4.1 + typography override)
   Glass card layout/position → banner-typography-override.css (data-page="gallery")
   Gallery title lockup only below — do not alter hero height or card box here */

/* --- Hero height: exact home port (index.css clamp — NOT --home-banner-height breadcrumb token) --- */
html[data-gallery-page] .banner__section,
html[data-gallery-page] .banner__section .banner__slider,
html[data-gallery-page] .banner__section .swiper-wrapper,
html[data-gallery-page] .banner__section .swiper-slide {
  min-height: clamp(560px, 78vh, 980px) !important;
}

html[data-gallery-page] .banner__section {
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html[data-gallery-page] .banner__section .swiper-slide {
  position: relative !important;
  overflow: hidden !important;
}

html[data-gallery-page] .banner__section .banner__image {
  background-image: url('../img/banner/gallery/gallery-banner.webp') !important;
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
  transform: translateZ(0) !important;
  will-change: opacity, transform !important;
  backface-visibility: hidden !important;
}

html[data-gallery-page] .banner__section .swiper-slide > .container:not(.banner__content-shell):not(.banner__content-shell--fixed) {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

html[data-gallery-page] .banner__section .swiper-wrapper {
  contain: layout paint size !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-gallery-page] .banner__section .banner__image {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Glass card box: home index lock (400×720) — typography handles layout; this locks size --- */
html[data-gallery-page] .banner__section .banner-glass-card {
  height: 400px;
  min-height: 400px;
  max-width: 720px;
}

@media (max-width: 640px) {
  html[data-gallery-page] .banner__section .banner-glass-card {
    min-height: 300px;
  }
}

/* --- Gallery page title lockup (page-owned GALLERY stroke — not home hero copy) --- */
html[data-gallery-page] .banner__section .gallery-banner-title {
  display: flex !important;
  align-items: center;
  margin: 0 !important;
  line-height: 0.92 !important;
  min-height: 2.5em;
}

html[data-gallery-page] .banner__section .gallery-banner-title__word {
  display: inline-block;
  max-width: 100%;
  color: #facc15;
  -webkit-text-fill-color: #facc15;
  -webkit-text-stroke: 2px #2e0c5e;
  paint-order: stroke fill;
  text-shadow:
    0 3px 0 #2e0c5e,
    0 18px 38px rgba(46, 12, 94, 0.38),
    0 0 28px rgba(250, 204, 21, 0.28);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3.4rem, 8vw, 7.25rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

@media (max-width: 575px) {
  html[data-gallery-page] .banner__section .gallery-banner-title__word {
    -webkit-text-stroke: 1.4px #2e0c5e;
    font-size: clamp(2.7rem, 18vw, 4.2rem);
  }
}
/* === v3 desktop-to-980 containment: all gallery slides fully visible === */
/* === v3 desktop scaling: cover fills banner above 1872px (smooth, no jump) === */
@media (min-width: 1873px) {
  html[data-gallery-page] .banner__section .banner__image {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}


/* === v3 responsive (≤980px): all gallery slides fully visible, content drops below === */
@media (max-width: 1760px) {
  html[data-gallery-page] .banner__section,
  html[data-gallery-page] .banner__section .banner__slider,
  html[data-gallery-page] .banner__section .swiper-wrapper,
  html[data-gallery-page] .banner__section .swiper-slide {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  html[data-gallery-page] .banner__section .swiper-slide {
    position: relative !important;
  }

  html[data-gallery-page] .banner__section .banner__image {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-top: calc(100% / 2.22) !important;
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    transition: none !important;
    inset: auto !important;
  }

  html[data-gallery-page] .banner__section .banner__content-shell--fixed {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    padding: 18px 16px 0 !important;
  }
}