/**
 * CT Divi Property Carousel — frontend styles.
 *
 * Every configurable value is a CSS custom property declared on the carousel
 * root. The Divi module and the shortcode both write those properties onto the
 * root element, so there is one styling path for the builder preview, the
 * builder frontend output and the shortcode.
 *
 * Interaction values (250ms / ease transition, 5px radius, 4/3 image ratio,
 * 20px content padding, brightness(0.86) image treatment, hover background
 * swap) are derived from the existing Crowley Divi 5 card modules so that the
 * carousel feels like the rest of the site rather than a bolt-on.
 */

.ct-property-carousel {
	/* Columns per breakpoint. The names are historical — they were slides per
	   view while this was a carousel — and stay as they are because the Divi
	   module attributes and the shortcode attributes write them. */
	--ctpc-slides-desktop: 3;
	--ctpc-slides-tablet: 2;
	--ctpc-slides-phone: 1;
	--ctpc-slides: var(--ctpc-slides-desktop);

	--ctpc-gap: 24px;
	--ctpc-transition: 250ms;
	--ctpc-ease: ease;

	--ctpc-card-bg: #ffffff;
	--ctpc-card-hover-bg: var(--ctpc-card-bg);
	--ctpc-content-bg: transparent;
	--ctpc-content-hover-bg: var(--ctpc-content-bg);
	--ctpc-radius: 5px;
	--ctpc-border-color: transparent;
	--ctpc-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	--ctpc-hover-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
	--ctpc-hover-lift: -4px;
	--ctpc-content-padding: 20px;
	--ctpc-card-spacing: 16px;
	--ctpc-image-ratio: 4 / 3;
	/* Image treatment copied from the news grid cards: a resting darken that
	   deepens on hover, no overlay layer. */
	--ctpc-image-brightness: 0.86;
	--ctpc-image-hover-brightness: 0.58;

	--ctpc-title-color: inherit;
	--ctpc-title-hover-color: var(--ctpc-title-color);
	--ctpc-meta-color: inherit;
	--ctpc-icon-color: currentColor;
	--ctpc-separator-color: rgba(0, 0, 0, 0.18);
	--ctpc-icon-size: 20px;
	--ctpc-meta-gap: 12px;

	position: relative;
	width: 100%;
}

/* ------------------------------------------------------------------- Grid */

.ct-property-carousel__viewport {
	width: 100%;
}

/* Rows and columns: the column count comes from the breakpoint variable, rows
   are however many the post count needs. minmax(0, 1fr) rather than 1fr so a
   long unbroken title cannot push a column past its share. */
.ct-property-carousel__track {
	display: grid;
	grid-template-columns: repeat(var(--ctpc-slides), minmax(0, 1fr));
	align-items: stretch;
	gap: var(--ctpc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-property-carousel__slide {
	display: flex;
	min-width: 0;
	max-width: 100%;
}

/* ------------------------------------------------------------------- Card */

.ct-property-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	overflow: hidden;
	background-color: var(--ctpc-card-bg);
	border: 1px solid var(--ctpc-border-color);
	border-radius: var(--ctpc-radius);
	box-shadow: var(--ctpc-shadow);
	transition: background-color var(--ctpc-transition) var(--ctpc-ease);
}

.ct-property-carousel .ct-property-card:hover,
.ct-property-carousel .ct-property-card:focus-within {
	background-color: var(--ctpc-card-hover-bg);
}

.ct-property-card__link {
	display: flex;
	position: relative;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

/* The child theme fades every link to 80% on hover (`a:hover { opacity: .8 }`).
   The whole card is one anchor, so that washed the image out — it read as
   lightening on hover instead of the darken below. The event grid locks its
   own image link the same way. */
.ct-property-card__link:hover,
.ct-property-card__link:focus,
.ct-property-card__link:active {
	color: inherit;
	text-decoration: none;
	opacity: 1 !important;
}

/* ------------------------------------------------------------------ Image */

.ct-property-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: var(--ctpc-image-ratio);
	overflow: hidden;
	background-color: #f1f1f1;
}

.ct-property-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* !important on the filter for the same reason the news grid cards need it:
	   Divi emits module-specific filter rules, including a hover one, that
	   otherwise win and lighten the image back on hover. */
	filter: brightness(var(--ctpc-image-brightness)) !important;
	transform: none !important;
	transition: filter 0.25s ease !important;
}

/* Hover treatment of the news grid cards: the image darkens, nothing else
   moves — no zoom, no overlay layer. The transform lock defeats Divi's own
   image hover animations. */
.ct-property-carousel .ct-property-card:hover .ct-property-card__image img,
.ct-property-carousel .ct-property-card:focus-within .ct-property-card__image img {
	filter: brightness(var(--ctpc-image-hover-brightness)) !important;
	transform: none !important;
}

/* ---------------------------------------------------------------- Content */

.ct-property-card__content {
	display: flex;
	position: relative;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--ctpc-card-spacing);
	min-width: 0;
	padding: var(--ctpc-content-padding);
	background-color: var(--ctpc-content-bg);
	transition: background-color var(--ctpc-transition) var(--ctpc-ease);
}

.ct-property-carousel .ct-property-card:hover .ct-property-card__content,
.ct-property-carousel .ct-property-card:focus-within .ct-property-card__content {
	background-color: var(--ctpc-content-hover-bg);
}

.ct-property-card__title {
	margin: 0;
	padding: 0;
	color: var(--ctpc-title-color);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
	transition: color var(--ctpc-transition) var(--ctpc-ease);
}

.ct-property-carousel .ct-property-card:hover .ct-property-card__title,
.ct-property-carousel .ct-property-card:focus-within .ct-property-card__title {
	color: var(--ctpc-title-hover-color);
}

/* --------------------------------------------------------------- Meta row */

.ct-property-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ctpc-meta-gap);
	margin: auto 0 0;
	padding: 0;
	color: var(--ctpc-meta-color);
	font-size: 14px;
	line-height: 1.2;
	list-style: none;
}

.ct-property-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	white-space: nowrap;
}

.ct-property-card__meta-icon {
	display: inline-flex;
	flex: 0 0 var(--ctpc-icon-size);
	align-items: center;
	justify-content: center;
	width: var(--ctpc-icon-size);
	height: var(--ctpc-icon-size);
	color: var(--ctpc-icon-color);
}

.ct-property-card__meta-svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

/* No paint properties here on purpose: a CSS declaration beats the file's own
   presentation attributes and would erase a filled upload. Colour inheritance
   is handled at render time instead, by rewriting the file's colours to
   `currentColor` (Icons::prepare_svg), so uploads follow --ctpc-icon-color and
   its hover value like the built-in icons do. Only the box is imposed here,
   which lands an upload at the built-in icon size whatever its own was. */
.ct-property-card__meta-svg--custom,
.ct-property-card__meta-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ct-property-card__meta-value {
	font-variant-numeric: tabular-nums;
}

/*
 * The visible row is icon + number only. The word ("bedrooms", …) is kept in
 * the DOM for assistive technology and hidden with the plugin's own utility
 * class rather than the theme's, so the markup is self-contained.
 */
.ct-property-card__meta-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ct-property-card__meta-separator {
	display: inline-block;
	flex: 0 0 1px;
	width: 1px;
	height: 1.15em;
	background-color: var(--ctpc-separator-color);
}

/* ----------------------------------------------------------- Overlay mode */

/* Legibility scrim behind the text in Overlay layout, where the title and stats
   sit on top of the photo. Fixed neutral black, not a setting. */
.ct-property-card--overlay .ct-property-card__image::after {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.75) 0%,
		rgba(0, 0, 0, 0.55) 30%,
		rgba(0, 0, 0, 0) 90%
	);
	content: "";
	pointer-events: none;
}

.ct-property-card--overlay .ct-property-card__content {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	flex: 0 0 auto;
	background-color: var(--ctpc-content-bg);
	color: #ffffff;
}

/* Light-on-image defaults; an explicit module/shortcode value wins because it
   lands as an inline custom property on the carousel root. */
.ct-property-carousel--overlay {
	--ctpc-separator-color: rgba(255, 255, 255, 0.5);
	--ctpc-card-bg: transparent;
	--ctpc-shadow: none;
}

/* ------------------------------------------------------- Legacy controls */

/* The arrows and dots are no longer rendered. These rules only cover markup
   cached from an older version of the plugin, where the buttons would
   otherwise sit on top of the grid with nothing listening to them. */
.ct-property-carousel__arrow,
.ct-property-carousel__dots {
	display: none;
}

/* ------------------------------------------------------------ Empty state */

.ct-property-carousel--empty .ct-property-carousel__empty {
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--ctpc-separator-color);
	text-align: center;
}

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

@media (max-width: 980px) {
	.ct-property-carousel {
		--ctpc-slides: var(--ctpc-slides-tablet);
	}
}

@media (max-width: 767px) {
	.ct-property-carousel {
		--ctpc-slides: var(--ctpc-slides-phone);
		--ctpc-content-padding: 18px;
		--ctpc-icon-size: 18px;
		--ctpc-meta-gap: 10px;
	}

	.ct-property-card__title {
		font-size: 20px;
	}

	.ct-property-card__meta {
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ct-property-card,
	.ct-property-card__content,
	.ct-property-card__title {
		transition-duration: 1ms;
	}
}