/*--------------------------------------------------------------
# City Landing Page — Page-Specific Styles
#
# Conditionally loaded only on city-landing-page.php template.
# Covers: intro card, sidebar, service cards, nearby cities.
--------------------------------------------------------------*/

/* ==========================================================================
   Intro Card
   ========================================================================== */

.city-intro-card {
	background-color: var(--color-bg-light);
	border-left: 4px solid var(--color-accent);
	padding: var(--space-5);
	border-radius: var(--radius-md);
}

.city-intro-card__text {
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	margin: 0;
}

/* ==========================================================================
   Why Choose Us — Benefit List
   ========================================================================== */

.city-why-choose__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

.city-why-choose__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	background-color: var(--color-bg-light);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	font-size: var(--text-md);
	line-height: var(--leading-normal);
	color: var(--color-text);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.city-why-choose__list li:hover {
	transform: translateX(4px);
	box-shadow: var(--shadow-sm);
}

.city-why-choose__list li i {
	color: var(--color-success);
	font-size: var(--text-lg);
	flex-shrink: 0;
	margin-top: 2px;
}

/* ==========================================================================
   Services Grid — Service Cards
   ========================================================================== */

.services-city-section {
	padding: var(--space-6) 0;
}

.services-city-section__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-2xl);
	color: var(--color-primary);
	margin-bottom: var(--space-5);
}

.service-card {
	background-color: var(--color-bg);
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	height: 100%;
	position: relative;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.service-card__badge {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
}

.service-card__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-primary);
	color: var(--color-accent);
	border-radius: var(--radius-full);
	font-size: var(--text-xl);
	margin-bottom: var(--space-4);
}

.service-card__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	color: var(--color-primary);
	margin-bottom: var(--space-2);
}

.service-card__desc {
	font-size: var(--text-base);
	color: var(--color-text-light);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-3);
}

.service-card__link {
	color: var(--color-primary);
	font-weight: var(--weight-semibold);
	font-size: var(--text-sm);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.service-card__link:hover {
	color: var(--color-accent-dark);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.city-sidebar {
	position: sticky;
	top: 100px;
}

/* Emergency Card */
.sidebar-card {
	background-color: var(--color-bg);
	border: var(--border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	margin-bottom: var(--space-5);
}

.sidebar-card--emergency {
	background: linear-gradient(135deg, var(--color-emergency), var(--color-emergency-dark));
	color: var(--color-text-inverse);
	border: none;
	text-align: center;
}

.sidebar-card--emergency .sidebar-card__badge {
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.2);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-caps);
	margin-bottom: var(--space-3);
}

.sidebar-card--emergency .sidebar-card__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-xl);
	margin-bottom: var(--space-2);
}

.sidebar-card--emergency .sidebar-card__text {
	font-size: var(--text-sm);
	margin-bottom: var(--space-4);
	opacity: 0.9;
}

.sidebar-card--emergency .sidebar-card__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: var(--color-text-inverse);
	color: var(--color-emergency);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: transform var(--transition-fast);
}

.sidebar-card--emergency .sidebar-card__phone:hover {
	transform: scale(1.03);
}

/* Quote Card */
.sidebar-card--quote {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border: none;
	text-align: center;
}

.sidebar-card--quote .sidebar-card__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	margin-bottom: var(--space-2);
}

.sidebar-card--quote .sidebar-card__text {
	font-size: var(--text-sm);
	margin-bottom: var(--space-4);
	color: var(--color-text-inverse);
}

.sidebar-card--quote .sidebar-card__btn {
	width: 100%;
	justify-content: center;
}

/* Services List Card */
.sidebar-card--services .sidebar-card__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	color: var(--color-primary);
	margin-bottom: var(--space-4);
}

.sidebar-services-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sidebar-services-list li {
	margin-bottom: var(--space-3);
}

.sidebar-services-list a {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	color: var(--color-text);
	text-decoration: none;
	font-weight: var(--weight-semibold);
	transition: color var(--transition-fast);
}

.sidebar-services-list a:hover {
	color: var(--color-primary);
}

.sidebar-services-list a i {
	color: var(--color-accent);
	width: 20px;
	text-align: center;
}

/* Insurance Card */
.sidebar-card--insurance {
	background-color: var(--color-bg-light);
	text-align: center;
}

.sidebar-card--insurance .sidebar-card__icon {
	font-size: var(--text-3xl);
	color: var(--color-accent);
	margin-bottom: var(--space-3);
}

.sidebar-card--insurance .sidebar-card__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
	margin-bottom: var(--space-2);
}

.sidebar-card--insurance .sidebar-card__text {
	font-size: var(--text-sm);
	color: var(--color-text-light);
	margin: 0;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

.cta-city-section {
	background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, #020228 100%);
	color: var(--color-text-inverse);
	padding: var(--space-12) 0;
	position: relative;
	overflow: hidden;
}

/* Decorative shapes */
.cta-city-section__shapes {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cta-city-section__shape {
	position: absolute;
	border-radius: var(--radius-full);
	opacity: 0.04;
	background: var(--color-accent);
}

.cta-city-section__shape--1 {
	width: 500px;
	height: 500px;
	top: -200px;
	left: -150px;
}

.cta-city-section__shape--2 {
	width: 300px;
	height: 300px;
	bottom: -100px;
	right: -80px;
}

/* Badge */
.cta-city-section__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background: rgba(213, 173, 54, 0.15);
	border: 1px solid rgba(213, 173, 54, 0.25);
	color: var(--color-accent);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	margin-bottom: var(--space-4);
}

/* Heading */
.cta-city-section__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-3xl);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-6);
	color: var(--color-text-inverse);
}

/* Feature list */
.cta-city-section__features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cta-city-section__features li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
}

.cta-city-section__features li:last-child {
	margin-bottom: 0;
}

.cta-city-section__feature-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(213, 173, 54, 0.15);
	color: var(--color-accent);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	flex-shrink: 0;
	margin-top: 2px;
}

.cta-city-section__features li strong {
	color: var(--color-text-inverse);
}

/* Action Card */
.cta-city-section__card {
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	text-align: center;
}

.cta-city-section__card-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	opacity: 0.7;
	margin-bottom: var(--space-4);
}

/* CTA phone button */
.btn-phone--cta {
	width: 100%;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	font-size: var(--text-xl);
}

/* Divider */
.cta-city-section__card-divider {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-4) 0;
}

.cta-city-section__card-divider::before,
.cta-city-section__card-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.15);
}

.cta-city-section__card-divider span {
	font-size: var(--text-sm);
	opacity: 0.5;
	text-transform: lowercase;
}

/* Side-by-side buttons */
.cta-city-section__card-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
}

.btn-whatsapp--full,
.btn-quote--full {
	width: 100%;
	justify-content: center;
	font-size: var(--text-base);
	padding: var(--space-3) var(--space-4);
}

/* Insurance note */
.cta-city-section__card-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	margin-bottom: 0;
	font-size: var(--text-sm);
	opacity: 0.6;
}

.cta-city-section__card-note i {
	color: var(--color-accent);
	opacity: 1;
}

/* Legacy large phone button (kept for other templates) */
.btn-phone--large {
	font-size: var(--text-xl);
	padding: var(--space-5) var(--space-6);
}

/* Quote button base */
.btn-quote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-lg);
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: background-color var(--transition-fast), transform var(--transition-fast);
	border: none;
}

.btn-quote:hover {
	background-color: var(--color-accent-dark);
	color: var(--color-primary-dark);
	transform: translateY(-2px);
}

/* ==========================================================================
   Nearby Cities Section
   ========================================================================== */

.nearby-cities-section {
	padding: var(--space-10) 0;
	background-color: var(--color-bg-alt);
}

.nearby-cities-block__heading,
.region-cities-block__heading {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	color: var(--color-primary);
	margin-bottom: var(--space-5);
}

.nearby-cities-block__heading {
	font-size: var(--text-2xl);
}

.region-cities-block__heading {
	font-size: var(--text-xl);
	margin-top: var(--space-8);
}

/* Tag Cloud */
.nearby-cities-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.nearby-city-tag {
	display: inline-block;
	background-color: var(--color-bg);
	color: var(--color-primary);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	text-decoration: none;
	font-weight: var(--weight-semibold);
	border: var(--border);
	transition: all var(--transition-fast);
}

.nearby-city-tag:hover {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border-color: var(--color-primary);
}

/* Region City Links */
.region-cities-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.region-city-link {
	display: inline-block;
	color: var(--color-primary);
	font-weight: var(--weight-semibold);
	text-decoration: none;
	padding: var(--space-1) var(--space-3);
	transition: color var(--transition-fast);
}

.region-city-link:hover {
	color: var(--color-accent-dark);
	text-decoration: underline;
}

.region-city-link::after {
	content: '·';
	margin-left: var(--space-2);
	color: var(--color-border);
}

.region-city-link:last-child::after {
	content: '';
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
	.city-sidebar {
		position: static;
		margin-top: var(--space-8);
	}

	.cta-city-section__card {
		margin-top: var(--space-5);
	}
}

@media (max-width: 767.98px) {
	.cta-city-section {
		padding: var(--space-8) 0;
	}

	.cta-city-section__heading {
		font-size: var(--text-xl);
	}

	.cta-city-section__card {
		padding: var(--space-4);
	}

	.cta-city-section__card-buttons {
		grid-template-columns: 1fr;
	}

	.btn-phone--cta {
		font-size: var(--text-lg);
		padding: var(--space-3) var(--space-4);
	}

	.cta-city-section__feature-icon {
		width: 30px;
		height: 30px;
		font-size: var(--text-xs);
	}

	.cta-city-section__features li {
		font-size: var(--text-base);
	}
}