/*
Theme Name: MohiRDO Magazine WordPress Theme
Theme URI: https://mohirdo.com/
Description: Premium Modern Magazine WordPress Theme for News & Magazines. Online Ready — works with any categories, fully compatible with Elementor, Gutenberg, Bricks Builder, Beaver Builder, Divi, WPBakery and other page builders. Retina-ready responsive images, perfect responsiveness across all screens. Import demo content from Appearance > MohiRDO Magazine WordPress Theme.
Version: 10.12
Author: Ghulam Mohiudeen
Author URI: https://mohirdo.com/
Text Domain: newsmag
Tags: blog, news, magazine, custom-menu, featured-images, theme-options, translation-ready
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
    --accent: #2970e4;
    --accent-hover: #2563eb;
    --title: #0f172a;
    --title-hover: #2970e4;
    --text: #475569;
    --meta: #647388;
    --body-bg: #f1f5f9;
    --outer-bg: #f8fafc;
    --card: #fff;
    --header-bg: #fff;
    --header-bg-rgb: 255,255,255;
    --header-bg-sticky: #fff;
    --header-bg-sticky-rgb: 255,255,255;
    --header-title: #0f172a;
    --header-title-hover: #2970e4;
    --header-title-sticky: #0f172a;
    --header-title-hover-sticky: #2970e4;
    --footer-bg: #1e293b;
    --footer-bar: #0f172a;
    --footer-text: #cbd5e1;
    --border: #e2e8f0;
    --shadow: 0 1px 2px rgba(15,23,42,.05);
    --shadow-md: 0 4px 12px rgba(15,23,42,.06);
    --shadow-lg: 0 8px 24px rgba(15,23,42,.08);
    --radius: 8px;
    --gap: 30px;
    --header-h: 62px;
    --header-h-scrolled: 56px;
    --font: 'Montserrat', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { font-family: var(--font); font-size: var(--base-font, 15px); color: var(--text); line-height: 1.6; background: var(--body-bg); -webkit-tap-highlight-color: transparent; }
.site-outer { display: flex; flex-direction: column; min-height: 100vh; }
.site-outer .content-wrap { flex: 1; }
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-hover); }
#post-body a, .entry-content a, .comment-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#post-body a:hover, .entry-content a:hover, .comment-content a:hover { text-decoration-thickness: 2px; }
.footer-bar p a, .footer-desc a, .widget_text .textwidget a, .wp-block-latest-posts__post-excerpt a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.google-anno-t { color: inherit !important; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head, var(--font)); font-weight: var(--heading-weight, 700); color: var(--title); line-height: 1.3; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

.container { position: relative; width: var(--container-w, 1200px); max-width: 100%; margin: 0 auto; padding: 0 20px; }

/* ===== BORDER TOP ===== */
.border-top { height: 5px; background: linear-gradient(45deg, #3b82f6, #d946ef); }

/* ===== HEADER ===== */
.site-header { background: var(--header-bg, #fff); box-shadow: none; transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, backdrop-filter .35s ease; }
.header-items { display: flex; justify-content: space-between; align-items: center; height: var(--header-h); gap: 20px; transition: height .35s cubic-bezier(.4, 0, .2, 1); }
.flex-left { display: flex; align-items: center; gap: 30px; }
.flex-right { display: flex; align-items: center; gap: 6px; }
.main-logo { flex-shrink: 0; height: var(--header-h); display: flex; align-items: center; transition: height .35s cubic-bezier(.4, 0, .2, 1); }
.main-logo .site-title-link,
.main-logo .custom-logo-link { font-size: 25px; font-weight: 700; color: var(--title); transition: opacity .35s ease, transform .35s ease; }
.main-logo .custom-logo-link img { max-height: 40px; transition: max-height .3s ease, opacity .3s ease; }
.main-nav { display: flex; height: var(--header-h); transition: height .35s cubic-bezier(.4, 0, .2, 1); }
.nav-list { display: flex; gap: 28px; align-items: stretch; height: 100%; margin: 0; padding: 0; }
.nav-list li { position: relative; display: flex; flex-shrink: 0; }
.nav-list li a { display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--title); height: 100%; line-height: 1; white-space: nowrap; flex-shrink: 0; transition: color .15s; }
.nav-list li a:hover,
.nav-list li.current-menu-item a { color: var(--title-hover); }
.nav-list > li > a { position: relative; letter-spacing: .2px; }
.nav-list > li > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform .2s ease; }
.nav-list > li > a:hover::after,
.nav-list > li.current-menu-item > a::after { transform: scaleX(1); }
.nav-list li .sub-menu { display: none; position: absolute; top: calc(var(--header-h) - 8px); left: 0; background: var(--card); min-width: 180px; box-shadow: var(--shadow), 0 10px 15px -3px rgba(15,23,42,.05); border-radius: var(--radius); z-index: 999; padding: 8px 0; transform: translate3d(0,8px,0); opacity: 0; visibility: hidden; transition: all .17s ease; }
.nav-list li:hover > .sub-menu { transform: translate3d(0,0,0); opacity: 1; visibility: visible; }
.nav-list li .sub-menu li a { padding: 8px 16px; font-size: 14px; font-weight: 400; height: auto; line-height: 1.5; color: var(--title); justify-content: space-between; }
.nav-list li .sub-menu li a:hover { color: var(--title-hover); }
.search-toggle, .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-size: 18px; color: var(--title); border-radius: 50%; transition: color .15s; }
.search-toggle:hover, .mobile-menu-toggle:hover { color: var(--title-hover); }
.mobile-menu-toggle { display: none; font-size: 26px; }

/* ===== MULTI-HEADER SYSTEM (v10.12) ===== */
/* Sticky mechanics: the WRAP is the sticky element — its containing block is the
   full-height `.site-outer`, so the header genuinely sticks for the whole scroll.
   (A sticky element whose parent is only as tall as itself never sticks.) */
.site-header-wrap { position: sticky; top: 0; z-index: 100; }

/* Modern go-sticky transition (v10.12). Three things glide together on scroll:
   1. The header condenses (height eases down from --header-h to --header-h-scrolled)
   2. The background/colour crossfades from the "Normal" state to the "Sticky" state
   3. The logo crossfades to the separate sticky logo (when one is uploaded) */
.site-header.scrolled { --header-h: var(--header-h-scrolled, 56px); background: var(--header-bg-sticky, var(--header-bg, #fff)); border-bottom: 1px solid var(--border); box-shadow: 0 8px 30px rgba(15,23,42,.10); }
body.header-glassy .site-header.scrolled { -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }

/* Header text palette swaps per state (auto-contrast vars injected by functions.php),
   so logo/menu/icons stay readable on BOTH the normal and the sticky colour. */
.site-header { --hdr-title: var(--header-title, var(--title)); --hdr-title-hover: var(--header-title-hover, var(--title-hover)); }
.site-header.scrolled { --hdr-title: var(--header-title-sticky, var(--hdr-title)); --hdr-title-hover: var(--header-title-hover-sticky, var(--hdr-title-hover)); }
.main-logo .site-title-link,
.main-logo .custom-logo-link { color: var(--hdr-title, var(--title)); }
.main-logo .site-title-link:hover,
.main-logo .custom-logo-link:hover { color: var(--hdr-title-hover, var(--title-hover)); }
.site-header .nav-list > li > a { color: var(--hdr-title, var(--title)); }
.site-header .nav-list > li > a:hover,
.site-header .nav-list > li.current-menu-item > a { color: var(--hdr-title-hover, var(--title-hover)); }
.site-header .nav-list > li > a::after { background: var(--hdr-title-hover, var(--accent)); }
.site-header .search-toggle,
.site-header .mobile-menu-toggle { color: var(--hdr-title, var(--title)); }
.site-header .search-toggle:hover,
.site-header .mobile-menu-toggle:hover { color: var(--hdr-title-hover, var(--title-hover)); }
.header-social a { color: var(--hdr-title, var(--header-title, var(--title))); }
.header-social a:hover { color: var(--hdr-title-hover, var(--header-title-hover, var(--title-hover))); }

/* Separate sticky logo (v10.12). Uploaded via Customizer; stacked over the normal
   logo and crossfaded in while the header is stuck. Falls back to the normal logo
   when none is set. */
.main-logo { position: relative; }
.site-header .site-logo-sticky { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity .35s ease, transform .35s ease, visibility .35s ease; }
.site-header .site-logo-sticky img { max-height: 38px; width: auto; height: auto; }
.site-header.scrolled .site-logo-sticky { opacity: 1; visibility: visible; transform: translateY(-50%) translateY(2px); }
.has-sticky-logo .site-header.scrolled .main-logo .custom-logo-link,
.has-sticky-logo .site-header.scrolled .main-logo .site-title-link { opacity: 0; transform: translateY(2px); }
.has-sticky-logo .site-header.scrolled .main-logo .custom-logo-link img { max-height: 30px; }

/* Wide / full-width header (optional) — keeps a generous, proportional inset on
   both sides so the header content never hugs the screen edges */
body.header-wide .site-header .container { width: 100%; max-width: 100%; padding-left: clamp(28px, 4vw, 64px); padding-right: clamp(28px, 4vw, 64px); }

/* CTA button */
.header-cta-btn { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 20px; margin-left: 10px; background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%); color: #fff !important; font-size: 13px; font-weight: 600; border-radius: 999px; white-space: nowrap; transition: transform .15s, box-shadow .15s, filter .15s; box-shadow: 0 6px 16px rgba(139,92,246,.28); }
.header-cta-btn:hover { filter: brightness(1.06); color: #fff !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(139,92,246,.34); }

/* Header social icons */
.header-social { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.header-social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 15px; color: var(--title); border-radius: 50%; transition: color .15s, background .15s; }
.header-social a:hover { color: var(--accent); background: rgba(41,112,228,.08); }

/* Inline search (header styles 3 & 8) */
.header-inline-search { width: min(560px, 52vw); }
.header-search-form { display: flex; align-items: center; background: var(--body-bg); border: 1px solid var(--border); border-radius: 999px; height: 42px; padding-left: 18px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.header-search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(41,112,228,.12); }
.header-search-input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; font-size: 14px; font-family: var(--font); color: var(--title); }
.header-search-input::placeholder { color: var(--meta); }
.header-search-form button { display: flex; align-items: center; justify-content: center; width: 46px; height: 100%; color: var(--accent); font-size: 16px; }
.header-search-form button:hover { color: var(--accent-hover); }

/* STYLE 2 — Centered logo, menu on sides */
.header-style-2 .hst2-items { justify-content: center; gap: 28px; }
.header-style-2 .hst2-items .flex-left, .header-style-2 .hst2-items .flex-right { flex: 1 1 0; }
.header-style-2 .hst2-items .flex-right { justify-content: flex-end; }
.hst2-nav { flex: 1; min-width: 0; }
.hst2-nav .nav-list { justify-content: center; gap: 22px; }
.hst2-logo { flex-shrink: 0; }

/* STYLE 1 — Logo left, centered menu, icons right.
   The menu is pinned to the exact center of the header (like top-tier news sites),
   so the whitespace on the logo side and the search side is always balanced. */
.header-style-1 .hst1-items { position: relative; }
.header-style-1 .hst1-items .flex-left, .header-style-1 .hst1-items .flex-right { flex: 1 1 0; min-width: 0; }
.header-style-1 .hst1-items .flex-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; min-width: 0; }
.header-style-1 .hst1-items .flex-right { justify-content: flex-end; }

/* Per-layout signatures — each style reads as a distinct, deliberate design */
.header-style-1 { --header-h: 64px; }
.header-style-2 { --header-h: 80px; border-bottom: 1px solid var(--border); }
.header-style-2 .main-logo .site-title-link, .header-style-2 .main-logo .custom-logo-link { font-size: 28px; letter-spacing: -.5px; }
.header-style-2 .hst2-nav .nav-list > li > a { font-size: 13.5px; text-transform: uppercase; letter-spacing: .7px; font-weight: 700; }
.header-style-3 { --header-h: 76px; }
.header-style-3 .header-search-form { height: 48px; border-width: 2px; }
.header-style-3 .header-search-input { font-size: 15px; }
.header-style-4 { --header-h: 66px; }
.header-style-5 { --header-h: 68px; }
.header-style-5 .header-cta-btn { height: 42px; padding: 0 26px; font-size: 14px; }
.header-style-6 { --header-h: 72px; }
.header-style-6 .search-toggle, .header-style-6 .mobile-menu-toggle { width: 38px; height: 38px; }
.header-style-7 { --header-h: 64px; }
.header-style-8 { --header-h: 66px; }

/* STYLE 3 — Big center search */
.header-style-3 .header-items { gap: 24px; }
.header-style-3 .flex-left { flex: 1 1 0; }
.header-style-3 .flex-center { display: flex; align-items: center; justify-content: center; flex: 1.6 1 auto; min-width: 0; }
.header-style-3 .flex-right { justify-content: flex-end; flex: 1 1 0; }
.header-style-3 .header-inline-search { width: 100%; max-width: 640px; }

/* STYLES 4 / 5 / 7 — Logo left, menu center, icons right */
.header-style-4 .header-items, .header-style-5 .header-items, .header-style-7 .header-items { gap: 24px; }
.header-style-4 .flex-left, .header-style-5 .flex-left, .header-style-7 .flex-left { flex: 1 1 0; }
.header-style-4 .flex-center, .header-style-5 .flex-center, .header-style-7 .flex-center { display: flex; justify-content: center; flex: auto; min-width: 0; }
.header-style-4 .flex-right, .header-style-5 .flex-right, .header-style-7 .flex-right { flex: 1 1 0; justify-content: flex-end; }
.header-style-4 .main-nav > .nav-list, .header-style-5 .main-nav > .nav-list, .header-style-7 .main-nav > .nav-list { gap: 26px; }

/* STYLE 8 — Top bar + big search */
.header-topbar { background: linear-gradient(90deg, var(--accent), var(--accent-hover)); color: #fff; }
.header-topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 34px; font-size: 12.5px; }
.htb-tagline { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.92); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htb-tagline i { font-size: 13px; }
.htb-right { display: flex; align-items: center; gap: 10px; }
.htb-right .header-social { margin-left: 0; }
.htb-right .header-social a { color: rgba(255,255,255,.9); }
.htb-right .header-social a:hover { color: #fff; background: rgba(255,255,255,.18); }
.header-style-8 .header-inline-search { width: min(420px, 58vw); }
.header-style-8 .flex-left { gap: 24px; }

/* ===== SEARCH MODAL ===== */
.search-on { display: none; position: fixed; inset: 0; z-index: 200; }
.search-on.active { display: flex; align-items: center; justify-content: center; }
.search-on .overlay-bg { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; }
.search-box { position: relative; z-index: 1; width: 520px; max-width: calc(100% - 40px); background: var(--card, #fff); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: searchFadeIn .25s ease; overflow: hidden; }
.search-form { display: flex; height: 56px; padding: 8px; }
.search-input { flex: 1; padding: 0 20px; font-size: 16px; border: none; outline: none; font-family: var(--font, 'Montserrat', sans-serif); color: var(--title, #0f172a); background: var(--body-bg, #f1f5f9); border-radius: 8px; width: 100%; }
.search-input::placeholder { color: var(--meta, #94a3b8); }
@keyframes searchFadeIn { from { opacity: 0; transform: scale(.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ===== SLIDE MENU ===== */
.slide-menu { display: none; flex-direction: column; position: fixed; top: 0; left: 0; width: 300px; height: 100%; background: var(--header-bg); z-index: 300; transform: translate3d(-100%,0,0); transition: transform .25s ease, visibility .25s; box-shadow: 0 0 15px rgba(15,23,42,.1); overflow-y: auto; }
.slide-menu.active { transform: translate3d(0,0,0); visibility: visible; }
.slide-menu:not(.active) { visibility: hidden; }
.slide-menu-header { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 20px; border-bottom: 1px solid var(--border); }
.mobile-logo { font-size: 25px; font-weight: 700; color: var(--title); }
.hide-mobile-menu { font-size: 20px; color: var(--title); padding: 0 20px; }
.hide-mobile-menu:hover { color: var(--title-hover); }
.mobile-menu { padding: 20px; }
.mobile-menu .nav-list { flex-direction: column; gap: 0; }
.mobile-menu .nav-list li a { padding: 10px 0; height: auto; font-size: 14px; font-weight: 400; color: var(--title); border-bottom: none; }
.mobile-menu > .nav-list > li > a { font-weight: 700; text-transform: uppercase; }
.mobile-menu .nav-list li a:hover { color: var(--title-hover); }

/* ===== FEATURED SECTION ===== */
.featured-section { margin: var(--gap) 0; }
.featured-items { display: grid; grid-template-columns: 52% 1fr; align-items: stretch; gap: 25px; width: 100%; }
.cs-hero { position: relative; display: block; overflow: hidden; border-radius: var(--radius); height: 400px; box-shadow: var(--shadow); }
.cs-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .5s; }
.cs-hero:hover img { transform: scale(1.03); }
.cs-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.65) 0%, rgba(15,23,42,0) 100%); z-index: 2; }
.cs-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; z-index: 3; }
.cs-tag { display: inline-flex; align-items: center; max-width: fit-content; height: 20px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; padding: 0 8px; border-radius: var(--radius); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.cs-title { color: #fff; font-size: 20px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-meta { color: rgba(255,255,255,.8); font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 5px; }

.featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: stretch; }
.grid-card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s; }
.grid-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.grid-thumb { display: block; height: 168px; overflow: hidden; }
.grid-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.grid-card:hover .grid-thumb img { transform: scale(1.05); }
/* Featured section: hero + both side cards share one complete 400px line (matching heights) */
.featured-grid .grid-card { display: flex; flex-direction: column; height: 400px; }
.featured-grid .grid-thumb { flex: 1 1 0%; height: auto; min-height: 180px; }
/* Extra featured posts: full-width row below the hero so no gap sits beside it */
.featured-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; margin-top: 25px; }
.more-card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.more-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.more-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--border); }
.more-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.more-card:hover .more-thumb img { transform: scale(1.05); }
.more-info { padding: 14px 16px; }
.more-title { font-size: 14px; font-weight: 600; line-height: 1.4; margin: 6px 0; }
.more-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.more-title a:hover { color: var(--title-hover); }
.more-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }
.grid-info { padding: 20px; }
.grid-cat { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; }
.grid-title { font-size: 16px; font-weight: 600; margin: 6px 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.grid-title a { color: var(--title); }
.grid-title a:hover { color: var(--title-hover); }
.grid-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }

/* ===== TRENDING BAR ===== */
.trending-bar { margin: var(--gap) 0 0; }
.trending-inner { display: flex; align-items: center; background: var(--card); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow); gap: 15px; }
.trending-label { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--title); flex-shrink: 0; white-space: nowrap; }
.trending-label i { color: var(--accent); font-size: 16px; background: linear-gradient(45deg, #3b82f6, #d946ef); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ticker-wrap { display: flex; align-items: center; flex: 1; overflow: hidden; }
.ticker-items { position: relative; flex: 1; height: 20px; overflow: hidden; }
.ticker-item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translate3d(5px,0,0); transition: opacity .4s ease, transform .4s ease; will-change: transform; }
.ticker-item.active { opacity: 1; visibility: visible; transform: translate3d(0,0,0); }
.ticker-item a { display: flex; align-items: center; height: 20px; font-size: 14px; color: var(--title); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-item a:hover { color: var(--title-hover); }
.ticker-next { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 16px; color: var(--title); flex-shrink: 0; transition: color .15s; }
.ticker-next:hover { color: var(--title-hover); }

/* ===== CONTENT LAYOUT ===== */
.content-wrap { position: relative; margin: var(--gap) 0 0; }
.content-flex { display: flex; gap: var(--gap); }
.main-wrap { position: relative; width: calc(100% - 330px); min-width: 0; }
.sidebar-wrap { position: relative; width: 300px; flex-shrink: 0; }
.sidebar-sticky { position: sticky; top: calc(var(--header-h) + var(--gap)); display: grid; grid-template-columns: 100%; gap: var(--gap); }

/* ===== BLOCK SECTIONS ===== */
.block-section { margin-bottom: var(--gap); }
.title-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.title-wrap .block-title { display: flex; align-items: center; font-size: 18px; font-weight: 700; line-height: 1; }
.view-all { display: flex; align-items: center; flex-shrink: 0; gap: 2px; font-size: 13px; color: var(--accent); font-weight: 500; }
.view-all::after { content: "\f138"; font-size: 12px; }
.view-all:hover { opacity: .9; }

.block-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 25px; }
.block-hero { border-radius: var(--radius); overflow: hidden; }
.hero-link { display: block; position: relative; height: 400px; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
.hero-link img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s; }
.hero-link:hover img { transform: scale(1.03); }
.hero-link .cs-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.65) 0%, rgba(15,23,42,0) 100%); z-index: 2; }
.hero-link .cs-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; z-index: 3; }

/* Layout A side list: spans the exact 400px hero height so first and last item align flush with the hero image */
.block-list { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; height: 400px; }
.block-list .list-item { flex: 1 0 auto; align-items: center; }
.list-item { display: flex; gap: 14px; }
.list-thumb { flex-shrink: 0; width: 98px; height: 68px; border-radius: var(--radius); overflow: hidden; display: block; background: var(--border); }
.list-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .3s; }
.list-item:hover .list-thumb img { transform: scale(1.05); }
.list-info { flex: 1; min-width: 0; }
.list-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.list-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-title a:hover { color: var(--title-hover); }
.list-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; margin-top: 4px; }

/* Layout B: Hero Full + 3-Column Grid */
.block-layout-col { display: flex; flex-direction: column; gap: 25px; }
.block-hero-full { border-radius: var(--radius); overflow: hidden; }
.block-hero-full .hero-link { height: 400px; }
.block-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.block-grid-3 .grid-thumb { height: auto; aspect-ratio: 16 / 9; }
.block-grid-3 .grid-card { display: flex; flex-direction: column; height: 100%; }
.block-grid-3 .grid-info { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-start; }

/* Layout C: Image Left + Text Right Rows */
.list-row-item { display: flex; gap: 20px; padding-bottom: 25px; border-bottom: 1px solid var(--border); }
.list-row-item:last-child { border-bottom: none; padding-bottom: 0; }
.list-row-thumb { flex-shrink: 0; width: calc(50% - 10px); height: 210px; border-radius: var(--radius); overflow: hidden; display: block; background: var(--border); }
.list-row-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.list-row-item:hover .list-row-thumb img { transform: scale(1.05); }
.list-row-info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.list-row-title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.list-row-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-row-title a:hover { color: var(--title-hover); }
.list-row-excerpt { font-size: 14px; color: var(--text); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.list-row-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }

/* Layout D: Cards Grid */
.block-grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.block-grid-cards .card-item { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.block-grid-cards .card-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-thumb { display: block; height: auto; aspect-ratio: 16 / 9; overflow: hidden; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.block-grid-cards .card-item:hover .card-thumb img { transform: scale(1.05); }
.card-info { padding: 16px 18px; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-start; }
.card-title { font-size: 15px; font-weight: 600; line-height: 1.4; margin-bottom: 6px; }
.card-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-title a:hover { color: var(--title-hover); }
.card-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }

/* Layout E: Feature + 2 Cards */
.feature-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: stretch; }
.feature-cards .fc-feature .hero-link { height: 100%; min-height: 340px; }
.feature-cards .fc-feature .hero-link img { height: 100%; }
.fc-side { display: flex; flex-direction: column; gap: 25px; }
.fc-card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); flex: 1 1 0%; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.fc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.fc-thumb { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--border); }
.fc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.fc-card:hover .fc-thumb img { transform: scale(1.05); }
.fc-info { padding: 14px 16px; }
.fc-title { font-size: 14px; font-weight: 600; line-height: 1.4; margin: 6px 0; }
.fc-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.fc-title a:hover { color: var(--title-hover); }
.fc-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }

/* Layout F: 2x2 Grid */
.block-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.block-grid-2 .card-item { display: flex; flex-direction: column; }

/* Layout G: 4-Column Cards */
.block-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Layout H: Numbered List */
.numbered-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.num-item { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.num-badge { flex-shrink: 0; font-size: 28px; font-weight: 800; font-style: italic; line-height: 1; color: var(--accent); min-width: 30px; }
.num-thumb { flex-shrink: 0; width: 96px; height: 64px; border-radius: var(--radius); overflow: hidden; display: block; background: var(--border); }
.num-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .3s; }
.num-item:hover .num-thumb img { transform: scale(1.05); }
.num-info { flex: 1; min-width: 0; }
.num-title { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.num-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.num-title a:hover { color: var(--title-hover); }
.num-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }

/* Layout I: Compact List */
.compact-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.compact-item { display: flex; gap: 14px; align-items: center; background: var(--card); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.compact-thumb { flex-shrink: 0; width: 96px; height: 64px; border-radius: var(--radius); overflow: hidden; display: block; background: var(--border); }
.compact-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .3s; }
.compact-item:hover .compact-thumb img { transform: scale(1.05); }
.compact-info { flex: 1; min-width: 0; }
.compact-title { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.compact-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.compact-title a:hover { color: var(--title-hover); }
.compact-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }

/* ===== V10 LAYOUTS (J-X) ===== */

/* Layout J: Carousel Slider */
.carousel-wrap { position: relative; }
.carousel-wrap .c-viewport { overflow: hidden; }
.carousel-wrap .c-track { display: flex; gap: 20px; scroll-snap-type: x mandatory; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 2px; }
.carousel-wrap .c-track::-webkit-scrollbar { display: none; }
.carousel-wrap .c-card { flex: 0 0 300px; scroll-snap-align: start; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.carousel-wrap .c-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.carousel-wrap .c-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--border); }
.carousel-wrap .c-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.carousel-wrap .c-card:hover .c-thumb img { transform: scale(1.05); }
.carousel-wrap .c-info { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1 0 auto; }
.carousel-wrap .c-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.carousel-wrap .c-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carousel-wrap .c-title a:hover { color: var(--title-hover); }
.carousel-wrap .c-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }
.c-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: var(--card); color: var(--title); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: 0; transition: opacity .2s, background .15s; }
.carousel-wrap:hover .c-nav, .mcar-row:hover .c-nav { opacity: 1; }
.c-prev { left: -14px; }
.c-next { right: -14px; }
.c-nav:hover { background: var(--accent); color: #fff; }

/* Layout K: Multi-Row Carousel */
.multi-carousel { display: flex; flex-direction: column; gap: 25px; }
.mcar-row { position: relative; }
.mcar-row .c-card { flex: 0 0 250px; }
.mcar-row .c-thumb { aspect-ratio: 16 / 9; }
.mcar-row .c-info { padding: 12px 14px; }
.mcar-row .c-title { font-size: 14px; }
.mcar-row .c-nav { top: 45%; }

/* Layout L: Full-Width Featured Slider */
.featured-slider { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.featured-slider .fs-track { display: flex; }
.featured-slider .fs-slide { flex: 0 0 100%; min-width: 100%; position: relative; }
.featured-slider .fs-link { display: block; position: relative; height: 420px; overflow: hidden; }
.featured-slider .fs-link img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s; }
.featured-slider .fs-link:hover img { transform: scale(1.03); }
.fs-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.72) 0%, rgba(15,23,42,.1) 55%, rgba(15,23,42,.2) 100%); z-index: 2; }
.fs-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px; z-index: 3; max-width: 760px; }
.fs-title { color: #fff; font-size: 30px; font-weight: 800; line-height: 1.25; margin: 8px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fs-meta { color: rgba(255,255,255,.8); font-size: 13px; display: flex; align-items: center; gap: 5px; }
.fs-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: background .2s; }
.fs-nav:hover { background: var(--accent); color: #fff; }
.fs-prev { left: 18px; }
.fs-next { right: 18px; }
.fs-dots { position: absolute; bottom: 16px; right: 20px; display: flex; gap: 8px; z-index: 6; }
.fs-dots button { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); transition: all .2s; padding: 0; }
.fs-dots button.active { background: #fff; width: 22px; border-radius: 5px; }

/* Layout M: Masonry Grid */
.masonry-grid { columns: 3; column-gap: 25px; }
.masonry-item { break-inside: avoid; margin-bottom: 25px; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: inline-block; width: 100%; }
.masonry-thumb { display: block; overflow: hidden; background: var(--border); aspect-ratio: 16 / 9; }
.masonry-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.masonry-item:hover .masonry-thumb img { transform: scale(1.05); }
.masonry-body { padding: 16px 18px; }
.masonry-title { font-size: 16px; font-weight: 600; line-height: 1.4; margin: 6px 0; }
.masonry-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.masonry-title a:hover { color: var(--title-hover); }
.masonry-excerpt { font-size: 13px; color: var(--text); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 8px; }
.masonry-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }

/* Layout N: Pinterest Style Grid */
.pin-grid { columns: 3; column-gap: 25px; }
.pin-card { break-inside: avoid; margin-bottom: 25px; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: inline-block; width: 100%; }
.pin-card .pin-link { display: block; position: relative; }
.pin-card img { width: 100%; height: auto; object-fit: cover; object-position: center 30%; transition: transform .4s; display: block; }
.pin-card:nth-child(3n+1) img { aspect-ratio: 3 / 4; }
.pin-card:nth-child(3n+2) img { aspect-ratio: 16 / 10; }
.pin-card:nth-child(3n+3) img { aspect-ratio: 4 / 3; }
.pin-card:hover img { transform: scale(1.05); }
.pin-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.78) 0%, rgba(15,23,42,0) 55%); z-index: 2; }
.pin-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px; z-index: 3; }
.pin-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pin-caption .grid-cat { color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; display: inline-block; }

/* Layout O: Editorial Grid */
.editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; gap: 20px; }
.ed-item { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.ed-item .ed-link { display: block; position: relative; width: 100%; height: 100%; }
.ed-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.ed-item:hover img { transform: scale(1.05); }
.ed-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.72) 0%, rgba(15,23,42,.05) 60%); z-index: 2; }
.ed-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; z-index: 3; }
.ed-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: #fff; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ed-meta { font-size: 12px; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.ed-feature { grid-column: span 2; grid-row: span 2; }
.ed-feature .ed-title { font-size: 22px; font-weight: 700; }
.ed-feature .ed-overlay { background: linear-gradient(to top, rgba(15,23,42,.8) 0%, rgba(15,23,42,.1) 60%); }
.ed-item .grid-cat { color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; display: inline-block; }

/* Layout P: Breaking News Strip */
.breaking-panel { display: grid; grid-template-columns: 150px 1fr; align-items: stretch; border: 1px solid #fecaca; background: #fff5f5; border-radius: var(--radius); overflow: hidden; }
.breaking-label { display: flex; align-items: center; gap: 8px; padding: 0 16px; background: #ef4444; color: #fff; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; flex-shrink: 0; }
.breaking-label i { font-size: 15px; }
.breaking-track { display: flex; align-items: center; gap: 28px; overflow-x: auto; padding: 14px 18px; scrollbar-width: none; }
.breaking-track::-webkit-scrollbar { display: none; }
.breaking-item { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.breaking-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; flex-shrink: 0; animation: breakingBlink 1.2s infinite; }
@keyframes breakingBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.breaking-text { font-size: 14px; color: var(--title); font-weight: 500; white-space: nowrap; }
.breaking-item:hover .breaking-text { color: var(--title-hover); }

/* Layout Q: Large Hero + Small Cards */
.hc-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: 25px; align-items: stretch; }
.hc-hero .hero-link { height: 100%; min-height: 400px; }
.hc-cards { display: flex; flex-direction: column; gap: 20px; }
.hc-card { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex: 1 1 0%; min-height: 0; transition: box-shadow .2s, transform .2s; }
.hc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hc-thumb { display: block; flex-shrink: 0; width: 46%; min-height: 150px; overflow: hidden; background: var(--border); }
.hc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.hc-card:hover .hc-thumb img { transform: scale(1.05); }
.hc-info { padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.hc-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.hc-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-title a:hover { color: var(--title-hover); }
.hc-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }

/* Layout R: Magazine Columns */
.mag-columns { display: flex; flex-direction: column; gap: 25px; }
.mag-lead { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.mag-lead-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--border); }
.mag-lead-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.mag-lead:hover .mag-lead-thumb img { transform: scale(1.05); }
.mag-lead-body { padding: 18px 20px 18px 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mag-lead-title { font-size: 22px; font-weight: 700; line-height: 1.3; }
.mag-lead-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-lead-title a:hover { color: var(--title-hover); }
.mag-excerpt { font-size: 14px; color: var(--text); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }
.mag-cols { columns: 2; column-gap: 40px; }
.mag-item { break-inside: avoid; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.mag-thumb { display: block; width: 130px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--border); }
.mag-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .3s; }
.mag-item:hover .mag-thumb img { transform: scale(1.05); }
.mag-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.mag-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mag-title a:hover { color: var(--title-hover); }

/* Layout S: Timeline Layout */
.timeline-list { position: relative; padding-left: 30px; }
.timeline-list::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.tl-item { position: relative; margin-bottom: 20px; background: var(--card); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 16px; }
.tl-item::before { content: ''; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 0 0 2px var(--accent); }
.tl-info { flex: 1; min-width: 0; }
.tl-title { font-size: 15px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.tl-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-title a:hover { color: var(--title-hover); }
.tl-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }
.tl-thumb { flex-shrink: 0; width: 110px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; display: block; background: var(--border); }
.tl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .3s; }
.tl-item:hover .tl-thumb img { transform: scale(1.05); }

/* Layout T: Horizontal Scroll Cards */
.scroll-cards { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; scrollbar-color: var(--accent) transparent; }
.scroll-card { flex: 0 0 250px; scroll-snap-align: start; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.scroll-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.scroll-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--border); }
.scroll-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.scroll-card:hover .scroll-thumb img { transform: scale(1.05); }
.scroll-body { padding: 14px 16px; flex: 1 0 auto; display: flex; flex-direction: column; gap: 6px; }
.scroll-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.scroll-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scroll-title a:hover { color: var(--title-hover); }
.scroll-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; margin-top: auto; }

/* Layout U: Tabbed Category Layout */
.tab-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.tab-btn { padding: 8px 18px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--body-bg); border-radius: 999px; transition: all .2s; font-family: var(--font); cursor: pointer; }
.tab-btn:hover { color: var(--accent); }
.tab-btn.active { background: var(--accent); color: #fff; }
.tab-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 25px; }
.tab-item { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.tab-thumb { flex-shrink: 0; width: 130px; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; display: block; background: var(--border); }
.tab-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .3s; }
.tab-item:hover .tab-thumb img { transform: scale(1.05); }
.tab-info { flex: 1; min-width: 0; }
.tab-title { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
.tab-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tab-title a:hover { color: var(--title-hover); }
.tab-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Layout V: Featured Category Showcase */
.showcase-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 25px; align-items: stretch; }
.showcase-feature .hero-link { height: 100%; min-height: 400px; }
.showcase-side { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.showcase-item { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow .2s, transform .2s; }
.showcase-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.showcase-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: var(--border); }
.showcase-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.showcase-item:hover .showcase-thumb img { transform: scale(1.05); }
.showcase-info { display: flex; flex-direction: column; gap: 4px; }
.showcase-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
.showcase-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.showcase-title a:hover { color: var(--title-hover); }
.showcase-meta { font-size: 12px; color: var(--meta); display: flex; align-items: center; gap: 4px; }

/* Layout W: Overlay Image Cards */
.overlay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.overlay-card { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; }
.overlay-card .overlay-link { display: block; position: relative; width: 100%; height: 100%; }
.overlay-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.overlay-card:hover img { transform: scale(1.05); }
.overlay-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42,.8) 0%, rgba(15,23,42,.15) 55%, rgba(15,23,42,.2) 100%); z-index: 2; }
.overlay-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; z-index: 3; }
.overlay-title { font-size: 16px; font-weight: 600; line-height: 1.35; color: #fff; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.overlay-meta { font-size: 12px; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.overlay-body .grid-cat { color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; display: inline-block; }

/* Layout X: Minimal News Grid */
.minimal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.minimal-item { padding: 18px 0 22px; border-top: 3px solid var(--accent); }
.minimal-title { font-size: 17px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; }
.minimal-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.minimal-title a:hover { color: var(--title-hover); }
.minimal-excerpt { font-size: 13px; color: var(--text); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; }
.minimal-meta { font-size: 12px; color: var(--meta); text-transform: uppercase; letter-spacing: .5px; }

/* ===== PLACEHOLDER ===== */
.post-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 60px; background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); }
.post-placeholder span { color: #fff; font-weight: 600; text-align: center; padding: 10px; font-size: 13px; line-height: 1.3; }

/* ===== SIDEBAR ===== */
.widget { background: var(--card); padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.widget-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px; line-height: 1; }
.widget-title i { color: var(--accent); font-size: 16px; }

/* Sidebar Search */
.search-widget { padding: 0; overflow: hidden; }
.sidebar-search { display: flex; }
.sidebar-search input { flex: 1; padding: 14px 16px; border: none; outline: none; font-family: var(--font); font-size: 14px; color: var(--title); }
.sidebar-search input::placeholder { color: var(--meta); }
.sidebar-search button { display: flex; align-items: center; padding: 0 16px; background: var(--accent); color: #fff; font-size: 16px; transition: background .15s; }
.sidebar-search button:hover { background: var(--accent-hover); }

/* Popular */
.pop-list { display: flex; flex-direction: column; }
.pop-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.pop-item:last-child { border-bottom: none; padding-bottom: 0; }
.pop-num { font-size: 20px; font-weight: 800; color: var(--meta); min-width: 28px; text-align: center; line-height: 1; }
.pop-item:first-child .pop-num { color: var(--accent); }
.pop-body { display: flex; gap: 10px; flex: 1; }
.pop-thumb { flex-shrink: 0; width: 70px; height: 56px; border-radius: var(--radius); overflow: hidden; background: var(--border); }
.pop-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.pop-info h4 { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 3px; }
.pop-info h4 a { color: var(--title); }
.pop-info h4 a:hover { color: var(--title-hover); }
.pop-info span { font-size: 11px; color: var(--meta); }

/* Popular Posts — Single Post sidebar variant */
.popular-posts-list { display: flex; flex-direction: column; }
.popular-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.popular-item:last-child { border-bottom: none; padding-bottom: 0; }
.pop-number { font-size: 20px; font-weight: 800; color: var(--meta); min-width: 24px; text-align: center; line-height: 1; flex-shrink: 0; }
.popular-item:first-child .pop-number { color: var(--accent); }
.pop-content { display: flex; gap: 10px; flex: 1; min-width: 0; }
.pop-content .pop-thumb { flex-shrink: 0; width: 70px; height: 56px; border-radius: var(--radius); overflow: hidden; background: var(--border); }
.pop-content .pop-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.pop-content .pop-info { flex: 1; min-width: 0; }
.pop-title { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 3px; }
.pop-title a { color: var(--title); }
.pop-title a:hover { color: var(--title-hover); }
.pop-date { font-size: 11px; color: var(--meta); display: block; }

/* Categories */
.cat-list li { border-bottom: 1px solid var(--border); }
.cat-list li:last-child { border-bottom: none; }
.cat-list li a { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 14px; color: var(--text); transition: all .15s; }
.cat-list li a:hover { color: var(--accent); padding-left: 5px; }
.cat-num { background: #e2e8f0; color: #475569; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius); transition: all .15s; }
.cat-list li a:hover .cat-num { background: var(--accent); color: #fff; }

/* ===== WORDPRESS DEFAULT WIDGETS ===== */
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li { padding: 0; }
.widget ul li a { color: var(--text); font-size: 14px; transition: color .15s; text-decoration: none; }
.widget ul li a:hover { color: var(--accent); }

/* WP: Recent Posts */
.widget_recent_entries li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.widget_recent_entries li:last-child { border-bottom: none; }
.widget_recent_entries li .post-date { display: block; font-size: 12px; color: var(--meta); margin-top: 3px; }
.widget_recent_entries li::before { content: '\f285'; font-family: 'bootstrap-icons'; color: var(--accent); font-size: 12px; flex-shrink: 0; margin-top: 3px; }

/* WP: Categories */
.widget_categories ul { list-style: none; }
.widget_categories li { border-bottom: 1px solid var(--border); }
.widget_categories li:last-child { border-bottom: none; }
.widget_categories li a { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 14px; color: var(--text); transition: all .15s; }
.widget_categories li a:hover { color: var(--accent); padding-left: 5px; }
.widget_categories .cat-count { background: #e2e8f0; color: #475569; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius); transition: all .15s; }
.widget_categories li a:hover .cat-count { background: var(--accent); color: #fff; }

/* WP: Archives */
.widget_archive ul { list-style: none; }
.widget_archive li { border-bottom: 1px solid var(--border); }
.widget_archive li:last-child { border-bottom: none; }
.widget_archive li a { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; font-size: 14px; color: var(--text); transition: all .15s; }
.widget_archive li a:hover { color: var(--accent); padding-left: 5px; }
.widget_archive .count { background: #e2e8f0; color: #475569; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius); transition: all .15s; }
.widget_archive li a:hover .count { background: var(--accent); color: #fff; }

/* WP: Tag Cloud */
.widget_tag_cloud .tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.widget_tag_cloud .tagcloud a { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; font-size: 12px !important; color: var(--title); border: 1px solid var(--border); border-radius: var(--radius); transition: all .15s; font-weight: 500; }
.widget_tag_cloud .tagcloud a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* WP: Meta */
.widget_meta li { border-bottom: 1px solid var(--border); }
.widget_meta li:last-child { border-bottom: none; }
.widget_meta li a { display: flex; align-items: center; gap: 6px; padding: 10px 0; font-size: 14px; color: var(--text); transition: all .15s; }
.widget_meta li a:hover { color: var(--accent); padding-left: 5px; }
.widget_meta li a::before { content: '\f285'; font-family: 'bootstrap-icons'; font-size: 11px; color: var(--meta); }

/* WP: Recent Comments */
.widget_recent_comments li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: flex-start; font-size: 14px; color: var(--text); line-height: 1.4; }
.widget_recent_comments li:last-child { border-bottom: none; }
.widget_recent_comments li .comment-author-link a { color: var(--accent); font-weight: 600; }

/* WP: Pages */
.widget_pages li { border-bottom: 1px solid var(--border); }
.widget_pages li:last-child { border-bottom: none; }
.widget_pages li a { display: block; padding: 10px 0; font-size: 14px; color: var(--text); transition: all .15s; }
.widget_pages li a:hover { color: var(--accent); padding-left: 5px; }
.widget_pages ul ul { margin-left: 16px; margin-top: 4px; }
.widget_pages ul ul li { border-bottom: none; }
.widget_pages ul ul li a { font-size: 13px; padding: 6px 0; }

/* WP: Calendar */
.widget_calendar table { width: 100%; border-collapse: collapse; }
.widget_calendar caption { font-weight: 700; font-size: 14px; color: var(--title); padding-bottom: 10px; text-align: left; }
.widget_calendar th { font-size: 12px; font-weight: 600; color: var(--meta); padding: 8px 0; text-align: center; border-bottom: 1px solid var(--border); }
.widget_calendar td { text-align: center; padding: 8px 0; font-size: 13px; color: var(--text); }
.widget_calendar td a { color: var(--accent); font-weight: 600; }
.widget_calendar td a:hover { text-decoration: underline; }
.widget_calendar td.today { background: var(--accent); color: #fff; border-radius: var(--radius); font-weight: 700; }
.widget_calendar td.today a { color: #fff; }
.widget_calendar .pad { color: var(--meta); }
.widget_calendar tfoot td { border-top: 1px solid var(--border); }

/* WP: RSS */
.widget_rss li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.widget_rss li:last-child { border-bottom: none; }
.widget_rss li .rsswidget { font-weight: 600; color: var(--title); }
.widget_rss li .rss-date { display: block; font-size: 12px; color: var(--meta); margin-top: 3px; }
.widget_rss li .rss-summary { font-size: 13px; color: var(--text); margin-top: 4px; line-height: 1.4; }

/* WP: Search */
.widget_search .search-form { display: flex; }
.widget_search input[type="search"],
.widget_search input[type="text"] { flex: 1; padding: 14px 16px; border: none; outline: none; font-family: var(--font); font-size: 14px; color: var(--title); }
.widget_search input::placeholder { color: var(--meta); }
.widget_search button,
.widget_search input[type="submit"] { display: flex; align-items: center; padding: 0 16px; background: var(--accent); color: #fff; font-size: 16px; border: none; cursor: pointer; transition: background .15s; }
.widget_search button:hover,
.widget_search input[type="submit"]:hover { background: var(--accent-hover); }

/* WP: Text Widget */
.widget_text .textwidget { font-size: 14px; color: var(--text); line-height: 1.7; }
.widget_text .textwidget p { margin-bottom: 12px; }
.widget_text .textwidget p:last-child { margin-bottom: 0; }
.widget_text .textwidget a { color: var(--accent); }
.widget_text .textwidget a:hover { color: var(--accent-hover); }
.widget_text .textwidget img { max-width: 100%; height: auto; border-radius: var(--radius); margin-top: 10px; }

/* WP: Nav Menu Widget */
.widget_nav_menu ul { list-style: none; }
.widget_nav_menu li { border-bottom: 1px solid var(--border); }
.widget_nav_menu li:last-child { border-bottom: none; }
.widget_nav_menu li a { display: block; padding: 10px 0; font-size: 14px; color: var(--text); transition: all .15s; }
.widget_nav_menu li a:hover { color: var(--accent); padding-left: 5px; }
.widget_nav_menu ul ul { margin-left: 16px; margin-top: 4px; }
.widget_nav_menu ul ul li { border-bottom: none; }
.widget_nav_menu ul ul li a { font-size: 13px; padding: 6px 0; }

/* WP: Custom HTML */
.widget_custom_html { word-wrap: break-word; overflow-wrap: break-word; }
.widget_custom_html iframe { max-width: 100%; }

/* WP: Media Image */
.widget_media_image img { width: 100%; border-radius: var(--radius); }
.widget_media_image figcaption { font-size: 12px; color: var(--meta); margin-top: 6px; }

/* ===== SINGLE POST ===== */
.item-post { background: var(--card); padding: var(--post-pad, 32px); border-radius: var(--radius); box-shadow: var(--shadow); }
#breadcrumb { display: flex; align-items: center; gap: 2px; font-size: 14px; color: var(--accent); margin-bottom: 16px; flex-wrap: wrap; }
#breadcrumb a { color: var(--accent); }
#breadcrumb a:hover { opacity: .9; }
#breadcrumb .sep { color: var(--meta); }
#breadcrumb .sep::after { content: "\f285"; font-family: 'bootstrap-icons'; font-size: 10px; font-weight: 700; }
.item-post h1.entry-title { font-size: var(--entry-title, 36px); line-height: 1.25; margin-bottom: 14px; }
.post-header .entry-meta { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.align-left { display: flex; align-items: center; }
.entry-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 1px solid var(--accent); flex-shrink: 0; margin-right: 10px; }
.entry-avatar img { width: 100%; height: 100%; object-fit: cover; }
.al-items { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.author-name { font-weight: 700; color: var(--title); }
.post-thumbnail { margin-bottom: 24px; border-radius: var(--radius); overflow: hidden; }
.post-thumbnail img { width: 100%; }
#post-body { position: relative; font-family: var(--post-family, var(--font)); font-size: var(--post-font, 16px); line-height: var(--post-lh, 1.9); color: var(--text); }
#post-body p { margin-bottom: 24px; }
#post-body h1, #post-body h2, #post-body h3, #post-body h4, #post-body h5, #post-body h6 { color: var(--title); }
#post-body h2 { font-size: var(--post-h2, 24px); margin: 30px 0 15px; }
#post-body h3 { font-size: var(--post-h3, 20px); margin: 25px 0 12px; }
#post-body h4 { font-size: var(--post-h4, 17px); margin: 20px 0 10px; }
#post-body h5 { font-size: 15px; margin: 18px 0 8px; }
#post-body h6 { font-size: 14px; margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .5px; }
#post-body a { color: var(--accent); }
#post-body blockquote { background: rgba(15,23,42,.03); border-left: 4px solid var(--accent); padding: 25px; margin: 20px 0; border-radius: 0 var(--radius) var(--radius) 0; }

/* Article content lists — bullets & numbered lists must render inside post content */
#post-body ul, .entry-content ul, .comment-content ul { list-style: disc outside; margin: 0 0 24px; padding-left: 1.5em; }
#post-body ol, .entry-content ol, .comment-content ol { list-style: decimal outside; margin: 0 0 24px; padding-left: 1.5em; }
#post-body li, .entry-content li, .comment-content li { margin-bottom: 8px; }
#post-body ul ul, .entry-content ul ul, .comment-content ul ul { list-style: circle; margin-bottom: 0; }
#post-body ol ul, .entry-content ol ul, .comment-content ol ul { list-style: circle; margin-bottom: 0; }
#post-body ul ol, .entry-content ul ol, .comment-content ul ol { list-style: lower-roman; margin-bottom: 0; }
#post-body ol ol, .entry-content ol ol, .comment-content ol ol { list-style: lower-alpha; margin-bottom: 0; }

.entry-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 25px 0 0; }
.entry-labels a { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font-size: 12px; color: var(--title); border: 1px solid var(--border); border-radius: var(--radius); transition: all .15s; }
.entry-labels a:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===== SHARE BUTTONS ===== */
.share-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.share-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 36px; border-radius: var(--radius); color: #fff; font-size: 18px; transition: opacity .15s; }
.share-btn:hover { opacity: .85; color: #fff; }
.share-btn.fb { background: #3b5998; }
.share-btn.tw { background: #000; }
.share-btn.li { background: #0077b5; }
.share-btn.wa { background: #25d366; }
.share-btn.tg { background: #179cde; }

/* ===== COMMENT TRIGGER ===== */
.comment-trigger-wrap { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border); }
.comment-trigger-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; font-size: 14px; font-weight: 600; font-family: var(--font);
    color: #fff; background: var(--accent); border: none; border-radius: var(--radius);
    cursor: pointer; transition: all .2s; box-shadow: 0 2px 8px rgba(59,130,246,.3);
}
.comment-trigger-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59,130,246,.4); }
.comment-trigger-btn i { font-size: 16px; }
.comment-form-wrapper { display: none; margin-top: 20px; padding: 25px; background: rgba(241,245,249,.5); border-radius: var(--radius); border: 1px solid var(--border); }
.comment-form-wrapper.visible { display: block; }
.comment-form-wrapper .comment-respond { margin: 0; }
.comment-form-wrapper .comment-reply-title { font-size: 20px; margin-bottom: 15px; color: var(--title); }
.comment-form-wrapper #commentform { display: flex; flex-direction: column; gap: 12px; }
.comment-form-wrapper textarea,
.comment-form-wrapper input[type="text"],
.comment-form-wrapper input[type="email"],
.comment-form-wrapper input[type="url"] {
    width: 100%; padding: 12px 16px; font-family: var(--font); font-size: 14px;
    border: 1px solid var(--border); border-radius: var(--radius); outline: none;
    color: var(--title); background: var(--card); transition: border-color .15s;
}
.comment-form-wrapper textarea:focus,
.comment-form-wrapper input:focus { border-color: var(--accent); }
.comment-form-wrapper textarea { min-height: 120px; resize: vertical; }
.comment-form-wrapper .form-submit input[type="submit"] {
    display: inline-flex; align-items: center; padding: 12px 32px; font-family: var(--font);
    font-size: 14px; font-weight: 600; color: #fff; background: var(--accent);
    border: none; border-radius: var(--radius); cursor: pointer; transition: all .2s;
    align-self: flex-start;
}
.comment-form-wrapper .form-submit input[type="submit"]:hover { background: var(--accent-hover); }
.no-comments { color: var(--meta); font-size: 14px; padding: 20px 0; }

/* ===== AUTHOR BOX ===== */
.author-box { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 40px; overflow: hidden; border-top: 3px solid var(--accent); }
.author-box-inner { display: flex; gap: 24px; padding: 28px; align-items: flex-start; }
.author-box-avatar { flex-shrink: 0; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid var(--border); background: var(--body-bg); }
.author-box-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-box-info { flex: 1; min-width: 0; }
.author-box-label { display: block; font-size: 11px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.author-box-name { font-size: 18px; font-weight: 700; color: var(--title); margin-bottom: 8px; line-height: 1.3; }
.author-box-bio { font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 12px; }
.author-box-social { display: flex; gap: 8px; }
.author-box-social a { width: 32px; height: 32px; border-radius: 50%; background: rgba(59,130,246,.08); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 14px; transition: all .15s; text-decoration: none; }
.author-box-social a:hover { background: var(--accent); color: #fff; }

.related-posts { margin-top: 30px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.related-grid .post { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.related-grid .entry-thumbnail { height: auto; aspect-ratio: 16 / 9; overflow: hidden; background: var(--border); }
.related-grid .entry-thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.related-grid .entry-header { padding: 12px 14px; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-start; }
.related-grid .entry-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.related-grid .entry-title a { color: var(--title); }
.related-grid .entry-title a:hover { color: var(--title-hover); }

/* ===== BLOG LIST LAYOUTS ===== */
.index-blog { background: var(--card); padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Layout: List (Image Left + Text Right) — DEFAULT */
.blog-list { display: flex; flex-direction: column; }
.blog-list-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.blog-list-item:first-child { padding-top: 0; }
.blog-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.blog-list-thumb { flex-shrink: 0; width: 300px; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; display: block; background: var(--border); }
.blog-list-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.blog-list-item:hover .blog-list-thumb img { transform: scale(1.05); }
.blog-list-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.blog-list-cat { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; }
.blog-list-cat:hover { opacity: .85; }
.blog-list-title { font-size: 18px; font-weight: 700; line-height: 1.35; }
.blog-list-title a { color: var(--title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-list-title a:hover { color: var(--title-hover); }
.blog-list-excerpt { font-size: 14px; color: var(--text); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.blog-list-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--meta); margin-top: auto; }
.blog-list-meta span { display: flex; align-items: center; gap: 4px; }
.blog-list-meta i { font-size: 12px; }

/* Layout: Grid (3-Column Cards) */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-grid-item { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.blog-grid-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-grid-thumb { display: block; height: auto; aspect-ratio: 16 / 9; overflow: hidden; background: var(--border); }
.blog-grid-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.blog-grid-item:hover .blog-grid-thumb img { transform: scale(1.05); }
.blog-grid-body { padding: 14px 16px; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-start; }
.blog-grid-body .blog-list-title { font-size: 15px; }

/* Layout: Compact (Small Thumb + Title) */
.blog-compact { display: flex; flex-direction: column; }
.blog-compact-item { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.blog-compact-item:first-child { padding-top: 0; }
.blog-compact-item:last-child { border-bottom: none; padding-bottom: 0; }
.blog-compact-thumb { flex-shrink: 0; width: 96px; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; display: block; background: var(--border); }
.blog-compact-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .3s; }
.blog-compact-item:hover .blog-compact-thumb img { transform: scale(1.05); }
.blog-compact-body { flex: 1; min-width: 0; }
.blog-compact-body .blog-list-title { font-size: 14px; line-height: 1.4; margin-bottom: 4px; }

/* ===== ARCHIVE HEADER ===== */
.archive-header { background: var(--card); padding: 20px; margin: var(--gap) 0 0; border-radius: var(--radius); box-shadow: var(--shadow); }
.archive-header h1 { font-size: 24px; }
.archive-desc { color: var(--meta); margin-top: 5px; font-size: 14px; }

/* ===== PAGINATION ===== */
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 25px 0 5px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 14px; background: var(--card); color: var(--text); border-radius: var(--radius); font-size: 14px; font-weight: 500; box-shadow: var(--shadow); transition: all .15s; text-decoration: none; }
.pagination .page-numbers:hover,
.pagination .page-numbers.current { background: var(--accent); color: #fff; }

/* ===== NO POSTS ===== */
.no-posts { text-align: center; padding: 60px 20px; }
.no-posts h3 { font-size: 20px; margin-bottom: 8px; }
.no-posts p { color: var(--meta); }

/* ===== FOOTER ===== */
.site-footer { background: var(--footer-bg, #1e293b); margin-top: 36px; }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; padding: 36px 0 20px; }
.footer-col.about { padding-right: 20px; }
.footer-logo { font-size: 20px; font-weight: 700; color: #fff; display: inline-block; margin-bottom: 10px; text-decoration: none; }
.footer-logo:hover { color: #fff; opacity: .9; }
.footer-logo.has-logo { display: inline-block; width: 140px; height: 36px; color: transparent; font-size: 0; overflow: hidden; }
.footer-logo.has-logo::after { content: ''; display: block; width: 100%; height: 100%; background: var(--logo-img) no-repeat left center / contain; background-color: var(--footer-bg, #1e293b); background-blend-mode: screen; }
.footer-desc { color: var(--footer-text, #cbd5e1); font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); transition: all .15s; font-size: 13px; }
.footer-social a:hover { background: var(--accent); color: #fff; }
.footer-title { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; position: relative; height: 32px; display: flex; align-items: flex-end; }
.footer-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--accent); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0; }
.footer-links li a { color: var(--footer-text); font-size: 13px; transition: all .15s; display: flex; align-items: center; height: 30px; }
.footer-links li a:hover { color: #fff; padding-left: 4px; }
.footer-bar { background: var(--footer-bar, #0f172a); }
.footer-bar .container { padding-top: 0; padding-bottom: 0; }
.footer-bar-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 12px; flex-wrap: wrap; }
.footer-bar-inner p { color: rgba(255,255,255,.72); font-size: 12px; margin: 0; line-height: 1.5; }
.footer-bar-links { display: flex; gap: 16px; flex-shrink: 0; }
.footer-bar-links a { color: rgba(255,255,255,.5); font-size: 12px; }
.footer-bar-links a:hover { color: #fff; }

/* ===== MULTI-FOOTER SYSTEM (v10.7) ===== */

/* STYLE 2 — Minimal bar */
.footer-style-2 .footer-bar-main .footer-bar-inner { padding: 22px 0; }
.footer-style-2 .footer-bar-inner p { font-size: 13px; }

/* STYLE 3 — Centered */
.footer-centered { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0 28px; }
.footer-centered .footer-logo { font-size: 22px; margin-bottom: 10px; }
.footer-centered-desc { max-width: 620px; margin: 0 auto 18px; color: var(--footer-text); font-size: 13px; line-height: 1.7; }
.footer-centered .footer-social { justify-content: center; margin-bottom: 18px; }
.footer-centered .footer-newsletter { width: 100%; max-width: 480px; margin: 0 auto; text-align: left; }

/* STYLE 4 — Widget areas */
.footer-widget-cols { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.footer-widget-cols > * { min-width: 0; }

/* STYLE 5 — Newsletter focus */
.footer-newsletter-hero { text-align: center; padding: 40px 0 24px; }
.footer-newsletter-hero .footer-newsletter { max-width: 480px; margin: 0 auto; text-align: left; }
.footer-newsletter-hero .footer-title { text-align: center; }
.footer-newsletter-hero .footer-title::after { left: 50%; transform: translateX(-50%); }
.footer-newsletter-hero .footer-social { justify-content: center; margin-top: 22px; }

/* Newsletter form */
.footer-newsletter { margin-top: 6px; }
.footer-newsletter .footer-newsletter-desc { color: var(--footer-text); font-size: 12.5px; line-height: 1.6; margin-bottom: 12px; }
.footer-newsletter-form { display: flex; gap: 8px; }
.footer-newsletter-form input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; font-size: 13px; font-family: var(--font); outline: none; }
.footer-newsletter-form input::placeholder { color: rgba(255,255,255,.45); }
.footer-newsletter-form input:focus { border-color: var(--accent); }
.footer-newsletter-form button { height: 40px; padding: 0 16px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; border-radius: 8px; white-space: nowrap; transition: background .15s; }
.footer-newsletter-form button:hover { background: var(--accent-hover); }

/* STYLE 6 — Modern columns */
.footer-style-6 .footer-cols-4 { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 28px; }
.footer-bottom-list { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.footer-bottom-list li a { color: rgba(255,255,255,.5); font-size: 12px; transition: color .15s; }
.footer-bottom-list li a:hover { color: #fff; }

/* ===== BACK TO TOP ===== */
.back-to-top { position: fixed; bottom: 25px; right: 25px; width: 40px; height: 40px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s; z-index: 99; box-shadow: 0 4px 12px rgba(59,130,246,.4); }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent-hover); color: #fff; transform: translateY(-3px); }

/* ===== ACCESSIBILITY ===== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100%; left: 0; z-index: 9999; padding: 12px 20px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; transition: top .2s; }
.skip-link:focus { top: 0; color: #fff; }

*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== AD SYSTEM (v10.6 — Fast Loading + Lazy Load) ===== */

/* Ad label disclosure — required by AdSense policies and FTC guidelines */
.ad-label { display: block; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--meta, #94a3b8); margin-bottom: 6px; padding: 0; line-height: 1; }

/* Base ad slot — all positions */
.ad-slot { position: relative; margin: 24px auto; padding: 0; text-align: center; overflow: hidden; }
.ad-slot .adsbygoogle, .ad-slot ins, .ad-slot amp-ad, .ad-slot iframe { display: block; margin: 0 auto; max-width: 100%; }

/* Lazy-load: placeholder while ad code hasn't been injected yet */
.ad-lazy { content-visibility: auto; contain-intrinsic-size: 300px 250px; }
.ad-lazy .ad-placeholder { min-height: 250px; background: var(--body-bg, #f1f5f9); border: 1px dashed var(--border, #e2e8f0); border-radius: var(--radius, 8px); }
.ad-slot-content .ad-placeholder { min-height: 90px; }
.ad-slot-inarticle .ad-placeholder { min-height: 90px; }
.ad-slot-sidebar .ad-placeholder { min-height: 250px; }

/* After ad loads — remove placeholder, let content render */
.ad-active .ad-placeholder, .ad-active.ad-lazy .ad-placeholder { display: none; }

/* Below-fold ad slots: skip rendering until near viewport */
.ad-slot:not(.ad-active)[data-ad-status="pending"] { content-visibility: auto; contain-intrinsic-size: 0 300px; }

/* Content area ads — centered, constrained width */
.ad-slot-content { max-width: 728px; margin: 32px auto; }

/* In-article ads — between paragraphs */
.ad-slot-inarticle { max-width: 728px; margin: 28px auto; padding: 16px 0; border-top: 1px solid var(--border, #e2e8f0); border-bottom: 1px solid var(--border, #e2e8f0); }

/* Sidebar ads — full width of sidebar */
.ad-slot-sidebar { width: 100%; margin: 20px 0; min-height: 250px; }
.ad-slot-sidebar .adsbygoogle, .ad-slot-sidebar ins { width: 100% !important; }

/* Sticky bottom bar ad — initially hidden, injected by JS after delay */
.ad-slot-anchor { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: #fff; box-shadow: 0 -2px 12px rgba(0,0,0,.12); text-align: center; padding: 6px 0; max-height: 120px; overflow: hidden; transition: transform .3s ease; }
.ad-slot-anchor.hidden { transform: translateY(100%); pointer-events: none; }
.ad-slot-anchor .ad-label { margin-bottom: 4px; }
.ad-slot-anchor .adsbygoogle, .ad-slot-anchor ins { margin: 0 auto; }
.ad-anchor-close { position: absolute; top: 4px; right: 8px; background: 0 0; border: none; font-size: 20px; line-height: 1; color: var(--meta, #94a3b8); cursor: pointer; z-index: 10; padding: 2px 6px; opacity: .7; }
.ad-anchor-close:hover { opacity: 1; }

/* Anchor wrapper — invisible until JS loads it */
.ad-slot-anchor-wrap { display: none; }
.ad-slot-anchor { display: block; }

/* Post top ad — above title */
.ad-slot-post-top { margin-bottom: 20px; }

/* Header ad — below navigation */
.ad-slot-header { max-width: 728px; margin: 0 auto; padding: 10px 0; background: var(--card); border-bottom: 1px solid var(--border); }

/* Footer ad — above footer */
.ad-slot-footer { max-width: 728px; margin: 0 auto; padding: 20px 0; border-top: 1px solid var(--border); }

/* Post bottom ad — after content, before author box */
.ad-slot-post-bottom { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border, #e2e8f0); }

/* Homepage bottom ad — before footer */
.ad-slot-home-bottom { margin: 32px auto; max-width: 728px; }

/* Archive bottom ad — above pagination */
.ad-slot-archive-bottom { margin: 24px auto 0; max-width: 728px; }

/* AMP ad containers */
.amp-ad-slot { margin: 24px auto; padding: 0; text-align: center; min-height: 90px; }
.amp-ad-slot amp-ad { display: block; margin: 0 auto; max-width: 100%; }
.amp-ad-slot .ad-label { margin-bottom: 6px; }
.amp-ad-slot-content { max-width: 728px; }
.amp-ad-slot-sidebar { width: 100%; min-height: 250px; }

/* ===== RESPONSIVE AD SIZING ===== */

/* Desktop: leaderboard / banner sizes */
@media (min-width: 1024px) {
    .ad-slot-content { max-width: 728px; }
    .ad-slot-inarticle { max-width: 728px; }
    .ad-slot-home-bottom { max-width: 728px; }
    .ad-slot-sidebar { min-height: 600px; }
    .ad-slot-sidebar .adsbygoogle { min-height: 600px; }
}

/* Tablet */
@media (min-width: 681px) and (max-width: 1023px) {
    .ad-slot-content { max-width: 468px; margin: 24px auto; }
    .ad-slot-inarticle { max-width: 468px; margin: 20px auto; }
    .ad-slot-home-bottom { max-width: 468px; }
    .ad-slot-sidebar { min-height: 300px; }
}

/* Mobile: small banners */
@media (max-width: 680px) {
    .ad-slot-content { max-width: 100%; margin: 20px auto; padding: 0 10px; }
    .ad-slot-inarticle { max-width: 100%; margin: 16px auto; padding: 12px 0; }
    .ad-slot-home-bottom { max-width: 100%; margin: 20px auto; padding: 0 10px; }
    .ad-slot-header { max-width: 100%; padding: 8px 10px; }
    .ad-slot-footer { max-width: 100%; padding: 12px 10px; }
    .ad-slot-sidebar { min-height: 250px; }
    .ad-slot-sidebar .adsbygoogle { min-height: 250px; }
    .ad-label { font-size: 10px; }
    .ad-slot-anchor { max-height: 100px; }
    .ad-slot-sticky-float { position: static; }
}

/* Very small screens */
@media (max-width: 400px) {
    .ad-slot-content { margin: 16px auto; }
    .ad-slot-inarticle { margin: 12px auto; }
    .ad-slot .adsbygoogle, .ad-slot ins { min-height: auto; }
    .ad-slot-anchor { display: none; }
}

/* ===== SINGLE POST RESPONSIVE ===== */
@media (max-width: 680px) {
    .item-post .entry-meta { flex-direction: column; gap: 10px; align-items: flex-start; }
    .share-buttons { gap: 4px; }
    .share-btn { width: 34px; height: 32px; font-size: 16px; }
    .comment-trigger-btn { width: 100%; justify-content: center; }
    .footer-social a { width: 32px; height: 32px; }
}

@media (max-width: 480px) {
    .item-post { padding: 16px; }
    .entry-labels a { font-size: 11px; height: 20px; padding: 0 6px; }
}

/* ===== 404 ===== */
.not-found-content { text-align: center; padding: 80px 20px; }
.not-found-title { font-size: 72px; color: var(--accent); }

/* ===== PAGE ===== */
.page-content { background: var(--card); padding: 35px; border-radius: var(--radius); box-shadow: var(--shadow); margin: var(--gap) 0; }

/* ===== PAGE BUILDER / BLOCK EDITOR COMPATIBILITY ===== */
.entry-content .alignwide,
#post-body .alignwide,
.block-editor-writing-flow .alignwide,
.wp-block.alignwide { margin-left: auto; margin-right: auto; max-width: 100%; }

.alignfull,
.wp-block.alignfull,
.entry-content .alignfull,
#post-body .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignfull img, .wp-block.alignfull img, .alignfull iframe { width: 100%; max-width: 100%; }
.item-post > .alignfull,
.item-post .alignfull { margin-left: calc(-1 * var(--post-pad, 32px)); margin-right: calc(-1 * var(--post-pad, 32px)); width: auto; max-width: none; border-radius: 0; }
.item-post .alignfull img { border-radius: 0; }
.alignleft { float: left; margin-right: 20px; margin-bottom: 12px; }
.alignright { float: right; margin-left: 20px; margin-bottom: 12px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.entry-content > *,
#post-body > * { max-width: 100%; }

#post-body figure { margin: 0 0 24px; }
#post-body figure img { border-radius: var(--radius); }
#post-body .wp-block-image img { height: auto; }
#post-body .wp-block-embed iframe,
#post-body iframe, #post-body embed, #post-body video { max-width: 100%; border-radius: var(--radius); }
#post-body .wp-block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
#post-body .wp-block-gallery .blocks-gallery-item { margin: 0; }
#post-body .wp-block-quote { border-left: 4px solid var(--accent); margin: 20px 0; padding: 18px 20px; background: rgba(15,23,42,.03); border-radius: 0 var(--radius) var(--radius) 0; }
#post-body table { width: 100%; border-collapse: collapse; margin: 20px 0; }
#post-body th, #post-body td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
#post-body pre { background: var(--footer-bg); color: #fff; padding: 18px; border-radius: var(--radius); overflow: auto; }
#post-body code { background: rgba(15,23,42,.06); padding: 2px 6px; border-radius: 4px; font-size: .9em; }

/* Full Width page template (for page builders) */
.template-full-width .main-wrap { width: 100%; }
.template-full-width .item-post-full { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
.template-full-width .item-post-full h1.entry-title { padding: var(--gap) 0 0; }
.template-full-width.builder-active-template .container { max-width: none; padding: 0; }

/* Elementor Full Width template — zero theme container constraints */
.elementor-full-width-wrap { width: 100%; max-width: none; padding: 0; margin: 0; }
.elementor-full-width-wrap > .elementor { max-width: none; }

/* Elementor Canvas template — absolutely nothing but content */
.elementor-canvas-template .site-header,
.elementor-canvas-template .site-footer,
.elementor-canvas-template .site-outer,
.elementor-canvas-template .border-top { display: none !important; }
.elementor-canvas-wrap { width: 100%; min-height: 100vh; }
.elementor-canvas-wrap #main-content { width: 100%; }

/* No Sidebar template */
.template-no-sidebar .container-narrow { max-width: 800px; margin: 0 auto; }
.template-no-sidebar .main-full { width: 100%; }

/* No sidebar body class — collapse main to full width */
body.no-sidebar .content-flex { flex-direction: column; }
body.no-sidebar .main-wrap { width: 100%; }
body.no-sidebar .sidebar-wrap { display: none; }

/* Full-width body class */
body.full-width .content-wrap { padding: 0; }
body.full-width .content-flex { flex-direction: column; }
body.full-width .main-wrap { width: 100%; }
body.full-width .sidebar-wrap { display: none; }

/* Elementor / Divi / WPBakery / Bricks / Beaver helper spacing */
.elementor-section { max-width: 100%; overflow: hidden; }
.elementor img, .elementor .elementor-widget img { max-width: 100%; height: auto; }
.elementor-widget-wrap > .elementor-widget { max-width: 100%; }
.elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 10px; }

/* Prevent theme styles from overriding page builder global settings */
body.elementor-page .content-wrap { padding: 0; }
body.elementor-page .content-flex { flex-direction: column; }
body.elementor-page .main-wrap { width: 100%; }
body.elementor-page .sidebar-wrap { display: none; }
body.elementor-page .entry-title { display: none; }
body.elementor-page #breadcrumb { display: none; }

/* Builder containers: let them be full-width when needed */
.elementor-page .item-post,
.elementor-page .item-post-full { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }

/* ===== LARGE / ULTRA-WIDE SCREENS ===== */
@media (min-width: 1600px) {
    .cs-hero { height: 440px; }
    .hero-link { height: 430px; }
    .featured-grid .grid-thumb { height: 215px; }
    .container { max-width: var(--container-w, 1200px); }
}

/* ===== RESPONSIVE: 1030px ===== */
@media (max-width: 1030px) {
    .main-wrap { width: calc(70% - var(--gap)); }
    .sidebar-wrap { width: 30%; }
    .block-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== RESPONSIVE: 880px ===== */
@media (max-width: 880px) {
    .main-nav { display: none; }
    .mobile-menu-toggle { display: flex; }
    .slide-menu { display: flex; }
    .flex-left { gap: 0; overflow: hidden; }
    .content-flex { flex-direction: column; }
    .main-wrap { width: 100%; }
    .sidebar-wrap { width: 100%; margin: var(--gap) 0 0; }
    .sidebar-sticky { position: static; }
    .featured-items { grid-template-columns: 1fr; }
    .cs-hero { height: 340px; }
    .featured-grid .grid-card { height: auto; }
    .featured-grid .grid-thumb { flex: none; height: 210px; }
    .featured-grid .post { height: auto; }
    .featured-more { grid-template-columns: repeat(2, 1fr); }
    .block-layout { grid-template-columns: 1fr; }
    .block-list { height: auto; justify-content: flex-start; gap: 25px; }
    .block-list .list-item { flex: 0 0 auto; align-items: flex-start; }
    .footer-main { grid-template-columns: 1fr; gap: 0; padding: 28px 0 16px; }
    .footer-col { text-align: center; padding: 0 0 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
    .footer-col:last-child { border-bottom: none; padding-bottom: 0; }
    .footer-col.about { padding-right: 0; }
    .footer-logo { text-align: center; margin-bottom: 8px; }
    .footer-logo.has-logo { margin: 0 auto 8px; }
    .footer-desc { margin-bottom: 10px; }
    .footer-social { justify-content: center; }
    .footer-title { justify-content: center; height: auto; }
    .footer-title::after { left: 50%; transform: translateX(-50%); }
    .footer-links li a { justify-content: center; }
    .footer-bar .container { padding-top: 0; padding-bottom: 0; }
    .footer-bar-inner { justify-content: center; text-align: center; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-list-item { gap: 16px; }
    .blog-list-thumb { width: 240px; height: auto; aspect-ratio: 16 / 9; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .block-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .block-grid-cards { grid-template-columns: repeat(2, 1fr); }
    .feature-cards { grid-template-columns: 1fr; }
    .feature-cards .fc-feature .hero-link { min-height: 0; height: 400px; }
    .block-hero-full .hero-link { height: 300px; }
    .search-on .search-box { width: 90%; }
}

/* ===== RESPONSIVE: MULTI-HEADER / MULTI-FOOTER (v10.7) ===== */
@media (max-width: 880px) {
    .header-inline-search { display: none; }
    .header-style-2 .hst2-items { justify-content: space-between; gap: 0; }
    .header-style-2 .hst2-items .flex-left { flex: 0; }
    .header-style-2 .hst2-logo { flex: 1; }
    .header-style-2 .hst2-items .flex-right { flex: none; justify-content: flex-end; }
    .header-style-3 .header-items { gap: 0; }
    .header-style-4 .header-items, .header-style-5 .header-items, .header-style-7 .header-items { gap: 0; }
    .header-style-4 .flex-right, .header-style-5 .flex-right, .header-style-7 .flex-right { flex: 1 1 0; justify-content: flex-end; }
    .header-topbar-inner { justify-content: center; }
    .htb-left { display: none; }
    .htb-right .header-social { display: none; }
    .footer-style-6 .footer-cols-4 { grid-template-columns: 1fr 1fr; gap: 22px; }
    .footer-centered { padding: 32px 0 22px; }
    .footer-newsletter-hero { padding: 32px 0 20px; }
}

@media (max-width: 480px) {
    .header-cta-btn { display: none; }
    .footer-style-6 .footer-cols-4 { grid-template-columns: 1fr; gap: 0; }
    .footer-newsletter-form { flex-direction: column; }
    .footer-newsletter-form button { width: 100%; }
}

/* ===== RESPONSIVE: 680px ===== */
@media (max-width: 680px) {
    .site-footer { margin-top: 30px; }
    .cs-hero, .hero-link { height: 260px; }
    .cs-title { font-size: 20px; }
    .featured-grid .grid-thumb { height: 150px; }
    .featured-grid .grid-title { font-size: 15px; }
    .featured-grid .grid-info { padding: 14px; }
    .block-layout { grid-template-columns: 1fr; }
    .hero-link { height: 240px; }
    .list-thumb { width: 100px; height: auto; aspect-ratio: 16 / 9; }
    .list-title { font-size: 15px; }
    .list-info { min-width: 0; }
    .item-post h1.entry-title { font-size: 28px; }
    .post-header .entry-meta { flex-direction: column; gap: 8px; align-items: flex-start; }
    .block-hero-full .hero-link { height: 230px; }
    .feature-cards .fc-feature .hero-link { height: 240px; }
    .list-row-item { flex-direction: column; gap: 12px; }
    .list-row-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .list-row-title { font-size: 17px; }
    .footer-main { padding: 28px 0 16px; gap: 20px; }
    .footer-desc { font-size: 13px; margin-bottom: 12px; }
    .trending-bar { margin: 20px 0 0; }
    .trending-inner { padding: 12px 16px; }
    .featured-section { margin: 20px 0; }
    .content-wrap { margin: 20px 0 0; }
    .block-section { margin-bottom: 24px; }
    .title-wrap .block-title { font-size: 17px; }
    .author-box-inner { flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; gap: 16px; }
    .author-box-avatar { width: 72px; height: 72px; }
    .author-box-social { justify-content: center; }
}

/* ===== RESPONSIVE: 480px ===== */
@media (max-width: 480px) {
    :root { --gap: 20px; --header-h: 56px; }
    .header-style-2, .header-style-3, .header-style-4, .header-style-5, .header-style-6, .header-style-7, .header-style-8 { --header-h: 58px; }
    .header-style-2 .main-logo .site-title-link, .header-style-2 .main-logo .custom-logo-link { font-size: 22px; }
    .container { padding: 0 14px; }
    .site-header .container { padding: 0 14px; }
    .site-title-link { font-size: 22px !important; }
    .featured-items, .featured-grid { gap: 16px; }
    .featured-items { margin: 16px 0; }
    .featured-grid .grid-thumb { height: 140px; }
    .featured-grid .grid-info { padding: 12px; }
    .featured-more { grid-template-columns: 1fr; }
    .cs-hero, .hero-link { height: 220px; }
    .cs-title { font-size: 18px; }
    .hero-link .cs-title { font-size: 18px; }
    .hero-link .cs-content { padding: 14px; }
    .list-thumb { width: 90px; height: auto; aspect-ratio: 16 / 9; }
    .list-title { font-size: 14px; }
    .list-item { gap: 10px; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-list-item { flex-direction: column; gap: 12px; }
    .blog-list-thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
    .blog-list-title { font-size: 16px; }
    .related-grid { grid-template-columns: 1fr 1fr; }
    .block-grid-cards { grid-template-columns: 1fr; }
    .block-grid-3 { grid-template-columns: 1fr; }
    .block-grid-2 { grid-template-columns: 1fr; }
    .numbered-list, .compact-list { grid-template-columns: 1fr; }
    .block-hero-full .hero-link { height: 200px; }
    .list-row-thumb { height: auto; aspect-ratio: 16 / 9; }
    .list-row-title { font-size: 16px; }
    .item-post h1.entry-title { font-size: 24px; }
    .footer-main { grid-template-columns: 1fr; gap: 0; padding: 20px 0 12px; }
    .footer-col { padding: 0 0 16px; }
    .footer-logo { font-size: 18px; }
    .footer-logo.has-logo { width: 120px; height: 30px; }
    .footer-title { font-size: 13px; margin-bottom: 8px; }
    .footer-links li a { font-size: 12px; height: 28px; }
    .footer-bar .container { padding-top: 0; padding-bottom: 0; }
    .search-on .search-box { width: 95%; padding: 0; }
    .search-form { height: 56px; }
    .search-input { font-size: 15px; padding: 0 14px; }
    .sidebar-sticky { gap: 20px; }
    .widget { padding: 16px; }
    .block-section { margin-bottom: 20px; }
    .author-box-inner { padding: 20px 16px; }
    .author-box-avatar { width: 64px; height: 64px; }
    .author-box-name { font-size: 16px; }
}

/* ===== RESPONSIVE: 380px ===== */
@media (max-width: 380px) {
    :root { --gap: 16px; }
    .container { padding: 0 12px; }
    .site-header .container { padding: 0 12px; }
    .cs-hero, .hero-link { height: 190px; }
    .featured-grid .grid-thumb { height: 120px; }
    .featured-grid .grid-title { font-size: 14px; }
    .hero-link { height: 190px; }
    .list-thumb { width: 80px; height: auto; aspect-ratio: 16 / 9; }
    .list-title { font-size: 13px; }
    .item-post h1.entry-title { font-size: 22px; }
    .related-grid { grid-template-columns: 1fr; }
    .related-grid .entry-thumbnail { height: auto; aspect-ratio: 16 / 9; }
    .related-grid .entry-title { font-size: 14px; }
    .footer-main { padding: 16px 0 10px; }
    .footer-col { padding: 0 0 12px; }
    .footer-logo { font-size: 16px; }
    .footer-logo.has-logo { width: 100px; height: 26px; }
    .footer-bar-inner { flex-direction: column; gap: 6px; }
}

/* ===== V10 LAYOUTS RESPONSIVE ===== */
@media (max-width: 880px) {
    .masonry-grid { columns: 2; }
    .pin-grid { columns: 2; }
    .editorial-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
    .hc-wrap { grid-template-columns: 1fr; }
    .hc-hero .hero-link { height: 380px; }
    .mag-lead { grid-template-columns: 1fr; }
    .mag-lead-body { padding: 0 18px 18px; }
    .mag-cols { columns: 1; }
    .showcase-grid { grid-template-columns: 1fr; }
    .showcase-feature .hero-link { height: 380px; }
    .showcase-side { grid-template-columns: repeat(2, 1fr); }
    .overlay-grid { grid-template-columns: repeat(2, 1fr); }
    .minimal-grid { grid-template-columns: repeat(2, 1fr); gap: 0 30px; }
}

@media (max-width: 680px) {
    .featured-slider .fs-link { height: 260px; }
    .fs-content { padding: 18px; }
    .fs-title { font-size: 22px; }
    .fs-nav { width: 38px; height: 38px; font-size: 18px; }
    .fs-prev { left: 10px; }
    .fs-next { right: 10px; }
    .carousel-wrap .c-card { flex-basis: 260px; }
    .mcar-row .c-card { flex-basis: 220px; }
    .breaking-panel { grid-template-columns: 1fr; }
    .breaking-label { padding: 10px 14px; justify-content: center; }
    .tab-list { grid-template-columns: 1fr; }
    .tab-thumb { width: 110px; }
}

@media (max-width: 480px) {
    .masonry-grid, .pin-grid { columns: 1; }
    .editorial-grid { grid-template-columns: 1fr; grid-auto-rows: 160px; }
    .ed-feature { grid-column: span 1; grid-row: span 1; }
    .ed-feature .ed-title { font-size: 18px; }
    .hc-hero .hero-link { height: 240px; }
    .showcase-feature .hero-link { height: 240px; }
    .showcase-side { grid-template-columns: 1fr; }
    .overlay-grid { grid-template-columns: 1fr; }
    .minimal-grid { grid-template-columns: 1fr; }
    .tl-thumb { display: none; }
    .featured-slider .fs-link { height: 220px; }
    .fs-title { font-size: 19px; }
    .fs-dots { right: 12px; bottom: 12px; }
    .fs-content { padding: 14px; }
    .c-nav { display: none; }
}

/* ===== MOBILE TOUCH-FRIENDLY ===== */
@media (max-width: 680px) {
    a, button { min-height: 44px; }
    .search-toggle, .mobile-menu-toggle { width: 44px; height: 44px; }
    .nav-list li a { height: 48px; padding: 0 4px; }
    .ticker-next { width: 36px; height: 36px; }
    .back-to-top { width: 44px; height: 44px; bottom: 20px; right: 16px; }
    .view-all { padding: 8px 0; min-height: 44px; }
    .blog-list-item { padding: 14px 0; }
    .sidebar-search input { padding: 12px 14px; font-size: 16px; }
    .sidebar-search button { min-width: 48px; }
    .search-form { height: 56px; padding: 6px; }
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { -webkit-tap-highlight-color: transparent; }
* { -webkit-tap-highlight-color: transparent; }