/* =========================================================================
   Reusable content components: categories, stories, reviews and recipes.
   ========================================================================= */

.at-archive-shell { padding-block: var(--at-space-md) var(--at-space-2xl); }
.at-archive-hero { max-width: 760px; margin: 0 auto clamp(30px, 5vw, 56px); text-align: center; }
.at-archive-hero__eyebrow,
.at-recipe-hero__eyebrow,
.at-story-card__eyebrow {
	margin: 0 0 8px;
	color: var(--at-accent-dark);
	font-family: var(--at-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.at-archive-hero h1 { margin-bottom: 14px; font-size: clamp(38px, 5vw, 62px); line-height: 1.03; }
.at-archive-hero > p:last-child { margin: 0 auto; max-width: 62ch; color: var(--at-ink-soft); font-size: 18px; }

.at-filter-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: var(--at-space-lg); }
.at-filter-chips a {
	flex: none;
	padding: 9px 14px;
	border: 1px solid var(--at-border-soft);
	border-radius: var(--at-radius-pill);
	background: var(--at-surface);
	color: var(--at-ink);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}
.at-filter-chips a:hover,
.at-filter-chips a.is-active { border-color: var(--at-accent); background: var(--at-accent-soft); color: var(--at-accent-dark); }

@media (max-width: 767px) {
	.at-filter-chips {
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding-bottom: 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.at-filter-chips::-webkit-scrollbar { display: none; }
}

.at-category-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--at-space-sm);
}
.at-category-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--at-surface);
	border: 1px solid var(--at-border-soft);
	border-radius: var(--at-radius-lg);
	color: var(--at-ink);
	text-decoration: none;
	transition: border-color var(--at-ease), transform var(--at-ease);
}
.at-category-card:hover { border-color: var(--at-accent); color: var(--at-ink); text-decoration: none; transform: translateY(-2px); }
.at-category-card__media { display: block; background: var(--at-surface-soft); overflow: hidden; }
.at-category-card__media img,
.at-category-card__placeholder { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; }
.at-category-card:hover .at-category-card__media img { transform: scale(1.025); }
.at-category-card__placeholder { background: var(--at-accent-soft); }
.at-category-card__body { display: grid; gap: 2px; padding: 16px; }
.at-category-card__body strong { font-size: 17px; line-height: 1.2; }
.at-category-card__body span { color: var(--at-ink-soft); font-size: 13px; }

.at-content-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--at-space-sm);
}
.at-story-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--at-surface);
	border: 1px solid var(--at-border-soft);
	border-radius: var(--at-radius-lg);
}
.at-story-card__media { display: block; overflow: hidden; background: var(--at-surface-soft); }
.at-story-card__media img,
.at-story-card__placeholder { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; }
.at-story-card:hover .at-story-card__media img { transform: scale(1.025); }
.at-story-card__placeholder { background: var(--at-accent-soft); }
.at-story-card__body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.at-story-card__eyebrow { margin-bottom: 6px; }
.at-story-card__title { margin: 0 0 10px; color: var(--at-ink); font-size: 20px; line-height: 1.2; }
.at-story-card__title a { color: inherit; }
.at-story-card__title a:hover { color: var(--at-accent-dark); text-decoration: none; }
.at-story-card__excerpt { margin: 0; color: var(--at-ink-soft); font-size: 14px; }
.at-story-card__meta { margin: auto 0 0; padding-top: 14px; color: var(--at-accent-dark); font-size: 13px; font-weight: 700; }

.at-content-grid--reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.at-review-card {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: clamp(22px, 3vw, 34px);
	background: var(--at-surface);
	border: 1px solid var(--at-border-soft);
	border-radius: var(--at-radius-lg);
}
.at-review-card__mark { height: 42px; color: var(--at-accent); font-size: 64px; font-weight: 700; line-height: .9; }
.at-review-card__text { flex: 1; margin: 14px 0 24px; padding: 0; border: 0; background: transparent; color: var(--at-ink-body); font-size: 16px; }
.at-review-card__author { display: flex; align-items: center; gap: 12px; }
.at-review-card__author img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; }
.at-review-card__author strong,
.at-review-card__author span { display: block; }
.at-review-card__author a { color: var(--at-ink); }
.at-review-card__author span { color: var(--at-ink-soft); font-size: 13px; }

.at-support-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--at-space-lg);
	margin-top: clamp(44px, 7vw, 88px);
	padding: clamp(24px, 4vw, 44px);
	background: var(--at-accent-soft);
	border-left: 4px solid var(--at-accent);
	border-radius: var(--at-radius-lg);
}
.at-support-panel h2 { margin-bottom: 8px; }
.at-support-panel p { margin: 0; color: var(--at-ink-soft); }
.at-support-panel__actions { display: flex; gap: 10px; flex: none; }

.at-recipe { padding-block: var(--at-space-md) var(--at-space-2xl); }
.at-recipe-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 6vw, 72px); align-items: center; margin-bottom: clamp(44px, 7vw, 82px); }
.at-recipe-hero h1 { margin-bottom: 18px; font-size: clamp(38px, 5vw, 62px); line-height: 1.04; }
.at-recipe-hero__lead { color: var(--at-ink-soft); font-size: 18px; }
.at-recipe-hero__media { margin: 0; overflow: hidden; border-radius: var(--at-radius-lg); background: var(--at-surface); }
.at-recipe-hero__media img { width: 100%; min-height: 420px; aspect-ratio: 4 / 3; object-fit: cover; }
.at-recipe-stats { display: flex; flex-wrap: wrap; gap: 18px; margin: 24px 0 0; }
.at-recipe-stats div { padding-right: 18px; border-right: 1px solid var(--at-border-soft); }
.at-recipe-stats div:last-child { border-right: 0; }
.at-recipe-stats dt { color: var(--at-ink-soft); font-size: 12px; }
.at-recipe-stats dd { margin: 2px 0 0; color: var(--at-ink); font-weight: 700; }
.at-recipe-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 6vw, 76px); align-items: start; }
.at-recipe-body h2 { margin-bottom: 22px; font-size: 30px; }
.at-recipe-ingredients { padding: clamp(22px, 3vw, 34px); background: var(--at-surface); border: 1px solid var(--at-border-soft); border-radius: var(--at-radius-lg); }
.at-recipe-ingredients ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.at-recipe-ingredients li { padding-bottom: 10px; border-bottom: 1px solid var(--at-border-soft); }
.at-recipe-ingredients li:last-child { padding-bottom: 0; border: 0; }
.at-recipe-method ol { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: recipe-step; }
.at-recipe-method li { position: relative; padding-left: 50px; counter-increment: recipe-step; }
.at-recipe-method li::before { content: counter(recipe-step); position: absolute; left: 0; top: -3px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--at-accent); color: var(--at-surface); font-weight: 700; }

.at-review-single { max-width: 980px; padding-block: var(--at-space-md) var(--at-space-2xl); }
.at-review-single__card { padding: clamp(28px, 6vw, 70px); background: var(--at-surface); border: 1px solid var(--at-border-soft); border-radius: var(--at-radius-lg); }
.at-review-single__mark { color: var(--at-accent); font-size: 86px; line-height: .7; }
.at-review-single__content { max-width: 760px; margin: 20px 0 34px; font-size: 18px; }
.at-review-single__card footer { display: flex; align-items: center; gap: 16px; padding-top: 22px; border-top: 1px solid var(--at-border-soft); }
.at-review-single__card footer img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; }
.at-review-single__card footer h1 { margin: 0; font-size: 22px; }
.at-review-single__card footer p { margin: 2px 0 0; color: var(--at-ink-soft); }

.at-content-grid--post .at-post { min-width: 0; }
.at-content-grid--post .at-post__media img { aspect-ratio: 4 / 3; }
.at-content-grid--post .at-post__body { padding: 20px; }
.at-comments { max-width: 760px; margin: var(--at-space-md) auto 0; }

@media (max-width: 991px) {
	.at-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.at-content-grid--reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.at-category-grid,
	.at-content-grid,
	.at-content-grid--reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.at-recipe-hero,
	.at-recipe-body { grid-template-columns: 1fr; }
	.at-recipe-hero__media { order: -1; }
	.at-recipe-hero__media img { min-height: 280px; }
	.at-support-panel { align-items: stretch; flex-direction: column; }
	.at-support-panel__actions { flex-wrap: wrap; }
}

@media (max-width: 450px) {
	.at-category-grid,
	.at-content-grid,
	.at-content-grid--reviews { grid-template-columns: 1fr; }
	.at-support-panel__actions { flex-direction: column; }
}