/* =============================================================================
   redesign.css — TUI v2 design system, loaded AFTER style.css
   =============================================================================
   This file delivers the new design without touching the 5,374-line legacy
   style.css. Everything here is namespaced under .tuiv2-* classes (or scoped
   to brand-new elements) so it cannot accidentally restyle existing pages.
   Only opt-in: pages that load this file AND use the new classes get the
   new look. Untouched pages keep working exactly as before.

   Loaded by: partials/header.php (so it's available everywhere), but the
   classes only activate when the new templates emit them.
   ========================================================================= */

/* ── Design tokens ────────────────────────────────────────────────────── */
:root {
    --tuiv2-brand-1: #8A3258;          /* purple — matches existing dropdown */
    --tuiv2-brand-2: #016598;          /* blue   — matches existing dropdown */
    --tuiv2-brand-3: #0083C1;          /* lighter blue */
    --tuiv2-brand-gradient: linear-gradient(135deg, var(--tuiv2-brand-1) 0%, var(--tuiv2-brand-2) 60%, var(--tuiv2-brand-3) 100%);
    --tuiv2-saffron: #F99410;          /* existing brand accent */
    --tuiv2-saffron-dark: #B35735;
    --tuiv2-breaking: #C62828;
    --tuiv2-trust-green: #1B7A3E;
    --tuiv2-whatsapp: #25D366;
    --tuiv2-ink: #111827;
    --tuiv2-ink-2: #374151;
    --tuiv2-muted: #6B7280;
    --tuiv2-line: #E5E7EB;
    --tuiv2-bg-soft: #F5F4EF;
    --tuiv2-bg-card: #FFFFFF;
    --tuiv2-radius: 8px;
    --tuiv2-radius-lg: 12px;
    --tuiv2-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --tuiv2-shadow-md: 0 4px 14px rgba(0,0,0,.08);

    /* Category accent colours (for pills/labels — must match the colour
       you set on .tuiv2-cat-* helpers below) */
    --tuiv2-cat-environment: #1B7A3E;
    --tuiv2-cat-technology:  #2563EB;
    --tuiv2-cat-government:  #6D28D9;
    --tuiv2-cat-economy:     #B45309;
    --tuiv2-cat-social:      #BE185D;
    --tuiv2-cat-sports:      #DC2626;
    --tuiv2-cat-entertainment:#7C3AED;
    --tuiv2-cat-recent:      #0F766E;
}

/* Display font is opt-in. Loaded once via <link> from header.php redesign
   block; if it's not loaded yet, .tuiv2-display falls back to a serif stack
   that still renders correctly without breaking the page. */
.tuiv2-display {
    font-family: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* =============================================================================
   GLOBAL HEADER REDESIGN
   Wraps the existing PHP logic (categories loop, viewer dropdown, language
   switcher) in a brand-new visual shell. All required IDs/classes referenced
   by legacy JS (#burger, #clock, #tui-flag, #tui-country-code, #tui-weather,
   #google_translate_element, #btn-en, #btn-hi, .subMenu, .vImg) are still
   emitted by the new template, so the existing scripts keep working.
   ========================================================================= */

/* Reset any stray margin the old <header> CSS might apply */
header.tuiv2-header {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    display: block;
}

/* ── A. Topbar (geo + date + lang + socials) ─────────────────────────── */
.tuiv2-topbar {
    background: #111827;
    color: #D1D5DB;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 12.5px;
}
.tuiv2-topbar__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.tuiv2-topbar__left,
.tuiv2-topbar__right {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tuiv2-topbar__flag { width: 18px; height: auto; border-radius: 2px; }
.tuiv2-topbar__weather { color: #9CA3AF; }
.tuiv2-topbar__right a {
    color: #9CA3AF;
    text-decoration: none;
    transition: color .15s ease;
    font-size: 14px;
}
.tuiv2-topbar__right a:hover { color: #fff; }
.tuiv2-lang-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    color: #D1D5DB;
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 11.5px;
    cursor: pointer;
    font-family: inherit;
}
.tuiv2-lang-btn.active { background: var(--tuiv2-saffron); color: #1f1300; border-color: var(--tuiv2-saffron); }

/* ── B. Main header band (logo + search + login) ─────────────────────── */
.tuiv2-mainhead {
    background: var(--tuiv2-brand-gradient);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.tuiv2-mainhead__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}
.tuiv2-brand {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: #fff;
}
.tuiv2-brand img {
    width: 52px; height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
}
.tuiv2-brand h1 {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}
.tuiv2-brand small {
    display: block;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
    margin-top: 2px;
}
.tuiv2-search {
    display: flex; align-items: center;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    padding: 4px 14px;
    max-width: 460px;
    width: 100%;
    margin: 0 auto;
}
.tuiv2-search i { color: rgba(255,255,255,.75); margin-right: 8px; font-size: 13px; }
.tuiv2-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    padding: 8px 0;
}
.tuiv2-search input::placeholder { color: rgba(255,255,255,.6); }
.tuiv2-user-actions {
    display: flex; align-items: center; gap: 10px;
}
.tuiv2-loginbtn {
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.32);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 6px;
}
.tuiv2-loginbtn:hover { background: rgba(255,255,255,.22); color: #fff; }

/* User avatar dropdown — wraps existing .viewer markup */
.tuiv2-mainhead .viewer { width: auto; height: auto; }
.tuiv2-mainhead .viewer .vImg {
    width: 38px; height: 38px;
    border: 2px solid rgba(255,255,255,.4);
}

/* Mobile burger */
.tuiv2-burger {
    display: none;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.3);
    width: 38px; height: 38px;
    border-radius: 8px;
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (max-width: 980px) {
    .tuiv2-mainhead__inner {
        grid-template-columns: auto 1fr auto;
    }
    .tuiv2-search { display: none; }
    .tuiv2-brand small { display: none; }
    .tuiv2-brand h1 { font-size: 18px; }
}
@media (max-width: 640px) {
    .tuiv2-burger { display: inline-flex; }
    .tuiv2-loginbtn { padding: 6px 10px; font-size: 12px; }
}

/* ── C. Nav bar (inline horizontal categories) ───────────────────────── */
.tuiv2-nav {
    background: #fff;
    border-bottom: 1px solid var(--tuiv2-line);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.tuiv2-nav__inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.tuiv2-nav__inner::-webkit-scrollbar { display: none; }
.tuiv2-nav__inner a {
    color: var(--tuiv2-ink);
    text-decoration: none;
    padding: 14px 14px;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.tuiv2-nav__inner a:hover {
    color: var(--tuiv2-brand-2);
    border-bottom-color: var(--tuiv2-brand-2);
}
.tuiv2-nav__inner a.is-active {
    color: var(--tuiv2-brand-2);
    border-bottom-color: var(--tuiv2-brand-2);
}
.tuiv2-nav__trending {
    color: var(--tuiv2-saffron-dark) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
}
.tuiv2-nav__spacer { flex: 1; }
.tuiv2-nav__advertise {
    color: var(--tuiv2-brand-2) !important;
    font-size: 12.5px !important;
}
@media (max-width: 640px) {
    .tuiv2-nav__inner a { padding: 11px 10px; font-size: 12px; letter-spacing: 0.04em; }
    .tuiv2-nav__spacer { display: none; }
}

/* ── D. Hide legacy header chrome when v2 header is active ────────────
   We render the v2 markup BEFORE the legacy markup and set body class
   .tuiv2-active. Legacy `header > .top-bar`, the old logo anchor and
   `.nav` would otherwise also render. We don't display:none arbitrary
   content (SEO rule 22) — but the LEGACY DUPLICATE header is brand-new
   markup we're emitting only to keep existing JS targets alive. Those
   targets are MOVED into the new header now, so we don't render the
   legacy duplicates at all in the PHP (see header.php). This block is
   defensive only, for any leftover top-level `.top-bar`/`.lang-switch`. */
body.tuiv2-active > header > .top-bar,
body.tuiv2-active > header > .lang-switch,
body.tuiv2-active > header > .nav,
body.tuiv2-active > header > a.logo {
    display: none !important;
}

/* =============================================================================
   FOOTER v2 (minimal — preserves existing PHP loop, restyles container)
   ========================================================================= */
body.tuiv2-active .footer-main-container {
    background: #0F172A;
    color: #D1D5DB;
    margin-top: 40px;
}
body.tuiv2-active .footer-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 20px 20px;
}
body.tuiv2-active .top-footer-container {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 28px;
    align-items: start;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
body.tuiv2-active .left-footer { color: #D1D5DB; }
body.tuiv2-active .left-footer .comp-logo img {
    width: 56px; height: 56px; border-radius: 50%; background: #fff;
    object-fit: cover; margin-bottom: 12px;
}
body.tuiv2-active .left-footer p {
    font-size: 13px; line-height: 1.6; color: #9CA3AF; margin: 0;
}
body.tuiv2-active .mid-footer {
    display: contents;                  /* let the 4-col grid place each .section */
}
body.tuiv2-active .mid-footer .section {
    display: flex; flex-direction: column; gap: 8px;
}
body.tuiv2-active .mid-footer .section a {
    color: #9CA3AF; text-decoration: none;
    transition: color .15s ease;
    font-size: 13.5px;
}
body.tuiv2-active .mid-footer .section a p { margin: 0; }
body.tuiv2-active .mid-footer .section a:hover { color: #fff; }
body.tuiv2-active .right-footer {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 22px;
    margin-top: 8px;
}
body.tuiv2-active .right-footer .social-media-links {
    display: flex; gap: 12px; justify-content: flex-start;
}
body.tuiv2-active .social-media-links a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #D1D5DB;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    font-size: 14px;
    transition: background .15s ease;
}
body.tuiv2-active .social-media-links a:hover { background: rgba(255,255,255,.16); color: #fff; }
body.tuiv2-active .bottom-footer-container {
    display: flex; justify-content: space-between;
    align-items: center;
    padding: 16px 0 0;
    color: #6B7280;
    font-size: 12.5px;
    flex-wrap: wrap; gap: 10px;
}
body.tuiv2-active .bottom-footer-container a { color: #9CA3AF; text-decoration: none; }
body.tuiv2-active .bottom-footer-container a:hover { color: #fff; }
@media (max-width: 900px) {
    body.tuiv2-active .top-footer-container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    body.tuiv2-active .top-footer-container { grid-template-columns: 1fr; }
}

/* ── 1. Breaking-news ticker ──────────────────────────────────────────── */
.tuiv2-ticker {
    display: flex;
    align-items: center;
    background: var(--tuiv2-breaking);
    color: #fff;
    width: 100%;
    overflow: hidden;
    height: 38px;                       /* fixed → reserves space, prevents CLS */
    font-size: 14px;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    border-top: 1px solid rgba(255,255,255,.15);
}
.tuiv2-ticker__label {
    background: rgba(0,0,0,.18);
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    flex-shrink: 0;
    text-transform: uppercase;
    font-size: 12px;
}
.tuiv2-ticker__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,.7);
    animation: tuiv2-pulse 1.6s infinite;
}
@keyframes tuiv2-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
    70%  { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.tuiv2-ticker__track {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.tuiv2-ticker__scroll {
    display: flex;
    gap: 36px;
    padding-left: 100%;
    animation: tuiv2-marquee 45s linear infinite;
    white-space: nowrap;
    align-items: center;
    height: 100%;
}
.tuiv2-ticker__scroll a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}
.tuiv2-ticker__scroll a:hover { text-decoration: underline; }
.tuiv2-ticker__sep {
    color: rgba(255,255,255,.6);
    font-size: 8px;
}
@keyframes tuiv2-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .tuiv2-ticker__scroll { animation: none; padding-left: 16px; }
    .tuiv2-ticker__dot   { animation: none; }
}

/* ── 2. Trust strip (homepage) ────────────────────────────────────────── */
.tuiv2-trust {
    background: #fff;
    border-bottom: 1px solid var(--tuiv2-line);
    padding: 10px 16px;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 13px;
    color: var(--tuiv2-ink-2);
}
.tuiv2-trust__row {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    align-items: center;
    justify-content: center;
}
.tuiv2-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tuiv2-trust__item i { color: var(--tuiv2-trust-green); }
.tuiv2-trust__cta {
    color: var(--tuiv2-brand-2);
    font-weight: 700;
    text-decoration: none;
    margin-left: auto;
}
.tuiv2-trust__cta:hover { text-decoration: underline; }

/* ── 3. Hero grid (homepage) ──────────────────────────────────────────── */
.tuiv2-hero {
    max-width: 1240px;
    margin: 24px auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 20px;
}
.tuiv2-hero__main {
    position: relative;
    border-radius: var(--tuiv2-radius-lg);
    overflow: hidden;
    aspect-ratio: 16/10;
    background: #1f2937;
    min-height: 380px;             /* CLS reservation */
}
.tuiv2-hero__main img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.tuiv2-hero__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 24px 22px;
    background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.0) 100%);
    color: #fff;
}
.tuiv2-hero__cat {
    display: inline-block;
    background: var(--tuiv2-cat-environment);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.tuiv2-hero__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(22px, 2.4vw, 34px);
    line-height: 1.2;
    margin: 0 0 6px;
    font-weight: 700;
}
.tuiv2-hero__title a { color: #fff; text-decoration: none; }
.tuiv2-hero__title a:hover { text-decoration: underline; }
.tuiv2-hero__meta {
    font-size: 13px;
    opacity: .9;
}
.tuiv2-hero__side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tuiv2-hero__sidecard {
    background: #fff;
    border-radius: var(--tuiv2-radius);
    overflow: hidden;
    box-shadow: var(--tuiv2-shadow-sm);
    display: flex;
    flex-direction: column;
    min-height: 178px;             /* CLS reservation */
}
.tuiv2-hero__sidecard img {
    width: 100%; aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.tuiv2-hero__sidecard-body { padding: 12px 14px 14px; }
.tuiv2-hero__sidecard .tuiv2-hero__cat {
    background: transparent;
    color: var(--tuiv2-cat-technology);
    padding: 0;
    margin-bottom: 4px;
}
.tuiv2-hero__sidecard h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.35;
    margin: 0 0 6px;
    color: var(--tuiv2-ink);
    font-weight: 700;
}
.tuiv2-hero__sidecard h3 a { color: inherit; text-decoration: none; }
.tuiv2-hero__sidecard h3 a:hover { color: var(--tuiv2-brand-2); }
.tuiv2-hero__sidecard small { color: var(--tuiv2-muted); font-size: 12px; }
@media (max-width: 900px) {
    .tuiv2-hero { grid-template-columns: 1fr; }
    .tuiv2-hero__main { min-height: 260px; aspect-ratio: 16/9; }
}

/* ── 4. Category section block ────────────────────────────────────────── */
.tuiv2-section {
    max-width: 1240px;
    margin: 32px auto;
    padding: 0 16px;
}
.tuiv2-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--tuiv2-line);
    padding-bottom: 10px;
    margin-bottom: 18px;
}
.tuiv2-section__title {
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    color: var(--tuiv2-ink);
    border-left: 4px solid var(--tuiv2-brand-2);
    padding-left: 12px;
}
.tuiv2-section__viewall {
    color: var(--tuiv2-brand-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.tuiv2-section__viewall:hover { text-decoration: underline; }

.tuiv2-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) { .tuiv2-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tuiv2-cards { grid-template-columns: 1fr; } }

.tuiv2-card {
    background: #fff;
    border-radius: var(--tuiv2-radius);
    overflow: hidden;
    box-shadow: var(--tuiv2-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
    min-height: 320px;
}
.tuiv2-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tuiv2-shadow-md);
}
.tuiv2-card__img-wrap {
    position: relative;
    aspect-ratio: 16/9;
    background: #f3f4f6;
}
.tuiv2-card__img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.tuiv2-card__cat {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--tuiv2-cat-technology);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 8px;
    border-radius: 3px;
    text-transform: uppercase;
}
.tuiv2-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tuiv2-card__title {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--tuiv2-ink);
}
.tuiv2-card__title a { color: inherit; text-decoration: none; }
.tuiv2-card__title a:hover { color: var(--tuiv2-brand-2); }
.tuiv2-card__excerpt {
    font-size: 13.5px;
    color: var(--tuiv2-ink-2);
    margin: 0 0 12px;
    line-height: 1.5;
    flex: 1;
}
.tuiv2-card__meta {
    font-size: 12px;
    color: var(--tuiv2-muted);
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: auto;
}

/* ── 5. Trending pills (homepage) ────────────────────────────────────── */
.tuiv2-trending {
    max-width: 1240px;
    margin: 24px auto;
    padding: 0 16px;
}
.tuiv2-trending__row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    align-items: center;
    scrollbar-width: thin;
}
.tuiv2-trending__label {
    color: var(--tuiv2-saffron);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.tuiv2-trending__pill {
    background: #fff;
    border: 1px solid var(--tuiv2-line);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--tuiv2-ink-2);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color .15s ease, color .15s ease;
}
.tuiv2-trending__pill:hover {
    border-color: var(--tuiv2-saffron);
    color: var(--tuiv2-saffron-dark);
}

/* ── 6. Advertise strip (homepage) ────────────────────────────────────── */
.tuiv2-advstrip {
    max-width: 1240px;
    margin: 40px auto;
    padding: 28px 24px;
    background: var(--tuiv2-brand-gradient);
    color: #fff;
    border-radius: var(--tuiv2-radius-lg);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
}
.tuiv2-advstrip__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    margin: 0 0 6px;
    font-weight: 700;
}
.tuiv2-advstrip__sub {
    margin: 0;
    opacity: .9;
    font-size: 14px;
}
.tuiv2-advstrip__cta {
    background: #fff;
    color: var(--tuiv2-brand-2);
    padding: 12px 22px;
    border-radius: var(--tuiv2-radius);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: transform .15s ease;
}
.tuiv2-advstrip__cta:hover { transform: translateY(-1px); color: var(--tuiv2-brand-1); }
@media (max-width: 640px) {
    .tuiv2-advstrip { grid-template-columns: 1fr; text-align: center; }
}

/* ── 7. Newsletter card (homepage) ───────────────────────────────────── */
.tuiv2-newsletter {
    max-width: 1240px;
    margin: 32px auto;
    padding: 32px 24px;
    background: #0F172A;
    color: #fff;
    border-radius: var(--tuiv2-radius-lg);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: center;
}
.tuiv2-newsletter h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    margin: 0 0 8px;
}
.tuiv2-newsletter p { margin: 0; opacity: .85; font-size: 14px; }
.tuiv2-newsletter form {
    display: flex; gap: 8px;
}
.tuiv2-newsletter input[type=email] {
    flex: 1; padding: 12px 14px; border-radius: var(--tuiv2-radius);
    border: 0; font-size: 14px;
}
.tuiv2-newsletter button {
    background: var(--tuiv2-saffron);
    color: #1f1300;
    border: 0;
    padding: 12px 18px;
    border-radius: var(--tuiv2-radius);
    font-weight: 700;
    cursor: pointer;
}
@media (max-width: 720px) {
    .tuiv2-newsletter { grid-template-columns: 1fr; }
}

/* ============================================================================
   ARTICLE PAGE COMPONENTS
   ========================================================================= */

/* ── 8. Reading progress bar ─────────────────────────────────────────── */
.tuiv2-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: var(--tuiv2-brand-gradient);
    z-index: 9999;
    transition: width .08s linear;
    pointer-events: none;
}

/* ── 9. Article header block ─────────────────────────────────────────── */
.tuiv2-article-head {
    max-width: 980px;
    margin: 20px auto 0;
    padding: 0 16px;
}
.tuiv2-article-head__cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--tuiv2-cat-environment);
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 14px;
}
.tuiv2-article-head__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.18;
    color: var(--tuiv2-ink);
    margin: 0 0 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.tuiv2-tagline {
    border-left: 4px solid var(--tuiv2-trust-green);
    background: #F0FAF3;
    padding: 14px 18px;
    border-radius: 0 var(--tuiv2-radius) var(--tuiv2-radius) 0;
    font-size: 16px;
    color: var(--tuiv2-ink-2);
    line-height: 1.55;
    margin: 0 0 20px;
    font-style: italic;
}

/* ── 10. Byline row ──────────────────────────────────────────────────── */
.tuiv2-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    padding: 14px 0;
    border-top: 1px solid var(--tuiv2-line);
    border-bottom: 1px solid var(--tuiv2-line);
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--tuiv2-ink-2);
}
.tuiv2-byline__avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--tuiv2-brand-gradient);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; letter-spacing: 0.05em;
    flex-shrink: 0;
}
.tuiv2-byline__name {
    display: flex; flex-direction: column; line-height: 1.25;
}
.tuiv2-byline__name strong { color: var(--tuiv2-ink); font-size: 14px; }
.tuiv2-byline__name span { font-size: 12px; color: var(--tuiv2-muted); }
.tuiv2-byline__badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: #ECFDF5;
    color: var(--tuiv2-trust-green);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.tuiv2-byline__sep {
    color: var(--tuiv2-line);
    margin: 0 -4px;
}
.tuiv2-byline__meta {
    display: inline-flex; align-items: center; gap: 6px;
}
.tuiv2-byline__live {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--tuiv2-saffron-dark);
    font-weight: 600;
}

/* ── 11. 3-column article layout ─────────────────────────────────────── */
.tuiv2-article-grid {
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 72px minmax(0,1fr) 290px;
    gap: 28px;
    align-items: start;
}
.tuiv2-share {
    position: sticky;
    top: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.tuiv2-share__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--tuiv2-muted);
    margin-bottom: 2px;
}
.tuiv2-share a {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    transition: transform .15s ease;
}
.tuiv2-share a:hover { transform: scale(1.08); }
.tuiv2-share a.tuiv2-wa {
    background: var(--tuiv2-whatsapp);
    width: 52px; height: 52px;          /* primary, slightly bigger */
    font-size: 22px;
    box-shadow: 0 4px 14px rgba(37,211,102,.35);
}
.tuiv2-share a.tuiv2-fb { background: #1877F2; }
.tuiv2-share a.tuiv2-x  { background: #111; }
.tuiv2-share a.tuiv2-li { background: #0A66C2; }
.tuiv2-share a.tuiv2-em { background: #EF4444; }
.tuiv2-share a.tuiv2-cp { background: #6B7280; }
.tuiv2-share__count {
    text-align: center;
    font-size: 12px;
    color: var(--tuiv2-muted);
    margin-top: 6px;
    line-height: 1.25;
}
.tuiv2-share__count b { color: var(--tuiv2-ink); display: block; font-size: 14px; }

.tuiv2-article-main { min-width: 0; }   /* prevents grid overflow */
.tuiv2-article-main img { max-width: 100%; height: auto; }

.tuiv2-rsidebar {
    position: sticky;
    top: 86px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tuiv2-rsidebar__card {
    background: #fff;
    border: 1px solid var(--tuiv2-line);
    border-radius: var(--tuiv2-radius);
    padding: 16px;
}
.tuiv2-rsidebar__head {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--tuiv2-muted);
    border-bottom: 1px solid var(--tuiv2-line);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.tuiv2-rsidebar__list { list-style: none; padding: 0; margin: 0; }
.tuiv2-rsidebar__list li {
    display: flex; gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #F3F4F6;
}
.tuiv2-rsidebar__list li:last-child { border-bottom: 0; }
.tuiv2-rsidebar__list img {
    width: 60px; height: 50px; object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.tuiv2-rsidebar__list a {
    color: var(--tuiv2-ink);
    text-decoration: none;
    font-size: 13.5px; line-height: 1.35;
    font-weight: 600;
}
.tuiv2-rsidebar__list a:hover { color: var(--tuiv2-brand-2); }
.tuiv2-rsidebar__list small { color: var(--tuiv2-muted); font-size: 11.5px; }

@media (max-width: 1100px) {
    .tuiv2-article-grid { grid-template-columns: 56px minmax(0,1fr); }
    .tuiv2-rsidebar { display: none; }
    .tuiv2-share a { width: 38px; height: 38px; font-size: 15px; }
    .tuiv2-share a.tuiv2-wa { width: 44px; height: 44px; font-size: 18px; }
}
@media (max-width: 700px) {
    .tuiv2-article-grid {
        grid-template-columns: 1fr;
    }
    .tuiv2-share {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 14px 0;
        border-top: 1px solid var(--tuiv2-line);
        border-bottom: 1px solid var(--tuiv2-line);
    }
    .tuiv2-share__label, .tuiv2-share__count { display: none; }
}

/* ── 12. Mid-article ad container & inline poll ──────────────────────── */
.tuiv2-midad {
    margin: 28px 0;
    padding: 12px;
    border: 1px dashed var(--tuiv2-line);
    border-radius: var(--tuiv2-radius);
    position: relative;
    min-height: 260px;
    background: #FAFAFA;
}
.tuiv2-midad::before {
    content: 'Advertisement';
    position: absolute;
    top: -10px; left: 16px;
    background: #fff;
    padding: 0 8px;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--tuiv2-muted);
    text-transform: uppercase;
}

.tuiv2-poll {
    background: #fff;
    border: 1px solid var(--tuiv2-line);
    border-radius: var(--tuiv2-radius-lg);
    padding: 20px 22px;
    margin: 28px 0;
}
.tuiv2-poll__head {
    font-size: 13px;
    font-weight: 700;
    color: var(--tuiv2-ink);
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 8px;
}
.tuiv2-poll__q {
    font-size: 16px; font-weight: 700; margin: 8px 0 14px; color: var(--tuiv2-ink);
}
.tuiv2-poll__opt {
    position: relative;
    border: 1px solid var(--tuiv2-line);
    border-radius: var(--tuiv2-radius);
    padding: 12px 14px;
    margin-bottom: 8px;
    background: #F9FAFB;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px;
    overflow: hidden;
}
.tuiv2-poll__fill {
    position: absolute; inset: 0 auto 0 0;
    background: #DCFCE7;
    z-index: 0;
}
.tuiv2-poll__opt > * { position: relative; z-index: 1; }
.tuiv2-poll__foot {
    margin-top: 10px;
    font-size: 12px; color: var(--tuiv2-muted); text-align: right;
}

/* ── 13. Article tags pills ──────────────────────────────────────────── */
.tuiv2-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 24px 0;
}
.tuiv2-tags a {
    background: #F3F4F6;
    color: var(--tuiv2-ink-2);
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    text-decoration: none;
    transition: background .15s ease;
}
.tuiv2-tags a:hover { background: var(--tuiv2-line); color: var(--tuiv2-brand-2); }

/* ── 14. Related stories 6-card grid ─────────────────────────────────── */
.tuiv2-related {
    margin: 32px 0;
}
.tuiv2-related__head {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
    border-left: 4px solid var(--tuiv2-brand-2);
    padding-left: 12px;
}
.tuiv2-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { .tuiv2-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tuiv2-related__grid { grid-template-columns: 1fr; } }

.tuiv2-related__card {
    background: #fff;
    border-radius: var(--tuiv2-radius);
    overflow: hidden;
    box-shadow: var(--tuiv2-shadow-sm);
    transition: transform .15s ease;
    min-height: 240px;
    display: flex;
    flex-direction: column;
}
.tuiv2-related__card:hover { transform: translateY(-2px); }
.tuiv2-related__card img {
    width: 100%; aspect-ratio: 16/9;
    object-fit: cover; display: block;
}
.tuiv2-related__card-body { padding: 12px 14px 14px; }
.tuiv2-related__card h4 {
    font-size: 15px; font-weight: 700; line-height: 1.35;
    margin: 0 0 6px; color: var(--tuiv2-ink);
}
.tuiv2-related__card h4 a { color: inherit; text-decoration: none; }
.tuiv2-related__card h4 a:hover { color: var(--tuiv2-brand-2); }
.tuiv2-related__card small { color: var(--tuiv2-muted); font-size: 12px; }

/* ── 15. FAQ accordion ──────────────────────────────────────────────── */
.tuiv2-faq { margin: 28px 0; }
.tuiv2-faq__head {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px; font-weight: 700;
    margin: 0 0 14px;
    border-left: 4px solid var(--tuiv2-brand-2);
    padding-left: 12px;
}
.tuiv2-faq__item {
    border: 1px solid var(--tuiv2-line);
    border-radius: var(--tuiv2-radius);
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}
.tuiv2-faq__q {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    color: var(--tuiv2-ink);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    font-family: inherit;
}
.tuiv2-faq__q::after {
    content: '+';
    font-size: 22px; line-height: 1;
    color: var(--tuiv2-brand-2);
    transition: transform .2s ease;
}
.tuiv2-faq__item[open] .tuiv2-faq__q::after { content: '−'; }
.tuiv2-faq__a {
    padding: 0 18px 14px;
    font-size: 14.5px;
    color: var(--tuiv2-ink-2);
    line-height: 1.55;
}

/* ── 16. Author card ────────────────────────────────────────────────── */
.tuiv2-author {
    background: #fff;
    border: 1px solid var(--tuiv2-line);
    border-radius: var(--tuiv2-radius-lg);
    padding: 18px 20px;
    display: flex;
    gap: 16px;
    margin: 28px 0;
}
.tuiv2-author__avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--tuiv2-brand-gradient);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0; font-size: 15px;
}
.tuiv2-author__body h4 {
    margin: 0 0 4px; font-size: 16px; color: var(--tuiv2-ink);
}
.tuiv2-author__body small { color: var(--tuiv2-muted); font-size: 12px; }
.tuiv2-author__body p { margin: 8px 0 10px; font-size: 13.5px; color: var(--tuiv2-ink-2); line-height: 1.55; }
.tuiv2-author__social { display: flex; gap: 8px; }
.tuiv2-author__social a {
    width: 28px; height: 28px; border-radius: 50%;
    background: #F3F4F6;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tuiv2-ink-2);
    text-decoration: none;
    font-size: 13px;
}

/* ── 17. Inline newsletter (bottom of article) ──────────────────────── */
.tuiv2-news-inline {
    background: #0F172A;
    color: #fff;
    border-radius: var(--tuiv2-radius-lg);
    padding: 22px 24px;
    margin: 28px 0;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
    align-items: center;
}
.tuiv2-news-inline h4 { margin: 0 0 4px; font-size: 19px; font-family: 'Playfair Display', Georgia, serif; }
.tuiv2-news-inline p  { margin: 0; opacity: .85; font-size: 13.5px; }
.tuiv2-news-inline form { display: flex; gap: 8px; }
.tuiv2-news-inline input[type=email] {
    flex: 1; padding: 11px 12px; border-radius: var(--tuiv2-radius); border: 0; font-size: 14px;
}
.tuiv2-news-inline button {
    background: var(--tuiv2-saffron);
    color: #1f1300; border: 0;
    padding: 11px 16px; border-radius: var(--tuiv2-radius);
    font-weight: 700; cursor: pointer;
}
@media (max-width: 720px) { .tuiv2-news-inline { grid-template-columns: 1fr; } }

/* ============================================================================
   LEGACY-COMPAT: restyle existing news/blog.php classes for the v2 look.
   These selectors are scoped to body.tuiv2-active and target the classes
   that the existing PHP template already emits. No HTML changes required,
   so SEO / keyword density / DOM-driven JS are all preserved.
   ========================================================================= */
body.tuiv2-active .blog-main-container {
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 16px;
}

/* Article hero: category button → green pill, H1 → Playfair, image radius */
body.tuiv2-active .blog-home-screen {
    max-width: 980px;
    margin: 0 auto 24px;
}
body.tuiv2-active .blog-home-screen .title a {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--tuiv2-cat-environment) !important;
    color: #fff !important;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 14px;
}
body.tuiv2-active .blog-home-screen .title a::before {
    content: '\f06c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 4px;
    font-size: 10px;
}
body.tuiv2-active .blog-home-screen .main-blog-details h1 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(26px, 3vw, 40px) !important;
    line-height: 1.18 !important;
    color: var(--tuiv2-ink) !important;
    margin: 6px 0 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
body.tuiv2-active .blog-home-screen .img img {
    border-radius: var(--tuiv2-radius-lg);
    max-width: 100%; height: auto; display: block;
    margin-top: 8px;
}

/* Upgraded byline row */
body.tuiv2-active .tui-article-meta-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    padding: 14px 0 !important;
    border-top: 1px solid var(--tuiv2-line);
    border-bottom: 1px solid var(--tuiv2-line);
    margin: 14px 0 18px !important;
    font-size: 13.5px;
    color: var(--tuiv2-ink-2);
}
body.tuiv2-active .tui-article-meta-row .tui-byline {
    display: inline-flex; align-items: center; gap: 10px;
}
body.tuiv2-active .tui-article-meta-row .tui-byline::before {
    content: 'TUI';
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--tuiv2-brand-gradient);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em;
    flex-shrink: 0;
}
body.tuiv2-active .tui-article-meta-row .tui-byline-name { color: var(--tuiv2-ink); font-weight: 700; }
body.tuiv2-active .tui-article-meta-row .tui-byline::after {
    content: '\f058  Fact-Checked';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 600;
    background: #ECFDF5;
    color: var(--tuiv2-trust-green);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    margin-left: 6px;
}
body.tuiv2-active .tui-article-meta-row .tui-meta-sep { color: var(--tuiv2-line); }

/* 3-column body: rewire legacy .blog-details-main-container > .left/.mid/.right.
   We widen the left rail to 200px so the legacy meta content (tagline,
   posted date, category, tags, topic chips) reads cleanly instead of
   being squashed to one word per line. The share strip stays centered. */
body.tuiv2-active .blog-details-main-container {
    display: grid !important;
    grid-template-columns: 200px minmax(0,1fr) 290px !important;
    gap: 28px !important;
    max-width: 1240px !important;
    margin: 24px auto !important;
    padding: 0 16px !important;
    align-items: start !important;
}
/* Force grid track widths to override legacy `.left { width: 25% }` and
   `.right { width: 25% }` rules that otherwise collapse the right rail
   to 0 (children overflow visually but parent shrinks). */
body.tuiv2-active .blog-details-main-container > .left {
    width: 200px !important;
    margin: 0 !important;
    max-width: 200px !important;
}
body.tuiv2-active .blog-details-main-container > .mid {
    width: auto !important;
    min-width: 0 !important;
}
body.tuiv2-active .blog-details-main-container > .right {
    width: 290px !important;
    max-width: 290px !important;
    min-width: 290px !important;
    margin: 0 !important;
}
@media (max-width: 1100px) {
    body.tuiv2-active .blog-details-main-container {
        grid-template-columns: 180px minmax(0,1fr) !important;
    }
    body.tuiv2-active .blog-details-main-container > .right { display: none !important; }
}
@media (max-width: 700px) {
    body.tuiv2-active .blog-details-main-container {
        grid-template-columns: 1fr !important;
    }
    body.tuiv2-active .blog-details-main-container > .left {
        width: auto !important;
        max-width: none !important;
    }
}

/* Left rail: sticky column. We KEEP the legacy meta content (tagline,
   posted date, category, tags, topic chips) VISIBLE — SEO Rule 22 forbids
   display:none on previously visible content — and just restyle into a
   compact panel below the share strip. */
body.tuiv2-active .blog-details-main-container > .left {
    position: sticky;
    top: 86px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 12.5px;
}
/* Force every legacy left-rail block to fill the 200px column so text
   doesn't wrap to one word per line (legacy CSS sets some children to
   width: auto / max-content which shrinks them inside the flex parent). */
body.tuiv2-active .blog-details-main-container > .left > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
}
body.tuiv2-active .left .left-top-line { display: none; } /* purely decorative hr; no content lost */
body.tuiv2-active .left .left-heading {
    background: #F0FAF3;
    border-left: 3px solid var(--tuiv2-trust-green);
    border-radius: 0 6px 6px 0;
    padding: 8px 10px;
    font-style: italic;
    line-height: 1.4;
}
body.tuiv2-active .left .left-heading h4 {
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    color: var(--tuiv2-ink-2) !important;
    line-height: 1.4;
}
body.tuiv2-active .left .posted-date,
body.tuiv2-active .left .blog-category,
body.tuiv2-active .left .blog-tag-links,
body.tuiv2-active .left .blog-topic-chips {
    color: var(--tuiv2-muted);
    line-height: 1.4;
}
body.tuiv2-active .left h5 {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tuiv2-muted) !important;
    margin: 0 0 4px !important;
    font-weight: 700 !important;
}
body.tuiv2-active .left .blog-category .name {
    color: var(--tuiv2-brand-2) !important;
    text-decoration: none;
    font-size: 12px;
}
body.tuiv2-active .left .blog-tag-links form { margin: 0; }
body.tuiv2-active .left .blog-tag-links .tag-links {
    display: flex; flex-wrap: wrap; gap: 4px;
}
body.tuiv2-active .left .blog-tag-links .tag-links a {
    background: #F3F4F6 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    color: var(--tuiv2-ink-2) !important;
    text-decoration: none;
}
body.tuiv2-active .left .blog-tag-links .tag-links a input { display: none; }
body.tuiv2-active .left .blog-topic-chips .topic-chip {
    padding: 3px 8px !important;
    font-size: 11px !important;
    margin: 2px;
}
body.tuiv2-active .left .amr-ads iframe { max-width: 100%; }
body.tuiv2-active .left .posted-date .date {
    font-size: 12px; color: var(--tuiv2-ink-2);
}

/* Sticky share strip: WhatsApp first + larger, then FB / X / LinkedIn / Email */
body.tuiv2-active .tui-share-sticky {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 !important;
    border: 0 !important;
}
body.tuiv2-active .tui-share-sticky h5 {
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--tuiv2-muted) !important;
    margin: 0 0 4px !important;
    text-transform: uppercase;
}
body.tuiv2-active .tui-share-sticky .social-links-details {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
body.tuiv2-active .tui-share-sticky .social-links-details a {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff !important;
    text-decoration: none;
    font-size: 17px;
    transition: transform .15s ease;
    padding: 0 !important;
    background: #6B7280;
}
body.tuiv2-active .tui-share-sticky .social-links-details a:hover { transform: scale(1.08); }
body.tuiv2-active .tui-share-sticky .social-links-details a img { display: none !important; }
/* Hide raw <i> only when icon font hasn't loaded; show one icon per button */
body.tuiv2-active .tui-share-sticky .social-links-details a i { font-size: 17px; }

/* WhatsApp is the last child in the legacy markup — promote it visually
   to first (CSS order = -1) and make it bigger. */
body.tuiv2-active .tui-share-sticky .social-links-details {
    flex-direction: column;
}
body.tuiv2-active .tui-share-sticky .social-links-details a:nth-child(5) {
    /* WhatsApp — primary */
    order: -1;
    background: var(--tuiv2-whatsapp) !important;
    width: 52px; height: 52px;
    font-size: 22px;
    box-shadow: 0 4px 14px rgba(37,211,102,.35);
}
body.tuiv2-active .tui-share-sticky .social-links-details a:nth-child(1) { background: #1877F2 !important; } /* Facebook */
body.tuiv2-active .tui-share-sticky .social-links-details a:nth-child(2) { background: #111 !important; }   /* Twitter / X */
body.tuiv2-active .tui-share-sticky .social-links-details a:nth-child(3) { background: #EF4444 !important; } /* Email */
body.tuiv2-active .tui-share-sticky .social-links-details a:nth-child(4) { background: #0A66C2 !important; } /* LinkedIn */

/* Article content area — middle column */
body.tuiv2-active .blog-details-main-container > .mid {
    min-width: 0;
}
body.tuiv2-active .blog-details-main-container > .mid .blog-details-container {
    background: #fff;
    padding: 0;
}
body.tuiv2-active .blog-details-container .para img { max-width: 100%; height: auto; }

/* Right sidebar: now visible (the inline display:none is removed in PHP).
   The legacy AdSense block lives inside .advertise — keep it visible.
   We also append a "More from Category" list in PHP below. */
body.tuiv2-active .blog-details-main-container > .right {
    position: sticky;
    top: 86px;
    display: flex !important;
    flex-direction: column;
    gap: 16px;
}
body.tuiv2-active .blog-details-main-container > .right .advertise {
    background: #fff;
    border: 1px dashed var(--tuiv2-line);
    border-radius: var(--tuiv2-radius);
    padding: 12px;
    min-height: 250px;
    position: relative;
}
body.tuiv2-active .blog-details-main-container > .right .advertise::before {
    content: 'Advertisement';
    position: absolute;
    top: -10px; left: 16px;
    background: #fff; padding: 0 8px;
    font-size: 10px; letter-spacing: 0.12em;
    color: var(--tuiv2-muted); text-transform: uppercase;
}

/* Restyle the existing Related Stories grid (we'll bump LIMIT to 6) */
body.tuiv2-active .tui-related-wrap { margin: 32px 0; }
body.tuiv2-active .tui-related-title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 16px !important;
    border-left: 4px solid var(--tuiv2-brand-2);
    padding-left: 12px;
}
body.tuiv2-active .tui-related-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 900px) { body.tuiv2-active .tui-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { body.tuiv2-active .tui-related-grid { grid-template-columns: 1fr; } }
body.tuiv2-active .tui-related-card {
    background: #fff;
    border-radius: var(--tuiv2-radius);
    overflow: hidden;
    box-shadow: var(--tuiv2-shadow-sm);
    text-decoration: none;
    display: flex; flex-direction: column;
    transition: transform .15s ease;
    min-height: 240px;
}
body.tuiv2-active .tui-related-card:hover { transform: translateY(-2px); }
body.tuiv2-active .tui-related-img {
    width: 100%; aspect-ratio: 16/9; object-fit: cover;
}
body.tuiv2-active .tui-related-body { padding: 12px 14px 14px; }
body.tuiv2-active .tui-related-h {
    font-size: 15px; font-weight: 700; line-height: 1.35;
    margin-bottom: 6px; color: var(--tuiv2-ink);
}
body.tuiv2-active .tui-related-d {
    font-size: 12.5px; color: var(--tuiv2-muted); line-height: 1.45;
}

/* FAQ section in v2 — restyle existing .blog2_faq_container output */
body.tuiv2-active .blog2_faq_container { margin: 32px 0; }
body.tuiv2-active .blog2_faq_container .header h2 {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 6px !important;
    border-left: 4px solid var(--tuiv2-brand-2);
    padding-left: 12px;
}
body.tuiv2-active .blog2_faq_container .header p {
    color: var(--tuiv2-muted); font-size: 13px; margin: 0 0 14px;
}
body.tuiv2-active .faq-item {
    border: 1px solid var(--tuiv2-line);
    border-radius: var(--tuiv2-radius);
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}
body.tuiv2-active .faq-question {
    padding: 14px 18px;
    font-size: 15px; font-weight: 700;
    color: var(--tuiv2-ink);
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
}
body.tuiv2-active .faq-answer {
    padding: 0 18px 14px;
    font-size: 14.5px;
    color: var(--tuiv2-ink-2);
    line-height: 1.55;
}

/* Bottom-of-article author card + newsletter — new emitted markup */
body.tuiv2-active .tuiv2-bottom-stack { margin: 28px 0 0; }

/* ============================================================================
   MEDIA KIT INQUIRY PAGE
   ========================================================================= */
.tuiv2-mk-hero {
    background: var(--tuiv2-brand-gradient);
    color: #fff;
    padding: 56px 16px 48px;
    text-align: center;
}
.tuiv2-mk-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 3.6vw, 42px);
    margin: 0 0 10px;
    font-weight: 700;
}
.tuiv2-mk-hero p {
    max-width: 720px;
    margin: 0 auto;
    font-size: 15px;
    opacity: .92;
    line-height: 1.55;
}
.tuiv2-mk-stats {
    max-width: 920px;
    margin: -28px auto 28px;
    background: #fff;
    border-radius: var(--tuiv2-radius-lg);
    box-shadow: var(--tuiv2-shadow-md);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 20px;
    gap: 16px;
    text-align: center;
    position: relative; z-index: 2;
}
.tuiv2-mk-stat strong {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px;
    color: var(--tuiv2-brand-2);
}
.tuiv2-mk-stat span {
    font-size: 12px;
    color: var(--tuiv2-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
@media (max-width: 720px) {
    .tuiv2-mk-stats { grid-template-columns: repeat(2, 1fr); }
}

.tuiv2-mk-grid {
    max-width: 1120px;
    margin: 32px auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 32px;
}
@media (max-width: 880px) { .tuiv2-mk-grid { grid-template-columns: 1fr; } }

.tuiv2-mk-form {
    background: #fff;
    border-radius: var(--tuiv2-radius-lg);
    box-shadow: var(--tuiv2-shadow-md);
    padding: 28px;
}
.tuiv2-mk-form h2 {
    margin: 0 0 6px;
    font-size: 22px;
    color: var(--tuiv2-ink);
}
.tuiv2-mk-form p.sub {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--tuiv2-muted);
}
.tuiv2-mk-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tuiv2-ink-2);
    margin: 12px 0 5px;
}
.tuiv2-mk-form .req { color: #DC2626; }
.tuiv2-mk-form input,
.tuiv2-mk-form select,
.tuiv2-mk-form textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--tuiv2-line);
    border-radius: var(--tuiv2-radius);
    font-family: inherit;
    font-size: 14px;
    color: var(--tuiv2-ink);
    background: #fff;
    box-sizing: border-box;
}
.tuiv2-mk-form input:focus,
.tuiv2-mk-form select:focus,
.tuiv2-mk-form textarea:focus {
    outline: 0;
    border-color: var(--tuiv2-brand-2);
    box-shadow: 0 0 0 3px rgba(1,101,152,.12);
}
.tuiv2-mk-form textarea { min-height: 96px; resize: vertical; }
.tuiv2-mk-form .row-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 560px) { .tuiv2-mk-form .row-2 { grid-template-columns: 1fr; } }
.tuiv2-mk-form button[type=submit] {
    margin-top: 18px;
    width: 100%;
    background: var(--tuiv2-brand-gradient);
    color: #fff;
    border: 0;
    padding: 14px;
    border-radius: var(--tuiv2-radius);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    transition: transform .15s ease;
}
.tuiv2-mk-form button[type=submit]:hover { transform: translateY(-1px); }
.tuiv2-mk-form .honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px; height: 1px; overflow: hidden;
}
.tuiv2-mk-form .privacy {
    font-size: 12px; color: var(--tuiv2-muted);
    margin-top: 12px; text-align: center;
}

.tuiv2-mk-info ul { list-style: none; padding: 0; margin: 0; }
.tuiv2-mk-info li {
    display: flex; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tuiv2-line);
}
.tuiv2-mk-info li:last-child { border-bottom: 0; }
.tuiv2-mk-info i {
    color: var(--tuiv2-trust-green);
    font-size: 18px;
    margin-top: 2px;
}
.tuiv2-mk-info h4 { margin: 0 0 4px; font-size: 14.5px; color: var(--tuiv2-ink); }
.tuiv2-mk-info p  { margin: 0; font-size: 13.5px; color: var(--tuiv2-muted); line-height: 1.5; }

.tuiv2-mk-success,
.tuiv2-mk-error {
    max-width: 920px;
    margin: 16px auto 0;
    padding: 14px 18px;
    border-radius: var(--tuiv2-radius);
    font-size: 14px;
}
.tuiv2-mk-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.tuiv2-mk-error   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* =============================================================================
   v2.03 — Restyling legacy sections that previously rendered with their old
   design under the new chrome. Pure CSS overrides scoped to body.tuiv2-active
   so non-redesigned pages are untouched.
   ========================================================================= */

/* ── Newsletter / Subscribe section ─────────────────────────────────────
   partials/newsletter_subscription/newsletter_form.php emits a .subscribe-section
   with cream/light-blue gradient, big "Subscribe" headline + orange button.
   We replace it visually with the v2 dark-navy newsletter card from the
   prototype. */
body.tuiv2-active .subscribe-section {
    background: #0F172A !important;
    background-image: radial-gradient(ellipse at top left, rgba(138,50,88,.22), transparent 55%),
                      radial-gradient(ellipse at bottom right, rgba(1,101,152,.20), transparent 55%),
                      #0F172A !important;
    padding: 48px 24px !important;
    min-height: 0 !important;
    border-radius: 0;
    color: #fff;
    max-width: none;
    margin: 32px 0 !important;
}
body.tuiv2-active .subscribe-section .subscribe-container {
    max-width: 940px !important;
    margin: 0 auto !important;
}
body.tuiv2-active .subscribe-section h2 {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(22px, 2.6vw, 32px) !important;
    color: #fff !important;
    line-height: 1.25 !important;
    margin: 0 0 6px !important;
    font-weight: 700 !important;
}
body.tuiv2-active .subscribe-section h2 span {
    color: var(--tuiv2-saffron) !important;
}
body.tuiv2-active .subscribe-section .hashtag {
    color: rgba(255,255,255,.7) !important;
    margin-bottom: 22px !important;
}
body.tuiv2-active .subscribe-section .subscribe-form input[type="email"] {
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(255,255,255,.0) !important;
    color: var(--tuiv2-ink) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
}
body.tuiv2-active .subscribe-section .subscribe-form input[type="email"]:focus {
    border-color: var(--tuiv2-saffron) !important;
    box-shadow: 0 0 0 3px rgba(249,148,16,.25) !important;
}
body.tuiv2-active .subscribe-section .subscribe-form button {
    background: var(--tuiv2-saffron) !important;
    color: #1f1300 !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-weight: 700 !important;
    transition: transform .15s ease, background .15s ease !important;
}
body.tuiv2-active .subscribe-section .subscribe-form button:hover {
    background: #ffae3b !important;
    transform: translateY(-1px) !important;
}
body.tuiv2-active .subscribe-section .newsletter-response,
body.tuiv2-active .subscribe-section .privacy-policy {
    color: rgba(255,255,255,.7) !important;
}
body.tuiv2-active .subscribe-section .privacy-policy a { color: var(--tuiv2-saffron) !important; }

/* ── Homepage hero — fix the empty-gap below ───────────────────────────
   Side cards stack to roughly main hero height. Force the side aside to
   stretch full and let cards distribute, so the column never ends short
   of the main hero (eliminating the dead gap below). */
.tuiv2-hero { align-items: stretch; }
.tuiv2-hero__side { height: 100%; justify-content: space-between; gap: 14px; }
.tuiv2-hero__sidecard { flex: 1 1 0; min-height: 0; }
.tuiv2-hero__sidecard img { aspect-ratio: 16/9; max-height: 180px; }
.tuiv2-hero__sidecard h3 { font-size: 14px; line-height: 1.32; }
.tuiv2-hero__sidecard-body { padding: 10px 14px 12px; }

/* ── What's Trending section — make compact, match v2 ─────────────────
   Legacy renders each trending blog as a full-width image-left/text-right
   card stacked vertically. We rewire it to a tight horizontal/vertical
   compact list so it doesn't dwarf the rest of the page. */
body.tuiv2-active .trending-blog-main-container {
    max-width: 1240px !important;
    margin: 32px auto !important;
    padding: 0 16px !important;
    display: block !important;
}
body.tuiv2-active .trending-container {
    background: none !important;
    margin-bottom: 18px !important;
}
body.tuiv2-active .trending-container .trending-button {
    display: inline-block;
    margin-bottom: 12px;
}
body.tuiv2-active .trending-container .trending-button a {
    background: var(--tuiv2-brand-gradient) !important;
    color: #fff !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}
body.tuiv2-active .trending-blog-mid-container {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 14px !important;
    width: 100% !important;
}
@media (max-width: 1100px) {
    body.tuiv2-active .trending-blog-mid-container { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 700px) {
    body.tuiv2-active .trending-blog-mid-container { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    body.tuiv2-active .trending-blog-mid-container { grid-template-columns: 1fr !important; }
}
/* Each trending blog card */
body.tuiv2-active .trending-blog-mid-container > * {
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    width: auto !important;
    margin: 0 !important;
    min-height: 240px;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
body.tuiv2-active .trending-blog-mid-container > *:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.10) !important;
}
body.tuiv2-active .trending-blog-mid-container img {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    border-radius: 0 !important;
}
body.tuiv2-active .trending-blog-mid-container .image,
body.tuiv2-active .trending-blog-mid-container .img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}
body.tuiv2-active .trending-blog-mid-container .content,
body.tuiv2-active .trending-blog-mid-container .blog-details,
body.tuiv2-active .trending-blog-mid-container .blog-text {
    padding: 12px 14px !important;
    width: auto !important;
    flex: 1;
}
body.tuiv2-active .trending-blog-mid-container .content p,
body.tuiv2-active .trending-blog-mid-container .blog-details p,
body.tuiv2-active .trending-blog-mid-container h2,
body.tuiv2-active .trending-blog-mid-container h3 {
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
    color: var(--tuiv2-ink) !important;
    font-weight: 700 !important;
}
body.tuiv2-active .trending-blog-mid-container .posted-date,
body.tuiv2-active .trending-blog-mid-container .date,
body.tuiv2-active .trending-blog-mid-container .author {
    font-size: 12px !important;
    color: var(--tuiv2-muted) !important;
    margin: 0 !important;
    padding: 0 14px 12px !important;
}
body.tuiv2-active .trending-blog-mid-container .category-button,
body.tuiv2-active .trending-blog-mid-container [class$="-btn"] {
    font-size: 10px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    align-self: flex-start;
    margin: 12px 14px 6px !important;
}

/* ── Category sections (8x .blogs-main-container) — restyle to v2 grid ──
   Legacy structure:  .blog-top (category heading) + .blog-bottom (.left =
   1 feature, .right = 4 small). The asymmetric heights leave huge gaps
   below the feature. Convert .blog-bottom into a unified 3-column grid
   where the feature is first (spanning) and the other 4 become equal
   cards. */
body.tuiv2-active .blogs-main-container {
    max-width: 1240px !important;
    margin: 32px auto !important;
    padding: 0 16px !important;
    background: transparent !important;
}
body.tuiv2-active .blogs-main-container .blog-top {
    border-bottom: 1px solid var(--tuiv2-line);
    padding-bottom: 10px;
    margin-bottom: 18px;
}
body.tuiv2-active .blogs-main-container .blog-top h1,
body.tuiv2-active .blogs-main-container .blog-top h2,
body.tuiv2-active .blogs-main-container .blog-top h3,
body.tuiv2-active .blogs-main-container .blog-top .title {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    border-left: 4px solid var(--tuiv2-brand-2);
    padding-left: 12px;
    color: var(--tuiv2-ink) !important;
}
body.tuiv2-active .blogs-main-container .blog-top a {
    color: var(--tuiv2-brand-2) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Reset legacy .blog-bottom flex into our grid */
body.tuiv2-active .blogs-main-container .blog-bottom {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 16px !important;
    width: 100% !important;
    flex-direction: unset !important;
}
@media (max-width: 1100px) {
    body.tuiv2-active .blogs-main-container .blog-bottom { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; }
}
@media (max-width: 700px) {
    body.tuiv2-active .blogs-main-container .blog-bottom { grid-template-columns: 1fr !important; }
}
/* Feature blog (left) — span 2 rows tall, 1 col wide */
body.tuiv2-active .blogs-main-container .blog-bottom > .left {
    width: auto !important;
    height: auto !important;
    grid-row: 1 / span 2;
    background: #fff !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
@media (max-width: 1100px) {
    body.tuiv2-active .blogs-main-container .blog-bottom > .left { grid-row: auto; }
}
body.tuiv2-active .blogs-main-container .blog-bottom > .left .image,
body.tuiv2-active .blogs-main-container .blog-bottom > .left .img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}
body.tuiv2-active .blogs-main-container .blog-bottom > .left img {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    height: auto !important;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
body.tuiv2-active .blogs-main-container .blog-bottom > .left .content,
body.tuiv2-active .blogs-main-container .blog-bottom > .left .blog-details,
body.tuiv2-active .blogs-main-container .blog-bottom > .left .blog-text {
    padding: 14px 16px 16px !important;
}
body.tuiv2-active .blogs-main-container .blog-bottom > .left h2,
body.tuiv2-active .blogs-main-container .blog-bottom > .left h3,
body.tuiv2-active .blogs-main-container .blog-bottom > .left p {
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    color: var(--tuiv2-ink) !important;
    font-family: 'DM Sans', sans-serif !important;
}
body.tuiv2-active .blogs-main-container .blog-bottom > .left .posted-date,
body.tuiv2-active .blogs-main-container .blog-bottom > .left .date,
body.tuiv2-active .blogs-main-container .blog-bottom > .left .author {
    font-size: 12.5px !important;
    color: var(--tuiv2-muted) !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Right-side blogs (4 of them) — each becomes a card in the 2x2 grid area */
body.tuiv2-active .blogs-main-container .blog-bottom > .right {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: contents !important;
}
body.tuiv2-active .blogs-main-container .blog-bottom > .right > * {
    background: #fff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-height: 180px;
    display: flex !important;
    flex-direction: column !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
body.tuiv2-active .blogs-main-container .blog-bottom > .right > *:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.10) !important;
}
body.tuiv2-active .blogs-main-container .blog-bottom > .right img {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
body.tuiv2-active .blogs-main-container .blog-bottom > .right .image,
body.tuiv2-active .blogs-main-container .blog-bottom > .right .img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}
body.tuiv2-active .blogs-main-container .blog-bottom > .right h2,
body.tuiv2-active .blogs-main-container .blog-bottom > .right h3,
body.tuiv2-active .blogs-main-container .blog-bottom > .right p {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 10px 12px 4px !important;
    color: var(--tuiv2-ink) !important;
}
body.tuiv2-active .blogs-main-container .blog-bottom > .right .content,
body.tuiv2-active .blogs-main-container .blog-bottom > .right .blog-details,
body.tuiv2-active .blogs-main-container .blog-bottom > .right .blog-text {
    padding: 8px 12px !important;
}
body.tuiv2-active .blogs-main-container .blog-bottom > .right .posted-date,
body.tuiv2-active .blogs-main-container .blog-bottom > .right .date,
body.tuiv2-active .blogs-main-container .blog-bottom > .right .author {
    font-size: 11.5px !important;
    color: var(--tuiv2-muted) !important;
    padding: 0 12px 10px !important;
    margin: 0 !important;
}

/* ── Footer text capitalization fix ────────────────────────────────────
   Legacy CSS in style.css applies text-transform: capitalize to footer
   paragraphs, producing "Stay Tuned With The United Indian!". Restore
   natural sentence case (text is already correctly cased in PHP source). */
body.tuiv2-active .footer-main-container,
body.tuiv2-active .footer-main-container p,
body.tuiv2-active .footer-main-container a,
body.tuiv2-active .footer-main-container span {
    text-transform: none !important;
}

/* Add small section labels above the link groups in the footer.
   The PHP doesn't emit COMPANY/CATEGORIES headings, but we can hint at
   them with ::before on each .section. */
body.tuiv2-active .mid-footer .section {
    position: relative;
}
body.tuiv2-active .mid-footer .section:first-child::before {
    content: 'COMPANY';
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
body.tuiv2-active .mid-footer .section:nth-child(2)::before {
    content: 'CATEGORIES';
    display: block;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

/* The legacy .home-main-container has internal padding that pushed our
   v2 sections (trust strip, hero, trending pills) to misalign with the
   container width. Reset for v2 pages. */
body.tuiv2-active .home-main-container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--tuiv2-bg-soft);
}