/**
 * RECEPTY — recipe archive. Hero (stat chip + topic chips), result-count /
 * sort bar, the recipe card grid, a honey promo banner, and the page-specific
 * half of the contact CTA (the dark card itself is components/contact-cta.css).
 *
 * @package Geras_Custom
 */

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

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

.recepty-hero__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient( 760px 460px at 88% 18%, var( --c-honey3-a42 ), transparent 62% ),
		radial-gradient( 520px 380px at -6% 100%, var( --c-honey3-a24 ), transparent 60% );
	pointer-events: none;
}

.recepty-hero__confetti {
	position: absolute;
	z-index: 0;
	width: var( --space-16 );
	height: var( --space-5 );
	border-radius: var( --radius-4 );
}

.recepty-hero__confetti--1 {
	top: 20%;
	left: 5%;
	background: var( --c-honey-500 );
	opacity: .85;
	transform: rotate( 35deg );
}

.recepty-hero__confetti--2 {
	top: 72%;
	left: 12%;
	background: var( --c-red-500 );
	opacity: .55;
	transform: rotate( -20deg );
}

.recepty-hero__confetti--3 {
	top: 32%;
	left: 46%;
	background: var( --c-green-500 );
	opacity: .6;
	transform: rotate( 70deg );
}

.recepty-hero__confetti--4 {
	top: 80%;
	left: 38%;
	background: var( --c-cocoa-700 );
	opacity: .28;
	transform: rotate( -45deg );
}

.recepty-hero__confetti--5 {
	top: 16%;
	right: 10%;
	background: var( --c-honey-500 );
	opacity: .85;
	transform: rotate( -30deg );
}

.recepty-hero__inner {
	position: relative;
	z-index: 1;
	padding: var( --space-26 ) 0 var( --space-58 );
}

.recepty-hero__grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	align-items: end;
	gap: var( --space-48 );
	margin-top: var( --space-22 );
}

.recepty-hero__lead {
	max-width: 640px;
}

/* Shared "eyebrow" pill used on the hero, the promo banner and the contact
   intro — a bigger, gradient-filled, ringed one-off of .section-label
   (same technique as .kontakt-hero__eyebrow on page-kontakt.php). */
.recepty-eyebrow {
	margin-bottom: var( --space-12 );
	letter-spacing: var( --ls-widest );
}

.recepty-eyebrow::before {
	width: var( --space-26 );
	height: var( --space-8 );
	background: linear-gradient( 90deg, var( --c-honey-500 ), var( --c-honey-300 ) );
	box-shadow: var( --ring-focus );
}

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

.recepty-hero__underline {
	position: relative;
	display: inline-block;
}

.recepty-hero__underline em {
	font-style: italic;
	font-weight: var( --fw-540 );
	color: var( --color-accent-deep );
}

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

.recepty-hero__underline-svg path {
	fill: none;
	stroke: var( --c-honey-500 );
	stroke-width: 5;
	stroke-linecap: round;
}

.recepty-hero__intro {
	max-width: 600px;
	margin-top: var( --space-18 );
	font-size: var( --fs-18-5 );
}

.recepty-hero__content {
	margin-top: var( --space-18 );
}

.recepty-hero__aside {
	display: flex;
	flex-direction: column;
	gap: var( --space-14 );
}

.recepty-hero__stat {
	display: flex;
	align-items: center;
	align-self: flex-start;
	gap: var( --space-14 );
	padding: var( --space-10 ) var( --space-20 ) var( --space-10 ) var( --space-12 );
	border-radius: var( --radius-pill );
	background: var( --surface-page );
	box-shadow: var( --shadow-lift );
	font-weight: var( --fw-black );
	font-size: var( --fs-13-5 );
	color: var( --color-heading );
}

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

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

.recepty-hero__scallop {
	display: block;
	width: 100%;
	height: var( --space-34 );
	margin-bottom: -1px;
}

.recepty-hero__scallop-path {
	fill: var( --surface-page );
}

/* ---------------------------------------------------------------
 * 2. Result bar + sort
 * ------------------------------------------------------------- */

.recepty-archive {
	padding: var( --space-44 ) 0 var( --space-96 );
	background: var( --surface-page );
}

.recepty-results {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-20 );
	padding-bottom: var( --space-26 );
	margin-bottom: var( --space-38 );
	border-bottom: 1px solid var( --c-cocoa-a10 );
}

.recepty-results__count {
	margin: 0;
	font-size: var( --fs-14-5 );
	font-weight: var( --fw-bold );
	color: var( --color-muted );
}

/* .tabs has no built-in wrap; the mockup's own sort bar always wraps. */
.recepty-sort {
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
 * 3. Recipe grid
 * ------------------------------------------------------------- */

.recepty-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	align-items: stretch;
	gap: var( --space-26 );
}

.recepty-grid__empty {
	grid-column: 1 / -1;
	padding: var( --space-48 ) 0;
	font-size: var( --fs-16 );
	color: var( --color-muted );
	text-align: center;
}

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

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

.recepty-card__image {
	display: block;
	aspect-ratio: 16 / 10.5;
	overflow: hidden;
}

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

.recepty-card__img--empty {
	background: var( --surface-sand );
}

.recepty-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 );
	line-height: 1.05;
	font-weight: var( --fw-heavy );
	color: var( --color-heading );
}

.recepty-card__date-day {
	font-family: var( --font-display );
	font-size: var( --fs-21 );
}

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

.recepty-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var( --space-10 );
	padding: var( --space-22 ) var( --space-24 ) var( --space-26 );
}

.recepty-card__eyebrow {
	font-size: var( --fs-11 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --color-muted );
}

.recepty-card__title {
	margin: 0;
	font-size: var( --fs-21 );
	font-weight: var( --fw-560 );
	line-height: var( --lh-snug );
	color: var( --color-heading );
}

.recepty-card__link {
	display: inline-flex;
	align-items: center;
	gap: var( --space-8 );
	margin-top: auto;
	font-weight: var( --fw-black );
	font-size: var( --fs-15 );
	color: var( --color-heading );
	transition: color var( --transition-fast );
}

.recepty-card__link:hover {
	color: var( --c-cocoa-900 );
}

.recepty-card__dot {
	width: var( --space-8 );
	height: var( --space-8 );
	border-radius: var( --radius-circle );
	background: var( --color-accent );
}

/* ---------------------------------------------------------------
 * 4. Pagination — no slot in the mockup (3 posts, never paginates today);
 *    minimal safe default for when the archive grows past 9.
 * ------------------------------------------------------------- */

.recepty-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --space-8 );
	margin-top: var( --space-48 );
}

.recepty-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var( --space-44 );
	height: var( --space-44 );
	padding: 0 var( --space-16 );
	border-radius: var( --radius-pill );
	background: var( --surface-sand );
	font-weight: var( --fw-bold );
	font-size: var( --fs-14 );
	color: var( --color-heading );
	transition: background var( --transition-fast ), box-shadow var( --transition-fast );
}

.recepty-pagination .page-numbers.dots {
	background: none;
}

.recepty-pagination a.page-numbers:hover {
	background: var( --c-white );
	box-shadow: var( --ring-honey );
}

.recepty-pagination .page-numbers.current {
	background: var( --surface-page );
	box-shadow: var( --shadow-tab-active ), var( --ring-honey );
}

/* ---------------------------------------------------------------
 * 5. Promo banner
 * ------------------------------------------------------------- */

.recepty-promo {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1.35fr .65fr;
	align-items: center;
	gap: var( --space-40 );
	margin-top: var( --space-38 );
	padding: var( --space-44 ) var( --space-48 );
	border-radius: var( --radius-28 );
	background: linear-gradient( 150deg, var( --c-honey-300 ), var( --c-honey-500 ) 72% );
	color: var( --c-cocoa-900 );
	box-shadow: var( --shadow-btn-hover );
}

.recepty-promo__glow {
	position: absolute;
	right: -90px;
	top: -110px;
	width: 300px;
	height: 300px;
	border-radius: var( --radius-circle );
	background: radial-gradient( circle, var( --c-white-a50 ), transparent 68% );
	pointer-events: none;
}

.recepty-promo__confetti {
	position: absolute;
	width: var( --space-16 );
	height: var( --space-5 );
	border-radius: var( --radius-4 );
}

.recepty-promo__confetti--1 {
	top: 22%;
	right: 26%;
	background: var( --c-cocoa-900 );
	opacity: .18;
	transform: rotate( 35deg );
}

.recepty-promo__confetti--2 {
	top: 64%;
	right: 32%;
	background: var( --surface-page );
	opacity: .7;
	transform: rotate( -25deg );
}

.recepty-promo__copy {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var( --space-12 );
	max-width: 640px;
}

.recepty-promo__eyebrow {
	color: var( --c-cocoa-900 );
	opacity: .72;
}

.recepty-promo__eyebrow::before {
	background: var( --c-cocoa-900 );
	opacity: .35;
	box-shadow: none;
}

.recepty-promo__title {
	margin: 0;
	font-size: var( --fs-d6 );
	font-weight: var( --fw-560 );
	line-height: var( --lh-snug );
	color: var( --c-cocoa-900 );
}

.recepty-promo__title em {
	font-style: italic;
	font-weight: var( --fw-540 );
}

.recepty-promo__text {
	margin: 0;
	max-width: 600px;
	font-weight: var( --fw-medium );
	font-size: var( --fs-16 );
}

.recepty-promo__actions {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-14 );
}

.recepty-promo__note {
	margin: 0;
	font-size: var( --fs-13-5 );
	font-weight: var( --fw-bold );
	color: var( --c-cocoa-900 );
	opacity: .75;
}

/* ---------------------------------------------------------------
 * 6. Contact — page-specific left column only; the dark card itself is
 *    components/contact-cta.css (.contact-cta, .contact-cta__card is
 *    applied directly, .contact-cta__row / __icon / __label / __value /
 *    __title / __glow — shared, not styled here).
 * ------------------------------------------------------------- */

.recepty-contact-section {
	padding: var( --space-84 ) 0;
	background: var( --surface-sand );
}

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

.recepty-contact__intro {
	max-width: 640px;
}

.recepty-contact__title {
	margin: 0;
	font-size: var( --fs-d5 );
	font-weight: var( --fw-580 );
	line-height: var( --lh-tight );
}

.recepty-contact__lead {
	margin-top: var( --space-20 );
	max-width: 560px;
	font-size: var( --fs-18-5 );
}

/* ---------------------------------------------------------------
 * 7. Mobile — no @media in the mockup; derived per responsive.md mode 3.
 * ------------------------------------------------------------- */

@media ( max-width: 767px ) {

	.recepty-hero__inner {
		padding: var( --space-30 ) 0 var( --space-40 );
	}

	.recepty-hero__grid {
		grid-template-columns: 1fr;
		gap: var( --space-30 );
	}

	.recepty-hero__lead {
		max-width: none;
	}

	.recepty-archive {
		padding: var( --space-38 ) 0 var( --space-56 );
	}

	/* Recipe cards carry more text (eyebrow + title + meta link) than a
	   compact product tile, so they go straight to 1 column rather than
	   the shop-grid's 2-column step, matching the site's article-grid
	   convention rather than the product-grid exception. */
	.recepty-grid {
		grid-template-columns: 1fr;
	}

	.recepty-promo {
		grid-template-columns: 1fr;
		padding: var( --space-30 ) var( --space-24 );
	}

	.recepty-contact-section {
		padding: var( --space-56 ) 0;
	}

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