/* =========================================================
 * RankwellPress — Widget Styles (glass + frost edition)
 * FINAL — Overlay scrim fix merged into section 7
 *
 * CHANGES IN THIS VERSION
 * - Section 7: the boxed, blurred glass panel on large overlay
 *   cards is replaced by a bottom gradient scrim with a smaller
 *   fluid title size. No title clamping, no hidden excerpt.
 * - Overlay badge is now solid accent (readable on dark).
 * - Mobile (<=480px) and reduced-transparency rules updated to match.
 *
 * Earlier fix kept: the PHP template wraps the badge and meta in a
 * `.rwp-card-subrow` div, which is forced to be a grid container
 * with the correct gap.
 *
 * CUSTOMIZER WIRING (this revision)
 * - Role-based token model. Existing Customizer settings are
 *   repurposed via the :root alias block below:
 *
 *     WIDGET TITLE          ← Widget Heading Size / Weight
 *     LARGE POST TITLE      ← Post Title Size / Weight
 *     SMALL POST TITLE      ← Compact Title Size / Weight
 *     Minimal Title Size / Weight = dead (nothing reads it)
 *
 *   Every var() keeps the previous hard-coded value as the
 *   fallback, so rendering is identical if the CSS-vars
 *   pipeline ever fails to emit a token.
 *
 * TEXT WRAPPING (this revision)
 * - Card titles (grid, full, overlay) use `text-wrap: pretty`
 *   instead of `text-wrap: balance`. Pretty avoids orphans
 *   without forcing a shorter first line, which lets variable-
 *   length news headlines fill the available width naturally.
 * ========================================================= */

/* =========================================================
 * 0. DESIGN TOKENS
 * ========================================================= */

:root {
    /* ── Role aliases ──
       Maps existing Customizer tokens to the three visual
       roles used throughout this stylesheet. */

    /* Widget Title ← Widget Heading Size/Weight */
    --rwp-title-widget-size:   var(--rw-widget-title-size, 20px);
    --rwp-title-widget-weight: var(--rw-widget-title-weight, 700);

    /* Large Post Title ← Post Title Size/Weight */
    --rwp-title-large-size:    var(--rw-widget-post-title-size, 20px);
    --rwp-title-large-weight:  var(--rw-widget-post-title-weight, 800);
    --rwp-title-large-clamp:   3;

    /* Small Post Title ← Compact Title Size/Weight */
    --rwp-title-small-size:    var(--rw-herogrid-compact-size, 14px);
    --rwp-title-small-weight:  var(--rw-herogrid-compact-weight, 600);
    --rwp-title-small-clamp:   var(--rw-line-clamp, 2);

    /* ── Structural tokens ── */

    --rwp-accent: var(--rw-color-primary, #0d7c3e);
    --rwp-title-accent: var(--rw-widget-title-color, var(--rwp-accent));
    --rwp-title-ink-accent: var(--rwp-title-accent);
    --rwp-title-ink: var(--rw-text-heading, #0f172a);
    --rwp-inverse: var(--rw-text-inverse, #ffffff);

    --rwp-cat: var(--rw-widget-category-text, var(--rwp-accent));
    --rwp-cat-bg: color-mix(in srgb, var(--rw-widget-category-bg, var(--rwp-accent)) 8%, transparent);
    --rwp-cat-ring: color-mix(in srgb, var(--rw-widget-category-bg, var(--rwp-accent)) 16%, transparent);

    --rwp-post-title: var(--rw-widget-post-title-color, #0f172a);
    --rwp-post-title-hover: var(--rw-widget-post-title-hover, var(--rwp-accent));
    --rwp-muted: var(--rw-text-muted, #6b7789);

    --rwp-surface-solid: var(--rw-widget-card-bg, #ffffff);
    --rwp-surface: color-mix(in srgb, var(--rwp-surface-solid) 72%, transparent);
    --rwp-surface-hover: color-mix(in srgb, var(--rwp-surface-solid) 86%, transparent);
    --rwp-blur: 14px;
    --rwp-saturate: 160%;
    --rwp-frost-edge: rgba(255, 255, 255, 0.75);
    --rwp-edge: rgba(15, 23, 42, 0.07);
    --rwp-edge-strong: rgba(15, 23, 42, 0.14);
    --rwp-placeholder: rgba(15, 23, 42, 0.05);

    --rwp-line: rgba(15, 23, 42, 0.08);
    --rwp-hover-bg: rgba(15, 23, 42, 0.035);

    --rwp-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    --rwp-shadow-hover: 0 6px 18px -10px rgba(15, 23, 42, 0.16);

    --rwp-glass-dark: rgba(10, 14, 22, 0.38);
    --rwp-glass-dark-edge: rgba(255, 255, 255, 0.18);
    --rwp-glass-chip: rgba(255, 255, 255, 0.16);

    /* Overlay scrim (large image cards) */
    --rwp-scrim-pad: 56px 16px 14px;

    --rwp-radius: 10px;
    --rwp-radius-media: 6px;
    --rwp-radius-pill: 999px;
    --rwp-card-media-radius: 0px;
    --rwp-pad: 10px;
    --rwp-body-pad: 12px 14px 14px;
    --rwp-gap: var(--rw-widget-item-gap, 12px);
    --rwp-section-gap: 22px;
    --rwp-grid-gap: 14px;
    --rwp-thumb: 80px;
    --rwp-lift: -1px;

    --rwp-focus: 50% 35%;

    --rwp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --rwp-dur-fast: 0.15s;
    --rwp-dur-med: 0.3s;
    --rwp-dur-slow: 0.5s;
}

html[data-theme="dark"] {
    --rwp-post-title: var(--rw-widget-post-title-color, #f1f5f9);
    --rwp-title-ink: var(--rw-text-heading, #f8fafc);
    --rwp-muted: var(--rw-text-muted, #94a3b8);
    --rwp-surface-solid: var(--rw-widget-card-bg, #151b27);
    --rwp-surface: color-mix(in srgb, var(--rwp-surface-solid) 62%, transparent);
    --rwp-surface-hover: color-mix(in srgb, var(--rwp-surface-solid) 78%, transparent);
    --rwp-frost-edge: rgba(255, 255, 255, 0.10);
    --rwp-edge: rgba(255, 255, 255, 0.07);
    --rwp-edge-strong: rgba(255, 255, 255, 0.15);
    --rwp-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    --rwp-shadow-hover: 0 8px 22px -12px rgba(0, 0, 0, 0.6);
    --rwp-placeholder: rgba(255, 255, 255, 0.06);
    --rwp-line: rgba(255, 255, 255, 0.08);
    --rwp-hover-bg: rgba(255, 255, 255, 0.05);
}

.rwp-footer {
    --rwp-accent: var(--rw-footer-accent, #0d7c3e);
    --rwp-title-accent: var(--rw-footer-accent, #0d7c3e);
    --rwp-title-ink-accent: var(--rw-footer-heading, #ffffff);
    --rwp-title-ink: var(--rw-footer-heading, #ffffff);
    --rwp-cat: var(--rw-footer-accent, #0d7c3e);
    --rwp-cat-bg: color-mix(in srgb, var(--rw-footer-accent, #0d7c3e) 12%, transparent);
    --rwp-cat-ring: color-mix(in srgb, var(--rw-footer-accent, #0d7c3e) 22%, transparent);
    --rwp-post-title: var(--rw-footer-heading, #ffffff);
    --rwp-post-title-hover: var(--rw-footer-accent, #0d7c3e);
    --rwp-muted: var(--rw-footer-text, #94a3b8);
    --rwp-surface-solid: #1a2130;
    --rwp-surface: rgba(255, 255, 255, 0.05);
    --rwp-surface-hover: rgba(255, 255, 255, 0.08);
    --rwp-frost-edge: rgba(255, 255, 255, 0.10);
    --rwp-edge: rgba(255, 255, 255, 0.08);
    --rwp-edge-strong: rgba(255, 255, 255, 0.16);
    --rwp-shadow-hover: 0 8px 22px -12px rgba(0, 0, 0, 0.6);
    --rwp-placeholder: rgba(255, 255, 255, 0.06);
    --rwp-line: rgba(255, 255, 255, 0.08);
    --rwp-hover-bg: rgba(255, 255, 255, 0.05);
}

.rwp-flat {
    --rwp-surface: transparent;
    --rwp-surface-hover: transparent;
    --rwp-frost-edge: transparent;
    --rwp-edge: transparent;
    --rwp-edge-strong: transparent;
    --rwp-shadow: none;
    --rwp-shadow-hover: none;
    --rwp-blur: 0px;
    --rwp-radius: 0px;
    --rwp-radius-media: 4px;
    --rwp-card-media-radius: 8px;
    --rwp-pad: 0px;
    --rwp-body-pad: 10px 0 0;
    --rwp-lift: 0px;
}


/* =========================================================
 * GLASS MIXIN
 * ========================================================= */

:is(.rwp-card, .rwp-grid-card, .rwp-card-full) {
    background: var(--rwp-surface-solid);
    border: 1px solid var(--rwp-edge);
    border-radius: var(--rwp-radius);
    box-shadow:
        inset 0 1px 0 var(--rwp-frost-edge),
        var(--rwp-shadow);
    transition:
        transform var(--rwp-dur-med) var(--rwp-ease),
        box-shadow var(--rwp-dur-med) var(--rwp-ease),
        background-color var(--rwp-dur-med) ease,
        border-color var(--rwp-dur-fast) ease;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :is(.rwp-card, .rwp-grid-card, .rwp-card-full) {
        background: var(--rwp-surface);
        -webkit-backdrop-filter: blur(var(--rwp-blur)) saturate(var(--rwp-saturate));
        backdrop-filter: blur(var(--rwp-blur)) saturate(var(--rwp-saturate));
    }
    :is(.rwp-card, .rwp-grid-card, .rwp-card-full):hover {
        background: var(--rwp-surface-hover);
    }
}

:is(.rwp-card, .rwp-grid-card, .rwp-card-full):hover {
    transform: translateY(var(--rwp-lift));
    border-color: var(--rwp-edge-strong);
    box-shadow:
        inset 0 1px 0 var(--rwp-frost-edge),
        var(--rwp-shadow-hover);
}

.rwp-flat :is(.rwp-card, .rwp-grid-card, .rwp-card-full) {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}


/* =========================================================
 * 1. BASE
 * ========================================================= */

.rankwellpress-headlines-ad-spot,
.flexnews-ad-spot,
.featured-news-ad-spot,
.rankwellpress-hero-grid-ad-spot {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

:is(.rankwellpress-headlines-ad-spot,
    .flexnews-ad-spot,
    .featured-news-ad-spot,
    .rankwellpress-hero-grid-ad-spot):has(ins.adsbygoogle, iframe[id*="google_ads"], .google-auto-placed) {
    min-height: 90px;
    margin: calc(var(--rw-space-3, 0.75rem) * 0.7) 0;
}

.rankwellpress-hero-grid-ad-spot,
.featured-news-ad-spot {
    grid-column: 1 / -1;
}

.rankwellpress-headlines-row,
.flexnews-row,
.featured-news-row,
.rankwellpress-hero-grid-row {
    width: 100%;
}

:is(.rankwellpress-headlines-widget,
    .rankwellpress-flex-news-widget,
    .rankwellpress-featured-news-widget,
    .rankwellpress-hero-grid-widget,
    .widget_rankwellpress_headlines,
    .widget_rankwellpress_flex_news,
    .widget_rankwellpress_featured_news,
    .widget_rankwellpress_hero_grid,
    .rwp-widget) {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: 0;
    padding: 0;
    margin-bottom: var(--rwp-section-gap);
}

:is(.widget_rankwellpress_headlines,
    .widget_rankwellpress_flex_news,
    .widget_rankwellpress_featured_news,
    .widget_rankwellpress_hero_grid) :is(li, p) {
    margin: 0;
    padding: 0;
}

:is(.widget_rankwellpress_headlines,
    .widget_rankwellpress_flex_news,
    .widget_rankwellpress_featured_news,
    .widget_rankwellpress_hero_grid) :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
    padding: 0;
}

:is(.widget_rankwellpress_headlines,
    .widget_rankwellpress_flex_news,
    .widget_rankwellpress_featured_news,
    .widget_rankwellpress_hero_grid) .widget-title {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 14px;
}

:is(.widget_rankwellpress_headlines,
    .widget_rankwellpress_flex_news,
    .widget_rankwellpress_featured_news,
    .widget_rankwellpress_hero_grid) .widget-title::after {
    display: none;
}


/* =========================================================
 * 2. WIDGET TITLES
 * ========================================================= */

:is(.rwp-title-underline,
    .rwp-title-border,
    .rwp-title-slant,
    .rwp-title-top-border,
    .rwp-title-bg-fill,
    .rwp-title-minimal,
    .rwp-title-between-lines) {
    margin-bottom: 14px;
    letter-spacing: -0.01em;
    border: 0;
}

:is(.rwp-title-underline,
    .rwp-title-border,
    .rwp-title-top-border,
    .rwp-title-bg-fill,
    .rwp-title-minimal,
    .rwp-title-between-lines) {
    font-size: var(--rwp-title-widget-size);
    font-weight: var(--rwp-title-widget-weight);
}

.rwp-title-underline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    color: var(--rwp-title-ink-accent);
}

.rwp-title-underline::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: var(--rwp-edge-strong);
    background-image: linear-gradient(var(--rwp-title-accent), var(--rwp-title-accent));
    background-repeat: no-repeat;
    background-size: 48px 100%;
}

.rwp-title-border {
    color: var(--rwp-title-ink-accent);
    padding-left: 14px;
    border-left: 3px solid var(--rwp-title-accent);
}

.rwp-title-slant {
    position: relative;
    display: inline-block;
    z-index: 1;
    padding: 8px 22px;
    color: var(--rwp-inverse);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rwp-title-slant::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 3px;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--rwp-title-accent) 92%, #ffffff) 0%,
        var(--rwp-title-accent) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transform: skewX(-12deg);
}

.rwp-title-top-border {
    color: var(--rwp-title-ink);
    padding-top: 12px;
    border-top: 3px solid var(--rwp-title-accent);
}

.rwp-title-bg-fill {
    color: var(--rwp-title-ink);
    padding: var(--rw-widget-header-padding, 12px 16px);
    border: 1px solid var(--rwp-edge);
    border-radius: var(--rwp-radius-media);
    background-color: color-mix(in srgb, var(--rwp-title-accent) 9%, transparent);
    box-shadow: inset 0 1px 0 var(--rwp-frost-edge);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .rwp-title-bg-fill {
        -webkit-backdrop-filter: blur(10px) saturate(150%);
        backdrop-filter: blur(10px) saturate(150%);
    }
}

.rwp-title-bg-fill span {
    position: relative;
    padding-left: 14px;
}

.rwp-title-bg-fill span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background-color: var(--rwp-title-accent);
    transform: translateY(-50%);
}

.rwp-title-minimal {
    color: var(--rwp-title-ink);
}

.rwp-title-between-lines {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--rwp-title-ink-accent);
    text-transform: uppercase;
}

.rwp-title-between-lines::before,
.rwp-title-between-lines::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rwp-edge-strong);
}

.rwp-title-between-lines span {
    flex-shrink: 0;
    white-space: nowrap;
}


/* =========================================================
 * 3. MEDIA
 * ========================================================= */

:is(.rwp-card-thumb,
    .rwp-grid-card-thumb,
    .rwp-card-full-thumb,
    .rankwellpress-headlines-featured) img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: var(--rwp-focus) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transition: transform var(--rwp-dur-slow) var(--rwp-ease);
}

html[data-theme="dark"] :is(.rwp-card-thumb,
    .rwp-grid-card-thumb,
    .rwp-card-full-thumb,
    .rankwellpress-headlines-featured) img,
.rwp-footer :is(.rwp-card-thumb,
    .rwp-grid-card-thumb,
    .rwp-card-full-thumb,
    .rankwellpress-headlines-featured) img {
    filter: brightness(0.94);
}

.featured-story-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: var(--rwp-focus);
    transition: transform var(--rwp-dur-slow) var(--rwp-ease);
}

.rwp-card:hover .rwp-card-thumb img,
.rwp-grid-card:hover .rwp-grid-card-thumb img,
.rwp-card-full:hover .rwp-card-full-thumb img,
.rankwellpress-headlines-featured:hover img,
.featured-story:hover .featured-story-bg {
    transform: scale(1.035);
}

:is(.rwp-card-placeholder,
    .rankwellpress-headlines-featured-placeholder,
    .featured-story-bg--placeholder) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.35), transparent 60%),
        var(--rwp-placeholder);
}

.featured-story-bg--placeholder {
    position: absolute;
    inset: 0;
}

.rwp-card-thumb {
    position: relative;
    flex: 0 0 var(--rwp-thumb);
    width: var(--rwp-thumb);
    height: var(--rwp-thumb);
    min-width: var(--rwp-thumb);
    min-height: var(--rwp-thumb);
    max-width: var(--rwp-thumb);
    max-height: var(--rwp-thumb);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--rwp-radius-media);
    background: var(--rwp-placeholder);
    box-sizing: border-box;
}

.rwp-card-thumb::after,
.rwp-grid-card-thumb::after,
.rwp-card-full-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    pointer-events: none;
}

/* --- IMAGE SHAPES --- */
.rwp-card .rwp-card-thumb.rwp-card-thumb--rounded { border-radius: 12px !important; }
.rwp-card .rwp-card-thumb.rwp-card-thumb--circle { border-radius: 50% !important; }
.rwp-card .rwp-card-thumb.rwp-card-thumb--square { border-radius: 0 !important; }
.rwp-card .rwp-card-thumb.rwp-card-thumb--slant {
    border-radius: 5px !important;
    transform: skewX(-8deg) !important;
    overflow: hidden !important;
}
.rwp-card .rwp-card-thumb.rwp-card-thumb--slant img { transform: skewX(8deg) scale(1.15) !important; }
.rwp-card:hover .rwp-card-thumb.rwp-card-thumb--slant img { transform: skewX(8deg) scale(1.2) !important; }


/* =========================================================
 * 4. HORIZONTAL CARD
 * ========================================================= */

.rwp-card {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--rwp-gap);
    margin: 0;
    padding: var(--rwp-pad);
}

.rwp-card.rwp-card-thumb-right { flex-direction: row-reverse !important; }
.rwp-card:has(.rwp-card-thumb-right) { flex-direction: row-reverse !important; }

/* ---- Global Premium List (Top List style) ---- */

:is(.flexnews-list, .rankwellpress-headlines-list) {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    counter-reset: rwp-rank;
    position: relative;
}

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 10px !important;
    margin: 0 -10px !important;
    width: calc(100% + 20px) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-sizing: border-box !important;
    transition: background-color 0.3s ease !important;
}

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card.rwp-card-thumb-right { flex-direction: row-reverse !important; }
:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card:has(.rwp-card-thumb-right) { flex-direction: row-reverse !important; }

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card:hover {
    background: var(--rwp-hover-bg) !important;
    box-shadow: none !important;
    transform: none !important;
    border-color: transparent !important;
}

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background: var(--rwp-accent);
    transform: translateY(-50%);
    transition: height 0.35s var(--rwp-ease);
    z-index: 2;
    pointer-events: none;
}

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card:hover::before { height: 46%; }

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rwp-line) 12%, var(--rwp-line) 88%, transparent);
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card:hover::after,
:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card:hover + .rwp-card::after { opacity: 0; }

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card:last-child::after { display: none; }

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-thumb {
    flex: 0 0 var(--rwp-thumb) !important;
    width: var(--rwp-thumb) !important;
    height: var(--rwp-thumb) !important;
    min-width: var(--rwp-thumb) !important;
    min-height: var(--rwp-thumb) !important;
    max-width: var(--rwp-thumb) !important;
    max-height: var(--rwp-thumb) !important;
    border-radius: var(--rwp-radius-media) !important;
    overflow: hidden !important;
    background: var(--rwp-placeholder) !important;
    box-shadow: var(--rwp-shadow) !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card .rwp-card-thumb.rwp-card-thumb--rounded { border-radius: 12px !important; }
:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card .rwp-card-thumb.rwp-card-thumb--circle { border-radius: 50% !important; }
:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card .rwp-card-thumb.rwp-card-thumb--square { border-radius: 0 !important; }
:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card .rwp-card-thumb.rwp-card-thumb--slant {
    border-radius: 5px !important;
    transform: skewX(-8deg) !important;
    overflow: hidden !important;
}
:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card .rwp-card-thumb.rwp-card-thumb--slant img { transform: skewX(8deg) scale(1.15) !important; }
:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card:hover .rwp-card-thumb.rwp-card-thumb--slant img { transform: skewX(8deg) scale(1.2) !important; }

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-thumb::after { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08) !important; }
html[data-theme="dark"] :is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-thumb::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10) !important; }

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-thumb img {
    border-radius: 0 !important;
    transition: transform 0.6s var(--rwp-ease) !important;
}

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card:hover .rwp-card-thumb img { transform: scale(1.08) !important; }

/* =========================================================
 * 4b. CARD BODY — PHP WRAPPER FIX
 *
 * The PHP template wraps the badge and meta in a
 * `.rwp-card-subrow` div. We force BOTH the parent grid
 * and the subrow to be a 2-column grid, so the gap is
 * applied no matter what the AJAX template outputs.
 * ========================================================= */

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    align-items: center;
}

.flexnews-row .rwp-card-body,
.rankwellpress-headlines-row .rwp-card-body,
.rwp-card-body {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 6px;
    align-items: center;
    justify-content: start;
    justify-items: start;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* Force Title to span the full width */
.flexnews-row .rwp-card-body .rwp-card-title,
.rankwellpress-headlines-row .rwp-card-body .rwp-card-title,
.rwp-card-body .rwp-card-title {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    text-align: left;
    margin-bottom: 4px !important;
}

/* --- CRITICAL FIX: Force the PHP subrow wrapper to be a grid too --- */
.rwp-card-subrow,
.rwp-card-body .rwp-card-subrow {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    align-items: center !important;
    justify-content: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure badge and meta inside the subrow behave correctly */
.rwp-card-subrow .rwp-card-badge,
.rwp-card-subrow .rankwellpress-headlines-category {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    max-width: fit-content !important;
    display: inline-flex !important;
}

.rwp-card-subrow .rwp-card-meta,
.rwp-card-subrow .rankwellpress-headlines-meta {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    max-width: fit-content !important;
    margin-left: 0 !important;
    display: inline-flex !important;
    white-space: nowrap !important;
}

/* If there's no badge, the meta should span both columns */
.rwp-card-subrow:not(:has(.rwp-card-badge)) .rwp-card-meta {
    grid-column: 1 / -1 !important;
}

/* Hide the bullet separator */
.rwp-card-subrow .rwp-card-badge + .rwp-card-meta::before { display: none !important; }


/* Title — SMALL POST TITLE
 * ─────────────────────────────────────────────────────────
 * Reads role token aliased from Compact Title Size/Weight.
 * Line-clamp reads Post Title Line Clamp.
 * ───────────────────────────────────────────────────────── */
:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-title {
    font-size: var(--rwp-title-small-size) !important;
    font-weight: var(--rwp-title-small-weight) !important;
    line-height: 1.35 !important;
    letter-spacing: -0.005em !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--rwp-post-title) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: var(--rwp-title-small-clamp) !important;
    line-clamp: var(--rwp-title-small-clamp) !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-wrap: pretty !important;
    width: 100% !important;
}

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-title a:hover { color: var(--rwp-accent) !important; }

/* Meta */
:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-meta {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    color: var(--rwp-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    letter-spacing: 0.02em !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}

/* Category pill */
:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    color: var(--rwp-accent) !important;
    border: 1px solid color-mix(in srgb, var(--rwp-accent) 22%, transparent) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    width: fit-content !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

:is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-badge:hover {
    background: var(--rwp-accent) !important;
    color: #ffffff !important;
    border-color: var(--rwp-accent) !important;
}

html[data-theme="dark"] :is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-badge,
.rwp-footer :is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-badge {
    background: rgba(30, 41, 59, 0.7) !important;
    color: var(--rwp-accent) !important;
    border-color: color-mix(in srgb, var(--rwp-accent) 30%, transparent) !important;
}

/* Widget Title — WIDGET TITLE role
 * ─────────────────────────────────────────────────────────
 * Reads Widget Heading Size/Weight via alias.
 * ───────────────────────────────────────────────────────── */
:is(.rankwellpress-flex-news-widget, .rankwellpress-headlines-widget) .widget-title,
:is(.flexnews-list, .rankwellpress-headlines-list) .widget-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-size: var(--rwp-title-widget-size) !important;
    font-weight: var(--rwp-title-widget-weight) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    color: var(--rwp-title-ink) !important;
    line-height: 1.2 !important;
    border: 0 !important;
    position: relative;
    background: none !important;
}

:is(.rankwellpress-flex-news-widget, .rankwellpress-headlines-widget) .widget-title::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: var(--rwp-title-accent);
    flex: 0 0 auto;
    position: static;
    transform: none;
}

:is(.rankwellpress-flex-news-widget, .rankwellpress-headlines-widget) .widget-title::after {
    content: "";
    display: block !important;
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, var(--rwp-line), transparent);
    border-radius: 3px;
}

:is(.flexnews-list, .rankwellpress-headlines-list) .widget-title::after { display: none !important; }

.rwp-card--bordered { border-color: var(--rwp-edge-strong); }

/* Generic title/meta/badge styles (for grid/full cards too)
 * ─────────────────────────────────────────────────────────
 * .rwp-card-title inside a LIST container is Small Post Title
 * (handled above). This generic block is what GRID cards use,
 * which per the role model belong to LARGE POST TITLE.
 *
 * text-wrap: pretty — avoids orphaned words without forcing
 * a shorter first line. Replaces `balance`, which was
 * prematurely wrapping long headlines.
 * ───────────────────────────────────────────────────────── */
.rwp-card-title,
.rwp-card-full-title {
    margin: 0;
    padding: 0;
    font-size: var(--rwp-title-large-size);
    font-weight: var(--rwp-title-large-weight);
    line-height: 1.35;
    letter-spacing: -0.012em;
    text-wrap: pretty;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--rwp-title-large-clamp);
    line-clamp: var(--rwp-title-large-clamp);
    overflow: hidden;
}

.rwp-card-title a,
.rwp-card-full-title a {
    color: var(--rwp-post-title);
    text-decoration: none;
    transition: color var(--rwp-dur-fast) ease;
}

.rwp-card-title a:hover,
.rwp-card-full-title a:hover { color: var(--rwp-post-title-hover); }

.rwp-card-badge,
.rwp-card-full-badge a {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 2px 9px;
    border: 0;
    border-radius: var(--rwp-radius-pill);
    background-color: var(--rwp-cat-bg);
    box-shadow: inset 0 0 0 1px var(--rwp-cat-ring);
    color: var(--rwp-cat);
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--rwp-dur-fast) ease;
}

.rwp-card-badge:hover,
.rwp-card-full-badge a:hover { background-color: color-mix(in srgb, var(--rwp-cat) 15%, transparent); }

.rwp-card-meta,
.rwp-card-full-meta {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    justify-self: start;
    color: var(--rwp-muted);
    font-size: 0.7rem;
    font-weight: 450;
    line-height: 1.3;
    opacity: 0.9;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


/* =========================================================
 * 5. GRID CARD — Featured News
 * ========================================================= */

.rwp-grid-card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.rwp-grid-card-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--rwp-card-media-radius);
    background: var(--rwp-placeholder);
    box-sizing: border-box;
}

.rwp-grid-card-body {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
        "title title"
        "badge meta";
    align-items: center;
    column-gap: 12px !important;
    row-gap: 8px;
    padding: var(--rwp-body-pad);
    text-align: left;
    justify-content: start;
    justify-items: start;
}

.rwp-grid-card-body .rwp-card-title { grid-area: title; width: 100%; }
.rwp-grid-card-body .rwp-card-badge { grid-area: badge; }
.rwp-grid-card-body .rwp-card-meta  { grid-area: meta; }

.rwp-grid-card-body:not(:has(.rwp-card-badge)) .rwp-card-meta { grid-column: 1 / -1; }
.rwp-grid-card-body .rwp-card-badge + .rwp-card-meta::before { display: none !important; }


/* =========================================================
 * 6. FULL CARD — Hero Grid
 * ========================================================= */

.rwp-card-full {
    min-width: 0;
    overflow: hidden;
}

.rwp-card-full-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--rwp-card-media-radius);
    background: var(--rwp-placeholder);
    box-sizing: border-box;
}

.rwp-card-full-body {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-areas:
        "title   title"
        "badge   meta"
        "excerpt excerpt";
    align-items: center;
    column-gap: 12px !important;
    row-gap: 8px;
    padding: var(--rwp-body-pad);
    text-align: left;
    justify-content: start;
    justify-items: start;
}

.rwp-card-full-body .rwp-card-full-title,
.rwp-card-full-body .rwp-card-title      { grid-area: title; width: 100%; }
.rwp-card-full-body .rwp-card-full-badge,
.rwp-card-full-body .rwp-card-badge      { grid-area: badge; margin: 0; }
.rwp-card-full-body .rwp-card-full-meta,
.rwp-card-full-body .rwp-card-meta       { grid-area: meta; }

.rwp-card-full-body .rwp-card-full-badge + .rwp-card-full-meta::before,
.rwp-card-full-body .rwp-card-badge + .rwp-card-meta::before { display: none !important; }

.rwp-card-full-excerpt {
    grid-area: excerpt;
    width: 100%;
    margin: 2px 0 0;
    padding: 0;
    color: var(--rwp-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Compact / Minimal variants — LARGE POST TITLE
 * ─────────────────────────────────────────────────────────
 * Both variants are full-width hero-grid cards, so per the
 * role model they read LARGE POST TITLE.
 * ───────────────────────────────────────────────────────── */
.rwp-card-full--compact .rwp-card-full-body  { padding-top: 10px; }
.rwp-card-full--compact .rwp-card-full-title {
    font-size: var(--rwp-title-large-size);
    font-weight: var(--rwp-title-large-weight);
}

.rwp-card-full--minimal .rwp-card-full-body  { padding-top: 8px; }
.rwp-card-full--minimal .rwp-card-full-title {
    font-size: var(--rwp-title-large-size);
    font-weight: var(--rwp-title-large-weight);
}


/* =========================================================
 * 7. OVERLAY CARDS — SCRIM DESIGN
 *
 * The old boxed glass panel was an opaque, blurred box that
 * hid the photo behind long titles. It is now a bottom gradient
 * scrim: the text sits on a fade, so the image stays visible
 * above and through it. Titles are NOT truncated.
 * ========================================================= */

.rankwellpress-headlines-featured,
.featured-story {
    position: relative;
    margin-bottom: 12px;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: 16 / 10;
    min-height: 200px;
    border-radius: var(--rwp-radius);
    background: var(--rwp-placeholder);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 6px 18px -12px rgba(15, 23, 42, 0.3);
}

.rankwellpress-headlines-featured > a:has(> img) { display: block; width: 100%; height: 100%; }

/* Light base darkening only; the content block carries its own scrim */
.featured-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(8, 12, 20, 0.35) 0%, transparent 60%);
    pointer-events: none;
}

/* Scrim container: grid, anchored to the bottom, height capped */
.rankwellpress-headlines-featured-overlay,
.featured-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    z-index: 2;
    padding: var(--rwp-scrim-pad);     /* top padding = gradient fade zone */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(
        to top,
        rgba(8, 12, 20, 0.90) 0%,
        rgba(8, 12, 20, 0.72) 45%,
        rgba(8, 12, 20, 0.35) 75%,
        transparent 100%
    );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 12px !important;
    row-gap: 6px;
    align-content: end;
    text-align: left;
    justify-content: start;
    justify-items: start;
}

/* Force the overlay subrow to be a grid too */
.rankwellpress-headlines-featured-overlay .rwp-card-subrow,
.featured-content .rwp-card-subrow {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    column-gap: 12px !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

/* Title — LARGE POST TITLE
 * Overlay featured titles are hero-class cards, so they read
 * Post Title Size/Weight via the large role alias.
 *
 * text-wrap: pretty — natural line fill instead of balanced
 * wrapping, so long headlines don't wrap early. */
.rankwellpress-headlines-featured-title,
.featured-title {
    grid-column: 1 / -1 !important;
    width: 100%;
    margin: 0;
    font-size: var(--rwp-title-large-size);
    font-weight: var(--rwp-title-large-weight);
    line-height: 1.28;
    letter-spacing: -0.015em;
    text-wrap: pretty;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.rankwellpress-headlines-featured-title a,
.featured-title a { color: var(--rwp-inverse); text-decoration: none; }

.rankwellpress-headlines-featured-title a:hover,
.featured-title a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Badge: solid accent, readable on dark */
.rankwellpress-headlines-category,
.featured-badge,
.rankwellpress-headlines-featured-overlay .rwp-card-badge,
.featured-content .rwp-card-badge {
    display: inline-block;
    margin: 0;
    padding: 3px 10px !important;
    border: 0 !important;
    border-radius: var(--rwp-radius-pill);
    background: var(--rwp-accent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    font-size: 0.6rem !important;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: filter var(--rwp-dur-fast) ease;
}

.rankwellpress-headlines-category:hover,
.featured-badge:hover,
.rankwellpress-headlines-featured-overlay .rwp-card-badge:hover,
.featured-content .rwp-card-badge:hover { filter: brightness(1.1); }

/* Meta on overlay */
.rankwellpress-headlines-meta,
.featured-meta,
.rankwellpress-headlines-featured-overlay .rwp-card-meta,
.featured-content .rwp-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.7rem !important;
    opacity: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rankwellpress-headlines-featured-overlay .rankwellpress-headlines-category + .rankwellpress-headlines-meta::before,
.featured-content .featured-badge + .featured-meta::before { display: none !important; }


/* =========================================================
 * 8. LAYOUT CONTAINERS
 * ========================================================= */

.rankwellpress-headlines-list,
.flexnews-list { display: flex; flex-direction: column; gap: 0; }

.news-grid { display: grid; grid-template-columns: 1fr; gap: var(--rwp-grid-gap); }
.news-grid > * { min-width: 0; max-width: 100%; }

@media (min-width: 480px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(var(--grid-columns, 2), 1fr); } }

.rankwellpress-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--rwp-grid-gap); margin-bottom: 0; }
@media (min-width: 769px) { .rankwellpress-hero-grid { grid-template-columns: repeat(2, 1fr); } }


/* =========================================================
 * 9. LOAD MORE
 * ========================================================= */

.rankwellpress-headlines-load-more,
.flexnews-load-more-container,
.rankwellpress-load-more-wrapper { margin: 10px 0 18px; text-align: center; }

.rankwellpress-load-more-headlines,
.rankwellpress-headlines-load-more button,
.flexnews-load-more-container button,
.rankwellpress-load-more-wrapper button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    min-width: 0;
    height: auto;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    background: var(--rw-button-bg, #0d7c3e) !important;
    color: var(--rw-button-text, #ffffff) !important;
    border: 1px solid var(--rw-button-border, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition:
        background-color var(--rwp-dur-fast) ease,
        border-color var(--rwp-dur-fast) ease,
        transform var(--rwp-dur-fast) ease,
        opacity var(--rwp-dur-fast) ease;
}

.rankwellpress-load-more-headlines::after,
.rankwellpress-headlines-load-more button::after,
.flexnews-load-more-container button::after,
.rankwellpress-load-more-wrapper button::after {
    content: "›";
    display: inline-block;
    font-size: 1.2em;
    line-height: 1;
    transition: transform var(--rwp-dur-fast) ease;
}

.rankwellpress-load-more-headlines:hover,
.rankwellpress-headlines-load-more button:hover,
.flexnews-load-more-container button:hover,
.rankwellpress-load-more-wrapper button:hover {
    background: color-mix(in srgb, var(--rw-button-bg, #0d7c3e) 85%, #000000) !important;
    border-color: color-mix(in srgb, var(--rw-button-bg, #0d7c3e) 85%, #000000) !important;
}

.rankwellpress-load-more-headlines:hover::after,
.rankwellpress-headlines-load-more button:hover::after,
.flexnews-load-more-container button:hover::after,
.rankwellpress-load-more-wrapper button:hover::after { transform: translateX(2px); }

:is(.rankwellpress-load-more-headlines,
    .rankwellpress-headlines-load-more button,
    .flexnews-load-more-container button,
    .rankwellpress-load-more-wrapper button):is(.is-loading, [aria-busy="true"]) {
    cursor: progress;
    pointer-events: none;
    opacity: 0.75;
}

:is(.rankwellpress-load-more-headlines,
    .rankwellpress-headlines-load-more button,
    .flexnews-load-more-container button,
    .rankwellpress-load-more-wrapper button):is(.is-loading, [aria-busy="true"])::after {
    content: "";
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: rwp-spin 0.7s linear infinite;
}

:is(.rankwellpress-load-more-headlines,
    .rankwellpress-headlines-load-more button,
    .flexnews-load-more-container button,
    .rankwellpress-load-more-wrapper button):disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

html[data-theme="dark"] :is(
    .rankwellpress-load-more-headlines,
    .rankwellpress-headlines-load-more button,
    .flexnews-load-more-container button,
    .rankwellpress-load-more-wrapper button
):hover {
    background: color-mix(in srgb, var(--rw-button-bg, #000000) 90%, #ffffff) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}


/* =========================================================
 * 10. MOTION
 * ========================================================= */

@keyframes rwp-rise { from { opacity: 0; transform: translateY(6px); } to   { opacity: 1; transform: translateY(0); } }
@keyframes rwp-spin { to { transform: rotate(360deg); } }

.rankwellpress-headlines-list > .rwp-card,
.flexnews-list > .rwp-card,
.news-grid > .rwp-grid-card,
.rankwellpress-hero-grid > .rwp-card-full { animation: rwp-rise var(--rwp-dur-slow) var(--rwp-ease) both; }

:is(.rankwellpress-headlines-list, .flexnews-list, .news-grid, .rankwellpress-hero-grid) > :nth-child(2) { animation-delay: 0.04s; }
:is(.rankwellpress-headlines-list, .flexnews-list, .news-grid, .rankwellpress-hero-grid) > :nth-child(3) { animation-delay: 0.08s; }
:is(.rankwellpress-headlines-list, .flexnews-list, .news-grid, .rankwellpress-hero-grid) > :nth-child(4) { animation-delay: 0.12s; }
:is(.rankwellpress-headlines-list, .flexnews-list, .news-grid, .rankwellpress-hero-grid) > :nth-child(n+5) { animation-delay: 0.16s; }


/* =========================================================
 * 11. ACCESSIBILITY · TOUCH · RESPONSIVE · REDUCED MOTION
 * ========================================================= */

:is(.rwp-card, .rwp-grid-card, .rwp-card-full, .rankwellpress-headlines-featured, .featured-story) a:focus-visible,
:is(.rankwellpress-load-more-headlines,
    .rankwellpress-headlines-load-more button,
    .flexnews-load-more-container button,
    .rankwellpress-load-more-wrapper button):focus-visible {
    outline: 2px solid var(--rwp-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-transparency: reduce) {
    :is(.rwp-card, .rwp-grid-card, .rwp-card-full) {
        background: var(--rwp-surface-solid);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .rankwellpress-headlines-featured-overlay,
    .featured-content {
        background: linear-gradient(to top, rgba(8, 12, 20, 0.95), rgba(8, 12, 20, 0.6) 70%, transparent);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (hover: none) {
    .rwp-card:hover,
    .rwp-grid-card:hover,
    .rwp-card-full:hover {
        transform: none;
        box-shadow: inset 0 1px 0 var(--rwp-frost-edge), var(--rwp-shadow);
    }
    .rwp-card:hover .rwp-card-thumb img,
    .rwp-grid-card:hover .rwp-grid-card-thumb img,
    .rwp-card-full:hover .rwp-card-full-thumb img,
    .rankwellpress-headlines-featured:hover img,
    .featured-story:hover .featured-story-bg { transform: none; }
    :is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card:hover { background: transparent !important; }
    :is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card:hover::before { height: 0; }
}

@media (max-width: 768px) {
    :root { --rwp-section-gap: 18px; }
    .rankwellpress-hero-grid { gap: 12px; }
    .rwp-card .rwp-card-thumb.rwp-card-thumb--slant { transform: skewX(-5deg) !important; }
    .rwp-card .rwp-card-thumb.rwp-card-thumb--slant img { transform: skewX(5deg) scale(1.1) !important; }
}

@media (max-width: 480px) {
    :root {
        --rwp-thumb: 70px;
        --rwp-blur: 10px;
        --rwp-scrim-pad: 44px 14px 12px;
    }

    .flexnews-row .rwp-card-body,
    .rankwellpress-headlines-row .rwp-card-body,
    .rwp-card-body,
    .rwp-grid-card-body,
    .rwp-card-full-body { column-gap: 10px !important; row-gap: 4px; }

    /* Ensure the subrow gap is respected on mobile too */
    .rwp-card-subrow { column-gap: 10px !important; }

    :is(.rwp-card-meta, .rwp-card-full-meta) { font-size: 0.66rem; }
    .rwp-card-full-excerpt { font-size: 0.8rem; }

    /* Overlay title — LARGE POST TITLE × 0.85 on mobile */
    .rankwellpress-headlines-featured-title,
    .featured-title { font-size: calc(var(--rwp-title-large-size) * 0.85); }

    .rankwellpress-headlines-featured,
    .featured-story { min-height: 180px; }

    :is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card {
        gap: 12px !important;
        padding: 12px 8px !important;
        margin: 0 -8px !important;
        width: calc(100% + 16px) !important;
    }

    /* List card title — SMALL POST TITLE × 0.85 on mobile */
    :is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-title {
        font-size: calc(var(--rwp-title-small-size) * 0.85) !important;
    }

    :is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-badge { font-size: 0.56rem !important; padding: 3px 9px !important; }
    :is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card-meta { font-size: 0.64rem !important; }

    /* Widget title — WIDGET TITLE role, tighten letter-spacing only */
    :is(.rankwellpress-flex-news-widget, .rankwellpress-headlines-widget) .widget-title {
        letter-spacing: 0.12em !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .rwp-card:hover,
    .rwp-grid-card:hover,
    .rwp-card-full:hover,
    .rwp-card:hover .rwp-card-thumb img,
    .rwp-grid-card:hover .rwp-grid-card-thumb img,
    .rwp-card-full:hover .rwp-card-full-thumb img,
    .rankwellpress-headlines-featured:hover img,
    .featured-story:hover .featured-story-bg { transform: none; }
    :is(.flexnews-list, .rankwellpress-headlines-list) .rwp-card::before { transition: none !important; }
}


/* Any RankwellPress widget inside a known dark section gets dark styling */
:is(.dark-section, .bg-dark, .dark-bg, [data-theme="dark"], .has-dark-background)
:is(.rankwellpress-headlines-widget,
    .rankwellpress-flex-news-widget,
    .rankwellpress-featured-news-widget,
    .rankwellpress-hero-grid-widget) {
    --rwp-post-title: #f1f5f9;
    --rwp-title-ink: #f8fafc;
    --rwp-title-ink-accent: var(--rwp-accent);
    --rwp-muted: #94a3b8;
    --rwp-surface-solid: #151b27;
    --rwp-surface: rgba(255, 255, 255, 0.05);
    --rwp-surface-hover: rgba(255, 255, 255, 0.08);
    --rwp-frost-edge: rgba(255, 255, 255, 0.10);
    --rwp-edge: rgba(255, 255, 255, 0.07);
    --rwp-edge-strong: rgba(255, 255, 255, 0.15);
    --rwp-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    --rwp-shadow-hover: 0 8px 22px -12px rgba(0, 0, 0, 0.6);
    --rwp-placeholder: rgba(255, 255, 255, 0.06);
    --rwp-line: rgba(255, 255, 255, 0.08);
    --rwp-hover-bg: rgba(255, 255, 255, 0.05);
    --rwp-cat-bg: color-mix(in srgb, var(--rwp-accent) 20%, transparent);
    --rwp-cat-ring: color-mix(in srgb, var(--rwp-accent) 35%, transparent);
}

/* Dark pill for badge (list/grid cards only; overlay badges stay solid accent) */
:is(.dark-section, .bg-dark, .dark-bg, [data-theme="dark"], .has-dark-background)
:is(.rankwellpress-headlines-widget,
    .rankwellpress-flex-news-widget,
    .rankwellpress-featured-news-widget,
    .rankwellpress-hero-grid-widget)
.rwp-card-badge:not(.rankwellpress-headlines-featured-overlay .rwp-card-badge):not(.featured-content .rwp-card-badge) {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: color-mix(in srgb, var(--rwp-accent) 30%, transparent) !important;
}