/**
 * BBQLovers — startsida. Enqueue:as endast på is_front_page(), se inc/assets.php.
 */

/* ---- Hero ---- */
.home-hero {
	position: relative;
	min-height: 26rem;
	display: flex;
	align-items: flex-end;
	color: var(--color-text-invert);
	background: var(--color-charcoal);
	overflow: hidden;
}
.home-hero__media {
	position: absolute;
	inset: 0;
}
.home-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0.35) 55%, rgb(0 0 0 / 0.1) 100%);
}
.home-hero__content {
	position: relative;
	z-index: 1;
	padding: var(--space-xl) var(--space-md) var(--space-2xl);
	max-width: 42rem;
}
.home-hero__title {
	font-size: var(--step-4);
	margin-bottom: var(--space-sm);
}
.home-hero__excerpt {
	font-family: var(--font-body);
	font-size: var(--step-0);
	color: rgb(255 255 255 / 0.85);
	max-width: 36rem;
}
@media (min-width: 768px) {
	.home-hero { min-height: 32rem; }
	.home-hero__title { font-size: var(--step-5); }
}

/* ---- Statisk varumärkeshero (glödande kol) — se hero.php ----
   .home-hero__poster är alltid närvarande och fyller hela ytan; den ÄR
   bilden webbläsaren räknar som LCP (liten JPG, fetchpriority high).
   Videon läggs ovanpå med exakt samma dimensioner via object-fit:cover,
   så det finns inget CLS-hopp i endera riktningen — samma mönster som
   .article-hero--ember i article.css (duplicerat medvetet: varje CSS-
   fil laddas bara på den mall som faktiskt behöver den, se filhuvudet
   i inc/assets.php). */
.home-hero--ember .home-hero__poster,
.home-hero--ember .home-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
	.home-hero--ember .home-hero__video {
		display: none;
	}
}

/* ---- Kategoristråk ----
   Tidigare en horisontellt scrollande enradslista (width:max-content,
   overflow-x:auto) — på breda skärmar fyllde 10 poster inte hela raden,
   vilket lämnade listan vänsterjusterad med ett stort tomt fält till
   höger istället för centrerad (upptäckt via skärmdump 2026-09-13).
   Nu en centrerad, radbrytande rad istället: fungerar på alla
   skärmbredder utan scroll, och centreras även på den sista, eventuellt
   kortare raden. */
.category-strip {
	background: var(--color-paper-warm);
	border-bottom: 1px solid var(--color-line);
}
.category-strip__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-lg) var(--space-xl);
	list-style: none;
	margin: 0;
	padding: var(--space-md);
}
.category-strip__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2xs);
	text-decoration: none;
	color: var(--color-text);
	font-size: var(--step--1);
	font-weight: 600;
	text-align: center;
	width: 5rem;
}
.category-strip__item svg {
	width: 1.75rem;
	height: 1.75rem;
	color: var(--color-ember);
}
.category-strip__item a:hover svg,
.category-strip__item a:focus-visible svg {
	color: var(--color-ember-hot);
}

/* ---- Layout: huvudinnehåll + sidokolumn ---- */
.home-layout {
	display: grid;
	gap: var(--space-2xl);
	padding-block: var(--space-2xl);
	/* minmax(0,1fr) förhindrar att grid-spåret blåses upp av brett
	   innehåll — se samma kommentar vid .article-layout i article.css. */
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
	.home-layout {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
		align-items: start;
	}
}
.home-main { display: flex; flex-direction: column; gap: var(--space-2xl); }
.home-sidebar { display: flex; flex-direction: column; gap: var(--space-xl); }
.home-sidebar__list { display: flex; flex-direction: column; }
.home-sidebar__list .card--list:last-child { border-bottom: none; }

/* ---- Säsongsbanner ---- */
.seasonal-banner {
	position: relative;
	background: linear-gradient(135deg, var(--color-charcoal) 0%, #2b1512 100%);
	color: var(--color-text-invert);
	border-radius: var(--radius-lg);
	border-top: 3px solid var(--color-ember);
	padding: var(--space-lg);
	overflow: hidden;
}
.seasonal-banner__title {
	font-size: var(--step-1);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-ember-hot);
	margin-bottom: var(--space-md);
}
.seasonal-banner__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-sm);
}
@media (min-width: 640px) {
	.seasonal-banner__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.seasonal-banner__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-md);
	background: rgb(255 255 255 / 0.06);
	border-radius: var(--radius);
	border-left: 3px solid transparent;
	text-decoration: none;
	color: var(--color-text-invert);
	transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.seasonal-banner__item:hover,
.seasonal-banner__item:focus-visible {
	background: rgb(193 39 45 / 0.18);
	border-left-color: var(--color-ember-hot);
	transform: translateY(-2px);
}
.seasonal-banner__item-label { font-weight: 700; }
.seasonal-banner__item-sub { font-size: var(--step--1); color: var(--color-ash-light); }

/* ---- Grilltemperaturer ---- */
.temperatures-section__intro { max-width: var(--content-width); }
.temperatures-section__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}
@media (min-width: 640px) {
	.temperatures-section__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.temperatures-section__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.temperatures-section__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-md) var(--space-sm);
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--color-text);
	font-weight: 600;
	font-size: var(--step--1);
	text-align: center;
	box-shadow: var(--shadow-card);
	transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.temperatures-section__item svg { width: 1.75rem; height: 1.75rem; color: var(--color-ember); }
.temperatures-section__item:hover,
.temperatures-section__item:focus-visible {
	transform: translateY(-3px);
	border-color: var(--color-ember);
	box-shadow: var(--shadow-card-hover);
}

/* ---- Följ oss / social CTA ---- */
.social-cta {
	text-align: center;
}
.social-cta__title { font-size: var(--step-2); }
.social-cta__links {
	display: flex;
	justify-content: center;
	gap: var(--space-md);
	margin-top: var(--space-lg);
	flex-wrap: wrap;
}
.social-cta__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 0.75em 1.5em;
	border-radius: var(--radius);
	background: var(--color-charcoal);
	color: var(--color-text-invert);
	text-decoration: none;
	font-weight: 600;
}
.social-cta__link:hover { background: var(--color-ember); }

/* ---- Oändligt scroll-flöde — se template-parts/section/home-feed.php.
   Varje batch (kort-grid + annonsslot) staplas löpande i .home-feed__stream,
   antingen server-renderad (första batchen) eller ilagd av home-feed.js. */
.home-feed { padding-block: var(--space-2xl); }
.home-feed__stream > .grid--cards + .ad-slot-wrap { margin-top: 0; }
.home-feed__stream > * + * { margin-top: var(--space-2xl); }
.home-feed__sentinel { height: 1px; }
.home-feed__status {
	text-align: center;
	color: var(--color-ash);
	font-size: var(--step--1);
	margin-top: var(--space-lg);
}