/* =============================================================================
   ZenSleepZone — Category Archive + Blog (page-blog)
   File: css/zsz-archive.css
   Loaded: functions.php — is_category() | is_page_template('page-blog.php')
   Depends: zsz-tokens.css, zsz-shared.css
   NOTE: Card chrome (.zsz-card, .zsz-card__img etc.) lives in zsz-shared.css.
         This file adds archive-specific layout, hero, filters, and grid sizing.
   ============================================================================= */

/* ═══════════════════════════════════════════════════════════════════════════
   ARCHIVE HERO — used by both category.php and page-blog.php
   ═══════════════════════════════════════════════════════════════════════════ */
.zsz-archive-hero {
  padding: 4.5rem 1.5rem 3.5rem;
  text-align: center;
  /* background comes from .zsz-hero-bg in zsz-shared */
}
.zsz-archive-hero__inner {
  max-width: 840px;
  margin: 0 auto;
}
.zsz-archive-hero__title {
  font-family: var(--ast-heading-font-family,'Lora',serif);
  font-size: clamp(2rem,5vw,3.5rem);
  font-weight: 800;
  color: #fff;
  margin: .5rem 0 .9rem;
}
.zsz-archive-hero__desc {
  font-size: clamp(1rem,2vw,1.18rem);
  color: rgba(255,255,255,.92);
  margin-bottom: .75rem;
  line-height: 1.65;
}
.zsz-archive-hero__meta {
  font-size: .85rem;
  color: rgba(255,255,255,.72);
  margin-bottom: 1.5rem;
}
/* Breadcrumb */
.zsz-breadcrumb {
  font-size: .78rem;
  color: rgba(255,255,255,.72);
  margin-bottom: 1.4rem;
  display: flex;
  justify-content: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.zsz-breadcrumb a { color: rgba(255,255,255,.72); text-decoration:none; }
.zsz-breadcrumb a:hover { color:#fff; }
.zsz-breadcrumb__sep { color:rgba(255,255,255,.40); }
/* Category nav pills */
.zsz-archive-nav {
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
/* Type tabs (secondary row) */
.zsz-archive-type-tabs {
  display: flex;
  gap: .45rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.zsz-archive-type-tab {
  padding: .38rem 1rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 50px;
  color: rgba(255,255,255,.85);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--zsz-ease);
}
.zsz-archive-type-tab:hover,
.zsz-archive-type-tab.active {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.55);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG PAGE HERO (slightly different padding/filters)
   ═══════════════════════════════════════════════════════════════════════════ */
.zsz-blog-hero {
  padding: 3rem 0;
  margin-bottom: 3rem;
  /* full-width bleed for page-blog layout */
  width: 100vw;
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
}
.zsz-blog-hero__content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}
.zsz-blog-hero h1 {
  font-size: clamp(2.2rem,4.5vw,3.5rem);
  font-weight: 700; line-height: 1.1;
  color: #fff; margin-bottom: 1.5rem;
}
.zsz-blog-hero p {
  font-size: clamp(1rem,2.2vw,1.25rem);
  opacity: .95; margin-bottom: 2.5rem;
  line-height: 1.65;
}
/* Filter bar */
.zsz-filter-bar {
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.10);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.20);
}
.zsz-filter-tabs {
  display: flex;
  gap: .8rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.zsz-filter-tab {
  padding: .75rem 1.5rem;
  border: 2px solid rgba(255,255,255,.30);
  border-radius: 50px;
  background: rgba(255,255,255,.15);
  color: #fff; cursor:pointer;
  transition: all var(--zsz-ease);
  font-weight: 600; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .5px;
  text-decoration: none; backdrop-filter: blur(10px);
}
.zsz-filter-tab.active { background:rgba(255,255,255,.30); border-color:rgba(255,255,255,.55); transform:translateY(-2px); }
.zsz-filter-tab:hover  { background:rgba(255,255,255,.25); transform:translateY(-2px); color:#fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   BODY LAYOUT — Two-column (main + sidebar)
   ═══════════════════════════════════════════════════════════════════════════ */
.zsz-archive-body {
  max-width: var(--zsz-max-w-wide);
  margin: 0 auto;
  padding: 2.8rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: 1fr var(--zsz-sidebar-w);
  gap: 2.5rem;
  align-items: start;
}
@media (max-width:1100px) {
  .zsz-archive-body {
    grid-template-columns: 1fr;
  }
  .zsz-archive-body > .zsz-sidebar { display:none; }
}

/* ─── Blog page (no sidebar) ─── */
.zsz-blog-body {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS GRID
   ═══════════════════════════════════════════════════════════════════════════ */
.zsz-archive-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.75rem;
}
@media (max-width:960px) { .zsz-archive-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .zsz-archive-grid { grid-template-columns:1fr; } }

/* Blog page uses same grid class but full-width */
.zsz-blog-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}
@media (max-width:1200px) { .zsz-blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px)  { .zsz-blog-grid { grid-template-columns:1fr; gap:1.5rem; } }

/* Card sizing for archive */
.zsz-archive-grid .zsz-card__img,
.zsz-blog-grid    .zsz-card__img { height:180px; }

/* Card title */
.zsz-archive-grid .zsz-card__title,
.zsz-blog-grid    .zsz-card__title {
  font-family: var(--ast-heading-font-family,'Lora',serif);
  font-size:1.08rem; font-weight:700; color:var(--zsz-t1);
  line-height:1.35; margin:0 0 .5rem;
}
.zsz-archive-grid .zsz-card__title a,
.zsz-blog-grid    .zsz-card__title a { color:inherit; text-decoration:none; }
.zsz-archive-grid .zsz-card__title a:hover,
.zsz-blog-grid    .zsz-card__title a:hover { color:var(--zsz-primary); }

/* Card excerpt */
.zsz-archive-grid .zsz-card__excerpt,
.zsz-blog-grid    .zsz-card__excerpt {
  font-size:.87rem; color:var(--zsz-t2); line-height:1.6; margin-bottom:1rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  flex:1;
}

/* ─── Blog card hover (blog page has slightly bigger scale effect) ─── */
.zsz-blog-grid .zsz-card:hover { transform:translateY(-10px) scale(1.02); }

/* ═══════════════════════════════════════════════════════════════════════════
   RELATED POSTS — bottom of category page
   ═══════════════════════════════════════════════════════════════════════════ */
.zsz-related-posts {
  background: var(--zsz-bg-card);
  border-top: 3px solid var(--zsz-border);
  padding: 3.5rem 1.5rem;
}
.zsz-related-posts__inner { max-width: var(--zsz-max-w); margin:0 auto; }
.zsz-related-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (max-width:768px) { .zsz-related-grid { grid-template-columns:1fr; } }
.zsz-related-card {
  background: var(--zsz-bg);
  border: 1.5px solid var(--zsz-border);
  border-radius: 16px; overflow:hidden;
  transition: transform var(--zsz-ease);
}
.zsz-related-card:hover { transform:translateY(-6px); }
.zsz-related-card__thumb { height:130px; overflow:hidden; position:relative; }
.zsz-related-card__thumb img { width:100%; height:100%; object-fit:cover; }
.zsz-related-card__body { padding:1.2rem; }
.zsz-related-card__title {
  font-family: var(--ast-heading-font-family,'Lora',serif);
  font-size:.98rem; font-weight:700; color:var(--zsz-t1);
  text-decoration:none; display:block; margin-bottom:.55rem;
}
.zsz-related-card__title:hover { color:var(--zsz-primary); }
.zsz-related-card__link {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.78rem; font-weight:600; color:var(--zsz-primary); text-decoration:none;
}