/*
 * Krugio C1: front page (hero, product sections, parallax band).
 * Loaded on the front page only (Base need key "home", handle krugio-design-home).
 * Colours, radii, fonts and spacing come from the tokens in tokens.css only.
 * Markup comes from the block patterns in ../../patterns (core Cover, Group, Heading, Buttons, Shortcode).
 */

/* ==========================================================================
   Frame
   ========================================================================== */

.krugio-main--home {
	padding-block: var(--krugio-space-5) 0;
}

.krugio-main--home > .alignwide {
	max-width: none;
	margin-inline: var(--krugio-edge-gap);
}

/* ==========================================================================
   Sections (new products, featured products)
   ========================================================================== */

.krugio-main--home .krugio-section {
	max-width: var(--krugio-content-width);
	margin: var(--krugio-space-7) auto;
	padding-inline: var(--krugio-gutter);
	text-align: center;
}

.krugio-main--home .krugio-section:not(:has(.krugio-card)) {
	display: none;
}

/* Tablet grid has three columns: two full rows, six products of the eight (rule in docs/design/PRAVILA.md) */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.krugio-main--home .krugio-section .krugio-card:nth-child(n + 7) {
		display: none;
	}
}

.krugio-main--home .krugio-eyebrow {
	margin: 0 0 var(--krugio-space-2);
	color: var(--krugio-color-text-muted);
	font-size: var(--krugio-font-size-sm);
}

.krugio-main--home .krugio-section__title {
	margin: 0 0 var(--krugio-space-6);
	color: var(--krugio-color-primary);
	font-size: var(--krugio-font-size-3xl);
}

.krugio-main--home .krugio-section .krugio-grid {
	margin-bottom: 0;
	text-align: start;
}

/* ==========================================================================
   Hero and parallax band (core Cover blocks)
   ========================================================================== */

.krugio-hero,
.krugio-band {
	box-sizing: border-box;
	overflow: hidden;
	border-radius: var(--krugio-radius-box);
	background-color: var(--krugio-color-media-fallback);
	color: var(--krugio-color-on-media);
	text-align: center;
}

.krugio-hero {
	min-height: var(--krugio-hero-height);
}

.krugio-band {
	min-height: var(--krugio-band-height);
}

/* Dim layer: the block opacity (dimRatio) stays, the colour comes from the token instead of black. */
.krugio-hero .wp-block-cover__background,
.krugio-band .wp-block-cover__background {
	background-color: var(--krugio-color-media-overlay);
}

.krugio-hero .wp-block-cover__video-background,
.krugio-band .wp-block-cover__video-background {
	object-fit: cover;
}

/* Heading text keeps a soft token-coloured shadow so it stays readable on bright photos. */
.krugio-hero__title,
.krugio-band__title {
	margin: 0 0 var(--krugio-space-5);
	color: var(--krugio-color-on-media);
	font-weight: var(--krugio-weight-heading);
	line-height: var(--krugio-line-height-heading);
	text-shadow: 0 1px 14px color-mix(in srgb, var(--krugio-color-media-overlay) 70%, transparent);
}

.krugio-hero__title {
	max-width: 20ch;
	margin-inline: auto;
	font-size: 2rem;
}

.krugio-band__title {
	font-size: var(--krugio-font-size-3xl);
}

.krugio-hero .wp-block-buttons,
.krugio-band .wp-block-buttons {
	justify-content: center;
}

/* Buttons on media: filled primary (Base button look, set here so core's block button colours never win). */
.krugio-hero .wp-block-button__link,
.krugio-band .wp-block-button__link {
	border: var(--krugio-border-width) solid var(--krugio-color-primary);
	border-radius: var(--krugio-radius-button);
	background-color: var(--krugio-color-primary);
	color: var(--krugio-color-on-primary);
	font-size: var(--krugio-font-size-base);
	text-decoration: none;
}

.krugio-hero .wp-block-button__link:hover,
.krugio-band .wp-block-button__link:hover {
	border-color: var(--krugio-color-accent);
	background-color: var(--krugio-color-accent);
	color: var(--krugio-color-on-primary);
}

@media (min-width: 768px) {
	.krugio-hero__title {
		font-size: 2.25rem;
	}

	.krugio-main--home .krugio-section {
		margin-block: var(--krugio-space-8);
	}
}

@media (max-width: 479px) {
	.krugio-hero .wp-block-buttons,
	.krugio-band .wp-block-buttons {
		width: 100%;
	}

	.krugio-hero .wp-block-button,
	.krugio-band .wp-block-button {
		width: 100%;
	}

	.krugio-hero .wp-block-button__link,
	.krugio-band .wp-block-button__link {
		width: 100%;
	}
}

/* Parallax (core "Fixed background") only where there is a pointer and room: phones and touch devices scroll normally. */
@media (max-width: 767px), (hover: none) {
	.krugio-band.has-parallax,
	.krugio-band .has-parallax {
		background-attachment: scroll;
	}
}

/* Reduced motion: no autoplay video (fallback colour and overlay stay); core already turns parallax into a normal scroll. */
@media (prefers-reduced-motion: reduce) {
	.krugio-hero .wp-block-cover__video-background,
	.krugio-band .wp-block-cover__video-background {
		display: none;
	}
}