/**
 * Shared Figma design classes used by the Elementor page builds (_build/).
 * Layout, colour and type are set through Elementor controls; this file only
 * carries what controls cannot express: hover states, SVG icon colouring,
 * card-media overlays and a few utilities.
 */

/* ---------------------------------------------------------------- Buttons */
.sd-ebtn .elementor-button {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.sd-ebtn .elementor-button:hover {
	transform: translateY(-1px);
}
.sd-ebtn .elementor-button-icon svg {
	width: 18px;
	height: 18px;
	fill: none;
}
.sd-ebtn--link .elementor-button-icon svg {
	width: 16px;
	height: 16px;
}
.sd-ebtn--link .elementor-button:hover {
	transform: none;
}
.sd-ebtn--link .elementor-button:hover .elementor-button-icon {
	transform: translateX(3px);
}
.sd-ebtn--link .elementor-button-icon {
	transition: transform 0.2s ease;
}
.sd-ebtn--ghost .elementor-button:hover {
	background: transparent;
}

/* Elementor's kit rules use `.elementor-kit-N a` and win over single-class
   selectors, so SVG colouring is pinned with element+class selectors. */
.elementor-widget-button.sd-ebtn .elementor-button svg,
.elementor-widget-icon-list .elementor-icon-list-icon svg,
.elementor-widget-icon .elementor-icon svg {
	stroke: currentColor;
}
/* The plugin icon set is stroke-based (fill="none" in the file). Elementor's
   frontend CSS forces fill:currentColor on every icon svg, which turns them into
   blobs — pin fill:none for stroke icons everywhere. */
.elementor-widget-icon-list .elementor-icon-list-icon svg,
.elementor-icon svg[fill="none"],
.elementor-button-icon svg[fill="none"],
.elementor-icon-list-icon svg[fill="none"] {
	fill: none;
}

/* --------------------------------------------------------------- Pills */
.sd-pill .elementor-heading-title,
.sd-pill .elementor-icon-list-item {
	white-space: nowrap;
}
.sd-pill--icon .elementor-icon-list-items {
	display: inline-flex;
	align-items: center;
}
.sd-pill--icon .elementor-icon-list-icon svg {
	fill: none;
}
.sd-eyebrow .elementor-icon-list-text {
	text-transform: uppercase;
}

/* --------------------------------------------------------------- Cards */
.sd-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sd-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 44px -6px rgba(59, 36, 20, 0.16) !important;
}
/* Card image with the Figma bottom gradient tint. */
.sd-card-media {
	position: relative;
	overflow: hidden;
}
.sd-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(122, 31, 31, 0.15) 0%, rgba(43, 20, 16, 0.75) 100%);
}
.sd-card-media--soft::after {
	background: linear-gradient(180deg, rgba(43, 20, 16, 0.05) 0%, rgba(43, 20, 16, 0.5) 100%);
}
.sd-card-media--none::after {
	display: none;
}
.sd-card-media > .elementor-element {
	position: relative;
	z-index: 1;
}
.sd-card-media > .elementor-widget-image {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.sd-card-media > .elementor-widget-image img,
.sd-card-media .elementor-widget-image .elementor-widget-container,
.sd-card-media .elementor-widget-image figure {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sd-cover .elementor-widget-container,
.sd-cover figure,
.sd-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------ Utilities */
.sd-rotate-3 { transform: rotate(3deg); }
.sd-rotate--3 { transform: rotate(-3deg); }
.sd-rotate-45 { transform: rotate(45deg); }
.sd-z1 { z-index: 1; }
.sd-z2 { z-index: 2; }
.sd-nowrap .elementor-heading-title { white-space: nowrap; }
.sd-line-clamp-2 .elementor-widget-container,
.sd-line-clamp-2 .elementor-heading-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sd-line-clamp-3 .elementor-widget-container {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sd-round img { border-radius: 999px; }
.sd-avatar .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* Breadcrumb links */
.sd-crumbs .elementor-icon-list-item a { color: inherit; }
.sd-crumbs .elementor-icon-list-item:last-child .elementor-icon-list-text { color: var(--sd-secondary-saffron); }
.sd-page-hero--dark .sd-crumbs .elementor-icon-list-item:last-child .elementor-icon-list-text { color: var(--sd-accent-gold); }

/* Grid containers: make every direct child stretch so cards are equal height. */
.e-grid > .e-con,
.e-grid > .elementor-element {
	height: 100%;
}

/* Mobile: full-width buttons where the design stacks them. */
@media (max-width: 767px) {
	.sd-ebtn--full-m .elementor-button-wrapper,
	.sd-ebtn--full-m .elementor-button {
		width: 100%;
		display: flex;
		justify-content: center;
	}
}

/* Flex children must be allowed to shrink below their content width, otherwise a
   no-wrap pill or a long heading pushes the whole column (and page) wider than
   the viewport on small screens. */
.e-con.e-flex > .elementor-element,
.e-con > .e-con-inner > .elementor-element {
	min-width: 0;
}
@media (max-width: 767px) {
	.sd-pill .elementor-heading-title,
	.sd-pill .elementor-icon-list-item,
	.sd-pill .elementor-icon-list-text,
	.sd-nowrap .elementor-heading-title {
		white-space: normal;
	}
	.sd-pill--icon .elementor-icon-list-items { display: flex; }
	.sd-pill--icon .elementor-icon-list-item { display: flex; align-items: flex-start; }
	html, body { overflow-x: hidden; }
}

/* Map card (Figma "Map (Modasa)"): cream grid lines behind the pin. */
.sd-map-card {
	position: relative;
	background-image:
		linear-gradient(rgba(214, 195, 156, 0.6) 1px, transparent 1px),
		linear-gradient(90deg, rgba(214, 195, 156, 0.6) 1px, transparent 1px);
	background-size: 100% 32px, 12.5% 100%;
	background-position: 0 12px, 14px 0;
	cursor: pointer;
}
.sd-map-card .sd-map-card__pin .elementor-icon svg { stroke-width: 2; }
.sd-map-card__label .elementor-button { padding: 6px 14px; }
.sd-map-card__label .elementor-button-icon svg { width: 14px; height: 14px; }