/* Gallery page (page-gallery.php), approved design "Moments From the Journey" (October 2026).
   Same tokens as the homepage / Success Stories. Every rule is scoped with #mx-gallery because editorial.css and
   approved-pages.css style headings at high specificity. */
#mx-gallery {
  --ivory:#FCF9F3; --ivory-2:#F7F3EA; --cream:#F2E7D8;
  --navy:#062B55; --navy-deep:#06274D; --blue:#174A85; --ink:#0C315E; --muted:#687485;
  --gold:#C69A4B; --gold-2:#D2AC63; --gold-light:#D2AC67; --gold-text:#9A7034; --line:#E6E8EB;
  --serif:'DM Serif Display','Fraunces',Georgia,serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --script:'Nothing You Could Do','Segoe Script',cursive;
  background:var(--ivory); color:var(--ink); font-family:var(--sans); overflow-x:clip;
}
#mx-gallery *,#mx-gallery *:before,#mx-gallery *:after {box-sizing:border-box}
#mx-gallery .gx-wrap {width:min(100% - 64px,1224px); margin-inline:auto}
#mx-gallery ul {list-style:none; margin:0; padding:0}
#mx-gallery img {display:block; max-width:100%}
#mx-gallery :is(h1,h2,h3) {font-family:var(--serif); font-weight:400; letter-spacing:-.01em; color:var(--ink); margin:0; text-wrap:balance}
#mx-gallery h1 span,#mx-gallery h2 span {display:block; color:var(--gold-text)}
#mx-gallery p {margin:0; font-size:14px; line-height:1.6; color:var(--muted)}
#mx-gallery .gx-eyebrow {margin:0 0 12px; font:600 10.5px/1.4 var(--sans)!important; letter-spacing:.18em; text-transform:uppercase; color:var(--ink)!important}
#mx-gallery .gx-eyebrow-rule {display:flex; align-items:center; gap:12px}
#mx-gallery .gx-eyebrow-rule:before {content:""; width:22px; height:1px; background:var(--gold)}
#mx-gallery :is(a,button,[tabindex]):focus-visible {outline:2px solid var(--blue); outline-offset:3px}
#mx-gallery .gx-arrow {width:15px; height:15px; flex:none; transition:transform .2s}
#mx-gallery .gx-btn {display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 24px; border-radius:3px; border:1px solid transparent; font:600 13.5px/1 var(--sans); text-decoration:none!important; white-space:nowrap; transition:filter .2s,background-color .2s}
#mx-gallery .gx-btn:hover .gx-arrow {transform:translateX(3px)}
#mx-gallery .gx-btn-gold {background:linear-gradient(180deg,#E3C27F,#D5AE63); color:var(--navy)!important}
#mx-gallery .gx-btn-gold:hover {filter:brightness(1.05)}
#mx-gallery .gx-btn-ghost {border-color:rgba(255,255,255,.85); color:#fff!important; background:rgba(6,43,85,.2)}
#mx-gallery .gx-btn-ghost:hover {background:rgba(255,255,255,.12)}
#mx-gallery .screen-reader-text {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- hero ---------- */
#mx-gallery .gx-hero {position:relative; isolation:isolate; overflow:hidden; margin-top:var(--mb-h); background:linear-gradient(180deg,#FBF4EA,#F8F1E6)}
#mx-gallery .gx-hero-art {position:absolute; left:-40px; bottom:-10px; width:360px; color:#D7BE92; opacity:.4; z-index:-1; pointer-events:none}
#mx-gallery .gx-hero-inner {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:40px; align-items:center; min-height:440px; padding-block:30px}
#mx-gallery .gx-crumbs {display:flex; align-items:center; gap:10px; margin-bottom:34px; font:500 12px/1 var(--sans); color:var(--muted)}
#mx-gallery .gx-crumbs a {color:var(--ink); text-decoration:none}
#mx-gallery .gx-hero h1 {font-size:clamp(44px,4.6vw,64px); line-height:1.02; letter-spacing:-.02em; margin:4px 0 22px}
#mx-gallery .gx-lead {max-width:440px; font-size:15px!important; line-height:1.65!important; color:#4b5b70!important}
#mx-gallery .gx-collage {position:relative; height:380px}
#mx-gallery .gx-polaroid {position:absolute; margin:0; padding:8px 8px 8px; background:#fff; box-shadow:0 12px 30px rgba(6,39,77,.16)}
#mx-gallery .gx-polaroid img {width:100%; height:100%; object-fit:cover; object-position:center 22%}
#mx-gallery .gx-polaroid-1 {left:0; top:10px; width:250px; height:330px; transform:rotate(-3deg); z-index:2}
#mx-gallery .gx-polaroid-2 {left:230px; top:0; width:220px; height:170px; transform:rotate(2deg); z-index:1}
#mx-gallery .gx-polaroid-3 {left:250px; top:170px; width:250px; height:190px; transform:rotate(-1.5deg); z-index:3}
#mx-gallery .gx-script {position:absolute; margin:0; font:400 20px/1.15 var(--script)!important; color:var(--gold-text)!important; pointer-events:none}
#mx-gallery .gx-script span {display:block}
#mx-gallery .gx-script-1 {left:22px; top:30px; z-index:4; transform:rotate(-10deg); color:#fff!important; text-shadow:0 1px 6px rgba(0,0,0,.45)}
#mx-gallery .gx-script-2 {right:-6px; bottom:6px; z-index:4; transform:rotate(-12deg)}

/* ---------- filters + grid ---------- */
#mx-gallery .gx-browse {padding:26px 0 54px}
#mx-gallery .gx-filters {display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px}
#mx-gallery .gx-chip {display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 18px; border:1px solid var(--line); border-radius:999px; background:#fff; font:600 12.5px/1 var(--sans); color:var(--ink); cursor:pointer; transition:background .2s,border-color .2s}
#mx-gallery .gx-chip:hover {border-color:var(--gold)}
#mx-gallery .gx-chip.is-active {background:linear-gradient(180deg,#EBCF95,#DDBA77); border-color:transparent; color:var(--navy-deep)}
#mx-gallery .gx-chip-icon {width:16px; height:16px; flex:none; stroke-width:1.6}
/* masonry: photos keep their own proportions, columns fill top to bottom with no gaps */
#mx-gallery .gx-grid {columns:4; column-gap:12px}
#mx-gallery .gx-item {min-width:0; margin:0 0 12px; break-inside:avoid}
#mx-gallery .gx-item[hidden] {display:none}
#mx-gallery .gx-tile {position:relative; display:block; width:100%; padding:0; border:0; border-radius:6px; overflow:hidden; background:#E9E1D3; cursor:zoom-in; text-align:left}
#mx-gallery .gx-tile img {width:100%; height:auto; max-height:520px; object-fit:cover; object-position:center 25%; transition:transform .5s ease}
#mx-gallery .gx-tile:hover img {transform:scale(1.04)}
#mx-gallery .gx-tile:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,20,40,0) 45%,rgba(6,20,40,.8) 100%)}
#mx-gallery .gx-tile-text {position:absolute; left:14px; right:52px; bottom:13px; z-index:1; display:flex; flex-direction:column; gap:4px}
#mx-gallery .gx-tile-cat {font:700 9.5px/1.2 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#EBCF95}
#mx-gallery .gx-tile-text strong {font:400 17px/1.2 var(--serif); color:#fff}
#mx-gallery .gx-tile-arrow {position:absolute; right:12px; bottom:12px; z-index:1; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#fff; color:var(--navy)}
#mx-gallery .gx-tile-arrow svg {width:14px; height:14px}

/* photo viewer */
#mx-gallery .gx-viewer {max-width:min(92vw,980px); max-height:92vh; padding:0; border:0; border-radius:8px; background:#0B1E3A; color:#fff; overflow:visible}
#mx-gallery .gx-viewer::backdrop {background:rgba(6,23,46,.82)}
#mx-gallery .gx-viewer figure {margin:0}
#mx-gallery .gx-viewer img {max-width:min(92vw,980px); max-height:76vh; margin:0 auto; object-fit:contain; border-radius:8px 8px 0 0}
#mx-gallery .gx-viewer figcaption {display:flex; flex-direction:column; gap:4px; padding:14px 18px 16px}
#mx-gallery .gx-viewer figcaption strong {font:400 20px/1.2 var(--serif)}
#mx-gallery .gx-viewer figcaption span {font-size:13px; color:#d9e1ec}
#mx-gallery .gx-viewer figcaption small {font-size:12px; color:#EBCF95}
#mx-gallery .gx-viewer-btn {position:absolute; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:#FFFEFA; color:var(--navy); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25)}
#mx-gallery .gx-viewer-btn svg {width:18px; height:18px}
#mx-gallery .gx-viewer-close {right:-16px; top:-16px}
#mx-gallery .gx-viewer-prev {left:-22px; top:38%}
#mx-gallery .gx-viewer-next {right:-22px; top:38%}

/* ---------- banner ---------- */
#mx-gallery .gx-banner {position:relative; isolation:isolate; overflow:hidden; min-height:200px; display:flex; align-items:center}
#mx-gallery .gx-banner-media {position:absolute; inset:0; z-index:-2}
#mx-gallery .gx-banner-media img {width:100%; height:100%; object-fit:cover; object-position:center 60%}
#mx-gallery .gx-banner:before {content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(252,246,236,.15) 0%,rgba(252,246,236,.88) 28%,rgba(252,246,236,.88) 70%,rgba(252,246,236,.1) 100%)}
#mx-gallery .gx-banner-inner {padding:44px 0 44px 28%}
#mx-gallery .gx-banner h2 {font-size:clamp(30px,2.8vw,40px); line-height:1.08; margin-bottom:12px}
#mx-gallery .gx-banner h2 span {color:var(--ink)}
#mx-gallery .gx-banner p {max-width:470px; color:#4b5b70}

/* ---------- video stories (cards from home-video-stories.css) ---------- */
#mx-gallery .gx-videos {padding:56px 0}
#mx-gallery .gx-videos-inner {display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:44px; align-items:center}
#mx-gallery .gx-videos h2 {font-size:40px; line-height:1.05; margin-bottom:14px}
#mx-gallery .gx-videos h2 span {color:var(--ink)}
#mx-gallery .gx-videos-intro p:not(.gx-eyebrow) {margin-bottom:22px}
#mx-gallery .gx-videos .gx-btn {padding:0 20px; font-size:12.5px}

/* ---------- featured slider ---------- */
#mx-gallery .gx-featured {padding:10px 0 60px}
#mx-gallery .gx-featured-inner {display:grid; grid-template-columns:minmax(0,600px) minmax(0,1fr); gap:56px; align-items:center}
#mx-gallery .gx-slider {position:relative; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background:#1B2433; box-shadow:0 12px 30px rgba(6,39,77,.14)}
#mx-gallery .gx-slide {position:absolute; inset:0; margin:0; opacity:0; transition:opacity .45s ease}
#mx-gallery .gx-slide.is-active {opacity:1}
#mx-gallery .gx-slide[hidden] {display:none}
#mx-gallery .gx-slide-bg {position:absolute; inset:-20px; width:calc(100% + 40px); height:calc(100% + 40px); max-width:none; object-fit:cover; filter:blur(18px) brightness(.7)}
#mx-gallery .gx-slide-img {position:relative; width:100%; height:100%; object-fit:contain}
#mx-gallery .gx-slide-btn {position:absolute; top:50%; z-index:2; display:grid; place-items:center; width:44px; height:44px; margin-top:-22px; border:0; border-radius:50%; background:#FFFEFA; color:var(--navy); cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.2)}
#mx-gallery .gx-slide-btn svg {width:18px; height:18px}
#mx-gallery .gx-slide-prev {left:16px}
#mx-gallery .gx-slide-next {right:16px}
#mx-gallery .gx-slide-count {position:absolute; left:16px; bottom:14px; z-index:2; padding:5px 10px; border-radius:999px; background:rgba(6,39,77,.7); font:600 12px/1 var(--sans)!important; color:#fff!important}
#mx-gallery .gx-featured-copy {padding-left:28px; border-left:1px solid rgba(196,154,86,.35)}
#mx-gallery .gx-featured h2 {font-size:clamp(30px,2.8vw,40px); line-height:1.1; margin-bottom:14px}
#mx-gallery .gx-featured-copy > p:not(.gx-eyebrow) {font-size:15px; color:#4b5b70}
#mx-gallery .gx-featured-meta {display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
#mx-gallery .gx-featured-meta li {display:flex; align-items:center; gap:8px; font:500 13px/1.3 var(--sans); color:var(--ink)}
#mx-gallery .gx-featured-meta li[hidden] {display:none}
#mx-gallery .gx-meta-icon {width:17px; height:17px; color:var(--gold-text)}

/* ---------- CTA ---------- */
#mx-gallery .gx-cta {position:relative; isolation:isolate; overflow:hidden; min-height:240px; display:flex; align-items:center; background:var(--navy)}
#mx-gallery .gx-cta-media {position:absolute; inset:0; z-index:-2}
#mx-gallery .gx-cta-media img {width:100%; height:100%; object-fit:cover; object-position:center 55%}
#mx-gallery .gx-cta:before {content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(6,35,70,.92) 0%,rgba(6,35,70,.78) 50%,rgba(6,35,70,.5) 100%)}
#mx-gallery .gx-cta-inner {display:flex; align-items:center; justify-content:space-between; gap:32px; padding-block:44px}
#mx-gallery .gx-cta .gx-eyebrow {color:#E3C27F!important}
#mx-gallery .gx-cta h2 {font-size:clamp(30px,3vw,42px); line-height:1.1; color:#fff; margin-bottom:10px}
#mx-gallery .gx-cta p:not(.gx-eyebrow) {max-width:460px; color:#e0e7f1}
#mx-gallery .gx-actions {display:flex; flex-wrap:wrap; gap:14px}

/* ---------- ≤1100 ---------- */
@media (max-width:1100px) {
  #mx-gallery .gx-hero-inner {grid-template-columns:minmax(0,1fr) 440px; gap:24px}
  #mx-gallery .gx-collage {transform:scale(.82); transform-origin:right center}
  #mx-gallery .gx-grid {columns:3}
  #mx-gallery .gx-videos-inner {grid-template-columns:1fr; gap:24px}
  #mx-gallery .gx-featured-inner {grid-template-columns:1fr; gap:28px; max-width:720px}
  #mx-gallery .gx-featured-copy {padding-left:0; border-left:0}
  #mx-gallery .gx-cta-inner {flex-direction:column; align-items:flex-start}
  #mx-gallery .gx-banner-inner {padding-left:18%}
}
/* ---------- ≤760 ---------- */
@media (max-width:760px) {
  #mx-gallery .gx-wrap {width:calc(100% - 40px)}
  #mx-gallery .gx-hero-inner {grid-template-columns:1fr; min-height:0; padding-block:26px 34px}
  #mx-gallery .gx-crumbs {margin-bottom:22px}
  #mx-gallery .gx-collage {height:300px; transform:none; max-width:400px; width:100%; margin-inline:auto}
  #mx-gallery .gx-polaroid-1 {width:190px; height:250px}
  #mx-gallery .gx-polaroid-2 {left:auto; right:0; width:170px; height:130px}
  #mx-gallery .gx-polaroid-3 {left:auto; right:6px; top:135px; width:190px; height:150px}
  #mx-gallery .gx-script-2 {display:none}
  #mx-gallery .gx-filters {flex-wrap:nowrap; overflow-x:auto; margin-right:-20px; padding:2px 20px 6px 0; scrollbar-width:none}
  #mx-gallery .gx-filters::-webkit-scrollbar {display:none}
  #mx-gallery .gx-chip {flex:none; min-height:44px; font-size:13.5px}
  #mx-gallery .gx-grid {columns:2; column-gap:10px}
  #mx-gallery .gx-item {margin-bottom:10px}
  #mx-gallery .gx-tile img {max-height:340px}
  #mx-gallery .gx-tile-text strong {font-size:15.5px}
  #mx-gallery .gx-tile-arrow {display:none}
  #mx-gallery .gx-tile-text {right:12px}
  #mx-gallery .gx-banner-inner {padding:40px 0}
  #mx-gallery .gx-banner:before {background:rgba(252,246,236,.86)}
  #mx-gallery .gx-videos h2 {font-size:34px}
  #mx-gallery .gx-viewer-prev {left:6px}
  #mx-gallery .gx-viewer-next {right:6px}
  #mx-gallery .gx-viewer-close {right:6px; top:-54px}
  #mx-gallery .gx-actions {flex-direction:column; align-items:stretch; width:100%}
  #mx-gallery .gx-btn {min-height:50px; font-size:15px}
  #mx-gallery p {font-size:15px}
}
@media (prefers-reduced-motion:reduce) {
  #mx-gallery *,#mx-gallery *:before,#mx-gallery *:after {transition:none!important}
}