/**
 * File:     style.css
 * Location: wptruss/blocks/cpt-doc-grid/style.css
 * Purpose:  Frontend and editor styles for wptruss/cpt-doc-grid.
 *
 * GOVERNANCE COMPLIANCE:
 *   ✅ Zero hardcoded hex values — all via var(--wpt-color-*)
 *   ✅ Zero hardcoded spacing px — all via var(--wpt-spacing-*)
 *   ✅ font-size via var(--wpt-text-*) tokens only
 *   ✅ Border radius via var(--wpt-radius-*) tokens only
 *   ✅ Shadows via var(--wpt-shadow-*) tokens only
 *   ✅ Motion via var(--wpt-motion-*) tokens only — zero bare 
 *
 * @package  wpTruss
 * Encoding: UTF-8 without BOM
 */

/* ═══════════════════════════════════════════════════════════════
   1. BLOCK ROOT
═══════════════════════════════════════════════════════════════ */
.tp-doc-grid {
    padding: var(--wpt-block-padding, var(--wpt-spacing-xl));
}

/* ═══════════════════════════════════════════════════════════════
   2. SEARCH BAR
═══════════════════════════════════════════════════════════════ */
.tp-doc-grid__search-wrap {
    margin-bottom: var(--wpt-spacing-2xl);
}

.tp-doc-grid__search-form {
    width: 100%;
}

.tp-doc-grid__search-inner {
    position:      relative;
    display:       flex;
    align-items:   center;
    background:    var(--wpt-color-surface);
    border:        1.5px solid var(--wpt-color-border);
    border-radius: var(--wpt-radius-lg);
    overflow:      hidden;
}

.tp-doc-grid__search-inner:focus-within {
    border-color: var(--wpt-color-primary);
    box-shadow:   var(--wpt-shadow-focus, 0 0 0 3px color-mix(in srgb, var(--wpt-color-primary) 15%, transparent));
}

.tp-doc-grid__search-icon {
    flex-shrink:    0;
    width:          18px;
    height:         18px;
    margin-left:    var(--wpt-spacing-md);
    color:          var(--wpt-color-muted);
    pointer-events: none;
}

.tp-doc-grid__search-input {
    flex:        1;
    border:      none;
    outline:     none;
    background:  transparent;
    padding:     var(--wpt-spacing-sm);
    font-family: var(--wpt-font-body, sans-serif);
    font-size:   var(--wpt-text-base);
    color:       var(--wpt-color-dark);
    min-width:   0;
}

.tp-doc-grid__search-input::placeholder {
    color: var(--wpt-color-muted);
}

.tp-doc-grid__search-btn {
    flex-shrink: 0;
    background:  var(--wpt-color-primary);
    color:       var(--wpt-color-light);
    border:      none;
    padding:     var(--wpt-spacing-sm) var(--wpt-spacing-md);
    font-family: var(--wpt-font-body, sans-serif);
    font-size:   var(--wpt-text-sm);
    font-weight: var(--wpt-font-semibold, 600);
    cursor:      pointer;
    white-space: nowrap;
    height:      100%;
}

.tp-doc-grid__search-btn:hover {
    background: var(--wpt-color-secondary, var(--wpt-color-primary));
}

/* ═══════════════════════════════════════════════════════════════
   3. FEATURED DOCS
═══════════════════════════════════════════════════════════════ */
.tp-doc-featured {
    margin-bottom: var(--wpt-spacing-2xl);
}

.tp-doc-featured__heading {
    display:       flex;
    align-items:   center;
    gap:           var(--wpt-spacing-xs);
    font-family:   var(--wpt-font-heading, sans-serif);
    font-size:     var(--wpt-text-xl);
    font-weight:   var(--wpt-font-semibold, 600);
    color:         var(--wpt-color-dark);
    margin-bottom: var(--wpt-spacing-md);
}

.tp-doc-featured__star {
    width:       20px;
    height:      20px;
    color:       var(--wpt-color-warning, var(--wpt-color-primary));
    flex-shrink: 0;
}

.tp-doc-featured__grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
    gap:                   var(--wpt-card-gap, var(--wpt-spacing-md));
}

.tp-doc-featured__card {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    gap:             var(--wpt-spacing-xs);
    padding:         var(--wpt-spacing-lg);
    background:      linear-gradient(
                         135deg,
                         color-mix(in srgb, var(--wpt-color-primary) 6%, var(--wpt-color-surface)),
                         color-mix(in srgb, var(--wpt-color-primary) 3%, var(--wpt-color-surface))
                     );
    border:          1.5px solid color-mix(in srgb, var(--wpt-color-primary) 25%, var(--wpt-color-border));
    border-radius:   var(--wpt-radius-lg);
    text-decoration: none;
    color:           inherit;
    overflow:        hidden;
}

.tp-doc-featured__card::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     linear-gradient(135deg, color-mix(in srgb, var(--wpt-color-primary) 8%, transparent), transparent 60%);
    pointer-events: none;
}

.tp-doc-featured__badge {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    font-size:      var(--wpt-text-xs, 0.75rem);
    font-weight:    var(--wpt-font-semibold, 600);
    color:          var(--wpt-color-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tp-doc-featured__badge svg {
    width:  12px;
    height: 12px;
}

.tp-doc-featured__title {
    font-family: var(--wpt-font-heading, sans-serif);
    font-size:   var(--wpt-text-lg);
    font-weight: var(--wpt-font-semibold, 600);
    color:       var(--wpt-color-dark);
    margin:      0;
    line-height: var(--wpt-leading-snug, 1.375);
}

.tp-doc-featured__excerpt {
    font-size:   var(--wpt-text-sm);
    color:       var(--wpt-color-muted);
    margin:      0;
    line-height: var(--wpt-leading-relaxed, 1.6);
    flex:        1;
}

.tp-doc-featured__cta {
    font-size:   var(--wpt-text-sm);
    font-weight: var(--wpt-font-semibold, 600);
    color:       var(--wpt-color-primary);
    margin-top:  var(--wpt-spacing-xs);
}

/* ═══════════════════════════════════════════════════════════════
   4. MOST VIEWED
═══════════════════════════════════════════════════════════════ */
.tp-doc-viewed {
    margin-bottom: var(--wpt-spacing-2xl);
    padding:       var(--wpt-spacing-lg);
    background:    var(--wpt-color-surface);
    border:        1px solid var(--wpt-color-border);
    border-radius: var(--wpt-radius-lg);
}

.tp-doc-viewed__heading {
    display:       flex;
    align-items:   center;
    gap:           var(--wpt-spacing-xs);
    font-family:   var(--wpt-font-heading, sans-serif);
    font-size:     var(--wpt-text-base);
    font-weight:   var(--wpt-font-semibold, 600);
    color:         var(--wpt-color-dark);
    margin-bottom: var(--wpt-spacing-md);
}

.tp-doc-viewed__icon {
    width:       18px;
    height:      18px;
    color:       var(--wpt-color-primary);
    flex-shrink: 0;
}

.tp-doc-viewed__list {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            var(--wpt-spacing-sm);
}

.tp-doc-viewed__item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--wpt-spacing-md);
}

.tp-doc-viewed__link {
    font-size:       var(--wpt-text-sm);
    color:           var(--wpt-color-dark);
    text-decoration: none;
    flex:            1;
    min-width:       0;
    white-space:     nowrap;
    overflow:        hidden;
    text-overflow:   ellipsis;
}

.tp-doc-viewed__link:hover {
    color: var(--wpt-color-primary);
}

.tp-doc-viewed__count {
    flex-shrink:   0;
    font-size:     var(--wpt-text-xs, .75rem);
    font-weight:   var(--wpt-font-semibold, 600);
    color:         var(--wpt-color-muted);
    background:    var(--wpt-color-border);
    padding:       2px 8px;
    border-radius: var(--wpt-radius-full, 9999px);
}

/* ═══════════════════════════════════════════════════════════════
   5. LAYOUT: SIDEBAR + MAIN
═══════════════════════════════════════════════════════════════ */
.tp-doc-grid__layout {
    display:               grid;
    grid-template-columns: 260px 1fr;
    gap:                   var(--wpt-spacing-2xl);
    align-items:           start;
}

/* ═══════════════════════════════════════════════════════════════
   6. SIDEBAR TOC
═══════════════════════════════════════════════════════════════ */
.tp-doc-grid__sidebar {
    position:        sticky;
    top:             var(--wpt-spacing-xl);
    max-height:      calc(100vh - 2 * var(--wpt-spacing-xl));
    overflow-y:      auto;
    scrollbar-width: thin;
    scrollbar-color: var(--wpt-color-border) transparent;
}

.tp-doc-grid__sidebar-inner {
    background:    var(--wpt-color-surface);
    border:        1px solid var(--wpt-color-border);
    border-radius: var(--wpt-radius-lg);
    padding:       var(--wpt-spacing-md);
}

.tp-doc-grid__sidebar-title {
    font-family:    var(--wpt-font-heading, sans-serif);
    font-size:      var(--wpt-text-xs, .75rem);
    font-weight:    var(--wpt-font-semibold, 600);
    color:          var(--wpt-color-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin:         0 0 var(--wpt-spacing-sm) var(--wpt-spacing-xs);
}

/* ── Details / summary accordion ── */
.tp-doc-sidebar__cat {
    border-top: 1px solid var(--wpt-color-border);
}

.tp-doc-sidebar__cat:first-of-type {
    border-top: none;
}

.tp-doc-sidebar__cat-toggle {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--wpt-spacing-sm) var(--wpt-spacing-xs);
    font-family:     var(--wpt-font-body, sans-serif);
    font-size:       var(--wpt-text-sm);
    font-weight:     var(--wpt-font-semibold, 600);
    color:           var(--wpt-color-dark);
    cursor:          pointer;
    list-style:      none;
    user-select:     none;
}

.tp-doc-sidebar__cat-toggle::-webkit-details-marker {
    display: none;
}

.tp-doc-sidebar__chevron {
    width:       14px;
    height:      14px;
    flex-shrink: 0;
    color:       var(--wpt-color-muted);
}

details[open] .tp-doc-sidebar__chevron {
    transform: rotate(180deg);
}

.tp-doc-sidebar__links {
    list-style: none;
    margin:     0;
    padding:    0 0 var(--wpt-spacing-sm);
}

.tp-doc-sidebar__link {
    display:          block;
    padding:          5px var(--wpt-spacing-sm);
    margin-left:      var(--wpt-spacing-xs);
    font-family:      var(--wpt-font-body, sans-serif);
    font-size:        var(--wpt-text-sm);
    color:            var(--wpt-color-muted);
    text-decoration:  none;
    border-radius:    var(--wpt-radius-sm);
    border-left:      2px solid transparent;
    line-height:      1.4;
}

.tp-doc-sidebar__link:hover {
    color:             var(--wpt-color-dark);
    background:        color-mix(in srgb, var(--wpt-color-primary) 8%, transparent);
    border-left-color: var(--wpt-color-primary);
}

.tp-doc-sidebar__link--current {
    color:             var(--wpt-color-primary);
    font-weight:       var(--wpt-font-semibold, 600);
    background:        color-mix(in srgb, var(--wpt-color-primary) 10%, transparent);
    border-left-color: var(--wpt-color-primary);
}

/* ── Sidebar slot modifier — when block is injected via Post Type Overrides ── */
/* The sidebar slot wrapper already handles positioning; we just fill it.       */
.tp-doc-grid__sidebar--slot {
    position:   static;
    max-height: none;
    overflow-y: visible;
    width:      100%;
}

.tp-doc-grid__sidebar--slot .tp-doc-grid__sidebar-inner {
    border-radius: var(--wpt-radius-lg);
}

/* ═══════════════════════════════════════════════════════════════
   7. MAIN: ARCHIVE GRID
═══════════════════════════════════════════════════════════════ */
.tp-doc-grid__grid {
    display:               grid;
    grid-template-columns: repeat( var(--wpt-grid-cols, 3), 1fr );
    gap:                   var(--wpt-card-gap, var(--wpt-spacing-md));
    margin-bottom:         var(--wpt-spacing-2xl);
}

.tp-doc-grid__card {
    display:         flex;
    flex-direction:  column;
    background:      var(--wpt-color-surface);
    border:          1px solid var(--wpt-color-border);
    border-radius:   var(--wpt-radius-lg);
    overflow:        hidden;
    text-decoration: none;
    color:           inherit;
}

/* Featured card subtle differentiation */
.tp-doc-grid__card--is-featured {
    border-color: color-mix(in srgb, var(--wpt-color-primary) 35%, var(--wpt-color-border));
    background:   linear-gradient(
        135deg,
        color-mix(in srgb, var(--wpt-color-primary) 5%, var(--wpt-color-surface)),
        var(--wpt-color-surface)
    );
}

.tp-doc-grid__card-image {
    aspect-ratio: 16 / 9;
    overflow:     hidden;
}

.tp-doc-grid__card-image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.tp-doc-grid__card-body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    padding:        var(--wpt-spacing-md);
    gap:            var(--wpt-spacing-xs);
}

.tp-doc-grid__card-cat {
    font-size:      var(--wpt-text-xs, .75rem);
    font-weight:    var(--wpt-font-semibold, 600);
    color:          var(--wpt-color-primary);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.tp-doc-grid__card--is-featured .tp-doc-grid__card-cat::before {
    content: '★ ';
    color:   var(--wpt-color-warning, var(--wpt-color-primary));
}

.tp-doc-grid__card-title {
    font-family: var(--wpt-font-heading, sans-serif);
    font-size:   var(--wpt-text-lg);
    font-weight: var(--wpt-font-semibold, 600);
    color:       var(--wpt-color-dark);
    margin:      0;
    line-height: var(--wpt-leading-snug, 1.375);
    text-wrap:   balance;
}

.tp-doc-grid__card-excerpt {
    font-size:          var(--wpt-text-sm);
    color:              var(--wpt-color-muted);
    margin:             0;
    line-height:        var(--wpt-leading-relaxed, 1.6);
    display:            -webkit-box;
    -webkit-box-orient: vertical;
    overflow:           hidden;
    flex:               1;
}

.tp-doc-grid__card-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      auto;
    padding-top:     var(--wpt-spacing-sm);
    font-size:       var(--wpt-text-xs, .75rem);
    color:           var(--wpt-color-muted);
}

.tp-doc-grid__card-more {
    font-weight: var(--wpt-font-semibold, 600);
    color:       var(--wpt-color-primary);
}

.tp-doc-grid__no-posts {
    grid-column: 1 / -1;
    text-align:  center;
    padding:     var(--wpt-spacing-4xl) var(--wpt-spacing-lg);
    color:       var(--wpt-color-muted);
    font-size:   var(--wpt-text-lg);
}

/* ═══════════════════════════════════════════════════════════════
   8. SINGLE ARTICLE VIEW
═══════════════════════════════════════════════════════════════ */
.tp-doc-grid__article {
    min-width: 0;
}

.tp-doc-grid__breadcrumb {
    display:       flex;
    align-items:   center;
    gap:           var(--wpt-spacing-xs);
    font-size:     var(--wpt-text-sm);
    color:         var(--wpt-color-muted);
    margin-bottom: var(--wpt-spacing-sm);
}

.tp-doc-grid__breadcrumb a {
    color:           var(--wpt-color-primary);
    text-decoration: none;
}

.tp-doc-grid__breadcrumb a:hover {
    text-decoration: underline;
}

.tp-doc-grid__article-header {
    margin-bottom:  var(--wpt-spacing-xl);
    padding-bottom: var(--wpt-spacing-lg);
    border-bottom:  1px solid var(--wpt-color-border);
}

.tp-doc-grid__article-title {
    font-family: var(--wpt-font-heading, sans-serif);
    font-size:   var(--wpt-text-3xl);
    font-weight: var(--wpt-font-semibold, 600);
    color:       var(--wpt-color-dark);
    margin:      0 0 var(--wpt-spacing-xs);
    line-height: var(--wpt-leading-snug, 1.3);
}

.tp-doc-grid__article-date {
    font-size: var(--wpt-text-sm);
    color:     var(--wpt-color-muted);
}

.tp-doc-grid__article-content {
    font-family: var(--wpt-font-body, sans-serif);
    font-size:   var(--wpt-text-base);
    line-height: var(--wpt-leading-relaxed, 1.7);
    color:       var(--wpt-color-dark);
    max-width:   72ch;
}

.tp-doc-grid__article-content h2,
.tp-doc-grid__article-content h3,
.tp-doc-grid__article-content h4 {
    font-family:   var(--wpt-font-heading, sans-serif);
    font-weight:   var(--wpt-font-semibold, 600);
    color:         var(--wpt-color-dark);
    margin-top:    var(--wpt-spacing-xl);
    margin-bottom: var(--wpt-spacing-sm);
}

.tp-doc-grid__article-content a {
    color:                 var(--wpt-color-primary);
    text-decoration:       underline;
    text-underline-offset: 2px;
}

.tp-doc-grid__article-content pre{
    font-size:     .875em;
    background:    var(--wpt-color-dark);
    border-radius: var(--wpt-radius-sm);
    padding:       .1em .3em;
}
.tp-doc-grid__article-content code {
    font-size:     .875em;
    border-radius: var(--wpt-radius-sm);
    padding:       .1em .3em;
}

.tp-doc-grid__article-content pre {
    padding:    var(--wpt-spacing-md);
    overflow-x: auto;
}

.tp-doc-grid__article-content pre code {
    background: none;
    padding:    0;
}

/* ═══════════════════════════════════════════════════════════════
   9. PREV / NEXT NAVIGATION
═══════════════════════════════════════════════════════════════ */
.tp-doc-grid__prevnext {
    margin-top:  var(--wpt-spacing-2xl);
    padding-top: var(--wpt-spacing-xl);
    border-top:  1px solid var(--wpt-color-border);
}

.tp-doc-grid__prevnext-inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--wpt-spacing-md);
}

.tp-doc-grid__prevnext-item {
    display:         flex;
    flex-direction:  column;
    gap:             4px;
    padding:         var(--wpt-spacing-md) var(--wpt-spacing-lg);
    background:      var(--wpt-color-surface);
    border:          1px solid var(--wpt-color-border);
    border-radius:   var(--wpt-radius-lg);
    text-decoration: none;
    color:           inherit;
    min-height:      72px;
    justify-content: center;
}

.tp-doc-grid__prevnext-item--empty {
    background:   transparent;
    border-color: transparent;
    box-shadow:   none !important;
}

.tp-doc-grid__prevnext-item--next {
    text-align: right;
}

.tp-doc-grid__prevnext-item:not(.tp-doc-grid__prevnext-item--empty):hover {
    border-color: var(--wpt-color-primary);
    box-shadow:   var(--wpt-shadow-sm);
}

.tp-doc-grid__prevnext-label {
    display:        flex;
    align-items:    center;
    gap:            4px;
    font-size:      var(--wpt-text-xs, .75rem);
    font-weight:    var(--wpt-font-semibold, 600);
    color:          var(--wpt-color-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.tp-doc-grid__prevnext-item--next .tp-doc-grid__prevnext-label {
    justify-content: flex-end;
}

.tp-doc-grid__prevnext-label svg {
    width:  14px;
    height: 14px;
}

.tp-doc-grid__prevnext-title {
    font-family: var(--wpt-font-heading, sans-serif);
    font-size:   var(--wpt-text-base);
    font-weight: var(--wpt-font-semibold, 600);
    color:       var(--wpt-color-primary);
    line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════
   10. RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media ( max-width: 900px ) {
    .tp-doc-grid__layout {
        grid-template-columns: 1fr;
    }
    .tp-doc-grid__sidebar {
        position:   static;
        max-height: none;
    }
    .tp-doc-grid__grid {
        grid-template-columns: repeat( var(--wpt-grid-cols-tablet, 2), 1fr );
    }
}

@media ( max-width: 600px ) {
    .tp-doc-grid__grid,
    .tp-doc-featured__grid {
        grid-template-columns: 1fr;
    }
    .tp-doc-grid__prevnext-inner {
        grid-template-columns: 1fr;
    }
    .tp-doc-grid__prevnext-item--empty {
        display: none;
    }
    .tp-doc-grid__prevnext-item--next {
        text-align: left;
    }
    .tp-doc-grid__prevnext-item--next .tp-doc-grid__prevnext-label {
        justify-content: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════
   11. SPACING MODIFIERS
═══════════════════════════════════════════════════════════════ */
.wpt-doc-grid--padding-none { --wpt-block-padding: 0                      !important; }
.wpt-doc-grid--padding-sm   { --wpt-block-padding: var(--wpt-spacing-sm)  !important; }
.wpt-doc-grid--padding-md   { --wpt-block-padding: var(--wpt-spacing-md)  !important; }
.wpt-doc-grid--padding-lg   { --wpt-block-padding: var(--wpt-spacing-lg)  !important; }
.wpt-doc-grid--padding-xl   { --wpt-block-padding: var(--wpt-spacing-xl)  !important; }
.wpt-doc-grid--padding-2xl  { --wpt-block-padding: var(--wpt-spacing-2xl) !important; }
.wpt-doc-grid--padding-3xl  { --wpt-block-padding: var(--wpt-spacing-3xl) !important; }

.wpt-doc-grid--gap-sm { --wpt-card-gap: var(--wpt-spacing-sm) !important; }
.wpt-doc-grid--gap-md { --wpt-card-gap: var(--wpt-spacing-md) !important; }
.wpt-doc-grid--gap-lg { --wpt-card-gap: var(--wpt-spacing-lg) !important; }
.wpt-doc-grid--gap-xl { --wpt-card-gap: var(--wpt-spacing-xl) !important; }

.wpt-doc-grid--spacing-bottom-sm  { margin-bottom: var(--wpt-spacing-sm)  !important; }
.wpt-doc-grid--spacing-bottom-md  { margin-bottom: var(--wpt-spacing-md)  !important; }
.wpt-doc-grid--spacing-bottom-lg  { margin-bottom: var(--wpt-spacing-lg)  !important; }
.wpt-doc-grid--spacing-bottom-xl  { margin-bottom: var(--wpt-spacing-xl)  !important; }