/* =======================================================
   BLOG (Archive / Blog / Category / Tag / Search posts)
   File: assets/css/blog.css
   Layer: pages
   Goal: Token-only colors + predictable cascade + scoped rules
======================================================= */


  /* -------------------------------------------------------
     0) SCOPE (only pages that list posts)
     WP body classes include: blog, archive, search, etc.
  ------------------------------------------------------- */
  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-list-section{
    padding: var(--space-xl) 0;
    background: var(--color-bg);
  }

  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-list{
    max-width: 1020px;
    margin: 0 auto;
  }

  /* Optional: keep the archive hero tidy (safe even if layout.css already handles it) */
  :where(body.blog, body.archive, body.category, body.tag, body.search) .page-hero-simple{
    margin-bottom: var(--space-lg);
    text-align: center;
  }
  :where(body.blog, body.archive, body.category, body.tag, body.search) .page-hero-simple .page-title{
    color: var(--color-dark);
  }
  :where(body.blog, body.archive, body.category, body.tag, body.search) .page-hero-simple .page-subtitle{
    color: var(--color-dark);
    opacity: .90;
    max-width: 760px;
    margin: 10px auto 0;
  }

  /* -------------------------------------------------------
     1) GRID
  ------------------------------------------------------- */
  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
  }

  @media (max-width: 992px){
    :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 620px){
    :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-grid{
      grid-template-columns: 1fr;
    }
  }

  /* -------------------------------------------------------
     2) CARD
  ------------------------------------------------------- */
  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-card{
    background: var(--color-white);
    border-radius: var(--radius-base);
    padding: var(--space-md);
    box-shadow: var(--shadow-soft);
    border: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    height: 100%;
  }

  /* Thumbnail */
  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-thumb{
    margin: 0;
  }
  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-thumb img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius-base);
    display: block;
  }

  /* Title */
  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-card .blog-title{
    font-family: var(--font-title);
    font-size: 20px;
    font-weight: 700;
    margin: 8px 0 4px;
    color: var(--color-dark);
    line-height: 1.25;
  }

  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-card .blog-title a{
    color: color-mix(in srgb, var(--color-primary) 55%, #000) !important;
    text-decoration: none;
    opacity: 1;
  }
  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-card .blog-title a:hover{
    color: color-mix(in srgb, var(--color-primary) 40%, #000) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Excerpt (flex grows so CTA alignment is consistent) */
  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-excerpt{
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-dark);
    opacity: .92;
    margin: 0;
    flex: 1;
  }

  /* CTA button — always bottom + centered (works even if buttons.css forces inline-flex) */
  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-card :where(a.btn-primary, button.btn-primary){
    margin-top: auto !important;
    align-self: center;
  }

  /* -------------------------------------------------------
     3) PAGINATION (WordPress markup)
     - No "jump" animation (one motion system = cards/buttons only)
  ------------------------------------------------------- */
  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-pagination{
    margin-top: var(--space-lg);
    text-align: center;
  }

  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-pagination .nav-links{
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-pagination :where(a, span).page-numbers{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--color-white);
    color: var(--color-dark);
    text-decoration: none;
    font-size: 14px;
    border: 1px solid color-mix(in srgb, var(--color-dark) 14%, transparent);
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
    transition:
      background var(--anim-speed-fast,180ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)),
      border-color var(--anim-speed-fast,180ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1)),
      box-shadow var(--anim-speed-fast,180ms) var(--anim-ease,cubic-bezier(.2,.9,.2,1));
  }

  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-pagination a.page-numbers:hover{
    background: color-mix(in srgb, var(--color-bg) 70%, var(--color-white));
    border-color: color-mix(in srgb, var(--color-dark) 18%, transparent);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    transform: none;
  }

  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-pagination a.page-numbers:focus-visible{
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  :where(body.blog, body.archive, body.category, body.tag, body.search) .blog-pagination .page-numbers.current{
    background: var(--color-primary);
    color: var(--color-dark);
    border-color: color-mix(in srgb, var(--color-primary) 70%, var(--color-dark));
  }

  /* -------------------------------------------------------
     4) NO CONTENT STATE
  ------------------------------------------------------- */
  :where(body.blog, body.archive, body.category, body.tag, body.search) .no-content{
    margin-top: var(--space-lg);
    padding: 34px 28px;
    border-radius: var(--radius-base);
    background: color-mix(in srgb, var(--color-bg) 70%, var(--color-white));
    border: 1px solid color-mix(in srgb, var(--color-dark) 12%, transparent);
    box-shadow: var(--shadow-soft);
    text-align: center;
  }

  :where(body.blog, body.archive, body.category, body.tag, body.search) .no-content-title{
    margin: 0 0 8px;
    font-family: var(--font-title);
    color: var(--color-dark);
  }

  :where(body.blog, body.archive, body.category, body.tag, body.search) .no-content-text{
    margin: 0;
    color: var(--color-dark);
    opacity: .92;
    line-height: 1.7;
  }

  :where(body.blog, body.archive, body.category, body.tag, body.search) .no-content-text a{
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  :where(body.blog, body.archive, body.category, body.tag, body.search) .no-content-text a:hover{
    text-decoration-thickness: 2px;
  }
  :where(body.blog, body.archive, body.category, body.tag, body.search) .no-content-text a:focus-visible{
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: 8px;
  }