/* ══════════════════════════════════════
   Technical Journal Grid — styles
   Uses CSS custom props set inline by PHP
══════════════════════════════════════ */

/* ── Reset / Base ── */
.tj-wrapper *,
.tj-wrapper *::before,
.tj-wrapper *::after { box-sizing: border-box; }

.tj-wrapper {
    --tj-accent:  #e63946;
    --tj-bg:      #0f0f0f;
    --tj-card:    #1a1a1a;
    --tj-text:    #ffffff;
    --tj-muted:   #888888;
    --tj-title-color:   #ffffff;
    --tj-excerpt-color: #888888;
    --tj-cat-color:     #e63946;
    --tj-radius:  4px;
    --tj-gap:     20px;
    --tj-font:    'Courier New', 'Lucida Console', monospace;
    --tj-font-base:    16px;
    --tj-font-title:   18px;
    --tj-font-excerpt: 13px;
    --tj-font-meta:    11px;
    --tj-font-tab:     11px;
    --tj-font-btn:     12px;

    background:   var(--tj-bg);
    color:        var(--tj-text);
    font-family:  var(--tj-font);
    font-size:    var(--tj-font-base);
    padding:      32px 20px 48px;
    border-radius: 6px;
}

/* ── Header ── */
.tj-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             16px;
    margin-bottom:   32px;
    border-bottom:   2px solid rgba(255,255,255,0.07);
    padding-bottom:  20px;
}

.tj-title {
    font-size:      1.1rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    color:          var(--tj-text);
    text-transform: uppercase;
    position:       relative;
}

.tj-title::after {
    content:    '';
    display:    block;
    width:      60%;
    height:     2px;
    background: var(--tj-accent);
    margin-top: 4px;
}

/* ── Tabs ── */
.tj-tabs {
    display:    flex;
    flex-wrap:  wrap;
    gap:        4px;
}

.tj-tab {
    background:     transparent;
    border:         1px solid rgba(255,255,255,0.15);
    color:          var(--tj-muted);
    padding:        6px 16px;
    font-family:    var(--tj-font);
    font-size:      var(--tj-font-tab);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor:         pointer;
    border-radius:  var(--tj-radius);
    transition:     all 0.2s ease;
}

.tj-tab:hover {
    border-color: var(--tj-accent);
    color:        var(--tj-text);
}

.tj-tab.active {
    background:   var(--tj-accent);
    border-color: var(--tj-accent);
    color:        #fff;
}

/* ── Grid ── */
.tj-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   var(--tj-gap);
}

/* ── Card ── */
.tj-card {
    background:    var(--tj-card);
    border-radius: var(--tj-radius);
    overflow:      hidden;
    border:        1px solid rgba(255,255,255,0.06);
    transition:    transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    animation:     tj-fadein 0.4s ease both;
}

.tj-card:hover {
    transform:    translateY(-4px);
    border-color: var(--tj-accent);
    box-shadow:   0 8px 32px rgba(0,0,0,0.5);
}

@keyframes tj-fadein {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Thumbnail ── */
.tj-thumb-link { display: block; text-decoration: none; }

.tj-thumb {
    height:              200px;
    background-size:     cover;
    background-position: center;
    position:            relative;
    overflow:            hidden;
}

.tj-thumb-placeholder {
    background: linear-gradient(135deg, #222 0%, #333 100%);
    display:    flex;
    align-items: center;
    justify-content: center;
}

.tj-placeholder-text {
    font-size:   2.5rem;
    font-weight: 700;
    color:       rgba(255,255,255,0.12);
    letter-spacing: 0.05em;
}

.tj-thumb-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6) 100%);
    transition: opacity 0.3s ease;
    opacity:    0;
}

.tj-card:hover .tj-thumb-overlay { opacity: 1; }

/* Aspect-ratio tag (top-right) */
.tj-thumb::after {
    content:        attr(data-tag);
    position:       absolute;
    top:            10px;
    right:          10px;
    font-size:      0.65rem;
    letter-spacing: 0.08em;
    color:          var(--tj-muted);
    background:     rgba(0,0,0,0.7);
    padding:        3px 8px;
    border-radius:  2px;
}

/* ── Card Body ── */
.tj-card-body { padding: 18px 16px 16px; }

.tj-cat-label {
    display:        inline-block;
    font-size:      0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--tj-cat-color);
    margin-bottom:  8px;
}

.tj-card-title {
    font-size:   var(--tj-font-title);
    font-weight: 700;
    line-height: 1.35;
    margin:      0 0 10px;
    letter-spacing: 0.02em;
}

.tj-card-title a {
    color:           var(--tj-title-color);
    text-decoration: none;
    transition:      color 0.2s;
}

.tj-card-title a:hover { color: var(--tj-accent); }

.tj-card-excerpt {
    font-size:   var(--tj-font-excerpt);
    color:       var(--tj-excerpt-color);
    line-height: 1.6;
    margin:      0 0 14px;
    font-family: Georgia, serif;
}

/* ── Meta ── */
.tj-meta {
    display:     flex;
    align-items: center;
    gap:         10px;
    font-size:   var(--tj-font-meta);
    color:       var(--tj-muted);
    letter-spacing: 0.08em;
    border-top:  1px solid rgba(255,255,255,0.06);
    padding-top: 12px;
    flex-wrap:   wrap;
}

.tj-author { flex: 1; }
.tj-date   { flex-shrink: 0; }

.tj-read-link {
    color:      var(--tj-accent);
    transition: opacity 0.2s;
    display:    flex;
    align-items: center;
    margin-left: auto;
}

.tj-read-link:hover { opacity: 0.7; }

/* ── Load More ── */
.tj-loadmore-wrap {
    margin-top:  32px;
    text-align:  center;
}

.tj-loadmore {
    background:     transparent;
    border:         1px solid rgba(255,255,255,0.2);
    color:          var(--tj-text);
    padding:        12px 36px;
    font-family:    var(--tj-font);
    font-size:      var(--tj-font-btn);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor:         pointer;
    border-radius:  var(--tj-radius);
    display:        inline-flex;
    align-items:    center;
    gap:            10px;
    transition:     all 0.25s ease;
}

.tj-loadmore:hover {
    border-color: var(--tj-accent);
    color:        var(--tj-accent);
}

.tj-loadmore:disabled {
    opacity: 0.4;
    cursor:  not-allowed;
}

.tj-loadmore.hidden { display: none; }

/* ── Loading state ── */
.tj-loading {
    display:         flex;
    justify-content: center;
    padding:         24px 0;
    grid-column:     1 / -1;
}

.tj-spinner {
    width:  28px;
    height: 28px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--tj-accent);
    border-radius: 50%;
    animation: tj-spin 0.7s linear infinite;
}

@keyframes tj-spin { to { transform: rotate(360deg); } }

/* ── No posts ── */
.tj-no-posts {
    grid-column: 1/-1;
    text-align:  center;
    color:       var(--tj-muted);
    padding:     48px 0;
    font-size:   0.9rem;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .tj-header   { flex-direction: column; align-items: flex-start; }
    .tj-tabs     { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .tj-grid     { grid-template-columns: 1fr; }
}