/* Lindus Site Functions — Listing / Gallery / Reviews sections (includes/sections.php).
 * Styles for markup printed by the section shortcodes (Shortcode widgets can't carry Elementor element styles)
 * and the theme breakpoints Elementor lacks. Values: build/specs/listing.md, gallery.md, reviews.md.
 * Breakpoints follow the Elementor kit (tablet ≤1024, mobile ≤767) like the surrounding V4 element styles. */

/* ---- Theme breakpoint variables (xl 1200, sm 576, 480) ---- */
:root {
	--lsf-col-xl-8: 66.6667%;          /* col-10 col-xl-8 (listing inner column) */
	--lsf-col-xl-8-or-full: 66.6667%;  /* col-12 col-xl-8 (internal reviews slider column) */
	--lsf-reviews-pb: 6vw;             /* review box bottom padding (room for the dots) */
	--lsf-reviews-mb: 0px;
	--lsf-below-sm480-dir: row;        /* button groups stack (centered) below 480 */
}
@media (max-width: 1199px) {
	:root {
		--lsf-col-xl-8: 83.3333%;
		--lsf-col-xl-8-or-full: 100%;
		--lsf-reviews-pb: 8vw;
		--lsf-reviews-mb: 36px;
	}
}
@media (max-width: 575px) {
	:root { --lsf-below-sm-cols: 1fr; } /* gallery module: one card per row below 576 */
}
@media (max-width: 479px) {
	:root { --lsf-below-sm480-dir: column; }
}

/* Shortcode widgets holding section markup add no spacing of their own. */
.elementor .elementor-widget-shortcode:has(> .elementor-shortcode > .lsf-sc) {
	margin: 0;
	padding: 0;
	width: 100%;
}

/* ---- Card overlay icon (listing "View Project…", gallery "View Gallery", mosaic "Expand") ---- */
.lsf-card-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: #262b35;
	font-family: Rubik, sans-serif;
}
.lsf-card-icon svg {
	display: block;
	width: auto;
	height: 45px;
	margin: 0 0 5px 0;
}
.lsf-card-icon > span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	line-height: 11px;
	text-transform: uppercase;
}
/* Mosaic: the icon sits inside the zooming image layer; 1/1.2 at rest → net size 1 when hovered (theme 1.3 → 1). */
.lindus-mosaic .lsf-card-icon {
	transform: scale(0.8333);
}

/* ---- Listing card categories ---- */
.lsf-card-cats {
	display: flex;
	align-items: center;
	margin: 25px 0 20px 0; /* collapses with the title's 12.5px top margin → 20px, as in the theme */
	font-family: Rubik, sans-serif;
}
.lsf-cat-list {
	display: flex;
	flex-wrap: wrap;
}
.lsf-cat {
	margin: 0 15px 0 0;
	font-size: 12.5px;
	line-height: 20px;
	text-transform: uppercase;
}
.elementor .lsf-cat a {
	color: #8f8f8f;
	text-decoration: none;
}
.elementor .lsf-cat a:hover {
	color: #283891;
}
.lsf-design-line {
	width: 40px;
	min-width: 40px;
	height: 2px;
	background-color: rgba(143, 143, 143, 0.35);
}

/* ---- Global listing header ([lindus_listing part="header"], theme .section-top markup) ---- */
.lsf-listing-header {
	width: 80%;
	font-family: Rubik, sans-serif;
	color: #262b35;
}
.lsf-listing-header .kicker {
	color: #283891;
	font-size: 18px;
	line-height: 27px;
}
.elementor .lsf-listing-header h2,
.elementor .lsf-listing-header h3 {
	font-family: Rubik, sans-serif;
	color: inherit;
	text-transform: none;
}
.elementor .lsf-listing-header .kicker h3 {
	margin: 32.5px 0 13px 0;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.1875;
	letter-spacing: -0.02em;
}
.elementor .lsf-listing-header .section-header {
	margin: 0 0 0.5em 0;
	font-size: 46px;
	font-weight: 300;
	line-height: 1.125;
	letter-spacing: -0.02em;
	color: #262b35;
}
/* Stored "<h2>…</h2>" titles: the parser closes .section-header at the inner <h2> (as on live) → base h2 look. */
.elementor .lsf-listing-header h2:not(.section-header) {
	margin: 40px 0 20px 0;
	font-size: 40px;
	font-weight: 300;
	line-height: 1.125;
	letter-spacing: -0.02em;
	color: #262b35;
}
.elementor .lsf-listing-header .section-header:empty {
	margin: 0;
}
.lsf-listing-header strong,
.lsf-listing-header b {
	font-weight: 700;
}
.lsf-listing-header .section-desc {
	color: #4a4a4a;
	font-size: 18px;
	line-height: 27px;
}
.elementor .lsf-listing-header .section-desc p {
	margin: 0 0 0.75em 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.elementor .lsf-listing-header a {
	color: #007bff;
	text-decoration: none;
}
.elementor .lsf-listing-header a:hover {
	color: #0056b3;
}
.lsf-listing-header sup {
	position: relative;
	top: -0.25em;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}
@media (max-width: 1024px) {
	.lsf-listing-header .kicker { font-size: 16px; line-height: 24px; }
	.elementor .lsf-listing-header .kicker h3 { font-size: 23px; margin: 28.75px 0 11.5px 0; }
	.elementor .lsf-listing-header .section-header { font-size: 28px; }
	.elementor .lsf-listing-header h2:not(.section-header) { font-size: 28px; margin: 28px 0 14px 0; }
	.lsf-listing-header .section-desc { font-size: 16px; line-height: 24px; }
}
@media (max-width: 767px) {
	.lsf-listing-header { width: 100%; }
	.lsf-listing-header .kicker { font-size: 15px; line-height: 22.5px; }
	.elementor .lsf-listing-header .kicker h3 { font-size: 21px; margin: 26.25px 0 10.5px 0; }
	.elementor .lsf-listing-header .section-header { font-size: 25px; }
	.elementor .lsf-listing-header h2:not(.section-header) { font-size: 25px; margin: 25px 0 12.5px 0; }
	.lsf-listing-header .section-desc { font-size: 15px; line-height: 22.5px; }
}

/* ---- Gallery module card title ([lindus_card part="gallery_title"]) ---- */
.elementor a.lsf-gallery-title {
	display: inline;
	font-family: Rubik, sans-serif;
	font-size: 25px;
	font-weight: 400;
	line-height: 27px;
	color: #262b35;
	text-decoration: none;
	transition: color 0.4s;
}
.elementor a.lsf-gallery-title:hover {
	color: #a8c40b;
}
.elementor .lsf-gallery-title h3 {
	margin: 32.5px 0 13px 0;
	font-family: Rubik, sans-serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.1875;
	letter-spacing: -0.02em;
	color: inherit;
}
@media (max-width: 1024px) {
	.elementor a.lsf-gallery-title { line-height: 24px; }
	.elementor .lsf-gallery-title h3 { margin: 28.75px 0 11.5px 0; font-size: 23px; }
}
@media (max-width: 767px) {
	.elementor a.lsf-gallery-title { line-height: 22.5px; }
	.elementor .lsf-gallery-title h3 { margin: 26.25px 0 10.5px 0; font-size: 21px; }
}
.lsf-lightbox-items {
	display: none !important;
}

/* Mosaic reveal (theme .to-animate): sections.js adds lsf-reveal, then lsf-revealed when in view. */
.lindus-mosaic.lsf-reveal > * {
	opacity: 0;
	visibility: hidden;
	transform: translateY(50px);
	transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s;
}
.lindus-mosaic.lsf-reveal.lsf-revealed > * {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ---- Reviews ---- */
.lsf-stars {
	display: block;
	height: 27px;
	margin: 0 0 36px 0;
	line-height: 27px;
	text-align: center;
	color: #283891;
}
.lsf-stars svg {
	display: inline-block;
	width: 20.25px;
	height: 18px;
	margin: 0 5px 0 0;
	vertical-align: -2px;
}
.lsf-review-text {
	font-family: Rubik, sans-serif;
	color: inherit;
}
.elementor .lsf-review-text p {
	margin: 0 0 16.5px 0;
	font-size: 22px;
	font-weight: 300;
	font-style: italic;
	line-height: 27px;
	text-align: center;
	color: inherit;
}
.elementor .lsf-review-text a {
	color: inherit;
	text-decoration: underline;
}
@media (max-width: 1024px) {
	.lsf-stars { height: 24px; line-height: 24px; margin-bottom: 32px; }
	.lsf-stars svg { width: 18px; height: 16px; } /* the theme's icon font follows the body size: 18 / 16 / 15px */
	.elementor .lsf-review-text p { line-height: 24px; }
}
@media (max-width: 767px) {
	.lsf-stars { height: 22.5px; line-height: 22.5px; margin-bottom: 30px; }
	.lsf-stars svg { width: 16.875px; height: 15px; }
	.elementor .lsf-review-text p { font-size: 18px; line-height: 22.5px; margin-bottom: 13.5px; }
}

/* Slider dots (theme slick dots), appended to the box by sections.js. */
.lsf-slider-dots {
	position: absolute;
	left: 0;
	bottom: 2vw;
	width: 100%;
	margin-top: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}
.lsf-dot {
	display: block;
	width: 17px;
	height: 17px;
	margin: 0 3px;
	border-radius: 100%;
	background: rgba(143, 143, 143, 0.5);
	transition: all 0.1s ease;
	cursor: pointer;
}
.lsf-dot:hover {
	background: #8f8f8f;
}
.lsf-dot.lsf-dot--active {
	background: #283891;
}
@media (max-width: 991px) {
	.lsf-slider-dots { bottom: 5vw; }
}
/* Before Swiper takes over (or without JS) the track shows the first review only. */
.lindus-reviews-box [data-element_type="e-collection-loop"] {
	overflow: hidden;
}
.lindus-reviews-box .swiper-wrapper {
	align-items: stretch;
}
.lindus-reviews-box .swiper-slide {
	height: auto;
}

/* ---- Rich-text stand-in (only until convert/richtext.py is used everywhere): theme .section-desc cascade ---- */
.lsf-rich {
	font-family: Rubik, sans-serif;
	font-size: 18px;
	line-height: 27px;
	color: #4a4a4a;
}
.lsf-rich--charcoal { color: #262b35; }
.lsf-rich--dark { color: #fff; }
.lsf-rich--center { text-align: center; }
.elementor .lsf-rich p { margin: 0 0 0.75em 0; font-size: inherit; line-height: inherit; color: inherit; }
.elementor .lsf-rich h2 { margin: 1em 0 0.5em 0; font-family: Rubik, sans-serif; font-size: 40px; font-weight: 300; line-height: 1.125; letter-spacing: -0.02em; color: inherit; }
.elementor .lsf-rich h3 { margin: 1.25em 0 0.5em 0; font-family: Rubik, sans-serif; font-size: 26px; font-weight: 500; line-height: 1.1875; letter-spacing: -0.02em; color: inherit; }
.elementor .lsf-rich a { color: #007bff; text-decoration: none; }
.elementor .lsf-rich a:hover { color: #0056b3; }
.elementor .lsf-rich--dark a:hover { color: #ccc; }
.lsf-rich strong, .lsf-rich b { font-weight: 700; }
@media (max-width: 1024px) {
	.lsf-rich { font-size: 16px; line-height: 24px; }
	.elementor .lsf-rich h2 { font-size: 28px; }
	.elementor .lsf-rich h3 { font-size: 23px; }
}
@media (max-width: 767px) {
	.lsf-rich { font-size: 15px; line-height: 22.5px; }
	.elementor .lsf-rich h2 { font-size: 25px; }
	.elementor .lsf-rich h3 { font-size: 21px; }
}