/* BluntAI shared component layout (ticker, header, nav, cards, hero).
   Structural rules only — no colors/fonts/per-mode surfacing. */

.ticker-bar {
    height: 36px;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.ticker-track {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100vw;
    animation: ba-ticker 80s linear infinite;
    font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.ticker-track span { margin-right: 28px; }
@keyframes ba-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.site-header {
    position: sticky;
    top: 36px;
    z-index: 50;
    backdrop-filter: blur(6px);
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 28px;
    max-width: 1600px;
    gap: 20px;
    flex-wrap: nowrap;
}

.site-logo a { font-weight: 900; font-size: 22px; letter-spacing: -0.5px; }

.primary-nav {
    display: flex;
    gap: 14px;
    flex-wrap: nowrap;
}
.primary-nav a {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 8px;
    transition: color var(--t-fast);
    white-space: nowrap;
}
.primary-nav { flex-wrap: nowrap; }

.menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
}
.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 4px 0;
    background: currentColor;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: calc(36px + 60px); /* ticker + nav header */
    left: 0; right: 0;
    z-index: 180;
    padding: 14px 16px;
    flex-direction: column;
    gap: 8px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.mobile-menu a {
    font-size: 14px;
    font-weight: 700;
    padding: 8px 6px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .primary-nav { display: none; }
    .menu-toggle { display: inline-flex; flex-direction: column; }
    .mobile-menu.open { display: flex; }
    .header-inner { padding: 14px 16px; gap: 12px; }
    .ticker-track { animation-duration: 40s; }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .header-inner { padding: 16px 24px; }
}

/* Article card grid */
.bluntai-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 40px 0;
}
@media (max-width: 1023px) { .bluntai-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .bluntai-grid { grid-template-columns: 1fr; gap: 14px; } }

.bluntai-card {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    transition: transform var(--t-fast);
}
.bluntai-card:hover { transform: translateY(-3px); }
.bluntai-card .card-img {
    aspect-ratio: 16/9;
    overflow: hidden;
}
.bluntai-card .card-img img { width: 100%; height: 100%; object-fit: cover; }
.bluntai-card .card-body { padding: 22px; }
.bluntai-card h3 {
    font-size: 22px;
    line-height: 1.18;
    letter-spacing: -0.4px;
    margin: 0 0 10px;
}
.bluntai-card p { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }

/* Hero block */
.bluntai-hero {
    position: relative;
    padding: 70px 28px 60px;
    overflow: hidden;
}
.bluntai-hero .hero-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 46px;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}
@media (max-width: 1023px) {
    .bluntai-hero { padding: 48px 24px 40px; }
    .bluntai-hero .hero-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 767px) {
    .bluntai-hero { padding: 36px 16px 32px; }
}

/* Footer */
.site-footer {
    padding: 28px 28px;
    margin-top: 80px;
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    gap: 24px;
    font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
@media (max-width: 767px) {
    .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* Social icons — nav + footer */
.social-links { display: inline-flex; gap: 6px; align-items: center; }
.social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 6px;
    color: var(--muted); text-decoration: none;
    transition: color var(--t-fast), background-color var(--t-fast);
}
.social-link:hover { background: var(--surface-hi); }
.social-link.social-x:hover { color: var(--n-fire); }
.social-link.social-ig:hover { color: var(--n-flash); }
[data-theme="light"] .social-link.social-x:hover { color: var(--nl-fire); }
[data-theme="light"] .social-link.social-ig:hover { color: var(--nl-flash); }

/* Footer social — same shape but with labels */
.footer-social { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.footer-social .social-link {
    width: auto; height: auto; padding: 8px 12px; gap: 10px;
    justify-content: flex-start; font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
    font-size: 12px; letter-spacing: 1px;
}
.footer-social .social-link span { font-weight: 500; }

/* Mobile: hide nav social when narrow, footer social still visible */
@media (max-width: 640px) {
    .header-inner .social-links { display: none; }
}


/* Footer legal links row (Privacy / Terms / Affiliate Disclosure) */
.footer-legal {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    line-height: 1.6;
}
.footer-legal a {
    font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
    font-size: 11px;
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.2s ease;
    white-space: nowrap;
}
.footer-legal a:hover { color: var(--n-fire, #ff3e3e); }
@media (max-width: 767px) {
    .footer-legal { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }
}