/* framework/quote-slider — measured off live, not assumed.
   The container is the content column itself: 1200 wide, overflow hidden. The
   track is inset 30px, the slides are 570 on a 570 pitch (no gap), and each is
   a card with 36px of padding on a 6% white wash. The earlier version put a
   1240px max-width, a 20px gutter and 46px of track padding around it, which
   is why every quote sat 46px left of live's. */
.vk-quotes {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	/* The inset belongs to the container, not the track. On the track it was
	   scrolled straight past — `scroll-snap-align: start` snaps the first slide
	   to the scroller's edge and eats the padding — so every quote sat 30px
	   left of live's while the padding was demonstrably applied. */
	padding: 0 0 0 var(--vk-inset, 30px);
	/* The track below is its own scroll container (overflow-x: auto), so it
	   already clips and scrolls the slides; hiding overflow here as well did
	   nothing for the slides and cut the tips off both arrows, which sit 18px
	   outside this box exactly as live's do (335 and 1517 against a track from
	   353 to 1553). Live's arrows are siblings of its slide viewport, outside
	   it and unclipped. */
	overflow: visible;
}
.vk-quotes__track {
	display: flex;
	/* Exactly as many slides as are meant to be in view, which is what live
	   does: its track is 1140 at x=383 -- two 570s -- against a 1200 viewport.
	   Ours filled the full 1170, so 30px of the THIRD slide showed at the right
	   edge and brought its divider with it: the stray vertical line past the
	   second quote. */
	width: calc(
		var(--vk-visible, 2) * var(--vk-slide, 570px)
		+ (var(--vk-visible, 2) - 1) * var(--vk-gap, 0px)
	);
	max-width: 100%;
	gap: var(--vk-gap, 0px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 0;
}
.vk-quotes__track::-webkit-scrollbar { display: none; }
.vk-quotes__slide {
	flex: 0 0 var(--vk-slide, 570px);
	box-sizing: border-box;
	margin: 0;
	padding: var(--vk-slide-pad, 36px);
	background: var(--vk-slide-bg, transparent);
	border-radius: var(--vk-slide-radius, 0);
	scroll-snap-align: start;
}
.vk-quotes__slide blockquote {
	margin: 0;
	color: #000;
	font-size: 14px;
	line-height: 19.6px;
}
/* CORRECTION 2026-09-10: this said "live sets both at 400" and the attribution
   was left at the quote's weight on that basis. Live wraps the attribution in
   <strong> -- measured on /case-management/, "Azamara Journey Guest" is 700 at
   14px/19.6 in black. It is set bold at the end of this file. */
.vk-quotes__slide figcaption {
	margin-top: 21px;
	color: #000;
	font-size: 14px;
	font-weight: 400;
	line-height: 19.6px;
}
.vk-quotes__date { margin: 21px 0 0; color: #000; font-size: 14px; line-height: 19.6px; }
.vk-quotes__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	color: #2a2c37;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
.vk-quotes__arrow--prev { left: 0; }
.vk-quotes__arrow--next { right: 0; }
@media (max-width: 979px) {
	.vk-quotes__slide { flex: 0 0 80%; max-width: 80%; }
	.vk-quotes__track { padding: 0 20px; }
}

/* The viewport holds exactly the number of slides the design shows at once —
   live shows two of four in a 1140px window — and clips the rest. Without this
   the track was as wide as its content and slide two bled off the page. */
.vk-quotes {
	/* No inset term: the inset is padding on the CONTAINER, so adding it here
	   made the track 1170 against live's measured 1140 and left 30px of the
	   third slide showing at the right-hand edge. */
	--vk-viewport: calc(
		var(--vk-visible, 2) * var(--vk-slide, 570px)
		+ (var(--vk-visible, 2) - 1) * var(--vk-gap, 0px)
	);
}
.vk-quotes__track {
	max-width: min(100%, var(--vk-viewport));
	overflow-x: auto;
	scrollbar-width: none;
}
.vk-quotes__track::-webkit-scrollbar { display: none; }
.vk-quotes__slide { flex: 0 0 var(--vk-slide, 570px); max-width: var(--vk-slide, 570px); }


/* ---- Measured on live 2026-09-10 at 1920, /case-management/ -------------- */

/* The rule between the two quotes is a border on the slide itself, not a
   separate element. Live carries it on the right; ours carries it on the LEFT
   of every slide after the first, which draws the same single line between the
   pair in view (x=953) while leaving nothing at the right-hand end. A right
   border put the next slide's rule at x=1523 -- exactly the track's edge, so
   it painted a stray line past the second quote instead of being clipped with
   the slide it belongs to. */
.vk-quotes__slide + .vk-quotes__slide {
	border-left: 1px solid #88a6c3;
}

/* The date under the author: #88a6c3 and bold, 14px on a 19.6px line. */
.vk-quotes__date {
	color: #88a6c3;
	font-weight: 700;
	font-size: 14px;
	line-height: 19.6px;
}

/* The arrows sit over the ends of the track, vertically centred: a 54x54 hit
   area carrying a 54px triangle in rgba(84,84,84,.55). Live puts their centres
   9px inside each end of the 1200px track. */
.vk-quotes { position: relative; }
.vk-quotes__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 0;
	background: none;
	color: rgba(84, 84, 84, 0.55);
	/* The glyph itself is not drawn. U+25C0/U+25B6 are not in the maven face,
	   so the browser fell back to a face that boxes them -- the triangle came
	   out inside a rectangle. Live draws its arrows from an icon font, which we
	   do not load, so the shape is drawn in CSS instead: borders give the same
	   solid triangle at any size and depend on no font at all. */
	font-size: 0;
	line-height: 1;
	cursor: pointer;
}
/* 27 wide by 48 tall, the ink of live's 54px glyph in its 27px box. A border
   triangle came out hard-cornered; live's is an icon-font glyph with softened
   corners, so the shape is a masked SVG whose corners are rounded by a thick
   round-joined stroke. Masked rather than drawn so the fill still follows
   `color`, which is what the hover state changes. */
.vk-quotes__arrow::before {
	content: "";
	display: block;
	width: 27px;
	height: 48px;
	background-color: currentColor;
	-webkit-mask: var(--vk-arrow) no-repeat center / contain;
	mask: var(--vk-arrow) no-repeat center / contain;
}
.vk-quotes__arrow--prev {
	--vk-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 48'%3E%3Cpath d='M19 11 L10 24 L19 37 Z' fill='%23000' stroke='%23000' stroke-width='14' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.vk-quotes__arrow--next {
	--vk-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 48'%3E%3Cpath d='M8 11 L17 24 L8 37 Z' fill='%23000' stroke='%23000' stroke-width='14' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.vk-quotes__arrow:hover { color: rgba(84, 84, 84, 0.8); }
.vk-quotes__arrow--prev { left: -18px; }
.vk-quotes__arrow--next { right: -18px; }


/* The attribution is bold on live -- it is a <strong> there, and ours is a
   plain figcaption. Colour and size already match at 14px/19.6 in black. */
.vk-quotes__slide figcaption {
	font-weight: 700;
}


/* ---- Image slides ---- measured on live 2026-09-11, /shipboardjobs/ --------
   That page uses this block for live's Slider Revolution testimonials, and
   those slides are not text: they are nine 1800x600 graphics with the
   portrait, the quote and the attribution baked into the artwork. So the slide
   is one picture, edge to edge -- no card, no padding and no divider rule,
   all of which belong to the text quotes on /case-management/. */
.vk-quotes__slide--image {
	padding: 0;
	background: none;
}
.vk-quotes__slide--image + .vk-quotes__slide--image {
	border-left: 0;
}
.vk-quotes__slide--image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Fade mode ------------------------------------------------------------
   Live crossfades in place rather than sliding. Sampled every 750ms on the
   rendered page: the outgoing and incoming slides overlap at the SAME x
   (353) for roughly 800ms, once every 9s. So the slides stack in a single
   grid cell and only opacity moves -- a horizontal track would have been the
   wrong gesture even though the block's default is one. */
.vk-quotes--fade .vk-quotes__track {
	display: grid;
	width: var(--vk-slide, 570px);
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	scroll-snap-type: none;
}
.vk-quotes--fade .vk-quotes__slide {
	grid-area: 1 / 1;
	flex: none;
	max-width: 100%;
	opacity: 0;
	/* visibility rides along so the eight slides that are not showing leave
	   the accessibility tree too -- on opacity alone a screen reader reads all
	   nine testimonials straight through, one after another. It is delayed out
	   and immediate in, so it never cuts the fade short. */
	visibility: hidden;
	transition: opacity var(--vk-fade, 800ms) ease,
	            visibility 0s linear var(--vk-fade, 800ms);
}
/* Before the view script runs, and with JavaScript off altogether, the first
   testimonial shows as a still. The reader never gets the empty white band. */
.vk-quotes--fade .vk-quotes__slide:first-child {
	opacity: 1;
	visibility: visible;
}
/* Once the script has hydrated it owns which slide is up. Declared after the
   :first-child rule at equal specificity, so the handover wins cleanly. */
.vk-quotes--fade.is-live .vk-quotes__slide {
	opacity: 0;
	visibility: hidden;
}
.vk-quotes--fade.is-live .vk-quotes__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--vk-fade, 800ms) ease, visibility 0s;
}
/* The 30px container inset is a text-slider affectation -- it insets the first
   quote card inside the column. A full-bleed picture band has none, and live's
   module starts at x=353, the content column's own left edge. */
.vk-quotes--fade {
	padding-left: 0;
}

@media (prefers-reduced-motion: reduce) {
	.vk-quotes--fade .vk-quotes__slide { transition: none; }
}