/* ═══════════════════════════════════════════════════════════════
   TACTIX BLOG STYLING
   SEO-optimized blog hub page

   v5.14.71 — Brand alignment
   ──────────────────────────
   This file historically used a semantic-token system
   (--text-primary, --bg-secondary, --color-primary, etc.) that
   pre-dates the canonical brand tokens established in
   tactix-extracted.css (--carbon, --teal, --white, --font-d).
   Rather than rewriting every selector, the alias block below
   redefines the old semantic names as references to the brand
   tokens, so existing rules pick up the brand identity
   automatically. New rules should reference brand tokens
   directly; the aliases are a transitional compatibility shim.
═══════════════════════════════════════════════════════════════ */

/* ── v5.14.71 brand-token alias shim ──────────────────────── */
/* Scoped to page-wrapper classes that the renderer guarantees on
   <body>: .blog-index-page on /blog, .blog-post-page on every post.
   Every selector in this file is, by definition, a descendant of
   one of these — so all `var(--text-primary)` etc. references in
   blog.css resolve to brand tokens via the cascade. */
.blog-index-page,
.blog-post-page {
  --text-primary:    var(--white);
  --text-secondary:  var(--white-70);
  --text-inverse:    var(--carbon);
  --bg-primary:      var(--carbon);
  --bg-secondary:    var(--surface);
  --bg-elevated:     var(--panel);
  --border-primary:  var(--rim);
  --color-primary:   var(--teal);
  --gradient-primary: linear-gradient(135deg, var(--teal) 0%, var(--teal-mid) 100%);
}

/* ───────────────────────────────────────────────────────── */

/* Blog Hero */
.blog-hero {
    background: var(--gradient-primary);
    padding: 60px 20px;
    text-align: center;
}

.blog-hero .hero-title {
    font-size: 48px;
    font-family: var(--font-d);
    font-weight: 800;
    color: var(--text-inverse);
    margin-bottom: 15px;
}

.blog-hero .hero-subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
}

/* Blog Grid Layout */
.blog-content {
    padding: 60px 20px;
    background: var(--bg-primary);
}

.blog-grid {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Featured Article */
.featured-article {
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    margin-bottom: 40px;
    transition: all 0.3s;
}

.featured-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--teal-glow);
}

.article-image {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.featured-article:hover .article-image img {
    transform: scale(1.05);
}

.article-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--gradient-primary);
    color: var(--text-inverse);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}

.article-content {
    padding: 30px;
}

.article-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 14px;
    color: var(--text-secondary);
}

.article-category {
    background: var(--teal-dim);
    color: var(--color-primary);
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
}

.article-title {
    font-size: 32px;
    font-family: var(--font-d);
    font-weight: 800;
    margin-bottom: 15px;
}

.article-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.3s;
}

.article-title a:hover {
    color: var(--color-primary);
}

.article-excerpt {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.read-more {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.read-more:hover {
    gap: 8px;
}

/* League Predictions Section */
.league-predictions-section {
    margin-bottom: 60px;
}

.section-title {
    font-size: 28px;
    font-family: var(--font-d);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-primary);
}

.league-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.league-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s;
}

.league-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 16px var(--teal-dim);
}

.league-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.league-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.league-card p {
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
}

.league-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.league-link:hover {
    text-decoration: underline;
}

/* Guides Section */
.guides-section {
    margin-bottom: 60px;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.article-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px var(--teal-dim);
}

.article-card .article-image {
    height: 200px;
}

.article-card .article-content {
    padding: 20px;
}

.article-card .article-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.article-read-time {
    color: var(--text-secondary);
}

/* Sidebar */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sidebar-widget {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
}

.sidebar-widget h3 {
    padding: 20px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-primary);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.sidebar-widget p {
    padding: 0 20px;
    color: var(--text-secondary);
}

/* Newsletter Widget */
.newsletter-widget {
    background: linear-gradient(135deg, var(--teal-dim), var(--teal-dim));
    border-color: var(--teal-glow);
}

.newsletter-form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.newsletter-form input {
    padding: 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.newsletter-form button {
    padding: 12px;
    background: var(--gradient-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.newsletter-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--teal-glow);
}

/* Offer Widget */
.offer-widget {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 168, 204, 0.1));
    border-color: rgba(0, 212, 255, 0.3);
}

/* Popular Posts */
.popular-posts {
    list-style: none;
    padding: 0;
}

.popular-posts li {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-primary);
}

.popular-posts li:last-child {
    border-bottom: none;
}

.popular-posts a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.popular-posts a:hover {
    color: var(--color-primary);
}

/* Categories */
.categories-list {
    list-style: none;
    padding: 0;
}

.categories-list li {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-primary);
}

.categories-list li:last-child {
    border-bottom: none;
}

.categories-list a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s;
}

.categories-list a:hover {
    color: var(--color-primary);
    padding-left: 5px;
}

/* Loading State */
.widget-loading {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 968px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .blog-hero .hero-title {
        font-size: 32px;
    }
    
    .article-image {
        height: 250px;
    }
    
    .featured-article .article-title {
        font-size: 24px;
    }
    
    .league-grid {
        grid-template-columns: 1fr;
    }
    
    .articles-grid {
        grid-template-columns: 1fr;
    }
}

/* ── PREDICTION CARDS (shared across all league pages) ──────── */
.predictions-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin-top:20px; }
.prediction-card { background:var(--bg-secondary); border:1px solid var(--border-primary); border-radius:12px; padding:18px; transition:all 0.2s; }
.prediction-card:hover { border-color:var(--accent-primary); transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,212,168,.15); }
.pred-card-head { display:flex; justify-content:space-between; font-size:12px; color:var(--text-muted); margin-bottom:10px; }
.pred-teams { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.pred-team-home,.pred-team-away { font-size:14px; font-weight:700; color:var(--text-primary); }
.pred-vs { font-size:12px; color:var(--text-muted); }
.pred-tip { display:flex; justify-content:space-between; align-items:center; background:rgba(0,212,168,.06); border:1px solid rgba(0,212,168,.15); border-radius:6px; padding:8px 12px; margin-bottom:10px; }
.pred-pick { font-size:12px; font-weight:700; color:var(--text-primary); }
.pred-odds { font-size:13px; font-weight:800; color:#f59e0b; }
.pred-conf-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pred-conf-bar { flex:1; height:4px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.pred-conf-fill { height:100%; border-radius:2px; transition:width .6s cubic-bezier(.4,0,.2,1); }
.pred-conf-label { font-size:12px; font-weight:700; white-space:nowrap; }
.pred-analysis { font-size:12px; color:var(--text-muted); line-height:1.5; }

/* ── BOOKMAKER OFFER CARDS ───────────────────────────────────── */
.bookmaker-offers { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin:16px 0; }
.bk-offer-card { background:var(--bg-secondary); border:1px solid var(--border-primary); border-radius:10px; padding:14px; }
.bk-offer-name { font-size:13px; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.bk-offer-text { font-size:12px; color:var(--text-muted); line-height:1.4; margin-bottom:10px; }
.bk-offer-cta { display:block; text-align:center; padding:8px; background:rgba(0,212,168,.1); border:1px solid rgba(0,212,168,.25); border-radius:6px; color:#00D4A8; font-size:12px; font-weight:700; text-decoration:none; transition:all .15s; }
.bk-offer-cta:hover { background:rgba(0,212,168,.2); }
.offer-card { padding:4px 0; }
.offer-bk-name { font-size:16px; font-weight:800; color:var(--text-primary); margin-bottom:6px; }
.offer-text { font-size:13px; color:var(--text-muted); line-height:1.5; margin-bottom:8px; }
.offer-terms { font-size:12px; color:var(--text-muted); margin-bottom:12px; }
.offer-cta-btn { display:block; text-align:center; padding:10px; background:rgba(0,212,168,.1); border:1px solid rgba(0,212,168,.3); border-radius:8px; color:#00D4A8; font-size:13px; font-weight:700; text-decoration:none; transition:all .15s; }
.offer-cta-btn:hover { background:rgba(0,212,168,.2); }

/* ── SHARE BUTTONS ───────────────────────────────────────────── */
.share-section { margin-top:32px; padding-top:24px; border-top:1px solid var(--border-primary); }
.share-section h3 { font-size:16px; font-weight:700; margin-bottom:14px; }
.share-buttons { display:flex; gap:10px; flex-wrap:wrap; }
.share-btn { display:flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--border-primary); border-radius:8px; background:var(--bg-secondary); color:var(--text-muted); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; text-decoration:none; }
.share-btn:hover { border-color:var(--accent-primary); color:var(--text-primary); }
.share-btn.twitter { border-color:rgba(29,161,242,.3); }
.share-btn.twitter:hover { background:rgba(29,161,242,.1); color:#1da1f2; }
.share-btn.facebook:hover { background:rgba(59,89,152,.1); color:#3b5998; }
.share-btn.whatsapp:hover { background:rgba(37,211,102,.1); color:#25d366; }
.share-btn.telegram:hover { background:rgba(0,136,204,.1); color:#0088cc; }
.share-btn.copy:hover { background:rgba(0,212,168,.1); color:#00D4A8; }
.share-btn.reddit:hover { background:rgba(255,69,0,.1); color:#ff4500; }

/* ── LAST REFRESHED TAG ──────────────────────────────────────── */
.refresh-tag { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); background:rgba(0,212,168,.06); border:1px solid rgba(0,212,168,.15); border-radius:4px; padding:2px 8px; margin-left:8px; }
.refresh-dot { width:5px; height:5px; background:#00D4A8; border-radius:50%; animation:blink 1.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── FEATURE PAGE TIERS ──────────────────────────────────────── */
.tier-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin:24px 0; }
.tier-card { border-radius:14px; padding:24px; position:relative; overflow:hidden; }
.tier-card.starter { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.tier-card.pro { background:rgba(0,212,168,.06); border:2px solid rgba(0,212,168,.3); }
.tier-card.elite { background:rgba(245,158,11,.06); border:2px solid rgba(245,158,11,.3); }
.tier-badge { display:inline-block; font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase; padding:3px 10px; border-radius:3px; margin-bottom:12px; }
.tier-badge.starter { background:rgba(255,255,255,.08); color:var(--text-muted); }
.tier-badge.pro { background:rgba(0,212,168,.15); color:#00D4A8; }
.tier-badge.elite { background:rgba(245,158,11,.15); color:#f59e0b; }
.tier-price { font-size:32px; font-weight:900; color:var(--text-primary); margin-bottom:4px; }
.tier-price span { font-size:14px; font-weight:400; color:var(--text-muted); }
.tier-features { list-style:none; margin:16px 0; }
.tier-features li { font-size:13px; color:var(--text-muted); padding:5px 0; display:flex; align-items:center; gap:8px; }
.tier-features li::before { content:'✓'; color:#00D4A8; font-weight:700; flex-shrink:0; }
.tier-features li.locked::before { content:'🔒'; }
.tier-cta { display:block; text-align:center; padding:10px; border-radius:8px; font-size:13px; font-weight:700; text-decoration:none; transition:all .15s; margin-top:16px; }
.tier-cta.pro { background:rgba(0,212,168,.15); border:1px solid rgba(0,212,168,.3); color:#00D4A8; }
.tier-cta.pro:hover { background:rgba(0,212,168,.25); }
.tier-cta.elite { background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.3); color:#f59e0b; }
.tier-cta.elite:hover { background:rgba(245,158,11,.25); }

/* ── FEATURE SECTIONS ────────────────────────────────────────── */
.feature-section { margin:40px 0; padding:32px; background:var(--bg-secondary); border:1px solid var(--border-primary); border-radius:14px; }
.feature-section h2 { font-size:24px; font-weight:800; margin-bottom:12px; }
.feature-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:16px; }
.feature-item { display:flex; align-items:flex-start; gap:12px; padding:14px; background:rgba(255,255,255,.03); border:1px solid var(--border-primary); border-radius:8px; }
.feature-icon-lg { font-size:24px; flex-shrink:0; }
.feature-item-title { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.feature-item-desc { font-size:12px; color:var(--text-muted); line-height:1.5; }
/* [contrastsite-20261031] O6-03 CONTRAST-SITE (D-B-446): reader text to 4.5:1 (greys #6A7592/#5F7488/#7E93A6 to #9AA6C2/#8896B3, red text to #FF5A78) and the 12px floor */