/* ==========================================================================
   Katma 2027 — home.css
   Homepage sections only. Enqueued on the front page and nowhere else
   (brief §22: do not load assets globally if one page needs them).
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

/* The ivory stays underneath the texture on purpose: it holds the section's
   colour while the image loads, and stands in unchanged if the file is ever
   missing. The texture is a photograph rather than a seamless tile, so it
   covers instead of repeating — it is low-contrast enough that scaling it
   across a wide viewport never shows softness, and it leaves the headline
   contrast where it was. Deliberately not preloaded: the calendar render is
   the hero's largest paint and should not have to share bandwidth with it. */
.hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg-warm);
	background-image: url("../../images/pattern-katma-placeholder.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: var(--space-xl);
	padding-block: var(--space-2xl);
}

.hero__copy > * + * {
	margin-top: var(--space-sm);
}

/* The hero is two columns, so the global display size overshoots its measure
   and breaks the headline into four lines. This keeps it to three. */
.hero__title {
	max-width: 19ch;
	font-size: clamp(2.5rem, 4.4vw, 4.25rem);
}

.hero__lead {
	max-width: 46ch;
	color: var(--color-muted);
}

.hero__actions {
	margin-top: var(--space-lg);
}

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

.hero__media {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 26rem;
	padding-inline-end: var(--space-2xl);
}

/* One rendered product shot. No CSS drop-shadow: the render carries its own
   and a second one underneath it reads as a smudge. Capped at 25rem — the file
   is 800px wide, so it stays sharp on a 2x screen at that size. */
.hero__product {
	width: min(100%, 25rem);
	height: auto;
}

/* Vertical "Vjera / Tradicija / Povjerenje" rule. */
.hero__values {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	padding-left: var(--space-sm);
	border-left: 2px solid var(--katma-red);
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--text-sm);
	color: var(--color-muted);
	white-space: nowrap;
}

/* --- Hero accent geometry ------------------------------------------------- */

/* Pushed well into the corner so it reads as a cropped fragment behind the
   product, not as a second logo competing with it. */
.hero__accent {
	top: -30%;
	right: -7%;
	width: clamp(150px, 19vw, 260px);
}

@media (max-width: 1024px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-2xl);
	}

	.hero__media {
		min-height: 0;
		padding-inline-end: 0;
	}

	.hero__values {
		display: none;
	}

	.hero__accent {
		width: 180px;
		opacity: 0.9;
	}
}

@media (max-width: 560px) {
	.hero__actions .btn {
		width: 100%;
	}
}

/* ==========================================================================
   Trust strip
   ========================================================================== */

.trust {
	border-block: var(--border-hairline);
}

.trust__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-md);
}

.trust__item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.trust__icon {
	flex: none;
	color: var(--katma-red);
}

.trust__icon svg {
	width: 28px;
	height: 28px;
}

.trust__label {
	font-size: var(--text-sm);
	font-weight: 500;
	line-height: var(--leading-snug);
}

@media (max-width: 900px) {
	.trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.trust__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Featured products
   The cards themselves are a global component now (.product-card in
   components.css) — shared with the shop and category archives.
   ========================================================================== */

.section-head__title {
	font-size: var(--text-xl);
}

/* ==========================================================================
   Heritage
   ========================================================================== */

.heritage {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg-warm);
	border-top: var(--border-hairline);
}

.heritage__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-xl);
	padding-block: var(--space-2xl);
}

.heritage__title {
	margin-top: var(--space-2xs);
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 500;
	line-height: var(--leading-tight);
	color: var(--katma-red);
}

.heritage__body > * + * {
	margin-top: var(--space-md);
}

.heritage__accent {
	top: -10%;
	right: -6%;
	width: clamp(160px, 22vw, 300px);
}

@media (max-width: 900px) {
	.heritage__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-md);
	}

	.heritage__accent {
		width: 150px;
		opacity: 0.85;
	}
}