/**
 * Homepage Features — frontend styles.
 *
 * Output by the [lpk_homepage_features] shortcode. Loaded conditionally
 * via wp_enqueue_style on is_front_page() (see functions.php).
 *
 * Carousel mechanics:
 *   - Free-scroll (scroll-snap-type: none, no auto-align)
 *   - Click-and-drag scroll (vanilla JS in homepage-features.js)
 *   - Scrollbar hidden cross-browser
 *   - 4th card peeks at ~30% on desktop, ~1.3 cards visible on mobile
 *
 * Hover-zoom:
 *   - Card frame stays static; inner <img> scales 1.06 over 500ms ease
 *   - overflow: hidden on card clips the zoomed image
 *
 * Text readability:
 *   - .lpk-hf__card--light  — light text + dark scrim (for dark photos)
 *   - .lpk-hf__card--dark   — dark text + light scrim (for light photos)
 *   - .lpk-hf__card--pill   — white pill chip (works on ANY photo)
 */

/* Section padding + container width are inherited from .lpk-section + .container
 * (defined in layout.css). The heading row uses .lpk-section__head /
 * .lpk-section__title / .lpk-section__link for consistency with the rest
 * of the homepage. This component file only owns the carousel + cards. */

/* ===== Carousel track ===== */
.lpk-hf__track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	overflow-y: hidden;
	/* Free-scroll: no snap, free movement anywhere */
	scroll-snap-type: none;
	-webkit-overflow-scrolling: touch;
	/* Hide scrollbar cross-browser */
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* legacy Edge / IE */
	cursor: grab;
	user-select: none;
	padding-bottom: 4px;
}
.lpk-hf__track::-webkit-scrollbar { display: none; }  /* Chrome / Safari / new Edge */
.lpk-hf__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }

/* When carousel mode is "never" — let cards flex as a normal grid */
.lpk-hf[data-carousel-mode="never"] .lpk-hf__track {
	overflow: visible;
	cursor: default;
	flex-wrap: wrap;
}
.lpk-hf[data-carousel-mode="never"] .lpk-hf__card {
	flex: 1 1 calc((100% - 14px * 2) / 3);
	min-width: 0;
}

/* ===== Card ===== */
.lpk-hf__card {
	flex: 0 0 calc((100% - 14px * 3) / 3.3);  /* desktop: 3 cards + ~30% peek of 4th */
	aspect-ratio: 1 / 1.12;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	color: #fff;
	background: var(--color-bg-surface, #F9FAFB);
	transition: box-shadow 300ms ease;
	display: block;
}
/* Frame stays fixed — no translateY pop-out (user spec). Only the inner image
 * zooms on hover (see .lpk-hf__img rule below). A subtle box-shadow remains
 * as the affordance that the card is interactive.
 *
 * Note: we deliberately do NOT gate this on @media (hover: none). Hybrid
 * Windows laptops with both a touchscreen and a mouse report primary
 * `hover: none` because the touchscreen is the "primary" pointing device,
 * which would otherwise suppress the hover effect on a perfectly capable
 * mouse user. CSS :hover only fires when an actual hover happens, so leaving
 * it ungated is safe on touch-only devices (brief tap → :hover → ends).
 */
.lpk-hf__card:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* Card image — fills the frame, hover-zoom on the img not the frame */
.lpk-hf__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	/* Own stacking context so the inner img's transform animates predictably
	 * regardless of other transformed ancestors on the page. */
	isolation: isolate;
}
.lpk-hf__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
	/* Force a compositor layer so the scale animates on the GPU and stays sharp. */
	backface-visibility: hidden;
}
.lpk-hf__card:hover .lpk-hf__img,
.lpk-hf__card:focus-visible .lpk-hf__img {
	transform: scale(1.06);
}

/* Scrim — gradient overlay for text readability */
.lpk-hf__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.lpk-hf__scrim--top    { background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 50%); }
.lpk-hf__scrim--bottom { background: linear-gradient(0deg,   rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 50%); }

/* Overlay (text container) */
.lpk-hf__overlay {
	position: absolute;
	top: 18px;
	left: 18px;
	right: 18px;
	z-index: 2;
}
.lpk-hf__title {
	font-family: var(--font-heading, 'Manrope', sans-serif);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.2;
	margin: 0;
	color: inherit;
}
.lpk-hf__sub {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 6px;
	opacity: 0.85;
}
.lpk-hf__price {
	font-size: 0.875rem;
	font-weight: 700;
	margin: 4px 0 0;
}

/* ===== Text treatments ===== */
/* Light text on dark scrim — for dark photos */
.lpk-hf__card--light .lpk-hf__title,
.lpk-hf__card--light .lpk-hf__price,
.lpk-hf__card--light .lpk-hf__sub {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Dark text on light scrim — for light photos */
.lpk-hf__card--dark .lpk-hf__title,
.lpk-hf__card--dark .lpk-hf__price { color: #1A1A1A; text-shadow: none; }
.lpk-hf__card--dark .lpk-hf__sub  { color: #4B5563; text-shadow: none; }
.lpk-hf__card--dark .lpk-hf__scrim--top    { background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 50%); }
.lpk-hf__card--dark .lpk-hf__scrim--bottom { background: linear-gradient(0deg,   rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 50%); }

/* White pill chip — for busy/mixed photos. Always readable. */
.lpk-hf__card--pill .lpk-hf__overlay {
	background: rgba(255,255,255,0.95);
	padding: 9px 13px;
	border-radius: 10px;
	left: 14px;
	top: 14px;
	right: auto;
	max-width: calc(100% - 28px);
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	display: inline-block;
}
.lpk-hf__card--pill .lpk-hf__title,
.lpk-hf__card--pill .lpk-hf__price { color: #1A1A1A; text-shadow: none; }
.lpk-hf__card--pill .lpk-hf__sub   { color: #6B7280; text-shadow: none; }
.lpk-hf__card--pill .lpk-hf__scrim { display: none; }

/* ===== Responsive breakpoints ===== */
/* Tablet (3 cards + peek) */
@media (max-width: 1024px) {
	.lpk-hf__card { flex: 0 0 calc((100% - 14px * 2) / 2.4); }
}
/* Mobile (1.3 cards visible) */
@media (max-width: 600px) {
	.lpk-hf { padding: var(--space-6, 24px) 0; }
	.lpk-hf__card {
		flex: 0 0 75%;
		aspect-ratio: 1 / 1.22;
	}
	.lpk-hf__overlay { top: 14px; left: 14px; right: 14px; }
	.lpk-hf__title { font-size: 1rem; }
	.lpk-hf__price { font-size: 0.8125rem; }
	/* In "never" mode on mobile, single-column stack */
	.lpk-hf[data-carousel-mode="never"] .lpk-hf__card {
		flex: 1 1 100%;
	}
}

/* ===== Accessibility — keyboard focus ===== */
.lpk-hf__card:focus-visible {
	outline: 3px solid var(--color-accent-mint, #00ECC2);
	outline-offset: 3px;
}
.lpk-hf__see-all:focus-visible {
	outline: 2px solid var(--color-accent-mint, #00ECC2);
	outline-offset: 2px;
}