/* ================================================================
   BLOG & ARTICLES — Revolution Speciality Food
   Palette: terra (orange), cocoa (brown), cream (beige)
   ================================================================ */

/* ── Card grid ── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.blog-grid--4 { grid-template-columns:repeat(4,1fr); }

/* ── Article card ── */
.blog-article-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1.5rem;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height:100%;
}
.blog-article-card:hover {
  transform:translateY(-4px);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.1);
  border-color:var(--terra);
}
.blog-article-card .card-img-wrap {
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--cream-deep);
}
.blog-article-card .card-img-wrap img {
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.blog-article-card:hover .card-img-wrap img { transform:scale(1.05); }
.blog-article-card .card-body {
  padding:1.25rem 1.25rem 1.5rem;
  flex:1;display:flex;flex-direction:column;
}
.blog-article-card .card-cat {
  display:inline-block;align-self:flex-start;
  font-family:var(--font-body);
  font-size:.625rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terra);
  margin-bottom:.625rem;
  padding:3px 10px;border-radius:999px;
  background:color-mix(in srgb, var(--terra) 10%, #0000);
}
.blog-article-card h3 {
  font-family:var(--font-display);
  font-size:1.125rem;font-weight:600;line-height:1.25;
  color:var(--cocoa-deep);margin-bottom:.5rem;
}
.blog-article-card .card-excerpt {
  font-family:var(--font-body);
  font-size:.8125rem;color:var(--muted-foreground);line-height:1.55;
  flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-article-card .card-meta {
  display:flex;align-items:center;gap:.75rem;margin-top:.875rem;
  font-family:var(--font-body);font-size:.6875rem;
  color:var(--muted-foreground);letter-spacing:.02em;
}
.blog-article-card .card-meta .dot { color:var(--terra);font-weight:700; }

/* ── Listing header ── */
.blog-listing-header { margin-bottom:2.5rem; }
.blog-listing-header .blog-title-row {
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;margin-bottom:1.25rem;flex-wrap:wrap;
}
.blog-listing-header h1 {
  font-family:var(--font-display);
  font-size:clamp(2.25rem,4.5vw,3.5rem);font-weight:600;
  color:var(--cocoa-deep);line-height:1.05;
}
.blog-listing-header h1 em { font-style:italic;color:var(--terra); }
.blog-listing-header .subtitle {
  font-family:var(--font-body);
  color:var(--muted-foreground);font-size:.9375rem;
  max-width:36ch;margin-top:.5rem;
}

/* ── Search ── */
.blog-search {
  display:flex;align-items:center;gap:.5rem;
  padding:.625rem 1.125rem;
  border:1px solid var(--border);border-radius:999px;
  background:var(--card);min-width:260px;
  transition:border-color .2s, box-shadow .2s;
}
.blog-search:focus-within {
  border-color:var(--terra);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--terra) 20%, #0000);
}
.blog-search svg { width:1.125rem;height:1.125rem;color:var(--muted-foreground);flex-shrink:0; }
.blog-search input {
  border:none;outline:none;background:transparent;
  font-family:var(--font-body);font-size:.875rem;color:var(--cocoa-deep);width:100%;
}
.blog-search input::placeholder { color:var(--muted-foreground); }

/* ── Filter pills ── */
.blog-filters { display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem; }
.blog-filter-pill {
  padding:.5rem 1.125rem;border-radius:999px;
  border:1px solid var(--border);
  font-family:var(--font-body);font-size:.75rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--cocoa);background:transparent;
  cursor:pointer;transition:all .18s ease;
}
.blog-filter-pill:hover { border-color:var(--terra);color:var(--terra); }
.blog-filter-pill.active {
  background:var(--terra);border-color:var(--terra);color:#fff;
}

/* ── Empty state ── */
.blog-empty { text-align:center;padding:4rem 1.5rem;color:var(--muted-foreground); }
.blog-empty h3 {
  font-family:var(--font-display);font-size:1.25rem;font-weight:600;
  color:var(--cocoa-deep);margin-bottom:.5rem;
}

/* =============================================================
   ARTICLE DETAIL
   ============================================================= */

/* constrain text content to readable width */
.article-back,
.article-detail,
.article-bar,
.article-body,
.article-conclusion,
.article-tags-row,
.article-top-meta {
  /*max-width:48rem;*/
  margin-left:auto;
  margin-right:auto;
}

.article-back {
  display:inline-flex;align-items:center;gap:.375rem;
  font-family:var(--font-body);font-size:.8125rem;font-weight:500;
  color:var(--cocoa);text-decoration:none;
  margin:2rem 0;
  transition:color .2s;
}
.article-back:hover { color:var(--terra); }
.article-back svg { width:1rem;height:1rem; }

/* hero image */
.article-hero-img {
  border-radius:1.5rem;
  overflow:hidden;
  margin:2rem 0;
  aspect-ratio:16/9;
}
.article-hero-img img { width:100%;height:100%;object-fit:cover;display:block; }

/* header meta row */
.article-top-meta {
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:1rem;flex-wrap:wrap;
}
.article-top-meta .art-badge {
  display:inline-flex;align-items:center;
  padding:.25rem .625rem;border-radius:.25rem;
  font-family:var(--font-body);font-size:.625rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
}
.art-badge-cat { background:var(--terra); }
.art-badge-time { background:var(--cocoa-deep); }
.article-top-meta .art-date {
  font-family:var(--font-body);font-size:.75rem;
  color:var(--muted-foreground);letter-spacing:.02em;
}

.article-detail h1 {
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem);font-weight:700;
  line-height:1.1;color:var(--cocoa-deep);margin-bottom:.75rem;
}
.article-detail .art-subtitle {
  font-family:var(--font-body);font-size:1rem;
  color:var(--muted-foreground);line-height:1.6;
  margin-bottom:1.75rem;max-width:56ch;
}

/* author + share bar */
.article-bar {
  display:flex;align-items:center;justify-content:space-between;
  gap:1.25rem;padding:1.25rem 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin-bottom:2rem;flex-wrap:wrap;
}
.article-author { display:flex;align-items:center;gap:.75rem; }
.article-author img {
  width:2.75rem;height:2.75rem;border-radius:50%;
  object-fit:cover;border:2px solid var(--terra);
}
.article-author .auth-name {
  font-family:var(--font-body);font-size:.875rem;font-weight:600;
  color:var(--cocoa-deep);
}
.article-author .auth-label {
  font-family:var(--font-body);font-size:.75rem;
  color:var(--muted-foreground);margin-top:1px;
}

.article-share { display:flex;gap:.5rem; }
.article-share button,
.article-share a {
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:50%;
  border:1px solid var(--border);background:var(--card);
  color:var(--cocoa);cursor:pointer;text-decoration:none;
  transition:all .18s ease;
}
.article-share button:hover,
.article-share a:hover { border-color:var(--terra);color:var(--terra); }
.article-share svg { width:.875rem;height:.875rem; }

/* ── Article body (rendered HTML) ── */
.article-body {
  font-family:var(--font-body);line-height:1.78;color:var(--cocoa);
}
.article-body h2 {
  font-family:var(--font-display);font-size:1.5rem;font-weight:600;
  color:var(--cocoa-deep);margin:2.5rem 0 .875rem;line-height:1.2;
}
.article-body h3 {
  font-family:var(--font-display);font-size:1.15rem;font-weight:600;
  color:var(--cocoa-deep);margin:1.75rem 0 .5rem;
}
.article-body p { margin-bottom:1rem;font-size:.9375rem; }
.article-body ul,
.article-body ol { margin:.75rem 0 1.25rem 1.5rem;font-size:.9375rem; }
.article-body li { margin-bottom:.375rem; }
.article-body blockquote {
  margin:1.5rem 0;padding:1rem 1.5rem;
  border-left:3px solid var(--terra);
  background:var(--cream-deep);
  border-radius:0 .75rem .75rem 0;font-style:italic;
}
.article-body img { border-radius:1rem;margin:1.5rem 0;max-width:100%;height:auto; }
.article-body table { width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.875rem; }
.article-body th,
.article-body td { padding:.625rem .875rem;border:1px solid var(--border);text-align:left; }
.article-body th { background:var(--cream-deep);font-weight:600;color:var(--cocoa-deep); }

/* conclusion callout */
.article-conclusion {
  margin-top:2rem;padding:1.5rem 1.75rem;
  border-left:3px solid var(--terra);
  background:var(--cream-deep);
  border-radius:0 .75rem .75rem 0;
}
.article-conclusion * {
  font-family:var(--font-body);font-size:.9375rem;
  color:var(--cocoa);line-height:1.75;font-style:italic;
}

/* tags */
.article-tags-row {
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid var(--border);
}
.article-tag {
  display:inline-flex;padding:.25rem .75rem;border-radius:999px;
  border:1px solid var(--border);
  font-family:var(--font-body);font-size:.6875rem;font-weight:500;
  color:var(--cocoa);letter-spacing:.02em;
}

/* related */
.related-articles {
  margin-top:4rem;padding-top:2.5rem;
  border-top:1px solid var(--border);
}
.related-articles h2 {
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3vw,2rem);font-weight:600;
  color:var(--cocoa-deep);margin-bottom:1.75rem;
}

/* ── Mobile share ── */
.mobile-share-bar {
  display:none;margin:1.25rem 0;padding:1.25rem 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.mobile-share-bar .share-label {
  font-family:var(--font-body);font-size:.75rem;font-weight:500;
  color:var(--muted-foreground);margin-bottom:.75rem;
}
.mobile-share-bar .share-row { display:flex;gap:.625rem;flex-wrap:wrap; }
.share-btn-wide {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:999px;
  border:1px solid var(--border);background:var(--card);
  color:var(--cocoa-deep);
  font-family:var(--font-body);font-size:.8125rem;font-weight:500;
  cursor:pointer;text-decoration:none;transition:all .18s ease;
}
.share-btn-wide:hover { border-color:var(--terra);color:var(--terra); }
.share-btn-wide svg { width:.875rem;height:.875rem; }

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width:1080px) {
  .blog-grid--4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .blog-grid { grid-template-columns:repeat(2,1fr); }
  .blog-listing-header .blog-title-row { flex-direction:column;align-items:flex-start;gap:1rem; }
  .blog-search { min-width:0;width:100%; }
}
@media (max-width:640px) {
  .blog-grid { grid-template-columns:1fr; }
  .blog-grid--4 { grid-template-columns:1fr; }
  .blog-listing-header h1 { font-size:1.75rem; }
  .article-detail h1 { font-size:1.5rem; }
  .article-bar { flex-direction:column;align-items:flex-start;gap:1rem; }
  .article-conclusion { padding:1.25rem 1rem; }
  .mobile-share-bar { display:block; }
  .article-share { display:none; }
}

@media (max-width:400px) {
  .blog-article-card .card-body { padding:1rem 1rem 1.25rem; }
}