/* Fanki — home page. Depends on tokens.css + base.css. */

.fanki-hero {
	position: relative;
	background: var(--fanki-color-surface);
	overflow: hidden;
}

.fanki-hero .fanki-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--fanki-space-6);
	padding-block: var(--fanki-space-9);
	min-height: 480px;
}

.fanki-hero__eyebrow {
	display: inline-block;
	color: var(--fanki-color-primary);
	font-weight: var(--fanki-font-weight-semibold);
	font-size: var(--fanki-font-size-sm);
	text-transform: uppercase;
	letter-spacing: var(--fanki-letter-spacing-wide);
	margin-bottom: var(--fanki-space-3);
}

.fanki-hero__title {
	font-size: var(--fanki-font-size-display);
	letter-spacing: var(--fanki-letter-spacing-tight);
	max-width: 12ch;
	margin-bottom: var(--fanki-space-4);
}

.fanki-hero__body {
	color: var(--fanki-color-text-muted);
	max-width: 46ch;
	margin-bottom: var(--fanki-space-6);
}

.fanki-hero__actions {
	display: flex;
	gap: var(--fanki-space-3);
}

.fanki-hero__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--fanki-radius-lg);
	background: var(--fanki-color-surface-alt);
	overflow: hidden;
}

.fanki-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* When hero_show_buttons is off and an Image Link is set, front-page.php
   wraps the img in a real <a> — display:block (an <a> defaults to inline)
   so it still fills .fanki-hero__media's 100%/100% box instead of
   collapsing to the image's own intrinsic size, the same inline-element
   pitfall just fixed for .fanki-post-card__media (base.css). */
.fanki-hero__media a {
	display: block;
	width: 100%;
	height: 100%;
}

/* Hero 2 — full-width banner image, no text (inc/customizer.php's
   hero_style setting). Deliberately NOT wrapped in .fanki-container, so
   the image spans the full page width edge-to-edge instead of the site's
   usual max-width content column — that's the entire point of this
   layout ("just a cover image"), not an oversight. */

.fanki-hero--cover {
	aspect-ratio: 21 / 9;
}

.fanki-hero--cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.fanki-hero--cover {
		aspect-ratio: 4 / 3;
	}
}

/* Hero 3 — Slider (inc/customizer.php's hero_slides setting,
   fanki_render_hero_slider() in inc/template-tags.php). Same full-bleed
   width reasoning as Hero 2's .fanki-hero--cover above — the slide media
   spans edge-to-edge, only .fanki-hero-slide__content (text/buttons) is
   wrapped in .fanki-container so it lines up with the rest of the site's
   content column. Text/eyebrow/body/action classes are shared with Hero 1
   (.fanki-hero__eyebrow/__title/__body/__actions) but recolored light
   here specifically, since Hero 1 assumes a plain surface background and
   this sits over a photo + overlay instead. */

.fanki-hero-slider__track {
	position: relative;
}

.fanki-hero-slide {
	display: none;
}

.fanki-hero-slide.is-active {
	display: block;
}

.fanki-hero-slide__media {
	/* Explicit block since this element is sometimes rendered as a real <a>
	   (fanki_render_hero_slider(), when a slide has a Link set) instead of
	   a <div> — an <a> defaults to display:inline, which would silently
	   break this rule's own aspect-ratio, the exact bug just fixed for
	   .fanki-post-card__media/.fanki-hero__media. Harmless on the <div>
	   case (already block by default). */
	display: block;
	position: relative;
	aspect-ratio: 21 / 9;
	background-color: var(--fanki-color-surface-alt);
	background-repeat: no-repeat;
}

.fanki-hero-slide__overlay {
	position: absolute;
	inset: 0;
}

.fanki-hero-slide__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: var(--fanki-container-max-width);
	margin-inline: auto;
	padding-inline: var(--fanki-container-padding);
}

/* Only when a slide actually has a Link (.fanki-hero-slide--linked, set by
   fanki_render_hero_slider() when slide['link'] is non-empty) — lets a
   click on the "empty" parts of this text overlay (there's no visible
   background of its own, just centered text/buttons) fall through to the
   <a> behind it (.fanki-hero-slide__media) instead of being swallowed by
   this div just because it happens to span the full slide via inset:0.
   Restored on the real CTA buttons so they keep working normally — this
   is what avoids ever nesting an <a> inside another <a>, since media and
   content are siblings, not parent/child. Left off on slides with no
   Link so their eyebrow/title/body text stays normally selectable. */
.fanki-hero-slide--linked .fanki-hero-slide__content {
	pointer-events: none;
}

.fanki-hero-slide--linked .fanki-hero-slide__content .fanki-hero__actions a {
	pointer-events: auto;
}

.fanki-hero-slide__content .fanki-hero__eyebrow {
	color: var(--fanki-color-text-inverse);
	opacity: 0.9;
}

.fanki-hero-slide__content .fanki-hero__title {
	color: var(--fanki-color-text-inverse);
}

.fanki-hero-slide__content .fanki-hero__body {
	color: var(--fanki-color-text-inverse);
}

.fanki-hero-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fanki-overlay-light-subtle);
	border: 0;
	border-radius: var(--fanki-radius-full);
	color: var(--fanki-color-text-inverse);
}

.fanki-hero-slider__arrow:hover {
	background: var(--fanki-overlay-light-medium);
}

.fanki-hero-slider__arrow--prev {
	left: var(--fanki-space-4);
}

.fanki-hero-slider__arrow--next {
	right: var(--fanki-space-4);
}

.fanki-hero-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--fanki-space-5);
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: var(--fanki-space-2);
}

.fanki-hero-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fanki-overlay-light-strong);
	cursor: pointer;
	transition: width var(--fanki-transition-fast), border-radius var(--fanki-transition-fast);
}

.fanki-hero-slider__dot.is-active {
	width: 22px;
	border-radius: var(--fanki-radius-sm);
	background: var(--fanki-color-text-inverse);
}

.fanki-hero-slider__playpause {
	position: absolute;
	right: var(--fanki-space-4);
	bottom: var(--fanki-space-5);
	z-index: 2;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fanki-overlay-light-subtle);
	border: 0;
	border-radius: var(--fanki-radius-full);
	color: var(--fanki-color-text-inverse);
}

.fanki-hero-slider__playpause:hover {
	background: var(--fanki-overlay-light-medium);
}

@media (max-width: 768px) {
	.fanki-hero-slide__media {
		aspect-ratio: 4 / 3;
	}

	.fanki-hero-slider__arrow {
		width: 36px;
		height: 36px;
	}
}

/* USP strip */

.fanki-usp-strip {
	border-block: 1px solid var(--fanki-color-border);
}

/* USP Strip doesn't share .fanki-section's class (its own bespoke wrapper/
   grid), but still participates in the same alternating-background
   sequence via the shared .fanki-section--alt modifier — see base.css. */
.fanki-usp-strip.fanki-section--alt {
	background: var(--fanki-color-surface);
}

.fanki-usp-strip .fanki-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--fanki-space-5);
	padding-block: var(--fanki-space-6);
}

.fanki-usp {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-3);
}

.fanki-usp__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--fanki-radius-full);
	background: var(--fanki-color-primary-light);
	color: var(--fanki-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fanki-usp__title {
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-semibold);
}

.fanki-usp__body {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
}

/* Category grid */

.fanki-category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--fanki-space-5);
}

.fanki-category-card {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--fanki-radius-md);
	overflow: hidden;
	background: var(--fanki-color-surface);
}

.fanki-category-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--fanki-transition-base);
}

.fanki-category-card:hover img {
	transform: scale(1.05);
}

.fanki-category-card__label {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--fanki-space-4);
	background: linear-gradient(to top, var(--fanki-overlay-dark-medium), transparent);
	color: var(--fanki-color-text-inverse);
	font-weight: var(--fanki-font-weight-semibold);
}

/* Category product slider (Fanki: Homepage > Sections > Category Product
   Slider) — no JS carousel engine, just native scroll-snap plus two
   buttons calling scrollBy() (assets/js/category-slider.js). Overrides
   ul.products' base 4-column grid (base.css); the extra .fanki-product-
   slider class keeps this selector's specificity at least as high as
   ul.products' so the override reliably wins regardless of source order. */

ul.products.fanki-product-slider {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: var(--fanki-space-5);
	padding-bottom: var(--fanki-space-2);
	scrollbar-width: none;
}

ul.products.fanki-product-slider::-webkit-scrollbar {
	display: none;
}

ul.products.fanki-product-slider > .product {
	scroll-snap-align: start;
	flex: 0 0 260px;
}

.fanki-slider-actions {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-3);
	flex-shrink: 0;
}

.fanki-slider-nav {
	display: flex;
	gap: var(--fanki-space-2);
	flex-shrink: 0;
}

.fanki-slider-nav__btn {
	width: 36px;
	height: 36px;
	border-radius: var(--fanki-radius-full);
	border: 1px solid var(--fanki-color-border);
	background: var(--fanki-color-bg);
	color: var(--fanki-color-text);
	font-size: var(--fanki-font-size-lg);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--fanki-transition-fast), border-color var(--fanki-transition-fast), color var(--fanki-transition-fast);
}

/* Border+text shift to Primary on hover, same convention as this theme's
   other bordered circular icon-buttons (.fanki-quick-view-btn/
   .fanki-wishlist-btn, base.css) — previously only the background changed,
   which read as the borderless .fanki-icon-btn convention despite this
   button actually having a visible border at rest. */
.fanki-slider-nav__btn:hover {
	background: var(--fanki-color-surface);
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

/* Promo banner — Sections entries of type "Promo Banner" are grouped by
   fanki_render_promo_banner_group() (inc/template-tags.php): consecutive
   rows share one grid (auto-fit so 1, 2, or more all lay out sensibly),
   a single row gets the --single modifier for a full-width panel instead
   of stretching one narrow column. */

.fanki-promo-banner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--fanki-space-5);
}

.fanki-promo-banner--single {
	grid-template-columns: 1fr;
}

.fanki-promo-banner__panel {
	position: relative;
	border-radius: var(--fanki-radius-lg);
	overflow: hidden;
	min-height: 260px;
	display: flex;
	align-items: flex-end;
	padding: var(--fanki-space-6);
	background-size: cover;
	background-position: center;
	background-color: var(--fanki-color-surface-alt);
}

.fanki-promo-banner__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--fanki-overlay-dark-medium), transparent);
}

.fanki-promo-banner__content {
	position: relative;
	color: var(--fanki-color-text-inverse);
}

.fanki-promo-banner__content h3 {
	font-size: var(--fanki-font-size-xl);
	margin-bottom: var(--fanki-space-2);
}

/* Testimonials — one bordered/tinted outer card (same --fanki-color-primary
   border + --fanki-checkout-form-bg tint used by checkout/cart/FAQ's own
   cards) instead of 3 separate small boxes, with a vertical divider
   between items rather than a grid gap. Each item carries the SAME
   padding-inline as spacing from its divider — except the first item's
   left and the last item's right, which would otherwise double up with
   the outer card's own padding on those two edges only (no divider there
   to justify it), throwing the visual rhythm off compared to the even
   gap between items 1-2 and 2-3. Zeroing exactly those two removes the
   double-counted space so spacing reads consistent all the way across. */

.fanki-testimonials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--fanki-color-primary);
	border-radius: var(--fanki-radius-md);
	background: var(--fanki-checkout-form-bg);
	padding: var(--fanki-space-5);
}

.fanki-testimonial {
	border-left: 1px solid var(--fanki-color-border);
	padding-inline: var(--fanki-space-5);
}

.fanki-testimonial:first-child {
	border-left: 0;
	padding-left: 0;
}

.fanki-testimonial:last-child {
	padding-right: 0;
}

.fanki-testimonial__quote {
	color: var(--fanki-color-text-muted);
	margin-block: var(--fanki-space-3);
}

.fanki-testimonial__author {
	display: flex;
	align-items: center;
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
}

/* "Blog Posts" homepage section (fanki_render_section_blog_posts(), inc/
   template-tags.php) — a real 3-column grid, overriding the shared
   .fanki-post-grid's 2-column default (base.css, used by the blog index/
   archives/related posts) since this section's own default of 3 posts
   would otherwise leave the 3rd card alone on its own row. Same
   column-collapse steps as .fanki-product-grid (base.css). */

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

/* Shared .fanki-post-card__media's 16/10 (base.css) is tuned for the Blog
   page's much wider 2-column card — reused as-is at 3 columns it renders
   noticeably squat (a ~402px-wide card would only be ~251px tall).
   16/9 keeps it clearly landscape/photographic without the letterbox
   look, and stays visually distinct from Product Showcase's 1/1 square. */
.fanki-post-grid--home .fanki-post-card__media {
	aspect-ratio: 16 / 9;
}

@media (max-width: 1024px) {
	.fanki-hero .fanki-container {
		grid-template-columns: 1fr;
		padding-block: var(--fanki-space-7);
	}

	.fanki-usp-strip .fanki-container {
		grid-template-columns: repeat(2, 1fr);
	}

	.fanki-category-grid,
	.fanki-post-grid--home {
		grid-template-columns: repeat(2, 1fr);
	}

	.fanki-promo-banner,
	.fanki-testimonials {
		grid-template-columns: 1fr;
	}

	/* Stacked layout: the divider between items switches from a vertical
	   border-left (columns side by side) to a horizontal border-top (rows
	   stacked), and the zeroed edge follows the same logic rotated 90° —
	   the first item's top and the last item's bottom, not left/right. */
	.fanki-testimonial {
		border-left: 0;
		border-top: 1px solid var(--fanki-color-border);
		padding-inline: 0;
		padding-block: var(--fanki-space-5);
	}

	.fanki-testimonial:first-child {
		border-top: 0;
		padding-top: 0;
	}

	.fanki-testimonial:last-child {
		padding-bottom: 0;
	}
}

@media (max-width: 480px) {
	.fanki-usp-strip .fanki-container {
		grid-template-columns: 1fr;
	}

	.fanki-post-grid--home {
		grid-template-columns: 1fr;
	}

	.fanki-hero__title {
		font-size: var(--fanki-font-size-3xl);
	}
}