/* =========================================================
   8Erikas — home.css
   Homepage-only sections: hero, perks, category grid, promo band.
   Loaded only on the front page (see inc/enqueue.php).

   Shared primitives (.wrap, .section*, .btn*, .pill, .product-grid,
   .product-card*, .badge*, .stars*) live in main.css so the shop
   archive and single product templates reuse the same definitions.

   PREKĖS KORTELĖ: šiame faile jos taisyklių NĖRA ir neturi atsirasti.
   Pagrindinio puslapio eilutės (template-parts/home/product-card.php) ir
   parduotuvės archyvas piešia tą patį `.product-card` markup'ą ir ima tą patį
   CSS iš main.css — būtent taip abu ir lieka sinchronizuoti. Anksčiau čia
   gulėjo dvi kortelės judesio taisyklės; kadangi home.css kraunamas TIK
   pagrindiniame puslapyje, jos veikė vienoje vietoje iš keturių. Dabar jos
   main.css.

   Kas čia lieka teisėta — tinklelio KONTEKSTAS, ne kortelė.
   ========================================================= */

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; overflow: hidden; }

.hero__glow {
	position: absolute;
	top: -6rem;
	right: 0;
	width: 24rem;
	height: 24rem;
	border-radius: 50%;
	background: var(--rose-100);
	opacity: 0.5;
	filter: blur(64px);
	pointer-events: none;
	z-index: 0;
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 2rem;
	padding-block: 3.5rem;
}

@media (min-width: 1024px) {
	.hero__inner {
		grid-template-columns: 1fr 1fr;
		gap: 3rem;
		padding-block: 5rem;
	}
}

.hero__copy { max-width: 36rem; }

.hero__title {
	font-family: var(--font-serif);
	font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 1.25rem 0 0;
	color: var(--stone-900);
	text-wrap: balance;
}

.hero__title .accent {
	font-style: italic;
	color: var(--rose-400);
}

.hero__text {
	margin: 1.25rem 0 0;
	max-width: 28rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--stone-600);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

.hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	font-size: 0.75rem;
	color: var(--stone-500);
}

.hero__trust li + li::before {
	content: "•";
	margin-inline-end: 1.5rem;
	color: var(--stone-300);
}

@media (max-width: 640px) {
	.hero__trust li + li { display: none; }
}

/* Hero imagery */
.hero__media { position: relative; }

.hero__figure {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--stone-100);
	box-shadow: var(--shadow-soft);
}

@media (min-width: 640px) {
	.hero__figure { aspect-ratio: 3 / 4; }
}

.hero__figure img,
.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__img--placeholder {
	background: linear-gradient(135deg, var(--stone-200), var(--rose-100));
}

.hero__accent-card {
	position: absolute;
	bottom: -1.25rem;
	left: -1rem;
	width: 11rem;
	margin: 0;
	overflow: hidden;
	border: 4px solid var(--stone-50);
	border-radius: 16px;
	background: var(--stone-100);
	box-shadow: var(--shadow-soft);
	transform: rotate(-4deg);
}

.hero__accent-card img {
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
}

.hero__note {
	position: absolute;
	top: 1.5rem;
	right: -0.75rem;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(6px);
	padding: 0.75rem 1rem;
	font-size: 0.75rem;
	box-shadow: var(--shadow-soft);
}

.hero__note p { margin: 0; }
.hero__note-title { font-weight: 600; color: var(--stone-900); }
.hero__note-text { color: var(--stone-500); }

@media (max-width: 767px) {
	.hero__accent-card,
	.hero__note { display: none; }
}

/* =========================================================
   PERKS
   ========================================================= */
.perks {
	border-block: 1px solid rgba(231, 229, 228, 0.7);
	background: rgba(255, 255, 255, 0.5);
}

.perks__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	padding-block: 2rem;
}

@media (min-width: 1024px) {
	.perks__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.perk {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.perk__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--stone-100);
	color: var(--stone-700);
}

.perk__body p { margin: 0; }
.perk__title { font-size: 0.875rem; font-weight: 500; color: var(--stone-900); }
.perk__text { font-size: 0.75rem; color: var(--stone-500); }

/* =========================================================
   CATEGORY DECK (parallax carousel)
   ---------------------------------------------------------
   Two layouts in one set of rules, switched by `.is-live`, which
   assets/js/home-carousel.js adds only once the deck has laid out:

     without .is-live — a natively scrollable, scroll-snapped flex strip.
                        This is what search engines, no-JS visitors and
                        anyone on prefers-reduced-motion get, and it is a
                        finished layout, not a degraded one.

     with .is-live    — cards leave the flow and become absolutely
                        positioned siblings on a shared 3D plane; every
                        per-frame value (transform, opacity, z-index) is
                        written inline by the script.

   The script owns transform/opacity/visibility/z-index and the deck's
   pixel height. Everything else below is CSS's, and the two never write
   the same property — that is what keeps a restyle from breaking the
   motion, and a retune from needing a stylesheet edit.
   ========================================================= */
/* The deck is full-bleed, so its cards deliberately overhang both edges and
   this section is what stops that becoming a horizontal page scrollbar.

   Two declarations, not one: `clip` is the correct primitive — it clips
   without creating a scroll container, so it cannot swallow a `position:
   sticky` descendant or be scrolled to by a stray focus() — and `hidden` is
   the fallback for engines that do not know it. Later wins where supported. */
.categories {
	padding-block: 3rem;
	overflow: hidden;
	overflow: clip;
}

.cat-deck__head { align-items: flex-end; margin-bottom: 0; }

.cat-deck__eyebrow {
	display: block;
	margin-bottom: 0.625rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent);
}

/* Larger and lighter than the shared .section__title: the deck is the one
   homepage band with no competing headline, so the display face gets room. */
.cat-deck__title {
	font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.cat-deck__hint {
	margin: 0 0 0.5rem;
	max-width: 19rem;
	font-size: 0.8125rem;
	line-height: 1.65;
	color: var(--color-muted);
}

@media (max-width: 640px) {
	.cat-deck__hint { max-width: none; margin-top: 0.75rem; }
}

/* ---------- The deck ---------- */
.cat-deck {
	/* Full-bleed by construction: a block child of a full-width section is
	   already exactly viewport-wide. No 100vw — that measures the viewport
	   INCLUDING the scrollbar gutter, so on any platform with classic
	   scrollbars it is ~15px wider than the page and guarantees the horizontal
	   scrollbar this layout exists to avoid. No negative margins either: they
	   would have to be re-derived from --container-padding at every
	   breakpoint. The template puts the head and foot in their own .wrap and
	   leaves the deck bare — that is the whole mechanism. */
	position: relative;
	width: 100%;
	margin-top: 2.5rem;
	outline: none;

	/* Fallback strip. Overridden wholesale by .is-live below. */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--container-padding);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* Inset, because an outset ring on a full-bleed element is exactly what the
   section's `overflow: clip` removes. */
.cat-deck:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -3px;
}

.cat-deck__track {
	display: flex;
	gap: 0.875rem;
	/* Fallback only: aligns the first card with the headline above it and
	   gives the last card somewhere to scroll to. Cleared once live, where
	   the cards are absolutely positioned against this box. */
	padding-inline: var(--container-padding);
}

@media (min-width: 720px) {
	.cat-deck__track { gap: 1.25rem; }
}

.cat-deck.is-live {
	/* perspective has to sit on the ancestor of the transformed cards, or
	   every rotateY flattens into a plain horizontal squash. */
	perspective: 1500px;
	perspective-origin: 50% 45%;
	overflow: visible;
	scroll-snap-type: none;
	touch-action: pan-y;
	cursor: grab;

	/* Second half of the edge treatment. home-carousel.js already ramps each
	   card's opacity over its own width, which is what stops whole cards
	   popping; this softens the last sliver, so a card's IMAGE dissolves into
	   the page instead of ending on a vertical line at the screen edge.

	   The mask sits on the perspective element rather than on the track: the
	   track carries `transform-style: preserve-3d`, and masking a preserve-3d
	   box flattens its children back onto one plane — which would silently
	   delete every rotateY in the deck. */
	/* Deliberately narrower than the sliced card the layout leaves at each
	   edge (EDGE_PEEK in home-carousel.js): the opacity ramp does the bulk
	   of the dissolve, and this only has to take the last sliver to zero.
	   Widen it past the slice and whole readable cards start dimming. */
	--cat-deck-fade: clamp(1rem, 3.5vw, 4.5rem);

	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--cat-deck-fade),
		#000 calc(100% - var(--cat-deck-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--cat-deck-fade),
		#000 calc(100% - var(--cat-deck-fade)),
		transparent 100%
	);
}

.cat-deck.is-live.is-dragging { cursor: grabbing; }

.cat-deck.is-live .cat-deck__track {
	position: absolute;
	inset: 0;
	display: block;
	transform-style: preserve-3d;
	/* Absolutely positioned children resolve against the PADDING box, so the
	   fallback strip's gutter would silently offset every card. */
	padding-inline: 0;
}

/* ---------- Card ---------- */
.cat-card {
	position: relative;
	flex: 0 0 clamp(9.5rem, 62vw, 13rem);
	aspect-ratio: 0.63;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--stone-200);
	scroll-snap-align: start;
	text-decoration: none;
	isolation: isolate;
}

@media (min-width: 720px) {
	.cat-card { flex-basis: 12rem; }
}

.cat-deck.is-live .cat-card {
	position: absolute;
	left: 0;
	top: 0;
	flex: none;
	/* Width, height and aspect all come from the script once live: the deck
	   divides its own measured width by the visible-card count, and an
	   aspect-ratio left standing here would fight that. */
	aspect-ratio: auto;
	transform-style: preserve-3d;
	will-change: transform;
	user-select: none;
	-webkit-user-select: none;
}

.cat-card__media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Oversized on purpose: the image layer is translated against the card as it
   crosses the viewport, and the overhang is what stops that travel exposing
   an edge. 128%/-14% covers the widest offset the script can produce. */
.cat-deck.is-live .cat-card__media {
	top: -5%;
	left: -14%;
	width: 128%;
	height: 110%;
	will-change: transform;
}

.cat-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
}

/* Two stops of dark at the bottom: the name sits over ≥60% black, which clears
   AA for white text regardless of what the photograph is doing. */
.cat-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(28, 25, 23, 0.62) 0%,
		rgba(28, 25, 23, 0.14) 42%,
		rgba(28, 25, 23, 0) 68%
	);
	pointer-events: none;
}

.cat-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.625rem;
	padding: 1.25rem 1.125rem 1.125rem;
}

.cat-card__name {
	font-family: var(--font-serif);
	font-size: 1.1875rem;
	font-weight: 400;
	line-height: 1.08;
	color: #fff;
	text-shadow: 0 1px 12px rgba(28, 25, 23, 0.35);
	text-wrap: balance;
}

@media (min-width: 720px) {
	.cat-card__name { font-size: 1.4375rem; }
}

/* The accent rule under the centred card. The script only toggles .is-lit;
   the sweep itself is this transition, so its speed is tunable here. */
.cat-card__rule {
	position: absolute;
	left: 1.125rem;
	right: 1.125rem;
	bottom: 0.75rem;
	height: 1px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cat-card.is-lit .cat-card__rule,
.cat-card:hover .cat-card__rule,
.cat-card:focus-visible .cat-card__rule { transform: scaleX(1); }

/* Drawn inside the card — an outset ring is clipped by overflow: hidden. */
.cat-card:focus-visible {
	outline: none;
	box-shadow:
		inset 0 0 0 3px #fff,
		inset 0 0 0 5px var(--color-accent);
}

/* ---------- Footer: dots, counter, shop link ---------- */
.cat-deck__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 2.125rem;
}

.cat-deck__nav {
	display: flex;
	align-items: center;
	gap: 1.375rem;
}

.cat-deck__dots {
	display: flex;
	align-items: center;
	gap: 0.5625rem;
}

/* The hit area is 26×14 while the mark is a 1.5px line: the dots sit directly
   under a draggable surface, so they need a target a thumb can find. */
.cat-deck__dot {
	appearance: none;
	border: 0;
	margin: 0;
	padding: 0;
	width: 26px;
	height: 14px;
	display: flex;
	align-items: center;
	background: none;
	cursor: pointer;
}

.cat-deck__dot::before {
	content: "";
	display: block;
	width: 100%;
	height: 1.5px;
	background: var(--stone-300);
	transition: background 300ms ease, height 300ms ease;
}

.cat-deck__dot.is-active::before {
	height: 3px;
	background: var(--color-accent);
}

.cat-deck__dot:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

.cat-deck__counter {
	flex-shrink: 0;
	white-space: nowrap;
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.12em;
	color: var(--color-muted);
}

/* .section__link is display:none under 640px (main.css), which would leave the
   footer flexbox with one child and the dots stranded mid-row. */
@media (max-width: 640px) {
	.cat-deck__foot { justify-content: flex-start; }

	/* Ten fixed 26px dots plus their gaps overrun a 358px phone gutter and
	   shove the counter off the edge, so below 640px the row divides the
	   space it actually has instead of demanding a fixed width. The 14px
	   height is left alone — that is the axis the thumb is least accurate
	   on, and it is what keeps these usable as targets once they narrow. */
	.cat-deck__nav { flex: 1 1 auto; min-width: 0; gap: 0.875rem; }
	.cat-deck__dots { flex: 1 1 auto; min-width: 0; gap: 0.375rem; }
	.cat-deck__dot { flex: 1 1 0; width: auto; min-width: 14px; max-width: 26px; }
}

/* Belt and braces: the script declines to enhance under reduced motion, but a
   visitor who flips the OS setting mid-visit keeps a still deck either way. */
@media (prefers-reduced-motion: reduce) {
	.cat-card__rule { transition: none; }
	.cat-deck__dot::before { transition: none; }
}

/* =========================================================
   PROMO BAND
   ========================================================= */
.promo-wrap { padding-block: 3.5rem; }

.promo {
	position: relative;
	overflow: hidden;
	border-radius: 32px;
	background: var(--stone-900);
	padding: 3.5rem 2rem;
	text-align: center;
	isolation: isolate;
}

@media (min-width: 640px) {
	.promo { padding: 5rem 4rem; }
}

.promo__blob {
	position: absolute;
	width: 16rem;
	height: 16rem;
	border-radius: 50%;
	filter: blur(64px);
	pointer-events: none;
	z-index: -1;
}

.promo__blob--rose  { top: -4rem; left: -4rem; background: rgba(251, 113, 133, 0.2); }
.promo__blob--amber { bottom: -4rem; right: -4rem; background: rgba(252, 211, 77, 0.2); }

.promo__eyebrow {
	margin: 0;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--stone-400);
}

.promo__title {
	font-family: var(--font-serif);
	font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.25rem);
	margin: 1rem 0 0;
	color: #fff;
	font-weight: 400;
}

.promo__code {
	display: inline-block;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	padding: 0.25rem 0.75rem;
	font-style: normal;
	color: var(--rose-200);
}

.promo__text {
	margin: 1rem auto 0;
	max-width: 28rem;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--stone-300);
}

.promo__btn { margin-top: 2rem; }

/* =========================================================
   Free-form editor content
   ========================================================= */
.home-content { padding-block: 3.5rem; }

/* Reading measure, expressed through the container tokens so the gutter still
   matches the header on a phone. */
.home-content .wrap { max-width: calc(var(--container-narrow) + var(--container-padding) * 2); }

/* =========================================================
   Motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	/* The category deck's own reduced-motion handling lives with the deck
	   (see CATEGORY DECK above) because it is behavioural, not cosmetic:
	   assets/js/home-carousel.js declines to enhance at all, so there is no
	   3D transform here left to neutralise.

	   .product-card taisyklės gyvena main.css — jos turi galioti ir
	   parduotuvėje, kur šis failas nekraunamas. */
}