/* ==========================================================================
   Homepage Sections — Lee's Supper Club
   --------------------------------------------------------------------------
   Styles for every template part loaded by front-page.php.  Sections are
   ordered to match the template-part include sequence.

   Contents:
     1.  Hero Slogan
     2.  Category Grid (rectangles + circles)
     3.  Search Our Recipes
     4.  About Banner
     5.  Seasonal Entertaining
     6.  The Latest
     7.  Newsletter / Substack
     8.  Your New Favorite
     9.  Responsive overrides (mobile-first adjustments at bottom)
   ========================================================================== */


/* ==========================================================================
   0. Homepage Content — Content blocks rendered via the_content()
   ========================================================================== */

.site-main.homepage {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.homepage-content {
	width: 100%;
}

/* Prevent pinch zoom on homepage — CSS reinforcement for viewport meta */
.homepage {
	touch-action: pan-x pan-y;
}

.homepage-content .entry-content {
	max-width: 100%;
	font-size: 1rem;
}


/* Full-width breakout for homepage content blocks and author section */
.homepage-content .entry-content > .wp-block-group {
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

/* Let full-width backgrounds break out */
.homepage-content .entry-content > .wp-block-group.has-background {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.homepage-content .entry-content > .wp-block-group.has-background > * {
	max-width: var(--container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

/* Section spacing for homepage content blocks */
.homepage-content .entry-content > .wp-block-group {
	margin-bottom: var(--space-section);
}

/* Prevent WP core overflow:hidden on group blocks from clipping circles/labels.
   The .site-wrapper in base.css handles horizontal containment. */
.homepage-content .entry-content .wp-block-group {
	overflow: visible;
}

/* Homepage links should not have content-style underlines */
.homepage-content .entry-content a {
	text-decoration: none;
	color: inherit;
}

.homepage-content .entry-content a:hover {
	color: var(--color-teal);
}


/* --- Homepage search block centering ------------------------------------ */
.homepage-content .search-all-recipes {
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	flex-direction: row !important;
	gap: var(--space-md) !important;
}

@media (max-width: 600px) {
	.homepage-content .search-all-recipes,
	.search-all-recipes {
		flex-direction: column !important;
		gap: var(--space-sm) !important;
	}
}

/* Hide blockquote left border on "or" text in search section */
.homepage-content .entry-content blockquote,
.homepage-content .entry-content .wp-block-quote {
	border-left: none;
	padding-left: 0;
	margin-left: 0;
	margin-right: 0;
}

/* Author-section full-width breakout handled by homepage-blocks.css */


/* ==========================================================================
   1. Hero Slogan
   ========================================================================== */

.hero-slogan {
	background-color: var(--color-teal);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: var(--space-xl) 0 12.5rem;
	text-align: center;
}

.hero-slogan .slogan-text {
	color: var(--hero-text-color, var(--color-white));
	font-family: var(--hero-font-family, var(--font-accent, var(--font-primary)));
	font-style: italic;
	font-weight: var(--fw-regular);
	font-size: var(--hero-font-size, clamp(1.4rem, 3.5vw, 2.8rem));
	max-width: 700px;
	margin: 0 auto;
	line-height: 1.4;
}


/* ==========================================================================
   2. Category Grid
   ========================================================================== */

.category-section {
	padding: 0 0 var(--space-section);
}

/* --- 2a. Rectangular image cards --------------------------------------- */

.category-images-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
	margin-bottom: var(--space-2xl);
	max-width: var(--hero-grid-width);
	margin-left: auto;
	margin-right: auto;
	/* Pull grid up into hero teal band (#5) */
	margin-top: -200px;
	position: relative;
	z-index: 1;
}

.category-image-card {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 3 / 2;
	display: block;
	text-decoration: none;
}

.category-image-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.category-image-card:hover img,
.category-image-card:focus-visible img {
	transform: scale(1.05);
}

.category-image-card .category-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--color-teal);
	color: var(--color-white);
	padding: var(--space-xs) var(--space-sm);
	font-weight: var(--fw-medium);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.9rem;
}

/* Homepage category cards — match wireframe:
   taller images, rounded corners (#3), label as a bottom-center badge. */
.homepage .category-image-card {
	aspect-ratio: 2 / 3;
	border-radius: 0;
	overflow: visible;
}

.homepage .category-image-card img {
	border-radius: 8px;
	height: 100%;
}

.homepage .category-image-card .category-label {
	right: auto;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	padding: var(--space-xs) var(--space-md);
	font-size: var(--cat-label-font-size, 0.85rem);
	background: var(--cat-label-bg-color, var(--color-teal));
	white-space: nowrap;
	transition: background var(--transition-fast), color var(--transition-fast);
}

.homepage .category-image-card:hover .category-label {
	background: var(--color-green);
	color: var(--color-teal);
}

/* Placeholder when no category image is set */
.category-image-card .category-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-gray-light);
}

.category-image-card .category-placeholder span {
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	font-size: 1.25rem;
	color: var(--color-gray);
}

/* --- 2b. Circular category icons --------------------------------------- */

.category-circles {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--space-xl);
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.category-circle {
	text-align: center;
	text-decoration: none;
	color: var(--color-black);
}

.category-circle .circle-image {
	width: var(--circle-size);
	height: var(--circle-size);
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto var(--space-xs);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform var(--transition-base);
}

.category-circle:hover .circle-image,
.category-circle:focus-visible .circle-image {
	transform: scale(1.08);
}

/* Legacy support for img-based circles */
.category-circle .circle-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder when no circle image is set */
.category-circle .circle-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-gray-light);
	border-radius: 50%;
}

.category-circle .circle-placeholder span {
	font-family: var(--font-primary);
	font-weight: var(--fw-medium);
	font-size: 2rem;
	color: var(--color-gray);
}

.category-circle .circle-name {
	display: block;
	font-weight: var(--fw-medium);
	font-size: 0.9rem;
	transition: color var(--transition-fast);
}

.category-circle:hover .circle-name,
.category-circle:focus-visible .circle-name {
	color: var(--color-green);
}


/* ==========================================================================
   3. Search Our Recipes
   ========================================================================== */

.search-recipes-section {
	padding: var(--space-xl) 0;
	text-align: center;
}

.search-recipes-section h2 {
	margin-bottom: var(--space-lg);
	font-family: var(--font-accent, var(--font-primary));
	font-style: italic;
	font-weight: var(--fw-regular);
}

.search-inline {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: var(--space-md);
	max-width: 700px;
	margin: 0 auto;
}

.search-recipes-section .search-form {
	flex: 0 0 auto;
	width: 240px;
	margin: 0;
}

.search-recipes-section .search-input-wrapper {
	display: flex;
	align-items: center;
	border: 1px solid var(--color-gray);
	padding: 0 var(--space-sm);
	height: 48px;
}

.search-recipes-section .search-form__input {
	border: none;
	outline: none;
	font-family: var(--font-primary);
	font-size: 1rem;
	flex: 1;
	padding: var(--space-xs);
	background: transparent;
	height: 100%;
}

.search-recipes-section .search-form__submit {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	order: -1;
}

.search-recipes-section .search-form__submit svg {
	stroke: var(--color-green);
	width: 22px;
	height: 22px;
}

/* Body serif rather than the accent script, which renders "or" too small to read. */
.search-or {
	color: var(--color-body-text);
	font-size: 1.2rem;
	font-family: var(--font-primary);
	font-style: italic;
	display: flex;
	align-items: center;
}

.btn-green {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-md);
	height: 48px;
	width: 240px;
	text-align: center;
	white-space: nowrap;
	background: var(--color-green);
	color: var(--color-white);
	border: none;
	text-decoration: none;
	font-weight: var(--fw-medium);
	font-family: var(--font-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.95rem;
	line-height: 1;
	transition: all var(--transition-base);
}

.btn-green:hover,
.btn-green:focus-visible {
	background: var(--color-teal);
	color: var(--color-white);
}

/* Homepage search block (WP core search block) */
.homepage .search-all-recipes .wp-block-search__inside-wrapper {
	border: 1px solid var(--color-gray);
	border-radius: 0;
	background: var(--color-white);
	box-shadow: none;
}

.homepage .search-all-recipes .wp-block-search__input {
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--font-primary);
	padding: var(--space-xs) var(--space-sm);
}

.homepage .search-all-recipes .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

/* Move icon to the left side of input */
.homepage .search-all-recipes .wp-block-search__button {
	order: -1;
	background: none;
	border: none;
	border-radius: 0;
	padding: var(--space-xs) var(--space-sm);
	cursor: pointer;
}

.homepage .search-all-recipes .wp-block-search__button svg {
	fill: var(--color-green);
}

/* "or" text styling */
.homepage .search-all-recipes .is-variation-fancy-text {
	font-family: var(--font-accent);
	font-style: italic;
	color: var(--color-gray);
	font-size: 2rem;
}

.btn-outline {
	display: inline-block;
	padding: var(--space-xs) var(--space-lg);
	border: 2px solid var(--color-teal);
	color: var(--color-teal);
	text-decoration: none;
	font-weight: var(--fw-medium);
	font-family: var(--font-primary);
	transition: all var(--transition-base);
	border-radius: 4px;
}

.btn-outline:hover,
.btn-outline:focus-visible {
	background: var(--color-teal);
	color: var(--color-white);
}


/* ==========================================================================
   4. About Banner
   ========================================================================== */

.about-banner {
	background-color: var(--color-pink);
	padding: var(--space-section) 0;
	position: relative;
	overflow: hidden;
}

/* CSS-generated pomegranate / organic geometric pattern.
   Uses radial gradients at varying sizes to evoke seeds and
   circular organic shapes over the pink background. */
.about-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* Large circles — pomegranate body */
		radial-gradient(circle 40px at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 70%),
		radial-gradient(circle 25px at 60% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 70%),
		radial-gradient(circle 35px at 80% 60%, rgba(255, 255, 255, 0.07) 0%, transparent 70%),
		radial-gradient(circle 20px at 40% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
		radial-gradient(circle 30px at 10% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 70%),
		radial-gradient(circle 45px at 90% 15%, rgba(255, 255, 255, 0.08) 0%, transparent 70%),
		/* Repeating seed-like pattern */
		radial-gradient(ellipse 8px 12px at 50% 50%, rgba(160, 27, 34, 0.12) 0%, transparent 100%),
		/* Subtle tiled overlay */
		repeating-radial-gradient(
			circle at 25px 25px,
			transparent 0px,
			transparent 18px,
			rgba(255, 255, 255, 0.03) 18px,
			rgba(255, 255, 255, 0.03) 20px
		);
	background-size:
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		100% 100%,
		50px 50px,
		50px 50px;
	pointer-events: none;
	z-index: 0;
}

/* When a background image is set via inline style, hide the CSS pattern */
.about-banner[style*="background-image"]::before {
	display: none;
}

.about-card {
	background: var(--color-white);
	max-width: 700px;
	margin: 0 auto;
	padding: var(--space-2xl);
	border-radius: 12px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	align-items: center;
	position: relative;
	z-index: 1;
}

.about-card h2 {
	margin-bottom: var(--space-sm);
}

.about-card__heading {
	font-style: italic;
	font-weight: var(--fw-regular);
	font-size: 1.5rem;
	line-height: 1.4;
}

.about-card .about-me-text {
	margin-bottom: var(--space-sm);
	color: var(--color-gray-dark);
	line-height: 1.7;
}

.about-card .about-me-text p:last-child {
	margin-bottom: 0;
}

.about-read-more {
	display: inline-block;
	font-weight: var(--fw-medium);
	color: var(--color-pink);
	transition: color var(--transition-fast);
}

.about-read-more:hover,
.about-read-more:focus-visible {
	color: var(--color-teal);
}

/* Image column */
.about-card__image img {
	border-radius: 8px;
	width: 100%;
	height: auto;
	filter: grayscale(100%);
}

.about-card__image .about-image-placeholder {
	border-radius: 8px;
	overflow: hidden;
	background: var(--color-gray-light);
}

.about-card__image .about-image-placeholder svg {
	width: 100%;
	height: auto;
	display: block;
}


/* ==========================================================================
   5. Seasonal Entertaining
   ========================================================================== */

.seasonal-section {
	padding: var(--space-section) 0;
}

.seasonal-section h2 {
	text-align: left;
	margin-bottom: var(--space-xl);
	font-size: var(--seasonal-heading-size, 1.8rem);
	font-family: var(--seasonal-heading-font, var(--font-headings, var(--font-primary)));
}

.seasonal-section h2 a {
	color: inherit;
	text-decoration: none;
}

.seasonal-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

.seasonal-card {
	text-decoration: none;
	color: var(--color-black);
	display: block;
}

.seasonal-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: var(--space-xs);
	transition: opacity var(--transition-base);
}

.seasonal-card:hover img,
.seasonal-card:focus-visible img {
	opacity: 0.85;
}

.seasonal-card .seasonal-card__placeholder {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: var(--space-xs);
}

.seasonal-card .seasonal-card__placeholder svg {
	width: 100%;
	height: 100%;
}

.seasonal-card .card-title {
	font-weight: var(--fw-medium);
	font-size: 1.1rem;
	line-height: 1.4;
}

.no-posts-message {
	text-align: center;
	color: var(--color-gray);
	font-style: italic;
	padding: var(--space-xl) 0;
}

/* --- Scheduled / Entertaining section card overrides -------------------- */

.scheduled-category-section .post-card {
	border-radius: 0;
	box-shadow: none;
	background: var(--color-white);
}

.scheduled-category-section .post-card:hover {
	transform: none;
	box-shadow: none;
}

.scheduled-category-section .post-card .post-thumbnail-link {
	display: block;
	line-height: 0;
}

.scheduled-category-section .post-card .post-thumbnail {
	line-height: 0;
	font-size: 0;
}

.scheduled-category-section .post-card .post-thumbnail img,
.scheduled-category-section .post-card .post-thumbnail .post-thumbnail__img {
	border-radius: 8px 8px 0 0;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: 0;
	display: block;
}

.scheduled-category-section .post-card:hover .post-thumbnail img,
.scheduled-category-section .post-card:hover .post-thumbnail .post-thumbnail__img {
	transform: scale(1.02);
}

.scheduled-category-section .post-card .card-content {
	display: flex;
	flex-direction: column;
	padding: 12px 12px 16px;
	background: var(--color-teal);
	transition: background var(--transition-base);
}

.scheduled-category-section .post-card:hover .card-content {
	background: var(--color-green);
}

/* Category badge above title */
.scheduled-category-section .post-card .category-badge {
	order: -1;
	color: var(--color-white);
	text-decoration: underline;
	font-family: var(--font-cards);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 2px;
	transition: color var(--transition-fast);
}

.scheduled-category-section .post-card .category-badge:hover {
	color: var(--color-green);
}

.scheduled-category-section .post-card:hover .category-badge:hover {
	color: var(--color-teal);
}

.scheduled-category-section .post-card .card-title {
	font-family: var(--font-cards);
	font-size: 1.1rem;
	font-weight: var(--fw-regular);
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

.scheduled-category-section .post-card .card-title a {
	color: var(--color-white);
}

.scheduled-category-section .post-card .card-title a:hover,
.scheduled-category-section .post-card .card-title a:focus-visible {
	color: var(--color-white);
}

.scheduled-category-section .post-card .card-excerpt {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
	margin-top: var(--space-xs);
}

.scheduled-category-section .post-card .card-excerpt p {
	margin: 0;
}


/* ==========================================================================
   6. The Latest
   ========================================================================== */

.latest-section {
	background: var(--color-green);
	padding: var(--space-section) 0;
}

.latest-section h2 {
	text-align: center;
	margin-bottom: var(--space-xl);
	color: var(--latest-heading-color, var(--color-white));
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: var(--fw-regular);
	font-size: var(--latest-heading-size, 2rem);
	font-family: var(--latest-heading-font, var(--font-headings, var(--font-primary)));
}

.latest-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}

.latest-card {
	background: var(--color-white);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: var(--color-black);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.latest-card:hover,
.latest-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.latest-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.latest-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.latest-card .latest-card__placeholder {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.latest-card .latest-card__placeholder svg {
	width: 100%;
	height: 100%;
}

.latest-card .card-content {
	padding: var(--space-sm);
}

.latest-card .card-meta {
	margin-bottom: var(--space-xs);
}

.latest-card .card-title {
	font-weight: var(--fw-bold);
	font-size: 1rem;
	padding: var(--space-xs) 0;
	margin-bottom: var(--space-xs);
	line-height: 1.4;
}

.latest-card .card-excerpt {
	font-size: 0.9rem;
	color: var(--color-gray-dark);
	line-height: 1.6;
}

.latest-card .card-excerpt p {
	margin: 0;
}


/* --- The Latest section card overrides (green → teal on hover) ---------- */

.latest-category-card .post-card {
	border-radius: 0;
	box-shadow: none;
	background: var(--color-green);
}

.latest-category-card .post-card:hover {
	transform: none;
	box-shadow: none;
	background: var(--color-teal);
}

.latest-category-card .post-card .post-thumbnail-link {
	display: block;
	line-height: 0;
}

.latest-category-card .post-card .post-thumbnail {
	line-height: 0;
	font-size: 0;
}

.latest-category-card .post-card .post-thumbnail img,
.latest-category-card .post-card .post-thumbnail .post-thumbnail__img {
	border-radius: 8px 8px 0 0;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: 0;
	display: block;
}

.latest-category-card .post-card:hover .post-thumbnail img,
.latest-category-card .post-card:hover .post-thumbnail .post-thumbnail__img {
	transform: scale(1.02);
}

.latest-category-card .post-card .card-content {
	display: flex;
	flex-direction: column;
	padding: 12px 12px 16px;
	background: var(--color-green);
	transition: background var(--transition-base);
}

.latest-category-card .post-card:hover .card-content {
	background: var(--color-teal);
}

.latest-category-card .post-card .category-badge {
	order: -1;
	color: var(--color-white);
	text-decoration: underline;
	font-family: var(--font-cards);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 2px;
	transition: color var(--transition-fast);
}

.latest-category-card .post-card:hover .category-badge {
	color: var(--color-white);
}

.latest-category-card .post-card .category-badge:hover {
	color: var(--color-teal);
}

.latest-category-card .post-card:hover .category-badge:hover {
	color: var(--color-green);
}

.latest-category-card .post-card .card-title {
	font-family: var(--font-cards);
	font-size: 1.1rem;
	font-weight: var(--fw-regular);
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

.latest-category-card .post-card .card-title a {
	color: var(--color-white);
	transition: color var(--transition-fast);
}

.latest-category-card .post-card:hover .card-title a {
	color: var(--color-white);
}

.latest-category-card .post-card .card-excerpt {
	color: var(--color-gray-dark);
	font-size: 0.85rem;
	margin-top: var(--space-xs);
	transition: color var(--transition-fast);
}

.latest-category-card .post-card:hover .card-excerpt {
	color: rgba(255, 255, 255, 0.85);
}

.latest-category-card .post-card .card-excerpt p {
	margin: 0;
}


/* --- "View More Recent Posts" link in The Latest section --- */
.latest-more {
	text-align: left;
	margin-top: var(--space-lg);
}

.latest-more__link {
	color: var(--color-white);
	font-weight: var(--fw-medium);
	font-size: 0.9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: color var(--transition-fast);
}

.latest-more__link:hover,
.latest-more__link:focus-visible {
	color: var(--color-teal);
}


/* ==========================================================================
   7. Newsletter / Substack
   ========================================================================== */

.newsletter-section {
	background: var(--color-teal);
	padding: var(--space-section) 0;
	text-align: center;
	color: var(--color-white);
}

.newsletter-section h2 {
	color: var(--newsletter-text-color, var(--color-white));
	margin-bottom: var(--space-sm);
	font-size: var(--newsletter-heading-size, 1.5rem);
	font-family: var(--newsletter-heading-font, var(--font-headings, var(--font-primary)));
}

.newsletter-section p {
	opacity: 0.9;
	margin-bottom: var(--space-lg);
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.newsletter-embed {
	max-width: 500px;
	margin: 0 auto;
	overflow: hidden;
}

/* Force Substack iframe to respect container width */
.newsletter-embed iframe {
	max-width: 100% !important;
	width: 100% !important;
}

.newsletter-placeholder {
	text-align: center;
}

.newsletter-placeholder__text {
	opacity: 0.8;
	font-style: italic;
	margin-bottom: var(--space-sm);
}

.newsletter-placeholder input {
	width: 100%;
	max-width: 400px;
	padding: var(--space-sm);
	border: 2px solid rgba(255, 255, 255, 0.3);
	background: transparent;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 1rem;
	border-radius: 4px;
	text-align: center;
}

.newsletter-placeholder input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.newsletter-placeholder input:disabled {
	cursor: default;
	opacity: 0.7;
}


/* ==========================================================================
   8. Your New Favorite
   ========================================================================== */

.new-favorite-section {
	position: relative;
	min-height: 500px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.new-favorite-section--empty {
	min-height: auto;
	background: var(--color-gray-light);
	align-items: center;
	justify-content: center;
	padding: var(--space-3xl);
}

.new-favorite-section .favorite-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--color-gray-light);
}

/* Dark gradient overlay for text readability */
.new-favorite-section .favorite-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
}

.favorite-content {
	position: relative;
	z-index: 1;
	color: var(--color-white);
	padding: var(--space-2xl);
	max-width: 600px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.favorite-content--placeholder {
	color: var(--color-gray);
	text-align: center;
	max-width: 100%;
}

.favorite-label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.85rem;
	font-weight: var(--fw-medium);
	margin-bottom: var(--space-xs);
	opacity: 0.9;
}

.favorite-content h2 {
	color: var(--color-white);
	font-size: 2rem;
	margin-bottom: var(--space-sm);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.favorite-excerpt {
	margin-bottom: var(--space-md);
	opacity: 0.9;
	line-height: 1.6;
}

.favorite-excerpt p {
	margin: 0;
}

/* Card style: text in a white box on the left of the photo, no dark overlay */
.new-favorite-section--card {
	align-items: center;
	justify-content: flex-start;
	padding: var(--space-xl) var(--space-2xl);
	/* Line the card up with the page content (logo, cards above) on wide screens. */
	padding-left: max(var(--space-2xl), calc((100% - var(--container-width)) / 2 + var(--space-md)));
}

.new-favorite-section--card .favorite-bg::after {
	display: none;
}

.new-favorite-section--card .favorite-content {
	background: var(--color-white);
	color: var(--color-body-text);
	text-shadow: none;
	max-width: 440px;
	padding: var(--space-lg);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.new-favorite-section--card .favorite-label {
	display: block;
	color: var(--color-gray);
	font-size: 0.75rem;
	padding-bottom: var(--space-xs);
	margin-bottom: var(--space-sm);
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	opacity: 1;
}

.new-favorite-section--card .favorite-content h2 {
	color: var(--color-body-text);
	text-shadow: none;
}

@media (max-width: 600px) {
	.new-favorite-section--card {
		justify-content: center;
		padding: var(--space-md);
	}

	.new-favorite-section--card .favorite-content {
		max-width: 100%;
		padding: var(--space-md);
	}
}

/* Keep the button text color on hover (override homepage a:hover) */
.homepage .new-favorite-section a:hover,
.homepage .new-favorite-section a:focus-visible {
	color: var(--favorite-btn-text, var(--color-white));
}

.btn-white {
	display: inline-block;
	background: var(--favorite-btn-bg, var(--color-green));
	color: var(--favorite-btn-text, var(--color-white));
	text-shadow: none;
	padding: var(--space-xs) var(--space-lg);
	font-weight: var(--fw-medium);
	font-family: var(--font-primary);
	text-decoration: none;
	border-radius: 4px;
	transition: all var(--transition-base);
}

.btn-white.btn-white:hover,
.btn-white.btn-white:focus-visible {
	background: var(--favorite-btn-hover-bg, var(--color-teal));
	color: var(--favorite-btn-text, var(--color-white));
}


/* ==========================================================================
   9. Responsive Overrides — Homepage
   --------------------------------------------------------------------------
   Mobile-first adjustments.  The main responsive.css handles global
   breakpoints; these are homepage-section-specific.
   ========================================================================== */

/* --- Tablet (max 1024px) ----------------------------------------------- */
@media (max-width: 1024px) {

	.category-images-grid {
		grid-template-columns: repeat(2, 1fr);
		margin-top: -80px;
	}

	.category-circles {
		gap: var(--space-md);
	}

	.category-circle .circle-image {
		width: calc(var(--circle-size) * 0.7);
		height: calc(var(--circle-size) * 0.7);
	}

	.seasonal-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.latest-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Scheduled/Latest post card grids: 2 columns on tablet */
	.scheduled-category-section .recipe-grid,
	.latest-category-card .recipe-grid {
		--grid-cols: 2;
	}

	.about-card {
		max-width: 90%;
	}
}

/* --- Mobile (max 768px) ------------------------------------------------ */
@media (max-width: 768px) {

	.hero-slogan {
		padding: var(--space-sm) 0 7rem;
	}

	.category-images-grid {
		margin-top: -80px;
	}

	/* Mobile: make rectangular categories square */
	.category-image-card {
		aspect-ratio: 1;
	}

	.category-circles {
		gap: var(--space-md);
	}

	.category-circle .circle-image {
		width: calc(var(--circle-size) * 0.5);
		height: calc(var(--circle-size) * 0.5);
	}

	.about-banner {
		padding: var(--space-2xl) 0;
	}

	.about-card {
		grid-template-columns: 1fr;
		text-align: center;
		max-width: 95%;
		padding: var(--space-lg);
	}

	.about-card__image {
		order: -1; /* Show image above text on mobile */
		max-width: 250px;
		margin: 0 auto;
	}

	.about-read-more {
		display: inline-block;
		margin-top: var(--space-xs);
	}

	/* Scheduled/Latest post card grids: 2 columns on mobile */
	.scheduled-category-section .recipe-grid,
	.latest-category-card .recipe-grid {
		--grid-cols: 2;
	}

	.seasonal-section {
		padding: var(--space-2xl) 0;
	}

	.latest-section {
		padding: var(--space-2xl) 0;
	}

	.new-favorite-section {
		min-height: 400px;
	}

	.favorite-content {
		padding: var(--space-lg);
	}

	.favorite-content h2 {
		font-size: 1.5rem;
	}

	.newsletter-section {
		padding: var(--space-2xl) 0;
	}

	.newsletter-embed {
		max-width: 100%;
	}

	.search-inline {
		flex-direction: column;
		gap: var(--space-sm);
		align-items: stretch;
	}

	.search-or {
		align-self: center;
	}

	.search-recipes-section .search-form {
		max-width: 100%;
	}

	.search-recipes-section .search-input-wrapper {
		min-width: 0;
	}

	.btn-green {
		width: 100%;
		min-width: 0;
	}
}

/* --- Small mobile (max 480px) ------------------------------------------ */
@media (max-width: 480px) {

	/* Category layout handled by responsive.css (single source of truth) */

	.new-favorite-section {
		min-height: 350px;
	}
}