/* ==========================================================================
   Journal Index — blog posts page (home.php / page_for_posts).
   .jcard styles are loaded via the journal block stylesheet dependency;
   this file only covers the index page's own header, grid and pagination.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page wrapper
   -------------------------------------------------------------------------- */
.journal-index__inner {
    width:           min(100%, var(--ovelia-layout-max-width));
    margin:          0 auto;
    padding-inline:  var(--ovelia-layout-side-padding);
    padding-block:   var(--ovelia-spacing-step-16) var(--ovelia-spacing-step-20);
    display:         flex;
    flex-direction:  column;
    gap:             var(--ovelia-spacing-step-12);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.journal-index__header {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    gap:             var(--ovelia-spacing-step-2);
}

.journal-index__eyebrow {
    font-family:    var(--ovelia-font-style-section-eyebrow-family);
    font-size:      var(--ovelia-font-style-section-eyebrow-size);
    font-weight:    var(--ovelia-font-style-section-eyebrow-weight);
    letter-spacing: var(--ovelia-font-style-section-eyebrow-letter-spacing);
    text-transform: var(--ovelia-font-style-section-eyebrow-text-transform);
    color:          var(--ovelia-colors-semantic-text-subtle);
    margin:         0;
}

.journal-index__heading {
    font-family:    var(--ovelia-typography-fontfamily-serif);
    font-size:      var(--ovelia-typography-fontsize-4xl);
    font-weight:    var(--ovelia-typography-fontweight-normal);
    line-height:    1.1;
    letter-spacing: -0.02em;
    color:          var(--ovelia-colors-semantic-text);
    margin:         0;
}

/* --------------------------------------------------------------------------
   Post grid (reuses .jcard from blocks/journal/block.css)
   -------------------------------------------------------------------------- */
.journal-index__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--ovelia-spacing-step-6);
    list-style:            none;
    margin:                0;
    padding:               0;
}

@media (max-width: 1023px) {
    .journal-index__grid {
        grid-template-columns: 1fr;
        gap:                   var(--ovelia-spacing-step-8);
    }
}

/* --------------------------------------------------------------------------
   Pagination (visually mirrors .shop-pagination, but styles the markup
   produced by core's the_posts_pagination(): .nav-links / .page-numbers)
   -------------------------------------------------------------------------- */
.journal-index__pagination {
    padding-top: var(--ovelia-spacing-step-10);
    border-top:  1px solid var(--ovelia-colors-semantic-border);
}

.journal-index__pagination .nav-links {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             var(--ovelia-spacing-step-8);
    flex-wrap:       wrap;
}

.journal-index__pagination .page-numbers {
    display:         block;
    padding-bottom:  4px;
    font-family:     var(--ovelia-typography-fontfamily-sans);
    font-size:       var(--ovelia-typography-fontsize-base);
    line-height:     1.5;
    color:           var(--ovelia-colors-semantic-text-subtle);
    text-decoration: none;
    border-bottom:   1px solid transparent;
    transition:      color 0.3s ease, border-color 0.3s ease;
}

.journal-index__pagination a.page-numbers:hover,
.journal-index__pagination a.page-numbers:focus,
.journal-index__pagination .page-numbers.current {
    color:        var(--ovelia-colors-semantic-text);
    border-color: var(--ovelia-colors-semantic-text);
}

.journal-index__pagination .prev.page-numbers,
.journal-index__pagination .next.page-numbers {
    font-family:    var(--ovelia-typography-fontfamily-sans);
    font-size:      var(--ovelia-typography-fontsize-xs);
    font-weight:    var(--ovelia-typography-fontweight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    .journal-index__pagination .page-numbers {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.journal-index__empty {
    text-align: center;
    color:      var(--ovelia-colors-semantic-text-subtle);
    font-size:  var(--ovelia-typography-fontsize-base);
    padding:    var(--ovelia-spacing-step-16) 0;
}