/**
 * Homepage Experience Engine (Phase 2.6, docs/DECISIONS.md ADR-023).
 * Every class here backs exactly one template part under
 * template-parts/home/ — see docs/COMPONENT_LIBRARY.md for the section
 * list. Only enqueued on the front page (inc/class-assets.php), since
 * nothing here is used anywhere else in the theme yet.
 */

/* ---------- Homepage <main> loses the generic page padding — every
   section below supplies its own .section/.container rhythm instead ---------- */

.site-main--home {
	padding: 0;
}

/* ---------- Hero ----------
   Since Phase 2.14 (docs/DECISIONS.md ADR-034): position:relative +
   overflow:hidden so the section-level .u-gradient-mesh background
   (assets/css/animations.css) and the scroll indicator stay contained
   within the hero's own box rather than bleeding into adjacent sections. */

.home-hero {
	position: relative;
	overflow: hidden;
	padding-block-end: var(--space-20);
}

.home-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: var(--space-12);
}

.home-hero__eyebrow {
	margin: 0 0 var(--space-3);
	color: var(--color-brand-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.home-hero__title {
	margin: 0 0 var(--space-5);
	font-family: var(--font-family-heading);
	font-size: clamp(var(--font-size-4xl), 4.5vw, var(--font-size-5xl));
	line-height: var(--line-height-tight);
	letter-spacing: -0.01em;
}

.home-hero__subtitle {
	max-width: 34rem;
	margin: 0 0 var(--space-8);
	color: var(--color-text-muted);
	font-size: var(--font-size-lg);
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-block-end: var(--space-6);
}

.home-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}

.home-hero__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 22rem;
}

.home-hero__visual-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	border-radius: var(--radius-xl);
	background: linear-gradient(160deg, var(--color-primary-50), var(--color-primary-100));
	box-shadow: var(--shadow-2xl);
}

.home-hero__visual-icon svg {
	width: 6rem;
	height: 6rem;
	color: var(--color-brand-primary);
	opacity: 0.6;
}

.home-hero__visual-card {
	position: absolute;
	inset-block-end: var(--space-8);
	inset-inline-start: -1.5rem;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	max-inline-size: 15rem;
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-lg);
	background-color: var(--color-background);
	box-shadow: var(--shadow-lg);
	z-index: 2;
}

/* Second floating card (trust badge) — opposite corner from the stat
   card so the two never overlap, at any viewport above the 64rem
   breakpoint where the visual column stacks full-width. */
.home-hero__visual-card--trust {
	inset-block-end: auto;
	inset-block-start: var(--space-6);
	inset-inline-start: auto;
	inset-inline-end: -1rem;
	max-inline-size: 12rem;
}

.home-hero__visual-card-title {
	font-weight: var(--font-weight-semibold);
	color: var(--color-heading);
	font-size: var(--font-size-sm);
}

.home-hero__visual-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: 0 0 auto;
	border-radius: var(--radius-full);
	background-color: var(--color-primary-50);
	color: var(--color-brand-primary);
}

.home-hero__visual-card-icon svg {
	width: 1.4rem;
	height: 1.4rem;
}

.home-hero__visual-card-body {
	display: flex;
	flex-direction: column;
}

.home-hero__visual-card-number {
	font-family: var(--font-family-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-heading);
	line-height: var(--line-height-tight);
}

.home-hero__visual-card-label {
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

@media (max-width: 64rem) {
	.home-hero__inner {
		grid-template-columns: 1fr;
	}

	.home-hero__visual {
		min-block-size: 18rem;
	}

	.home-hero__visual-card {
		inset-inline-start: 0;
	}

	.home-hero__visual-card--trust {
		inset-inline-end: 0;
	}
}

@media (max-width: 30rem) {
	/* Two overlapping floating cards is too tight on the smallest phones —
	   keep only the stat card, matching the "large white space" premium
	   requirement over cramming both in. */
	.home-hero__visual-card--trust {
		display: none;
	}
}

@media (max-width: 48rem) {
	.home-hero__title {
		font-size: var(--font-size-3xl);
	}
}

/* ---------- Quick contact buttons (hero + final CTA, reuses the
   header-cta menu — see template-parts/components/quick-contact-buttons.php) ---------- */

.quick-contact-buttons {
	margin-block-start: var(--space-4);
}

.quick-contact-buttons__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.quick-contact-buttons__list a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	background-color: var(--color-brand-primary);
	color: var(--color-text-inverse);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	transition: background-color var(--transition-fast) var(--ease-standard);
}

.quick-contact-buttons__list a:hover {
	background-color: var(--color-brand-primary-hover);
	color: var(--color-text-inverse);
}

.quick-contact-buttons__list a svg {
	width: 1.15rem;
	height: 1.15rem;
}

/* Same site-owner-assigned CSS Classes convention as .header-cta__list
   (docs/COMPONENT_LIBRARY.md §2) — cta-whatsapp/cta-emergency on the menu
   item, applied here too since this list renders the same menu. */
.quick-contact-buttons__list .cta-whatsapp a {
	background-color: var(--color-whatsapp);
}

.quick-contact-buttons__list .cta-whatsapp a:hover {
	background-color: var(--color-whatsapp-dark);
}

.quick-contact-buttons__list .cta-emergency a {
	background-color: var(--color-danger-500);
}

.quick-contact-buttons__list .cta-emergency a:hover {
	filter: brightness(0.9);
}

/* ---------- Process (timeline cards, Phase 2.15, docs/DECISIONS.md
   ADR-035) ---------- */

.process-steps {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Connecting line through the step numbers, desktop only — the row is
   short enough at 2/3 columns (tablet) that a partial line reads as a
   mistake rather than a timeline. */
@media (min-width: 64rem) {
	.process-steps::before {
		content: '';
		position: absolute;
		inset-inline: 12.5%;
		inset-block-start: 3.875rem;
		height: 2px;
		background: linear-gradient(to right, transparent, var(--color-primary-300) 15%, var(--color-primary-300) 85%, transparent);
		z-index: 0;
	}
}

.process-step {
	position: relative;
	z-index: 1;
	padding: var(--space-6) var(--space-5);
	text-align: center;
	background-color: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow var(--transition-base) var(--ease-standard),
		transform var(--transition-base) var(--ease-standard),
		border-color var(--transition-base) var(--ease-standard);
}

/* Specificity note: .process-step also carries .u-fade-up for its scroll
   entrance (Phase 2.15), whose .is-visible rule matches 3 classes; this
   selector is bumped to the same weight (.process-steps + .process-step +
   :hover) so hover-lift still applies after the entrance animation
   completes — home.css loads after animations.css, so the tie resolves
   in this rule's favor. */
.process-steps .process-step:hover {
	box-shadow: var(--shadow-card-hover);
	border-color: var(--color-primary-300);
	transform: translateY(-6px);
}

.process-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-block-end: var(--space-4);
	border-radius: var(--radius-full);
	background: var(--gradient-primary);
	box-shadow: var(--shadow-glow-primary);
	color: var(--color-text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
}

.process-step__title {
	margin: 0 0 var(--space-2);
}

.process-step__description {
	margin: 0;
	color: var(--color-text-muted);
}

/* ---------- Featured caregivers ---------- */

.caregiver-card {
	text-align: center;
}

.caregiver-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-block-end: var(--space-4);
	border-radius: var(--radius-full);
	background: var(--gradient-primary);
	color: var(--color-text-inverse);
	transition: transform var(--transition-base) var(--ease-bounce);
}

.caregiver-card__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.caregiver-card__title {
	margin: 0 0 var(--space-1);
}

.caregiver-card__experience {
	margin: 0 0 var(--space-4);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
}

.caregiver-card__skills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.caregiver-card__skills .chip {
	padding: var(--space-1) var(--space-3);
	font-size: var(--font-size-xs);
}

/* ---------- Service categories ---------- */

.home-categories__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- Cities: moved to assets/css/city.css in Phase 2.8
   (docs/DECISIONS.md ADR-026) — the homepage's Cities section now
   renders the same City Card component used by /cities/, so its styles
   need to load on every page with a city route, not just
   is_front_page(). See .home-cities__item etc. in city.css. ---------- */

/* ---------- Testimonials ---------- */

.testimonial-card__rating {
	display: flex;
	gap: var(--space-1);
	margin-block-end: var(--space-4);
	color: var(--color-accent-400);
}

.testimonial-card__rating svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

/* Rating stars scale in with a stagger, keyed off the same .is-visible
   class the scroll-reveal system adds to .testimonial-carousel__slide
   (Phase 2.14, docs/DECISIONS.md ADR-034) — so stars never animate for a
   card that's still off-screen. */
.js .testimonial-card__rating svg {
	transform: scale(0);
}

.js .is-visible .testimonial-card__rating svg {
	animation: agencycare-star-in var(--transition-base) var(--ease-bounce) forwards;
}

.js .is-visible .testimonial-card__rating svg:nth-child(1) { animation-delay: 0ms; }
.js .is-visible .testimonial-card__rating svg:nth-child(2) { animation-delay: 60ms; }
.js .is-visible .testimonial-card__rating svg:nth-child(3) { animation-delay: 120ms; }
.js .is-visible .testimonial-card__rating svg:nth-child(4) { animation-delay: 180ms; }
.js .is-visible .testimonial-card__rating svg:nth-child(5) { animation-delay: 240ms; }

@keyframes agencycare-star-in {
	to {
		transform: scale(1);
	}
}

/* ---------- Testimonial carousel (Phase 2.14, docs/DECISIONS.md ADR-034) ----------
   The track is a native CSS scroll-snap row — fully usable via touch/
   trackpad/drag with zero JS. assets/js/animations.js only adds the
   optional prev/next buttons and dot indicators on top of it. */

.testimonial-carousel__track {
	display: flex;
	gap: var(--space-6);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block-end: var(--space-2);
	margin-block-end: var(--space-6);
	scrollbar-width: none;
}

.testimonial-carousel__track::-webkit-scrollbar {
	display: none;
}

.testimonial-carousel__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	max-width: 100%;
}

@media (min-width: 48rem) {
	.testimonial-carousel__slide {
		flex-basis: calc(50% - var(--space-3));
	}
}

@media (min-width: 64rem) {
	.testimonial-carousel__slide {
		flex-basis: calc(33.333% - var(--space-4));
	}
}

.testimonial-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
}

.testimonial-carousel__prev-icon {
	transform: rotate(180deg);
}

.testimonial-carousel__dots {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.testimonial-carousel__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: none;
	border-radius: var(--radius-full);
	background-color: var(--color-border-strong);
	cursor: pointer;
	transition: background-color var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard);
}

.testimonial-carousel__dot.is-active {
	background-color: var(--color-brand-primary);
	transform: scale(1.3);
}

.testimonial-carousel__prev:disabled,
.testimonial-carousel__next:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.testimonial-card__quote {
	margin: 0 0 var(--space-4);
	color: var(--color-text);
}

.testimonial-card__author {
	margin: 0;
	font-weight: var(--font-weight-semibold);
}

.testimonial-card__service {
	display: block;
	margin-block-start: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-regular);
}

/* ---------- FAQ accordion styles moved to components.css (§ Accordion)
   in Phase 2.8 — see docs/DECISIONS.md ADR-026. home-faq-preview.php now
   uses the shared .faq__* classes so the same styling works on
   single-city.php too, without loading home.css there. ---------- */

/* ---------- Blog preview (magazine style, Phase 2.15, docs/DECISIONS.md
   ADR-035) ---------- */

.blog-preview-card__thumbnail {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.blog-preview-card__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow) var(--ease-standard);
}

.blog-preview-card:hover .blog-preview-card__thumbnail img {
	transform: scale(1.08);
}

.blog-preview-card__date {
	margin: 0 0 var(--space-2);
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.blog-preview-card__title {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-lg);
}

/* Homepage-only magazine grid — a larger "featured" first post, distinct
   from the plain grid used by Related Content on inner pages
   (template-parts/components/related-content.php's own
   .related-content__posts grid is untouched). Each post is wrapped in a
   .u-fade-up entrance-animation div (home-blog-preview.php), so that
   wrapper — not .blog-preview-card itself — is the actual grid item;
   :first-child targets it directly, descendant selectors still reach
   the card's own elements at any nesting depth. */
@media (min-width: 64rem) {
	.home-blog__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.home-blog__grid > *:first-child {
		grid-column: span 2;
	}

	.home-blog__grid > *:first-child .blog-preview-card__thumbnail {
		aspect-ratio: 21 / 9;
	}

	.home-blog__grid > *:first-child .blog-preview-card__title {
		font-size: var(--font-size-2xl);
	}
}

.blog-preview-card__title a {
	color: inherit;
	text-decoration: none;
}

.blog-preview-card__title a:hover {
	color: var(--color-brand-primary);
}

.blog-preview-card__excerpt {
	margin: 0 0 var(--space-4);
	color: var(--color-text-muted);
}

.blog-preview-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-brand-primary);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.blog-preview-card__link svg {
	width: 1rem;
	height: 1rem;
}

/* ---------- Final CTA ---------- */

.home-final-cta__panel {
	position: relative;
	overflow: hidden;
	padding: var(--space-16) var(--space-8);
	border-radius: var(--radius-xl);
	background: var(--gradient-primary);
	color: var(--color-text-inverse);
	text-align: center;
	box-shadow: var(--shadow-glow-primary);
}

.home-final-cta__title,
.home-final-cta__subtitle,
.home-final-cta__actions,
.home-final-cta .quick-contact-buttons {
	position: relative;
	z-index: 1;
}

.home-final-cta__title {
	margin: 0 0 var(--space-3);
	color: inherit;
}

.home-final-cta__subtitle {
	max-width: 34rem;
	margin: 0 auto var(--space-6);
	color: inherit;
	opacity: 0.92;
}

.home-final-cta__actions {
	display: flex;
	justify-content: center;
}

.home-final-cta .quick-contact-buttons {
	display: flex;
	justify-content: center;
}

@media (max-width: 48rem) {
	.home-final-cta__panel {
		padding: var(--space-10) var(--space-5);
	}
}