/*
 * MagEmbed Grid Engine — Extended Front CSS v2.4.0
 * Fixes hover overlay: "Full-width bar" and "Tight wrap" modes.
 *
 * The base mgb-front.css applies --mgb-hbg as background on the entire
 * inset:0 overlay div, which produces a full-card darkening effect.
 * These rules implement the two distinct modes controlled by data-bgfull:
 *
 *   data-bgfull="full"  → colored band only at the title position (bottom/center/top)
 *   data-bgfull="tight" → transparent overlay, background pill on title only
 */

/* ── FULL MODE: band at position, NOT full-card darkening ──────────────────── */
/*
 * Override inset:0 so the overlay collapses to only the height of its content.
 * This makes it a band that sits at the hover_pos (bottom/center/top).
 * Background comes from --mgb-hbg (color + opacity already baked in).
 */
.mgb-card__overlay[data-bgfull="full"] {
    inset: unset;              /* cancel the base inset:0 */
    left:   0;
    right:  0;
    width:  100%;
    /* vertical position driven by hover_pos via JS data or parent class */
    padding: var(--mgb-hpadv, 10px) var(--mgb-hpadh, 12px);
    backdrop-filter: blur(var(--mgb-hblur, 0px));
    -webkit-backdrop-filter: blur(var(--mgb-hblur, 0px));
}
/* Position: bottom (default) */
.mgb-hpos--bottom .mgb-card__overlay[data-bgfull="full"] {
    bottom: 0;
    top: unset;
    transform: translateY(6px);     /* base slide-in animation preserved */
}
/* Position: top */
.mgb-hpos--top .mgb-card__overlay[data-bgfull="full"] {
    top: 0;
    bottom: unset;
    transform: translateY(-6px);
}
/* Position: center */
.mgb-hpos--center .mgb-card__overlay[data-bgfull="full"] {
    top: 50%;
    bottom: unset;
    transform: translateY(-50%) scale(.96);
}
/* On hover: cancel transform */
.mgb-hpos--bottom .mgb-card:hover .mgb-card__overlay[data-bgfull="full"],
.mgb-hpos--bottom .mgb-card:focus-within .mgb-card__overlay[data-bgfull="full"] {
    transform: translateY(0);
}
.mgb-hpos--top .mgb-card:hover .mgb-card__overlay[data-bgfull="full"],
.mgb-hpos--top .mgb-card:focus-within .mgb-card__overlay[data-bgfull="full"] {
    transform: translateY(0);
}
.mgb-hpos--center .mgb-card:hover .mgb-card__overlay[data-bgfull="full"],
.mgb-hpos--center .mgb-card:focus-within .mgb-card__overlay[data-bgfull="full"] {
    transform: translateY(-50%) scale(1);
}

/* ── TIGHT MODE: transparent overlay, background on title span only ──────── */
.mgb-card__overlay[data-bgfull="tight"] {
    inset: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* keep padding:0 so the flex container positions the title correctly */
    padding: var(--mgb-hpadv, 10px) var(--mgb-hpadh, 12px);
}
.mgb-card__overlay[data-bgfull="tight"] .mgb-card__title {
    background: var(--mgb-hbg);
    backdrop-filter: blur(var(--mgb-hblur, 0px));
    -webkit-backdrop-filter: blur(var(--mgb-hblur, 0px));
    padding: var(--mgb-hpadv, 6px) var(--mgb-hpadh, 10px);
    border-radius: 5px;
    display: inline-block;
    max-width: 100%;
}

/* ── LOAD MORE BUTTON — Cyberpunk animations (v2.6.9) ─────────────────────── */
/* Base vars come from --mgb-lm-* CSS custom properties set by mgb_layout_css */
.mgb-lm-btn {
    position: relative;
    overflow: hidden;
    border: var(--mgb-lm-bw, 2px) solid var(--mgb-lm-bc, #C800A1);
    color: var(--mgb-lm-tc, #C800A1);
    border-radius: var(--mgb-lm-r, 6px);
    font-size: var(--mgb-lm-fs, 15px);
    padding: var(--mgb-lm-pv, 12px) var(--mgb-lm-ph, 40px);
    background: var(--mgb-lm-bg, transparent);
    font-weight: var(--mgb-lm-fw, 700);
    letter-spacing: .5px;
    font-family: var(--mgb-lm-font, 'Fredoka', sans-serif) !important;
    transition: all .22s ease;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.mgb-lm-btn:hover {
    background: var(--mgb-lm-hbg, #C800A1) !important;
    color: var(--mgb-lm-htc, #fff) !important;
    box-shadow: 0 0 20px rgba(200,0,161,.4);
    transform: translateY(-1px);
}

/* Neon Pulse */
@keyframes mgbLmPulse {
    0%,100% { box-shadow: 0 0 6px var(--mgb-lm-bc,#C800A1), 0 0 16px var(--mgb-lm-bc,#C800A1); }
    50%     { box-shadow: 0 0 22px var(--mgb-lm-bc,#C800A1), 0 0 44px var(--mgb-lm-bc,#C800A1); }
}
.mgb-lm-btn.mgb-lm-fx-neon-pulse {
    animation: mgbLmPulse 2s ease-in-out infinite;
    box-shadow: 0 0 8px var(--mgb-lm-bc, #C800A1);
}

/* Shimmer */
@keyframes mgbLmShimmer {
    0%   { left: -100%; }
    100% { left:  200%; }
}
.mgb-lm-btn.mgb-lm-fx-shimmer::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    animation: mgbLmShimmer 2s linear infinite;
    pointer-events: none;
}

/* Glitch */
@keyframes mgbLmGlitch {
    0%,90%,100% { transform:none; filter:none; }
    92%         { transform:skewX(-6deg) translateX(3px); filter:hue-rotate(80deg); }
    94%         { transform:none; filter:none; }
    96%         { transform:skewX(3deg) translateX(-2px); filter:brightness(1.4); }
    98%         { transform:none; filter:none; }
}
.mgb-lm-btn.mgb-lm-fx-glitch {
    animation: mgbLmGlitch 3.5s ease-in-out infinite;
}

/* Energy charge */
@keyframes mgbLmEnergy {
    0%   { width: 0; }
    70%  { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}
.mgb-lm-btn.mgb-lm-fx-energy::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    width: 0;
    background: var(--mgb-lm-bc, #C800A1);
    animation: mgbLmEnergy 1.8s ease-in-out infinite;
    pointer-events: none;
    box-shadow: 0 0 10px var(--mgb-lm-bc, #C800A1);
}

/* ── ACCESSIBILITY (v2.6.0) ───────────────────────────────── */

/* Visually hidden but announced to screen readers */
#mgb-live {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Card focus — keyboard navigation */
.mgb-card__link:focus-visible {
    outline: 3px solid var(--mgb-lm-bc, #C800A1);
    outline-offset: 3px;
    border-radius: var(--mgb-radius, 10px);
}

/* Load More button focus */
.mgb-lm-btn:focus-visible {
    outline: 3px solid var(--mgb-lm-bc, #C800A1);
    outline-offset: 4px;
}

/* Overlay visible on keyboard focus (not just hover) */
.mgb-card__link:focus-visible .mgb-card__overlay,
.mgb-card__link:focus-within  .mgb-card__overlay {
    opacity: 1 !important;
    transform: none !important;
}

/* Skip link for keyboard users (screen-reader only until focused) */
.mgb-skip-link {
    position: absolute;
    top: -100px; left: 0;
    z-index: 999;
    background: #C800A1;
    color: #fff;
    padding: 8px 16px;
    font-weight: 700;
    text-decoration: none;
    transition: top .15s;
}
.mgb-skip-link:focus { top: 0; }

/* RTL support */
[dir="rtl"] .mgb-grid            { direction: rtl; }
[dir="rtl"] .mgb-card__overlay   { text-align: right; }
[dir="rtl"] .mgb-lm-wrap         { direction: rtl; }

/* ══════════════════════════════════════════════════════════════════════════════
   v2.6.9 — NEW HOVER EFFECTS (FIX #10)
   Applied via data-hfx="<effect>" on .mgb-card
   ══════════════════════════════════════════════════════════════════════════════ */

/* slide_up_overlay — Netflix-style full overlay slides up */
.mgb-card[data-hfx="slide_up_overlay"] .mgb-card__overlay {
    transform: translateY(100%);
    opacity: 1 !important;
    background: var(--mgb-hbg, rgba(41,37,79,.9));
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    display: flex !important;
    align-items: flex-end !important;
}
.mgb-card[data-hfx="slide_up_overlay"]:hover .mgb-card__overlay,
.mgb-card[data-hfx="slide_up_overlay"]:focus-within .mgb-card__overlay {
    transform: translateY(0);
    background: var(--mgb-hbg-a, rgba(41,37,79,.95));
}
.mgb-card[data-hfx="slide_up_overlay"]:hover .mgb-card__title,
.mgb-card[data-hfx="slide_up_overlay"]:focus-within .mgb-card__title {
    color: var(--mgb-htc-a, #b800b8);
}

/* neon_border — card border glows on hover, no overlay */
.mgb-card[data-hfx="neon_border"] .mgb-card__overlay { opacity: 0 !important; }
.mgb-card[data-hfx="neon_border"] .mgb-card__img {
    transition: box-shadow .25s ease, transform .25s ease;
}
.mgb-card[data-hfx="neon_border"]:hover .mgb-card__img {
    box-shadow: 0 0 0 2px var(--mgb-htc,#C800A1),
                0 0 18px 2px var(--mgb-htc,#C800A1),
                0 0 36px 4px rgba(200,0,161,.4);
    transform: scale(1.03);
}

/* scanline — CRT retro horizontal scan lines */
.mgb-card[data-hfx="scanline"] .mgb-card__overlay {
    opacity: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,.25) 0px,
        rgba(0,0,0,.25) 1px,
        transparent 1px,
        transparent 3px
    );
    transition: opacity .25s;
}
.mgb-card[data-hfx="scanline"]:hover .mgb-card__overlay,
.mgb-card[data-hfx="scanline"]:focus-within .mgb-card__overlay { opacity: 1; }
.mgb-card[data-hfx="scanline"] .mgb-card__img {
    transition: filter .25s;
}
.mgb-card[data-hfx="scanline"]:hover .mgb-card__img {
    filter: brightness(.85) contrast(1.1) saturate(1.2);
}

/* glitch_reveal — image glitches then title appears */
@keyframes mgbGlitchReveal {
    0%,100% { clip-path: none;    transform: none; }
    20%     { clip-path: inset(10% 0 80% 0); transform: translate(-4px,0) skewX(-8deg); }
    40%     { clip-path: inset(40% 0 40% 0); transform: translate(4px,0)  skewX(4deg); }
    60%     { clip-path: inset(80% 0 10% 0); transform: translate(-2px,0); }
    80%     { clip-path: none;    transform: none; }
}
.mgb-card[data-hfx="glitch_reveal"] .mgb-card__overlay { opacity: 0; transition: opacity .15s .2s; }
.mgb-card[data-hfx="glitch_reveal"]:hover .mgb-card__img {
    animation: mgbGlitchReveal .45s steps(1) forwards;
}
.mgb-card[data-hfx="glitch_reveal"]:hover .mgb-card__overlay { opacity: 1; }

/* parallax_title — title offset moves independently */
.mgb-card[data-hfx="parallax_title"] .mgb-card__overlay {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s, transform .3s cubic-bezier(.4,0,.2,1);
}
.mgb-card[data-hfx="parallax_title"]:hover .mgb-card__overlay {
    opacity: 1;
    transform: translateY(0);
}
.mgb-card[data-hfx="parallax_title"] .mgb-card__img {
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.mgb-card[data-hfx="parallax_title"]:hover .mgb-card__img {
    transform: scale(1.06) translateY(-3%);
}

/* ── LOAD MORE: loading and reset states ─────────────────────────────────────── */
.mgb-lm-btn.is-loading,
.mgb-lm-btn.mgb-lm-loading {
    opacity: .6;
    pointer-events: none;
    cursor: wait;
}

/* ── v2.10.2: Grid spacing — controlled by CSS vars injected via PHP ──────── */
.mgb-grid-unit {
    margin-top: var(--mgb-grid-mt, 0px);
    margin-bottom: var(--mgb-grid-mb, 24px);
    padding-top: var(--mgb-grid-pt, 16px);
}

/* ── v2.10.2: Block AdSense auto-ads inside grid + between grid and Load More ── */
/* .mgb-no-ads is on .mgb-wrap itself — descendant selector catches ads inside */
.mgb-no-ads ins.adsbygoogle,
.mgb-no-ads .google-auto-placed,
.mgb-no-ads [data-ad-slot] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}
/* Compound: also catch with higher specificity */
.mgb-wrap.mgb-no-ads > ins.adsbygoogle,
.mgb-wrap.mgb-no-ads > .google-auto-placed {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
/* :has() catches ads injected inside .mgb-grid-unit but outside .mgb-wrap */
.mgb-grid-unit:has(.mgb-no-ads) > ins.adsbygoogle,
.mgb-grid-unit:has(.mgb-no-ads) > .google-auto-placed,
.mgb-grid-unit:has(.mgb-no-ads) > [data-ad-slot] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ── v2.10.0: Load More spinner — gaming neon style ───────────────────────── */
@keyframes mgbSpinRing {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes mgbSpinPulse {
    0%, 100% { box-shadow: 0 0 6px var(--mgb-lm-bc, #C800A1); }
    50%      { box-shadow: 0 0 18px var(--mgb-lm-bc, #C800A1), 0 0 36px var(--mgb-lm-bc, #C800A1); }
}
.mgb-lm-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
    min-width: 120px;
    opacity: 1 !important;
    background: var(--mgb-lm-bg, transparent) !important;
    border-color: var(--mgb-lm-bc, #C800A1) !important;
}
.mgb-lm-btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 3px solid var(--mgb-lm-spinner-track, rgba(200,0,161,.18));
    border-top-color: var(--mgb-lm-bc, #C800A1);
    border-radius: 50%;
    animation: mgbSpinRing .7s linear infinite, mgbSpinPulse 1.8s ease-in-out infinite;
}

/* ── v2.10.4: Block ads between Load More and FAQs ──────────────────────── */
.mgb-faq-noads ins.adsbygoogle,
.mgb-faq-noads .google-auto-placed,
.mgb-faq-noads [data-ad-slot],
.mgb-faq-noads > ins.adsbygoogle,
.mgb-faq-noads > .google-auto-placed {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/* ── v2.10.4: Category FAQ — CyberFAQ-compatible styling ─────────────────── */
.mgb-faq-wrap {
    margin-top: 40px;
    margin-bottom: 40px;
    border: 1px solid #333;
    background: rgba(11, 11, 14, 0.8);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.mgb-faq-header {
    background: #111;
    padding: 15px 20px;
    border-bottom: 1px solid #333;
    border-left: 5px solid var(--mgb-lm-bc, #b700b7);
}
.mgb-faq-header h3 {
    margin: 0;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.mgb-faq-item {
    border-bottom: 1px solid #222;
}
.mgb-faq-item:last-child {
    border-bottom: none;
}
.mgb-faq-q {
    width: 100%;
    background: transparent;
    border: none;
    padding: 18px 20px;
    text-align: left;
    color: #eee;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background 0.2s ease, color 0.2s ease;
    outline: none;
    font-family: inherit;
}
.mgb-faq-q:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--mgb-lm-bc, #ff00ff);
}
.mgb-faq-q:focus-visible {
    outline: 1px solid #00ffff;
    outline-offset: -1px;
}
.mgb-faq-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 15px;
    position: relative;
    flex-shrink: 0;
}
.mgb-faq-icon::before,
.mgb-faq-icon::after {
    content: '';
    position: absolute;
    background: var(--mgb-lm-bc, #B700B7);
    transition: transform 0.3s ease;
}
.mgb-faq-icon::before { top: 5px; left: 0; width: 12px; height: 2px; }
.mgb-faq-icon::after  { top: 0; left: 5px; width: 2px; height: 12px; }
.mgb-faq-q[aria-expanded="true"] {
    background: rgba(183, 0, 183, 0.05);
    color: #00ffff;
}
.mgb-faq-q[aria-expanded="true"] .mgb-faq-icon::after  { transform: rotate(90deg); }
.mgb-faq-q[aria-expanded="true"] .mgb-faq-icon::before { background: #00ffff; }
.mgb-faq-q[aria-expanded="true"] .mgb-faq-icon::after  { background: #00ffff; }
.mgb-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
    background: rgba(0, 0, 0, 0.3);
    color: #ccc;
    font-size: 15px;
    line-height: 1.6;
}
.mgb-faq-a-inner {
    padding: 20px 20px 20px 47px;
}


/* ── v2.10.7: Category Hero Layouts — fully driven by CSS vars ───────────────── */
.mgb-hero {
    box-sizing: border-box;
    margin: 0 auto 24px;
    padding: 0 var(--mgb-hero-pad-h, 20px);
}

/* Shared image box */
.mgb-hero__img-box {
    overflow: hidden;
    border-radius: var(--mgb-hero-img-r, 12px);
    background: #111;
    flex-shrink: 0;
}
.mgb-hero__img {
    display: block;
    width: 100%;
    height: var(--mgb-hero-img-h, 280px);
    object-fit: cover;
    border-radius: var(--mgb-hero-img-r, 12px);
}

/* Shared description block */
.mgb-hero__desc {
    font-size: 14px;
    line-height: 1.7;
    color: #bbb;
    padding-top: var(--mgb-hero-text-pt, 0px);
    padding-left: var(--mgb-hero-text-ph, 0px);
    padding-right: var(--mgb-hero-text-ph, 0px);
}
.mgb-hero__desc p { margin: 0 0 8px; }
.mgb-hero__desc p:last-child { margin-bottom: 0; }
.mgb-hero__desc img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.mgb-hero__desc a { color: var(--mgb-lm-bc, #C800A1); text-decoration: none; }
.mgb-hero__desc a:hover { text-decoration: underline; }

/* ── LAYOUT: Side (es3/es4 — default) ────────────────────────────────────────── */
.mgb-hero--side {
    display: flex;
    gap: var(--mgb-hero-gap, 24px);
    align-items: flex-start;
}
.mgb-hero--side .mgb-hero__img-box {
    width: var(--mgb-hero-img-pct, 40%);
    min-width: var(--mgb-hero-img-pct, 40%);
}
.mgb-hero--side .mgb-hero__desc {
    flex: 1;
    min-width: 0;
}

/* ── LAYOUT: Stack full (es1) ────────────────────────────────────────────────── */
.mgb-hero--stack {
    display: block;
}
.mgb-hero--stack .mgb-hero__img-box {
    width: 100%;
    margin-bottom: var(--mgb-hero-img-mb, 16px);
}

/* ── LAYOUT: Stack centered (es2) ────────────────────────────────────────────── */
.mgb-hero--stack_ctr {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mgb-hero--stack_ctr .mgb-hero__img-box {
    width: 65%;
    margin-bottom: var(--mgb-hero-img-mb, 16px);
}
.mgb-hero--stack_ctr .mgb-hero__desc {
    width: 100%;
}

/* ── LAYOUT: Text only ───────────────────────────────────────────────────────── */
.mgb-hero--text {
    display: block;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .mgb-hero--side {
        flex-direction: column;
    }
    .mgb-hero--side .mgb-hero__img-box {
        width: 100%;
        min-width: 100%;
        margin-bottom: var(--mgb-hero-img-mb, 16px);
    }
    .mgb-hero--stack_ctr .mgb-hero__img-box {
        width: 85%;
    }
}

/* ── v2.10.12: Block ads between title↔hero (class on .mgb-archive-wrap) ───── */
.mgb-noads-titlehero > .mgb-archive-hero ~ ins.adsbygoogle,
.mgb-noads-titlehero > .mgb-archive-hero ~ .google-auto-placed,
.mgb-noads-titlehero > ins.adsbygoogle:not(.mgb-archive-hero ~ .mgb-hero ~ ins),
.mgb-noads-titlehero > .google-auto-placed:not(.mgb-archive-hero ~ .mgb-hero ~ .google-auto-placed) {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}
/* ── v2.10.12: Block ads between hero↔grid (class on .mgb-archive-wrap) ───── */
.mgb-noads-herogrid > .mgb-hero ~ ins.adsbygoogle,
.mgb-noads-herogrid > .mgb-hero ~ .google-auto-placed,
.mgb-noads-herogrid > .mgb-hero ~ [data-ad-slot] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ── v2.10.9: FAQ sidebar layout ─────────────────────────────────────────────── */
.mgb-faq-layout {
    display: block;
}
.mgb-faq-layout--sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
}
.mgb-faq-sidebar {
    position: sticky;
    top: 20px;
    padding: 16px;
    background: rgba(11, 11, 14, 0.6);
    border: 1px solid #222;
    border-radius: 10px;
    font-size: 14px;
    color: #bbb;
    line-height: 1.6;
    overflow: hidden;
}
.mgb-faq-sidebar ins.adsbygoogle {
    display: block;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .mgb-faq-layout--sidebar {
        grid-template-columns: 1fr;
    }
    .mgb-faq-sidebar {
        position: static;
    }
}