/* =============================================================
   The Top India — Frontend CSS
   All color/font tokens come from theme.cache.css (:root vars)
   ============================================================= */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

img, svg { display: block; max-width: 100%; }

ul { list-style: none; }

a { text-decoration: none; color: inherit; }

button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Dark Mode Token Overrides ────────────────────────────── */
html.dark {
    --color-body-bg:   #0f0f0f;
    --color-text:      #d4d4d4;
    --color-heading:   #f5f5f5;
    --color-secondary: #1e1e1e;
    --tti-nav-bg:      #141414;
    --tti-topbar-bg:   #1a1a1a;
    --tti-border:      rgba(255,255,255,0.08);
    --tti-card-bg:     #1a1a1a;
    --tti-shadow:      0 2px 12px rgba(0,0,0,0.5);
}

/* ── Light Mode Tokens ────────────────────────────────────── */
:root {
    --tti-nav-bg:      #1a1a1a;
    --tti-topbar-bg:   #fff;
    --tti-border:      rgba(0,0,0,0.08);
    --tti-card-bg:     #fff;
    --tti-shadow:      0 2px 12px rgba(0,0,0,0.08);
    --tti-radius:      6px;
    --tti-transition:  0.22s ease;
}

/* ── Layout Container ─────────────────────────────────────── */
.tti-container {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 20px;
}

/* ── Privacy / Cookie Bar ─────────────────────────────────── */
.tti-privacy-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: #1a1a1a;
    color: #ddd;
    padding: 14px 0;
    font-size: 13px;
    border-top: 2px solid var(--color-accent);
    transform: translateY(100%);
    transition: transform 0.35s ease;
}

.tti-privacy-bar.is-visible { transform: translateY(0); }

.tti-privacy-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.tti-privacy-bar a { color: var(--color-accent); text-decoration: underline; }

.tti-btn-accept {
    background: var(--color-accent);
    color: #fff;
    padding: 7px 20px;
    border-radius: var(--tti-radius);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--tti-transition);
    flex-shrink: 0;
}

.tti-btn-accept:hover { background: var(--color-accent-dark); }

/* ── Main Header ──────────────────────────────────────────── */
.tti-header {
    position: relative;
    z-index: 500;
    width: 100%;
}

/* ── Top Bar (Logo + Social + Search) ────────────────────── */
.tti-topbar {
    background: var(--tti-topbar-bg);
    border-bottom: 1px solid var(--tti-border);
    padding: 12px 0;
    transition: background var(--tti-transition);
}

.tti-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Logo */
.tti-logo a {
    display: flex;
    align-items: center;
}

.tti-logo .logo-text {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: var(--color-heading);
    letter-spacing: -0.5px;
}

.tti-logo img { width: auto; } /* height is set responsively by theme.cache.css */

.tti-logo .logo-dark { display: none; }
/* Only hide the default in dark mode if a separate dark logo exists */
html.dark .tti-logo:has(.logo-dark) .logo-default { display: none; }
html.dark .tti-logo .logo-dark { display: block; }

/* Social Icons */
.tti-social-list {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tti-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--color-text);
    background: var(--color-secondary);
    transition: background var(--tti-transition), color var(--tti-transition);
}

.tti-social-link:hover {
    background: var(--color-accent);
    color: #fff;
}

html.dark .tti-social-link { background: #2a2a2a; color: #bbb; }
html.dark .tti-social-link:hover { background: var(--color-accent); color: #fff; }

/* Topbar Right */
.tti-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Search Wrap */
.tti-search-wrap { position: relative; }

.tti-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--color-text);
    background: var(--color-secondary);
    transition: background var(--tti-transition), color var(--tti-transition);
}

.tti-search-toggle:hover,
.tti-search-toggle.is-active {
    background: var(--color-accent);
    color: #fff;
}

html.dark .tti-search-toggle { background: #2a2a2a; color: #bbb; }
html.dark .tti-search-toggle:hover { background: var(--color-accent); color: #fff; }

.tti-search-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: var(--tti-card-bg);
    border: 1px solid var(--tti-border);
    border-radius: var(--tti-radius);
    box-shadow: var(--tti-shadow);
    padding: 12px;
    z-index: 450;
}

.tti-search-dropdown form {
    display: flex;
    gap: 8px;
}

.tti-search-input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--tti-border);
    border-radius: var(--tti-radius);
    background: var(--color-body-bg);
    color: var(--color-text);
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color var(--tti-transition);
}

.tti-search-input:focus { border-color: var(--color-accent); }

.tti-search-dropdown button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--tti-radius);
    transition: background var(--tti-transition);
}

.tti-search-dropdown button[type="submit"]:hover { background: var(--color-accent-dark); }

/* ── Breaking News Ticker ─────────────────────────────────── */
.tti-breaking {
    background: var(--color-accent);
    color: #fff;
    padding: 8px 0;
    overflow: hidden;
}

.tti-breaking-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
}

.tti-breaking-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: rgba(0,0,0,0.25);
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tti-ticker-viewport {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 22px;
}

.tti-ticker-list {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    animation: tti-ticker-scroll 40s linear infinite;
    width: max-content;
}

.tti-ticker-list:hover { animation-play-state: paused; }

.tti-ticker-item a {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity var(--tti-transition);
}

.tti-ticker-item a:hover { opacity: 0.8; text-decoration: underline; }

@keyframes tti-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Main Navbar ──────────────────────────────────────────── */
.tti-navbar {
    background: var(--tti-nav-bg);
    position: sticky;
    top: 0;
    z-index: 400;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
    transition: background var(--tti-transition), box-shadow var(--tti-transition);
}

.tti-navbar.is-stuck {
    box-shadow: 0 2px 16px rgba(0,0,0,0.3);
}

.tti-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
}

/* Desktop Menu */
.tti-main-nav { display: flex; }

.tti-menu {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tti-menu-item { position: relative; }

.tti-menu-item > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    color: rgba(255,255,255,0.88);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-heading);
    border-radius: 4px;
    transition: color var(--tti-transition), background var(--tti-transition);
}

.tti-menu-item > a:hover,
.tti-menu-item.is-active > a {
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.tti-menu-item.has-submenu > a { padding-right: 10px; }

.tti-arrow {
    transition: transform var(--tti-transition);
    flex-shrink: 0;
}

.tti-menu-item.has-submenu:hover > a .tti-arrow { transform: rotate(180deg); }

/* Dropdown */
.tti-submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 200px;
    background: var(--tti-card-bg);
    border: 1px solid var(--tti-border);
    border-radius: var(--tti-radius);
    box-shadow: var(--tti-shadow);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--tti-transition), transform var(--tti-transition), visibility var(--tti-transition);
    z-index: 100;
}

.tti-menu-item.has-submenu:hover .tti-submenu,
.tti-menu-item.has-submenu:focus-within .tti-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tti-submenu li a {
    display: block;
    padding: 8px 14px;
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 500;
    border-radius: 4px;
    transition: background var(--tti-transition), color var(--tti-transition);
}

.tti-submenu li a:hover {
    background: var(--color-accent);
    color: #fff;
}

html.dark .tti-submenu {
    background: #1e1e1e;
    border-color: rgba(255,255,255,0.08);
}

/* Navbar Actions */
.tti-navbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tti-dark-toggle,
.tti-user-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.1);
    transition: background var(--tti-transition), color var(--tti-transition);
}

.tti-dark-toggle:hover,
.tti-user-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Sun/Moon icon switching */
.tti-dark-toggle .icon-moon { display: none; }
html.dark .tti-dark-toggle .icon-sun  { display: none; }
html.dark .tti-dark-toggle .icon-moon { display: block; }

/* ── Mobile Header ────────────────────────────────────────── */
.tti-mobile-header { display: none; }

.tti-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--tti-topbar-bg);
    border-bottom: 1px solid var(--tti-border);
}

.tti-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
}

.tti-burger span {
    display: block;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: all 0.25s ease;
}

.tti-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tti-burger.is-open span:nth-child(2) { opacity: 0; }
.tti-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tti-mobile-logo img { height: 36px; width: auto; }
.tti-mobile-logo .logo-text {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-heading);
}

.tti-mobile-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tti-mobile-actions .tti-search-toggle,
.tti-mobile-actions .tti-dark-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--color-text);
    background: var(--color-secondary);
}

html.dark .tti-mobile-actions .tti-search-toggle,
html.dark .tti-mobile-actions .tti-dark-toggle {
    background: #2a2a2a;
    color: #bbb;
}

/* Mobile Search Box */
.tti-mobile-search-box {
    padding: 10px 16px;
    background: var(--tti-topbar-bg);
    border-bottom: 1px solid var(--tti-border);
}

.tti-mobile-search-box form {
    display: flex;
    gap: 8px;
}

.tti-mobile-search-box input[type="search"] {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--tti-border);
    border-radius: var(--tti-radius);
    background: var(--color-body-bg);
    color: var(--color-text);
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
}

.tti-mobile-search-box input:focus { border-color: var(--color-accent); }

.tti-mobile-search-box button[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    background: var(--color-accent);
    color: #fff;
    border-radius: var(--tti-radius);
}

/* Mobile Slide-out Menu */
.tti-mobile-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100%;
    background: var(--tti-topbar-bg);
    z-index: 800;
    overflow-y: auto;
    transition: left 0.3s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
}

.tti-mobile-menu.is-open { left: 0; }

.tti-mobile-menu-inner { padding: 16px; }

.tti-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    margin-bottom: 12px;
    color: var(--color-text);
    border-radius: 50%;
    background: var(--color-secondary);
    transition: background var(--tti-transition);
}

.tti-mobile-close:hover { background: var(--color-accent); color: #fff; }

.tti-mobile-nav { display: flex; flex-direction: column; }

.tti-mobile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tti-mobile-nav li {
    border-bottom: 1px solid var(--tti-border);
}

.tti-mobile-nav li > .tti-mobile-item > a,
.tti-mobile-nav li > a {
    display: block;
    flex: 1;
    padding: 12px 4px;
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-heading);
    transition: color var(--tti-transition);
}

.tti-mobile-nav li > .tti-mobile-item > a:hover,
.tti-mobile-nav li > a:hover { color: var(--color-accent); }

.tti-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--color-text);
    border-radius: 4px;
    transition: background var(--tti-transition), transform var(--tti-transition);
}

.tti-expand-btn:hover { background: var(--color-secondary); }
.tti-expand-btn.is-open svg { transform: rotate(180deg); }

.tti-mobile-sub {
    padding: 4px 0 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tti-mobile-sub li { border: none; }

.tti-mobile-sub li a {
    display: block;
    padding: 7px 4px;
    color: var(--color-text);
    font-size: 13px;
    opacity: 0.8;
    transition: color var(--tti-transition), opacity var(--tti-transition);
}

.tti-mobile-sub li a:hover { color: var(--color-accent); opacity: 1; }

/* Overlay */
.tti-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 700;
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

/* ── Footer ───────────────────────────────────────────────── */
.tti-footer {
    background: #141414;
    color: #aaa;
    margin-top: 60px;
}

html.dark .tti-footer { background: #0a0a0a; }

.tti-footer-inner {
    padding: 56px 0 40px;
}

.tti-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
}

.tti-footer-logo {
    margin-bottom: 16px;
}

.tti-footer-logo a { display: inline-block; }
.tti-footer-logo img { height: 44px; width: auto; }

.footer-logo-text {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.tti-footer-desc {
    font-size: 13.5px;
    line-height: 1.7;
    color: #888;
    margin-bottom: 20px;
    max-width: 300px;
}

.tti-footer-social {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tti-footer .tti-social-link {
    background: rgba(255,255,255,0.08);
    color: #aaa;
}

.tti-footer .tti-social-link:hover {
    background: var(--color-accent);
    color: #fff;
}

.tti-footer-heading {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-accent);
    display: inline-block;
}

.tti-footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tti-footer-links a {
    font-size: 13.5px;
    color: #888;
    transition: color var(--tti-transition), padding-left var(--tti-transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tti-footer-links a::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity var(--tti-transition);
}

.tti-footer-links a:hover {
    color: #fff;
    padding-left: 4px;
}

.tti-footer-links a:hover::before { opacity: 1; }

/* Copyright Bar */
.tti-copyright {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 18px 0;
}

.tti-copyright-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.tti-copyright-text {
    font-size: 13px;
    color: #666;
}

.tti-copyright-text a {
    color: #888;
    transition: color var(--tti-transition);
}

.tti-copyright-text a:hover { color: var(--color-accent); }

.tti-copyright-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.tti-copyright-nav a {
    font-size: 12.5px;
    color: #666;
    transition: color var(--tti-transition);
}

.tti-copyright-nav a:hover { color: #bbb; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .tti-topbar  { display: none; }
    .tti-breaking { display: none; }
    .tti-navbar  { display: none; }
    .tti-mobile-header { display: block; }

    .tti-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .tti-footer-about-col { grid-column: 1 / -1; }
    .tti-footer-desc { max-width: 100%; }
}

@media (max-width: 600px) {
    .tti-footer-grid { grid-template-columns: 1fr; }
    .tti-footer-about-col { grid-column: auto; }
    .tti-copyright-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .tti-footer-inner { padding: 40px 0 28px; }
}

/* =============================================================
   Homepage Styles
   ============================================================= */

/* Shared tokens & utility */
.tti-home { background: var(--color-body-bg, #fff); }
.tti-section { padding: 56px 0; }
.tti-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    border-bottom: 3px solid var(--color-accent, #e63946);
    padding-bottom: 14px;
}
.tti-section-heading {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-heading, #111);
    line-height: 1;
}
.tti-section-heading a { color: inherit; }
.tti-section-heading a:hover { color: var(--color-accent, #e63946); }
.tti-section-heading.is-light { color: #fff; }
.tti-section-more {
    font-size: .78rem;
    font-weight: 600;
    color: var(--color-accent, #e63946);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tti-section-more.is-light { color: rgba(255,255,255,.8); }
.tti-section-more:hover { opacity: .75; }

/* Category badge */
.tti-card-cat {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-accent, #e63946);
    background: rgba(230,57,70,.1);
    padding: 3px 8px;
    border-radius: 2px;
    margin-bottom: 6px;
    line-height: 1.4;
}
.tti-card-cat.is-on-image { background: var(--color-accent, #e63946); color: #fff; }
.tti-card-cat:hover { opacity: .85; }
.tti-card-time { font-size: .72rem; color: var(--color-muted, #888); }
.tti-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: .75rem;
    color: var(--color-muted, #888);
}
.tti-card-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-secondary, #f3f3f3);
    color: var(--color-heading, #111);
    font-size: 2rem;
    font-weight: 700;
    width: 100%;
    height: 100%;
    min-height: 80px;
}

/* Hero gradient overlay */
.tti-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.2) 75%, transparent 100%);
    pointer-events: none;
}

/* TIER 1: Hero Grid */
.tti-hero-grid { padding: 28px 0 0; }
.tti-hero-cols {
    display: grid;
    grid-template-columns: 260px 1fr 260px;
    gap: 24px;
    align-items: stretch;
}
.tti-hero-left, .tti-hero-right {
    padding: 0;
    display: flex;
    flex-direction: column;
}
.tti-hero-left .tti-section-heading,
.tti-hero-right .tti-section-heading { font-size: .9rem; }
.tti-hot-list { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.tti-hot-item { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 18px; }
.tti-hot-item:last-child { padding-bottom: 0; }
.tti-hot-thumb {
    flex: 0 0 90px; width: 90px; height: 70px;
    overflow: hidden; border-radius: 0; display: block;
}
.tti-hot-thumb img, .tti-thumb-sq { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tti-hot-thumb:hover img { transform: scale(1.05); }
.tti-hot-body { flex: 1; min-width: 0; }
.tti-hot-title {
    font-size: .85rem; font-weight: 700; line-height: 1.4; margin: 4px 0 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tti-hot-title a:hover { color: var(--color-accent, #e63946); }
.tti-hot-body .tti-card-cat { margin-bottom: 4px; }
.tti-list-stack { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.tti-list-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding-bottom: 18px;
}
.tti-list-item:last-child { padding-bottom: 0; }
.tti-list-thumb {
    flex: 0 0 80px; width: 80px; height: 64px;
    overflow: hidden; border-radius: 0; display: block;
}
.tti-list-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tti-list-thumb:hover img { transform: scale(1.05); }
.tti-list-body { flex: 1; min-width: 0; }
.tti-list-title {
    font-size: .82rem; font-weight: 700; line-height: 1.4; margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tti-list-title a:hover { color: var(--color-accent, #e63946); }
.tti-list-body .tti-card-cat { margin-bottom: 4px; }
.tti-hero-center { display: flex; flex-direction: column; }
.tti-hero-main { position: relative; overflow: hidden; margin-bottom: 14px; flex: 1; display: flex; flex-direction: column; }
.tti-hero-img {
    position: relative; display: block; width: 100%;
    aspect-ratio: 16/10; overflow: hidden; border-radius: 0;
}
.tti-hero-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.tti-hero-img:hover img { transform: scale(1.04); }
.tti-hero-body {
    padding: 20px 0 0;
    position: relative;
    z-index: 2;
}
.tti-hero-title {
    font-size: 1.4rem; font-weight: 800; line-height: 1.3;
    margin: 6px 0 10px; color: var(--color-heading, #111);
}
.tti-hero-title a:hover { color: var(--color-accent, #e63946); }
.tti-hero-excerpt {
    font-size: .85rem; color: var(--color-muted, #666); line-height: 1.55; margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tti-hero-sub { position: relative; overflow: hidden; flex: 1; display: flex; flex-direction: column; }
.tti-hero-sub-img {
    position: relative; display: block; width: 100%;
    aspect-ratio: 16/9; overflow: hidden; border-radius: 0;
}
.tti-hero-sub-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.tti-hero-sub-img:hover img { transform: scale(1.04); }
.tti-hero-sub-title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin: 10px 0 6px; }
.tti-hero-sub-title a:hover { color: var(--color-accent, #e63946); }
.tti-empty { color: var(--color-muted, #888); font-style: italic; font-size: .85rem; }

/* TIER 2: Ad Banner */
.tti-ad-banner {
    padding: 18px 0; text-align: center;
    border-top: 1px solid var(--tti-border, rgba(0,0,0,.07));
    border-bottom: 1px solid var(--tti-border, rgba(0,0,0,.07));
}
.tti-ad-label {
    display: block; font-size: .65rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--color-muted, #aaa); margin-bottom: 6px;
}
.tti-ad-placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-secondary, #f3f3f3); border: 1px dashed #ccc;
    color: #aaa; font-size: .8rem; width: 100%; max-width: 728px;
    height: 90px; border-radius: 4px;
}
.tti-ad-placeholder.is-square { max-width: 300px; height: 250px; }

/* TIER 3: Category Feature */
.tti-cat-section { background: var(--color-secondary, #f8f8f8); }
.tti-cat-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.tti-overlay-card {
    position: relative; border-radius: 0; overflow: hidden;
    background: var(--tti-card-bg, #fff); box-shadow: var(--tti-shadow, 0 2px 12px rgba(0,0,0,.08));
}
.tti-overlay-img { position: relative; display: block; aspect-ratio: 16/11; overflow: hidden; }
.tti-overlay-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.tti-overlay-img:hover img { transform: scale(1.04); }
.tti-overlay-body { padding: 16px; }
.tti-overlay-title { font-size: .95rem; font-weight: 700; line-height: 1.4; margin: 6px 0 8px; }
.tti-overlay-title a:hover { color: var(--color-accent, #e63946); }
.tti-overlay-excerpt {
    font-size: .80rem; color: var(--color-muted, #666); line-height: 1.5; margin-bottom: 8px;
}
.tti-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tti-card {
    background: var(--tti-card-bg, #fff); border-radius: 0; overflow: hidden;
    box-shadow: var(--tti-shadow, 0 2px 8px rgba(0,0,0,.06));
}
.tti-card-img { display: block; aspect-ratio: 3/2; overflow: hidden; }
.tti-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.tti-card-img:hover img { transform: scale(1.05); }
.tti-card-title {
    font-size: .86rem; font-weight: 700; line-height: 1.4; margin: 8px 12px 6px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tti-card-title a:hover { color: var(--color-accent, #e63946); }
.tti-card-excerpt { font-size: .76rem; color: var(--color-muted, #666); margin: 0 12px 8px; line-height: 1.5; }
.tti-card .tti-card-time { margin: 8px 12px 0; display: block; }
.tti-card .tti-card-time { margin-bottom: 12px; }

/* TIER 4: Econ Split */
.tti-econ-section { background: var(--color-body-bg, #fff); }
.tti-econ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

/* Left dark container — 2 cards side by side */
.tti-econ-left {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    background: #111; overflow: hidden;
}
.tti-econ-card { background: #111; overflow: hidden; }
.tti-econ-card-img {
    display: block; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 0;
}
.tti-econ-card-img img {
    width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease;
}
.tti-econ-card:hover .tti-econ-card-img img { transform: scale(1.04); }
.tti-econ-card-body { padding: 12px 14px 14px; background: #111; }
.tti-econ-card-title {
    font-size: .86rem; font-weight: 700; line-height: 1.4; margin: 5px 0 10px; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tti-econ-card-title a { color: inherit; }
.tti-econ-card-title a:hover { color: var(--color-accent, #e63946); }
.tti-econ-card-foot { display: flex; align-items: center; justify-content: space-between; }
.tti-econ-card-body .tti-card-time {
    display: inline-flex; align-items: center; gap: 4px;
    color: rgba(255,255,255,.5); font-size: .7rem;
}
.tti-econ-dots {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
    gap: 6px; padding: 10px 0; background: #111;
}
.tti-econ-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,.3); display: inline-block;
}
.tti-econ-dot.is-active { background: #fff; }

/* Right feature card */
.tti-econ-right {
    border-radius: 0; overflow: hidden; background: var(--tti-card-bg, #fff);
    border: 1px solid rgba(0,0,0,.07);
}
.tti-econ-right-img { display: block; aspect-ratio: 3/2; overflow: hidden; }
.tti-econ-right-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.tti-econ-right-img:hover img { transform: scale(1.04); }
.tti-econ-right-body { padding: 20px; }
.tti-econ-right-title {
    font-size: 1.35rem; font-weight: 800; line-height: 1.3; margin: 12px 0 14px; color: #111;
}
.tti-econ-right-title a { color: inherit; }
.tti-econ-right-title a:hover { color: var(--color-accent, #e63946); }
.tti-econ-right-body p { font-size: .83rem; color: #666; line-height: 1.6; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* TIER 5: Discover */
.tti-discover { background: var(--color-secondary, #f5f5f5); }
.tti-discover-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tti-discover-card {
    position: relative; display: flex; align-items: flex-end; border-radius: 0;
    overflow: hidden; aspect-ratio: 5/3; text-decoration: none;
    box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.tti-discover-card:hover .tti-discover-bg { transform: scale(1.06); }
.tti-discover-bg { position: absolute; inset: 0; transition: transform .5s ease; }
.tti-discover-content {
    position: relative; z-index: 2; padding: 16px; display: flex;
    flex-direction: column; gap: 3px; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 100%);
}
.tti-discover-name { font-size: .98rem; font-weight: 800; color: #fff; line-height: 1.25; }
.tti-discover-count { font-size: .74rem; color: rgba(255,255,255,.8); font-weight: 500; }

/* TIER 6: Watch */
.tti-watch { background: #0d0d0d; padding: 56px 0; }
.tti-watch .tti-section-head { border-bottom-color: var(--color-accent, #e63946); }
.tti-watch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.tti-watch-main, .tti-watch-side { position: relative; border-radius: 0; overflow: hidden; }
.tti-watch-img { position: relative; display: block; overflow: hidden; border-radius: 0; }
.tti-watch-main .tti-watch-img { aspect-ratio: 16/10; }
.tti-watch-side .tti-watch-img { aspect-ratio: 4/3; }
.tti-watch-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.tti-watch-img:hover img { transform: scale(1.04); }
.tti-play-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); pointer-events: none; z-index: 2;
    opacity: .9; transition: opacity .2s, transform .2s;
}
.tti-watch-img:hover .tti-play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
.tti-watch-body { padding: 12px 4px 0; }
.tti-watch-title { font-size: .98rem; font-weight: 700; line-height: 1.4; color: #eee; margin: 8px 0; }
.tti-watch-title a { color: #eee; }
.tti-watch-title a:hover { color: var(--color-accent, #e63946); }
.tti-watch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 4px; }
.tti-watch-mini { border-radius: 0; overflow: hidden; }
.tti-watch-mini-img {
    position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 0;
}
.tti-watch-mini-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tti-watch-mini-img:hover img { transform: scale(1.05); }
.tti-watch-mini-body { padding: 10px 4px 0; }
.tti-watch-mini-body h4 {
    font-size: .82rem; font-weight: 700; color: #ddd; line-height: 1.35; margin-top: 5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tti-watch-mini-body h4 a { color: #ddd; }
.tti-watch-mini-body h4 a:hover { color: var(--color-accent, #e63946); }

/* TIER 7: More Stories + Sidebar */
.tti-more-section { background: var(--color-body-bg, #fff); }
.tti-more-grid { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.tti-more-list { display: flex; flex-direction: column; }
.tti-more-item {
    display: flex; gap: 18px; padding: 22px 0;
    border-bottom: 1px solid var(--tti-border, rgba(0,0,0,.06));
}
.tti-more-item:first-child { padding-top: 0; }
.tti-more-item:last-child { border-bottom: none; }
.tti-more-thumb { flex: 0 0 160px; height: 100px; display: block; overflow: hidden; border-radius: 0; }
.tti-more-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tti-more-thumb:hover img { transform: scale(1.05); }
.tti-more-body { flex: 1; min-width: 0; }
.tti-more-title { font-size: .96rem; font-weight: 700; line-height: 1.4; margin: 6px 0 8px; }
.tti-more-title a:hover { color: var(--color-accent, #e63946); }
.tti-more-body p {
    font-size: .82rem; color: var(--color-muted, #666); line-height: 1.55; margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Sidebar */
.tti-more-sidebar { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 80px; }
.tti-sb-block {
    background: var(--tti-card-bg, #f8f8f8); border-radius: 8px; padding: 20px;
    border: 1px solid var(--tti-border, rgba(0,0,0,.06));
}
.tti-sb-head { margin-bottom: 14px; }
.tti-sb-head h3 {
    font-size: .92rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .05em; color: var(--color-heading, #111);
}
.tti-sb-head span { font-size: .75rem; color: var(--color-muted, #888); margin-top: 2px; display: block; }
.tti-follow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tti-follow-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; border-radius: 6px; padding: 14px 10px; color: #fff;
    font-size: .78rem; font-weight: 700; text-align: center; text-decoration: none;
    transition: opacity .2s;
}
.tti-follow-card:hover { opacity: .88; }
.tti-follow-card em { font-style: normal; font-size: .68rem; opacity: .85; font-weight: 400; }
.tti-follow-card.is-fb { background: #1877f2; }
.tti-follow-card.is-tw { background: #000; }
.tti-follow-card.is-yt { background: #ff0000; }
.tti-follow-card.is-tg { background: #0088cc; }

/* Newsletter sidebar */
.tti-sb-newsletter h3 {
    font-size: .95rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: var(--color-heading, #111); margin-bottom: 6px;
}
.tti-sb-newsletter p { font-size: .8rem; color: var(--color-muted, #666); margin-bottom: 14px; line-height: 1.5; }
.tti-sb-newsletter form { display: flex; flex-direction: column; gap: 10px; }
.tti-sb-newsletter input[type=email] {
    width: 100%; padding: 10px 14px; border: 1px solid var(--tti-border, #ddd);
    border-radius: 5px; font-size: .85rem; background: var(--color-body-bg, #fff); color: var(--color-text, #111);
}
.tti-sb-newsletter input[type=email]:focus { outline: 2px solid var(--color-accent, #e63946); border-color: transparent; }
.tti-sb-newsletter button[type=submit] {
    width: 100%; padding: 11px; background: var(--color-accent, #e63946); color: #fff;
    font-size: .85rem; font-weight: 700; border-radius: 5px; letter-spacing: .03em; transition: background .2s;
}
.tti-sb-newsletter button[type=submit]:hover { background: #c62a35; }
.tti-nl-consent {
    display: flex; align-items: flex-start; gap: 8px; font-size: .75rem;
    color: var(--color-muted, #666); line-height: 1.4; cursor: pointer;
}
.tti-nl-consent input { margin-top: 2px; flex-shrink: 0; }

/* Dark Mode: Homepage */
html.dark .tti-cat-section { background: var(--color-secondary, #1a1a1a); }
html.dark .tti-discover { background: #111; }
html.dark .tti-watch { background: #0a0a0a; }
html.dark .tti-card-cat:not(.is-on-image) { background: rgba(230,57,70,.15); }
html.dark .tti-sb-block { background: var(--color-secondary, #1e1e1e); }
html.dark .tti-sb-newsletter input[type=email] { background: #111; border-color: rgba(255,255,255,.1); color: #ddd; }

/* Responsive: Homepage */
@media (max-width: 1200px) {
    .tti-hero-cols { grid-template-columns: 220px 1fr 220px; }
    .tti-cat-grid  { grid-template-columns: repeat(2, 1fr); }
    .tti-discover-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .tti-hero-cols { grid-template-columns: 1fr; }
    .tti-hero-left, .tti-hero-right { display: none; }
    .tti-hero-title { font-size: 1.25rem; }
    .tti-more-grid { grid-template-columns: 1fr; }
    .tti-more-sidebar { position: static; }
    .tti-econ-grid { grid-template-columns: 1fr; }
    .tti-econ-right { max-width: 640px; }
    .tti-watch-grid { grid-template-columns: 1fr; }
    .tti-watch-side { display: none; }
}
@media (max-width: 768px) {
    .tti-section { padding: 40px 0; }
    .tti-cat-feature-row { grid-template-columns: 1fr; }
    .tti-cat-grid  { grid-template-columns: 1fr 1fr; }
    .tti-econ-grid { gap: 20px; }
    .tti-more-thumb { flex: 0 0 130px; height: 90px; }
    .tti-more-title { font-size: .92rem; }
    .tti-watch-row { grid-template-columns: 1fr 1fr; }
    .tti-watch-row .tti-watch-mini:last-child { display: block; }
    .tti-follow-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .tti-hero-title { font-size: 1.05rem; }
    .tti-cat-grid  { grid-template-columns: 1fr; }
    .tti-discover-grid { grid-template-columns: 1fr 1fr; }
    .tti-watch-row { grid-template-columns: 1fr; }
    .tti-more-item { flex-direction: column; }
    .tti-more-thumb { flex: none; width: 100%; height: 180px; }
    .tti-section-head { flex-wrap: wrap; gap: 8px; }
}

/* =============================================================
   CATEGORY ARCHIVE PAGE
   ============================================================= */
.tti-cat-page { background: #fff; }

/* ── Header ─────────────────────────────────────────────────── */
.tti-cat-header {
    padding: 30px 0 36px;
    border-bottom: 1px solid rgba(0,0,0,.07);
    background: var(--color-body-bg, #fff);
}
.tti-cat-header-inner {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: center;
}
.tti-breadcrumb {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.tti-breadcrumb a { color: #555; }
.tti-breadcrumb a:hover { color: var(--color-accent, #e63946); }
.tti-bc-sep { color: #ccc; }
.tti-bc-current { color: var(--color-accent, #e63946); font-weight: 600; }
.tti-cat-title {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 12px;
    color: var(--color-heading, #111);
}
.tti-cat-desc {
    font-size: .95rem;
    color: #666;
    line-height: 1.6;
    max-width: 650px;
    margin: 0;
}
.tti-cat-header-img {
    border: 1px solid var(--color-accent, #e63329);
    border-radius: 0;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.tti-cat-header-img img {
    width: 100%; height: auto; display: block;
}

/* ── Section heading bar ────────────────────────────────────── */
.tti-cat-section { padding: 40px 0; }
.tti-cat-head {
    border-bottom: 2px solid var(--color-accent, #f7a823);
    padding-bottom: 10px;
    margin-bottom: 24px;
}
.tti-cat-head h2 {
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    color: var(--color-heading, #111);
}

/* ── Top News overlay cards ─────────────────────────────────── */
.tti-cat-top-row1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.tti-cat-top-row2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.tti-cat-overlay {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background: #111;
}
.tti-cat-overlay-big { aspect-ratio: 16/11; }
.tti-cat-overlay-med { aspect-ratio: 4/3; }
.tti-cat-overlay-img {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    z-index: 0;
}
.tti-cat-overlay-img img,
.tti-cat-overlay-img .tti-card-noimg {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease;
}
.tti-cat-overlay:hover .tti-cat-overlay-img img { transform: scale(1.06); }
.tti-cat-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,.92) 0%,
        rgba(0,0,0,.55) 40%,
        rgba(0,0,0,.1) 75%,
        transparent 100%);
    z-index: 1;
    pointer-events: none;
}
.tti-cat-overlay-body {
    position: relative;
    z-index: 2;
    padding: 22px;
    color: #fff;
    width: 100%;
}
.tti-cat-overlay-big .tti-cat-overlay-title {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 10px;
    color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tti-cat-overlay-med .tti-cat-overlay-title {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 8px;
    color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tti-cat-overlay-title a { color: inherit; }
.tti-cat-overlay-title a:hover { color: rgba(255,255,255,.85); }
.tti-cat-overlay-excerpt {
    font-size: .82rem;
    color: rgba(255,255,255,.82);
    line-height: 1.5;
    margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tti-cat-overlay-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: .73rem;
    color: rgba(255,255,255,.78);
}
.tti-cat-overlay-meta strong { color: #fff; font-weight: 700; }
.tti-cat-overlay-meta .tti-mag-sep { color: rgba(255,255,255,.4); }
.tti-cat-overlay-meta .tti-mag-time { display: inline-flex; align-items: center; gap: 4px; }
.tti-cat-overlay-meta .tti-mag-time svg { color: rgba(255,255,255,.7); }
.tti-cat-overlay-meta .tti-mag-bookmark { margin-left: auto; color: rgba(255,255,255,.7); }

/* ── Trending strip ─────────────────────────────────────────── */
.tti-cat-trending { padding-top: 0; }
.tti-cat-head-alt { border-bottom-color: var(--color-accent, #e63946); }
.tti-cat-trend-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.tti-cat-trend-card { display: flex; flex-direction: column; }
.tti-cat-trend-img {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.tti-cat-trend-img img,
.tti-cat-trend-img .tti-card-noimg {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.tti-cat-trend-img:hover img { transform: scale(1.05); }
.tti-cat-trend-body {
    padding-top: 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.tti-cat-trend-title {
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--color-heading, #111);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tti-cat-trend-title a { color: inherit; }
.tti-cat-trend-title a:hover { color: var(--color-accent, #e63946); }
.tti-cat-trend-body .tti-mag-time {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .75rem; color: #888;
}
.tti-cat-trend-body .tti-mag-time svg { color: var(--color-accent, #e63946); }

/* ── Main 2-column layout (list + sidebar) ──────────────────── */
.tti-cat-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: start;
}
.tti-cat-list-col { min-width: 0; }
.tti-cat-empty { color: #888; padding: 20px 0; }

/* List items: text left, image right */
.tti-cat-list-item {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 24px;
    padding-bottom: 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    align-items: center;
}
.tti-cat-list-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.tti-cat-list-body {
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0;
}
.tti-cat-list-title {
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 4px 0 4px;
    color: var(--color-heading, #111);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tti-cat-list-title a { color: inherit; }
.tti-cat-list-title a:hover { color: var(--color-accent, #e63946); }
.tti-cat-list-excerpt {
    font-size: .88rem; color: #666; line-height: 1.55; margin: 0 0 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tti-cat-list-img {
    display: block;
    aspect-ratio: 16/11;
    overflow: hidden;
}
.tti-cat-list-img img,
.tti-cat-list-img .tti-card-noimg {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.tti-cat-list-img:hover img { transform: scale(1.04); }

/* ── Pagination ─────────────────────────────────────────────── */
.tti-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.tti-page, .tti-page-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--color-heading, #111);
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    text-decoration: none;
    transition: all .15s;
}
.tti-page:hover, .tti-page-arrow:hover {
    background: var(--color-accent, #e63946);
    color: #fff;
    border-color: var(--color-accent, #e63946);
}
.tti-page.is-current {
    background: var(--color-accent, #e63946);
    color: #fff;
    border-color: var(--color-accent, #e63946);
    cursor: default;
}

.tti-page-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 0 4px;
    color: #888;
    user-select: none;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.tti-cat-sidebar {
    display: flex;
    flex-direction: column;
    gap: 36px;
    position: sticky;
    top: 80px;
}
.tti-sb-head {
    text-align: center;
    margin-bottom: 18px;
}
.tti-sb-head h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--color-heading, #111);
}
.tti-sb-head span {
    font-size: 12px;
    color: #999;
    letter-spacing: .5px;
}

/* Follow Us */
.tti-sb-follow-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.tti-sb-follow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    text-align: center;
    padding: 12px 4px;
    transition: transform .2s;
}
.tti-sb-follow:hover { transform: translateY(-3px); }
.tti-sb-follow-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.tti-sb-follow.is-fb .tti-sb-follow-icon { background: #1877f2; }
.tti-sb-follow.is-tw .tti-sb-follow-icon { background: #000; }
.tti-sb-follow.is-yt .tti-sb-follow-icon { background: #ff0000; }
.tti-sb-follow.is-tg .tti-sb-follow-icon { background: #29b6f6; }
.tti-sb-follow-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-heading, #111);
}
.tti-sb-follow-sub {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Newsletter */
.tti-sb-newsletter {
    border: 1px solid rgba(0,0,0,.1);
    padding: 26px 22px;
    text-align: center;
}
.tti-sb-newsletter h3 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--color-heading, #111);
}
.tti-sb-newsletter p {
    font-size: .85rem;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.5;
}
.tti-sb-newsletter input[type=email] {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(0,0,0,.15);
    background: #fff;
    margin-bottom: 12px;
    font-size: .88rem;
    box-sizing: border-box;
}
.tti-sb-newsletter input[type=email]:focus {
    outline: none;
    border-color: var(--color-accent, #e63946);
}
.tti-sb-newsletter button {
    width: 100%;
    background: #f7a823;
    color: #fff;
    border: none;
    padding: 11px;
    font-weight: 700;
    cursor: pointer;
    font-size: .9rem;
    transition: background .2s;
    text-transform: capitalize;
}
.tti-sb-newsletter button:hover { background: #e0951a; }
.tti-sb-nl-consent {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: #888;
    margin-top: 12px;
    text-align: left;
    line-height: 1.4;
}
.tti-sb-nl-consent input { margin-top: 2px; }

/* Popular News */
.tti-sb-popular-feat { margin-bottom: 18px; }
.tti-sb-popular-feat-img {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
    margin-bottom: 12px;
}
.tti-sb-popular-feat-img img,
.tti-sb-popular-feat-img .tti-card-noimg {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.tti-sb-popular-feat-img:hover img { transform: scale(1.05); }
.tti-sb-popular-feat-title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 8px 0;
    color: var(--color-heading, #111);
}
.tti-sb-popular-feat-title a { color: inherit; }
.tti-sb-popular-feat-title a:hover { color: var(--color-accent, #e63946); }
.tti-sb-popular-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tti-sb-popular-item {
    font-size: .88rem;
    line-height: 1.4;
    padding-left: 20px;
    position: relative;
    color: var(--color-heading, #111);
}
.tti-sb-popular-item::before {
    content: '+';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent, #e63946);
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.2;
}
.tti-sb-popular-item a {
    color: inherit;
    font-weight: 600;
}
.tti-sb-popular-item a:hover { color: var(--color-accent, #e63946); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .tti-cat-header-inner { grid-template-columns: 1fr; }
    .tti-cat-header-img {
    border: 1px solid var(--color-accent, #e63329);
    border-radius: 0; max-width: 400px; }
    .tti-cat-layout { grid-template-columns: 1fr; }
    .tti-cat-sidebar { position: static; }
    .tti-cat-trend-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .tti-cat-title { font-size: 1.8rem; }
    .tti-cat-top-row1 { grid-template-columns: 1fr; }
    .tti-cat-top-row2 { grid-template-columns: 1fr; }
    .tti-cat-overlay-big { aspect-ratio: 4/3; }
    .tti-cat-overlay-big .tti-cat-overlay-title { font-size: 1.2rem; }
    .tti-cat-list-item { grid-template-columns: 1fr; }
    .tti-cat-list-img { order: -1; aspect-ratio: 16/10; }
    .tti-cat-trend-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   ARTICLE SINGLE PAGE
   ============================================================= */
.tti-article-page {
    background: var(--color-body-bg, #fff);
    color: var(--color-heading, #111);
}

/* ── Header ─────────────────────────────────────────────────── */
.tti-art-header { padding: 28px 0 24px; }
.tti-art-title {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.22;
    margin: 12px 0 14px;
    color: var(--color-heading, #111);
}
.tti-art-intro {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.55;
    margin: 0 0 20px;
}
.tti-art-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}
.tti-art-avatar {
    flex: 0 0 44px;
    width: 44px; height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    background: #eee;
}
.tti-art-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tti-art-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--color-accent, #e63946);
    background: rgba(230,57,70,.1);
    text-transform: uppercase;
}
.tti-art-byline-name { font-size: .9rem; color: #555; }
.tti-art-byline-name a { color: inherit; }
.tti-art-byline-name strong { color: var(--color-heading, #111); font-weight: 700; }
.tti-art-byline-name a:hover strong { color: var(--color-accent, #e63946); }
.tti-art-byline-meta {
    font-size: .78rem;
    color: #888;
    display: flex; align-items: center; gap: 8px;
    margin-top: 2px;
    flex-wrap: wrap;
}

/* ── Featured Image (inside main column) ────────────────────── */
.tti-art-featured-img {
    aspect-ratio: 16/9;
    overflow: hidden;
    margin-bottom: 28px;
}
.tti-art-featured-img img {
    width: 100%; height: 100%; object-fit: cover;
}

/* ── Main 3-col Layout ──────────────────────────────────────── */
.tti-art-body { padding: 8px 0 56px; }
.tti-art-layout {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 320px;
    gap: 24px 40px;
    align-items: start;
}

/* ── Vertical share rail (sticky) ───────────────────────────── */
.tti-share-rail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 80px;
}
.tti-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: none;
    background: #f5f5f5;
    color: #555;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    padding: 0;
}
.tti-share-btn:hover { background: var(--color-accent, #e63946); color: #fff; }
.tti-share-btn.is-fb:hover { background: #1877f2; color: #fff; }
.tti-share-btn.is-tw:hover { background: #000; color: #fff; }
.tti-share-btn.is-li:hover { background: #0a66c2; color: #fff; }
.tti-share-btn.is-wa:hover { background: #25d366; color: #fff; }
.tti-share-btn.is-tg:hover { background: #29b6f6; color: #fff; }
.tti-share-btn.is-pi:hover { background: #e60023; color: #fff; }
.tti-share-btn.is-copy.is-copied { background: #2ea44f; color: #fff; }

/* ── Article content ────────────────────────────────────────── */
.tti-art-main { min-width: 0; }
.tti-art-content {
    font-size: 1.02rem;
    line-height: 1.85;
    color: #2a2a2a;
}
.tti-art-content > *:first-child { margin-top: 0; }
.tti-art-content p { margin: 0 0 18px; }
.tti-art-content > p:first-of-type::first-letter {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    float: left;
    padding: 6px 12px 0 0;
    color: var(--color-accent, #e63946);
    font-family: var(--font-heading, inherit);
}
.tti-art-content h2 {
    font-size: 1.55rem;
    font-weight: 800;
    margin: 30px 0 14px;
    color: var(--color-heading, #111);
    line-height: 1.25;
    scroll-margin-top: 80px;
}
.tti-art-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 28px 0 12px;
    line-height: 1.3;
    scroll-margin-top: 80px;
}
.tti-art-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 22px 0 10px;
    line-height: 1.3;
    scroll-margin-top: 80px;
}
.tti-art-content a {
    color: var(--color-accent, #e63946);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tti-art-content a:hover { text-decoration-thickness: 2px; }
.tti-art-content ul,
.tti-art-content ol {
    margin: 0 0 18px;
    padding-left: 26px;
}
.tti-art-content li { margin-bottom: 6px; }
.tti-art-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 22px auto;
}
.tti-art-content blockquote {
    margin: 24px 0;
    padding: 14px 22px;
    border-left: 4px solid var(--color-accent, #e63946);
    background: #fafafa;
    font-style: italic;
    font-size: 1.1rem;
    color: #444;
    line-height: 1.6;
}
.tti-art-content blockquote p:last-child { margin-bottom: 0; }
.tti-art-content pre {
    background: #1e1e1e;
    color: #f5f5f5;
    padding: 16px 18px;
    overflow-x: auto;
    font-size: .88rem;
    line-height: 1.5;
    margin: 22px 0;
}
.tti-art-content code {
    background: #f5f5f5;
    padding: 2px 6px;
    font-size: .92em;
    font-family: monospace;
}
.tti-art-content pre code {
    background: none;
    padding: 0;
}
.tti-art-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: .92rem;
}
.tti-art-content th, .tti-art-content td {
    border: 1px solid rgba(0,0,0,.1);
    padding: 10px 12px;
    text-align: left;
}
.tti-art-content th { background: #fafafa; font-weight: 700; }

/* ── Table of Contents (injected by JS) ─────────────────────── */
.tti-toc {
    margin: 28px 0;
    border: 1px solid rgba(0,0,0,.12);
    background: #fafafa;
}
.tti-toc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-weight: 800;
    text-transform: uppercase;
    font-size: .85rem;
    letter-spacing: .5px;
}
.tti-toc-head span { color: var(--color-heading, #111); }
.tti-toc-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #888;
    padding: 4px;
    display: inline-flex;
    transition: transform .2s;
}
.tti-toc-toggle:hover { color: var(--color-accent, #e63946); }
.tti-toc-toggle.is-collapsed { transform: rotate(-90deg); }
.tti-toc-list {
    margin: 0;
    padding: 14px 22px 18px 38px;
    list-style: decimal;
    color: #555;
    font-size: .95rem;
}
.tti-toc-list.is-hidden { display: none; }
.tti-toc-list li { margin-bottom: 6px; line-height: 1.45; }
.tti-toc-list li.is-h3 { margin-left: 14px; font-size: .9rem; }
.tti-toc-list a {
    color: #444;
    text-decoration: none;
    transition: color .15s;
}
.tti-toc-list a:hover { color: var(--color-accent, #e63946); text-decoration: underline; }

/* ── Tags ───────────────────────────────────────────────────── */
.tti-art-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0 24px;
}
.tti-art-tag {
    display: inline-block;
    padding: 5px 12px;
    background: #f3f3f3;
    color: #555;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
}
.tti-art-tag:hover { background: var(--color-accent, #e63946); color: #fff; }
.tti-art-tag::before { content: '#'; opacity: .6; margin-right: 2px; }

/* ── Bottom share row ───────────────────────────────────────── */
.tti-art-share-bottom {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.tti-art-share-label {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
}
.tti-art-share-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}
.tti-art-share-buttons .tti-share-btn {
    width: auto;
    height: 36px;
    padding: 0 14px;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
}

/* ── Author Bio ─────────────────────────────────────────────── */
.tti-author-bio {
    display: flex;
    gap: 18px;
    padding: 22px;
    background: #fafafa;
    margin: 24px 0;
    align-items: flex-start;
}
.tti-author-bio-avatar {
    flex: 0 0 70px;
    width: 70px; height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
    display: block;
}
.tti-author-bio-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tti-author-bio-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-heading, #111);
    display: inline-block;
    margin-bottom: 6px;
    text-decoration: none;
}
.tti-author-bio-name:hover { color: var(--color-accent, #e63946); }
.tti-author-bio-text {
    font-size: .88rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* ── Related banner ─────────────────────────────────────────── */
.tti-related-banner {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(0,0,0,.1);
    background: #fff;
    margin: 22px 0;
    text-decoration: none;
    transition: border-color .2s, background .2s;
}
.tti-related-banner:hover {
    border-color: var(--color-accent, #e63946);
    background: rgba(230,57,70,.04);
}
.tti-related-banner-img {
    flex: 0 0 120px;
    aspect-ratio: 4/3;
    overflow: hidden;
    display: block;
}
.tti-related-banner-img img {
    width: 100%; height: 100%; object-fit: cover;
}
.tti-related-banner-body { flex: 1; min-width: 0; }
.tti-related-banner-label {
    display: block;
    font-size: .72rem;
    color: var(--color-accent, #e63946);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.tti-related-banner-title {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-heading, #111);
    line-height: 1.35;
}

/* ── Comments ───────────────────────────────────────────────── */
.tti-comments { margin-top: 36px; }
.tti-comments-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 20px;
    color: var(--color-heading, #111);
}
.tti-comments-head svg { color: var(--color-accent, #e63946); }

.tti-comments-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.tti-comment-item {
    padding: 16px 18px;
    background: #fafafa;
    border-left: 3px solid var(--color-accent, #e63946);
}
.tti-comment-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.tti-comment-head strong { font-size: .92rem; color: var(--color-heading, #111); }
.tti-comment-time { font-size: .72rem; color: #888; }
.tti-comment-body {
    font-size: .9rem;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

.tti-comment-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tti-comment-form textarea,
.tti-comment-form input[type=text],
.tti-comment-form input[type=email],
.tti-comment-form input[type=url] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,.15);
    font-size: .92rem;
    background: #fff;
    box-sizing: border-box;
    font-family: inherit;
}
.tti-comment-form textarea:focus,
.tti-comment-form input:focus {
    outline: none;
    border-color: var(--color-accent, #e63946);
}
.tti-comment-form textarea { resize: vertical; min-height: 130px; }
.tti-comment-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.tti-comment-save {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    color: #666;
}
.tti-comment-form-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.tti-comment-submit {
    background: var(--color-accent, #e63946);
    color: #fff;
    border: none;
    padding: 11px 26px;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background .2s;
}
.tti-comment-submit:hover { background: #c92c39; }
.tti-comment-submit:disabled { opacity: .6; cursor: not-allowed; }
.tti-comment-msg {
    font-size: .85rem;
    font-weight: 600;
}
.tti-comment-msg.is-ok { color: #2ea44f; }
.tti-comment-msg.is-err { color: #d23434; }

/* ── Article Sidebar ────────────────────────────────────────── */
.tti-art-sidebar {
    position: sticky;
    top: 80px;
}

/* ── You Might Also Like ────────────────────────────────────── */
.tti-also-like {
    padding: 40px 0 60px;
    border-top: 1px solid rgba(0,0,0,.08);
}
.tti-also-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.tti-also-card { display: flex; flex-direction: column; min-width: 0; }
.tti-also-img {
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}
.tti-also-img img,
.tti-also-img .tti-card-noimg {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.tti-also-img:hover img { transform: scale(1.05); }
.tti-also-body {
    padding-top: 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.tti-also-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 4px 0 0;
    color: var(--color-heading, #111);
}
.tti-also-title a { color: inherit; }
.tti-also-title a:hover { color: var(--color-accent, #e63946); }

/* ── Toast for copy link ────────────────────────────────────── */
.tti-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1a1a1a;
    color: #fff;
    padding: 12px 22px;
    font-size: .88rem;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}
.tti-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .tti-art-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .tti-share-rail {
        flex-direction: row;
        position: static;
        order: 2;
        flex-wrap: wrap;
    }
    .tti-art-main { order: 1; }
    .tti-art-sidebar { order: 3; position: static; }
    .tti-also-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .tti-article-page { overflow-x: hidden; }
    .tti-art-header { padding: 18px 0 14px; }
    .tti-art-title { font-size: 1.5rem; margin: 8px 0 10px; }
    .tti-art-intro { font-size: .92rem; margin: 0 0 14px; }
    .tti-art-byline { gap: 10px; }
    .tti-art-byline-meta { font-size: .72rem; gap: 6px; }
    .tti-art-byline-meta .tti-mag-sep { display: inline; }

    .tti-art-body { padding: 8px 0 32px; }
    .tti-art-layout { gap: 24px; }
    .tti-art-featured-img { aspect-ratio: 16/10; margin-bottom: 20px; }

    .tti-art-content { font-size: .98rem; line-height: 1.75; }
    .tti-art-content h2 { font-size: 1.25rem; margin: 22px 0 10px; }
    .tti-art-content h3 { font-size: 1.1rem; margin: 18px 0 8px; }
    .tti-art-content > p:first-of-type::first-letter { font-size: 2.6rem; padding: 4px 8px 0 0; }
    .tti-art-content blockquote { padding: 12px 16px; font-size: 1rem; }

    /* TOC mobile */
    .tti-toc { margin: 20px 0; }
    .tti-toc-head { padding: 10px 14px; font-size: .8rem; }
    .tti-toc-list { padding: 12px 18px 14px 32px; font-size: .9rem; }

    /* Horizontal share rail on mobile */
    .tti-share-rail { gap: 6px; padding: 4px 0; }
    .tti-share-btn { width: 38px; height: 38px; }

    /* Bottom share row */
    .tti-art-share-bottom { gap: 10px; padding: 14px 0; flex-direction: column; align-items: flex-start; }
    .tti-art-share-label { font-size: .75rem; }
    .tti-art-share-buttons { justify-content: flex-start; gap: 6px; width: 100%; }
    .tti-art-share-buttons .tti-share-btn { padding: 0 10px; font-size: .72rem; }

    /* Tags */
    .tti-art-tags { gap: 6px; margin: 22px 0 18px; }
    .tti-art-tag { padding: 4px 10px; font-size: .72rem; }

    /* Author bio + related banner */
    .tti-author-bio { flex-direction: column; align-items: center; text-align: center; padding: 18px; gap: 12px; }
    .tti-author-bio-avatar { flex-basis: 64px; width: 64px; height: 64px; }
    .tti-related-banner { padding: 12px; gap: 12px; }
    .tti-related-banner-img { flex-basis: 90px; }
    .tti-related-banner-title { font-size: .92rem; }

    /* Comments */
    .tti-comment-form-grid { grid-template-columns: 1fr; gap: 12px; }
    .tti-comment-form textarea { min-height: 110px; }

    /* You Might Also Like */
    .tti-also-like { padding: 28px 0 36px; }
    .tti-also-grid { grid-template-columns: 1fr; gap: 18px; }

    /* Mobile: breadcrumb scrolls horizontally instead of wrapping */
    .tti-breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
        gap: 6px;
    }
    .tti-breadcrumb::-webkit-scrollbar { display: none; }
    .tti-breadcrumb a,
    .tti-breadcrumb > span { white-space: nowrap; flex-shrink: 0; }
    .tti-bc-current {
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;
    }
}

/* =============================================================
   SEARCH RESULTS PAGE
   ============================================================= */
.tti-search-page { background: var(--color-body-bg, #fff); }

.tti-search-header {
    padding: 30px 0 32px;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.tti-search-title {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 12px 0 10px;
    color: var(--color-heading, #111);
}
.tti-search-q {
    color: var(--color-accent, #e63946);
    font-weight: 800;
}
.tti-search-count {
    font-size: .95rem;
    color: #666;
    margin: 0 0 22px;
}
.tti-search-count strong {
    color: var(--color-heading, #111);
    font-weight: 800;
}

.tti-search-form {
    display: flex;
    align-items: center;
    max-width: 640px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    position: relative;
}
.tti-search-form-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    color: #888;
    pointer-events: none;
}
.tti-search-form input[type=search] {
    flex: 1;
    padding: 14px 14px 14px 12px;
    border: none;
    outline: none;
    font-size: .98rem;
    background: transparent;
    color: var(--color-heading, #111);
    min-width: 0;
    font-family: inherit;
}
.tti-search-form input[type=search]::placeholder { color: #999; }
.tti-search-form button {
    background: var(--color-accent, #e63946);
    color: #fff;
    border: none;
    padding: 14px 26px;
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .2s;
}
.tti-search-form button:hover { background: #c92c39; }

/* Empty state */
.tti-search-empty {
    text-align: center;
    padding: 50px 20px 70px;
    color: #666;
}
.tti-search-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(230,57,70,.08);
    color: var(--color-accent, #e63946);
    margin: 0 auto 22px;
}
.tti-search-empty-icon svg { width: 38px; height: 38px; }
.tti-search-empty h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 10px;
    color: var(--color-heading, #111);
}
.tti-search-empty p {
    font-size: .95rem;
    max-width: 480px;
    margin: 0 auto 20px;
    line-height: 1.6;
}
.tti-search-empty-btn {
    display: inline-block;
    padding: 10px 26px;
    background: var(--color-accent, #e63946);
    color: #fff;
    font-size: .88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background .2s;
}
.tti-search-empty-btn:hover { background: #c92c39; }

/* Browse categories sidebar block */
.tti-sb-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tti-sb-cat-item {
    border-bottom: 1px solid rgba(0,0,0,.08);
}
.tti-sb-cat-item:last-child { border-bottom: none; }
.tti-sb-cat-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--color-heading, #111);
    transition: color .15s, padding-left .15s;
}
.tti-sb-cat-item a:hover {
    color: var(--color-accent, #e63946);
    padding-left: 4px;
}
.tti-sb-cat-count {
    font-size: .78rem;
    color: #888;
    background: rgba(0,0,0,.05);
    padding: 2px 9px;
    min-width: 32px;
    text-align: center;
    font-weight: 600;
}
.tti-sb-cat-item a:hover .tti-sb-cat-count {
    background: var(--color-accent, #e63946);
    color: #fff;
}

/* Pagination ellipsis dots (for search) */
.tti-page-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 38px;
    color: #888;
    font-size: .9rem;
}

@media (max-width: 700px) {
    .tti-search-title { font-size: 1.5rem; }
    .tti-search-form button {
        padding: 12px 16px;
        font-size: .8rem;
    }
    .tti-search-form input[type=search] {
        padding: 12px 10px;
        font-size: .92rem;
    }
    .tti-search-empty { padding: 30px 12px 40px; }
    .tti-search-empty h2 { font-size: 1.2rem; }
    .tti-search-empty-icon { width: 64px; height: 64px; }
    .tti-search-empty-icon svg { width: 30px; height: 30px; }
}

/* =============================================================
   ARTICLE PAGE — DARK MODE OVERRIDES
   ============================================================= */
html.dark .tti-art-intro              { color: #aaa; }
html.dark .tti-art-byline-name        { color: #bbb; }
html.dark .tti-art-byline-name strong,
html.dark .tti-art-byline-name a strong { color: var(--color-heading, #f5f5f5); }
html.dark .tti-art-byline-meta        { color: #888; }
html.dark .tti-art-avatar-fallback    {
    background: rgba(230,57,70,.18);
}

html.dark .tti-art-content            { color: var(--color-text, #d4d4d4); }
html.dark .tti-art-content blockquote {
    background: var(--color-secondary, #1a1a1a);
    color: #d4d4d4;
    border-left-color: var(--color-accent, #e63946);
}
html.dark .tti-art-content code       { background: #1f1f1f; color: #f0f0f0; }
html.dark .tti-art-content pre        { background: #0a0a0a; }
html.dark .tti-art-content th         { background: #1a1a1a; }
html.dark .tti-art-content th,
html.dark .tti-art-content td         { border-color: rgba(255,255,255,.1); }

html.dark .tti-toc {
    background: var(--color-secondary, #1a1a1a);
    border-color: rgba(255,255,255,.08);
}
html.dark .tti-toc-head        { border-bottom-color: rgba(255,255,255,.08); }
html.dark .tti-toc-head span   { color: var(--color-heading, #f5f5f5); }
html.dark .tti-toc-toggle      { color: #999; }
html.dark .tti-toc-list        { color: #bbb; }
html.dark .tti-toc-list a      { color: #ccc; }
html.dark .tti-toc-list a:hover { color: var(--color-accent, #e63946); }

html.dark .tti-art-tag                { background: #1f1f1f; color: #bbb; }
html.dark .tti-art-tag:hover          { background: var(--color-accent, #e63946); color: #fff; }

html.dark .tti-share-btn              { background: #1f1f1f; color: #bbb; }

html.dark .tti-art-share-bottom {
    border-top-color: rgba(255,255,255,.08);
    border-bottom-color: rgba(255,255,255,.08);
}
html.dark .tti-art-share-label        { color: #aaa; }

html.dark .tti-author-bio             { background: var(--color-secondary, #1a1a1a); }
html.dark .tti-author-bio-text        { color: #aaa; }

html.dark .tti-related-banner {
    background: var(--color-secondary, #1a1a1a);
    border-color: rgba(255,255,255,.08);
}
html.dark .tti-related-banner:hover {
    border-color: var(--color-accent, #e63946);
    background: rgba(230,57,70,.08);
}
html.dark .tti-related-banner-title   { color: var(--color-heading, #f5f5f5); }

html.dark .tti-comments-list .tti-comment-item {
    background: var(--color-secondary, #1a1a1a);
}
html.dark .tti-comment-body           { color: #bbb; }
html.dark .tti-comment-time           { color: #888; }
html.dark .tti-comment-form textarea,
html.dark .tti-comment-form input[type=text],
html.dark .tti-comment-form input[type=email],
html.dark .tti-comment-form input[type=url] {
    background: var(--color-secondary, #1a1a1a);
    border-color: rgba(255,255,255,.1);
    color: var(--color-text, #d4d4d4);
}
html.dark .tti-comment-form textarea::placeholder,
html.dark .tti-comment-form input::placeholder { color: #777; }
html.dark .tti-comment-save           { color: #999; }

html.dark .tti-also-like              { border-top-color: rgba(255,255,255,.08); }

html.dark .tti-breadcrumb a           { color: #bbb; }
html.dark .tti-bc-sep                 { color: #555; }

/* Category archive page dark mode */
html.dark .tti-cat-page               { background: var(--color-body-bg, #0f0f0f); }
html.dark .tti-cat-header             { border-bottom-color: rgba(255,255,255,.08); }
html.dark .tti-cat-desc               { color: #aaa; }
html.dark .tti-cat-list-item          { border-bottom-color: rgba(255,255,255,.08); }
html.dark .tti-cat-list-excerpt       { color: #aaa; }
html.dark .tti-cat-empty              { color: #888; }
html.dark .tti-cat-trend-body .tti-mag-time { color: #aaa; }
html.dark .tti-cat-trend-title        { color: var(--color-heading, #f5f5f5); }
html.dark .tti-page,
html.dark .tti-page-arrow {
    background: var(--color-secondary, #1a1a1a);
    color: var(--color-heading, #f5f5f5);
    border-color: rgba(255,255,255,.1);
}
html.dark .tti-sb-newsletter {
    background: var(--color-secondary, #1a1a1a);
    border-color: rgba(255,255,255,.1);
}
html.dark .tti-sb-newsletter p        { color: #aaa; }
html.dark .tti-sb-newsletter input[type=email] {
    background: #111;
    border-color: rgba(255,255,255,.12);
    color: var(--color-text, #d4d4d4);
}
html.dark .tti-sb-newsletter input[type=email]::placeholder { color: #777; }
html.dark .tti-sb-popular-item        { color: var(--color-heading, #f5f5f5); }
html.dark .tti-sb-popular-feat-title a { color: var(--color-heading, #f5f5f5); }
html.dark .tti-sb-head h3             { color: var(--color-heading, #f5f5f5); }
html.dark .tti-sb-head span           { color: #888; }
html.dark .tti-sb-follow-label        { color: var(--color-heading, #f5f5f5); }

/* Search page dark mode */
html.dark .tti-search-header          { border-bottom-color: rgba(255,255,255,.08); }
html.dark .tti-search-count           { color: #aaa; }
html.dark .tti-search-count strong    { color: var(--color-heading, #f5f5f5); }
html.dark .tti-search-form {
    background: var(--color-secondary, #1a1a1a);
    border-color: rgba(255,255,255,.12);
}
html.dark .tti-search-form input[type=search] {
    color: var(--color-heading, #f5f5f5);
}
html.dark .tti-search-form input[type=search]::placeholder { color: #777; }
html.dark .tti-search-form-icon       { color: #888; }
html.dark .tti-search-empty           { color: #aaa; }
html.dark .tti-search-empty h2        { color: var(--color-heading, #f5f5f5); }
html.dark .tti-search-empty-icon {
    background: rgba(230,57,70,.15);
}

html.dark .tti-sb-cat-item            { border-bottom-color: rgba(255,255,255,.08); }
html.dark .tti-sb-cat-item a          { color: var(--color-heading, #f5f5f5); }
html.dark .tti-sb-cat-count {
    background: rgba(255,255,255,.06);
    color: #aaa;
}

html.dark .tti-page-dots              { color: #777; }