/* Breadcrumb */
.blog-breadcrumb ol {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0 0 var(--space-md);
	padding: 0;
	font-size: .85rem;
	color: var(--color-muted);
}

.blog-breadcrumb li:not(:last-child)::after {
	content: "/";
	margin-inline-start: 6px;
}

.blog-breadcrumb a {
	text-decoration: none;
	color: var(--color-muted);
}

/* "Recipe Notebook" palette — scoped to the blog index/archive, layered on
   top of the site's coral/ink brand tokens rather than replacing them. */
.blog-index {
	--blog-paper: #FBF1E3;
	--blog-paper-line: #E9D6B8;
	--blog-tape: #F3C468;
	--blog-tape-dark: #E0A93F;
	--blog-brown: #6B4226;
	--font-display: "Suez One", var(--font-primary);
	background: linear-gradient(180deg, var(--blog-paper) 0, #fff 420px);
	border-radius: var(--radius-lg);
	padding: var(--space-lg) var(--gutter);
}

@media (max-width: 639px) {
	.blog-index {
		padding: var(--space-md) var(--gutter);
		border-radius: var(--radius-md);
	}
}

/* Blog hero (index page) */
.blog-hero {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	color: #fff;
}

.blog-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.blog-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(74, 34, 18, .5);
}

.blog-hero__content {
	position: relative;
	z-index: 1;
}

.blog-hero__content .blog-breadcrumb,
.blog-hero__content .blog-breadcrumb a {
	color: rgba(255, 255, 255, .8);
}

.blog-hero__content h1 {
	margin: 0 0 var(--space-xs);
}

/* Toolbar */
.blog-toolbar {
	margin-bottom: var(--space-lg);
}

.blog-toolbar__title {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-display, var(--font-primary));
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--blog-brown, var(--color-ink));
}

.blog-toolbar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: var(--space-sm);
}

.blog-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	position: relative;
}

.blog-filter__chip {
	display: inline-flex;
	padding: 6px 16px;
	border-radius: var(--radius-sm);
	border: 1px dashed var(--blog-paper-line, var(--color-border));
	background: #fff;
	text-decoration: none;
	font-size: .875rem;
	color: var(--blog-brown, var(--color-ink));
	cursor: pointer;
}

.blog-filter__chip.is-active {
	background: var(--blog-tape, var(--color-ink));
	border-style: solid;
	border-color: var(--blog-tape-dark, var(--color-ink));
	color: var(--blog-brown, #fff);
	font-weight: 700;
}

/* "עוד קטגוריות" — a native <details> so overflow categories live in the
   same chip row rather than a second, separate filter UI in the sidebar. */
.blog-filter__more {
	position: relative;
}

.blog-filter__more summary {
	list-style: none;
}

.blog-filter__more summary::-webkit-details-marker {
	display: none;
}

.blog-filter__more summary::after {
	content: "▾";
	margin-inline-start: 4px;
	font-size: .7em;
}

.blog-filter__more[open] summary::after {
	content: "▴";
}

.blog-filter__overflow {
	position: absolute;
	z-index: 5;
	top: calc(100% + 8px);
	inset-inline-start: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	width: max-content;
	max-width: min(360px, 80vw);
	padding: var(--space-sm);
	background: #fff;
	border: 1px dashed var(--blog-paper-line, var(--color-border));
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
}

.blog-search {
	position: relative;
	display: flex;
	align-items: center;
}

.blog-search input {
	font-family: inherit;
	padding: 10px 40px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	min-width: 220px;
}

.blog-search__icon {
	position: absolute;
	inset-inline-start: 12px;
}

.blog-search button {
	position: absolute;
	inset-inline-end: 8px;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Layout: content + sidebar */
.blog-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--card-gap);
}

.blog-empty {
	color: var(--color-muted);
}

/* Blog card — "recipe card" treatment: paper background, dashed border,
   a washi-tape strip pinning the photo corner like a notebook clipping. */
.blog-card {
	position: relative;
	background: var(--blog-paper, #fff);
	border: 1.5px dashed var(--blog-paper-line, var(--color-border));
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-card);
	overflow: visible;
	transition: transform .25s ease, box-shadow .25s ease;
}

.blog-card:hover,
.blog-card:focus-within {
	transform: rotate(-.6deg) translateY(-4px);
	box-shadow: var(--shadow-floating);
}

.blog-card::before {
	content: "";
	position: absolute;
	top: -10px;
	inset-inline-start: 22px;
	width: 64px;
	height: 22px;
	background: var(--blog-tape, #F3C468);
	opacity: .85;
	transform: rotate(-4deg);
	box-shadow: 0 2px 4px rgba(74, 34, 18, .18);
	z-index: 2;
}

/* aspect-ratio lives on the wrapper, not the <img>, on purpose: inside a
   CSS grid track (.blog-grid) a percentage-width img with its own
   aspect-ratio can't resolve during the grid's row-sizing pass and
   silently falls back to the img's raw height attribute, rendering
   portrait-tall instead of landscape (same bug already fixed on
   .post-hero__media-frame). */
.blog-card__media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	aspect-ratio: 16 / 9;
}

.blog-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card__body {
	padding: var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
	.blog-card {
		transition-duration: .001ms;
	}
}

.blog-card__tag {
	display: inline-block;
	background: var(--color-surface);
	color: var(--color-green);
	font-size: .75rem;
	font-weight: 700;
	padding: 2px 10px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	margin-bottom: var(--space-xs);
}

.blog-card__title {
	font-family: var(--font-display, var(--font-primary));
	font-size: 1.15rem;
	margin: 0 0 var(--space-xs);
}

.blog-card__link {
	text-decoration: none;
	color: inherit;
}

.blog-card__excerpt {
	display: block;
	color: var(--color-muted);
	font-size: .9rem;
	margin: 0 0 var(--space-sm);
	text-decoration: none;
}

.blog-card__meta {
	display: flex;
	gap: var(--space-md);
	margin-top: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px dashed var(--blog-paper-line, var(--color-border));
	font-size: .8rem;
	color: var(--color-muted);
}

.blog-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Pagination */
.blog-pagination ul {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	list-style: none;
	margin: var(--space-xl) 0 0;
	padding: 0;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-sm);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	text-decoration: none;
	color: var(--color-ink);
}

.blog-pagination .page-numbers.current {
	background: var(--color-coral);
	color: #fff;
	border-color: var(--color-coral);
}

/* Sidebar */
.blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

.blog-widget {
	background: #fff;
	border: 1px dashed var(--blog-paper-line, var(--color-border));
	border-radius: var(--radius-sm);
	padding: var(--space-lg);
}

.blog-widget__title {
	font-family: var(--font-display, var(--font-primary));
	margin: 0 0 var(--space-md);
	font-size: 1.05rem;
}

.blog-widget--newsletter input {
	width: 100%;
	font-family: inherit;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	margin: var(--space-sm) 0;
}

.blog-widget--newsletter .btn {
	width: 100%;
}

.blog-widget__privacy-note {
	font-size: .75rem;
	color: var(--color-muted);
	margin-top: var(--space-xs);
}

.blog-widget__popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.blog-popular-item {
	display: flex;
	gap: var(--space-sm);
	text-decoration: none;
	color: var(--color-ink);
}

.blog-popular-item__media img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.blog-popular-item__title {
	display: block;
	font-size: .875rem;
	font-weight: 600;
}

.blog-popular-item__date {
	display: block;
	font-size: .75rem;
	color: var(--color-muted);
}

@media (max-width: 1023px) {
	.blog-layout {
		grid-template-columns: 1fr;
	}
	.blog-grid {
		grid-template-columns: 1fr;
	}
}

.blog-content {
	min-width: 0;
}

/* Single post hero */
.post-hero {
	padding-block: var(--space-xl);
	background: var(--color-surface);
}

.post-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}

.post-chip {
	display: inline-block;
	background: var(--color-coral-soft);
	color: var(--color-coral-dark);
	font-size: .75rem;
	font-weight: 700;
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	text-decoration: none;
	margin-bottom: var(--space-sm);
}

.post-hero__title {
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
	margin: 0 0 var(--space-sm);
}

.post-hero__lead {
	color: var(--color-muted);
	font-size: 1.05rem;
	margin: 0 0 var(--space-md);
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	font-size: .85rem;
	color: var(--color-muted);
}

.post-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

a.post-meta__item--author {
	color: inherit;
	text-decoration: none;
}

a.post-meta__item--author:hover,
a.post-meta__item--author:focus-visible {
	color: var(--color-coral-dark);
}

.post-meta__item--author img.avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

.post-byline {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-block-end: var(--space-md);
}

.post-byline img.avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.post-byline__text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.post-byline__label {
	font-size: .75rem;
	color: var(--color-muted);
}

.post-byline__name {
	font-weight: 700;
	color: var(--color-ink);
}

.post-hero__media {
	position: relative;
}

.post-hero__media-frame {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.post-hero__media-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-hero__decor {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.post-hero__decor--leaf {
	top: -18px;
	inset-inline-start: -18px;
	width: 56px;
}

.post-hero__decor--burst {
	bottom: -16px;
	inset-inline-end: -16px;
	width: 48px;
}

@media (max-width: 1023px) {
	.post-hero__grid {
		grid-template-columns: 1fr;
	}
	.post-hero__media {
		order: -1;
	}
}

/* Single post body + sidebar */
.post-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}

.post-body {
	min-width: 0;
	max-width: none;
}

/* In-content links: bold coral, underline appears only on hover/focus */
.post-body a {
	color: var(--color-coral-dark);
	font-weight: 700;
	text-decoration: none;
	background-image: linear-gradient(var(--color-coral), var(--color-coral));
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0% 2px;
	padding-bottom: 1px;
	transition: background-size .3s ease, color .25s ease;
}

.post-body a:hover,
.post-body a:focus-visible {
	color: var(--color-coral);
	background-size: 100% 2px;
}

@media (prefers-reduced-motion: reduce) {
	.post-body a {
		transition-duration: .001ms;
	}
}

.post-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	position: sticky;
	top: var(--space-lg);
}

.post-card {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}

.post-card__title,
.post-card__title-plain {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin: 0 0 var(--space-md);
	font-size: 1rem;
	cursor: default;
}

.post-card--toc summary.post-card__title {
	cursor: pointer;
	list-style: none;
}

.post-card--toc summary::-webkit-details-marker {
	display: none;
}

.post-toc {
	list-style: none;
	counter-reset: post-toc;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.post-toc li {
	counter-increment: post-toc;
}

.post-toc a {
	color: var(--color-ink);
	text-decoration: none;
	font-size: .875rem;
}

.post-toc a::before {
	content: counter(post-toc) ". ";
	color: var(--color-coral);
	font-weight: 700;
}

.post-share {
	display: flex;
	gap: var(--space-sm);
}

.post-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--color-border);
	cursor: pointer;
}

.post-share__btn img {
	width: 18px;
	height: 18px;
}

.post-share__status {
	margin: var(--space-xs) 0 0;
	font-size: .8rem;
	color: var(--color-green);
	min-height: 1em;
}

.post-card--newsletter .newsletter-form input {
	width: 100%;
	font-family: inherit;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	margin: var(--space-sm) 0;
}

.post-card--newsletter .newsletter-form .btn {
	width: 100%;
}

@media (max-width: 1023px) {
	.post-layout {
		grid-template-columns: 1fr;
	}
	.post-sidebar {
		position: static;
	}
}

/* Author box (post footer) */
.author-box {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	background: var(--color-surface);
	border-inline-start: 4px solid var(--color-coral);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}

.author-box__avatar {
	flex-shrink: 0;
	line-height: 0;
}

.author-box__avatar img.avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.author-box__eyebrow {
	margin: 0 0 4px;
	font-size: .75rem;
	font-weight: 700;
	color: var(--color-coral-dark);
	text-transform: uppercase;
	letter-spacing: .02em;
}

.author-box__name {
	display: inline-block;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-ink);
	text-decoration: none;
}

.author-box__name:hover,
.author-box__name:focus-visible {
	text-decoration: underline;
}

.author-box__role {
	margin: 2px 0 var(--space-sm);
	font-size: .875rem;
	color: var(--color-muted);
}

.author-box__bio {
	margin: 0;
	color: var(--color-muted);
	line-height: 1.6;
}

@media (max-width: 639px) {
	.author-box {
		flex-direction: column;
		align-items: flex-start;
		text-align: start;
	}
}

/* Category archive description */
.blog-archive-description {
	color: var(--color-muted);
	max-width: 720px;
	margin-bottom: var(--space-lg);
}

/* Mobile */
@media (max-width: 639px) {
	.blog-toolbar__row {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}
	.blog-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		min-width: 0;
	}
	.blog-filter__chip {
		flex: 0 0 auto;
	}
	.blog-filter__more {
		flex: 0 0 auto;
	}
	.blog-filter__overflow {
		position: static;
		margin-top: var(--space-xs);
		width: auto;
		max-width: none;
		box-shadow: none;
	}
	.blog-search {
		min-width: 0;
	}
	.blog-search input {
		min-width: 0;
		width: 100%;
	}
	.blog-hero {
		min-height: 230px;
	}
}