/**
 * Single article template (recipe posts and any other standard post).
 * 1:1 with design/src/clanok.dc.html; degrades gracefully outside "recepty".
 *
 * @package Geras_Custom
 */

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

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

.article-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;
}

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

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

.article-hero__confetti--2 {
	top: 74%;
	left: 11%;
	background: var( --c-red-500 );
	opacity: .5;
	transform: rotate( -20deg );
}

.article-hero__confetti--3 {
	top: 30%;
	left: 44%;
	background: var( --c-green-500 );
	opacity: .55;
	transform: rotate( 70deg );
}

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

.article-hero__intro {
	max-width: var( --measure-wide );
	margin-top: var( --space-22 );
}

.article-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --space-14 );
	margin-bottom: var( --space-16 );
}

.article-hero__badge {
	padding: var( --space-6 ) var( --space-14 );
	border-radius: var( --radius-pill );
	background: var( --surface-cream );
	box-shadow: var( --ring-honey-soft-2 );
	font-size: var( --fs-11 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --c-cocoa-900 );
}

.article-hero__date {
	font-size: var( --fs-13-5 );
	font-weight: var( --fw-bold );
	color: var( --c-cocoa-500 );
}

.article-hero__dot {
	width: var( --space-5 );
	height: var( --space-5 );
	border-radius: var( --radius-circle );
	background: var( --color-accent );
}

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

.article-hero__accent {
	/* Static approximation of the mockup's hand-drawn, scroll-triggered
	 * underline — no per-page JS/SVG for a single accent word. */
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: var( --color-accent );
	text-underline-offset: var( --space-8 );
}

/* ---------------------------------------------------------------
 * Featured image band
 * ------------------------------------------------------------- */

.article-figure-band {
	background: linear-gradient( 180deg, var( --c-sand-100 ) 0%, var( --c-sand-100 ) 50%, var( --c-paper ) 50%, var( --c-paper ) 100% );
}

.article-figure {
	overflow: hidden;
	border-radius: var( --radius-28 );
	background: var( --surface-raised );
	box-shadow: var( --shadow-float );
}

.article-figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 8;
	object-fit: cover;
}

/* ---------------------------------------------------------------
 * Article + sidebar layout
 * ------------------------------------------------------------- */

.article-section {
	padding-top: var( --space-64 );
}

.article-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) var( --measure-sidebar );
	align-items: start;
	gap: var( --space-64 );
}

/* ---------------------------------------------------------------
 * Article body — prose styling for arbitrary the_content() output
 * ------------------------------------------------------------- */

.article__body {
	max-width: var( --measure-wide );
}

.article__body h2,
.article__body h3 {
	margin-bottom: var( --space-20 );
	font-size: var( --fs-30 );
	font-weight: var( --fw-580 );
}

.article__body h2:not( :first-child ),
.article__body h3:not( :first-child ) {
	margin-top: var( --space-44 );
}

.article__body ul,
.article__body ol {
	margin: 0 0 var( --space-16 );
	padding-left: var( --space-8 );
}

.article__body li {
	position: relative;
	padding-left: var( --space-24 );
	font-size: var( --fs-18 );
}

.article__body li + li {
	margin-top: var( --space-10 );
}

.article__body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: var( --space-10 );
	width: var( --space-8 );
	height: var( --space-8 );
	border-radius: var( --radius-circle );
	background: var( --color-accent );
}

/* The ingredients list: real content follows the design's heading straight
 * with a <ul> (WPBakery's [vc_custom_heading]+[vc_column_text] pair), so an
 * "h2/h3 immediately followed by ul" is the honey callout box from the
 * mockup — a structural match, not a guess at content. */
.article__body h2 + ul,
.article__body h3 + ul {
	display: flex;
	flex-direction: column;
	gap: var( --space-10 );
	padding: var( --space-26 ) var( --space-28 );
	border-radius: var( --radius-18 );
	background: var( --surface-cream );
	box-shadow: var( --ring-honey-soft );
	margin-bottom: var( --space-48 );
}

.article__body h2 + ul li,
.article__body h3 + ul li {
	padding-left: var( --space-28 );
	font-weight: var( --fw-medium );
	color: var( --color-heading );
}

.article__body h2 + ul li::before,
.article__body h3 + ul li::before {
	content: "\2713";
	top: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	font-weight: var( --fw-black );
	color: var( --color-accent-deep );
}

.article__body ol {
	counter-reset: article-steps;
}

.article__body ol li {
	counter-increment: article-steps;
}

.article__body ol li::before {
	content: counter( article-steps );
	position: absolute;
	left: 0;
	top: 0;
	font-weight: var( --fw-black );
	color: var( --color-accent-deep );
}

.article__body p {
	margin-bottom: var( --space-22 );
	font-size: var( --fs-18 );
}

.article__body p:last-child {
	margin-bottom: 0;
}

.article__body img {
	margin: var( --space-22 ) 0;
	border-radius: var( --radius-18 );
	box-shadow: var( --shadow-card );
}

.article__body table {
	display: block;
	overflow-x: auto;
	margin-bottom: var( --space-16 );
	font-size: var( --fs-15 );
}

.article__body table th,
.article__body table td {
	padding: var( --space-10 ) var( --space-14 );
	border-bottom: 1px solid var( --color-border );
	text-align: left;
}

/* Editorial callout — the closest reusable mapping to the mockup's one-off
 * dark "Sladkú Veľkú Noc..." box, which was tied to that season's copy and
 * had no data source (assumptions). */
.article__body blockquote {
	margin: var( --space-44 ) 0 0;
	padding: var( --space-30 ) var( --space-34 );
	border-radius: var( --radius-28 );
	background: var( --c-cocoa-700 );
	box-shadow: var( --shadow-float );
	color: var( --c-sand-100 );
	font-size: var( --fs-16 );
}

.article__body blockquote p:last-child {
	margin-bottom: 0;
}

.article__body blockquote a {
	color: var( --c-honey-300 );
	font-weight: var( --fw-bold );
}

.article__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-18 );
	margin-top: var( --space-38 );
	padding-top: var( --space-26 );
	border-top: 1px solid var( --c-cocoa-a12 );
}

.article__back {
	display: inline-flex;
	align-items: center;
	gap: var( --space-10 );
	font-size: var( --fs-15 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
	transition: color .2s;
}

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

.article-share {
	display: flex;
	align-items: center;
	gap: var( --space-10 );
}

.article-share__label {
	font-size: var( --fs-12 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --c-cocoa-500 );
}

.article-share__btn {
	display: grid;
	place-items: center;
	width: var( --space-38 );
	height: var( --space-38 );
	border-radius: var( --radius-circle );
	background: var( --surface-cream );
	color: var( --color-heading );
	transition: background .2s, transform .2s;
}

.article-share__btn:hover {
	background: var( --c-honey-300 );
	color: var( --color-heading );
	transform: translateY( calc( var( --space-2 ) * -1 ) );
}

/* ---------------------------------------------------------------
 * Sidebar
 * ------------------------------------------------------------- */

.article-sidebar {
	position: sticky;
	top: var( --space-120 );
	display: flex;
	flex-direction: column;
	gap: var( --space-22 );
}

.sidebar-card {
	padding: var( --space-26 ) var( --space-26 ) var( --space-28 );
	border-radius: var( --radius-28 );
	background: var( --surface-raised );
	box-shadow: var( --shadow-card ), var( --ring-hairline );
}

.sidebar-card__title {
	margin-bottom: var( --space-20 );
	font-size: var( --fs-13 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --c-cocoa-500 );
}

.sidebar-card__list {
	display: flex;
	flex-direction: column;
	gap: var( --space-16 );
}

.sidebar-card__link {
	display: flex;
	align-items: center;
	gap: var( --space-14 );
}

.sidebar-card__img {
	flex: none;
	width: var( --measure-thumb-sm-w );
	height: var( --measure-thumb-sm-h );
	border-radius: var( --radius-12 );
	object-fit: cover;
}

.sidebar-card__name {
	font-family: var( --font-display );
	font-size: var( --fs-16 );
	font-weight: var( --fw-560 );
	line-height: var( --lh-snug );
	color: var( --color-heading );
}

.promo-card {
	padding: var( --space-28 ) var( --space-26 ) var( --space-30 );
	border-radius: var( --radius-28 );
	background: var( --gradient-honey );
	box-shadow: var( --shadow-btn-hover );
	color: var( --c-cocoa-900 );
}

.promo-card__title {
	margin-bottom: var( --space-8 );
	font-size: var( --fs-22 );
	font-weight: var( --fw-560 );
	color: var( --c-cocoa-900 );
}

.promo-card__text {
	margin-bottom: var( --space-18 );
	font-size: var( --fs-15 );
	font-weight: var( --fw-medium );
}

/* ---------------------------------------------------------------
 * Related section
 * ------------------------------------------------------------- */

.related-section__head {
	max-width: var( --measure-wide );
	margin-bottom: var( --space-44 );
}

.related-section__title {
	margin-top: var( --space-12 );
	font-size: var( --fs-d5 );
}

.related-section__grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --space-26 );
}

.recipe-teaser {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var( --color-border );
	border-radius: var( --radius-28 );
	background: var( --surface-page );
	box-shadow: var( --shadow-card );
	transition: transform .3s, box-shadow .3s;
}

.recipe-teaser:hover {
	box-shadow: var( --shadow-float );
	transform: translateY( calc( var( --space-7 ) * -1 ) );
}

.recipe-teaser__media {
	display: block;
	aspect-ratio: 16 / 9.5;
	overflow: hidden;
}

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

.recipe-teaser__img--empty {
	display: block;
	background: var( --surface-sand );
}

.recipe-teaser__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-56 );
	height: var( --space-64 );
	border-radius: var( --radius-16 );
	background: var( --surface-page );
	box-shadow: var( --shadow-lift );
	line-height: var( --lh-tight );
	font-weight: var( --fw-heavy );
	color: var( --color-heading );
}

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

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

.recipe-teaser__body {
	display: flex;
	flex-direction: column;
	gap: var( --space-10 );
	padding: var( --space-22 ) var( --space-26 ) var( --space-26 );
}

.recipe-teaser__eyebrow {
	font-size: var( --fs-11 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --c-cocoa-500 );
}

.recipe-teaser__title {
	font-size: var( --fs-22 );
	font-weight: var( --fw-560 );
	line-height: var( --lh-snug );
}

.recipe-teaser__link {
	display: inline-flex;
	align-items: center;
	gap: var( --space-8 );
	font-size: var( --fs-15 );
	font-weight: var( --fw-black );
	color: var( --color-heading );
	transition: color .2s;
}

.recipe-teaser__link:hover {
	color: var( --c-cocoa-900 );
}

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

/* ---------------------------------------------------------------
 * Mobile (responsive.md mode 2 for the layout thresholds the mockup's own
 * script encodes at 1080px/720px; mode 3 gate below that for anything the
 * mockup leaves unspecified).
 * ------------------------------------------------------------- */

@media ( max-width: 1080px ) {

	.article-layout {
		grid-template-columns: minmax( 0, 1fr );
	}

	.article-sidebar {
		position: static;
	}
}

@media ( max-width: 767px ) {

	.article-section {
		padding-top: var( --space-44 );
	}

	.article-layout {
		gap: var( --space-40 );
	}

	.article__foot {
		justify-content: flex-start;
	}

	/* Tap targets stay reachable on touch (responsive.md gate). */
	.article-share__btn {
		width: var( --space-44 );
		height: var( --space-44 );
	}
}

@media ( max-width: 720px ) {

	.related-section__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}