/**
 * Homepage — front-page.php. Section-by-section, top to bottom as the mockup.
 *
 * @package Geras_Custom
 */

/* ---------------------------------------------------------------
 * Shared across sections
 * ------------------------------------------------------------- */

/* Eyebrow label above every section heading on this page. */
.home-eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --space-10 );
	margin-bottom: var( --space-12 );
	font-size: var( --fs-12-5 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-widest );
	text-transform: uppercase;
	color: var( --color-heading );
	opacity: .85;
}

.home-eyebrow::before {
	content: "";
	flex: none;
	width: var( --space-26 );
	height: var( --space-8 );
	border-radius: var( --radius-pill );
	background: linear-gradient( 90deg, var( --c-honey-500 ), var( --c-honey-300 ) );
	box-shadow: 0 0 0 var( --space-2 ) var( --c-honey-100 );
}

.home-section-intro {
	max-width: 760px;
	margin: 0 auto var( --space-52 );
	text-align: center;
}

/* The "produkty" section intro sits closer to the tabs below it. */
.home-section-intro--tight {
	margin-bottom: var( --space-44 );
}

.home-section-intro p {
	margin-top: var( --space-20 );
	font-size: var( --fs-18-5 );
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.home-section-intro a {
	font-weight: var( --fw-bold );
	color: var( --color-heading );
	border-bottom: 2px solid var( --c-honey-500 );
}

/* Wave divider between sections. */
.home-wave {
	display: block;
	width: 100%;
	height: var( --space-34 );
}

.home-wave--tight {
	margin-bottom: calc( -1 * var( --space-2 ) );
}

.home-wave--overlap {
	margin: var( --space-96 ) 0 calc( -1 * var( --space-96 ) - var( --space-2 ) );
}

.home-wave--paper path {
	fill: var( --surface-page );
}

.home-wave--sand path {
	fill: var( --surface-sand );
}

.home-wave--honey path {
	fill: var( --c-honey-300 );
}

/* Decorative confetti dash, positioned per instance via modifiers. */
.home-confetti {
	position: absolute;
	width: var( --space-16 );
	height: var( --space-5 );
	border-radius: var( --radius-4 );
	pointer-events: none;
}

.home-confetti--honey { background: var( --c-honey-500 ); opacity: .85; }
.home-confetti--red   { background: var( --c-red-500 ); opacity: .6; }
.home-confetti--green { background: var( --c-green-500 ); opacity: .65; }
.home-confetti--cocoa { background: var( --c-cocoa-700 ); opacity: .3; }

/* Positions, one modifier per instance — hero (7), produkty (3), stats (4). */
.home-confetti--hero-1    { top: 14%; left: 6%;  transform: rotate( 35deg ); }
.home-confetti--hero-2    { top: 24%; left: 44%; transform: rotate( -20deg ); }
.home-confetti--hero-3    { top: 70%; left: 9%;  transform: rotate( 60deg ); }
.home-confetti--hero-4    { top: 82%; left: 38%; transform: rotate( -45deg ); }
.home-confetti--hero-5    { top: 10%; right: 8%; transform: rotate( -30deg ); }
.home-confetti--hero-6    { top: 86%; right: 14%; transform: rotate( 15deg ); }
.home-confetti--hero-7    { top: 44%; right: 3%; transform: rotate( 80deg ); }

.home-confetti--produkty-1 { top: 6%; left: 4%;   transform: rotate( 50deg ); }
.home-confetti--produkty-2 { top: 12%; right: 6%; transform: rotate( -35deg ); }
.home-confetti--produkty-3 { bottom: 8%; left: 7%; transform: rotate( 20deg ); }

.home-confetti--stats-1 { top: 20%; left: 6%;  transform: rotate( 40deg ); }
.home-confetti--stats-2 { top: 70%; left: 16%; transform: rotate( -25deg ); }
.home-confetti--stats-3 { top: 26%; right: 9%; transform: rotate( 65deg ); }
.home-confetti--stats-4 { top: 78%; right: 19%; transform: rotate( -50deg ); }

/* ---------------------------------------------------------------
 * 1. Hero
 * ------------------------------------------------------------- */

.home-hero {
	position: relative;
	background: var( --surface-sand );
	overflow: hidden;
}

.home-hero__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient( 720px 560px at 82% 30%, var( --c-honey3-a42 ), transparent 62% ),
		radial-gradient( 520px 420px at -6% 96%, var( --c-honey3-a25 ), transparent 60% );
	pointer-events: none;
}

.home-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	align-items: center;
	gap: var( --space-44 );
	padding-top: var( --space-36 );
	padding-bottom: var( --space-52 );
}

.home-hero__copy {
	max-width: 580px;
}

.home-hero__title {
	letter-spacing: var( --ls-tight );
	font-size: var( --fs-d3 );
	font-weight: var( --fw-590 );
}

/* The client's longer headline (Medové pláty / linecké koláčiky / perníčky)
   needs a step down from --fs-d3 to still fit the 580px copy column. */
.home-hero__title--long {
	font-size: var( --fs-d4 );
}

.home-hero__accent {
	position: relative;
	display: inline-block;
}

.home-hero__underline {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	width: 100%;
	height: var( --space-16 );
	overflow: visible;
}

.home-hero__underline path {
	fill: none;
	stroke: var( --c-honey-500 );
	stroke-width: 5;
	stroke-linecap: round;
	stroke-dasharray: 320;
	stroke-dashoffset: 320;
	animation: home-draw 1s .5s cubic-bezier( .6, 0, .3, 1 ) forwards;
}

.home-hero__lede {
	max-width: 640px;
	margin: var( --space-16 ) 0 var( --space-22 );
	font-size: var( --fs-16-5 );
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-12 );
	margin-bottom: var( --space-22 );
}

.home-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-10 );
}

.home-hero__visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.home-hero__frame {
	position: relative;
	width: min( 340px, 74% );
	margin-top: var( --space-6 );
}

.home-hero__glow {
	position: absolute;
	inset: -7%;
	border-radius: var( --radius-circle );
	background: radial-gradient( circle, var( --c-white-a90 ), var( --c-honey1-a35 ) 62%, transparent 72% );
}

.home-hero__photo {
	position: relative;
	width: 100%;
	height: auto;
	border-radius: var( --radius-circle );
	filter: drop-shadow( 0 34px 50px var( --c-cocoa9-a30 ) );
	animation: home-floaty 7s ease-in-out infinite;
}

.home-hero__ring {
	position: absolute;
	inset: -11%;
	/* Overrides the global svg max-width so the ring can overflow the frame. */
	max-width: none;
	animation: home-spin 26s linear infinite;
}

.home-hero__ring text {
	font-family: var( --font-body );
	font-weight: var( --fw-black );
	font-size: var( --fs-9-7 );
	letter-spacing: var( --ls-loose );
	text-transform: uppercase;
	fill: var( --color-heading );
	opacity: .75;
}

.home-hero__badge {
	position: absolute;
	right: -4%;
	bottom: 6%;
	display: flex;
	align-items: center;
	gap: var( --space-10 );
	padding: var( --space-9 ) var( --space-16 ) var( --space-9 ) var( --space-11 );
	border-radius: var( --radius-pill );
	background: var( --surface-page );
	box-shadow: var( --shadow-lift );
	font-weight: var( --fw-black );
	font-size: var( --fs-13 );
	color: var( --color-heading );
	animation: home-floaty 7s 1.2s ease-in-out infinite;
}

.home-hero__badge-num {
	display: grid;
	place-items: center;
	flex: none;
	width: var( --space-34 );
	height: var( --space-34 );
	border-radius: var( --radius-circle );
	background: var( --gradient-honey );
	font-size: var( --fs-12 );
	font-weight: var( --fw-heavy );
	color: var( --c-cocoa-900 );
}

@keyframes home-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes home-floaty {
	0%, 100% { transform: translateY( 0 ); }
	50%      { transform: translateY( -12px ); }
}

@keyframes home-spin {
	to { transform: rotate( 360deg ); }
}

/* ---------------------------------------------------------------
 * 2. Trust bar (USP)
 * ------------------------------------------------------------- */

.home-usp {
	background: var( --surface-page );
	padding: var( --space-66 ) 0 var( --space-30 );
}

.home-usp__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --gap-grid );
}

.home-usp__item {
	display: flex;
	align-items: flex-start;
	gap: var( --space-16 );
	padding: var( --space-24 ) var( --space-22 );
	border-radius: var( --radius-18 );
	background: var( --surface-raised );
	border: 1px solid var( --c-cocoa-a07 );
	box-shadow: var( --shadow-card );
	transition: transform var( --transition-base ), box-shadow var( --transition-base );
}

.home-usp__item:hover {
	transform: translateY( -4px );
	box-shadow: var( --shadow-lift );
}

.home-usp__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: var( --space-52 );
	height: var( --space-52 );
	border-radius: var( --radius-16 );
	background: var( --c-honey-100 );
	color: var( --color-heading );
}

.home-usp__num {
	color: var( --color-accent-deep );
	font-weight: var( --fw-heavy );
}

.home-usp__label {
	display: block;
	margin-bottom: var( --space-3 );
	font-size: var( --fs-16 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
	line-height: var( --lh-snug );
}

/* ---------------------------------------------------------------
 * 3. Sortiment — category tiles
 * The page owns the grid; the tile itself is in components/category-card.css,
 * because the About page renders the same four tiles.
 * ------------------------------------------------------------- */

.home-sortiment__grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: var( --space-26 );
}

/* ---------------------------------------------------------------
 * 4. Produkty — tabbed product grid
 * ------------------------------------------------------------- */

.home-produkty {
	position: relative;
	overflow: hidden;
}

.home-produkty__inner {
	position: relative;
}

.home-produkty__tabs-row {
	text-align: center;
	margin-bottom: var( --space-44 );
}

.home-tabs__panel[hidden] {
	display: none;
}

.home-product-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --space-26 );
}

/* WooCommerce prints its own <ul class="products …">; the grid lives on our wrapper. */
.home-product-grid .products {
	display: contents;
}

/* Mockup's homepage cards carry no meta/description line (title + CTA only) —
 * unlike category pages, which do show it. Hide it here without touching the
 * shared product-card template used elsewhere. */
.home-product-grid .product-card__meta {
	display: none;
}

/* "Zobraziť všetky" CTA under each tab panel — leads to the category archive. */
.home-produkty__more {
	margin-top: var( --space-40 );
	text-align: center;
}

/* ---------------------------------------------------------------
 * 5. Recepty
 * ------------------------------------------------------------- */

.home-recipe-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --space-26 );
}

.home-recipe-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var( --radius-28 );
	background: var( --surface-raised );
	border: 1px solid var( --c-cocoa-a08 );
	box-shadow: var( --shadow-card-alt );
	transition: transform .3s, box-shadow .3s;
}

.home-recipe-card:hover {
	transform: translateY( -7px );
	box-shadow: var( --shadow-float );
}

.home-recipe-card__figure {
	aspect-ratio: 16 / 10.5;
	overflow: hidden;
}

.home-recipe-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-recipe-card__date {
	position: absolute;
	top: var( --space-16 );
	left: var( --space-16 );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var( --space-58 );
	height: var( --space-62 );
	border-radius: var( --radius-16 );
	background: var( --surface-page );
	box-shadow: var( --shadow-lift );
	font-weight: var( --fw-heavy );
	color: var( --color-heading );
	line-height: 1.05;
}

.home-recipe-card__day {
	font-family: var( --font-display );
	font-size: var( --fs-21 );
}

.home-recipe-card__month {
	font-size: var( --fs-11 );
	font-weight: var( --fw-black );
	text-transform: uppercase;
	letter-spacing: var( --ls-caps );
	color: var( --color-accent-deep );
}

.home-recipe-card__body {
	padding: var( --space-22 ) var( --space-24 ) var( --space-26 );
}

.home-recipe-card__title {
	margin-bottom: var( --space-10 );
	font-size: var( --fs-21 );
	font-weight: var( --fw-560 );
	/* Same mockup quirk as .home-cat-card__title — inherited 1.65, not 1.12. */
	line-height: var( --lh-base );
}

/* ---------------------------------------------------------------
 * 6. Stats band — components/stats-band.css (shared with the About page)
 * 7. Contact CTA layout — component internals live in contact-cta.css
 * ------------------------------------------------------------- */

.home-contact {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: center;
	gap: var( --space-56 );
}

.home-contact__copy p {
	max-width: 640px;
	margin: var( --space-20 ) 0 var( --space-30 );
	font-size: var( --fs-18-5 );
}

/* ---------------------------------------------------------------
 * Mobile — derived per responsive.md mode 3 (mockup ships no @media)
 * ------------------------------------------------------------- */

/* Five category tabs stop fitting one pill row below the desktop container. */
@media ( max-width: 1023px ) {

	.home-produkty__tabs {
		flex-wrap: wrap;
		justify-content: center;
		border-radius: var( --radius-28 );
	}
}

@media ( max-width: 767px ) {

	.home-hero__inner {
		grid-template-columns: 1fr;
		gap: var( --space-36 );
		padding-bottom: var( --space-40 );
	}

	.home-hero__visual {
		order: -1;
	}

	.home-usp {
		padding: var( --space-44 ) 0 var( --space-20 );
	}

	.home-usp__grid,
	.home-sortiment__grid,
	.home-product-grid,
	.home-recipe-grid {
		grid-template-columns: repeat( 2, 1fr );
	}

	.home-contact {
		grid-template-columns: 1fr;
		gap: var( --space-40 );
	}

	/* Five category tabs no longer fit one row on a phone. */
	.home-produkty__tabs .tabs__btn {
		padding: var( --space-10 ) var( --space-20 );
		font-size: var( --fs-14 );
	}
}

@media ( max-width: 479px ) {

	/* Drop the hand-placed line breaks — natural wrapping fits better here. */
	.home-hero__title--long {
		font-size: var( --fs-d6 );
	}

	.home-hero__title--long br {
		display: none;
	}

	.home-usp__grid,
	.home-sortiment__grid,
	.home-product-grid,
	.home-recipe-grid {
		grid-template-columns: 1fr;
	}
}