/**
 * SLMA Theme — home.css
 * Homepage-specific styles
 */

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
	background: linear-gradient(135deg, #f0f4ff 0%, #e0ecff 100%);
	padding: 80px 0;
	text-align: center;
	margin-bottom: 40px;
}

.hero-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
}

.hero-title {
	font-size: 52px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-primary);
	max-width: 800px;
}

.hero-subtitle {
	font-size: 18px;
	color: var(--text-secondary);
	max-width: 700px;
	margin: 0;
}

.hero-ctas {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.hero-trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 20px;
	max-width: 600px;
}

.trust-item {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-primary);
}

/* ============================================================
   SEARCH BAR SECTION
   ============================================================ */

.search-bar-section {
	background: var(--white);
	padding: 40px 0;
	border-bottom: 1px solid var(--border);
	margin-bottom: 60px;
}

.search-bar {
	display: flex;
	gap: 8px;
	max-width: 600px;
	margin: 0 auto;
}

.search-input {
	flex: 1;
	padding: 12px 16px !important;
	border-radius: 6px !important;
	border: 2px solid var(--border) !important;
	font-size: 16px !important;
}

.search-input:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px var(--accent-light) !important;
}

.search-bar .btn {
	padding: 12px 32px;
	min-width: 120px;
}

/* ============================================================
   SERVICES GRID SECTION
   ============================================================ */

.services-grid-section {
	padding: 60px 0;
	background: var(--white);
	border-bottom: 1px solid var(--border);
}

.services-grid-section h2 {
	text-align: center;
	margin-bottom: 40px;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 24px;
}

.service-card {
	background: var(--page-bg);
	padding: 32px 24px;
	border-radius: 10px;
	text-align: center;
	transition: all 0.2s ease;
	text-decoration: none;
	color: var(--text-primary);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.service-card:hover {
	background: var(--accent-light);
	border-color: var(--accent);
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

.service-card h3 {
	margin: 0;
	font-size: 18px;
	color: var(--text-primary);
}

.service-count {
	font-size: 13px;
	color: var(--text-muted);
}

/* ============================================================
   FEATURED AGENCIES SECTION
   ============================================================ */

.featured-agencies-section {
	padding: 60px 0;
	background: var(--page-bg);
}

.featured-agencies-section h2 {
	text-align: center;
	margin-bottom: 40px;
}

.agency-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ============================================================
   CARE TYPES SECTION
   ============================================================ */

.care-types-section {
	padding: 60px 0;
	background: var(--white);
	border-bottom: 1px solid var(--border);
}

.care-types-section h2 {
	text-align: left;
	margin-bottom: 40px;
}

.care-types-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.care-type-card {
	background: linear-gradient(135deg, #f0f4ff 0%, #e0ecff 100%);
	padding: 48px 24px;
	border-radius: 10px;
	text-align: center;
	transition: all 0.2s ease;
	text-decoration: none;
	color: var(--text-primary);
	border: 1px solid var(--accent-light);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-height: 200px;
}

.care-type-card:hover {
	background: linear-gradient(135deg, #e0ecff 0%, #d0e4ff 100%);
	border-color: var(--accent);
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

.care-type-card h3 {
	margin: 0;
	font-size: 20px;
	color: var(--text-primary);
}

.type-count {
	font-size: 13px;
	color: var(--text-muted);
}

/* ============================================================
   LOCATIONS SECTION
   ============================================================ */

.locations-section {
	padding: 60px 0;
	background: var(--page-bg);
}

.locations-section h2 {
	text-align: center;
	margin-bottom: 40px;
}

.locations-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.location-card {
	background: var(--white);
	padding: 32px 24px;
	border-radius: 10px;
	text-align: center;
	transition: all 0.2s ease;
	text-decoration: none;
	color: var(--text-primary);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.location-card:hover {
	border-color: var(--accent);
	box-shadow: var(--shadow-hover);
	transform: translateY(-4px);
}

.location-card h3 {
	margin: 0;
	font-size: 18px;
	color: var(--text-primary);
}

.location-count {
	font-size: 13px;
	color: var(--text-muted);
}

/* ============================================================
   HOW IT WORKS SECTION
   ============================================================ */

.how-it-works {
	padding: 60px 0;
	background: var(--white);
	border-bottom: 1px solid var(--border);
}

.how-it-works h2 {
	text-align: center;
	margin-bottom: 40px;
}

.steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.step-card {
	text-align: center;
	position: relative;
	padding-top: 80px;
}

.step-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, var(--accent), #0ea5e9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.step-number {
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 28px;
	background: var(--white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--accent);
	z-index: 1;
	font-size: 16px;
}

.step-card h3 {
	font-size: 18px;
	margin-bottom: 12px;
}

.step-card p {
	color: var(--text-secondary);
	font-size: 14px;
}

/* ============================================================
   CTA BANNER
   ============================================================ */

.cta-banner {
	background: linear-gradient(135deg, var(--accent) 0%, #0ea5e9 100%);
	color: var(--white);
	padding: 60px 0;
	text-align: center;
}

.cta-banner h2 {
	color: var(--white);
	margin-bottom: 24px;
}

.banner-ctas {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.cta-banner .btn {
	min-width: 200px;
}

/* ============================================================
   RESPONSIVE - TABLET
   ============================================================ */

@media (max-width: 768px) {
	.hero {
		padding: 60px 0;
	}

	.hero-title {
		font-size: 36px;
	}

	.hero-subtitle {
		font-size: 16px;
	}

	.hero-trust {
		grid-template-columns: 1fr;
		max-width: 100%;
	}

	.services-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.agency-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.care-types-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.locations-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.steps-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.hero-ctas,
	.banner-ctas {
		flex-direction: column;
		width: 100%;
	}

	.hero-ctas .btn,
	.banner-ctas .btn {
		width: 100%;
	}
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */

@media (max-width: 480px) {
	.hero {
		padding: 40px 0;
	}

	.hero-title {
		font-size: 24px;
	}

	.hero-subtitle {
		font-size: 14px;
	}

	.search-bar {
		flex-direction: column;
	}

	.search-bar .btn {
		width: 100%;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}

	.service-card {
		padding: 24px 16px;
	}

	.agency-grid {
		grid-template-columns: 1fr;
	}

	.care-types-grid {
		grid-template-columns: 1fr;
	}

	.care-type-card {
		min-height: 160px;
		padding: 32px 16px;
	}

	.locations-grid {
		grid-template-columns: 1fr;
	}

	.steps-grid {
		grid-template-columns: 1fr;
	}

	.step-card h3 {
		font-size: 16px;
	}

	.cta-banner {
		padding: 40px 0;
	}
}


/* ============================================================
   SERVICES SLIDER
   ============================================================ */

.services-slider-section {
    padding: var(--spacing-2xl) 0;
    background: var(--page-bg);
}

.services-slider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
}

.services-slider-header h2 {
    margin-bottom: 0;
}

.slider-nav {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.slider-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--white);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-primary);
    line-height: 1;
}

.slider-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

.slider-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: var(--border);
    color: var(--text-muted);
    background: var(--white);
}

.services-slider-viewport {
    overflow: hidden;
    position: relative;
}

/* Fade edges to hint at more cards */
.services-slider-viewport::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--page-bg));
    pointer-events: none;
    z-index: 2;
}

.services-slider-track {
    display: flex;
    gap: var(--spacing-lg);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    cursor: grab;
}

.services-slider-track:active {
    cursor: grabbing;
}

.service-slide-card {
    flex: 0 0 220px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.service-slide-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
    color: var(--text-primary);
}

.service-slide-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    color: var(--text-primary);
}

.service-slide-card .service-count {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 400;
}

/* Mobile: allow native scroll, hide arrows */
@media (max-width: 768px) {
    .services-slider-viewport {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }
    .services-slider-viewport::-webkit-scrollbar { display: none; }
    .services-slider-track {
        transform: none !important;
    }
    .service-slide-card {
        flex: 0 0 180px;
        scroll-snap-align: start;
    }
    .slider-nav {
        display: none;
    }
    .services-slider-viewport::after {
        display: none;
    }
}