/* ==============================================================
   WIISSTTAA.LIVE — NEXT-GEN E-SPORT LIGHT MODE
   Phase 1: Global Light Foundation
   ==============================================================
   Load order: injected LAST after yt-phase1.css.
   Strategy: override YT-style tokens with e-sport tokens,
   reset body to pristine white, set typography, scrollbars.
   ============================================================== */


/* ==============================================================
   §1 — E-SPORT DESIGN SYSTEM TOKENS  (overrides yt-phase1 vars)
   ============================================================== */
:root {
    /* --- Core Backgrounds --- */
    --es-bg:              #ffffff;
    --es-bg-surface:      #f4f6f8;
    --es-bg-surface-alt:  #eef0f3;
    --es-bg-hover:        #eef0f3;
    --es-bg-input:        #f8f9fb;

    /* --- Text --- */
    --es-text-primary:    #0f141e;
    --es-text-secondary:  #64748b;
    --es-text-disabled:   #94a3b8;
    --es-text-inverse:    #ffffff;

    /* --- Borders --- */
    --es-border:          #e2e8f0;
    --es-border-subtle:   #f1f5f9;
    --es-border-strong:   #cbd5e1;

    /* --- Brand Accent --- */
    --es-red:             #ff003c;
    --es-red-hover:       #cc0030;
    --es-red-soft:        rgba(255, 0, 60, 0.10);
    --es-red-glow:        rgba(255, 0, 60, 0.22);

    /* --- Shadows --- */
    --es-shadow-xs:       0 1px 3px rgba(15, 20, 30, 0.06);
    --es-shadow-sm:       0 2px 8px rgba(15, 20, 30, 0.08);
    --es-shadow-md:       0 4px 20px rgba(15, 20, 30, 0.10);
    --es-shadow-lg:       0 8px 40px rgba(15, 20, 30, 0.13);
    --es-shadow-hover:    0 8px 32px rgba(255, 0, 60, 0.14);

    /* --- Typography --- */
    --es-font-heading:    'Rajdhani', 'Inter', Arial, sans-serif;
    --es-font-body:       'Inter', 'Roboto', Arial, sans-serif;

    /* --- Radius --- */
    --es-radius-sm:       4px;
    --es-radius-md:       8px;
    --es-radius-lg:       12px;

    /* --- Transitions --- */
    --es-transition:      all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --es-transition-fast: all 0.14s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Re-alias yt-phase1 tokens to e-sport values --- */
    --yt-bg-primary:      #ffffff;
    --yt-bg-surface:      #f4f6f8;
    --yt-bg-surface-alt:  #eef0f3;
    --yt-bg-hover:        #eef0f3;
    --yt-text-primary:    #0f141e;
    --yt-text-secondary:  #64748b;
    --yt-border:          #e2e8f0;
    --yt-border-subtle:   #f1f5f9;
    --yt-red:             #ff003c;
    --yt-red-hover:       #cc0030;
    --yt-font:            'Inter', 'Roboto', Arial, sans-serif;
}


/* ==============================================================
   §2 — GLOBAL RESET & BASELINE
   ============================================================== */

/* Kill any dark backgrounds set by old gaming/HUD themes */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: #ffffff !important;
    scroll-behavior: smooth;
}

body {
    background:   #ffffff !important;
    color:        var(--es-text-primary) !important;
    font-family:  var(--es-font-body) !important;
    font-size:    15px !important;
    line-height:  1.6 !important;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height:   100vh;
}

/* Kill pseudo-element overlays from gaming themes */
body::before,
body::after {
    display: none !important;
    content:  none !important;
    background: none !important;
}

/* Ensure no dark wrapper bleeds through */
#container-wrapper,
.content-wrapper,
.wrapper,
.page-wrapper,
#wrapper {
    background: #ffffff !important;
}


/* ==============================================================
   §3 — TYPOGRAPHY
   ============================================================== */

/* --- Headings: Rajdhani, bold, deep black --- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family:  var(--es-font-heading) !important;
    font-weight:  700 !important;
    color:        var(--es-text-primary) !important;
    line-height:  1.15 !important;
    letter-spacing: 0.01em;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.8rem) !important; }
h2 { font-size: clamp(1.40rem, 3vw, 2.1rem) !important; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.65rem) !important; }
h4 { font-size: clamp(1.05rem, 2vw, 1.35rem) !important; }
h5 { font-size: 1.05rem !important; }
h6 { font-size: 0.95rem !important; }

/* --- Body text: Inter, slate-dark --- */
p, li, td, th, blockquote, label, span, div {
    font-family: var(--es-font-body);
}

a {
    color:            var(--es-text-primary);
    text-decoration:  none;
    transition:       color var(--es-transition-fast);
}

a:hover {
    color:            var(--es-red);
    text-decoration:  none !important;
}

/* --- Post/card title overrides (Buzzy-specific classes) --- */
.post-title,
.entry-title,
.article-title,
.item-title,
.content-title,
.list-title,
.buzzyfeed-title,
.post__title,
.content__title,
.trending-title,
.feature-title {
    font-family:    var(--es-font-heading) !important;
    font-weight:    700 !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color:          var(--es-text-primary) !important;
    line-height:    1.18 !important;
}

/* --- Section / category headers --- */
.colheader,
.section-header,
.widget-title,
.sidebar-title,
.block-title {
    font-family:    var(--es-font-heading) !important;
    font-weight:    700 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size:      0.85rem !important;
    color:          var(--es-text-primary) !important;
}

/* Accent bar on section headers */
.colheader .header-title,
.section-header .title-text {
    position: relative;
    padding-left: 14px;
}

.colheader .header-title::before,
.section-header .title-text::before {
    content:    '';
    position:   absolute;
    left:       0;
    top:        0;
    bottom:     0;
    width:      4px;
    background: var(--es-red);
    border-radius: 2px;
}

/* --- Meta / secondary text --- */
.item-meta,
.post-meta,
.entry-meta,
.content-meta,
.post__info,
.content__info,
.content-timeline__content__info,
time, .time, .date {
    font-family: var(--es-font-body) !important;
    color:       var(--es-text-secondary) !important;
    font-size:   0.78rem !important;
}

/* --- Blockquotes --- */
blockquote {
    border-left:    4px solid var(--es-red) !important;
    background:     var(--es-bg-surface) !important;
    padding:        16px 20px !important;
    border-radius:  0 var(--es-radius-md) var(--es-radius-md) 0 !important;
    color:          var(--es-text-secondary) !important;
    font-style:     italic;
    margin:         1.5em 0 !important;
}


/* ==============================================================
   §4 — CUSTOM SCROLLBAR
   ============================================================== */

/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width:  8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}

::-webkit-scrollbar-thumb {
    background:    var(--es-red) !important;
    border-radius: 4px;
    border:        2px solid #f1f5f9;
    transition:    background 0.2s;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--es-red-hover) !important;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--es-red) #f1f5f9;
}


/* ==============================================================
   §5 — TEXT SELECTION
   ============================================================== */

::selection {
    background: var(--es-red) !important;
    color:      #ffffff !important;
}

::-moz-selection {
    background: var(--es-red) !important;
    color:      #ffffff !important;
}


/* ==============================================================
   §6 — NEUTRALISE REMAINING DARK ARTIFACTS
   Anything from wiissttaa-hud.css or old style.blade.php
   gaming overrides that might still be in compiled view cache.
   ============================================================== */

/* Kill dark backgrounds on all common containers */
.header,
.header__appbar,
.nav,
.navbar,
.main-nav,
.site-content,
.main-content,
.content-area,
.sidebar,
.widget,
.widget-area,
.card,
.post-card,
.article-card,
.item-card,
.list-item,
footer,
.footer,
.footer-bottom {
    background-color: transparent !important;
    color:            inherit !important;
}

/* Kill neon text-shadows globally */
* {
    text-shadow: none !important;
}

/* Kill neon box-shadows on non-interactive elements */
img,
figure,
.thumbnail,
.post-thumbnail,
.item-image,
.featured-image,
.content-timeline__media__image {
    box-shadow: none !important;
}

/* Kill gaming clip-paths on thumbnails */
.content-timeline__media__image,
.content-timeline__media__image a,
figure.content-body__image,
.post-thumbnail img,
.item-image img {
    clip-path: none !important;
}

/* Kill animated play-icon glows */
.icon-play,
.icon-video,
.play-btn,
.play-button {
    box-shadow: none !important;
    animation:  none !important;
}

/* Remove numbered-list pseudo-elements from gaming theme */
.sidebar-mosts__item::before {
    display: none !important;
}

/* Remove padding-left spacing from gaming numbered list */
.sidebar-mosts__item {
    padding-left: 0 !important;
}

/* Kill gaming colheader vertical bar (we re-add a better one above) */
.colheader::before {
    display: none !important;
}

/* Remove neon shadows from inline icons */
.material-icons,
.fa,
[class*="fa-"] {
    text-shadow: none !important;
}

/* Ensure modals / dropdowns stay light */
.dropdown,
.dropdown-container,
.dropdown-menu,
.share-dropdown,
.modal,
.modal-container,
.auth-modal {
    background:   #ffffff !important;
    color:        var(--es-text-primary) !important;
    border:       1px solid var(--es-border) !important;
    box-shadow:   var(--es-shadow-md) !important;
}


/* ==============================================================
   §7 — FOCUS & ACCESSIBILITY
   ============================================================== */

:focus-visible {
    outline:        2px solid var(--es-red);
    outline-offset: 2px;
}

button, [role="button"] {
    cursor: pointer;
}


/* ==============================================================
   §8 — UTILITY: SUPPRESS HORIZONTAL OVERFLOW
   ============================================================== */

html, body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height:    auto;
}


/* ==============================================================
   PHASE 2 — PREMIUM FLOATING HEADER
   Sticky glassy-white header, animated nav, e-sport accents.
   All selectors target buzzyfeed's exact class names.
   ============================================================== */


/* --------------------------------------------------------------
   §P2-1  HEADER SHELL — sticky + glassy white
   -------------------------------------------------------------- */

.header {
    position:         sticky !important;
    top:              0 !important;
    z-index:          1000 !important;
    width:            100% !important;
    background:       rgba(255, 255, 255, 0.88) !important;
    backdrop-filter:  blur(14px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
    border-bottom:    1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow:       0 2px 20px rgba(15, 20, 30, 0.07) !important;
    transition:       box-shadow 0.28s ease, background 0.28s ease !important;
    overflow:         visible !important;
}

/* Elevated state when page is scrolled — JS adds .header--scrolled */
.header--scrolled {
    background:  rgba(255, 255, 255, 0.97) !important;
    box-shadow:  0 4px 30px rgba(15, 20, 30, 0.11) !important;
}

/* Hide the searchbar overlay by default */
.header__searchbar {
    position:   absolute !important;
    top:        0 !important;
    left:       0 !important;
    right:      0 !important;
    z-index:    10 !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 4px 20px rgba(15, 20, 30, 0.08) !important;
}

/* The appbar row — height, flex */
.header__appbar {
    height:     64px !important;
    background: transparent !important;
}

.header__appbar .container {
    height:          64px !important;
    padding:         0 24px !important;
    max-width:       1400px !important;
    margin:          0 auto !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
}

.header__appbar .container::before,
.header__appbar .container::after {
    display: none !important;
}


/* --------------------------------------------------------------
   §P2-2  LEFT ZONE — hamburger + logo
   -------------------------------------------------------------- */

.header__appbar--left {
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
    float:       none !important;
    flex-shrink: 0;
}

/* Hamburger — clean icon button */
.header__appbar--left__nav {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           40px;
    height:          40px;
    border-radius:   var(--es-radius-sm) !important;
    cursor:          pointer;
    color:           var(--es-text-primary) !important;
    transition:      var(--es-transition) !important;
}

.header__appbar--left__nav:hover {
    background: var(--es-bg-surface) !important;
    color:      var(--es-red) !important;
}

.header__appbar--left__nav .material-icons {
    font-size: 22px !important;
    color:     inherit !important;
}

/* Logo */
.header__appbar--left__logo {
    display:     flex !important;
    align-items: center !important;
    flex-shrink: 0;
}

.header__appbar--left__logo a {
    display:    flex;
    align-items:center;
    transition: opacity 0.18s ease !important;
}

.header__appbar--left__logo a:hover { opacity: 0.82 !important; }

.header__appbar--left__logo .site-logo,
.header__appbar--left__logo img {
    height:     38px !important;
    width:      auto !important;
    max-width:  180px !important;
    object-fit: contain !important;
    filter:     none !important;
}


/* --------------------------------------------------------------
   §P2-3  CENTRE ZONE — desktop nav links
   -------------------------------------------------------------- */

.header__appbar--left__menu {
    display:     flex !important;
    align-items: center !important;
    height:      64px !important;
    margin-left: 28px !important;
}

.header__appbar--left__menu__list {
    display:         flex !important;
    align-items:     center !important;
    list-style:      none !important;
    margin:          0 !important;
    padding:         0 !important;
    height:          64px !important;
    gap:             2px !important;
}

.header__appbar--left__menu__list__item {
    position: relative;
    height:   64px;
    display:  flex;
    align-items: center;
}

/* Nav link base */
.header__appbar--left__menu__list__item > a {
    display:        flex !important;
    align-items:    center !important;
    height:         64px !important;
    padding:        0 14px !important;
    font-family:    var(--es-font-heading) !important;
    font-weight:    600 !important;
    font-size:      0.8rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color:          var(--es-text-secondary) !important;
    text-decoration:none !important;
    position:       relative;
    transition:     color 0.18s ease !important;
    white-space:    nowrap;
}

/* Animated underline — slides in from left on hover */
.header__appbar--left__menu__list__item > a::after {
    content:    '' !important;
    position:   absolute !important;
    bottom:     0 !important;
    left:       14px !important;
    right:      14px !important;
    height:     3px !important;
    background: var(--es-red) !important;
    transform:  scaleX(0) !important;
    transform-origin: left center !important;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 2px 2px 0 0 !important;
}

.header__appbar--left__menu__list__item > a:hover,
.header__appbar--left__menu__list__item > a:hover > i {
    color: var(--es-text-primary) !important;
}

.header__appbar--left__menu__list__item > a:hover::after {
    transform: scaleX(1) !important;
}

/* Active link */
.header__appbar--left__menu__list__item.active > a,
.header__appbar--left__menu__list__item > a.active {
    color: var(--es-text-primary) !important;
}

.header__appbar--left__menu__list__item.active > a::after,
.header__appbar--left__menu__list__item > a.active::after {
    transform: scaleX(1) !important;
}

/* Kill old gaming ::before underline bars */
.header__appbar--left__menu__list__item > a::before {
    display: none !important;
}


/* --------------------------------------------------------------
   §P2-4  RIGHT ZONE — search, create button, user avatar
   -------------------------------------------------------------- */

.header__appbar--right {
    display:     flex !important;
    align-items: center !important;
    gap:         6px !important;
    float:       none !important;
    flex-shrink: 0;
}

/* Search icon button */
.header__appbar--right__search,
.header__appbar--right__search__button {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           38px;
    height:          38px;
    border-radius:   var(--es-radius-sm) !important;
    color:           var(--es-text-secondary) !important;
    cursor:          pointer;
    transition:      var(--es-transition) !important;
}

.header__appbar--right__search__button:hover {
    background: var(--es-bg-surface) !important;
    color:      var(--es-red) !important;
}

.header__appbar--right__search__button .material-icons {
    font-size: 20px !important;
    color:     inherit !important;
}

/* Create / post button — chamfered e-sport style */
.button.button-create {
    display:        inline-flex !important;
    align-items:    center !important;
    gap:            6px !important;
    height:         36px !important;
    padding:        0 18px !important;
    background:     var(--es-red) !important;
    color:          #ffffff !important;
    font-family:    var(--es-font-heading) !important;
    font-weight:    700 !important;
    font-size:      0.78rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border:         none !important;
    border-radius:  var(--es-radius-sm) !important;
    cursor:         pointer;
    text-decoration:none !important;
    transition:     background 0.18s ease, transform 0.12s ease,
                    box-shadow 0.18s ease !important;
    clip-path:      none !important;
    box-shadow:     0 2px 10px rgba(255, 0, 60, 0.25) !important;
}

.button.button-create:hover {
    background:  var(--es-red-hover) !important;
    box-shadow:  0 4px 18px rgba(255, 0, 60, 0.38) !important;
    transform:   translateY(-1px) !important;
    color:       #ffffff !important;
}

.button.button-create:active {
    transform:   scale(0.97) !important;
    box-shadow:  0 2px 8px rgba(255, 0, 60, 0.2) !important;
}

/* User avatar button */
.header__appbar--right__settings__button {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           38px;
    height:          38px;
    border-radius:   var(--es-radius-sm) !important;
    cursor:          pointer;
    transition:      var(--es-transition) !important;
    color:           var(--es-text-secondary) !important;
}

.header__appbar--right__settings__button:hover {
    background: var(--es-bg-surface) !important;
}

.header__appbar--right__settings__button img {
    width:         30px !important;
    height:        30px !important;
    border-radius: 50% !important;
    object-fit:    cover;
    border:        2px solid var(--es-border) !important;
    transition:    border-color 0.18s !important;
}

.header__appbar--right__settings__button:hover img {
    border-color: var(--es-red) !important;
}

/* Badge count */
.badge-count {
    position:   absolute !important;
    top:        4px !important;
    right:      4px !important;
    min-width:  16px;
    height:     16px;
    padding:    0 4px;
    background: var(--es-red) !important;
    color:      #ffffff !important;
    font-size:  0.6rem !important;
    font-weight:700 !important;
    border-radius: 9999px !important;
    display:    flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}


/* --------------------------------------------------------------
   §P2-5  NOTICE / AUTH ZONE
   -------------------------------------------------------------- */

.header__appbar--right__notice {
    display:     flex !important;
    align-items: center !important;
}

.header__appbar--right__notice a,
.header__appbar--right__notice .material-button {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           38px;
    height:          38px;
    border-radius:   var(--es-radius-sm) !important;
    color:           var(--es-text-secondary) !important;
    transition:      var(--es-transition) !important;
}

.header__appbar--right__notice a:hover,
.header__appbar--right__notice .material-button:hover {
    background: var(--es-bg-surface) !important;
    color:      var(--es-red) !important;
}


/* --------------------------------------------------------------
   §P2-6  CATEGORY MEGA-DROPDOWN
   -------------------------------------------------------------- */

.category-dropdown.dropdown-container,
.dropdown-container {
    background:    #ffffff !important;
    border:        1px solid var(--es-border) !important;
    border-top:    3px solid var(--es-red) !important;
    border-radius: 0 0 var(--es-radius-md) var(--es-radius-md) !important;
    box-shadow:    0 8px 40px rgba(15, 20, 30, 0.12) !important;
    color:         var(--es-text-primary) !important;
}

.dropdown-container__item,
.dropdown-container__item.ripple {
    color:      var(--es-text-secondary) !important;
    font-family:var(--es-font-body) !important;
    font-size:  0.88rem !important;
    transition: background 0.15s, color 0.15s !important;
}

.dropdown-container__item:hover,
.dropdown-container__item.ripple:hover {
    background: var(--es-red-soft) !important;
    color:      var(--es-red) !important;
}

.dropdown-container__item a {
    color: inherit !important;
}

/* Dropdown inner sections */
.category-dropdown_sec {
    background: transparent !important;
    border-color: var(--es-border) !important;
}

.community_title {
    font-family:    var(--es-font-heading) !important;
    font-weight:    700 !important;
    font-size:      1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--es-text-primary) !important;
}

.community_desc {
    color:     var(--es-text-secondary) !important;
    font-size: 0.83rem !important;
}


/* --------------------------------------------------------------
   §P2-7  SETTINGS DROPDOWN
   -------------------------------------------------------------- */

.settings-dropdown.dropdown-container {
    min-width:     200px !important;
    border-top:    3px solid var(--es-red) !important;
    border-radius: 0 0 var(--es-radius-md) var(--es-radius-md) !important;
}

.settings-dropdown .dropdown-container__item a {
    font-family: var(--es-font-body) !important;
    font-size:   0.88rem !important;
    color:       var(--es-text-secondary) !important;
    display:     block;
    width:       100%;
}

.settings-dropdown .dropdown-container__item:hover a {
    color: var(--es-red) !important;
}


/* --------------------------------------------------------------
   §P2-8  SEARCH OVERLAY
   -------------------------------------------------------------- */

.header__searchbar__container {
    max-width: 680px;
    margin:    0 auto;
    padding:   10px 24px;
}

.header__searchbar__container__input {
    width:          100% !important;
    background:     var(--es-bg-surface) !important;
    border:         1.5px solid var(--es-border) !important;
    border-radius:  var(--es-radius-md) !important;
    padding:        10px 16px !important;
    font-family:    var(--es-font-body) !important;
    font-size:      1rem !important;
    color:          var(--es-text-primary) !important;
    outline:        none !important;
    transition:     border-color 0.18s, box-shadow 0.18s !important;
}

.header__searchbar__container__input:focus {
    border-color: var(--es-red) !important;
    box-shadow:   0 0 0 3px var(--es-red-soft) !important;
    background:   #ffffff !important;
}

.header__searchbar__container__input::placeholder {
    color: var(--es-text-disabled) !important;
}

.header__searchbar__container__close {
    color:      var(--es-text-secondary) !important;
    transition: color 0.15s !important;
}

.header__searchbar__container__close:hover {
    color: var(--es-red) !important;
}


/* --------------------------------------------------------------
   §P2-9  MOBILE HEADER
   -------------------------------------------------------------- */

.header-mobile,
.header__mobile,
.mobile-menu,
#mobile-menu {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(14px) !important;
    border-top:  1px solid var(--es-border) !important;
    box-shadow:  0 4px 20px rgba(15, 20, 30, 0.08) !important;
}

.header-mobile a,
.header__mobile a,
.mobile-menu a {
    color:      var(--es-text-primary) !important;
    font-family:var(--es-font-heading) !important;
    font-weight:600 !important;
    font-size:  0.85rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.15s !important;
}

.header-mobile a:hover,
.header__mobile a:hover,
.mobile-menu a:hover {
    color: var(--es-red) !important;
}



/* ==============================================================
   PHASE 3 — E-SPORT HERO & POST GRID  (Homepage / Category)
   Premium CSS Grid cards, image hover zoom, Rajdhani titles,
   sidebar overhaul. Zero PHP changes.
   ============================================================== */


/* --------------------------------------------------------------
   §P3-1  PAGE LAYOUT — two-column grid (content + sidebar)
   -------------------------------------------------------------- */

.buzz-container {
    background: #ffffff !important;
    padding-top: 24px !important;
}

.global-container.container,
.global-container {
    display:               grid !important;
    grid-template-columns: 1fr 320px !important;
    grid-template-rows:    auto !important;
    gap:                   32px !important;
    align-items:           start !important;
    padding-top:           28px !important;
    padding-bottom:        48px !important;
    float:                 none !important;
    max-width:             1260px !important;
    margin:                0 auto !important;
}

.global-container > .content,
.global-container.container > .content {
    min-width:   0 !important;
    float:       none !important;
    width:       100% !important;
    padding:     0 !important;
    margin:      0 !important;
}

.global-container > .sidebar,
.global-container.container > .sidebar {
    width:       100% !important;
    float:       none !important;
    padding:     0 !important;
    margin:      0 !important;
    min-width:   0 !important;
}

.sidebar--fixed {
    position:  sticky !important;
    top:       80px !important;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--es-red) #f1f5f9;
}

@media (max-width: 900px) {
    .global-container.container,
    .global-container {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .global-container > .sidebar,
    .global-container.container > .sidebar {
        display: none !important;
    }
}


/* --------------------------------------------------------------
   §P3-2  CARD GRID  (.content-timeline__list)
   -------------------------------------------------------------- */

.content-timeline {
    width: 100% !important;
}

.content-timeline__list {
    display:               grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap:                   20px !important;
    list-style:            none !important;
    padding:               0 !important;
    margin:                0 !important;
    float:                 none !important;
}

/* Injected sidebar-block widgets (videos/polls) go full width */
.content-timeline__list > .sidebar-block {
    grid-column: 1 / -1 !important;
}

@media (max-width: 640px) {
    .content-timeline__list {
        grid-template-columns: 1fr !important;
    }
}


/* --------------------------------------------------------------
   §P3-3  THE CARD  (.content-timeline__item)
   -------------------------------------------------------------- */

.content-timeline__item {
    position:      relative !important;
    background:    #ffffff !important;
    border:        1px solid var(--es-border) !important;
    border-radius: var(--es-radius-md) !important;
    overflow:      hidden !important;
    display:       flex !important;
    flex-direction: column !important;
    float:         none !important;
    margin:        0 !important;
    padding:       0 !important;
    transition:    transform 0.24s cubic-bezier(0.4,0,0.2,1),
                   box-shadow 0.24s cubic-bezier(0.4,0,0.2,1),
                   border-color 0.2s !important;
    will-change:   transform, box-shadow;
}

/* Hover lift + premium shadow */
.content-timeline__item:hover {
    transform:    translateY(-5px) !important;
    box-shadow:   var(--es-shadow-hover) !important;
    border-color: rgba(255, 0, 60, 0.28) !important;
}

/* Left accent flash on hover */
.content-timeline__item::before {
    content:    '' !important;
    position:   absolute !important;
    left:       0 !important; top: 0 !important; bottom: 0 !important;
    width:      3px !important;
    background: var(--es-red) !important;
    transform:  scaleY(0) !important;
    transform-origin: top !important;
    transition: transform 0.22s ease !important;
    z-index:    2 !important;
    border-radius: 0 !important;
}

.content-timeline__item:hover::before {
    transform: scaleY(1) !important;
}

/* Badge (quiz/poll/featured) */
.content-timeline__item > .badge {
    position: absolute !important;
    top:      10px !important;
    left:     10px !important;
    z-index:  3 !important;
}

/* Reaction icon */
.content-timeline__item > .reaction-icon,
.content-timeline__item > .emoji-wrapper {
    position: absolute !important;
    top:      10px !important;
    left:     10px !important;
    z-index:  3 !important;
}


/* --------------------------------------------------------------
   §P3-4  CARD INNER — flex column body
   -------------------------------------------------------------- */

.content-timeline--right {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 !important;
    height:         100% !important;
}

.content-timeline__link {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 !important;
    float:          none !important;
    overflow:       visible !important;
}

.content-timeline__link::before,
.content-timeline__link::after {
    display: none !important;
}


/* --------------------------------------------------------------
   §P3-5  THUMBNAIL — 16:9 with zoom-on-hover
   -------------------------------------------------------------- */

.content-timeline__media {
    position: relative !important;
    width:    100% !important;
    flex-shrink: 0 !important;
}

.content-timeline__media__image {
    position:      relative !important;
    width:         100% !important;
    aspect-ratio:  16 / 9 !important;
    overflow:      hidden !important;
    margin:        0 !important;
    padding:       0 !important;
    background:    var(--es-bg-surface) !important;
    clip-path:     none !important;
    border-radius: 0 !important;
}

.content-timeline__media__image a {
    display: block !important;
    width:   100% !important;
    height:  100% !important;
}

.content-timeline__media__image img {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    clip-path:  none !important;
    box-shadow: none !important;
}

.content-timeline__item:hover .content-timeline__media__image img {
    transform: scale(1.07) !important;
}


/* --------------------------------------------------------------
   §P3-6  CARD TEXT ZONE
   -------------------------------------------------------------- */

.content-timeline__detail {
    flex:    1 !important;
    display: flex !important;
    width:   100% !important;
    float:   none !important;
    padding: 0 !important;
}

.content-timeline__detail__container {
    display:        flex !important;
    flex-direction: column !important;
    flex:           1 !important;
    padding:        14px 16px 12px !important;
    gap:            6px !important;
    float:          none !important;
    overflow:       visible !important;
}

/* Category tag */
.content-timeline__detail__cat,
.content-timeline__detail__cat a {
    font-family:    var(--es-font-heading) !important;
    font-size:      0.68rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color:          var(--es-red) !important;
    text-decoration:none !important;
}

.content-timeline__detail__cat a:hover {
    text-decoration: underline !important;
}

/* Title — Rajdhani bold, uppercase */
.content-timeline__detail__title,
.content-timeline__detail__title a {
    font-family:    var(--es-font-heading) !important;
    font-size:      1.05rem !important;
    font-weight:    700 !important;
    line-height:    1.22 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color:          var(--es-text-primary) !important;
    text-decoration:none !important;
    transition:     color 0.15s !important;
    margin:         0 !important;
    display:        -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow:       hidden !important;
}

.content-timeline__detail__title:hover,
.content-timeline__detail__title a:hover {
    color: var(--es-red) !important;
}

/* Excerpt */
.content-timeline__detail__desc {
    font-family: var(--es-font-body) !important;
    font-size:   0.82rem !important;
    color:       var(--es-text-secondary) !important;
    line-height: 1.5 !important;
    margin:      0 !important;
    display:     -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:    hidden !important;
}

/* Meta / date row */
.content-timeline__detail--bottom {
    display:     flex !important;
    align-items: center !important;
    gap:         12px !important;
    margin-top:  auto !important;
    padding-top: 8px !important;
    border-top:  1px solid var(--es-border-subtle) !important;
    font-family: var(--es-font-body) !important;
    font-size:   0.73rem !important;
    color:       var(--es-text-disabled) !important;
}

/* Share icon (top-right) */
.content-timeline__detail__social-media {
    position:  absolute !important;
    top:       10px !important;
    right:     10px !important;
    z-index:   4 !important;
    opacity:   0 !important;
    transition: opacity 0.18s !important;
}

.content-timeline__item:hover .content-timeline__detail__social-media {
    opacity: 1 !important;
}

.content-timeline__detail__social-media > span {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           30px;
    height:          30px;
    background:      rgba(255,255,255,0.92) !important;
    border-radius:   var(--es-radius-sm) !important;
    cursor:          pointer;
    color:           var(--es-text-secondary) !important;
    box-shadow:      var(--es-shadow-xs) !important;
    transition:      background 0.15s, color 0.15s !important;
}

.content-timeline__detail__social-media > span:hover {
    background: var(--es-red) !important;
    color:      #ffffff !important;
}

.content-timeline__detail__social-media > span .material-icons {
    font-size: 16px !important;
}


/* --------------------------------------------------------------
   §P3-7  HEADLINE / HERO POSTS  (show_headline_posts)
   -------------------------------------------------------------- */

.homefeatures,
.headline-posts,
.buzzyfeed-features {
    background:  var(--es-bg-surface) !important;
    border-bottom: 1px solid var(--es-border) !important;
    padding:     0 !important;
    margin-bottom: 0 !important;
}

/* Hero tiles container */
.homefeatures .tiles,
.tiles-wrapper,
.homefeatures-inner {
    display:   grid !important;
    gap:       3px !important;
    width:     100% !important;
    max-width: 1260px !important;
    margin:    0 auto !important;
}

/* Individual tile */
.homefeatures .tile,
.tile {
    position:   relative !important;
    overflow:   hidden !important;
    background: #111 !important;
    clip-path:  none !important;
}

/* Hero image zoom */
.homefeatures .tile a,
.tile a {
    display: block !important;
    width:   100% !important;
    height:  100% !important;
}

.homefeatures .tile img,
.tile img {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    transition: transform 0.55s cubic-bezier(0.4,0,0.2,1) !important;
    clip-path:  none !important;
}

.homefeatures .tile:hover img,
.tile:hover img {
    transform: scale(1.06) !important;
}

/* Gradient overlay on hero tiles */
.homefeatures .tile::after,
.tile::after {
    content:    '' !important;
    position:   absolute !important;
    inset:      0 !important;
    background: linear-gradient(
        to top,
        rgba(15, 20, 30, 0.78) 0%,
        rgba(15, 20, 30, 0.22) 55%,
        transparent 100%
    ) !important;
    z-index:    1 !important;
    pointer-events: none !important;
}

/* Hero tile title */
.homefeatures .tile-title,
.homefeatures .tile h2,
.homefeatures .tile h3,
.tile-title {
    position:       absolute !important;
    bottom:         16px !important;
    left:           16px !important;
    right:          16px !important;
    z-index:        2 !important;
    font-family:    var(--es-font-heading) !important;
    font-size:      clamp(1rem, 2vw, 1.45rem) !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color:          #ffffff !important;
    line-height:    1.18 !important;
    text-shadow:    none !important;
    margin:         0 !important;
}

.homefeatures .tile:hover .tile-title,
.tile:hover .tile-title {
    color: #ffffff !important;
}

/* Red accent bar above hero title */
.homefeatures .tile-title::before,
.tile-title::before {
    display: none !important;
}


/* --------------------------------------------------------------
   §P3-8  SECTION HEADERS  (.colheader)
   -------------------------------------------------------------- */

.colheader {
    display:        flex !important;
    align-items:    center !important;
    gap:            10px !important;
    margin-bottom:  14px !important;
    padding-bottom: 10px !important;
    border-bottom:  2px solid var(--es-border) !important;
    background:     transparent !important;
    float:          none !important;
    overflow:       visible !important;
}

.colheader .header-title {
    font-family:    var(--es-font-heading) !important;
    font-size:      0.78rem !important;
    font-weight:    700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color:          var(--es-text-primary) !important;
    margin:         0 !important;
    padding:        0 !important;
    position:       relative !important;
    padding-left:   12px !important;
}

.colheader .header-title::before {
    content:    '' !important;
    position:   absolute !important;
    left:       0 !important; top: 0 !important; bottom: 0 !important;
    width:      4px !important;
    background: var(--es-red) !important;
    border-radius: 2px !important;
    display:    block !important;
}

/* Kill old ::after decorations */
.colheader .header-title::after {
    display: none !important;
}


/* --------------------------------------------------------------
   §P3-9  SIDEBAR CARD LIST  (.sidebar-mosts)
   -------------------------------------------------------------- */

.sidebar-block {
    background:    #ffffff !important;
    border:        1px solid var(--es-border) !important;
    border-radius: var(--es-radius-md) !important;
    padding:       16px !important;
    margin-bottom: 20px !important;
    float:         none !important;
    overflow:      hidden !important;
}

.sidebar-mosts {
    list-style: none !important;
    margin:     0 !important;
    padding:    0 !important;
    display:    flex !important;
    flex-direction: column !important;
    gap:        2px !important;
}

.sidebar-mosts__item {
    padding:       0 !important;
    margin:        0 !important;
    border-radius: var(--es-radius-sm) !important;
    transition:    background 0.15s !important;
}

.sidebar-mosts__item:hover {
    background: var(--es-bg-surface) !important;
}

.sidebar-mosts__item__link {
    display:    flex !important;
    gap:        10px !important;
    padding:    8px !important;
    text-decoration: none !important;
    align-items: flex-start !important;
}

.sidebar-mosts__item__image {
    width:      72px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 16/9 !important;
    overflow:   hidden !important;
    border-radius: var(--es-radius-sm) !important;
    background: var(--es-bg-surface) !important;
}

.sidebar-mosts__item__image__item,
.sidebar-mosts__item__image img {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    transition: transform 0.35s ease !important;
    clip-path:  none !important;
}

.sidebar-mosts__item:hover .sidebar-mosts__item__image__item,
.sidebar-mosts__item:hover .sidebar-mosts__item__image img {
    transform: scale(1.08) !important;
}

.sidebar-mosts__item__caption {
    flex:        1 !important;
    min-width:   0 !important;
    padding:     0 !important;
    margin:      0 !important;
}

.sidebar-mosts__item__title {
    font-family:    var(--es-font-heading) !important;
    font-size:      0.84rem !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color:          var(--es-text-primary) !important;
    line-height:    1.22 !important;
    margin:         0 !important;
    display:        -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow:       hidden !important;
    transition:     color 0.15s !important;
}

.sidebar-mosts__item:hover .sidebar-mosts__item__title {
    color: var(--es-red) !important;
}

/* Sidebar — body / figure resets */
.sidebar-mosts__item__body {
    display: contents !important;
    margin:  0 !important;
}


/* --------------------------------------------------------------
   §P3-10  LOAD MORE BUTTON
   -------------------------------------------------------------- */

.content-timeline__more {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px !important;
    margin:          28px auto 0 !important;
    padding:         0 24px !important;
    height:          42px !important;
    background:      #ffffff !important;
    border:          1.5px solid var(--es-border-strong) !important;
    border-radius:   var(--es-radius-sm) !important;
    cursor:          pointer !important;
    font-family:     var(--es-font-heading) !important;
    font-weight:     700 !important;
    font-size:       0.78rem !important;
    letter-spacing:  0.1em !important;
    text-transform:  uppercase !important;
    color:           var(--es-text-secondary) !important;
    width:           fit-content !important;
    transition:      var(--es-transition) !important;
    box-shadow:      none !important;
}

.content-timeline__more:hover {
    border-color: var(--es-red) !important;
    color:        var(--es-red) !important;
    box-shadow:   0 0 0 3px var(--es-red-soft) !important;
}

.content-timeline__more__icon {
    font-size: 18px !important;
    color:     inherit !important;
}

/* Spinner */
.content-spinner {
    display: flex !important;
    justify-content: center !important;
    padding: 24px 0 !important;
}

.content-spinner .path {
    stroke: var(--es-red) !important;
}


/* --------------------------------------------------------------
   §P3-11  PAGINATION (category / tag / search pages)
   -------------------------------------------------------------- */

.pagination,
.center-elements {
    display:         flex !important;
    justify-content: center !important;
    padding:         28px 0 0 !important;
}

.pagination li a,
.pagination li span {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    min-width:       36px !important;
    height:          36px !important;
    padding:         0 10px !important;
    border:          1.5px solid var(--es-border) !important;
    border-radius:   var(--es-radius-sm) !important;
    font-family:     var(--es-font-heading) !important;
    font-weight:     600 !important;
    font-size:       0.82rem !important;
    color:           var(--es-text-secondary) !important;
    text-decoration: none !important;
    transition:      var(--es-transition-fast) !important;
    background:      #ffffff !important;
}

.pagination li a:hover {
    border-color: var(--es-red) !important;
    color:        var(--es-red) !important;
}

.pagination li.active a,
.pagination li.active span,
.pagination li > span.current {
    background:   var(--es-red) !important;
    border-color: var(--es-red) !important;
    color:        #ffffff !important;
}



/* ==============================================================
   §P4  PHASE 2 — CINEMATIC POST HERO
   Full-width cover image with gradient overlay, title & meta
   ============================================================== */

/* --------------------------------------------------------------
   §P4-1  HERO SHELL
   -------------------------------------------------------------- */

.es-post-hero {
    position:         relative !important;
    width:            100% !important;
    height:           520px !important;
    overflow:         hidden !important;
    background:       #0f141e !important;
    /* remove top padding gap — hero sits flush under header */
    margin-top:       0 !important;
    margin-bottom:    0 !important;
}

/* On mobile reduce hero height */
@media (max-width: 767px) {
    .es-post-hero {
        height: 300px !important;
    }
}

/* --------------------------------------------------------------
   §P4-2  BACKGROUND IMAGE
   -------------------------------------------------------------- */

.es-post-hero__bg {
    position:          absolute !important;
    inset:             0 !important;
    width:             100% !important;
    height:            100% !important;
    object-fit:        cover !important;
    object-position:   center 30% !important;
    /* Subtle scale-out on page load via animation */
    animation:         esHeroZoom 8s ease-out forwards !important;
    filter:            saturate(0.85) brightness(0.72) !important;
}

@keyframes esHeroZoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1.00); }
}

/* Fallback when no image: gradient background */
.es-post-hero--no-image {
    background: linear-gradient(135deg, #0f141e 0%, #1e2533 50%, #111827 100%) !important;
}

/* --------------------------------------------------------------
   §P4-3  GRADIENT OVERLAY  (multi-layer, cinematic)
   -------------------------------------------------------------- */

.es-post-hero__overlay {
    position:   absolute !important;
    inset:      0 !important;
    background: linear-gradient(
        to bottom,
        rgba(5,8,14,0.10)   0%,
        rgba(5,8,14,0.20)  30%,
        rgba(5,8,14,0.65)  65%,
        rgba(5,8,14,0.92) 100%
    ) !important;
    /* Thin red line at very bottom of overlay — brand accent */
    border-bottom: 3px solid #e1062c !important;
}

/* --------------------------------------------------------------
   §P4-4  INNER CONTENT POSITIONER
   -------------------------------------------------------------- */

.es-post-hero__inner {
    position:        absolute !important;
    bottom:          0 !important;
    left:            0 !important;
    right:           0 !important;
    padding:         36px 40px 34px !important;
    max-width:       1125px !important;
    margin:          0 auto !important;
    width:           100% !important;
    /* position inside the full-width hero but align to container width */
    left:            50% !important;
    transform:       translateX(-50%) !important;
}

@media (max-width: 767px) {
    .es-post-hero__inner {
        padding: 20px 18px 20px !important;
    }
}

/* --------------------------------------------------------------
   §P4-5  CATEGORY BADGE STRIP
   -------------------------------------------------------------- */

.es-post-hero__cats {
    display:         flex !important;
    flex-wrap:       wrap !important;
    gap:             6px !important;
    margin-bottom:   12px !important;
}

.es-post-hero__cat {
    display:          inline-block !important;
    padding:          3px 10px !important;
    font-size:        10px !important;
    font-weight:      800 !important;
    letter-spacing:   1.2px !important;
    text-transform:   uppercase !important;
    color:            #ffffff !important;
    background:       #e1062c !important;
    border-radius:    3px !important;
    text-decoration:  none !important;
    transition:       background 0.14s ease !important;
    font-family:      Arial, Helvetica, sans-serif !important;
}

.es-post-hero__cat:hover {
    background: #bf0424 !important;
    color:      #ffffff !important;
}

/* --------------------------------------------------------------
   §P4-6  HERO TITLE
   -------------------------------------------------------------- */

.es-post-hero__title {
    margin:           0 0 14px !important;
    padding:          0 !important;
    font-size:        clamp(1.6rem, 3.2vw, 2.6rem) !important;
    font-weight:      800 !important;
    line-height:      1.18 !important;
    color:            #ffffff !important;
    letter-spacing:   -0.3px !important;
    text-shadow:      0 2px 18px rgba(0,0,0,0.55) !important;
    font-family:      Arial, Helvetica, sans-serif !important;
    word-break:       break-word !important;
    max-width:        820px !important;
}

/* --------------------------------------------------------------
   §P4-7  HERO META ROW  (date · read-time · share counts)
   -------------------------------------------------------------- */

.es-post-hero__meta {
    display:          flex !important;
    align-items:      center !important;
    flex-wrap:        wrap !important;
    gap:              14px !important;
    font-size:        12px !important;
    font-weight:      600 !important;
    color:            rgba(255,255,255,0.72) !important;
    font-family:      Arial, Helvetica, sans-serif !important;
    letter-spacing:   .2px !important;
}

.es-post-hero__meta i {
    color:            rgba(255,255,255,0.50) !important;
    margin-right:     4px !important;
    font-size:        12px !important;
}

.es-post-hero__meta a {
    color:            rgba(255,255,255,0.72) !important;
    text-decoration:  none !important;
}

.es-post-hero__meta a:hover {
    color: #ffffff !important;
}

/* Bullet separator between meta items */
.es-post-hero__meta-sep {
    width:  4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.35) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* --------------------------------------------------------------
   §P4-8  SUPPRESS ORIGINAL POST-HEAD TITLE + USER-INFO
   (content moved into hero; originals hidden)
   -------------------------------------------------------------- */

/* Hide duplicate title inside .post-head (it's now in the hero) */
.es-post-page .post-content .post .post-head > h1.post-title {
    display: none !important;
}

/* Hide the old user-info block (author) in .post-head__bar */
.es-post-page .post-content .post .post-head .post-head__bar .user-info {
    display: none !important;
}

/* Expand meta to full width when author hidden */
.es-post-page .post-content .post .post-head .post-head__bar .post-head__meta {
    float:  none !important;
    width:  100% !important;
    text-align: left !important;
}

/* Suppress duplicate body/description text under hero title (first <p> in post-head) */
.es-post-page .post-content .post .post-head > p {
    display: none !important;
}

/* The share/social row beneath the hero — give it some top breathing room */
.es-post-page .post-content .post .post-head {
    padding-top: 18px !important;
}

/* Kill the default post-content top margin/padding so hero is flush */
.es-post-page .content {
    padding-top: 0 !important;
}
.es-post-page .post-content {
    background: #ffffff !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Full-width hero stretches outside the container */
.es-post-hero-wrapper {
    width:  100vw !important;
    left:   50% !important;
    right:  50% !important;
    margin-left:  -50vw !important;
    margin-right: -50vw !important;
    position:     relative !important;
    overflow:     hidden !important;
}

/* --------------------------------------------------------------
   §P4-9  SHARE-COUNT + SOCIAL STRIP  (below hero, inside container)
   -------------------------------------------------------------- */

/* Make socials row a clean horizontal flex strip */
.es-post-page .post-head .post-head__bar {
    border-top:    1px solid #e5e7eb !important;
    padding-top:   12px !important;
    margin-top:    10px !important;
    display:       flex !important;
    align-items:   center !important;
    flex-wrap:     wrap !important;
    gap:           8px !important;
}

/* --------------------------------------------------------------
   §P4-10  SCROLL-IN ANIMATION — hero inner content
   -------------------------------------------------------------- */

.es-post-hero__inner {
    animation: esHeroSlideUp 0.55s cubic-bezier(0.22,1,0.36,1) both !important;
    animation-delay: 0.12s !important;
}

@keyframes esHeroSlideUp {
    from {
        opacity:   0;
        transform: translateX(-50%) translateY(22px);
    }
    to {
        opacity:   1;
        transform: translateX(-50%) translateY(0);
    }
}



/* ==============================================================
   §P5  X / TWITTER FEED SIDEBAR WIDGET  — native light look
   ============================================================== */

.es-x-feed-card {
    background:    #ffffff !important;
    border:        1.5px solid var(--es-border) !important;
    border-radius: var(--es-radius-md) !important;
    overflow:      hidden !important;
    margin-top:    24px !important;
    box-shadow:    var(--es-shadow-sm) !important;
}

/* Header row */
.es-x-feed-card__header {
    display:         flex !important;
    align-items:     center !important;
    justify-content: space-between !important;
    padding:         14px 16px 12px !important;
    border-bottom:   1px solid var(--es-border-subtle) !important;
}

.es-x-feed-card__brand {
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
}

.es-x-feed-card__x-logo {
    width:  22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    fill:   #0f141e !important;
}

.es-x-feed-card__meta {
    display:        flex !important;
    flex-direction: column !important;
    line-height:    1.2 !important;
}

.es-x-feed-card__name {
    font-size:   13px !important;
    font-weight: 800 !important;
    color:       var(--es-text-primary) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

.es-x-feed-card__handle {
    font-size:   11px !important;
    color:       var(--es-text-secondary) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

.es-x-feed-card__follow-btn {
    display:       inline-flex !important;
    align-items:   center !important;
    padding:       5px 14px !important;
    border-radius: 999px !important;
    background:    #0f141e !important;
    color:         #ffffff !important;
    font-size:     12px !important;
    font-weight:   800 !important;
    font-family:   Arial, Helvetica, sans-serif !important;
    text-decoration: none !important;
    transition:    background 0.14s ease !important;
}

.es-x-feed-card__follow-btn:hover {
    background: #e1062c !important;
    color:      #ffffff !important;
}

/* Twitter iframe container */
.es-x-feed-card__timeline {
    max-height: 480px !important;
    overflow:   hidden !important;
}

.es-x-feed-card__timeline .twitter-timeline {
    display: block !important;
    width:   100% !important;
}

/* Footer link */
.es-x-feed-card__footer {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             5px !important;
    padding:         10px 16px !important;
    border-top:      1px solid var(--es-border-subtle) !important;
    font-size:       12px !important;
    font-weight:     600 !important;
    color:           var(--es-text-secondary) !important;
    text-decoration: none !important;
    transition:      color 0.14s ease !important;
    font-family:     Arial, Helvetica, sans-serif !important;
}

.es-x-feed-card__footer:hover {
    color: var(--es-red) !important;
}


/* ==============================================================
   §P6  SHARE BUTTON &  ICON VISIBILITY FIX
   Targets: .external-sign-in .Facebook / .Twitter / .Pinterest
            .Reddit  — used in postsociallinks.blade.php
   ============================================================== */

/* Base wrapper */
.external-sign-in {
    display:     flex !important;
    flex-wrap:   wrap !important;
    align-items: center !important;
    gap:         6px !important;
    padding:     12px 0 !important;
}

/* Share count pill */
span.sharecount {
    background:    var(--es-bg-surface) !important;
    border:        1.5px solid var(--es-border) !important;
    border-radius: var(--es-radius-sm) !important;
    color:         var(--es-text-primary) !important;
    font-size:     12px !important;
    font-weight:   700 !important;
    height:        auto !important;
    padding:       5px 10px !important;
    text-align:    center !important;
    float:         none !important;
    margin:        0 !important;
    width:         auto !important;
    min-width:     54px !important;
    line-height:   1.3 !important;
    display:       inline-block !important;
}

/* Kill old after-arrow on sharecount */
span.sharecount:after {
    display: none !important;
}

/* Views count (pull-r) */
.external-sign-in .pull-r {
    margin-left: auto !important;
    font-size:   12px !important;
    font-weight: 700 !important;
    color:       var(--es-text-secondary) !important;
    text-align:  right !important;
    float:       none !important;
    line-height: 1.3 !important;
}

/* Base platform button */
.external-sign-in .Facebook,
.external-sign-in .Twitter,
.external-sign-in .Pinterest,
.external-sign-in .Reddit {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             6px !important;
    padding:         6px 12px 6px 36px !important;
    position:        relative !important;
    border-radius:   var(--es-radius-sm) !important;
    font-size:       12px !important;
    font-weight:     700 !important;
    color:           #ffffff !important;
    text-decoration: none !important;
    overflow:        visible !important;
    line-height:     1 !important;
    height:          auto !important;
    min-height:      32px !important;
    font-family:     Arial, Helvetica, sans-serif !important;
}

/* Platform colors */
.external-sign-in .Facebook   { background: #1877f2 !important; }
.external-sign-in .Twitter    { background: #0f141e !important; }
.external-sign-in .Pinterest  { background: #e60023 !important; }
.external-sign-in .Reddit     { background: #ff4500 !important; }

/* Hover states */
.external-sign-in .Facebook:hover  { background: #1464cc !important; color: #fff !important; }
.external-sign-in .Twitter:hover   { background: #e1062c !important; color: #fff !important; }
.external-sign-in .Pinterest:hover { background: #c0001d !important; color: #fff !important; }
.external-sign-in .Reddit:hover    { background: #d93c00 !important; color: #fff !important; }

/* FontAwesome icon — repositioned ::after for inline layout */
.external-sign-in .Facebook:after,
.external-sign-in .Twitter:after,
.external-sign-in .Pinterest:after,
.external-sign-in .Reddit:after {
    font-family:  FontAwesome !important;
    font-size:    14px !important;
    color:        #ffffff !important;
    position:     absolute !important;
    left:         10px !important;
    top:          50% !important;
    transform:    translateY(-50%) !important;
    width:        auto !important;
    height:       auto !important;
    line-height:  1 !important;
    display:      block !important;
}

.external-sign-in .Facebook:after   { content: "\f09a" !important; top: 50% !important; }
.external-sign-in .Twitter:after    { content: "\f099" !important; top: 50% !important; }
.external-sign-in .Pinterest:after  { content: "\f0d2" !important; top: 50% !important; border-right: none !important; }
.external-sign-in .Reddit:after     { content: "\f1a1" !important; top: 50% !important; }


/* ==============================================================
   §P7  PHASE 3 — ENGAGEMENT + COMMENTS ZONE
   Reactions bar · comment thread · add-comment form
   ============================================================== */

/* --------------------------------------------------------------
   §P7-1  REACTIONS SECTION
   -------------------------------------------------------------- */

.user-reactions {
    background:    var(--es-bg-surface) !important;
    border:        1.5px solid var(--es-border) !important;
    border-radius: var(--es-radius-md) !important;
    padding:       20px 22px !important;
    margin:        24px 0 !important;
}

/* Section header */
.user-reactions .colheader {
    border-bottom: none !important;
    margin-bottom: 14px !important;
}

.user-reactions .colheader .header-title {
    border-color: var(--es-red) !important;
    color:        var(--es-text-primary) !important;
    font-size:    15px !important;
    font-weight:  800 !important;
}

/* Emoji grid — horizontal flex */
.user-reactions .percentage-bar {
    display:    flex !important;
    flex-wrap:  wrap !important;
    gap:        10px !important;
    margin:     0 !important;
}

.user-reactions .reaction-emoji {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    margin:         0 !important;
    padding:        0 !important;
}

/* Bar: vertical fill indicator */
.user-reactions .percentage-bar div.bar {
    width:    52px !important;
    height:   52px !important;
    display:  block !important;
    position: relative !important;
    padding:  0 !important;
}

.user-reactions .percentage-bar .count {
    left:     0 !important;
    width:    100% !important;
    bottom:   0 !important;
    background: rgba(225,6,44,0.12) !important;
    transition: height 0.8s ease !important;
}

/* Emoji button */
.user-reactions .reaction-emoji a {
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           58px !important;
    height:          58px !important;
    margin:          0 !important;
    padding:         6px !important;
    background:      #ffffff !important;
    border:          1.5px solid var(--es-border) !important;
    border-radius:   var(--es-radius-md) !important;
    transition:      var(--es-transition-fast) !important;
}

.user-reactions .reaction-emoji a:hover {
    border-color: var(--es-red) !important;
    background:   var(--es-red-soft) !important;
    transform:    translateY(-2px) !important;
}

.user-reactions .reaction-emoji a.active {
    background:   var(--es-red-soft) !important;
    border-color: var(--es-red) !important;
    cursor:       default !important;
}

.user-reactions .reaction-emoji a img {
    width:  34px !important;
    height: 34px !important;
    margin: 0 !important;
}

.user-reactions .reaction-emoji a span.text {
    font-size:   9px !important;
    font-weight: 700 !important;
    color:       var(--es-text-secondary) !important;
    margin-top:  3px !important;
    position:    static !important;
    width:       auto !important;
    text-align:  center !important;
    white-space: nowrap !important;
}

/* React count label above bar */
span.count-text {
    font-size:   10px !important;
    font-weight: 700 !important;
    color:       var(--es-text-secondary) !important;
    top:         -18px !important;
}

/* --------------------------------------------------------------
   §P7-2  COMMENTS HEADING
   -------------------------------------------------------------- */

#comments-wrapper .colheader,
.comment-heading {
    border-bottom:  2px solid var(--es-border) !important;
    margin-bottom:  16px !important;
}

.comment-heading .header-title {
    border-color: var(--es-text-primary) !important;
    color:        var(--es-text-primary) !important;
    font-weight:  800 !important;
    font-size:    16px !important;
}

.comment-heading span {
    color:      var(--es-text-secondary) !important;
    font-size:  13px !important;
}

/* Sort short links */
.comment-short a {
    color:         var(--es-text-secondary) !important;
    border-radius: var(--es-radius-sm) !important;
    font-weight:   600 !important;
    font-size:     11px !important;
}

.comment-short a.active {
    background: var(--es-bg-surface) !important;
    color:      var(--es-text-primary) !important;
}

/* --------------------------------------------------------------
   §P7-3  ADD COMMENT FORM
   -------------------------------------------------------------- */

.add-comment {
    margin-bottom: 24px !important;
}

.add-comment img.usericont {
    border-radius: 50% !important;
    border:        2px solid var(--es-border) !important;
}

.add-comment .add-comment-form > div {
    border:        1.5px solid var(--es-border) !important;
    border-radius: var(--es-radius-md) !important;
    overflow:      hidden !important;
    transition:    border-color 0.14s ease !important;
}

.add-comment .add-comment-form > div:focus-within {
    border-color: var(--es-red) !important;
}

.add-comment .add-comment-form > div textarea {
    font-size:   14px !important;
    color:       var(--es-text-primary) !important;
    padding:     12px 14px !important;
    background:  #ffffff !important;
    min-height:  52px !important;
    line-height: 1.5 !important;
}

.add-comment .add-comment-form > div .add-comment-form-actions {
    background:  var(--es-bg-surface) !important;
    border-top:  1.5px solid var(--es-border) !important;
    border-radius: 0 !important;
}

.add-comment .add-comment-form > div .add-comment-form-actions button {
    background:    var(--es-red) !important;
    border-left:   1.5px solid var(--es-border) !important;
    font-size:     12px !important;
    font-weight:   800 !important;
    letter-spacing: .4px !important;
    text-transform: uppercase !important;
    color:         #ffffff !important;
    width:         100px !important;
    transition:    background 0.14s ease !important;
}

.add-comment .add-comment-form > div .add-comment-form-actions button:hover {
    background: #bf0424 !important;
}

/* --------------------------------------------------------------
   §P7-4  COMMENT ITEMS
   -------------------------------------------------------------- */

.comment {
    border-bottom:  1px solid var(--es-border-subtle) !important;
    padding-bottom: 16px !important;
    margin-bottom:  16px !important;
}

.comment:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Avatar */
.comment .avatar {
    border-radius: 50% !important;
    border:        2px solid var(--es-border) !important;
}

/* Username link */
.comment .comment-content .comment-top a {
    color:       var(--es-text-primary) !important;
    font-weight: 700 !important;
    font-size:   13px !important;
}

.comment .comment-content .comment-top a.admin {
    color: var(--es-red) !important;
}

.comment .comment-content .comment-top a.mod {
    color: #16a34a !important;
}

/* Timestamp */
.comment .comment-content .comment-top .date,
.comment .comment-content .comment-top .date a,
.comment .comment-content .comment-top .date span {
    color:     var(--es-text-disabled) !important;
    font-size: 11px !important;
}

/* Comment text */
.comment .comment-content .comment-text-p p {
    color:       var(--es-text-primary) !important;
    font-size:   14px !important;
    line-height: 1.6 !important;
    opacity:     1 !important;
    margin:      0 !important;
    padding:     4px 0 !important;
}

/* Action bar (like / dislike / reply) */
.comment .comment-content .comment-actions a {
    color:     var(--es-text-secondary) !important;
    font-size: 12px !important;
}

.comment .comment-content .comment-actions a:hover {
    color: var(--es-red) !important;
}

.comment .comment-content .comment-actions > .like {
    color: #16a34a !important;
}

.comment .comment-content .comment-actions > .dislike {
    color: #dc2626 !important;
}

/* Reply indented block */
.comment-replies .comment {
    padding-left: 16px !important;
    border-left:  3px solid var(--es-border) !important;
    margin-left:  0 !important;
}

/* Load more */
.load-more-comment {
    color:       var(--es-red) !important;
    font-weight: 700 !important;
    font-size:   13px !important;
}

.load-more-comment:hover {
    color: #bf0424 !important;
}

/* --------------------------------------------------------------
   §P7-5  USER ROLE TAGS
   -------------------------------------------------------------- */

.tag.staff,
.tag.admin {
    background:    var(--es-red) !important;
    color:         #ffffff !important;
    border-radius: 3px !important;
    font-size:     9px !important;
    letter-spacing: .5px !important;
    padding:       1px 4px !important;
}

.tag.guest {
    background: var(--es-bg-surface) !important;
    color:      var(--es-text-disabled) !important;
}

/* --------------------------------------------------------------
   §P7-6  CATEGORY BADGE FIX  (post page .seca & .item_category a)
   Make sure category tags use red accent, not teal/bababa
   -------------------------------------------------------------- */

.post-content .item_category a,
.post-head__meta .item_category a,
.topics-container .item_category a {
    background:    var(--es-red) !important;
    color:         #ffffff !important;
    border-radius: 3px !important;
    font-size:     10px !important;
    font-weight:   800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding:       3px 8px !important;
    text-decoration: none !important;
}

.post-content .item_category a:hover,
.post-head__meta .item_category a:hover {
    background: #bf0424 !important;
    color:      #ffffff !important;
}

/* The "sea" colheader (used in reactions) — override teal with red */
.colheader.sea .header-title {
    border-color: var(--es-red) !important;
    color:        var(--es-text-primary) !important;
}

/* Admin/editor action buttons on post — keep legible */
.es-post-page .button.button-green {
    background:   #16a34a !important;
    background-image: none !important;
    border-color: #15803d !important;
    color:        #ffffff !important;
}

.es-post-page .button.button-red {
    background:   var(--es-red) !important;
    background-image: none !important;
    border-color: var(--es-red) !important;
    color:        #ffffff !important;
}



/* ══════════════════════════════════════════════════════════════════════
   §P8  PHASE 4 — E-SPORT SIDEBAR  (match-card / ranked list style)
   Target: .sidebar  .items_lists  .colheader  .post-between-comments
   ══════════════════════════════════════════════════════════════════════ */

/* §P8-1  Sidebar shell ─────────────────────────────────────────────── */
.sidebar {
    background:    var(--es-bg) !important;
    border:        1px solid var(--es-border) !important;
    border-radius: 10px !important;
    padding:       0 0 6px !important;
    overflow:      hidden !important;
    box-shadow:    0 2px 14px rgba(0,0,0,.06) !important;
}

/* §P8-2  colheader inside sidebar ──────────────────────────────────── */
.sidebar .colheader {
    background:    var(--es-bg-surface) !important;
    border-bottom: 3px solid var(--es-red) !important;
    border-radius: 0 !important;
    padding:       12px 16px !important;
    margin:        0 0 4px !important;
}

.sidebar .colheader .header-title {
    font-family:    Arial, Helvetica, sans-serif !important;
    font-size:      12px !important;
    font-weight:    800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color:          var(--es-text-primary) !important;
    margin:         0 !important;
    padding:        0 !important;
    border:         none !important;
    line-height:    1.2 !important;
}

.sidebar .colheader .header-title span {
    color: var(--es-red) !important;
}

/* §P8-3  item list container ───────────────────────────────────────── */
.sidebar ul.items_lists {
    list-style:    none !important;
    margin:        0 !important;
    padding:       0 !important;
    counter-reset: sidebar-rank !important;
}

/* §P8-4  individual item card ──────────────────────────────────────── */
.sidebar ul.items_lists li.item {
    counter-increment: sidebar-rank !important;
    position:   relative !important;
    display:    flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding:    10px 14px !important;
    border-bottom: 1px solid var(--es-border) !important;
    transition: background .18s ease !important;
    background: var(--es-bg) !important;
    float:      none !important;
    width:      auto !important;
    box-sizing: border-box !important;
}

.sidebar ul.items_lists li.item:last-child {
    border-bottom: none !important;
}

.sidebar ul.items_lists li.item:hover {
    background: var(--es-bg-surface) !important;
}

/* §P8-5  ranked number badge via CSS counter ───────────────────────── */
.sidebar ul.items_lists li.item::before {
    content:         counter(sidebar-rank, decimal-leading-zero) !important;
    font-family:     Arial, Helvetica, sans-serif !important;
    font-size:       11px !important;
    font-weight:     900 !important;
    color:           var(--es-red) !important;
    background:      rgba(255,0,60,.08) !important;
    border-radius:   4px !important;
    min-width:       26px !important;
    height:          26px !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    align-self:      flex-start !important;
    margin-top:      2px !important;
    margin-right:    9px !important;
    flex-shrink:     0 !important;
    line-height:     1 !important;
}

/* §P8-6  item-cover (inner flex row) ───────────────────────────────── */
.sidebar ul.items_lists li.item .item-cover {
    display:    flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap:        10px !important;
    flex:       1 !important;
    min-width:  0 !important;
}

/* §P8-7  thumbnail wrapper + zoom on hover ─────────────────────────── */
.sidebar ul.items_lists li.item .item_media {
    flex-shrink: 0 !important;
    width:       80px !important;
    height:      56px !important;
    border-radius: 6px !important;
    overflow:    hidden !important;
    position:    relative !important;
    background:  var(--es-bg-surface) !important;
    display:     block !important;
}

.sidebar ul.items_lists li.item .item__image {
    width:       80px !important;
    height:      56px !important;
    object-fit:  cover !important;
    display:     block !important;
    border-radius: 6px !important;
    transition:  transform .28s ease !important;
}

.sidebar ul.items_lists li.item:hover .item__image {
    transform: scale(1.07) !important;
}

/* §P8-8  item body ─────────────────────────────────────────────────── */
.sidebar ul.items_lists li.item .item_body {
    flex:       1 !important;
    min-width:  0 !important;
    display:    flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap:        4px !important;
}

/* §P8-9  title ─────────────────────────────────────────────────────── */
.sidebar ul.items_lists li.item .item_title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size:   13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin:      0 !important;
    padding:     0 !important;
}

.sidebar ul.items_lists li.item .item_title .item_link,
.sidebar ul.items_lists li.item .item_title .item_link.blue {
    color:           var(--es-text-primary) !important;
    text-decoration: none !important;
    transition:      color .18s ease !important;
    display:         -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:        hidden !important;
    font-weight:     700 !important;
}

.sidebar ul.items_lists li.item .item_title .item_link:hover {
    color: var(--es-red) !important;
}

/* §P8-10  meta row ─────────────────────────────────────────────────── */
.sidebar ul.items_lists li.item .item_meta {
    display:    flex !important;
    align-items: center !important;
    gap:        10px !important;
    margin:     0 !important;
    flex-wrap:  nowrap !important;
}

.sidebar ul.items_lists li.item .item_meta__item {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size:   11px !important;
    color:       #94a3b8 !important;
    display:     flex !important;
    align-items: center !important;
    gap:         3px !important;
    white-space: nowrap !important;
    float:       none !important;
}

.sidebar ul.items_lists li.item .item_meta__item i {
    font-size: 10px !important;
    color:     #94a3b8 !important;
}

.sidebar ul.items_lists li.item .timestamp_timeago {
    color:     #94a3b8 !important;
    font-size: 11px !important;
}

/* §P8-11  suppress irrelevant badges on sidebar items ──────────────── */
.sidebar ul.items_lists li.item .badge {
    display: none !important;
}

/* §P8-12  Facebook / social like-box widget ────────────────────────── */
.sidebar #fb-like-box,
.sidebar .facebooklike,
.sidebar #facebook-widget,
.sidebar .fb-page {
    margin:        12px 14px 4px !important;
    border:        1px solid var(--es-border) !important;
    border-radius: 8px !important;
    overflow:      hidden !important;
    background:    var(--es-bg-surface) !important;
    display:       block !important;
}

/* §P8-13  "You May Also Like" (post-between-comments) ──────────────── */
.post-between-comments ul.items_lists {
    display:               grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap:                   16px !important;
    list-style:            none !important;
    margin:                0 !important;
    padding:               0 !important;
}

.post-between-comments ul.items_lists li.item {
    background:    var(--es-bg) !important;
    border:        1px solid var(--es-border) !important;
    border-radius: 10px !important;
    overflow:      hidden !important;
    padding:       0 !important;
    display:       flex !important;
    flex-direction: column !important;
    transition:    box-shadow .2s ease, transform .2s ease !important;
    float:         none !important;
    width:         auto !important;
}

.post-between-comments ul.items_lists li.item:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
    transform:  translateY(-3px) !important;
}

.post-between-comments ul.items_lists li.item .item-cover {
    display:        flex !important;
    flex-direction: column !important;
}

.post-between-comments ul.items_lists li.item .item_media {
    width:         100% !important;
    aspect-ratio:  16 / 9 !important;
    height:        auto !important;
    overflow:      hidden !important;
    border-radius: 0 !important;
    display:       block !important;
}

.post-between-comments ul.items_lists li.item .item__image {
    width:         100% !important;
    height:        100% !important;
    object-fit:    cover !important;
    display:       block !important;
    border-radius: 0 !important;
    transition:    transform .3s ease !important;
}

.post-between-comments ul.items_lists li.item:hover .item__image {
    transform: scale(1.05) !important;
}

.post-between-comments ul.items_lists li.item .item_body {
    padding: 12px 14px 14px !important;
}

.post-between-comments ul.items_lists li.item .item_title {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size:   14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin:      0 0 6px !important;
    padding:     0 !important;
}

.post-between-comments ul.items_lists li.item .item_title .item_link,
.post-between-comments ul.items_lists li.item .item_title .item_link.blue {
    color:           var(--es-text-primary) !important;
    text-decoration: none !important;
    display:         -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow:        hidden !important;
    transition:      color .18s !important;
}

.post-between-comments ul.items_lists li.item .item_title .item_link:hover {
    color: var(--es-red) !important;
}

.post-between-comments ul.items_lists li.item .item_meta {
    display:    flex !important;
    gap:        12px !important;
    flex-wrap:  nowrap !important;
    margin:     0 !important;
}

.post-between-comments ul.items_lists li.item .item_meta__item {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size:   11px !important;
    color:       #94a3b8 !important;
    display:     flex !important;
    align-items: center !important;
    gap:         3px !important;
    float:       none !important;
}

.post-between-comments ul.items_lists li.item .item_meta__item i {
    font-size: 10px !important;
    color:     #94a3b8 !important;
}

/* §P8-14  suppress badges on "you may also like" cards ─────────────── */
.post-between-comments ul.items_lists li.item .badge {
    display: none !important;
}

/* §P8-15  "You May Also Like" section heading ──────────────────────── */
.es-post-page > .content-wrapper .colheader:not(.sidebar .colheader),
.post-between-comments + .colheader,
.colheader:has(+ .post-between-comments),
.es-post-page .colheader {
    background:     var(--es-bg-surface) !important;
    border-bottom:  3px solid var(--es-red) !important;
    border-radius:  6px 6px 0 0 !important;
    padding:        12px 16px !important;
    margin-bottom:  0 !important;
}

.es-post-page .colheader .header-title {
    font-family:    Arial, Helvetica, sans-serif !important;
    font-size:      12px !important;
    font-weight:    800 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color:          var(--es-text-primary) !important;
    margin:         0 !important;
    padding:        0 !important;
    border:         none !important;
}

.es-post-page .colheader .header-title span {
    color: var(--es-red) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   §P9  PHASE 5 — FOOTER PREMIUM ESPORT  (light-mode)
   Elements from wiissttaa.live/link: clip-path cards, stats, CTAs,
   gem-divider, membership tiers — all adapted to white/pearl surfaces
   ══════════════════════════════════════════════════════════════════════ */

/* §P9-TOKENS  clip-path shortcuts (light-mode --cl variants) ────────── */
:root {
    --wf-cl:  polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px) !important;
    --wf-cl8: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) !important;
    --wf-cl6: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px) !important;
    --wf-snap: cubic-bezier(.4,0,.2,1);
    --wf-gold: #c9a800;
    --wf-cyan: #0097a7;
}

/* §P9-1  Stats strip (between partner ticker and main footer) ────────── */
.wf-stats-strip {
    background:    #f4f6f8 !important;
    border-top:    1px solid var(--es-border) !important;
    border-bottom: 3px solid var(--es-red) !important;
    padding:       16px 0 !important;
}

.wf-stats-row {
    display:         grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap:             10px !important;
}

.wf-stat {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    justify-content: center !important;
    padding:        14px 10px 12px !important;
    background:     #ffffff !important;
    border:         1px solid var(--es-border) !important;
    clip-path:      polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) !important;
    position:       relative !important;
    overflow:       hidden !important;
    transition:     transform .18s ease, box-shadow .18s ease !important;
}

.wf-stat::after {
    content: '' !important;
    position: absolute !important;
    bottom:   0 !important;
    left:     0 !important;
    right:    0 !important;
    height:   2px !important;
}

.wf-stat:hover {
    transform: translateY(-3px) !important;
}

.wf-stat-num {
    font-family:  Arial, Helvetica, sans-serif !important;
    font-size:    24px !important;
    font-weight:  900 !important;
    letter-spacing: .02em !important;
    line-height:  1 !important;
    margin-bottom: 4px !important;
}

.wf-stat-lbl {
    font-family:    Arial, Helvetica, sans-serif !important;
    font-size:      9px !important;
    font-weight:    700 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    color:          #94a3b8 !important;
}

/* red stat */
.wf-s-r::after  { background: var(--es-red) !important; }
.wf-s-r .wf-stat-num { color: var(--es-red) !important; }
.wf-s-r:hover   { box-shadow: 0 6px 20px rgba(255,0,60,.12) !important; border-color: rgba(255,0,60,.25) !important; }

/* gold stat */
.wf-s-g::after  { background: var(--wf-gold) !important; }
.wf-s-g .wf-stat-num { color: var(--wf-gold) !important; }
.wf-s-g:hover   { box-shadow: 0 6px 20px rgba(201,168,0,.12) !important; border-color: rgba(201,168,0,.25) !important; }

/* cyan stat */
.wf-s-c::after  { background: var(--wf-cyan) !important; }
.wf-s-c .wf-stat-num { color: var(--wf-cyan) !important; }
.wf-s-c:hover   { box-shadow: 0 6px 20px rgba(0,151,167,.12) !important; border-color: rgba(0,151,167,.25) !important; }

/* white/neutral stat */
.wf-s-w::after  { background: var(--es-text-primary) !important; }
.wf-s-w .wf-stat-num { color: var(--es-text-primary) !important; }
.wf-s-w:hover   { box-shadow: 0 6px 20px rgba(0,0,0,.08) !important; border-color: #94a3b8 !important; }

@media (max-width: 600px) {
    .wf-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* §P9-2  Gem divider (red animated diamond + lines) ─────────────────── */
.wf-gem-divider {
    display:     flex !important;
    align-items: center !important;
    gap:         12px !important;
    margin:      28px 0 !important;
}

.wf-gdiv-line {
    flex:       1 !important;
    height:     1px !important;
    background: linear-gradient(90deg, transparent, var(--es-border), transparent) !important;
}

.wf-gdiv-gem {
    width:            10px !important;
    height:           10px !important;
    background:       var(--es-red) !important;
    transform:        rotate(45deg) !important;
    flex-shrink:      0 !important;
    box-shadow:       0 0 10px rgba(255,0,60,.35), 0 0 22px rgba(255,0,60,.15) !important;
    animation:        wf-gem-pulse 2.2s ease-in-out infinite alternate !important;
}

@keyframes wf-gem-pulse {
    from { box-shadow: 0 0 6px rgba(255,0,60,.25); }
    to   { box-shadow: 0 0 18px rgba(255,0,60,.55), 0 0 36px rgba(255,0,60,.2); }
}

/* §P9-3  CTA strip (3 action buttons) ───────────────────────────────── */
.wf-cta-strip {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:                   10px !important;
    margin-bottom:         0 !important;
}

.wf-cta {
    display:     flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height:  72px !important;
    padding:     0 16px 0 14px !important;
    border:      1px solid !important;
    clip-path:   polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px) !important;
    text-decoration: none !important;
    position:    relative !important;
    overflow:    hidden !important;
    transition:  transform .18s ease, box-shadow .22s ease !important;
}

/* shimmer sweep */
.wf-cta::after {
    content:    '' !important;
    position:   absolute !important;
    top:        0 !important;
    left:       -100% !important;
    bottom:     0 !important;
    width:      55% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important;
    transition: left .55s ease !important;
    pointer-events: none !important;
}
.wf-cta:hover::after  { left: 140% !important; }
.wf-cta:active        { transform: scale(.97) !important; }

/* red CTA — watch live */
.wf-cta-r {
    background:  linear-gradient(135deg, rgba(220,0,40,.92), rgba(160,0,30,.8)) !important;
    border-color: rgba(255,0,60,.75) !important;
    box-shadow:  0 4px 24px rgba(255,0,60,.28) !important;
}
.wf-cta-r:hover {
    transform:  translateY(-3px) !important;
    box-shadow: 0 12px 40px rgba(255,0,60,.42) !important;
}

/* gold CTA — royal club */
.wf-cta-g {
    background:  linear-gradient(135deg, #fdfaf0, #fef5c7) !important;
    border-color: rgba(201,168,0,.65) !important;
    box-shadow:  0 4px 20px rgba(201,168,0,.18) !important;
}
.wf-cta-g:hover {
    transform:  translateY(-3px) !important;
    box-shadow: 0 12px 36px rgba(201,168,0,.30) !important;
}

/* cyan CTA — shop */
.wf-cta-c {
    background:  linear-gradient(135deg, #f0fbfc, #e0f7fa) !important;
    border-color: rgba(0,151,167,.5) !important;
    box-shadow:  0 4px 20px rgba(0,151,167,.14) !important;
}
.wf-cta-c:hover {
    transform:  translateY(-3px) !important;
    box-shadow: 0 12px 36px rgba(0,151,167,.26) !important;
}

/* CTA internals */
.wf-cta-left {
    display:     flex !important;
    align-items: center !important;
    gap:         12px !important;
}

.wf-cta .wf-cta-icon {
    width:       44px !important;
    height:      44px !important;
    border-radius: 50% !important;
    display:     flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size:   18px !important;
    flex-shrink: 0 !important;
}

.wf-cta-r .wf-cta-icon { background: rgba(255,255,255,.22) !important; color: #fff !important; }
.wf-cta-g .wf-cta-icon { background: rgba(201,168,0,.18) !important;  color: var(--wf-gold) !important; }
.wf-cta-c .wf-cta-icon { background: rgba(0,151,167,.15) !important;  color: var(--wf-cyan) !important; }

.wf-cta-txt {
    display:        flex !important;
    flex-direction: column !important;
    gap:            2px !important;
}

.wf-cta-eye {
    font-family:    Arial, Helvetica, sans-serif !important;
    font-size:      9px !important;
    font-weight:    600 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    display:        flex !important;
    align-items:    center !important;
    gap:            5px !important;
}

.wf-cta-r .wf-cta-eye { color: rgba(255,220,220,.9) !important; }
.wf-cta-g .wf-cta-eye { color: var(--wf-gold) !important; }
.wf-cta-c .wf-cta-eye { color: var(--wf-cyan) !important; }

.wf-bdot {
    width:         5px !important;
    height:        5px !important;
    border-radius: 50% !important;
    display:       inline-block !important;
    flex-shrink:   0 !important;
    animation:     wf-blink 1.3s infinite !important;
}

.wf-cta-r .wf-bdot { background: rgba(255,200,200,.85) !important; }
.wf-cta-g .wf-bdot { background: var(--wf-gold) !important; animation-duration: 1.8s !important; }
.wf-cta-c .wf-bdot { background: var(--wf-cyan) !important; animation-duration: 1.8s !important; }

@keyframes wf-blink { 0%,100%{opacity:1} 50%{opacity:.2} }

.wf-cta-title {
    font-family:    Arial, Helvetica, sans-serif !important;
    font-size:      20px !important;
    font-weight:    900 !important;
    letter-spacing: .04em !important;
    line-height:    1 !important;
}

.wf-cta-r .wf-cta-title { color: #ffffff !important; }
.wf-cta-g .wf-cta-title { color: #7a5800 !important; }
.wf-cta-c .wf-cta-title { color: #004d56 !important; }

.wf-cta-arr {
    font-size:   15px !important;
    opacity:     .5 !important;
    transition:  transform .18s ease, opacity .18s ease !important;
    flex-shrink: 0 !important;
}
.wf-cta-r .wf-cta-arr { color: rgba(255,255,255,.8) !important; }
.wf-cta-g .wf-cta-arr { color: var(--wf-gold) !important; }
.wf-cta-c .wf-cta-arr { color: var(--wf-cyan) !important; }
.wf-cta:hover .wf-cta-arr { transform: translateX(6px) !important; opacity: 1 !important; }

@media (max-width: 700px) {
    .wf-cta-strip { grid-template-columns: 1fr !important; }
    .wf-cta-title { font-size: 17px !important; }
}

/* §P9-4  Membership tiers ───────────────────────────────────────────── */
.wf-tiers-section {
    margin-bottom: 28px !important;
}

.wf-tier-heading {
    font-family:    Arial, Helvetica, sans-serif !important;
    font-size:      10px !important;
    font-weight:    800 !important;
    letter-spacing: .26em !important;
    text-transform: uppercase !important;
    color:          var(--es-text-primary) !important;
    display:        flex !important;
    align-items:    center !important;
    gap:            12px !important;
    margin-bottom:  14px !important;
}
.wf-tier-heading::before,
.wf-tier-heading::after {
    content:    '' !important;
    flex:       1 !important;
    height:     1px !important;
    background: linear-gradient(90deg, transparent, var(--es-border), transparent) !important;
}

.wf-tiers-grid {
    display:               grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap:                   8px !important;
}

.wf-tier {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    padding:        14px 8px 12px !important;
    background:     #ffffff !important;
    border:         1px solid var(--es-border) !important;
    clip-path:      polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) !important;
    text-align:     center !important;
    position:       relative !important;
    overflow:       hidden !important;
    transition:     transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    cursor:         default !important;
}

.wf-tier::before {
    content:  '' !important;
    position: absolute !important;
    top:      0 !important;
    left:     0 !important;
    right:    0 !important;
    height:   2px !important;
    background: var(--es-border) !important;
}

.wf-tier:hover { transform: translateY(-4px) !important; }

.wf-tier-ico {
    font-size:     22px !important;
    margin-bottom: 6px !important;
    display:       block !important;
    line-height:   1 !important;
    transition:    transform .28s cubic-bezier(.34,1.56,.64,1) !important;
}
.wf-tier:hover .wf-tier-ico { transform: scale(1.18) rotate(-8deg) !important; }

.wf-tier-name {
    font-family:    Arial, Helvetica, sans-serif !important;
    font-size:      11px !important;
    font-weight:    800 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    margin-bottom:  3px !important;
    display:        block !important;
}

.wf-tier-price {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size:   10px !important;
    color:       #94a3b8 !important;
    display:     block !important;
}

.wf-tier-desc {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size:   9px !important;
    color:       #94a3b8 !important;
    margin-top:  6px !important;
    line-height: 1.45 !important;
    display:     block !important;
    opacity:     .8 !important;
}

.wf-tier-hot {
    position:       absolute !important;
    top:            7px !important;
    right:          7px !important;
    font-family:    Arial, Helvetica, sans-serif !important;
    font-size:      7px !important;
    font-weight:    800 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    padding:        2px 6px !important;
    clip-path:      polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px) !important;
}

/* Tier color variants */
.wf-t-basic::before   { background: #94a3b8 !important; }
.wf-t-basic .wf-tier-name { color: #475569 !important; }
.wf-t-basic:hover     { border-color: #94a3b8 !important; }

.wf-t-vip {
    background:   #fffbeb !important;
    border-color: rgba(201,168,0,.4) !important;
}
.wf-t-vip::before     { background: linear-gradient(90deg, transparent, var(--wf-gold), transparent) !important; }
.wf-t-vip .wf-tier-name  { color: var(--wf-gold) !important; }
.wf-t-vip .wf-tier-hot   { background: var(--wf-gold) !important; color: #fff !important; }
.wf-t-vip:hover       { box-shadow: 0 8px 28px rgba(201,168,0,.18) !important; border-color: rgba(201,168,0,.6) !important; }

.wf-t-clan::before    { background: linear-gradient(90deg, transparent, var(--wf-cyan), transparent) !important; }
.wf-t-clan .wf-tier-name  { color: var(--wf-cyan) !important; }
.wf-t-clan:hover      { border-color: rgba(0,151,167,.4) !important; box-shadow: 0 8px 24px rgba(0,151,167,.12) !important; }

.wf-t-drm::before     { background: linear-gradient(90deg, transparent, var(--es-red), transparent) !important; }
.wf-t-drm .wf-tier-name   { color: var(--es-red) !important; }
.wf-t-drm:hover       { border-color: rgba(255,0,60,.3) !important; box-shadow: 0 8px 24px rgba(255,0,60,.12) !important; }

.wf-t-royal {
    background:   #fffbeb !important;
    border-color: rgba(201,168,0,.5) !important;
}
.wf-t-royal::before   { background: linear-gradient(90deg, transparent, var(--wf-gold), transparent) !important; }
.wf-t-royal .wf-tier-name { color: var(--wf-gold) !important; font-size: 9px !important; }
.wf-t-royal:hover     { box-shadow: 0 8px 28px rgba(201,168,0,.18) !important; }

@media (max-width: 700px) {
    .wf-tiers-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 460px) {
    .wf-tiers-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* §P9-5  Tier note ──────────────────────────────────────────────────── */
.wf-tier-note {
    display:     flex !important;
    align-items: center !important;
    gap:         8px !important;
    margin-top:  10px !important;
    padding:     9px 14px !important;
    background:  var(--es-bg-surface) !important;
    border:      1px solid var(--es-border) !important;
    border-radius: 4px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size:   11px !important;
    color:       #64748b !important;
}
.wf-tier-note i { color: var(--wf-gold) !important; flex-shrink: 0 !important; }

/* §P9-6  Ensure footer font consistency ─────────────────────────────── */
.wf-footer,
.wf-footer *,
.wf-stats-strip,
.wf-cta-strip,
.wf-tiers-section {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* §P9-7  Ensure partner section remains light ───────────────────────── */
.wf-partner-section {
    background: #f4f6f8 !important;
}

/* §P9-8  Kill any dark backgrounds that may bleed in ────────────────── */
.wf-footer,
.wf-stats-strip,
.wf-cta-strip {
    background-color: #ffffff !important;
}
.wf-footer-top,
.wf-footer-bottom {
    background-color: #ffffff !important;
}