/*!
 * The photo stage on a gallery vehicle page.
 *
 * customise.py swaps the featured <img> for a stage: the photograph, an arrow
 * either side of it, a counter, and the frame list in a JSON island.
 * vehicle-gallery.js drives it. This file only deals with how it looks.
 *
 * No Elementor classes are involved. That is deliberate — an injected .e-con
 * inherits none of the generated per-widget CSS and falls back to
 * display: inline, the trap section 36 of apex-revamp.css records — so
 * everything the stage needs is stated here outright.
 */

/* --------------------------------------------------------------------------
   The stage
   The slot the featured image sat in is square, 553x553, and every frame in
   this shoot is portrait 4:5. Cropping a car to a square throws away most of
   what the photographer framed, so the stage takes the photo's own ratio and
   the row grows to suit.
   -------------------------------------------------------------------------- */
/* The stage fills its column, and its height is what is capped.
   It was the width that was capped before — 515px, which put the 4:5 frame at
   the 644px tall the client settled on after 691px was too big and 470px too
   small. But the column keeps growing with the window while 515px does not, so
   on a wide screen the photograph sat in the left third of the row with a
   stretch of black between it and the build details. At 1920px that gap was
   358px; at 2560px it was over 700. The client asked for the photo to run from
   where it starts across to the left of the icons.

   So the cap moves from width to height. `max-height: 644px` is the same 644 —
   the number that was agreed — and with a definite width the aspect ratio
   yields to it, so the box goes from 4:5 to as wide as the column and the
   photograph is cropped by `cover` rather than scaled up. Measured at 1920px:
   the stage is 873px wide, ending at x=933 against the details column's 973,
   which is the 40px gap the row is authored with.

   Below about 515px of column — every phone, and a tablet in portrait — the
   height never reaches 644, so the frames stay whole 4:5 portraits exactly as
   before. The crop only appears on the screens that had the gap.

   These 17 frames take a landscape crop well: they are close and detail shots
   with the car across the middle of the frame, so a centred 1.36:1 window at
   1920px holds the car in all of them. Checked frame by frame before the cap
   was moved. A future shoot framed looser would want checking again. */
.apex-vg-stage {
	position: relative;
	display: block;
	/* Sixty-third pass. The stage used to be the column's full width with
	   the 4:5 frame `contain`ed inside it, which drew the stage's own
	   #0c0c0c either side of every photograph -- the "big grey banner on
	   each side" the client saw. All seventeen frames are 1120x1400, so the
	   stage is now that shape itself: 4:5, no wider than the 644px cap
	   allows (515px), centred in the column. Same photographs, same cap,
	   same arrows; nothing to fill beside the frame any more. On a phone the
	   column is narrower than 515px, so `min()` takes the 100% branch and
	   the box still keeps the frame's own ratio. */
	width: min(100%, 515px);
	aspect-ratio: 4 / 5;
	margin-inline: auto;
	border-radius: 12px;              /* photos are 12px, section 4 */
	overflow: hidden;
	background: #0c0c0c;
	line-height: 0;
}

/* `contain`, not `cover`. Widening the box to the column meant a 1.36:1 window
   over a 4:5 frame, and `cover` fills that by cropping 41% of the photograph's
   height away — which took the car out of most of the seventeen. The window is
   the right size, so the photograph shrinks to fit inside it instead: at
   1920px it renders 515x644 centred on the stage's own #0c0c0c, whole, with
   the frame either side of it. Nothing is cut off at any width. */
.apex-vg-stage-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-height: 644px;
	object-fit: contain;
	cursor: zoom-in;
	background: #0c0c0c;
}

/* --------------------------------------------------------------------------
   Arrows
   Inside the frame rather than outside it: the stage sits in a two-column row
   with the build details beside it, and there is no gutter to hang them in.
   The scrim behind each one is what keeps a white chevron legible over a
   photograph that could be any colour at that point.
   -------------------------------------------------------------------------- */
.apex-vg-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 46px;
	height: 46px;
	padding: 0 !important;            /* the theme styles bare <button> at 12px 30px */
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(6px);
	color: #ffffff;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background-color 0.16s ease, border-color 0.16s ease,
	            opacity 0.2s ease;
}

/* Hello Elementor styles every bare <button> in reset.css:
   `button { border: 1px solid #c36; color: #c36 }` and, the one that shows,
   `button:focus, button:hover { background-color: #c36; color: #fff }`. #c36
   is #CC3366 — the same pink section 3 of apex-revamp.css had to chase off
   links. Clicking an arrow focuses it, and a focused arrow was filling solid
   pink.

   It wins because it is `button:focus` at (0,1,1) and `.apex-vg-nav` is a
   plain class at (0,1,0). Specificity is compared whatever the state, so the
   base rule above lost to it as well. Every state is therefore stated here
   outright with !important rather than relying on being later in the file —
   there is nothing later in the file for a focused button.

   `.apex-vg-close` carries the same fix below for the same reason. These two
   are the only bare <button>s this site injects; Gravity's next/submit are
   [type=submit] and are hit by the same reset rule, but quote-form.css states
   them at (0,2,0), which already beats it. */
.apex-vg-nav:focus,
.apex-vg-nav:focus-visible,
.apex-vg-nav:active {
	background: rgba(0, 0, 0, 0.55) !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
}

.apex-vg-nav:hover,
.apex-vg-nav:hover:focus {
	background: var(--apex-blue) !important;
	color: #ffffff !important;
}

.apex-vg-nav:hover {
	background: var(--apex-blue);
	border-color: var(--apex-blue) !important;
}

/* Faded rather than removed at the ends, so the control does not jump about
   and the frame keeps its shape. */
.apex-vg-nav[disabled] {
	opacity: 0.25;
	pointer-events: none;
}

.apex-vg-stage .apex-vg-prev { left: 14px; }
.apex-vg-stage .apex-vg-next { right: 14px; }

.apex-vg-nav svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.apex-vg-position {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	margin: 0;
	z-index: 2;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(6px);
	font-family: var(--apex-body), sans-serif;
	font-size: 0.75rem;
	line-height: 1.4;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.86);
}

/* --------------------------------------------------------------------------
   Lightbox — the 4K copy
   -------------------------------------------------------------------------- */
.apex-vg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	background: rgba(0, 0, 0, 0.94);
	padding: 40px 72px;
}

.apex-vg-lightbox[data-open="true"] {
	display: grid;
	place-items: center;
}

.apex-vg-lightbox img {
	max-width: 100%;
	max-height: calc(100vh - 120px);
	object-fit: contain;
	border-radius: 8px;
}

.apex-vg-lightbox .apex-vg-nav {
	background: rgba(255, 255, 255, 0.08);
}

.apex-vg-lightbox .apex-vg-prev { left: 20px; }
.apex-vg-lightbox .apex-vg-next { right: 20px; }

.apex-vg-lightbox .apex-vg-position {
	bottom: 22px;
	background: none;
	backdrop-filter: none;
}

.apex-vg-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.24) !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.apex-vg-close:focus,
.apex-vg-close:focus-visible,
.apex-vg-close:active {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #ffffff !important;
}

.apex-vg-close:hover,
.apex-vg-close:hover:focus {
	background: var(--apex-blue) !important;
	color: #ffffff !important;
}

.apex-vg-close:hover {
	background: var(--apex-blue);
	border-color: var(--apex-blue) !important;
}

.apex-vg-close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

/* The page holds its scroll position behind the lightbox rather than jumping
   to the top, which is what overflow:hidden on <body> alone would cause. */
body.apex-vg-locked {
	overflow: hidden;
}

@media (max-width: 767px) {
	.apex-vg-lightbox {
		padding: 20px 12px 60px;
	}

	.apex-vg-lightbox .apex-vg-nav {
		width: 42px;
		height: 42px;
	}

	.apex-vg-lightbox .apex-vg-prev { left: 8px; }
	.apex-vg-lightbox .apex-vg-next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.apex-vg-nav {
		transition: none;
	}
}