/**
 * Home page sections (front-page.php, template-parts/home/).
 * Values from design/Phonehub Home.dc.html. Mobile first; desktop from 900px.
 */

/* ---------- Shared section layout ---------- */

.home-section {
	padding-block: 48px;
}

.home-section--tight {
	padding-top: var(--sp-2);
	padding-bottom: var(--sp-9);
}

.home-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-6);
}

.home-section__head--wrap {
	flex-wrap: wrap;
}

.home-section__title {
	font-size: var(--fs-h2);
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.home-section__link {
	padding: var(--sp-1) 0;
	color: var(--c-text);
	font-size: var(--fs-small);
	font-weight: 700;
}

.home-section__link:hover {
	color: var(--c-text);
}

[id^="home-"] {
	scroll-margin-top: 120px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (min-width: 900px) {
	.home-section {
		padding-block: 88px;
	}

	.home-section--tight {
		padding-top: var(--sp-4);
		padding-bottom: var(--sp-11);
	}
}

/* ---------- Hero ---------- */

.home-hero {
	background: var(--c-inv);
	color: #FFFFFF;
}

.home-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 36px;
	padding-top: var(--sp-8);
	padding-bottom: 48px;
}

.home-hero__copy {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.home-hero__badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: var(--sp-2);
	height: 32px;
	padding: 0 14px;
	border: 1px solid var(--c-inv-line);
	border-radius: var(--r-pill);
	color: var(--c-primary);
	font-size: 13px;
	font-weight: 600;
}

.home-hero__badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--c-primary);
}

.home-hero__title {
	font-size: var(--fs-display);
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.home-hero__highlight {
	color: var(--c-primary);
}

.home-hero__text {
	max-width: 30em;
	color: var(--c-inv-sub);
	font-size: 17px;
	text-wrap: pretty;
}

.home-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.home-hero__ctas .btn {
	padding-inline: 28px;
	font-size: var(--fs-body);
}

.home-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin: 0;
	padding: var(--sp-2) 0 0;
	list-style: none;
	color: var(--c-inv-text);
	font-size: var(--fs-small);
}

.home-hero__trust li {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.home-hero__trust .icon {
	color: var(--c-primary);
}

.home-hero__art {
	position: relative;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--sp-3);
	aspect-ratio: 1 / 1;
}

.home-hero__tile {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	background: repeating-linear-gradient(135deg, var(--c-hero-ph-1) 0 12px, var(--c-hero-ph-2) 12px 24px);
}

.home-hero__tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-hero__tile--main,
.home-hero__tile--tall {
	grid-row: 1 / span 2;
}

.home-hero__tile--price {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 18px;
	background: var(--c-primary);
	color: var(--c-on-primary);
	text-decoration: none;
}

.home-hero__tile--price:hover {
	color: var(--c-on-primary);
}

.home-hero__tile-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.home-hero__tile-price {
	font-family: var(--fd);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}

.home-hero__tile-caption {
	font-size: 13px;
	font-weight: 600;
}

@media (min-width: 900px) {
	.home-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: var(--sp-9);
		padding-top: var(--sp-10);
		padding-bottom: 88px;
	}

	.home-hero__text {
		font-size: 19px;
	}

	.home-hero__art {
		aspect-ratio: 1.1 / 1;
	}

	.home-hero__tile-price {
		font-size: 34px;
	}
}

/* ---------- Category tiles ---------- */

.home-categories__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.category-tile {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	border: 1.5px solid transparent;
	border-radius: var(--r-lg);
	background: var(--c-surface-2);
	color: var(--c-text);
	text-decoration: none;
	transition: border-color 200ms, transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift);
}

.category-tile:hover {
	border-color: var(--c-text);
	box-shadow: var(--sh-2);
	color: var(--c-text);
	transform: translateY(-3px);
}

.category-tile__image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 14px;
	background: repeating-linear-gradient(135deg, var(--c-tile-ph-1) 0 10px, var(--c-tile-ph-2) 10px 20px);
}

.category-tile__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.category-tile__label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	padding: 0 var(--sp-1) var(--sp-1);
}

.category-tile__name {
	font-size: 15px;
	font-weight: 700;
}

.category-tile__count {
	color: var(--c-muted);
	font-size: var(--fs-caption);
}

@media (min-width: 900px) {
	.home-categories__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--sp-4);
	}
}

/* ---------- Product tabs ---------- */

.tabs {
	display: flex;
	gap: var(--sp-1);
	padding: var(--sp-1);
	border-radius: var(--r-pill);
	background: var(--c-surface-2);
}

.tabs__tab {
	height: 44px;
	padding: 0 var(--sp-5);
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--c-muted);
	font-size: var(--fs-small);
	font-weight: 700;
	transition: background 200ms, color 200ms;
}

.tabs__tab:hover {
	color: var(--c-text);
}

.tabs__tab[aria-selected="true"] {
	background: var(--c-text);
	color: var(--c-on-ink);
}

.home-products__panel .woocommerce {
	width: 100%;
}

.home-products__more {
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.home-products__more .btn {
	padding-inline: 26px;
}

.skeleton-grid .skeleton-card:nth-child(n + 5) {
	display: none;
}

@media (min-width: 900px) {
	.skeleton-grid .skeleton-card:nth-child(n + 5) {
		display: flex;
	}
}

.skeleton-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-6) var(--sp-3);
}

@media (min-width: 900px) {
	.skeleton-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sp-8) var(--sp-5);
	}}

/* ---------- Promo countdown ---------- */

.home-promo__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: stretch;
	overflow: hidden;
	border-radius: var(--r-xl);
	background: var(--c-primary);
	color: var(--c-on-primary);
}

.home-promo__copy {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	padding: 28px var(--sp-5);
}

.home-promo__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.home-promo__title {
	font-size: 34px;
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.home-promo__text {
	max-width: 28em;
	font-size: var(--fs-body);
	font-weight: 500;
}

.countdown {
	display: flex;
	gap: var(--sp-2);
}

.countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 68px;
	padding: 10px 0 var(--sp-2);
	border-radius: 14px;
	background: var(--c-inv);
	color: #FFFFFF;
}

.countdown__value {
	font-family: var(--fd);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.countdown__label {
	margin-top: var(--sp-1);
	color: var(--c-inv-sub);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.home-promo__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.home-promo__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--btn-h-lg);
	padding: 0 28px;
	border-radius: var(--r-pill);
	background: var(--c-inv);
	color: #FFFFFF;
	font-size: var(--fs-body);
	font-weight: 700;
	text-decoration: none;
	transition: transform var(--dur-btn) var(--ease), box-shadow var(--dur-btn);
}

.home-promo__cta:hover {
	box-shadow: var(--sh-btn-ink);
	color: #FFFFFF;
	transform: translateY(-2px);
}

.home-promo__cta:active {
	box-shadow: none;
	transform: translateY(1px);
}

.home-promo__cta.is-loading {
	pointer-events: none;
}

.home-promo__cta.is-loading::before {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: phonehub-spin .7s linear infinite;
}

.home-promo__media {
	position: relative;
	min-height: 260px;
	background: repeating-linear-gradient(135deg, var(--c-promo-ph-1) 0 12px, var(--c-promo-ph-2) 12px 24px);
}

.home-promo__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 900px) {
	.home-promo__card {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}

	.home-promo__copy {
		padding: var(--sp-9);
	}

	.home-promo__title {
		font-size: 56px;
	}
}

/* ---------- Benefits ---------- */

.home-benefits__title {
	margin-bottom: var(--sp-6);
}

.home-benefits__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.benefit {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--sp-6);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	transition: border-color 200ms, transform var(--dur-lift) var(--ease);
}

.benefit:hover {
	border-color: var(--c-text);
	transform: translateY(-3px);
}

.benefit__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--c-primary-soft);
	color: var(--c-text);
}

.benefit__title {
	font-size: 19px;
	letter-spacing: -0.02em;
}

.benefit__text {
	color: var(--c-muted);
	font-size: 15px;
	text-wrap: pretty;
}

@media (min-width: 900px) {
	.home-benefits__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sp-4);
	}
}

/* ---------- Reviews carousel ---------- */

.home-reviews {
	background: var(--c-surface-2);
}

.home-reviews__heading {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.home-reviews__summary {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--c-muted);
	font-size: 15px;
}

.home-reviews__nav {
	display: flex;
	gap: var(--sp-2);
}

.home-reviews__track {
	display: flex;
	gap: var(--sp-4);
	padding-bottom: var(--sp-2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.home-reviews__track::-webkit-scrollbar {
	display: none;
}

.review-card {
	display: flex;
	flex: 0 0 86%;
	flex-direction: column;
	gap: var(--sp-4);
	margin: 0;
	padding: var(--sp-5);
	border-radius: var(--r-lg);
	background: var(--c-surface);
	scroll-snap-align: start;
}

.review-card__top {
	display: flex;
	gap: 14px;
}

.review-card__photo {
	position: relative;
	flex: none;
	width: 92px;
	height: 92px;
	overflow: hidden;
	border-radius: 14px;
	background: repeating-linear-gradient(135deg, var(--c-ph-3) 0 8px, var(--c-ph-2) 8px 16px);
}

.review-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.review-card__meta {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	min-width: 0;
}

.review-card__product {
	color: var(--c-muted);
	font-size: 13px;
}

.review-card__product strong {
	color: var(--c-text);
	font-weight: 600;
}

.review-card__verified {
	color: var(--c-success);
	font-size: var(--fs-caption);
	font-weight: 600;
}

.review-card__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.55;
	text-wrap: pretty;
}

.review-card__author {
	margin-top: auto;
	font-size: var(--fs-small);
	font-weight: 700;
}

.review-card__author span {
	color: var(--c-muted);
	font-weight: 500;
}

@media (min-width: 900px) {
	.review-card {
		flex-basis: calc((100% - 32px) / 3);
	}
}

/* ---------- Social strip ---------- */

.home-social__head {
	align-items: baseline;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
}

.home-social__title {
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.home-social__title span {
	color: var(--c-primary-ink);
}

.home-social__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-2);
}

.home-social__tile {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 14px;
	background: repeating-linear-gradient(135deg, var(--c-ph-3) 0 10px, var(--c-ph-2) 10px 20px);
	transition: transform var(--dur-swap) var(--ease), filter 200ms;
}

.home-social__tile:hover {
	filter: brightness(.94);
	transform: scale(1.03);
}

.home-social__tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 900px) {
	.home-social__title {
		font-size: 32px;
	}

	.home-social__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ---------- Newsletter ---------- */

.home-newsletter {
	padding-bottom: 48px;
}

.home-newsletter__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: var(--sp-7);
	padding: 28px var(--sp-5);
	border-radius: var(--r-xl);
	background: var(--c-inv);
	color: #FFFFFF;
}

.home-newsletter__copy {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.home-newsletter__title {
	font-size: var(--fs-h2);
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.home-newsletter__text {
	max-width: 30em;
	color: var(--c-inv-sub);
	font-size: var(--fs-body);
}

.home-newsletter__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.newsletter-form__field {
	display: flex;
	flex: 1 1 220px;
}

.home-newsletter .newsletter-form__input {
	height: var(--btn-h-lg);
	padding: 0 var(--sp-5);
	border: 1.5px solid var(--c-inv-line);
	border-radius: var(--r-pill);
	background: var(--c-inv-field);
	box-shadow: none;
	color: #FFFFFF;
}

.home-newsletter .newsletter-form__input:focus {
	border-color: var(--c-primary);
	box-shadow: none;
}

.home-newsletter .newsletter-form__input[aria-invalid="true"] {
	border-color: var(--c-inv-danger);
}

.newsletter-form__submit {
	padding-inline: 26px;
	font-size: var(--fs-body);
}

.newsletter-form__error {
	color: var(--c-inv-danger-text);
	font-size: var(--fs-small);
}

.newsletter-form__error[hidden],
.newsletter-form__success[hidden] {
	display: none;
}

.newsletter-form__success {
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--btn-h-lg);
	padding: 0 var(--sp-5);
	border-radius: var(--r-pill);
	background: var(--c-inv-field);
	font-weight: 600;
}

.newsletter-form__success span {
	color: var(--c-inv-success);
}

.newsletter-whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: var(--btn-h-lg);
	padding: 0 var(--sp-5);
	border: 1.5px solid var(--c-inv-line);
	border-radius: var(--r-pill);
	color: #FFFFFF;
	font-weight: 700;
	text-decoration: none;
	transition: border-color var(--dur-fast), background var(--dur-fast);
}

.newsletter-whatsapp::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c-whatsapp);
}

.newsletter-whatsapp:hover {
	border-color: var(--c-whatsapp);
	background: var(--c-whatsapp-soft);
	color: #FFFFFF;
}

@media (min-width: 900px) {
	.home-newsletter {
		padding-bottom: var(--sp-11);
	}

	.home-newsletter__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		padding: var(--sp-9);
	}
}

/* ---------- Tablet (600–899px) ---------- */

@media (min-width: 600px) and (max-width: 899px) {
	.home-hero__art {
		aspect-ratio: 1.8 / 1;
	}

	.home-categories__grid,
	.home-social__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.home-benefits__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.review-card {
		flex-basis: calc((100% - 16px) / 2);
	}

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

	.skeleton-grid .skeleton-card:nth-child(n + 4) {
		display: none;
	}
}