/* Our Work Gallery page (template-gallery.php) — dark-theme reskin of
   the supplied mockup. */

/* ---- Hero: the standard full-bleed hero used on the other pages: text on the left over a NextGEN slideshow (gallery id 32, Our-Work)
   with the dark fade from the left. Scoped to .hero > .hero-art (direct child only), not the bare .hero-art class, since that class is
   reused by the gallery grid below. */
.page-template-template-gallery-php{ --maxw: 1440px; }
.page-template-template-gallery-php .hero{
	position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; min-height:505px; max-width:none; margin-left:0; margin-right:0;
	padding-top:0; padding-bottom:0;
	padding-left:max(var(--gutter), calc((100% - var(--maxw))/2));
	padding-right:max(var(--gutter), calc((100% - var(--maxw))/2));
}
.page-template-template-gallery-php .hero > div:first-child{ position:relative; z-index:1; max-width:610px; padding-top:50px; padding-bottom:28px; flex:1 1 auto; display:flex; flex-direction:column; }
/* The filter buttons sit at the bottom of the hero. */
.page-template-template-gallery-php .hero .gallery-tabs{ margin-top:auto; padding-top:24px; }
.page-template-template-gallery-php .hero > .hero-art{
	position:absolute; top:0; right:0; bottom:0; z-index:0; width:60%;
	aspect-ratio:auto; max-width:none; border-radius:0; border:0; background:none;
}
.page-template-template-gallery-php .hero:after{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg, #000 0%, #000 42%, rgba(13,26,31,.15) 65%, rgba(13,26,31,.45) 100%);
}
@media (max-width:900px){
	.page-template-template-gallery-php .hero > div:first-child{ max-width:90%; }
	.page-template-template-gallery-php .hero > .hero-art{ width:100%; }
	.page-template-template-gallery-php .hero:after{
		background:linear-gradient(180deg, rgba(13,26,31,.92), rgba(13,26,31,.6) 75%, rgba(13,26,31,.87));
	}
}

/* Hero closing line: plain bold text (no pull-quote box), body font, 16px. */
.gallery-hero-note{ margin:20px 0 0; font-family:'Open Sans',sans-serif; font-size:16px; font-weight:700; line-height:1.38; color:var(--ink); }

/* ---- Every other section: 1440 content width (already the sitewide
   --maxw default, .wrap handles it) with a flat 20px top/bottom
   buffer instead of the shared components' own larger clamp()s. */
.page-template-template-gallery-php .gallery-wall{
	padding-top:30px; padding-bottom:30px; padding-left:0; padding-right:0;
}

/* ---- Hospitality, Out in the Wild: intro copy + filter tabs + the
   primary captioned grid. */
.gallery-intro__title > .eyebrow{ font-size:13.6px; }
.gallery-intro__title > h2{ margin-bottom:0; font-size:41.6px; }
.gallery-intro__title > h2 b{ color:var(--accent); }
/* Top block split 50/50 — title left, copy right, grey vertical rule
   down the middle (stacks below 900px). */
.gallery-intro__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; align-items:center; }
.gallery-intro__title{ padding-right:40px; }
.gallery-intro__copy{ padding-left:40px; }
.gallery-intro__copy > p{ margin:0 0 16px; }
.gallery-intro__copy > p:first-child{ margin-top:1.38em; }
.gallery-intro__copy > p:last-child{ margin-bottom:0; }
@media (max-width:900px){
	.gallery-intro__head{ grid-template-columns:minmax(0,1fr); gap:20px; }
	.gallery-intro__title{ padding-right:0; }
	.gallery-intro__copy{ border-left:0; padding-left:0; }
}
.gallery-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; justify-content:flex-start; }
.gallery-tab{
	font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
	font-weight:600; padding:9px 16px; border-radius:0; border:1px solid var(--rule);
	background:var(--bg-panel); color:var(--ink-muted); cursor:pointer;
	transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.gallery-tab:hover{ border-color:var(--accent); color:var(--accent); }
.gallery-tab.is-active{ background:var(--accent); color:var(--bg); border-color:var(--accent); }

/* Photo wall: justified rows. Every photo keeps its own shape (no cropping); each row has its own height so the photos in it
   add up to the full wall width (1440px at most), with the same gap between photos across and down. barmotion-gallery.js sets the
   size and position of every tile; until it runs (or without JavaScript) the tiles simply wrap at a fixed height. The closing
   tile joins the last row and takes whatever width is left. Photography only: no cards, borders, shadows or icons. */
.photo-grid.gallery-primary{
	--bm-gap:6px;
	display:flex; flex-wrap:wrap; gap:var(--bm-gap); margin-top:0;
	max-width:var(--maxw,1440px); margin-left:auto; margin-right:auto; position:relative;
}
.gallery-item{ flex:1 1 280px; height:260px; min-width:0; transition:opacity .15s ease; }
.gallery-item.is-hidden{ display:none; }
.photo-grid.gallery-primary.is-justified{ display:block; }
.is-justified > .gallery-item{ position:absolute; flex:none; }
.gallery-primary .hero-art{
	position:relative; width:100%; height:100%; max-width:none; aspect-ratio:auto; overflow:hidden;
	border:0; border-radius:0; box-shadow:none; background:var(--bg-panel);
}
.gallery-primary .hero-art > img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item--cta .gallery-cta{ height:100%; box-sizing:border-box; }
/* Captions (when present) stay small and quiet: a slim line at the bottom of the photo, only on hover or keyboard focus. */
.gallery-primary .photo-grid__cap{
	position:absolute; left:0; right:0; bottom:0; z-index:1; margin:0; padding:22px 12px 10px; text-align:left;
	background:linear-gradient(180deg, transparent, rgba(13,26,31,.7));
	opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.gallery-item__trigger:hover .photo-grid__cap, .gallery-item__trigger:focus-visible .photo-grid__cap{ opacity:1; }
.gallery-primary .photo-grid__cap h3{ color:var(--ink); font-size:.72rem; margin:0; line-height:1.3; }
.gallery-primary .photo-grid__cap p{
	font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em;
	font-weight:400; color:var(--ink-muted); font-size:.64rem; margin:0;
}
@media (hover:none){ .gallery-primary .photo-grid__cap{ display:none; } }

/* Closing tile ("Like what you see?"): the last tile in the wall, in the site's panel colour. */
.gallery-cta{
	min-height:300px; padding:48px 24px; text-align:center; background:var(--bg-panel);
	display:flex; flex-direction:column; align-items:center; justify-content:center; border:0; border-radius:0; box-shadow:none;
}
.gallery-cta .eyebrow{ font-size:15px; margin-bottom:12px; }
.gallery-cta h2{ font-size:38.4px; font-weight:300; line-height:.9; margin:0; }
.gallery-cta h2 b{ font-size:38.4px; color:var(--accent); }
.gallery-cta__line{
	margin:16px 0 26px; font-family:'Oswald',sans-serif; font-size:16px; font-weight:400; letter-spacing:.04em;
	text-transform:uppercase; color:var(--ink);
}
.gallery-cta .btn{ margin:0; }
@media (max-width:700px){ .gallery-cta{ padding:36px 20px; min-height:240px; } .gallery-cta h2, .gallery-cta h2 b{ font-size:32px; } }

/* ---- Grid photo click target — the whole photo (and its caption, since
   the caption sits inside this same element) opens the lightbox below. */
.gallery-item__trigger{ cursor:pointer; }
.gallery-item__trigger:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
/* Hover / focus highlight: the photo zooms slightly. */
.gallery-primary .hero-art > img{ transition:transform .4s ease; }
.gallery-item__trigger:hover > img, .gallery-item__trigger:focus-visible > img{ transform:scale(1.06); }

/* ---- Lightbox modal: dark scrim, centred photo, prev/next either side,
   close top-right — plain CSS/vanilla JS (barmotion-gallery.js), no
   external lightbox library so it doesn't depend on NextGEN's assets
   being loaded on this page. */
.gallery-lightbox{
	position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
	background:rgba(13,26,31,.94); padding:5vh 5vw;
}
.gallery-lightbox[hidden]{ display:none; }
.gallery-lightbox__figure{
	position:relative; margin:0; max-width:min(1100px,90vw); max-height:88vh;
	display:flex; flex-direction:column; align-items:center;
}
.gallery-lightbox__img{ display:block; max-width:100%; max-height:76vh; width:auto; height:auto; object-fit:contain; }
.gallery-lightbox__back{
	align-self:flex-start; margin-bottom:10px; background:none; border:0; cursor:pointer;
	font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:.78rem;
	color:var(--ink-muted); transition:color .15s ease;
}
.gallery-lightbox__back:hover{ color:var(--accent); }
.gallery-lightbox__back[hidden]{ display:none; }

/* ---- Mosaic view: a gallery with more than one photo (NextGEN gallery id set on a grid item, or a filter tab) opens here first, in
   the same justified rows as the page's own wall: every photo keeps its own shape, each row adds up to the full width, and the gap is
   the same across and down. barmotion-gallery.js sizes and positions the tiles. Scrollable since a gallery can hold more photos than
   fit one screen. Clicking a tile switches the modal to the single-photo view above (.gallery-lightbox__figure). */
.gallery-lightbox__mosaic{
	display:none; position:relative; width:min(1440px,100%); max-height:84vh; overflow-y:auto; scrollbar-gutter:stable; padding:0;
}
.gallery-lightbox--mosaic{ padding-left:12px; padding-right:12px; }   /* the gallery opens as wide as the page: 1440px */
.gallery-lightbox--mosaic .gallery-lightbox__mosaic{ display:block; }
/* The gallery scrolls, but with a slim lime bar on the dark background instead of the browser's grey one. */
.gallery-lightbox__mosaic{ scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.gallery-lightbox__mosaic::-webkit-scrollbar{ width:6px; }
.gallery-lightbox__mosaic::-webkit-scrollbar-track{ background:transparent; }
.gallery-lightbox__mosaic::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:3px; }
.gallery-lightbox--mosaic .gallery-lightbox__figure,
.gallery-lightbox--mosaic .gallery-lightbox__prev,
.gallery-lightbox--mosaic .gallery-lightbox__next{ display:none; }
.gallery-lightbox__mosaic-item{
	position:absolute; display:block; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; overflow:hidden; cursor:pointer;
	background:var(--bg-panel);
}
.gallery-lightbox__mosaic-item img{
	width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;
}
.gallery-lightbox__mosaic-item:hover img, .gallery-lightbox__mosaic-item:focus-visible img{ transform:scale(1.04); }
.gallery-lightbox__mosaic-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.gallery-lightbox__cap{ margin-top:14px; text-align:center; }
.gallery-lightbox__cap h3{
	font-family:'Oswald',sans-serif; text-transform:uppercase; color:var(--ink);
	font-size:1rem; letter-spacing:.03em; margin:0 0 4px;
}
.gallery-lightbox__cap p{
	font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em;
	font-weight:400; color:var(--ink-muted); font-size:.8rem; margin:0;
}
.gallery-lightbox__close,
.gallery-lightbox__nav{
	position:fixed; background:none; border:0; color:var(--ink); cursor:pointer;
	display:flex; align-items:center; justify-content:center; transition:color .15s ease;
}
.gallery-lightbox__close:hover, .gallery-lightbox__nav:hover{ color:var(--accent); }
.gallery-lightbox__close{ top:24px; right:24px; font-size:2.2rem; line-height:1; width:44px; height:44px; }
.gallery-lightbox__nav{ top:50%; transform:translateY(-50%); font-size:1.8rem; width:56px; height:56px; }
.gallery-lightbox__prev{ left:12px; }
.gallery-lightbox__next{ right:12px; }
@media (max-width:700px){
	.gallery-lightbox__nav{ width:44px; height:44px; font-size:1.4rem; }
	.gallery-lightbox__prev{ left:2px; }
	.gallery-lightbox__next{ right:2px; }
	.gallery-lightbox__close{ top:12px; right:12px; }
}