/* ==========================================================================
   HOMEPAGE — HERO
   ========================================================================== */

.hero {
  padding-block: var(--space-8) var(--space-7);
  background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-bg) 65%);
}
.hero__inner { max-width: 760px; }
.hero__title { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.hero__subtitle { font-size: var(--text-md); color: var(--color-text-muted); max-width: 52ch; margin-bottom: var(--space-6); }
.hero__search { max-width: 560px; margin-bottom: var(--space-5); }
.hero__chips { margin-top: var(--space-2); }

/* ==========================================================================
   HOMEPAGE — GENERIC SECTIONS
   ========================================================================== */

.homepage-section + .homepage-section { border-top: 1px solid var(--color-border); }
.homepage-section--alt { background: var(--color-bg-alt); border-top: none; border-bottom: none; }

.classics-strip .recipe-card__body { background: var(--color-bg-alt); }

.seasonal-section {
  background: var(--color-accent-secondary);
  color: var(--color-text-on-dark);
}
.seasonal-section .eyebrow { color: var(--mk-gold); }
.seasonal-section h2 { color: var(--color-text-on-dark); }
.seasonal-section .section-heading p { color: var(--color-text-on-dark-muted); }
.seasonal-section .recipe-card__category { color: var(--mk-gold); }

/* ==========================================================================
   SINGLE RECIPE ARTICLE
   ========================================================================== */

.recipe-article__header { padding-block: var(--space-6) var(--space-5); }
.recipe-article__title { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.recipe-article__dek { font-size: var(--text-md); color: var(--color-text-muted); max-width: var(--container-narrow); margin-bottom: var(--space-4); }

.recipe-article__byline {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.recipe-article__byline .divider { opacity: 0.5; }
.recipe-article__byline .recipe-card__meta-item .icon { width: 15px; height: 15px; }

.recipe-article__featured-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-block: var(--space-5);
}
.recipe-article__featured-image img { width: 100%; height: 100%; object-fit: cover; }

.recipe-article__layout {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .recipe-article__layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

.recipe-article__body { max-width: var(--container-narrow); }
.recipe-article__body p, .recipe-article__body ul, .recipe-article__body ol { font-size: var(--text-md); }
.recipe-article__body h2 { margin-top: var(--space-7); }
.recipe-article__body h3 { margin-top: var(--space-6); }
.recipe-article__body img { border-radius: var(--radius-md); margin-block: var(--space-5); }
.recipe-article__body blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4);
  margin: var(--space-5) 0;
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-text-muted);
}

/* --- The recipe card itself: visually distinct from the surrounding
       story so it reads as "the tool," not more narrative. ------------- */
.recipe-details-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 6px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-block: var(--space-7);
  max-width: var(--container-narrow);
}
.recipe-details-box__header { margin-bottom: var(--space-5); }
.recipe-details-box__title { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.recipe-details-box__description { color: var(--color-text-muted); }

.recipe-details-box__actions {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin: var(--space-5) 0;
}

.recipe-details-box__columns { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
@media (min-width: 720px) {
  .recipe-details-box__columns { grid-template-columns: 1fr 1.4fr; }
}

.recipe-details-box__servings-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.recipe-notes {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-top: var(--space-6);
}
.recipe-notes h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }

.recipe-details-box__rating { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }

/* --- Desktop-only rail: sticky ad + one focused discovery module.
       Deliberately NOT a general widget area -- see inc/setup.php. ----- */
.recipe-rail-desktop { display: none; }
@media (min-width: 1024px) {
  .recipe-rail-desktop { display: block; position: sticky; top: calc(var(--header-height) + var(--space-4)); }
  .recipe-rail-desktop .ad-slot { margin-top: 0; }
}
.recipe-rail-desktop__popular {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-5);
}
.recipe-rail-desktop__popular h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); }
.recipe-rail-desktop__popular-item { display: flex; gap: var(--space-3); align-items: center; padding-block: var(--space-2); }
.recipe-rail-desktop__popular-item img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.recipe-rail-desktop__popular-item a { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); text-decoration: none; }
.recipe-rail-desktop__popular-item a:hover { color: var(--color-accent-hover); }

/* --- Comments ------------------------------------------------------------ */
.comments-area { max-width: var(--container-narrow); margin-top: var(--space-8); }
.comments-title { font-size: var(--text-xl); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body { padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.comment-author { font-weight: 700; font-family: var(--font-heading); }
.comment-metadata { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] {
  width: 100%; padding: var(--space-3); border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); margin-bottom: var(--space-3);
}

/* ==========================================================================
   ARCHIVE / CATEGORY / TAXONOMY
   ========================================================================== */

.archive-header { padding-block: var(--space-6) var(--space-5); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-6); }
.archive-header__title { margin-bottom: var(--space-2); }
.archive-header__description { color: var(--color-text-muted); max-width: 70ch; }
.archive-header__count { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

.archive-layout { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1024px) {
  .archive-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .archive-layout--sidebar-left { grid-template-columns: 280px minmax(0, 1fr); }
  .archive-layout--sidebar-left .archive-sidebar { order: -1; }
}

.archive-sidebar { display: none; }
@media (min-width: 1024px) {
  .archive-sidebar { display: block; position: sticky; top: calc(var(--header-height) + var(--space-4)); }
}
.filter-group { margin-bottom: var(--space-6); }
.filter-group__title { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); color: var(--color-text-muted); }
.filter-group ul { list-style: none; margin: 0; padding: 0; }
.filter-group li { margin-bottom: 0; }
.filter-group a {
  display: flex; justify-content: space-between; padding: var(--space-2) 0;
  color: var(--color-text); text-decoration: none; font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
}
.filter-group a:hover { color: var(--color-accent-hover); }
.filter-group a span { color: var(--color-text-muted); }

/* Mobile: horizontal filter chip row instead of a sidebar */
.archive-filter-chips { display: block; margin-bottom: var(--space-6); }
@media (min-width: 1024px) { .archive-filter-chips { display: none; } }

/* ==========================================================================
   SEARCH
   ========================================================================== */

.search-header { padding-block: var(--space-7) var(--space-5); text-align: center; }
.search-header__form { max-width: 560px; margin: var(--space-5) auto 0; }
.search-header__count { color: var(--color-text-muted); margin-top: var(--space-3); }

/* ==========================================================================
   GENERIC PAGE (about, privacy, contact)
   ========================================================================== */

.page-content { max-width: var(--container-narrow); padding-block: var(--space-6) var(--space-8); }
.page-content h1 { font-size: var(--text-2xl); }