/**
 * Ravenna Homes — gallery carousel.
 *
 * Loads after vendor/slick/slick.css, which handles the mechanics (track,
 * overflow, transforms). Everything here is presentation, and every value
 * worth changing is a custom property:
 *
 *   .rh-gallery { --rh-gallery-gap: 8px; --rh-gallery-height: 520px; }
 */

.rh-gallery[data-rh-gallery] {
	--rh-gallery-gap: 5px;
	--rh-gallery-gap-color: #fff;
	--rh-gallery-arrow-size: 44px;
	--rh-gallery-dot-color: var(--rh-light-gray, #c6c6c6);
	--rh-gallery-dot-active: var(--rh-navy, #063d5d);

	position: relative;
}

/* Before Slick initialises, the slides are plain block divs stacked down the
   page. Clip to one row's worth so the page doesn't jump. */
.rh-gallery[data-rh-gallery]:not(.slick-initialized) {
	display: flex;
	overflow: hidden;
	max-height: 70vh;
}

.rh-gallery[data-rh-gallery]:not(.slick-initialized) .rh-gallery-slide {
	flex: 0 0 auto;
	width: var(--rh-gallery-preinit, 33.3333%);
}

.rh-gallery[data-rh-gallery] .rh-gallery-slide {
	position: relative;
}

.rh-gallery[data-rh-gallery] .rh-gallery-image,
.rh-gallery[data-rh-gallery] .slick-slide img {
	display: block;
	width: 100%;
	height: auto;
	/* The white gutter between slides, as in the reference build. */
	border-right: var(--rh-gallery-gap) solid var(--rh-gallery-gap-color);
}

/* Uniform slide height — images crop rather than letterbox. */
.rh-gallery--fixed-height .rh-gallery-image,
.rh-gallery--fixed-height .slick-slide img {
	height: var(--rh-gallery-height, 450px);
	object-fit: cover;
}

.rh-gallery[data-rh-gallery] .rh-gallery-link,
.rh-gallery-hero .rh-gallery-link {
	display: block;
	line-height: 0;
	cursor: zoom-in;
	text-decoration: none !important; /* Avada's underline rule carries an ID */
}

/* -------------------------------------------------------------------------
 * Hero fallback — fewer images than min_slides
 * ---------------------------------------------------------------------- */

.rh-gallery-hero {
	position: relative;
	width: 100%;
}

.rh-gallery-hero .rh-gallery-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Same width-driven sizing as the carousel below — see the long note there. */
.rh-gallery-hero.rh-gallery--fixed-height .rh-gallery-image {
	height: auto;
	aspect-ratio: var(--rh-gallery-ratio, 3 / 2);
	max-height: var(--rh-gallery-height, none);
	object-fit: cover;
}

/* Extra images that feed the lightbox without being shown as slides. */
.rh-gallery-hidden {
	display: none;
}

/* NEVER constrain .slick-track's width. Slick sets it inline to the summed
   width of every slide (24728px for 43 images); clamping it to the container
   makes the floated slides wrap into one row per image and the carousel
   becomes a 15,000px-tall stack. */

.rh-gallery[data-rh-gallery] .slick-slide {
	outline: none;
}

/* -------------------------------------------------------------------------
 * Arrows — drawn in CSS, no icon font (slick-theme.css is deliberately not
 * bundled, since its webfont and loading GIF resolve by relative path).
 * ---------------------------------------------------------------------- */

.rh-gallery[data-rh-gallery] .slick-prev,
.rh-gallery[data-rh-gallery] .slick-next {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: var(--rh-gallery-arrow-size);
	height: var(--rh-gallery-arrow-size);
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.9 );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );
	font-size: 0;
	color: transparent;
	cursor: pointer;
}

.rh-gallery[data-rh-gallery] .slick-prev { left: 20px; }
.rh-gallery[data-rh-gallery] .slick-next { right: 20px; }

.rh-gallery[data-rh-gallery] .slick-prev::before,
.rh-gallery[data-rh-gallery] .slick-next::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--rh-navy, #063d5d);
	border-right: 2px solid var(--rh-navy, #063d5d);
}

.rh-gallery[data-rh-gallery] .slick-next::before {
	transform: translate( -65%, -50% ) rotate( 45deg );
}

.rh-gallery[data-rh-gallery] .slick-prev::before {
	transform: translate( -35%, -50% ) rotate( -135deg );
}

.rh-gallery[data-rh-gallery] .slick-prev:hover,
.rh-gallery[data-rh-gallery] .slick-next:hover {
	background: #fff;
}

.rh-gallery[data-rh-gallery] .slick-prev.slick-disabled,
.rh-gallery[data-rh-gallery] .slick-next.slick-disabled {
	opacity: 0.35;
	cursor: default;
}

/* -------------------------------------------------------------------------
 * Dots
 * ---------------------------------------------------------------------- */

.rh-gallery[data-rh-gallery] .slick-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 1em 0 0;
	padding: 0;
	list-style: none;
}

.rh-gallery[data-rh-gallery] .slick-dots li {
	margin: 0;
	padding: 0;
	line-height: 0;
}

.rh-gallery[data-rh-gallery] .slick-dots button {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rh-gallery-dot-color);
	font-size: 0;
	color: transparent;
	cursor: pointer;
}

.rh-gallery[data-rh-gallery] .slick-dots .slick-active button {
	background: var(--rh-gallery-dot-active);
}

/* -------------------------------------------------------------------------
 * Captioned variant — [rh_amenity_carousel]
 *
 * The gutter moves from the image's border to the slide's padding here, so the
 * hover overlay covers the photo exactly and doesn't bleed into the white gap.
 * ---------------------------------------------------------------------- */

.rh-gallery--captioned {
	--rh-amenity-scrim: rgba( 6, 61, 93, 0.55 );
	--rh-amenity-fade: 0.35s;
}

.rh-gallery--captioned .rh-gallery-slide {
	padding-right: var(--rh-gallery-gap);
}

.rh-gallery--captioned .rh-gallery-image,
.rh-gallery--captioned .slick-slide img {
	border-right: 0;
}

.rh-amenity {
	position: relative;
	margin: 0;
	overflow: hidden;
}

.rh-amenity-caption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	text-align: center;
	background: var(--rh-amenity-scrim);
	color: #fff;
	font-size: var(--rh-amenity-font-size, 18px);
	line-height: 1.25;
	opacity: 0;
	transition: opacity var(--rh-amenity-fade) ease;
}

.rh-amenity:hover .rh-amenity-caption,
.rh-amenity:focus-within .rh-amenity-caption,
.rh-gallery--captions-on .rh-amenity-caption {
	opacity: 1;
}

/* Touch devices have no hover, so a caption that only appears on hover would
   never be readable. Show it there instead. */
@media ( hover: none ) {

	.rh-gallery--captioned .rh-amenity-caption {
		opacity: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.rh-amenity-caption {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media ( max-width: 768px ) {

	.rh-gallery[data-rh-gallery]:not(.slick-initialized) .rh-gallery-slide {
		width: 100%;
	}

	/* Stays at 44px: the minimum comfortable tap target. Shrinking arrows on
	   the devices where they're tapped rather than clicked is backwards. */
	.rh-gallery[data-rh-gallery] {
		--rh-gallery-arrow-size: 44px;
	}

	.rh-gallery[data-rh-gallery] .slick-prev { left: 8px; }
	.rh-gallery[data-rh-gallery] .slick-next { right: 8px; }

	.rh-gallery--fixed-height .rh-gallery-image,
	.rh-gallery--fixed-height .slick-slide img {
		height: calc( var(--rh-gallery-height, 450px) * 0.7 );
	}
}

/* -------------------------------------------------------------------------
 * Grid layout — [rh_gallery layout="grid"]
 *
 * A separate element from .rh-gallery[data-rh-gallery] on purpose: that class is what the JS
 * hands to Slick, and a grid must never become a carousel. The lightbox is
 * shared — the JS picks grids up from data-rh-lightbox.
 *
 * Every value is a custom property set inline by the shortcode, so columns,
 * gap and tile shape come from the shortcode attributes:
 *
 *   [rh_gallery layout="grid" columns="3" gap="16" ratio="4/3"]
 * ---------------------------------------------------------------------- */

.rh-gallery-grid {
	display: grid;
	grid-template-columns: repeat( var(--rh-grid-columns, 3), minmax( 0, 1fr ) );
	gap: var(--rh-grid-gap, 16px);
}

.rh-gallery-grid .rh-gallery-cell {
	position: relative;
	min-width: 0; /* Without this a wide photo can stretch its grid column. */
}

/* Fixed-ratio tiles, so portrait and landscape photos still line up in even
   rows. ratio="none" on the shortcode drops this and keeps each photo's own
   proportions. */
.rh-gallery-grid .rh-gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--rh-grid-ratio, 4 / 3);
	object-fit: cover;
}

.rh-gallery-grid--natural .rh-gallery-image {
	height: auto;
	aspect-ratio: auto;
}

.rh-gallery-grid .rh-gallery-link {
	display: block;
	line-height: 0;
	cursor: zoom-in;
	text-decoration: none !important;
}

@media ( max-width: 1024px ) {

	.rh-gallery-grid {
		grid-template-columns: repeat( var(--rh-grid-columns-tablet, 2), minmax( 0, 1fr ) );
	}
}

@media ( max-width: 640px ) {

	.rh-gallery-grid {
		grid-template-columns: repeat( var(--rh-grid-columns-mobile, 1), minmax( 0, 1fr ) );
	}
}

/* -------------------------------------------------------------------------
 * Carousel image sizing — height follows WIDTH, at every screen size
 *
 * The height= attribute is a viewport height (60vh on this site). That was the
 * source of every "images are too tall" report: a slide's WIDTH comes from the
 * container, its height came from the viewport, and the two drift apart as the
 * window changes shape. Measured on this site:
 *
 *     375 x 812    slide 336 wide, 341 tall   (square crop of a landscape photo)
 *     808 x 1190   slide 238 wide, 714 tall   (a sliver)
 *    1034 x 1190   slide 246 wide, 714 tall   (a sliver)
 *
 * Two attempts to fix this with breakpoints just moved the problem to whatever
 * width sat on the other side of the line. So there is no breakpoint here now:
 * the image's height always comes from its own width via an aspect ratio, which
 * cannot drift because both sides come from the same place. Every slide is the
 * same width, so every slide is the same height — no gaps, no sliver.
 *
 * height= survives as a CAP (max-height), which is what it's useful for: it
 * stops a very wide screen turning the band into something enormous.
 *
 * Retune per gallery: ratio="16/9" for a shorter band, ratio="1/1" for squares.
 * .slick-track's WIDTH is still never touched — see the warning further up.
 * ---------------------------------------------------------------------- */

.rh-gallery[data-rh-gallery].rh-gallery--fixed-height .slick-list,
.rh-gallery[data-rh-gallery].rh-gallery--fixed-height .slick-track,
.rh-gallery[data-rh-gallery].rh-gallery--fixed-height .slick-slide,
.rh-gallery[data-rh-gallery].rh-gallery--fixed-height .slick-slide > div,
.rh-gallery[data-rh-gallery].rh-gallery--fixed-height .rh-gallery-slide,
.rh-gallery[data-rh-gallery].rh-gallery--fixed-height .rh-gallery-link {
	height: auto;
}

.rh-gallery[data-rh-gallery].rh-gallery--fixed-height .slick-slide img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--rh-gallery-ratio, 3 / 2);
	max-height: var(--rh-gallery-height, none);
	object-fit: cover;
}

/* No lightbox on touch: the photo is not a link, so it shouldn't look like one. */
.rh-gallery--no-lightbox .rh-gallery-link,
.rh-gallery-hero.rh-gallery--no-lightbox .rh-gallery-link {
	cursor: default;
}