/*
Theme Name: GeneratePress CineSports Child
Template: generatepress
Version: 1.0
Author: Jairaj
Text Domain: gp-cinesports
*/
/* Content from css\components.css */

/*
 * CineSports — components.css
 * Shared components used across ALL templates (cricket + F1)
 * Loaded on every template page
 */

/* ============================================================
   CSS VARIABLES — Global Design Tokens
   ============================================================ */
:root {
    --cs-dark:        #111827;
    --cs-navy:        #1a2744;
    --cs-surface:     #ffffff;
    --cs-bg:          #f4f6fa;
    --cs-border:      #e0e8f0;
    --cs-ink:         #0d1b2a;
    --cs-ink-mid:     #2c3e50;
    --cs-ink-light:   #6b7c93;

    /* Cricket palette */
    --cs-cricket-gold:   #f4a100;
    --cs-cricket-navy:   #0a1628;
    --cs-cricket-green:  #10b981;

    /* F1 palette */
    --cs-f1-red:      #e11d48;
    --cs-f1-dark:     #0f0f0f;
    --cs-f1-silver:   #c0c0c0;

    /* Status */
    --cs-win:         #10b981;
    --cs-win-bg:      #e8f8f0;
    --cs-lose:        #ef4444;
    --cs-lose-bg:     #fff5f5;
    --cs-neutral:     #f59e0b;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
.cs-template-page * {
    box-sizing: border-box;
}

/* ============================================================
   FIX: Black bar after article content
   GeneratePress adds background colour to article elements.
   Reset it for all custom template articles.
   ============================================================ */
body.cs-template-page #primary,
body.cs-template-page #main,
body.cs-template-page article,
body.cs-template-page .inside-article,
body.cs-template-page .entry-content,
body.cs-template-page .page-content {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove any minimum height that creates empty black space */
body.cs-template-page #primary { min-height: unset; }

/* Ensure the site container doesn't add extra background */
body.cs-template-page .site-content,
body.cs-template-page #content {
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Full-width layout — no sidebar offset */
body.cs-template-page .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

body.single-post #page,
body.single-post #content,
body.single-post #primary,
body.single-post #main {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.single-post .single-article {
    width: 100%;
}

body.single-post .post-header .container,
body.single-post .featured-image,
body.single-post .article-body,
body.single-post .post-navigation,
body.single-post .comments {
    width: min(100% - 32px, 1024px);
    margin-left: auto;
    margin-right: auto;
}

body.single-post .post-header .container,
body.single-post .article-body,
body.single-post .comments {
    max-width: 860px;
}

body.single-post .featured-image {
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: hidden;
}

body.single-post .featured-image img {
    display: block;
    width: 100%;
    height: auto;
}

body.single-post .article-content,
body.single-post .entry-content {
    width: 100%;
    max-width: 100%;
    font-size: 1.125rem;
    line-height: 1.8;
    overflow-wrap: break-word;
    word-break: normal;
}

body.single-post .entry-content > *:first-child,
body.single-post .article-content > *:first-child {
    margin-top: 0;
}

body.single-post .entry-content > *:last-child,
body.single-post .article-content > *:last-child {
    margin-bottom: 0;
}

body.single-post .entry-content p,
body.single-post .article-content p,
body.single-post .entry-content ul,
body.single-post .entry-content ol,
body.single-post .article-content ul,
body.single-post .article-content ol,
body.single-post .entry-content h1,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .entry-content h5,
body.single-post .entry-content h6,
body.single-post .article-content h1,
body.single-post .article-content h2,
body.single-post .article-content h3,
body.single-post .article-content h4,
body.single-post .article-content h5,
body.single-post .article-content h6,
body.single-post .entry-content .wp-block-group,
body.single-post .entry-content .wp-block-columns,
body.single-post .entry-content .wp-block-image,
body.single-post .entry-content .wp-block-cover,
body.single-post .entry-content .wp-block-table,
body.single-post .entry-content .wp-block-quote,
body.single-post .article-content .wp-block-group,
body.single-post .article-content .wp-block-columns,
body.single-post .article-content .wp-block-image,
body.single-post .article-content .wp-block-cover,
body.single-post .article-content .wp-block-table,
body.single-post .article-content .wp-block-quote {
    max-width: 100%;
}

body.single-post .entry-content h1,
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4,
body.single-post .entry-content h5,
body.single-post .entry-content h6,
body.single-post .article-content h1,
body.single-post .article-content h2,
body.single-post .article-content h3,
body.single-post .article-content h4,
body.single-post .article-content h5,
body.single-post .article-content h6 {
    margin: 1.6em 0 0.6em;
    line-height: 1.25;
}

body.single-post .entry-content ul,
body.single-post .entry-content ol,
body.single-post .article-content ul,
body.single-post .article-content ol {
    margin: 0 0 1.5em 1.5em;
    padding: 0;
}

body.single-post .entry-content li,
body.single-post .article-content li {
    margin-bottom: 0.5em;
}

body.single-post .entry-content img,
body.single-post .article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

body.single-post .entry-content figure,
body.single-post .article-content figure {
    margin: 0 0 1.5rem;
}

body.single-post .entry-content .alignwide,
body.single-post .entry-content .alignfull,
body.single-post .article-content .alignwide,
body.single-post .article-content .alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

body.single-post .advertisement,
body.single-post .in-content-ad {
    margin: 32px 0;
    padding: 18px;
    text-align: center;
    clear: both;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #f8f8f8;
}

body.single-post .advertisement .ad-label,
body.single-post .in-content-ad .ad-label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #666;
}

body.single-post .advertisement .ad-placeholder,
body.single-post .in-content-ad .ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 68px;
    max-width: 768px;
    margin: 0 auto;
    border-radius: 8px;
    background: #ececec;
    color: #444;
}

/* Article content wrapper reset */
.cs-article-content {
    font-family: 'Hind', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #111827;
}

.cs-article-content p { margin-bottom: 1.2em; color: #111827; }
.cs-article-content h2, .cs-article-content h3 { color: #0d1b2a; }

/* ============================================================
   SHARED TEMPLATE ARTICLE FLOW
   Keeps template content in a readable column and prevents
   Gutenberg/classic editor content from overflowing the layout.
   ============================================================ */
body.cs-template-page .cs-template-page,
body.cs-template-page article,
body.cs-template-page .inside-article,
body.cs-template-page .article-wrap,
body.cs-template-page .article-body,
body.cs-template-page .cs-article-content,
body.cs-template-page .entry-content {
    min-width: 0;
}

body.cs-template-page .article-wrap,
body.cs-template-page .article-body,
body.cs-template-page .cs-article-content,
body.cs-template-page .entry-content {
    width: 100%;
    max-width: 860px;
    font-size: 1.0625rem;
    line-height: 1.8;
    overflow-wrap: break-word;
    word-break: normal;
}

body.cs-template-page .article-wrap,
body.cs-template-page .article-body,
body.cs-template-page .cs-article-content {
    margin-left: auto;
    margin-right: auto;
}

body.cs-template-page .cs-article-content > *:first-child,
body.cs-template-page .entry-content > *:first-child,
body.cs-template-page .article-body > *:first-child {
    margin-top: 0;
}

body.cs-template-page .cs-article-content > *:last-child,
body.cs-template-page .entry-content > *:last-child,
body.cs-template-page .article-body > *:last-child {
    margin-bottom: 0;
}

body.cs-template-page .cs-article-content p,
body.cs-template-page .entry-content p,
body.cs-template-page .article-body p,
body.cs-template-page .cs-article-content ul,
body.cs-template-page .entry-content ul,
body.cs-template-page .article-body ul,
body.cs-template-page .cs-article-content ol,
body.cs-template-page .entry-content ol,
body.cs-template-page .article-body ol {
    max-width: 100%;
    font-size: inherit;
    line-height: inherit;
}

body.cs-template-page .cs-article-content h1,
body.cs-template-page .cs-article-content h2,
body.cs-template-page .cs-article-content h3,
body.cs-template-page .cs-article-content h4,
body.cs-template-page .cs-article-content h5,
body.cs-template-page .cs-article-content h6,
body.cs-template-page .entry-content h1,
body.cs-template-page .entry-content h2,
body.cs-template-page .entry-content h3,
body.cs-template-page .entry-content h4,
body.cs-template-page .entry-content h5,
body.cs-template-page .entry-content h6,
body.cs-template-page .article-body h1,
body.cs-template-page .article-body h2,
body.cs-template-page .article-body h3,
body.cs-template-page .article-body h4,
body.cs-template-page .article-body h5,
body.cs-template-page .article-body h6 {
    margin: 1.6em 0 0.6em;
    line-height: 1.25;
}

body.cs-template-page .cs-article-content h1,
body.cs-template-page .entry-content h1,
body.cs-template-page .article-body h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
}

body.cs-template-page .cs-article-content h2,
body.cs-template-page .entry-content h2,
body.cs-template-page .article-body h2 {
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
}

body.cs-template-page .cs-article-content h3,
body.cs-template-page .entry-content h3,
body.cs-template-page .article-body h3 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

body.cs-template-page .cs-article-content h4,
body.cs-template-page .entry-content h4,
body.cs-template-page .article-body h4 {
    font-size: 1.1rem;
}

body.cs-template-page .cs-article-content ul,
body.cs-template-page .cs-article-content ol,
body.cs-template-page .entry-content ul,
body.cs-template-page .entry-content ol,
body.cs-template-page .article-body ul,
body.cs-template-page .article-body ol {
    margin: 0 0 1.5em 1.5em;
    padding: 0;
}

body.cs-template-page .cs-article-content li,
body.cs-template-page .entry-content li,
body.cs-template-page .article-body li {
    margin-bottom: 0.5em;
}

body.cs-template-page .cs-article-content img,
body.cs-template-page .entry-content img,
body.cs-template-page .article-body img,
body.cs-template-page .cs-article-content video,
body.cs-template-page .entry-content video,
body.cs-template-page .article-body video,
body.cs-template-page .cs-article-content iframe,
body.cs-template-page .entry-content iframe,
body.cs-template-page .article-body iframe {
    display: block;
    max-width: 100%;
    height: auto;
}

body.cs-template-page .cs-article-content figure,
body.cs-template-page .entry-content figure,
body.cs-template-page .article-body figure {
    max-width: 100%;
    margin: 0 0 1.5rem;
}

body.cs-template-page .cs-article-content .wp-block-group,
body.cs-template-page .cs-article-content .wp-block-columns,
body.cs-template-page .cs-article-content .wp-block-image,
body.cs-template-page .cs-article-content .wp-block-cover,
body.cs-template-page .cs-article-content .wp-block-table,
body.cs-template-page .cs-article-content .wp-block-quote,
body.cs-template-page .entry-content .wp-block-group,
body.cs-template-page .entry-content .wp-block-columns,
body.cs-template-page .entry-content .wp-block-image,
body.cs-template-page .entry-content .wp-block-cover,
body.cs-template-page .entry-content .wp-block-table,
body.cs-template-page .entry-content .wp-block-quote,
body.cs-template-page .article-body .wp-block-group,
body.cs-template-page .article-body .wp-block-columns,
body.cs-template-page .article-body .wp-block-image,
body.cs-template-page .article-body .wp-block-cover,
body.cs-template-page .article-body .wp-block-table,
body.cs-template-page .article-body .wp-block-quote {
    max-width: 100%;
}

body.cs-template-page .cs-article-content .alignwide,
body.cs-template-page .cs-article-content .alignfull,
body.cs-template-page .entry-content .alignwide,
body.cs-template-page .entry-content .alignfull,
body.cs-template-page .article-body .alignwide,
body.cs-template-page .article-body .alignfull {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

body.cs-template-page .cs-article-content table,
body.cs-template-page .entry-content table,
body.cs-template-page .article-body table {
    width: 100%;
    font-size: 0.95rem;
}

body.cs-template-page .cs-article-content pre,
body.cs-template-page .entry-content pre,
body.cs-template-page .article-body pre,
body.cs-template-page .cs-article-content .wp-block-table,
body.cs-template-page .entry-content .wp-block-table,
body.cs-template-page .article-body .wp-block-table {
    max-width: 100%;
    overflow-x: auto;
}

/* ============================================================
   AUTHOR BOX
   Used in: all cricket templates, all F1 templates
   Class: .cs-author-box
   ============================================================ */
.cs-author-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 32px 0;
}

.cs-author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
    flex-shrink: 0;
}

.cs-author-avatar.cricket { background: var(--cs-cricket-gold); }
.cs-author-avatar.f1      { background: var(--cs-f1-red); }

.cs-author-name {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: var(--cs-dark);
    margin-bottom: 2px;
}

.cs-author-role {
    font-size: 0.8rem;
    color: var(--cs-ink-light);
    font-family: 'Hind', sans-serif;
}

.cs-author-bio {
    font-size: 0.85rem;
    color: var(--cs-ink-mid);
    margin-top: 6px;
    line-height: 1.5;
    font-family: 'Hind', sans-serif;
}

/* ============================================================
   TELEGRAM CTA
   Used in: ALL templates (bottom of every article)
   Class: .cs-tg-cta
   ============================================================ */
.cs-tg-cta {
    background: #f0f8ff;
    border: 1px solid #b8d9f8;
    border-left: 4px solid #0088cc;
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 32px 0;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cs-tg-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.cs-tg-text { flex: 1; min-width: 200px; }

.cs-tg-title {
    font-weight: 700;
    color: var(--cs-ink);
    font-size: 0.95rem;
    font-family: 'Baloo 2', sans-serif;
    margin-bottom: 3px;
}

.cs-tg-sub {
    font-size: 0.82rem;
    color: #555;
    line-height: 1.5;
    font-family: 'Hind', sans-serif;
}

.cs-tg-btn {
    background: #0088cc;
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    font-family: 'Baloo 2', sans-serif;
    transition: background 0.2s;
    flex-shrink: 0;
}

.cs-tg-btn:hover { background: #0066aa; color: #fff; }

/* ============================================================
   FANTASY CRICKET CTA (Dream11 / MPL / My11Circle)
   Used in: cricket-preview.php only
   Class: .cs-fantasy-cta
   ============================================================ */
.cs-fantasy-cta {
    background: linear-gradient(135deg, #0a1628, #1a2e55);
    border-radius: 14px;
    padding: 22px 24px;
    margin: 32px 0;
}

.cs-fantasy-cta-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.cs-fantasy-cta-sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 18px;
    font-family: 'Hind', sans-serif;
}

.cs-fantasy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.cs-fantasy-btn {
    display: block;
    text-align: center;
    padding: 12px 10px;
    border-radius: 10px;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.cs-fantasy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.cs-fantasy-btn.dream11 {
    background: linear-gradient(135deg, #e11d48, #be123c);
    color: #fff;
}

.cs-fantasy-btn.mpl {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
    color: #fff;
}

.cs-fantasy-btn.my11circle {
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #fff;
}

.cs-fantasy-btn-platform {
    font-size: 0.68rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 2px;
}

.cs-fantasy-btn-action {
    font-size: 0.92rem;
}

.cs-fantasy-disclaimer {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.3);
    margin-top: 12px;
    text-align: center;
    font-family: 'Hind', sans-serif;
}

/* ============================================================
   SHARED TABLE STYLES
   Used across all templates
   Class: .cs-table-wrap, .cs-table
   ============================================================ */
.cs-table-wrap {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.cs-table-header {
    padding: 11px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--cs-border);
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
}

.cs-table {
    width: 100%;
    border-collapse: collapse;
}

.cs-table th {
    background: #f8fafc;
    padding: 8px 12px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--cs-ink-light);
    text-align: left;
    border-bottom: 1px solid var(--cs-border);
    font-family: 'Baloo 2', sans-serif;
}

.cs-table th:not(:first-child) { text-align: center; }

.cs-table td {
    padding: 9px 12px;
    font-size: 0.88rem;
    color: var(--cs-ink);
    border-bottom: 1px solid #f0f4f8;
    font-family: 'Hind', sans-serif;
}

.cs-table tr:last-child td { border-bottom: none; }
.cs-table td:not(:first-child) { text-align: center; color: var(--cs-ink-mid); }
.cs-table .cs-player-name { font-weight: 700; color: var(--cs-ink); }
.cs-table .cs-highlight-green { color: #10b981; font-weight: 800; }
.cs-table .cs-highlight-gold  { color: #f59e0b; font-weight: 800; }
.cs-table .cs-highlight-red   { color: #ef4444; font-weight: 800; }

/* ============================================================
   SHARED STAT CARDS GRID
   Class: .cs-stat-grid, .cs-stat-card
   ============================================================ */
.cs-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 16px 0 28px;
}

.cs-stat-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}

.cs-stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cs-ink-light);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    margin-bottom: 6px;
}

.cs-stat-value {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--cs-dark);
    line-height: 1;
}

.cs-stat-sub {
    font-size: 0.72rem;
    color: var(--cs-ink-light);
    margin-top: 4px;
    font-family: 'Hind', sans-serif;
}

/* ============================================================
   SHARED INFO BOX / KEY FACTS
   Class: .cs-info-box
   ============================================================ */
.cs-info-box {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 20px 0;
}

.cs-info-box-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--cs-ink-light);
    margin-bottom: 12px;
}

.cs-info-row {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--cs-border);
    font-family: 'Hind', sans-serif;
    font-size: 0.88rem;
}

.cs-info-row:last-child { border-bottom: none; }

.cs-info-key {
    color: var(--cs-ink-light);
    min-width: 120px;
    flex-shrink: 0;
    font-size: 0.82rem;
}

.cs-info-val {
    color: var(--cs-ink);
    font-weight: 600;
}

/* ============================================================
   SECTION HEADING STYLE
   Class: .cs-section-h2
   ============================================================ */
.cs-section-h2 {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--cs-dark);
    margin: 44px 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cs-section-h2::after {
    content: '';
    flex: 1;
    height: 2px;
    border-radius: 2px;
}

/* Color variants for section underline */
.cs-section-h2.cricket::after {
    background: linear-gradient(90deg, var(--cs-cricket-gold), transparent);
}

.cs-section-h2.f1::after {
    background: linear-gradient(90deg, var(--cs-f1-red), transparent);
}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 600px) {
    .cs-fantasy-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .cs-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cs-tg-cta {
        flex-direction: column;
        text-align: center;
    }

    .cs-tg-btn {
        width: 100%;
        text-align: center;
    }

    .cs-author-box {
        flex-direction: column;
        text-align: center;
    }

    .cs-table th, .cs-table td {
        padding: 7px 8px;
        font-size: 0.78rem;
    }

    .cs-info-key { min-width: 90px; }
}

@media (max-width: 768px) {
    body.single-post .post-header .container,
    body.single-post .featured-image,
    body.single-post .article-body,
    body.single-post .post-navigation,
    body.single-post .comments {
        width: min(100% - 24px, 1024px);
    }

    body.single-post .article-content,
    body.single-post .entry-content {
        font-size: 1rem;
        line-height: 1.75;
    }

    body.cs-template-page .article-wrap,
    body.cs-template-page .article-body,
    body.cs-template-page .cs-article-content,
    body.cs-template-page .entry-content {
        font-size: 1rem;
        line-height: 1.75;
    }
}

/* ============================================================
   PAGE LAYOUT — Two-column (article + sidebar)
   Applied via .cs-page-layout wrapper in every template
   ============================================================ */
.cs-page-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: start;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.cs-sidebar,
.sidebar {   /* .sidebar = alias used in single.php */
    position: sticky;
    top: 20px;
}

/* Ad Box */
.cs-sidebar-ad {
    margin-bottom: 24px;
    text-align: center;
}

.cs-sidebar-ad-label {
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
    font-family: 'Baloo 2', sans-serif;
}

.cs-sidebar-ad-box {
    width: 300px;
    min-height: 250px;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.cs-sidebar-ad-placeholder {
    font-size: 0.78rem;
    color: #94a3b8;
    font-family: sans-serif;
}

/* Widget Box */
.cs-sidebar-widget {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.cs-sidebar-widget-title {
    background: #0f1923;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cs-sidebar-widget-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: #e10600;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}

/* Post rows */
.cs-sidebar-post {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f4f8;
    text-decoration: none;
    transition: background 0.15s;
}

.cs-sidebar-post:last-child { border-bottom: none; }
.cs-sidebar-post:hover { background: #f8fafc; }

.cs-sidebar-thumb {
    flex-shrink: 0;
    width: 72px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    background: #e2e8f0;
}

.cs-sidebar-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-sidebar-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: linear-gradient(135deg, #0f1923, #1a2e3e);
}

.cs-sidebar-post-info { flex: 1; min-width: 0; }

.cs-sidebar-post-title {
    font-size: 0.83rem;
    font-weight: 700;
    color: #0f1923;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-sidebar-post-date {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 960px) {
    .cs-page-layout {
        grid-template-columns: 1fr;
    }
    .cs-sidebar {
        position: static;
    }
}
/* ============================================================
   CUSTOM HTML BLOCK HERO IMAGE WRAPPERS & FEATURED IMAGES
   ============================================================ */
.hero-img-wrap, .featured-image.post-thumbnail { margin: 0 0 28px; border-radius: 12px !important; overflow: hidden !important; }
.hero-img-wrap img, .featured-image.post-thumbnail img { width: 100% !important; height: auto !important; display: block; border-radius: 12px !important; }
.hero-img-wrap figcaption { font-size: 0.78rem; color: #888; margin-top: 6px; text-align: center; }


/* Content from css\cricket.css */

/*
 * CineSports — cricket.css
 * Styles for all 4 cricket templates
 * Loaded only on cricket template pages via functions.php
 * Depends on: components.css
 */

/* ============================================================
   SHARED CRICKET ELEMENTS
   Used across all 4 cricket templates
   ============================================================ */

/* Top strip bar */
.cs-cricket-strip {
    background: var(--cs-cricket-navy);
    padding: 9px 0;
    text-align: center;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cs-cricket-strip.preview  { color: var(--cs-cricket-gold); }
.cs-cricket-strip.postmatch { color: var(--cs-cricket-green); }
.cs-cricket-strip.pitch    { color: #c8a96e; }
.cs-cricket-strip.player   { color: #a78bfa; }

.cs-cricket-strip span {
    color: rgba(255,255,255,0.3);
    margin: 0 10px;
}

/* Body wrapper */
.cs-cricket-body {
    max-width: 960px;
    margin: 0 auto;
    padding: 36px 24px 64px;
    font-family: 'Hind', sans-serif;
    background: var(--cs-bg);
}

.cs-cricket-body p {
    color: var(--cs-ink-mid);
    margin-bottom: 16px;
    font-size: 0.97rem;
    line-height: 1.85;
}

.cs-cricket-body strong { color: var(--cs-ink); }

/* ============================================================
   CRICKET PREVIEW TEMPLATE
   template: templates/cricket-preview.php
   Accent: Gold (#f4a100) + Navy (#0a1628)
   ============================================================ */

/* Hero */
.cs-preview-hero {
    background: var(--cs-cricket-navy);
    position: relative;
    overflow: hidden;
}

.cs-preview-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 10%, rgba(244,161,0,0.15) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 90%, rgba(26,39,68,0.9) 0%, transparent 60%);
}

.cs-preview-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 44px 24px 36px;
    position: relative;
}

.cs-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cs-cricket-gold);
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 3px;
    margin-bottom: 18px;
}

.cs-preview-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.cs-preview-title em {
    color: var(--cs-cricket-gold);
    font-style: normal;
}

.cs-preview-subtitle {
    font-family: 'Hind', sans-serif;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 22px;
    line-height: 1.6;
}

.cs-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.cs-preview-tag {
    background: rgba(244,161,0,0.15);
    border: 1px solid rgba(244,161,0,0.35);
    color: var(--cs-cricket-gold);
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: 1px;
    font-weight: 700;
}

/* VS Banner */
.cs-vs-banner {
    background: linear-gradient(135deg, #0f1f3d 0%, #1a2e55 100%);
    position: relative;
    overflow: hidden;
}

.cs-vs-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg, transparent, transparent 60px,
        rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px
    );
}

.cs-vs-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 24px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.cs-vs-team { text-align: center; }

.cs-vs-flag { font-size: 2.6rem; margin-bottom: 8px; }

.cs-vs-name {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 3px;
}

.cs-vs-rank {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    font-family: 'Hind', sans-serif;
}

.cs-vs-center { text-align: center; }

.cs-vs-pill {
    background: var(--cs-cricket-gold);
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
}

.cs-vs-time {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    margin-top: 8px;
    font-family: 'Hind', sans-serif;
}

/* Prediction bar */
.cs-predict-wrap {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    padding: 18px 22px;
    margin: 16px 0 28px;
}

.cs-predict-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
}

.cs-predict-bar {
    height: 10px;
    background: var(--cs-border);
    border-radius: 5px;
    overflow: hidden;
}

.cs-predict-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--cs-cricket-gold), #e67e00);
    transition: width 0.8s ease;
}

.cs-predict-pct {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--cs-ink-light);
    font-family: 'Hind', sans-serif;
}

/* Key battle card */
.cs-battle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0 28px;
}

.cs-battle-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-top: 3px solid var(--cs-cricket-gold);
    border-radius: 0 0 10px 10px;
    padding: 14px 16px;
}

.cs-battle-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--cs-cricket-gold);
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    margin-bottom: 6px;
}

.cs-battle-players {
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--cs-dark);
    margin-bottom: 6px;
}

.cs-battle-note {
    font-size: 0.8rem;
    color: var(--cs-ink-mid);
    line-height: 1.5;
    font-family: 'Hind', sans-serif;
}

/* Playing XI */
.cs-xi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0 28px;
}

.cs-xi-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    overflow: hidden;
}

.cs-xi-header {
    padding: 10px 16px;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(90deg, #1a3a6e, #0f2a55);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cs-xi-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cs-xi-list li {
    padding: 8px 16px;
    font-size: 0.86rem;
    border-bottom: 1px solid #f0f4f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Hind', sans-serif;
    color: var(--cs-ink);
}

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

.cs-xi-list li.captain .xi-name { font-weight: 700; }

.cs-xi-role {
    font-size: 0.68rem;
    color: var(--cs-ink-light);
    background: #f0f4f8;
    padding: 2px 7px;
    border-radius: 3px;
}

/* ============================================================
   POST-MATCH ANALYSIS TEMPLATE
   template: templates/cricket-postmatch.php
   Accent: Green (#10b981) + Dark (#111827)
   ============================================================ */

.cs-postmatch-hero {
    background: var(--cs-dark);
    position: relative;
    overflow: hidden;
}

.cs-postmatch-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(16,185,129,0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(26,39,68,0.8) 0%, transparent 60%);
}

.cs-postmatch-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 44px 24px 36px;
    position: relative;
}

.cs-postmatch-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cs-cricket-green);
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 3px;
    margin-bottom: 18px;
}

.cs-postmatch-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.cs-postmatch-title em {
    color: var(--cs-cricket-green);
    font-style: normal;
}

.cs-postmatch-subtitle {
    font-family: 'Hind', sans-serif;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 22px;
}

.cs-postmatch-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.cs-postmatch-tag {
    background: rgba(16,185,129,0.15);
    border: 1px solid rgba(16,185,129,0.3);
    color: var(--cs-cricket-green);
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Scoreboard */
.cs-scoreboard {
    background: linear-gradient(135deg, #0f1f3d 0%, #1a2e55 100%);
    position: relative;
    overflow: hidden;
}

.cs-scoreboard::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg, transparent, transparent 60px,
        rgba(255,255,255,0.015) 60px, rgba(255,255,255,0.015) 61px
    );
}

.cs-sb-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 24px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.cs-sb-team { text-align: center; }
.cs-sb-flag { font-size: 2.4rem; margin-bottom: 6px; }
.cs-sb-name {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 4px;
}

.cs-sb-score {
    font-family: 'Baloo 2', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.cs-sb-team.winner .cs-sb-score { color: var(--cs-cricket-green); }
.cs-sb-team.loser  .cs-sb-score { color: rgba(255,255,255,0.4); }

.cs-sb-overs {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.35);
    margin-top: 4px;
    font-family: 'Hind', sans-serif;
}

.cs-sb-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 3px;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.cs-sb-team.winner .cs-sb-badge { background: var(--cs-cricket-green); color: #fff; }
.cs-sb-team.loser  .cs-sb-badge { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }

.cs-sb-center { text-align: center; }

.cs-sb-result-pill {
    background: var(--cs-cricket-green);
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 6px 14px;
    border-radius: 20px;
    white-space: nowrap;
    display: inline-block;
}

/* Player of the match */
.cs-potm {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #bbf7d0;
    border-left: 4px solid var(--cs-cricket-green);
    border-radius: 0 12px 12px 0;
    padding: 18px 22px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 24px 0;
}

.cs-potm-trophy { font-size: 2.2rem; flex-shrink: 0; }

.cs-potm-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #065f46;
    margin-bottom: 4px;
    font-family: 'Baloo 2', sans-serif;
}

.cs-potm-name {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--cs-dark);
    margin-bottom: 4px;
}

.cs-potm-team {
    font-size: 0.75rem;
    color: var(--cs-cricket-green);
    font-weight: 600;
    margin-bottom: 8px;
}

.cs-potm-reason {
    font-size: 0.9rem;
    color: var(--cs-ink-mid);
    line-height: 1.6;
    font-family: 'Hind', sans-serif;
}

/* Turning points timeline */
.cs-tp {
    position: relative;
    padding-left: 48px;
    margin-bottom: 20px;
}

.cs-tp::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    bottom: -20px;
    width: 2px;
    background: linear-gradient(180deg, var(--cs-cricket-green), var(--cs-border));
}

.cs-tp:last-child::before { display: none; }

.cs-tp-dot {
    position: absolute;
    left: 10px;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cs-cricket-green);
    border: 3px solid var(--cs-bg);
}

.cs-tp-over {
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--cs-cricket-green);
    margin-bottom: 3px;
}

.cs-tp-event {
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--cs-dark);
    margin-bottom: 4px;
}

.cs-tp-impact {
    font-size: 0.88rem;
    color: var(--cs-ink-mid);
    line-height: 1.6;
    font-family: 'Hind', sans-serif;
}

/* Player ratings */
.cs-ratings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0 28px;
}

.cs-rating-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cs-rc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cs-rc-name {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--cs-dark);
}

.cs-rc-team {
    font-size: 0.7rem;
    color: var(--cs-ink-light);
    margin-top: 2px;
}

.cs-rc-score {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
}

.cs-rc-bar {
    height: 5px;
    background: #e8edf2;
    border-radius: 3px;
    overflow: hidden;
}

.cs-rc-fill {
    height: 100%;
    border-radius: 3px;
}

.cs-rc-note {
    font-size: 0.76rem;
    color: var(--cs-ink-light);
    font-style: italic;
    font-family: 'Hind', sans-serif;
}

/* Win/loss analysis */
.cs-wl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 16px 0 28px;
}

.cs-wl-card {
    border-radius: 10px;
    padding: 16px 18px;
}

.cs-wl-card.winner { background: var(--cs-win-bg); border: 1px solid #a3d9bd; }
.cs-wl-card.loser  { background: var(--cs-lose-bg); border: 1px solid #f0b8b8; }

.cs-wl-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cs-wl-card.winner .cs-wl-title { color: #0a5c36; }
.cs-wl-card.loser  .cs-wl-title { color: #7a0000; }

.cs-wl-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cs-wl-list li {
    padding: 5px 0 5px 18px;
    position: relative;
    font-size: 0.86rem;
    color: var(--cs-ink-mid);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    line-height: 1.5;
    font-family: 'Hind', sans-serif;
}

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

.cs-wl-card.winner .cs-wl-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--cs-win);
    font-weight: 700;
    font-size: 0.75rem;
    top: 6px;
}

.cs-wl-card.loser .cs-wl-list li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: var(--cs-lose);
    font-weight: 700;
    font-size: 0.75rem;
    top: 6px;
}

/* Next match teaser */
.cs-next-match {
    background: var(--cs-dark);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 28px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.cs-next-label {
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cs-cricket-green);
    margin-bottom: 5px;
}

.cs-next-teams {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}

.cs-next-detail {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    margin-top: 3px;
    font-family: 'Hind', sans-serif;
}

.cs-next-btn {
    background: var(--cs-cricket-green);
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    font-family: 'Baloo 2', sans-serif;
    transition: background 0.2s;
}

.cs-next-btn:hover { background: #059669; color: #fff; }

/* ============================================================
   PITCH REPORT TEMPLATE
   template: templates/pitch-report.php
   Accent: Amber/Brown (#c8a96e + #5c3d1e)
   ============================================================ */

.cs-pitch-hero {
    background: linear-gradient(135deg, #2c1a08 0%, #5c3d1e 50%, #3d2510 100%);
    position: relative;
    overflow: hidden;
}

.cs-pitch-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 30%, rgba(200,169,110,0.2) 0%, transparent 60%);
}

.cs-pitch-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 44px 24px 36px;
    position: relative;
}

.cs-pitch-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #c8a96e;
    color: #2c1a08;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 3px;
    margin-bottom: 18px;
}

.cs-pitch-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.cs-pitch-title em { color: #c8a96e; font-style: normal; }

.cs-pitch-subtitle {
    font-family: 'Hind', sans-serif;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 22px;
}

.cs-pitch-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.cs-pitch-tag {
    background: rgba(200,169,110,0.2);
    border: 1px solid rgba(200,169,110,0.4);
    color: #c8a96e;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Pitch diagram visual */
.cs-pitch-diagram {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    padding: 22px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cs-pitch-oval {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    background: linear-gradient(135deg, #8B7355, #c8a96e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}

.cs-pitch-oval-inner {
    width: 40px;
    height: 60px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    border: 2px solid rgba(255,255,255,0.3);
}

.cs-pitch-meters { flex: 1; min-width: 200px; }

.cs-pitch-meter {
    margin-bottom: 12px;
}

.cs-pitch-meter-label {
    display: flex;
    justify-content: space-between;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cs-ink);
    margin-bottom: 5px;
}

.cs-pitch-meter-bar {
    height: 8px;
    background: #e8edf2;
    border-radius: 4px;
    overflow: hidden;
}

.cs-pitch-meter-fill {
    height: 100%;
    border-radius: 4px;
}

.cs-pitch-meter-fill.pace   { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.cs-pitch-meter-fill.spin   { background: linear-gradient(90deg, #8b5cf6, #6d28d9); }
.cs-pitch-meter-fill.bounce { background: linear-gradient(90deg, #f59e0b, #d97706); }
.cs-pitch-meter-fill.carry  { background: linear-gradient(90deg, #10b981, #059669); }

/* ============================================================
   PLAYER PROFILE TEMPLATE
   template: templates/player-profile.php
   Accent: Purple (#7c3aed) + Dark
   ============================================================ */

.cs-player-hero {
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1554 50%, #1a0a2e 100%);
    position: relative;
    overflow: hidden;
}

.cs-player-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 20%, rgba(124,58,237,0.25) 0%, transparent 55%);
}

.cs-player-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 44px 24px 36px;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    flex-wrap: wrap;
}

.cs-player-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #7c3aed;
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 3px;
    margin-bottom: 14px;
}

.cs-player-info { flex: 1; min-width: 260px; }

.cs-player-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 8px;
}

.cs-player-title em { color: #a78bfa; font-style: normal; }

.cs-player-subtitle {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 18px;
    font-family: 'Hind', sans-serif;
}

.cs-player-tag {
    background: rgba(124,58,237,0.2);
    border: 1px solid rgba(124,58,237,0.4);
    color: #a78bfa;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Career timeline */
.cs-timeline { margin: 16px 0 28px; }

.cs-tl-item {
    display: flex;
    gap: 16px;
    margin-bottom: 4px;
}

.cs-tl-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 40px;
}

.cs-tl-year {
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    color: #7c3aed;
    white-space: nowrap;
}

.cs-tl-line {
    width: 2px;
    flex: 1;
    background: linear-gradient(180deg, #7c3aed, var(--cs-border));
    margin-top: 4px;
    min-height: 30px;
}

.cs-tl-item:last-child .cs-tl-line { display: none; }

.cs-tl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #7c3aed;
    border: 2px solid var(--cs-bg);
    margin-top: 3px;
    flex-shrink: 0;
}

.cs-tl-content {
    padding-bottom: 20px;
    flex: 1;
}

.cs-tl-event {
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--cs-dark);
    margin-bottom: 4px;
}

.cs-tl-detail {
    font-size: 0.85rem;
    color: var(--cs-ink-mid);
    line-height: 1.6;
    font-family: 'Hind', sans-serif;
}

/* ============================================================
   RESPONSIVE — Cricket Templates
   ============================================================ */
@media (max-width: 600px) {
    .cs-vs-inner { grid-template-columns: 1fr; }
    .cs-vs-center { order: -1; }
    .cs-preview-hero-inner,
    .cs-postmatch-hero-inner,
    .cs-pitch-hero-inner,
    .cs-player-hero-inner { padding: 30px 16px 24px; }
    .cs-cricket-body { padding: 24px 16px 48px; }
    .cs-sb-inner { grid-template-columns: 1fr; }
    .cs-sb-center { order: -1; }
    .cs-battle-grid { grid-template-columns: 1fr; }
    .cs-xi-grid { grid-template-columns: 1fr; }
    .cs-ratings-grid { grid-template-columns: 1fr; }
    .cs-wl-grid { grid-template-columns: 1fr; }
    .cs-next-match { flex-direction: column; }
    .cs-next-btn { width: 100%; text-align: center; }
    .cs-potm { flex-direction: column; }
    .cs-pitch-diagram { flex-direction: column; align-items: flex-start; }
    .cs-player-hero-inner { flex-direction: column; }
}


/* Content from css\f1.css */

/*
 * CineSports — f1.css
 * Styles for all 4 F1 templates
 * Loaded only on F1 template pages via functions.php
 * Depends on: components.css
 */

/* ============================================================
   SHARED F1 ELEMENTS
   ============================================================ */

.cs-f1-strip {
    padding: 9px 0;
    text-align: center;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.cs-f1-strip.analysis  { background: #0f0f0f; color: var(--cs-f1-red); }
.cs-f1-strip.preview   { background: #0a1628; color: #60a5fa; }
.cs-f1-strip.technical { background: #0a1a0a; color: #4ade80; }
.cs-f1-strip.feature   { background: #1a0a00; color: #fbbf24; }

.cs-f1-strip span {
    color: rgba(255,255,255,0.25);
    margin: 0 10px;
}

.cs-f1-body {
    max-width: 960px;
    margin: 0 auto;
    padding: 36px 24px 64px;
    font-family: 'Hind', sans-serif;
}

.cs-f1-body p {
    color: var(--cs-ink-mid);
    margin-bottom: 16px;
    font-size: 0.97rem;
    line-height: 1.85;
}

.cs-f1-body strong { color: var(--cs-ink); }

/* ============================================================
   F1 RACE ANALYSIS TEMPLATE
   template: templates/f1-analysis.php
   Accent: Red (#e11d48) + Near Black (#0f0f0f)
   Mood: Newspaper / Hard news
   ============================================================ */

.cs-f1a-hero {
    background: #0f0f0f;
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid var(--cs-f1-red);
}

.cs-f1a-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 90% 10%, rgba(225,29,72,0.18) 0%, transparent 50%);
}

.cs-f1a-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 44px 24px 36px;
    position: relative;
}

.cs-f1a-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cs-f1-red);
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 2px;
    margin-bottom: 18px;
}

.cs-f1a-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 10px;
}

.cs-f1a-title em { color: var(--cs-f1-red); font-style: normal; }

.cs-f1a-subtitle {
    font-family: 'Hind', sans-serif;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.45);
    margin-bottom: 22px;
}

.cs-f1a-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.cs-f1a-tag {
    background: rgba(225,29,72,0.15);
    border: 1px solid rgba(225,29,72,0.3);
    color: #fb7185;
    padding: 4px 12px;
    border-radius: 2px;
    font-size: 0.7rem;
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Race result bar */
.cs-race-result {
    background: #0f0f0f;
    padding: 20px 0;
    border-bottom: 1px solid #1a1a1a;
}

.cs-race-result-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

.cs-podium {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cs-podium-item {
    flex: 1;
    min-width: 140px;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 14px 16px;
    border-top: 3px solid;
    text-align: center;
}

.cs-podium-item.p1 { border-color: #ffd700; }
.cs-podium-item.p2 { border-color: #c0c0c0; }
.cs-podium-item.p3 { border-color: #cd7f32; }

.cs-podium-pos {
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.cs-podium-item.p1 .cs-podium-pos { color: #ffd700; }
.cs-podium-item.p2 .cs-podium-pos { color: #c0c0c0; }
.cs-podium-item.p3 .cs-podium-pos { color: #cd7f32; }

.cs-podium-driver {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 2px;
}

.cs-podium-team {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    font-family: 'Hind', sans-serif;
}

/* Lap timeline */
.cs-lap-timeline {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    overflow: hidden;
    margin: 16px 0;
}

.cs-lap-header {
    background: #0f0f0f;
    padding: 10px 18px;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--cs-f1-red);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cs-lap-item {
    display: flex;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid #f0f4f8;
    align-items: flex-start;
}

.cs-lap-item:last-child { border-bottom: none; }

.cs-lap-num {
    font-family: 'Baloo 2', sans-serif;
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--cs-f1-red);
    min-width: 50px;
    flex-shrink: 0;
}

.cs-lap-event {
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cs-dark);
    margin-bottom: 3px;
}

.cs-lap-detail {
    font-size: 0.82rem;
    color: var(--cs-ink-mid);
    line-height: 1.5;
    font-family: 'Hind', sans-serif;
}

/* ============================================================
   F1 RACE PREVIEW TEMPLATE
   template: templates/f1-preview.php
   Accent: Blue (#3b82f6) + Navy (#0a1628)
   Mood: Sports magazine, bold
   ============================================================ */

.cs-f1p-hero {
    background: linear-gradient(135deg, #0a1628 0%, #1e3a6e 100%);
    position: relative;
    overflow: hidden;
}

.cs-f1p-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.2) 0%, transparent 55%);
}

.cs-f1p-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 44px 24px 36px;
    position: relative;
}

.cs-f1p-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #3b82f6;
    color: #fff;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 3px;
    margin-bottom: 18px;
}

.cs-f1p-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.cs-f1p-title em { color: #60a5fa; font-style: normal; }

.cs-f1p-subtitle {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 22px;
    font-family: 'Hind', sans-serif;
}

.cs-f1p-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.cs-f1p-tag {
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.35);
    color: #60a5fa;
    padding: 4px 12px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Circuit info card */
.cs-circuit-card {
    background: linear-gradient(135deg, #0a1628, #1e3a6e);
    border-radius: 12px;
    padding: 22px;
    margin: 20px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.cs-circuit-fact {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px 14px;
}

.cs-circuit-fact-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #60a5fa;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    margin-bottom: 4px;
}

.cs-circuit-fact-value {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
}

/* Team outlook table */
.cs-team-outlook {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    overflow: hidden;
    margin: 16px 0;
}

.cs-team-outlook-header {
    background: linear-gradient(90deg, #0a1628, #1e3a6e);
    padding: 10px 18px;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    color: #60a5fa;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.cs-team-row {
    display: grid;
    grid-template-columns: 2fr 1fr 3fr;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid #f0f4f8;
    align-items: center;
    font-family: 'Hind', sans-serif;
    font-size: 0.88rem;
}

.cs-team-row:last-child { border-bottom: none; }
.cs-team-row-name { font-weight: 700; color: var(--cs-dark); }
.cs-team-row-form { text-align: center; }
.cs-team-row-note { color: var(--cs-ink-mid); font-size: 0.82rem; }

/* Form pill */
.cs-form-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
}

.cs-form-pill.strong   { background: #dcfce7; color: #14532d; }
.cs-form-pill.average  { background: #fef3c7; color: #78350f; }
.cs-form-pill.poor     { background: #fee2e2; color: #7f1d1d; }

/* ============================================================
   F1 TECHNICAL DEEP DIVE
   template: templates/f1-technical.php
   Accent: Green (#22c55e) + Very Dark (#050f05)
   Mood: Data/Monospace
   ============================================================ */

.cs-f1t-hero {
    background: #050f05;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid #22c55e;
}

.cs-f1t-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 70% 30%, rgba(34,197,94,0.15) 0%, transparent 55%),
        repeating-linear-gradient(
            0deg, transparent, transparent 30px,
            rgba(34,197,94,0.03) 30px, rgba(34,197,94,0.03) 31px
        );
}

.cs-f1t-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 44px 24px 36px;
    position: relative;
}

.cs-f1t-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #22c55e;
    color: #050f05;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 2px;
    margin-bottom: 18px;
}

.cs-f1t-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.cs-f1t-title em { color: #22c55e; font-style: normal; }

.cs-f1t-subtitle {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: rgba(34,197,94,0.6);
    margin-bottom: 22px;
}

.cs-f1t-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid rgba(34,197,94,0.2);
}

.cs-f1t-tag {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.3);
    color: #22c55e;
    padding: 4px 12px;
    border-radius: 2px;
    font-size: 0.68rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Spec table */
.cs-spec-table-wrap {
    background: #0a1a0a;
    border: 1px solid #1a3a1a;
    border-radius: 8px;
    overflow: hidden;
    margin: 16px 0;
}

.cs-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Courier New', monospace;
}

.cs-spec-table th {
    background: #0f2a0f;
    padding: 8px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #22c55e;
    text-align: left;
    border-bottom: 1px solid #1a3a1a;
}

.cs-spec-table td {
    padding: 9px 16px;
    font-size: 0.85rem;
    color: #a7f3d0;
    border-bottom: 1px solid #0f1f0f;
}

.cs-spec-table tr:last-child td { border-bottom: none; }
.cs-spec-table td:first-child { color: rgba(255,255,255,0.5); }
.cs-spec-table .spec-val { color: #22c55e; font-weight: 700; }

/* Risk/advantage bars */
.cs-risk-bar-wrap { margin: 16px 0 28px; }

.cs-risk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-family: 'Courier New', monospace;
}

.cs-risk-bar-label {
    min-width: 160px;
    font-size: 0.78rem;
    color: var(--cs-ink-mid);
    flex-shrink: 0;
}

.cs-risk-bar-track {
    flex: 1;
    height: 8px;
    background: #e8edf2;
    border-radius: 4px;
    overflow: hidden;
}

.cs-risk-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #22c55e, #15803d);
}

.cs-risk-bar-pct {
    min-width: 36px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #22c55e;
    text-align: right;
}

/* ============================================================
   F1 DRIVER/TEAM FEATURE
   template: templates/f1-feature.php
   Accent: Crimson (#dc2626) + Gold (#d97706)
   Mood: Literary, long-form
   ============================================================ */

.cs-f1f-hero {
    background: linear-gradient(135deg, #1a0505 0%, #3d0a0a 50%, #1a0505 100%);
    position: relative;
    overflow: hidden;
}

.cs-f1f-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 40%, rgba(220,38,38,0.2) 0%, transparent 60%);
}

.cs-f1f-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 52px 24px 44px;
    position: relative;
    text-align: center;
}

.cs-f1f-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid #dc2626;
    color: #fca5a5;
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 2px;
    margin-bottom: 22px;
}

.cs-f1f-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 14px;
}

.cs-f1f-title em { color: #fca5a5; font-style: normal; }

.cs-f1f-deck {
    font-family: 'Hind', sans-serif;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 22px;
}

.cs-f1f-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    justify-content: center;
}

.cs-f1f-tag {
    background: rgba(220,38,38,0.15);
    border: 1px solid rgba(220,38,38,0.3);
    color: #fca5a5;
    padding: 4px 14px;
    border-radius: 2px;
    font-size: 0.7rem;
    font-family: 'Baloo 2', sans-serif;
    letter-spacing: 1.5px;
    font-weight: 700;
}

/* Pull quote */
.cs-pullquote {
    border-left: 4px solid #dc2626;
    padding: 16px 24px;
    margin: 28px 0;
    background: #fff9f9;
    border-radius: 0 8px 8px 0;
}

.cs-pullquote-text {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cs-dark);
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 8px;
}

.cs-pullquote-attr {
    font-size: 0.78rem;
    color: #dc2626;
    font-family: 'Baloo 2', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Comparison box */
.cs-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 20px 0 28px;
}

.cs-compare-col {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-top: 3px solid;
    border-radius: 0 0 10px 10px;
    padding: 16px 18px;
}

.cs-compare-col.col-a { border-top-color: #dc2626; }
.cs-compare-col.col-b { border-top-color: #d97706; }

.cs-compare-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.cs-compare-col.col-a .cs-compare-title { color: #dc2626; }
.cs-compare-col.col-b .cs-compare-title { color: #d97706; }

.cs-compare-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cs-compare-list li {
    font-size: 0.86rem;
    color: var(--cs-ink-mid);
    padding: 5px 0;
    border-bottom: 1px solid #f4f4f4;
    font-family: 'Hind', sans-serif;
    line-height: 1.5;
}

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

/* ============================================================
   RESPONSIVE — F1 Templates
   ============================================================ */
@media (max-width: 600px) {
    .cs-f1-body { padding: 24px 16px 48px; }
    .cs-f1a-hero-inner,
    .cs-f1p-hero-inner,
    .cs-f1t-hero-inner,
    .cs-f1f-hero-inner { padding: 30px 16px 24px; }
    .cs-podium { flex-direction: column; }
    .cs-circuit-card { grid-template-columns: 1fr; }
    .cs-team-row { grid-template-columns: 1fr 1fr; }
    .cs-team-row-note { display: none; }
    .cs-compare { grid-template-columns: 1fr; }
    .cs-risk-bar-label { min-width: 110px; font-size: 0.72rem; }
}