/* Sister Tango Communities widget — base styles.
   No ID-based scoping here on purpose: Elementor's Style tab controls
   generate class-based selectors, and this file must stay at equal
   (or lower) specificity so those controls can always override it. */

.stc-section {
	background-color: #182238;
	padding: 90px 40px;
	font-family: 'Poppins', sans-serif;
	box-sizing: border-box;
	width: 100%;
}
.stc-section *,
.stc-section *::before,
.stc-section *::after {
	box-sizing: border-box;
}
.stc-wrap {
	width: 100%;
	max-width: 100%; /* no length restriction by default; editable via "Container Width" control */
	margin: 0 auto;
}
.stc-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	padding-bottom: 45px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.stc-header-left {
	max-width: 620px;
}
.stc-eyebrow {
	display: block;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-weight: 500;
	color: #d3a24e;
	font-size: 20px;
	margin-bottom: 12px;
	letter-spacing: 0.2px;
}
.stc-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: #f2ede2;
	font-size: 56px;
	line-height: 1.15;
	margin: 0;
}
.stc-intro {
	max-width: 460px;
	color: #a9adb8;
	font-weight: 300;
	font-size: 19px;
	line-height: 1.55;
	margin: 0;
	padding-bottom: 6px;
}
.stc-grid {
	display: grid;
	grid-template-columns: repeat(var(--stc-columns, 3), 1fr);
	column-gap: var(--stc-col-gap, 60px);
	row-gap: var(--stc-row-gap, 0px);
}
.stc-card {
	padding: 40px 0 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.stc-region {
	display: block;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-weight: 500;
	color: #d3a24e;
	font-size: 17px;
	margin-bottom: 6px;
}
.stc-name {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	color: #ffffff;
	font-size: 26px;
	margin: 0 0 14px;
	line-height: 1.3;
}
.stc-name a {
	color: inherit;
	text-decoration: none;
}
.stc-desc {
	color: #a9adb8;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}

/* Note: column count itself is controlled by the widget's "Columns" control
   (a responsive Elementor control using the --stc-columns CSS variable),
   not hardcoded here, so it stays editable per breakpoint from the editor. */

@media (max-width: 991px) {
	.stc-section { padding: 60px 24px; }
	.stc-title { font-size: 42px; }
	.stc-intro { max-width: 100%; }
}

@media (max-width: 600px) {
	.stc-section { padding: 48px 20px; }
	.stc-header { align-items: flex-start; }
	.stc-title { font-size: 32px; }
	.stc-eyebrow { font-size: 17px; }
	.stc-intro { font-size: 17px; }
	.stc-name { font-size: 22px; }
}