/* ============================================================
   Kenklin — Homepage
   Sections: hero, trending brands, new in grid, collective CTA.
   Mobile-first. 0px corners. No shadows. Editorial gradients
   stand in for real imagery and are clearly marked TODO in HTML.
   ============================================================ */

.kk-home > section + section {
	margin-top: 60px;
}

@media (min-width: 1024px) {
	.kk-home > section + section {
		margin-top: var(--kk-section-gap); /* 80px */
	}
}

/* ============================================================
   1. HERO — desktop carousel, mobile single
   ============================================================ */

.kk-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--kk-primary);
	color: #fff;
}

@media (max-width: 767px) {
	.kk-hero { aspect-ratio: 4 / 5; }
}

/* ---- Slides ---- */

.kk-hero__slides {
	position: absolute;
	inset: 0;
}

.kk-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
}

.kk-hero__slide--active {
	opacity: 1;
	pointer-events: auto;
}

.kk-hero__slide picture,
.kk-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Per-slide tagline — three stacked lines in the upper-left of the slide.
   Lives inside the slide so it fades in/out with the slide opacity. */
.kk-hero__slide-tagline {
	position: absolute;
	top: 18%;
	left: 8%;
	display: flex;
	flex-direction: column;
	font-family: var(--kk-font-display);
	font-size: clamp(48px, 6vw, 96px);
	line-height: 0.95;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--kk-on-background);
	pointer-events: none;
}

@media (max-width: 767px) {
	.kk-hero__slide-tagline { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.kk-hero__slide { transition: none; }
}

/* ---- Overlay (eyebrow + CTAs) — bottom-left, static across slides ---- */

.kk-hero__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--kk-space-3);
	padding: var(--kk-container-margin-mobile);
	color: var(--kk-on-background);
	pointer-events: none;
}

@media (min-width: 1024px) {
	.kk-hero__overlay {
		padding: var(--kk-space-6) var(--kk-container-margin-desktop);
		max-width: 720px;
	}
}

.kk-hero__eyebrow {
	margin: 0;
	color: var(--kk-on-background);
}

.kk-hero__ctas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kk-space-1);
	pointer-events: auto;
}

@media (min-width: 768px) {
	.kk-hero__ctas {
		grid-template-columns: auto auto;
		justify-content: start;
		gap: var(--kk-space-2);
	}
}

.kk-hero__cta {
	min-height: 48px;
	padding-inline: var(--kk-space-3);
}

@media (min-width: 768px) {
	.kk-hero__cta {
		min-width: 200px;
	}
}

/* ---- Mobile brand mark — letters stacked top-to-bottom on the left edge ---- */

.kk-hero__mobile-brand {
	display: none;
}

@media (max-width: 767px) {
	.kk-hero__mobile-brand {
		position: absolute;
		top: 50%;
		left: 24px;
		transform: translateY(-50%);
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		font-family: var(--kk-font-display);
		font-size: clamp(44px, 11vw, 64px);
		line-height: 1;
		letter-spacing: 0;
		color: #fff;
		text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
		pointer-events: none;
	}

	/* Stretch each letter horizontally so they read wider/bolder
	   without growing taller. transform-origin keeps the left edge fixed. */
	.kk-hero__mobile-brand > span {
		display: inline-block;
		transform: scaleX(1.6);
		transform-origin: left center;
		-webkit-text-stroke: 1px #fff;
	}
}

/* ---- Mobile overrides (≤767px) ---- */

@media (max-width: 767px) {
	/* Hide the eyebrow text — image-only feel on mobile. */
	.kk-hero__eyebrow { display: none; }

	/* CTAs cluster on the left, below the KENKLIN stack — auto-width
	   instead of full-width grid. White fill is inherited from
	   kk-btn--secondary (no per-mobile color override needed). */
	.kk-hero__ctas {
		grid-template-columns: auto auto;
		justify-content: start;
		gap: 8px;
	}

	.kk-hero__cta {
		min-width: 0;
		min-height: 36px;
		padding: 0 14px;
		font-size: 12px;
		letter-spacing: 0.08em;
	}
}

/* ---- Nav (arrows + dots) ---- */

.kk-hero__nav {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.kk-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background-color: transparent;
	color: var(--kk-on-background);
	border: 1.5px solid var(--kk-on-background);
	border-radius: 50%;
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms ease, background-color 200ms ease, color 200ms ease;
	pointer-events: auto;
}

.kk-hero:hover .kk-hero__arrow { opacity: 1; }

.kk-hero__arrow:hover {
	background-color: var(--kk-on-background);
	color: #fff;
}

.kk-hero__arrow--prev { left: 24px; }
.kk-hero__arrow--next { right: 24px; }

.kk-hero__arrow:focus-visible {
	opacity: 1;
	outline: 2px solid var(--kk-on-background);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.kk-hero__arrow,
	.kk-hero__dots { display: none; }
}

.kk-hero__dots {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	pointer-events: auto;
}

.kk-hero__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background-color: rgba(255, 255, 255, 0.4);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	min-height: 0;
	transition: background-color 150ms ease, transform 150ms ease;
}

.kk-hero__dot:hover { transform: scale(1.2); }
.kk-hero__dot--active { background-color: #fff; }

.kk-hero__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* ============================================================
   2. TRENDING BRANDS — single-line continuous marquee.
   The track contains the brand list twice; a -50% translateX
   keyframe lands the second copy exactly where the first began,
   so the loop is seamless. Math depends on the duplication count
   being exactly 2 — don't change it.
   ============================================================ */

.kk-brands {
	border-top:    var(--kk-border-width) solid var(--kk-hairline);
	border-bottom: var(--kk-border-width) solid var(--kk-hairline);
	padding-block: var(--kk-space-2);
	background-color: var(--kk-background);
}

.kk-brands__eyebrow {
	text-align: center;
	color: var(--kk-on-surface-variant);
	margin: 0 0 var(--kk-space-1);
}

.kk-brands__viewport {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.kk-brands__row {
	display: flex;
	align-items: baseline;
	gap: var(--kk-space-3);
	width: max-content;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: kk-brands-marquee 120s linear infinite;
}

@media (min-width: 1024px) {
	.kk-brands__row { gap: var(--kk-space-6); }
}

.kk-brands__name {
	flex-shrink: 0;
	white-space: nowrap;
	color: var(--kk-on-background);
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.kk-brands__name { font-size: 28px; }
}

.kk-brands__name--sans {
	font-family: var(--kk-font-body);
	font-weight: 700;
}

.kk-brands__name--serif {
	/* Italic counterpoint to the bold sans — uses display family for character. */
	font-family: var(--kk-font-display);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0.04em;
}

@keyframes kk-brands-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 767px) {
	.kk-brands__row { animation-duration: 80s; }
}

@media (prefers-reduced-motion: reduce) {
	.kk-brands__row { animation: none; }
}

/* ============================================================
   3. NEW IN — product grid
   ============================================================ */

.kk-newin {
	padding-inline: var(--kk-container-margin-mobile);
}

@media (min-width: 1024px) {
	.kk-newin {
		padding-inline: var(--kk-container-margin-desktop);
	}
}

.kk-newin__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--kk-space-2);
}

.kk-newin__title {
	margin: 0;
	color: var(--kk-on-background);
}

.kk-newin__viewall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--kk-on-background);
	border-bottom: var(--kk-border-width) solid var(--kk-on-background);
	padding-bottom: 2px;
}

.kk-newin__viewall:hover { opacity: 0.65; }

/* ---- Grid ---- */

.kk-newin__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--kk-gutter); /* 16px mobile */
	row-gap: 32px;
}

@media (min-width: 1024px) {
	.kk-newin__grid {
		grid-template-columns: repeat(4, 1fr);
		column-gap: var(--kk-space-3); /* 24px desktop */
		row-gap: var(--kk-space-6);    /* 48px desktop */
	}
}

.kk-newin__empty {
	margin: 0;
	padding: var(--kk-space-5) 0 var(--kk-space-7);
	color: var(--kk-on-surface-variant);
	font-family: var(--kk-font-body);
	font-size: 15px;
	line-height: 24px;
	text-align: center;
}

/* Card base styles (.kk-card, .kk-card__media, shapes, meta, wishlist, tag)
   live in main.css — they're shared with the shop page. Page-specific
   tweaks for the homepage grid go below. */

/* ---- Homepage card hover (desktop) — subtle image scale ---- */

@media (hover: hover) and (pointer: fine) {
	.kk-newin .kk-card__media {
		transition: transform 400ms ease;
		will-change: transform;
	}
	.kk-newin .kk-card__link:hover .kk-card__media {
		transform: scale(1.03);
	}
}

/* ============================================================
   4. JOIN THE COLLECTIVE — black CTA band
   ============================================================ */

.kk-collective {
	background-color: var(--kk-primary);
	color: var(--kk-on-primary);
	min-height: 280px;
	display: flex;
	align-items: center;
}

@media (min-width: 1024px) {
	.kk-collective {
		min-height: 360px;
	}
}

.kk-collective__inner {
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
	padding: var(--kk-space-5) var(--kk-container-margin-mobile);
	text-align: center;
}

@media (min-width: 1024px) {
	.kk-collective__inner {
		padding-inline: var(--kk-container-margin-desktop);
	}
}

.kk-collective__eyebrow {
	margin: 0 0 var(--kk-space-2);
	color: var(--kk-on-primary);
}

.kk-collective__lede {
	margin: 0 0 var(--kk-space-3);
	color: var(--kk-on-primary);
}

.kk-collective__form {
	position: relative;
	display: flex;
	align-items: center;
	border-bottom: var(--kk-border-width) solid var(--kk-on-primary);
}

.kk-collective__input {
	flex: 1;
	min-height: var(--kk-touch-target);
	padding: var(--kk-space-1) 0;
	background-color: transparent;
	border: 0;
	color: var(--kk-on-primary);
	font-family: var(--kk-font-body);
	font-size: var(--kk-body-md-size);
	letter-spacing: var(--kk-brand-label-tracking);
	text-transform: uppercase;
	outline: none;
}

.kk-collective__input::placeholder {
	color: rgba(255, 255, 255, 0.22);
	letter-spacing: var(--kk-brand-label-tracking);
	text-transform: uppercase;
	font-size: var(--kk-brand-label-size);
	font-weight: 400;
}

.kk-collective__input:focus { color: var(--kk-on-primary); }

.kk-collective__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--kk-touch-target);
	height: var(--kk-touch-target);
	min-height: var(--kk-touch-target);
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--kk-on-primary);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.kk-collective__submit:hover { opacity: 0.65; }

.kk-collective__submit:focus-visible {
	outline: 2px solid var(--kk-on-primary);
	outline-offset: 2px;
}