/* === CONTENT / GUIDES === */
/* Site chrome stays monospace (main.css); long-form reading gets a readable serif. */

.guide-intro {
    max-width: 760px;
    margin: 0.5rem 0 1.25rem;
    color: #555;
    font-size: 0.95rem;
}

/* Category nav */
.guide-catnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #d0d4d8;
    padding-bottom: 0.75rem;
}
.guide-catnav a {
    text-decoration: none;
    color: #2c3e50;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.7rem;
    border-radius: 4px;
}
.guide-catnav a:hover { background: #dfe4e8; }
.guide-catnav a.active { background: #2c3e50; color: #fff; }

/* Featured */
.guide-featured {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #d8dce0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.guide-featured-img {
    height: 320px;
    background-size: cover;
    background-position: center;
}
.guide-featured-body { padding: 1.5rem; }
.guide-featured-body h2 {
    font-size: 1.8rem;
    margin: 0.5rem 0;
    color: #1d2733;
}
.guide-featured-body p { color: #555; font-size: 1rem; }

/* Card grid */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.guide-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #d8dce0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}
.guide-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.guide-card-img {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #2c3e50;
}
.guide-card-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2c3e50, #3498db);
}
.guide-card-noimg span {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    opacity: 0.9;
}
.guide-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.guide-card-body h3 { font-size: 1.1rem; margin: 0.4rem 0; color: #1d2733; line-height: 1.3; }
.guide-card-body p { color: #5a6470; font-size: 0.88rem; flex: 1; }
.guide-card-cat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #3498db;
}
.guide-card-meta { font-size: 0.78rem; color: #8a929c; margin-top: 0.6rem; }

.guide-empty { color: #667; padding: 2rem 0; font-size: 1rem; }

/* === ARTICLE === */
.breadcrumb {
    font-size: 0.8rem;
    color: #8a929c;
    margin: 0.75rem 0 1rem;
}
.breadcrumb a { color: #3498db; text-decoration: none; }

.article { max-width: 740px; margin: 0 auto; }
.article-title {
    font-size: 2.2rem;
    line-height: 1.2;
    color: #1d2733;
    margin: 0.4rem 0 0.6rem;
    font-family: Georgia, 'Times New Roman', serif;
}
.article-dek {
    font-size: 1.2rem;
    color: #55606c;
    line-height: 1.5;
    margin-bottom: 1rem;
    font-family: Georgia, 'Times New Roman', serif;
}
.article-byline {
    font-size: 0.85rem;
    color: #6a737d;
    border-top: 1px solid #e1e4e8;
    border-bottom: 1px solid #e1e4e8;
    padding: 0.6rem 0;
    margin-bottom: 1.25rem;
}
.article-byline a { color: #2c3e50; font-weight: 700; text-decoration: none; }

.article-hero { margin: 0 0 1.5rem; }
.article-hero img { width: 100%; border-radius: 8px; display: block; }
.article-hero figcaption { font-size: 0.75rem; color: #99a; margin-top: 0.3rem; }

/* Long-form body: readable serif, generous measure */
.article-body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.12rem;
    line-height: 1.75;
    color: #2a2f36;
}
.article-body h2 {
    font-size: 1.5rem;
    margin: 2rem 0 0.75rem;
    color: #1d2733;
    line-height: 1.3;
}
.article-body h3 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; color: #1d2733; }
.article-body p { margin: 0 0 1.15rem; }
.article-body ul, .article-body ol { margin: 0 0 1.15rem 1.5rem; }
.article-body li { margin-bottom: 0.4rem; }
.article-body a { color: #2563b8; text-decoration: underline; }
.article-body blockquote {
    border-left: 4px solid #3498db;
    margin: 1.25rem 0;
    padding: 0.5rem 1rem;
    color: #4a535d;
    background: #f4f7fa;
    font-style: italic;
}
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
}
.article-body th, .article-body td {
    border: 1px solid #d8dce0;
    padding: 0.5rem 0.7rem;
    text-align: left;
}
.article-body th { background: #f0f3f6; }
.article-body code {
    font-family: 'Courier New', monospace;
    background: #f0f3f6;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.92em;
}
.article-body img { max-width: 100%; height: auto; border-radius: 6px; }

.article-authorbox {
    margin: 2.5rem 0 1rem;
    padding: 1.25rem;
    background: #f4f7fa;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    font-family: Georgia, serif;
}
.article-authorbox .author-name {
    font-weight: 700;
    color: #1d2733;
    margin-bottom: 0.4rem;
    font-family: 'Courier New', monospace;
}
.article-back { max-width: 740px; margin: 1.5rem auto; }
.article-back a { color: #3498db; text-decoration: none; font-weight: 700; }

/* === AUTHOR PAGE === */
.author-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 1rem 0 2rem;
}
.author-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.author-bio { color: #55606c; font-size: 1rem; max-width: 640px; margin-top: 0.5rem; }

@media (max-width: 600px) {
    .article-title { font-size: 1.7rem; }
    .article-body { font-size: 1.05rem; }
    .guide-featured-img { height: 200px; }
}

/* === WHAT TO WATCH === */
.wtw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.wtw-card {
    background: #fff;
    border: 1px solid #d8dce0;
    border-left: 4px solid #3498db;
    border-radius: 6px;
    padding: 1rem 1.1rem;
}
.wtw-comp {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #3498db;
    margin-bottom: 0.5rem;
}
.wtw-live {
    color: #e74c3c;
    margin-left: 0.4rem;
    animation: wtwpulse 1.6s ease-in-out infinite;
}
@keyframes wtwpulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.wtw-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 700;
    color: #1d2733;
    font-size: 1.02rem;
    margin-bottom: 0.4rem;
}
.wtw-team { display: flex; align-items: center; gap: 0.4rem; flex: 1; }
.wtw-team:last-child { justify-content: flex-end; text-align: right; }
.wtw-logo { width: 22px; height: 22px; object-fit: contain; }
.wtw-vs { color: #8a929c; font-weight: 700; padding: 0 0.3rem; white-space: nowrap; }
.wtw-score { color: #1d2733; font-size: 1.1rem; }
.wtw-meta { font-size: 0.78rem; color: #8a929c; margin-bottom: 0.5rem; }
.wtw-why {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #3a424c;
    margin-bottom: 0.5rem;
}
.wtw-watch { font-size: 0.8rem; font-weight: 700; color: #2563b8; text-decoration: none; }

/* === MATCH PAGE + KEY-MOMENTS TIMELINE === */
.m-header { text-align:center; background:#fff; border:1px solid #d8dce0; border-radius:8px;
    padding:1.25rem; margin:0.5rem 0 1.5rem; }
.m-comp { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#3498db; margin-bottom:.6rem; }
.m-scoreline { display:flex; align-items:center; justify-content:center; gap:1.25rem; }
.m-team { display:flex; align-items:center; gap:.5rem; font-weight:700; color:#1d2733; font-size:1.05rem; flex:1; }
.m-team:first-child { justify-content:flex-end; text-align:right; }
.m-team:last-child { justify-content:flex-start; text-align:left; }
.m-logo { width:36px; height:36px; object-fit:contain; }
.m-score { font-size:1.8rem; font-weight:800; color:#1d2733; min-width:64px; }
.m-status { font-size:.8rem; color:#8a929c; margin-top:.6rem; }
.m-status.m-live { color:#e74c3c; font-weight:700; }
.m-h1 { font-size:1.3rem; color:#1d2733; margin:1rem 0 .75rem; font-family:Georgia,serif; }

.mt-timeline { list-style:none; margin:0 0 1.5rem; padding:0; max-width:740px; }
.mt-event { display:flex; align-items:flex-start; gap:.6rem; padding:.6rem .5rem;
    border-bottom:1px solid #eef1f4; }
.mt-event:last-child { border-bottom:none; }
.mt-min { font-family:'Courier New',monospace; font-weight:700; color:#3498db; min-width:48px; font-size:.85rem; padding-top:.1rem; }
.mt-icon { font-size:1.1rem; line-height:1.3; }
.mt-body { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem; }
.mt-detail { font-weight:700; color:#1d2733; }
.mt-player { color:#2a2f36; }
.mt-secondary { color:#8a929c; font-size:.85rem; }
.mt-team { color:#8a929c; font-size:.8rem; }
.mt-event.mt-away { background:#fafbfc; }
.mt-empty { color:#667; padding:1.5rem 0; }

/* === WHAT TO WATCH v2: hero + forecast === */
.wtw-hero { background:#fff; border:1px solid #d8dce0; border-top:4px solid #f1c40f;
    border-radius:8px; padding:1.25rem 1.5rem; margin-bottom:1.5rem; }
.wtw-hero-tag { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:#c79100; margin-bottom:.5rem; }
.wtw-hero .wtw-teams { font-size:1.25rem; }
.wtw-hero-why { font-size:1.02rem; }
.wtw-more { font-size:.95rem; text-transform:uppercase; letter-spacing:.05em; color:#667;
    margin:0 0 1rem; border-bottom:2px solid #d0d4d8; padding-bottom:.5rem; }

/* Forecast bar (win-probability) */
.wtw-forecast { margin:.6rem 0 .4rem; }
.wtw-fc-label { font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:#99a; margin-bottom:.2rem; }
.wtw-fc-bar { display:flex; height:22px; border-radius:4px; overflow:hidden; font-size:.7rem; font-weight:700; }
.fc-seg { display:flex; align-items:center; justify-content:center; color:#fff; min-width:0; overflow:hidden; white-space:nowrap; }
.fc-home { background:#2c7be5; }
.fc-draw { background:#95a5a6; }
.fc-away { background:#e67e22; }
.wtw-fc-legend { display:flex; justify-content:space-between; font-size:.62rem; color:#99a; margin-top:.15rem; }

.wtw-km { color:#2563b8; font-weight:700; text-decoration:none; }
.wtw-disclaimer { font-size:.7rem; color:#aab; margin:1rem 0; font-style:italic; }
.wtw-kick { white-space:nowrap; }

/* === WHAT TO WATCH v3: constrained hero + analysis panel === */
.wtw-hero { max-width: 820px; }
.wtw-stats { margin: 0.6rem 0 0.3rem; border-top: 1px solid #eef1f4; padding-top: 0.55rem; }
.wtw-statline { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; padding: 0.18rem 0; flex-wrap: wrap; }
.wtw-statname { font-weight: 700; color: #1d2733; min-width: 120px; }
.wtw-form { display: inline-flex; gap: 3px; }
.fp { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border-radius: 3px; font-size: 0.62rem; font-weight: 700; color: #fff; }
.fp-W { background: #27ae60; }
.fp-D { background: #95a5a6; }
.fp-L { background: #e74c3c; }
.wtw-scorer { color: #5a6470; font-size: 0.8rem; }
.wtw-h2h { font-size: 0.78rem; color: #8a929c; margin-top: 0.35rem; }