/*--------------------------------------------------------------
# Hero Section Component
#
# Full-width hero with navy gradient, breadcrumb, H1, USPs, CTAs.
# Used on city landing pages and front page.
--------------------------------------------------------------*/

/* ==========================================================================
   Hero Base
   ========================================================================== */

.hero-city {
	background-color: var(--color-primary);
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: var(--color-text-inverse);
	padding: var(--space-10) 0 var(--space-8);
	position: relative;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.hero-city__breadcrumb {
	font-size: var(--text-sm);
	margin-bottom: var(--space-5);
}

.hero-city__breadcrumb a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.hero-city__breadcrumb a:hover {
	color: var(--color-accent);
}

.hero-city__breadcrumb .separator {
	color: rgba(255, 255, 255, 0.4);
	margin: 0 var(--space-2);
}

.hero-city__breadcrumb .current {
	color: var(--color-accent);
}

/* ==========================================================================
   Trust Indicator
   ========================================================================== */

.hero-city__trust {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
	font-size: var(--text-sm);
}

.hero-city__stars {
	color: var(--color-star);
}

.hero-city__available {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.hero-city__available-dot {
	width: 10px;
	height: 10px;
	background-color: var(--color-success);
	border-radius: var(--radius-full);
	display: inline-block;
	animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* ==========================================================================
   Heading & Subtitle
   ========================================================================== */

.hero-city__title {
	font-family: var(--font-heading);
	font-weight: var(--weight-bold);
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-3);
	color: var(--color-text-inverse);
}

.hero-city__subtitle {
	font-size: var(--text-lg);
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--space-6);
	max-width: 600px;
}

/* ==========================================================================
   USP Checks
   ========================================================================== */

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

.hero-city__checks li {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
}

.hero-city__checks li i {
	color: var(--color-accent);
	font-size: var(--text-lg);
	flex-shrink: 0;
}

/* ==========================================================================
   CTA Buttons
   ========================================================================== */

.hero-city__ctas {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.btn-phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: var(--color-emergency);
	color: var(--color-text-inverse);
	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-phone:hover {
	background-color: var(--color-emergency-dark);
	color: var(--color-text-inverse);
	transform: translateY(-2px);
}

.btn-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: #25D366;
	color: var(--color-text-inverse);
	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-whatsapp:hover {
	background-color: #1fb855;
	color: var(--color-text-inverse);
	transform: translateY(-2px);
}

/* ==========================================================================
   Insurance Badge
   ========================================================================== */

.hero-city__insurance {
	margin-top: var(--space-5);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: rgba(255, 255, 255, 0.1);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
}

.hero-city__insurance i {
	color: var(--color-accent);
}

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

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

	.hero-city__title {
		font-size: var(--text-2xl);
	}

	.hero-city__subtitle {
		font-size: var(--text-base);
	}

	.hero-city__checks {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}

	.hero-city__checks li {
		font-size: var(--text-sm);
	}

	.hero-city__ctas {
		flex-direction: column;
	}

	.btn-phone,
	.btn-whatsapp {
		justify-content: center;
		width: 100%;
	}
}