/* ============================================================
   Cool & Comfy premium — blog index (/blog/).
   Design tokens from redesign-premium.css; hero + card language
   mirrors the shop template for one consistent site.
   ============================================================ */

.cc-blog{background:var(--cc-cream)}
.cc-blog-hero{background-size:cover;background-position:center 38%}
.cc-blog-list{padding:56px 0 88px}
.cc-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

.cc-blog-card{
  display:flex;flex-direction:column;background:var(--cc-paper);
  border:1px solid var(--cc-line);border-radius:var(--cc-radius);
  overflow:hidden;text-decoration:none;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.cc-blog-card:hover{transform:translateY(-4px);box-shadow:var(--cc-shadow-sm);border-color:var(--cc-gold)}
.cc-blog-media{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--cc-cream-deep)}
.cc-blog-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.cc-blog-card:hover .cc-blog-media img{transform:scale(1.04)}
.cc-blog-body{display:flex;flex-direction:column;gap:10px;padding:24px;flex:1}
.cc-blog-meta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--cc-stone);font-weight:500;flex-wrap:wrap}
.cc-readtime-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cc-gold-deep);background:rgba(192,127,46,.12);
  border:1px solid rgba(192,127,46,.35);border-radius:999px;padding:5px 12px;
}
.cc-readtime-badge svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cc-blog-title{
  font-family:var(--cc-font-d);font-size:21px;font-weight:600;color:var(--cc-ink);
  line-height:1.3;letter-spacing:-.01em;
}
.cc-blog-exc{font-size:14.5px;color:var(--cc-stone);line-height:1.65}
.cc-blog-more{
  margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--cc-gold-deep);
  letter-spacing:.06em;text-transform:uppercase;
}
.cc-blog-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.cc-blog-card:hover .cc-blog-more svg{transform:translateX(4px)}

/* Pagination: WordPress paginate_links() markup, dressed like .cc-pg */
.cc-blog .cc-pager ul{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;margin:52px 0 12px;padding:0;flex-wrap:wrap}
.cc-blog .cc-pager .page-numbers{
  min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--cc-line-dark);border-radius:12px;background:var(--cc-paper);
  font-size:14.5px;font-weight:600;color:var(--cc-ink-soft);text-decoration:none;padding:0 14px;
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .18s ease;
}
.cc-blog .cc-pager a.page-numbers:hover{border-color:var(--cc-gold);color:var(--cc-gold-deep);transform:translateY(-1px)}
.cc-blog .cc-pager .page-numbers.current{background:var(--cc-ink);border-color:var(--cc-ink);color:var(--cc-gold-soft);cursor:default}
.cc-blog .cc-pager .page-numbers.dots{border:0;background:transparent;color:var(--cc-stone-light);letter-spacing:.2em;min-width:0}
.cc-blog .cc-pager .page-numbers svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cc-blog .cc-pager .page-numbers:focus-visible{outline:2px solid var(--cc-gold);outline-offset:2px}

@media(max-width:1080px){
  .cc-blog-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .cc-blog-grid{grid-template-columns:1fr;gap:16px}
  .cc-blog-list{padding:40px 0 64px}
  .cc-blog-body{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  .cc-blog-card,.cc-blog-media img,.cc-blog-more svg{transition:none}
  .cc-blog-card:hover{transform:none}
}