/* Hongtin News Bridge — Card + Landing Styles
 * HNB_MAIN_CARD_UI_POLISH_V2
 * HNB_MAIN_CARD_POLISH_V1 (superseded)
 * HNB_LANDING_NO_HEADER_FOOTER_V1 (retained)
 * HNB_RELATED_REMOVED_V1 (retained — no .hnb-related rules)
 * HNB_DISABLE_CPD_POPUP_AND_DEBUG_V1 (retained)
 *
 * Scoped to body.hnb-landing-body / .hnb-* — no global pollution.
 */

/* ================================================================
   LANDING BODY
   ================================================================ */
body.hnb-landing-body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(ellipse 90% 55% at 50% 38%, rgba(199,222,254,.55) 0%, transparent 68%),
        linear-gradient(165deg, #eef3ff 0%, #f8fafc 50%, #e9f3fb 100%);
    overflow-x: hidden;
    min-height: 100vh;
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    color: #0f172a;
}

/* ================================================================
   LANDING WRAPPER — vertically centered, scrollable when card tall
   ================================================================ */
.hnb-landing {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: 32px 16px 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ================================================================
   CARD WRAPPER
   ================================================================ */
.hnb-wrapper {
    width: 100%;
    max-width: 720px;
}

/* ================================================================
   MAIN CARD — HNB_MAIN_CARD_UI_POLISH_V2
   ================================================================ */
@keyframes hnb-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.hnb-card {
    background: rgba(255,255,255,.96);
    border-radius: 24px;
    border: 1px solid rgba(15,23,42,.07);
    box-shadow:
        0 1px 3px   rgba(15,23,42,.05),
        0 8px 24px  rgba(15,23,42,.10),
        0 32px 80px rgba(15,23,42,.13);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    animation: hnb-card-in 240ms ease-out both;
    position: relative;
}

/* Gradient top-accent stripe */
.hnb-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 50%, #6366f1 100%);
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .hnb-card { animation: none; }
}

/* Subtle lift on desktop hover */
@media (hover: hover) and (pointer: fine) {
    .hnb-card:hover {
        transform: translateY(-3px);
        box-shadow:
            0 2px 6px   rgba(15,23,42,.05),
            0 14px 36px rgba(15,23,42,.12),
            0 40px 96px rgba(15,23,42,.15);
        transition: transform .22s ease, box-shadow .22s ease;
    }
}

/* ── Thumbnail ── */
.hnb-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 320px;
    background: #dce5f0;
    overflow: hidden;
}

.hnb-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradient overlay at bottom of image */
.hnb-thumb-wrap::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(15,23,42,.22) 0%, transparent 100%);
    pointer-events: none;
}

.hnb-thumb-wrap.hnb-no-img {
    background: linear-gradient(135deg, #dde6f7 0%, #e8e4f8 50%, #d5ebf7 100%);
    max-height: 200px;
}

.hnb-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #94a3b8;
    user-select: none;
}

.hnb-placeholder span {
    font-size: 52px;
    display: block;
    line-height: 1;
    margin-bottom: 8px;
    opacity: .5;
}

.hnb-placeholder p {
    font-size: 13px;
    margin: 0;
    opacity: .7;
}

/* ── Body ── */
.hnb-body {
    padding: 22px 24px 22px;
}

/* Source badge */
.hnb-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: lowercase;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    margin-bottom: 14px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid rgba(29,78,216,.13);
}

.hnb-icon-link {
    flex-shrink: 0;
    opacity: .65;
}

/* Title */
.hnb-title {
    font-size: clamp(1.44rem, 4.8vw, 2.05rem);
    font-weight: 800;
    line-height: 1.18;
    color: #0f172a;
    margin: 0 0 13px;
    letter-spacing: -.025em;
}

/* Description */
.hnb-description {
    font-size: 15px;
    line-height: 1.58;
    color: #475569;
    margin: 0 0 22px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── CTA Button ── */
.hnb-cta-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    min-height: 56px;
    padding: 0 24px;
    border-radius: 16px;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    color: #fff !important;
    background: linear-gradient(90deg, #2563eb 0%, #0891b2 100%);
    box-shadow:
        0 4px 20px rgba(37,99,235,.30),
        0 1px 4px  rgba(37,99,235,.15);
    transition: transform .15s ease, box-shadow .15s ease;
    margin-bottom: 12px;
}

@media (hover: hover) and (pointer: fine) {
    .hnb-cta-btn:hover {
        background: linear-gradient(90deg, #1d4ed8 0%, #0e7490 100%) !important;
        transform: translateY(-1px);
        box-shadow:
            0 8px 28px rgba(37,99,235,.38),
            0 2px 6px  rgba(37,99,235,.18) !important;
        color: #fff !important;
    }
}

.hnb-cta-btn:active {
    transform: scale(.99) translateY(0);
    box-shadow: 0 2px 8px rgba(37,99,235,.20) !important;
}

.hnb-cta-btn:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
}

.hnb-cta-btn svg {
    flex-shrink: 0;
}

/* CTA Subtext */
.hnb-cta-subtext {
    font-size: 13px;
    color: #64748b;
    text-align: center;
    margin: 0 0 18px;
    line-height: 1.45;
    min-height: 18px;
}

/* Disclaimer */
.hnb-disclaimer {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.55;
    margin: 0;
    text-align: center;
    border-top: 1px solid rgba(15,23,42,.06);
    padding-top: 15px;
}

/* ================================================================
   RESPONSIVE — mobile
   ================================================================ */
@media (max-width: 640px) {
    .hnb-landing {
        align-items: flex-start;
        padding: 16px 12px 22px;
    }

    .hnb-card {
        border-radius: 22px;
    }

    .hnb-thumb-wrap {
        max-height: 225px;
    }

    .hnb-body {
        padding: 18px 16px 18px;
    }

    .hnb-title {
        font-size: 23px;
        line-height: 1.22;
        margin-bottom: 11px;
        letter-spacing: -.02em;
    }

    .hnb-description {
        -webkit-line-clamp: 3;
        margin-bottom: 20px;
    }

    .hnb-cta-btn {
        min-height: 54px;
        font-size: .97rem;
    }
}

/* ================================================================
   HNB_DISABLE_CPD_POPUP_AND_DEBUG_V1: visual safety fallback
   Primary suppression via PHP dequeue + wp_filter removal.
   ================================================================ */
body.hnb-landing-body .wppopups-whole,
body.hnb-landing-body .cpd-link,
body.hnb-landing-body #cpd-veil,
body.hnb-landing-body #cpd-p2-veil,
body.hnb-landing-body #cpd-link-layer,
body.hnb-landing-body #cpd-p2-css + div,
body.hnb-landing-body #hnb-debug-overlay {
    display: none !important;
}


/* ================================================================
   HNB_SINGLE_POST_TRIAL_SOURCE_TRUST_CTA_V1
   Scoped to .hnb-ui-source-trust, .hnb-ui-trial-source-trust — applies ONLY to posts
   with _hnb_ui_trial_variant = source_trust_cta_v1.
   All other HNB articles remain completely unaffected.
   ================================================================ */

/* Source badge — deeper blue for verified-source feel */
.hnb-ui-source-trust .hnb-source-badge,
.hnb-ui-trial-source-trust .hnb-source-badge {
    background: #dbeafe;
    color: #1e40af;
    border-color: rgba(30,64,175,.18);
    font-weight: 800;
    letter-spacing: .04em;
    font-size: 12px;
    padding: 5px 12px 5px 9px;
}

/* CTA — stronger gradient + height */
.hnb-ui-source-trust .hnb-cta-btn,
.hnb-ui-trial-source-trust .hnb-cta-btn {
    background: linear-gradient(90deg, #1a56db 0%, #0369a1 100%);
    box-shadow:
        0 6px 26px rgba(26,86,219,.38),
        0 1px 4px  rgba(26,86,219,.20);
    min-height: 58px;
}

@media (hover: hover) and (pointer: fine) {
    .hnb-ui-source-trust .hnb-cta-btn:hover,
    .hnb-ui-trial-source-trust .hnb-cta-btn:hover {
        background: linear-gradient(90deg, #1e40af 0%, #075985 100%) !important;
        box-shadow:
            0 10px 32px rgba(26,86,219,.44),
            0 2px 6px  rgba(26,86,219,.22) !important;
    }
}

/* Microcopy — allow wrapping for longer text */
.hnb-ui-source-trust .hnb-cta-subtext,
.hnb-ui-trial-source-trust .hnb-cta-subtext {
    line-height: 1.5;
    padding: 0 6px;
    white-space: normal;
    font-size: 12.5px;
}

/* ── Step badge — HNB_SECOND_CLICK_SHOPEE_GATE_TRIAL_V1 ── */
.hnb-step-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid rgba(37,99,235,.18);
    border-radius: 999px;
    padding: 3px 11px;
    margin-bottom: 10px;
}

/* ================================================================
   HNB_SECOND_CLICK_GATE_REDIRECT_UX_V1
   Redirect panel + spinner scoped to trial post only.
   Shown when .hnb-gate-redirect-ready is present.
   ================================================================ */

/* ── Redirect panel ── */
.hnb-ui-source-trust .hnb-redirect-panel,
.hnb-ui-trial-source-trust .hnb-redirect-panel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0f7ff;
    border: 1px solid rgba(37,99,235,.14);
    border-radius: 16px;
    padding: 13px 16px;
    margin-bottom: 14px;
}

/* ── Spinner ── */
@keyframes hnb-spin {
    to { transform: rotate(360deg); }
}

.hnb-redirect-spinner {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(37,99,235,.18);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: hnb-spin 700ms linear infinite;
    margin-top: 1px;
}

@media (prefers-reduced-motion: reduce) {
    .hnb-redirect-spinner { animation: none; border-top-color: #2563eb; }
}

/* ── Copy area ── */
.hnb-redirect-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hnb-redirect-copy strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1e3a8a;
    line-height: 1.3;
}

.hnb-redirect-copy span {
    display: block;
    font-size: 12.5px;
    color: #475569;
    line-height: 1.45;
}

/* ── CTA stronger in gate state ── */
.hnb-ui-source-trust.hnb-gate-redirect-ready .hnb-cta-btn,
.hnb-ui-trial-source-trust.hnb-gate-redirect-ready .hnb-cta-btn {
    background: linear-gradient(90deg, #1d4ed8 0%, #0369a1 100%);
    box-shadow:
        0 6px 28px rgba(29,78,216,.40),
        0 1px 4px  rgba(29,78,216,.20);
}

@media (hover: hover) and (pointer: fine) {
    .hnb-ui-source-trust.hnb-gate-redirect-ready .hnb-cta-btn:hover,
    .hnb-ui-trial-source-trust.hnb-gate-redirect-ready .hnb-cta-btn:hover {
        background: linear-gradient(90deg, #1e40af 0%, #075985 100%) !important;
        box-shadow: 0 10px 36px rgba(29,78,216,.46), 0 2px 6px rgba(29,78,216,.22) !important;
    }
}

/* ── Mobile compact ── */
@media (max-width: 640px) {
    .hnb-ui-source-trust .hnb-redirect-panel,
    .hnb-ui-trial-source-trust .hnb-redirect-panel {
        gap: 10px;
        padding: 11px 13px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .hnb-redirect-spinner {
        width: 18px;
        height: 18px;
    }

    .hnb-redirect-copy strong { font-size: 13.5px; }
    .hnb-redirect-copy span   { font-size: 12px; }
}

/* ================================================================
   HNB_MOBILE_EMPTY_SPACE_VISUAL_POLISH_V1
   Visual treatment for the blank area below card on mobile IAB.
   No new text. No structural changes. Pure CSS.
   Scoped to body.hnb-landing-body / .hnb-* — zero global pollution.
   ================================================================ */

/* ── Richer background: add soft bottom-accent blob ── */
body.hnb-landing-body {
    background:
        radial-gradient(ellipse 90% 55% at 50% 38%, rgba(199,222,254,.55) 0%, transparent 68%),
        radial-gradient(ellipse 65% 40% at 50% 100%, rgba(99,102,241,.07) 0%, transparent 62%),
        linear-gradient(165deg, #eef3ff 0%, #f8fafc 50%, #e9f3fb 100%);
}

/* ── Wrapper: position context for bloom pseudo-element ── */
.hnb-wrapper {
    position: relative;
}

/* ── Decorative bloom beneath card (zero layout impact) ── */
.hnb-wrapper::after {
    content: '';
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: -16px;
    height: 42px;
    background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,.15) 0%, transparent 72%);
    filter: blur(15px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

/* ── CTA button: bloom layer beneath for focal-point pull ── */
body.hnb-landing-body .hnb-cta-btn {
    box-shadow:
        0 4px 20px rgba(37,99,235,.30),
        0 1px 4px  rgba(37,99,235,.15),
        0 14px 40px -8px rgba(37,99,235,.14);
}

/* ── Mobile: extra bottom breathing room so content feels anchored ── */
@media (max-width: 640px) {
    .hnb-landing {
        padding-top:    clamp(14px, 3.5svh, 32px);
        padding-bottom: clamp(36px, 9svh, 72px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hnb-wrapper::after { display: none; }
}

/* ================================================================
   HNB_MOBILE_EMPTY_SPACE_VISUAL_POLISH_V2
   Stronger ambient treatment — V1 was too subtle (operator feedback).
   No new text. Pure CSS overrides. Scoped to .hnb-landing-body.
   Overrides V1 values via cascade (later in file = higher priority).
   ================================================================ */

/* ── Background: triple the bottom blob opacity ── */
body.hnb-landing-body {
    background:
        radial-gradient(ellipse 90% 55% at 50% 38%, rgba(199,222,254,.55) 0%, transparent 68%),
        radial-gradient(ellipse 72% 50% at 50% 100%, rgba(99,102,241,.22) 0%, transparent 64%),
        linear-gradient(165deg, #eef3ff 0%, #f8fafc 50%, #e9f3fb 100%);
}

/* ── Wrapper stacking context ── */
.hnb-wrapper {
    position: relative;
    z-index: 1;
}

/* ── Ambient shelf (::before) — primary visible glow under card ── */
.hnb-wrapper::before {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -34px;
    height: 92px;
    border-radius: 999px;
    background: radial-gradient(ellipse at 50% 40%,
        rgba(59,130,246,.30) 0%,
        rgba(99,102,241,.20) 42%,
        transparent 76%);
    filter: blur(22px);
    opacity: .72;
    pointer-events: none;
    z-index: 0;
}

/* ── Tighter inner bloom (::after, overrides V1) ── */
.hnb-wrapper::after {
    content: '';
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: -10px;
    height: 54px;
    background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,.24) 0%, transparent 72%);
    filter: blur(12px);
    opacity: .68;
    pointer-events: none;
    z-index: 0;
}

/* ── Card above blobs ── */
.hnb-card {
    z-index: 2;
}

/* ── CTA: stronger focal-point glow ── */
body.hnb-landing-body .hnb-cta-btn {
    box-shadow:
        0 4px 20px  rgba(37,99,235,.34),
        0 1px 4px   rgba(37,99,235,.18),
        0 18px 48px -8px rgba(37,99,235,.24);
}

/* ── Mobile: generous padding so ambient shelf is visible below card ── */
@media (max-width: 640px) {
    .hnb-landing {
        padding-top:    clamp(20px, 5svh,  44px);
        padding-bottom: clamp(58px, 12svh, 104px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hnb-wrapper::before,
    .hnb-wrapper::after { display: none; }
}

/* ================================================================
   HNB_MOBILE_UI_PREMIUM_POLISH_V3
   Micro-polish: premium card feel, subtle image treatment, cleaner CTA.
   No new text. No structural changes. Pure CSS overrides.
   Scoped to .hnb-landing-body / .hnb-* — zero global pollution.
   ================================================================ */

/* ── Card: softer glass border + multi-layer shadow ── */
.hnb-card {
    border: 1px solid rgba(255,255,255,.72);
    box-shadow:
        0 22px 70px rgba(15,23,42,.13),
        0 2px  8px  rgba(15,23,42,.06);
    background: rgba(255,255,255,.97);
}

@media (hover: hover) and (pointer: fine) {
    .hnb-card:hover {
        box-shadow:
            0 28px 88px rgba(15,23,42,.15),
            0 4px  12px rgba(15,23,42,.08);
        transition: transform .22s ease, box-shadow .22s ease;
    }
}

/* ── Card top: glass highlight line replaces colour stripe ── */
.hnb-card::before {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.90) 35%,
        rgba(255,255,255,.90) 65%,
        transparent 100%);
    pointer-events: none;
}

/* ── Thumb: light saturation/contrast lift ── */
.hnb-thumb {
    filter: saturate(1.04) contrast(1.02);
}

/* ── Thumb overlay: subtler bottom fade (36% / .10 vs V2 45% / .22) ── */
.hnb-thumb-wrap::after {
    height: 36%;
    background: linear-gradient(to top, rgba(15,23,42,.10) 0%, transparent 100%);
}

/* ── CTA: smoother 135° gradient ── */
.hnb-cta-btn {
    background: linear-gradient(135deg, #155eef 0%, #0284c7 50%, #0891b2 100%);
}

@media (hover: hover) and (pointer: fine) {
    .hnb-cta-btn:hover {
        background: linear-gradient(135deg, #0f4ccc 0%, #0369a1 50%, #0e7490 100%) !important;
    }
}

/* ── CTA glow: calmer layers ── */
body.hnb-landing-body .hnb-cta-btn {
    box-shadow:
        0 4px 18px  rgba(21,94,239,.28),
        0 1px 4px   rgba(21,94,239,.14),
        0 16px 44px -8px rgba(21,94,239,.18);
}

/* ── Redirect panel: cleaner glass bg ── */
.hnb-ui-source-trust .hnb-redirect-panel,
.hnb-ui-trial-source-trust .hnb-redirect-panel {
    background: linear-gradient(135deg,
        rgba(239,246,255,.96) 0%,
        rgba(236,253,245,.72) 100%);
    border: 1px solid rgba(37,99,235,.10);
}

/* ── Spinner: toned down ── */
.hnb-redirect-spinner {
    border-color: rgba(37,99,235,.14);
    border-top-color: #3b82f6;
}


/* ================================================================
   HNB_NO_FLASH_SOURCE_RETURN_V1
   Full-screen neutral cover during auto-source navigation after app
   return. Applied via html.hnb-source-return-cover set by JS and by
   the inline early script in <head>. No text. No layout shift.
   Scoped to body.hnb-landing-body — zero global pollution.
   ================================================================ */

/* Hide card content during cover */
html.hnb-source-return-cover .hnb-landing {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Full-screen paint layer — same palette as page bg, masks repaint */
html.hnb-source-return-cover body.hnb-landing-body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: linear-gradient(165deg, #eef3ff 0%, #f8fafc 55%, #e9f3fb 100%);
    pointer-events: none;
}