/* ═══════════════════════════════════════════════════════════════
   archive.css — Zavify WordPress Theme
   Archive, category, tag, search results pages
═══════════════════════════════════════════════════════════════ */

/* ─── Archive Header ────────────────────────────────────────── */
.archive-hero {
  padding: 5rem 1.5rem 3rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, rgba(185,251,106,0.08), transparent);
  text-align: center;
}
.archive-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.875rem; border-radius: 9999px;
  border: 1px solid var(--border); background-color: var(--card);
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--muted-foreground); margin-bottom: 1.25rem;
}
.archive-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900; letter-spacing: -0.04em; line-height: 1.0;
  margin-bottom: 1rem;
}
.archive-hero__title span { background-color: var(--accent); padding-inline: 0.5rem; }
.archive-hero__desc { font-size: 1.0625rem; color: var(--muted-foreground); max-width: 560px; margin-inline: auto; }
.archive-hero__count {
  margin-top: 1.5rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted-foreground);
}
.archive-hero__count strong { color: var(--foreground); }

/* ─── Archive Layout ────────────────────────────────────────── */
.archive-layout {
  max-width: 1280px; margin-inline: auto;
  padding: 4rem 1.5rem;
  display: grid; gap: 4rem; grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .archive-layout { grid-template-columns: 1fr 300px; align-items: start; }
}

/* ─── Featured Hero Post (first in archive) ─────────────────── */
.archive-hero-post {
  display: flex; flex-direction: column;
  margin-bottom: 3rem;
  border: 1px solid var(--border); border-radius: var(--radius-3xl);
  overflow: hidden; background-color: var(--card);
  box-shadow: var(--shadow-soft); text-decoration: none; color: var(--foreground);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.archive-hero-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
@media (min-width: 768px) {
  .archive-hero-post { flex-direction: row; }
  .archive-hero-post .archive-hero-post__img-wrap { width: 55%; flex-shrink: 0; }
}
.archive-hero-post__img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; }
@media (min-width: 768px) { .archive-hero-post__img-wrap { aspect-ratio: auto; min-height: 320px; } }
.archive-hero-post__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.archive-hero-post:hover .archive-hero-post__img { transform: scale(1.04); }
.archive-hero-post__body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; flex: 1; }
.archive-hero-post__title { font-family: var(--font-display); font-size: 1.625rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin-block: 0.75rem 0.875rem; }
.archive-hero-post__excerpt { font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.7; margin-bottom: 1.5rem; }
.archive-hero-post__footer { display: flex; align-items: center; justify-content: space-between; }
.archive-hero-post__arrow { width: 16px; height: 16px; transition: transform 0.2s; }
.archive-hero-post:hover .archive-hero-post__arrow { transform: rotate(45deg); }

/* ─── Posts Grid ────────────────────────────────────────────── */
.archive-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }

/* ─── Sidebar ───────────────────────────────────────────────── */
.archive-sidebar {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 1.75rem;
}
.sidebar-box {
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  padding: 1.5rem; background-color: var(--card);
}
.sidebar-box__title {
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground);
  margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);
}
/* Category list */
.cat-list { display: flex; flex-direction: column; gap: 0.25rem; }
.cat-list__item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.75rem; border-radius: var(--radius-md);
  text-decoration: none; color: var(--foreground);
  font-size: 0.9rem; font-weight: 600;
  transition: background-color 0.15s;
}
.cat-list__item:hover { background-color: var(--muted); }
.cat-list__item.active { background-color: var(--accent); }
.cat-list__count {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  color: var(--muted-foreground); background-color: var(--muted);
  padding: 0.15rem 0.5rem; border-radius: 9999px;
}
.cat-list__item.active .cat-list__count { background-color: rgba(15,15,15,0.15); color: var(--foreground); }
/* Recent posts mini list */
.recent-list { display: flex; flex-direction: column; gap: 1rem; }
.recent-item { display: flex; gap: 0.75rem; align-items: flex-start; text-decoration: none; color: var(--foreground); transition: opacity 0.15s; }
.recent-item:hover { opacity: 0.75; }
.recent-item__img { width: 56px; height: 56px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; background-color: var(--muted); }
.recent-item__img img { width: 100%; height: 100%; object-fit: cover; }
.recent-item__title { font-size: 0.875rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.25rem; }
.recent-item__date { font-family: var(--font-mono); font-size: 0.65rem; color: var(--muted-foreground); }
/* Newsletter widget */
.newsletter-widget .sidebar-box__form { margin-top: 1rem; }
.newsletter-widget input[type="email"] {
  width: 100%; padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  background-color: var(--muted); font: inherit; font-size: 0.875rem;
  color: var(--foreground); outline: none;
  transition: border-color 0.2s; margin-bottom: 0.625rem;
}
.newsletter-widget input:focus { border-color: var(--foreground); }
.newsletter-widget .btn { width: 100%; justify-content: center; }

/* ─── Search Results ────────────────────────────────────────── */
.search-results-hero {
  padding: 5rem 1.5rem 3rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, rgba(185,251,106,0.08), transparent);
}
.search-results-hero__inner { max-width: 860px; margin-inline: auto; }
.search-results-hero__label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted-foreground);
  margin-bottom: 0.75rem;
}
.search-results-hero__query {
  font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 900; letter-spacing: -0.035em;
}
.search-results-hero__query mark {
  background-color: var(--accent); color: var(--foreground);
  padding-inline: 0.3rem; border-radius: 4px;
}
.search-results-hero__count {
  margin-top: 0.75rem; font-size: 1rem; color: var(--muted-foreground);
}
/* Inline search form on results page */
.search-results-hero__form {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 2rem; padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border: 1.5px solid var(--border); border-radius: 9999px;
  background-color: var(--card); max-width: 540px;
  box-shadow: var(--shadow-soft);
}
.search-results-hero__form:focus-within { border-color: var(--foreground); }
.search-results-hero__form input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 1rem; font-weight: 600; color: var(--foreground);
}
.search-results-hero__form input::placeholder { color: var(--muted-foreground); }
.search-results-hero__form button {
  padding: 0.625rem 1.25rem; border-radius: 9999px;
  background-color: var(--foreground); color: var(--background);
  font-size: 0.875rem; font-weight: 700; border: none; cursor: pointer;
  transition: opacity 0.2s; flex-shrink: 0;
}
.search-results-hero__form button:hover { opacity: 0.85; }

/* ─── No Results ────────────────────────────────────────────── */
.no-results {
  text-align: center; padding: 6rem 1.5rem;
  max-width: 560px; margin-inline: auto;
}
.no-results__icon { font-size: 4rem; margin-bottom: 1.5rem; }
.no-results__title { font-size: 2rem; font-weight: 800; margin-bottom: 0.75rem; }
.no-results__desc { color: var(--muted-foreground); margin-bottom: 2rem; }
.no-results__suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }