/* FRAME7 Scroll Gallery
   ==================================================================
   The photographs carry the design. Everything here stays quiet:
   a dark ground, generous air, and one button that only appears
   once the image has come to rest.

   SECTIONS
     1.  Root variables
     2.  Page builder safety net
     3.  Full-bleed break-out
     4.  Track and stage
     5.  Slides and media
     6.  Shield, CTA and button
     7.  Click routing
     8.  Flat mode
     9.  View toggle
     10. Grid view
     11. Reduced motion

   ORDER MATTERS. Section 10 must stay last of the layout sections,
   because grid has to override flat mode. See the note in section 10.
   ================================================================== */


/* ==================================================================
   1. ROOT VARIABLES
   Change the look here first. Almost everything else reads from these.
   ================================================================== */

.f7-gallery {
	--f7-bg: #0f1113;

	/* Warm off-white, not pure white. Reads like a gallery wall label
	   rather than a web button, and never competes with the photograph
	   for the eye. The saturated colour on screen should only ever be
	   the image itself. */
	--f7-btn-bg: #f4f1ec;
	--f7-btn-fg: #14171a;

	--f7-stage-h: 100vh;
	--f7-gutter: 0vw;
	--f7-perspective: 1400px;

	/* How far the shared hinge line sits above the bottom of the stage. */
	--f7-hinge: 3vh;

	/* Button scale. Change this one value to resize the button and its
	   padding together, since the padding is set in em. An uppercase,
	   letterspaced pill wants to be small. */
	--f7-btn-size: clamp(0.85rem, 1.1vw, 1.05rem);

	/* Height of the site's sticky header. The view toggle parks below it. */
	--f7-header-h: 81px;

	position: relative;
	width: 100%;
	background-color: var(--f7-bg);

	/* Deliberately no overflow value here. Any overflow other than visible
	   on an ancestor of a sticky element can stop it sticking. Clipping is
	   handled by the stage instead. */
}


/* ==================================================================
   2. PAGE BUILDER SAFETY NET
   An Elementor container set to row direction sizes its children by
   content. Every slide here is absolutely positioned, so the gallery
   has no intrinsic width and the flex item collapses to zero: correct
   height, no width, a tall blank column. Claim the full width so the
   gallery survives whichever direction the container happens to use.
   ================================================================== */

.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .f7-gallery),
.elementor-widget:has(> .elementor-shortcode > .f7-gallery),
.elementor-widget:has(.f7-gallery) {
	width: 100%;
	flex: 1 0 100%;
	min-width: 0;
}

.elementor-shortcode:has(> .f7-gallery),
.elementor-widget-container:has(> .elementor-shortcode > .f7-gallery) {
	width: 100%;
}


/* ==================================================================
   3. FULL-BLEED BREAK-OUT
   Break out of whatever the page container is, so photos run to both
   edges of the window. --f7-vw is set from JS using clientWidth, which
   excludes the scrollbar; 100vw does not, and the difference shows up
   as a sliver of horizontal overflow.
   ================================================================== */

.f7-gallery--bleed {
	width: var(--f7-vw, 100vw);
	max-width: var(--f7-vw, 100vw);
	margin-left: calc(50% - (var(--f7-vw, 100vw) / 2));
	margin-right: calc(50% - (var(--f7-vw, 100vw) / 2));
}


/* ==================================================================
   4. TRACK AND STAGE
   The track is the tall scroll runway. The stage is the one screen
   that pins to the top while the runway passes behind it.
   ================================================================== */

.f7-gallery__track {
	position: relative;
	width: 100%;
}

/* Belt and braces: if JS ever fails to set a pixel height, the pinned
   layout still has room rather than collapsing every slide out of view. */
.f7-gallery.is-live .f7-gallery__track {
	min-height: var(--f7-stage-h);
}

.f7-gallery__stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: var(--f7-stage-h);
	overflow: hidden;
	perspective: var(--f7-perspective);
	perspective-origin: 50% 50%;
}

.f7-gallery.is-live .f7-gallery__stage {
	min-height: var(--f7-stage-h);
}

/* An element cannot both clip overflow and preserve 3D: the clipping wins
   and flattens everything. So the stage clips, and this inner element
   holds the shared 3D space that all the photos live in. */
.f7-gallery__wheel {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

/* Calm mode has no 3D transforms, so flatten the space and let the
   declared z-index order do the work instead of depth sorting. */
.f7-gallery.is-calm .f7-gallery__stage {
	perspective: none;
}

.f7-gallery.is-calm .f7-gallery__wheel {
	transform-style: flat;
}


/* ==================================================================
   5. SLIDES AND MEDIA
   ================================================================== */

/* Every slide occupies the same box. In motion mode the browser sorts
   them by real 3D depth, so no z-index is needed or wanted. */
.f7-gallery__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
}

/* Motion mode rests every photo on the same bottom line, so nothing
   jumps vertically between photos of different heights and the hinge
   stays put. Calm mode keeps them centred. */
.f7-gallery.is-live:not(.is-calm) .f7-gallery__slide {
	align-items: flex-end;
	padding-bottom: var(--f7-hinge);
}

/* The media box shrink-wraps the photograph rather than filling the
   stage, so the button can sit on the image itself instead of floating
   in the empty ground beneath a wide panorama. */
.f7-gallery__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: calc(100% - (var(--f7-gutter) * 2));

	/* The hinge. Every photo pivots on its own bottom edge, and because
	   the slides are bottom-aligned those edges all sit on one line. */
	transform-origin: 50% 100%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

/* Mixed aspect ratios: capped on both axes, centred, never cropped.
   A vertical and a 3:1 panorama share the same height limit and simply
   differ in width. */
.f7-gallery__img {
	display: block;
	max-width: 100%;
	max-height: calc(var(--f7-stage-h) - (var(--f7-gutter) * 2) - var(--f7-hinge));
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.45);
}

/* Saving deterrent. Not a lock, just friction. */
.f7-gallery--protected .f7-gallery__img {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	pointer-events: none;
}


/* ==================================================================
   6. SHIELD, CTA AND BUTTON
   ================================================================== */

/* Sits over the photo to intercept right-click and long-press.
   The button lives above it in the stacking order. */
.f7-gallery__shield {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: transparent;
}

.f7-gallery__cta {
	position: absolute;
	left: 50%;
	bottom: clamp(1.5rem, 4vh, 3rem);
	z-index: 5;

	/* The 1px of Z lifts the button clear of its own shield. Inside a
	   preserve-3d context the browser sorts by real depth and ignores
	   z-index entirely, so a flat translateX alone leaves the button
	   coplanar with the shield and unclickable. */
	transform: translateX(-50%) translateZ(1px);

	opacity: 0;
	pointer-events: none;
}

.f7-gallery__btn {
	display: inline-block;
	padding: 0.95em 2.4em;
	border: 0;
	border-radius: 999px;
	background-color: var(--f7-btn-bg);
	color: var(--f7-btn-fg);
	font-size: var(--f7-btn-size);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.35);
	transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
		background-color 220ms ease, box-shadow 220ms ease;
}

.f7-gallery__btn:hover,
.f7-gallery__btn:focus-visible {
	transform: translateY(-3px);
	background-color: #ffffff;
	box-shadow: 0 1.1rem 2.6rem rgba(0, 0, 0, 0.45);
	color: var(--f7-btn-fg);
}

.f7-gallery__btn:focus-visible {
	outline: 2px solid var(--f7-btn-bg);
	outline-offset: 4px;
}


/* ==================================================================
   7. CLICK ROUTING
   Only the photo at rest receives input. Every slide shares one
   preserve-3d space where z-index does not apply, so without this a
   slide rotated away from the viewer still sits on top of the resting
   slide's button and swallows the click.

   Do NOT give .is-resting slides pointer-events: auto. That makes the
   slide box itself a hit target, which blocks the button again. The
   CTA re-enables input for itself, which is all that is needed.
   ================================================================== */

.f7-gallery__slide,
.f7-gallery__shield {
	pointer-events: none;
}

.f7-gallery__slide.is-resting .f7-gallery__shield {
	pointer-events: auto;
}


/* ==================================================================
   8. FLAT MODE
   Narrow screens, and wherever pinning is switched off. Same photos,
   same links, plain vertical stack.

   Note: grid view also removes .is-live, so everything here applies in
   grid too. Section 10 deliberately overrides it.
   ================================================================== */

.f7-gallery:not(.is-live) .f7-gallery__track {
	height: auto !important;
}

.f7-gallery:not(.is-live) .f7-gallery__wheel {
	position: static;
	inset: auto;
	transform-style: flat;
}

.f7-gallery:not(.is-live) .f7-gallery__stage {
	position: static;
	perspective: none;
	display: block;
	height: auto;
	min-height: 0;
	overflow: visible;
	padding: var(--f7-gutter) 0;
}

.f7-gallery:not(.is-live) .f7-gallery__slide {
	position: relative;
	inset: auto;
	flex-direction: column;
	padding: 0 var(--f7-gutter) clamp(3rem, 8vw, 6rem);
}

.f7-gallery:not(.is-live) .f7-gallery__media {
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	height: auto;
	transform: none !important;
	opacity: 1 !important;
}

.f7-gallery:not(.is-live) .f7-gallery__img {
	max-height: 78vh;
}

.f7-gallery:not(.is-live) .f7-gallery__cta {
	position: relative;
	left: auto;
	bottom: auto;
	transform: none;
	margin-top: 1.75rem;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* Nothing overlaps in a plain stack, so the shield can guard every
   photo rather than only the resting one. */
.f7-gallery:not(.is-live) .f7-gallery__shield {
	pointer-events: auto;
}


/* ==================================================================
   9. VIEW TOGGLE
   Sticky bar offering flip or grid. Parks below the site header.
   ================================================================== */

.f7-gallery__views {
	position: sticky;
	top: var(--f7-header-h);
	z-index: 20;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem;
	background-color: rgba(15, 17, 19, 0.72);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.f7-gallery__view {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	padding: 0.45em 1.5em;
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
	font: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease,
		border-color 180ms ease;
}

.f7-gallery__view:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.5);
}

/* Driven by the root class, not aria-pressed, so the active state is
   correct before JS runs. */
.f7-gallery:not(.f7-gallery--grid) .f7-gallery__view[data-f7-view="flip"],
.f7-gallery--grid .f7-gallery__view[data-f7-view="grid"] {
	background-color: var(--f7-btn-bg);
	border-color: var(--f7-btn-bg);
	color: var(--f7-btn-fg);
}

.f7-gallery__view:focus-visible {
	outline: 2px solid var(--f7-btn-bg);
	outline-offset: 3px;
}


/* ==================================================================
   10. GRID VIEW
   Unpins the stage and lets the photos fall into masonry columns.

   Every selector here is prefixed .f7-gallery.f7-gallery--grid rather
   than .f7-gallery--grid alone. That is not decoration. Grid removes
   .is-live, so section 8 is live at the same time, and
   .f7-gallery:not(.is-live) .f7-gallery__slide counts as three classes.
   A two-class grid selector loses and flat mode's padding and CTA
   positioning win. Matching at three classes and sitting later in the
   file is what makes grid authoritative.
   ================================================================== */

.f7-gallery.f7-gallery--grid .f7-gallery__track {
	height: auto !important;
}

.f7-gallery.f7-gallery--grid .f7-gallery__stage {
	position: static;
	height: auto;
	min-height: 0;
	overflow: visible;
	perspective: none;
	padding: 0;
}

.f7-gallery.f7-gallery--grid .f7-gallery__wheel {
	position: static;
	inset: auto;
	transform-style: flat;

	/* Two numbers to tune: minimum column width, then maximum columns.
	   Try 420px 2 if the panoramas feel cramped three-up. */
	columns: 320px 3;
	column-gap: 10px;
	padding: 10px;
}

.f7-gallery.f7-gallery--grid .f7-gallery__slide {
	position: static;
	display: block;

	/* Clears flat mode's clamp(3rem, 8vw, 6rem) bottom padding, which is
	   what opened those large vertical gaps between rows. */
	padding: 0;

	/* Vertical breathing room is larger than the 10px column gutter so a
	   button never crowds the photo starting the next row. */
	margin: 0 0 28px;

	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}

.f7-gallery.f7-gallery--grid .f7-gallery__media {
	display: block;
	width: 100%;
	max-width: none;
	transform: none;
	transform-style: flat;
	opacity: 1;
	will-change: auto;
}

.f7-gallery.f7-gallery--grid .f7-gallery__img {
	width: 100%;
	height: auto;
	max-height: none;

	/* Dropped at 10px gutters. Tight grids read cleaner flush, and
	   overlapping shadows only muddy the gaps. */
	box-shadow: none;
}

.f7-gallery.f7-gallery--grid .f7-gallery__shield {
	pointer-events: auto;
}

/* The button sits below its photo in normal flow here, so text-align is
   what centres it. left and transform do nothing once it is no longer
   absolutely positioned, which is why it was hugging the left edge. */
.f7-gallery.f7-gallery--grid .f7-gallery__cta {
	position: static;
	left: auto;
	bottom: auto;
	transform: none;
	text-align: center;
	margin-top: 3px;
	opacity: 1;
	pointer-events: auto;
	--f7-btn-size: 0.7rem;
}

.f7-gallery.f7-gallery--grid .f7-gallery__btn {
	padding: 0.7em 1.9em;
	box-shadow: none;
}

.f7-gallery.f7-gallery--grid .f7-gallery__btn:hover,
.f7-gallery.f7-gallery--grid .f7-gallery__btn:focus-visible {
	box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.4);
}

/* The whole card is one link. The button's anchor already carries the
   right href, so a stretched pseudo-element over the media turns the
   photograph into the same link: no extra markup, and middle-click and
   open-in-new-tab still behave like a real link.
   z-index 3 clears the shield at 2. */
.f7-gallery.f7-gallery--grid .f7-gallery__btn::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
}

.f7-gallery.f7-gallery--grid .f7-gallery__media {
	cursor: pointer;
}

/* No lift in grid. A transform on the button would make it the containing
   block for its own ::after, collapsing the overlay to the button's box
   the instant you hover the photo, which flickers endlessly. */
.f7-gallery.f7-gallery--grid .f7-gallery__btn:hover,
.f7-gallery.f7-gallery--grid .f7-gallery__btn:focus-visible {
	transform: none;
}

/* Hover feedback moves to the photograph instead. */
.f7-gallery.f7-gallery--grid .f7-gallery__img {
	transition: opacity 220ms ease;
}

.f7-gallery.f7-gallery--grid .f7-gallery__media:hover .f7-gallery__img {
	opacity: 0.86;
}


/* ==================================================================
   11. REDUCED MOTION
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.f7-gallery__btn {
		transition: none;
	}
}