/* ══════════════════════════════════════════════════════════
   Jenga Inline Related Posts — Frontend Styles
   Designed to complement the Wavy theme by EstudioPatagon
   ══════════════════════════════════════════════════════════ */

.jenga-irp-wrapper {
    --jirp-primary: var(--epcl-main-color, #F43676);
    --jirp-gradient: var(--epcl-gradient-color, linear-gradient(135deg, #FC6668, #E10489));
    --jirp-gradient-start: var(--epcl-gradient-start-color, #FC6668);
    --jirp-gradient-end: var(--epcl-gradient-end-color, #E10489);
    --jirp-titles: var(--epcl-titles-color, #1A1A2E);
    --jirp-text: #4a5568;
    --jirp-muted: #94a3b8;
    --jirp-bg: var(--epcl-boxes-background-color, #FFF9F3);
    --jirp-border: var(--epcl-boxes-border-color, #FFE7D2);
    --jirp-radius: var(--epcl-boxes-border-radius, 15px);
    --jirp-shadow: var(--epcl-boxes-shadow, 2px 2px 3px 0px rgba(93,112,234,0.1));
    --jirp-font: var(--epcl-font-family, "Be Vietnam Pro", sans-serif);
    --jirp-title-font: var(--epcl-title-font-family, "Be Vietnam Pro", sans-serif);
    --jirp-transition: var(--epcl-transition-bezier, cubic-bezier(.5,2.5,.7,.7));

    margin: 32px 0;
    font-family: var(--jirp-font);
    clear: both;
}

/* ─── HEADING ─────────────────────────────────────────── */

.jenga-irp-heading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--jirp-primary);
    margin-bottom: 12px;
}
.jenga-irp-icon {
    display: inline-flex;
    align-items: center;
}
.jenga-irp-icon svg {
    width: 14px;
    height: 14px;
}

/* ─── CARD (link wrapper) ─────────────────────────────── */

.jenga-irp-card {
    display: flex;
    background: var(--jirp-bg);
    border: 1px solid var(--jirp-border);
    border-radius: var(--jirp-radius);
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: var(--jirp-shadow);
    transition: transform 0.3s var(--jirp-transition), box-shadow 0.3s ease;
    position: relative;
}
.jenga-irp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--epcl-medium-shadow, 0px 8px 16px -8px rgba(0,0,0,0.3), 0px 13px 27px -5px rgba(50,50,93,0.25));
}
.jenga-irp-card:visited { color: inherit !important; }
.jenga-irp-card:active {
    transform: scale(0.97);
    box-shadow: var(--jirp-shadow);
    opacity: 0.85;
    transition: transform 0.1s ease, opacity 0.1s ease;
}

/* ─── THUMBNAIL ───────────────────────────────────────── */

.jenga-irp-thumb {
    width: 260px;
    min-width: 260px;
    min-height: 180px; /* floor so landscape images never leave empty space */
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    align-self: stretch; /* explicitly stretch to full card height */
}
/* Desktop orientation-aware thumb widths (card style).
   Widths are calibrated so thumb_width / thumb_height ≈ image native ratio
   at the typical content-driven card height (~180-220px), giving ZERO crop.
   For 2:3 portrait (0.667 ratio) at 200px card height: width = 200*0.667 = 133px.
   For 1:1 square at 200px: width = 200px. Landscape uses base 260px. */
.jenga-irp-style-card .jenga-irp-thumb--portrait {
    width: 140px !important;
    min-width: 140px !important;
}
.jenga-irp-style-card .jenga-irp-thumb--square {
    width: 200px !important;
    min-width: 200px !important;
}
/* Absolute fill: guarantees the img covers the container regardless of
   image orientation (portrait / landscape / square / any ratio) */
.jenga-irp-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.4s ease;
}
/* Portrait: subject is typically in the upper portion — keep it visible */
.jenga-irp-thumb--portrait img {
    object-position: top center;
}
/* Square / landscape: geometric center is correct */
.jenga-irp-thumb--square img,
.jenga-irp-thumb--landscape img {
    object-position: center center;
}
.jenga-irp-card:hover .jenga-irp-thumb img {
    transform: scale(1.06);
}

/* ─── CONTENT ─────────────────────────────────────────── */

.jenga-irp-content {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

/* Category Badge */
.jenga-irp-category {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #fff;
    background: var(--jirp-gradient);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
    align-self: flex-start;
    line-height: 1.5;
}

/* Title */
.jenga-irp-title {
    font-family: var(--jirp-title-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--jirp-titles);
    margin: 0 0 8px;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jenga-irp-card:hover .jenga-irp-title {
    color: var(--jirp-primary);
}

/* Excerpt */
.jenga-irp-excerpt {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--jirp-text);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── META ROW ────────────────────────────────────────── */

.jenga-irp-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

/* Reading Time */
.jenga-irp-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--jirp-muted);
    font-weight: 500;
}
.jenga-irp-reading-time svg {
    opacity: 0.7;
}

/* CTA Button */
.jenga-irp-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--jirp-primary);
    transition: gap 0.25s ease;
}
.jenga-irp-card:hover .jenga-irp-cta {
    gap: 8px;
}
.jenga-irp-cta svg {
    transition: transform 0.25s ease;
}
.jenga-irp-card:hover .jenga-irp-cta svg {
    transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════
   STYLE VARIANTS
   ══════════════════════════════════════════════════════════ */

/* ─── MINIMAL ─────────────────────────────────────────── */

.jenga-irp-style-minimal .jenga-irp-card {
    background: transparent;
    border: none;
    border-left: 3px solid var(--jirp-primary);
    border-radius: 0;
    box-shadow: none;
    padding: 16px 20px;
}
.jenga-irp-style-minimal .jenga-irp-card:hover {
    transform: none;
    background: var(--jirp-bg);
    box-shadow: none;
}
.jenga-irp-style-minimal .jenga-irp-thumb {
    width: 80px;
    min-width: 80px;
    min-height: unset; /* override base — aspect-ratio controls height */
    aspect-ratio: 1 / 1; /* square thumbnail for any image orientation */
    border-radius: 10px;
    overflow: hidden;
    margin-right: 4px;
    align-self: center;
}
.jenga-irp-style-minimal .jenga-irp-content {
    padding: 0 0 0 16px;
}
.jenga-irp-style-minimal .jenga-irp-title {
    font-size: 15px;
}
.jenga-irp-style-minimal .jenga-irp-excerpt {
    display: none;
}
.jenga-irp-style-minimal .jenga-irp-category {
    font-size: 9px;
    padding: 2px 8px;
    margin-bottom: 6px;
}

/* ─── OVERLAY ─────────────────────────────────────────── */

.jenga-irp-style-overlay .jenga-irp-card {
    flex-direction: column;
    position: relative;
    min-height: 220px;
    border: none;
}
.jenga-irp-style-overlay .jenga-irp-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: unset; /* override base — card controls dimensions */
    align-self: auto;
}
.jenga-irp-style-overlay .jenga-irp-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.45) 40%,
        rgba(0, 0, 0, 0.05) 100%
    );
    z-index: 1;
}
.jenga-irp-style-overlay .jenga-irp-content {
    position: relative;
    z-index: 2;
    justify-content: flex-end;
    padding: 24px;
    height: 100%;
}
.jenga-irp-style-overlay .jenga-irp-title {
    color: #fff;
    font-size: 19px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.jenga-irp-style-overlay .jenga-irp-card:hover .jenga-irp-title {
    color: #fff;
}
.jenga-irp-style-overlay .jenga-irp-excerpt {
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.jenga-irp-style-overlay .jenga-irp-reading-time {
    color: rgba(255, 255, 255, 0.7);
}
.jenga-irp-style-overlay .jenga-irp-cta {
    color: #fff;
    background: var(--jirp-gradient);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
}
.jenga-irp-style-overlay .jenga-irp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

/* ─── MAGAZINE ────────────────────────────────────────── */

.jenga-irp-style-magazine .jenga-irp-card {
    flex-direction: row;
    background: var(--jirp-bg);
}
.jenga-irp-style-magazine .jenga-irp-thumb {
    width: 38%;
    min-width: 38%;
    min-height: 160px;
    align-self: stretch; /* force full card height — prevents bottom gap */
}
/* Magazine orientation-aware widths — narrower for portrait/square so the
   container's aspect ratio matches the image's natural ratio at the
   content-driven card height. Result: zero cropping, true portrait display.
   For 1080px card @ ~220px content height:
   - portrait 14% = 151w → 151/220 = 0.69 ≈ image 0.667 (2:3) → no crop
   - square 20% = 216w → 216/220 = 0.98 ≈ image 1.0 → no crop
   - landscape 38% default = 410w → 410/220 = 1.86 ≈ image 1.778 → no crop */
.jenga-irp-style-magazine .jenga-irp-thumb--portrait {
    width: 14% !important;
    min-width: 14% !important;
}
.jenga-irp-style-magazine .jenga-irp-thumb--square {
    width: 20% !important;
    min-width: 20% !important;
}
.jenga-irp-style-magazine .jenga-irp-content {
    padding: 16px 20px;
    justify-content: center;
    align-self: stretch; /* stretch to full card height — justify-content:center handles vertical centering of children */
}
.jenga-irp-style-magazine .jenga-irp-category {
    margin-bottom: 6px;
}
.jenga-irp-style-magazine .jenga-irp-title {
    font-size: 17px;
    -webkit-line-clamp: 2;
    margin-bottom: 4px;
}
.jenga-irp-style-magazine .jenga-irp-excerpt {
    -webkit-line-clamp: 2;
    font-size: 13px;
    margin-bottom: 0;
}
.jenga-irp-style-magazine .jenga-irp-meta {
    margin-top: 8px;
}
.jenga-irp-style-magazine .jenga-irp-cta {
    background: var(--jirp-gradient);
    color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    transition: box-shadow 0.3s ease;
}
.jenga-irp-style-magazine .jenga-irp-card:hover .jenga-irp-cta {
    box-shadow: 0 4px 12px rgba(244, 54, 118, 0.3);
}

/* ══════════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════════ */

.jenga-irp-animate {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.jenga-irp-animate.jenga-irp-visible {
    opacity: 1;
}

/* Fade + Slide */
.jenga-irp-fade-slide {
    transform: translateY(20px);
}
.jenga-irp-fade-slide.jenga-irp-visible {
    transform: translateY(0);
}

/* Fade */
.jenga-irp-fade {
    transform: none;
}

/* Slide Up */
.jenga-irp-slide-up {
    transform: translateY(30px);
}
.jenga-irp-slide-up.jenga-irp-visible {
    transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   STACK MODE — first inline slot as multiple cards
   under a single shared heading (opt-in feature)
   Tuned for CTR: each card has heavy visual presence,
   generous spacing, a numbered "pick" badge, and a bold CTA.
   ══════════════════════════════════════════════════════════ */

.jenga-irp-stack .jenga-irp-stack-cards {
    display: flex;
    flex-direction: column;
    counter-reset: jenga-pick;
}

/* Spacing between cards uses margin-bottom on each card (instead of flex `gap`)
   so it works reliably across every browser, theme override, and mobile WebView.
   Last card gets no bottom margin so the stack hugs the next paragraph cleanly. */
.jenga-irp-stack .jenga-irp-stack-cards > .jenga-irp-card {
    margin-bottom: 36px;
}
.jenga-irp-stack .jenga-irp-stack-cards > .jenga-irp-card:last-child {
    margin-bottom: 0;
}

/* Heading owns the entire group — give it real breathing room so
   readers register "RECOMMENDED FOR YOU" as a curated section, not
   a stray label. */
.jenga-irp-stack > .jenga-irp-heading {
    margin-bottom: 22px;
}

/* Per-card animation stagger driven by --jirp-stack-idx (set inline
   on each <a> by render_card_link). Creates a gentle cascade rather
   than a single block-fade so each card lands separately in the eye. */
.jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-animate {
    transition-delay: calc(var(--jirp-stack-idx, 0) * 130ms);
}

/* ─── Stand-out treatment per card ─────────────────────────
   Goal: every stacked card looks like the lead recommendation
   so each one fights for the click. Heavier shadow, stronger
   hover lift, position counter, and a more confident CTA. */
.jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-card {
    position: relative;
    transform-origin: top center;
    box-shadow:
        0 6px 22px rgba(20, 20, 50, 0.07),
        0 2px 6px rgba(20, 20, 50, 0.05);
    border-width: 1.5px;
    transition:
        transform 0.32s var(--jirp-transition),
        box-shadow 0.32s ease;
}

.jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 20px 42px rgba(244, 54, 118, 0.18),
        0 8px 16px rgba(20, 20, 50, 0.08);
}

/* Numbered "pick" badge — gradient circle that floats over the card's
   top-right corner. Uses CSS counters so it auto-scales for any stack size.
   Designed to be highly visible against ANY background:
     • brand gradient fill (matches the CTA design language)
     • white inner border for separation from the underlying thumbnail
     • dual shadow (colored glow + soft drop) so it pops on light and dark imagery
   Position is identical desktop/tablet/mobile so the visual "pick" anchor stays
   consistent regardless of card layout (horizontal on desktop, vertical on mobile). */
.jenga-irp-stack-cards > .jenga-irp-card::after {
    counter-increment: jenga-pick;
    content: counter(jenga-pick);
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 4;
    background: var(--jirp-gradient);
    color: #fff;
    border: 2px solid #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    box-shadow:
        0 4px 14px rgba(244, 54, 118, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    font-family: var(--jirp-font);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.jenga-irp-stack-cards > .jenga-irp-card:hover::after {
    transform: scale(1.1);
    box-shadow:
        0 6px 20px rgba(244, 54, 118, 0.65),
        0 2px 4px rgba(0, 0, 0, 0.18);
}

/* CTA gets the "click me" treatment in stack mode — bigger hit area,
   stronger shadow, more confident hover. */
.jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-cta {
    padding: 9px 18px;
    font-size: 13px;
    border-radius: 9px;
    box-shadow: 0 4px 14px rgba(244, 54, 118, 0.28);
}
.jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-card:hover .jenga-irp-cta {
    box-shadow: 0 8px 22px rgba(244, 54, 118, 0.45);
}

/* Title gets a touch more weight in stack mode — first thing the eye
   locks onto after the thumbnail. */
.jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-title {
    font-size: 18px;
    font-weight: 700;
}

/* Category badge sits a bit lower to clear the pick number. */
.jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-category {
    margin-top: 2px;
}

/* Longer, more informative excerpt in stack mode — readers get
   enough context to commit to the click without scrolling.
   3 lines on desktop, 2 lines on small phones (saves vertical space).
   Line-clamp pins the height so the layout never shifts. */
.jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-excerpt {
    -webkit-line-clamp: 3;
    line-height: 1.55;
    margin-bottom: 8px;
}

/* Mobile: tighter spacing so scrolling stays efficient, but still very visible.
   margin-bottom keeps real estate between every card; the last-child rule
   ensures no trailing whitespace before the next article paragraph. */
@media (max-width: 768px) {
    .jenga-irp-stack .jenga-irp-stack-cards > .jenga-irp-card {
        margin-bottom: 24px;
    }
    .jenga-irp-stack > .jenga-irp-heading {
        margin-bottom: 14px;
    }
    /* Mobile badge — slightly smaller, same vibrant gradient.
       Sits over the top-right of the thumbnail when card stacks vertically;
       the white border + colored shadow keeps it sharp against any image. */
    .jenga-irp-stack-cards > .jenga-irp-card::after {
        top: 12px;
        right: 12px;
        width: 30px;
        height: 30px;
        font-size: 12px;
        border-width: 2px;
        box-shadow:
            0 4px 12px rgba(244, 54, 118, 0.55),
            0 1px 3px rgba(0, 0, 0, 0.2);
    }
    .jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-title {
        font-size: 16px;
    }
    .jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-cta {
        padding: 8px 14px;
        font-size: 12px;
    }
}
@media (max-width: 480px) {
    .jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-excerpt {
        -webkit-line-clamp: 2;
    }
}

/* Respect reduced motion — flat instant arrival for users who request it. */
@media (prefers-reduced-motion: reduce) {
    .jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-animate {
        transition-delay: 0ms;
    }
    .jenga-irp-stack .jenga-irp-stack-cards .jenga-irp-card:hover {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════
   FLOATING RECOMMENDATION CARD — scroll-triggered slide-in
   Opt-in widget that lives in the bottom corner of the viewport.
   Designed to grab attention without breaking reading flow.
   ══════════════════════════════════════════════════════════ */

.jenga-irp-floating {
    --jirp-primary: var(--epcl-main-color, #F43676);
    --jirp-gradient: var(--epcl-gradient-color, linear-gradient(135deg, #FC6668, #E10489));
    --jirp-titles: var(--epcl-titles-color, #1A1A2E);
    --jirp-text: #4a5568;
    --jirp-muted: #94a3b8;
    --jirp-font: var(--epcl-font-family, "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    --jenga-anchor-offset: 0px; /* JS sets this when a Google anchor ad is detected */

    position: fixed;
    /* bottom adapts when an anchor ad is below: 24px base + anchor-ad height */
    bottom: calc(24px + var(--jenga-anchor-offset, 0px));
    /* Near max — sits above sticky headers, cookie banners (which often use
       very high z-indexes) so the widget actually overlaps what it should. */
    z-index: 2147483646;
    width: 400px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 24px 60px rgba(20, 20, 50, 0.18),
        0 10px 25px rgba(20, 20, 50, 0.10),
        0 0 0 1px rgba(20, 20, 50, 0.04);
    overflow: hidden;
    opacity: 0;
    font-family: var(--jirp-font);
    will-change: transform, opacity;
    transition:
        transform 0.55s cubic-bezier(0.22, 0.68, 0.32, 1),
        opacity 0.4s ease,
        bottom 0.35s ease;
}

.jenga-irp-floating[hidden] {
    display: none !important;
}

/* Position variants — slide in from the matching edge */
.jenga-irp-floating--bottom-right {
    right: 24px;
    transform: translate3d(120%, 0, 0);
}
.jenga-irp-floating--bottom-left {
    left: 24px;
    transform: translate3d(-120%, 0, 0);
}

/* On-screen state */
.jenga-irp-floating.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Dismiss animation */
.jenga-irp-floating.is-hiding {
    opacity: 0;
}
.jenga-irp-floating--bottom-right.is-hiding {
    transform: translate3d(120%, 0, 0);
}
.jenga-irp-floating--bottom-left.is-hiding {
    transform: translate3d(-120%, 0, 0);
}

/* Close button */
.jenga-irp-floating__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(20, 20, 50, 0.08);
    color: var(--jirp-titles);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.jenga-irp-floating__close:hover {
    background: rgba(20, 20, 50, 0.16);
    transform: rotate(90deg);
}
.jenga-irp-floating__close:focus-visible {
    outline: 2px solid var(--jirp-primary);
    outline-offset: 2px;
}

/* Top label row — "Recommended for you" */
.jenga-irp-floating__label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 44px 4px 18px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--jirp-primary);
    line-height: 1;
}
.jenga-irp-floating__label svg {
    flex-shrink: 0;
}

/* Slides container — stacks slides via grid so rotation has zero layout shift */
.jenga-irp-floating__slides {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
}
.jenga-irp-floating__slides > .jenga-irp-floating__slide {
    grid-area: 1 / 1;
}

/* Individual slide — horizontal three-column layout:
   [ thumb ] [ category + title + excerpt ] [ CTA on the right ]
   The CTA sits in its own column so it's a confident click target
   even on the narrowest mobile width. */
.jenga-irp-floating__slide {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: inherit !important;
    padding: 10px 14px 14px;
    gap: 12px;
}
.jenga-irp-floating__slide:visited { color: inherit !important; }

/* Slide visibility — only the active slide is shown.
   Uses opacity + visibility so transitions are smooth and layout stays put. */
.jenga-irp-floating__slide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}
.jenga-irp-floating__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Thumbnail */
.jenga-irp-floating__thumb {
    width: 88px;
    min-width: 88px;
    height: 88px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    flex-shrink: 0;
}
.jenga-irp-floating__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}
.jenga-irp-floating__card:hover .jenga-irp-floating__thumb img {
    transform: scale(1.07);
}

/* Content — the middle column, takes whatever's left between thumb and CTA */
.jenga-irp-floating__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.jenga-irp-floating__category {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #fff;
    background: var(--jirp-gradient);
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 6px;
    align-self: flex-start;
    line-height: 1.5;
}
.jenga-irp-floating__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--jirp-titles);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}
.jenga-irp-floating__card:hover .jenga-irp-floating__title {
    color: var(--jirp-primary);
}
/* CTA — pinned to the right column. Vertical "Read this next →" pill that
   reads as a confident button at a glance. */
.jenga-irp-floating__cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    min-width: 64px;
    padding: 12px 12px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    color: #fff;
    background: var(--jirp-gradient);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(244, 54, 118, 0.35);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.jenga-irp-floating__cta-text {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: normal;
    max-width: 70px;
}
.jenga-irp-floating__cta svg {
    transition: transform 0.25s ease;
}
.jenga-irp-floating__slide:hover .jenga-irp-floating__cta {
    box-shadow: 0 8px 22px rgba(244, 54, 118, 0.5);
    transform: translateY(-1px);
}
.jenga-irp-floating__slide:hover .jenga-irp-floating__cta svg {
    transform: translateX(2px);
}

/* Auto-rotation progress bar — thin strip at the bottom edge that visually
   fills over the rotation interval so readers know a new pick is coming. */
.jenga-irp-floating__progress {
    height: 3px;
    background: rgba(20, 20, 50, 0.06);
    overflow: hidden;
}
.jenga-irp-floating__progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--jirp-gradient);
    transform-origin: left center;
    animation: jenga-floating-progress linear infinite;
    animation-duration: 30000ms; /* JS overrides via inline style */
}
@keyframes jenga-floating-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Mobile — full-width bar at the bottom with safe-area padding */
@media (max-width: 600px) {
    .jenga-irp-floating {
        bottom: calc(12px + var(--jenga-anchor-offset, 0px));
        right: 12px !important;
        left: 12px !important;
        width: auto;
        max-width: none;
        border-radius: 14px;
        transform: translate3d(0, 130%, 0);
    }
    .jenga-irp-floating.is-visible {
        transform: translate3d(0, 0, 0);
    }
    .jenga-irp-floating.is-hiding {
        transform: translate3d(0, 130%, 0);
    }
    .jenga-irp-floating__thumb {
        width: 64px;
        min-width: 64px;
        height: 64px;
    }
    .jenga-irp-floating__title {
        font-size: 14px;
        -webkit-line-clamp: 3;
    }
    .jenga-irp-floating__slide {
        padding: 10px 12px 12px;
        gap: 10px;
    }
    .jenga-irp-floating__cta {
        min-width: 56px;
        padding: 10px 8px;
        font-size: 10px;
    }
    .jenga-irp-floating__cta-text {
        max-width: 50px;
    }
}

/* Extra-tight phones (< 380px) — collapse the CTA to icon only */
@media (max-width: 379px) {
    .jenga-irp-floating__cta {
        min-width: 44px;
        padding: 12px 8px;
    }
    .jenga-irp-floating__cta-text {
        display: none;
    }
}

/* Reduced motion — instant arrival, no slide */
@media (prefers-reduced-motion: reduce) {
    .jenga-irp-floating {
        transition: opacity 0.2s ease;
        transform: none !important;
    }
    .jenga-irp-floating__close:hover {
        transform: none;
    }
    .jenga-irp-floating__thumb img {
        transition: none;
    }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .jenga-irp-wrapper {
        margin: 24px 0;
    }

    /* MOBILE LAYOUT: block layout + padding-bottom aspect-ratio trick.
       This is the most compatible approach — works in every browser since 2010
       and doesn't depend on CSS Grid's handling of aspect-ratio in auto rows.

       High-specificity selectors (aside.wrapper.style a.card > div.thumb)
       give specificity (0,4,3) which beats nearly any theme override.
       !important provides an extra insurance layer. */
    aside.jenga-irp-wrapper.jenga-irp-style-card a.jenga-irp-card,
    aside.jenga-irp-wrapper.jenga-irp-style-magazine a.jenga-irp-card {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex-direction: unset !important;
    }
    /* Neutralize any theme ::before/::after on card <a> tags.
       Common pattern: themes add ::before { content: ''; padding-top: 56.25%; }
       to create aspect ratios — that would force phantom height on our card.
       IMPORTANT: exclude stack-mode wrappers (:not(.jenga-irp-stack)) so our
       pick-number badge ::after survives on mobile. */
    aside.jenga-irp-wrapper.jenga-irp-style-card:not(.jenga-irp-stack) a.jenga-irp-card::before,
    aside.jenga-irp-wrapper.jenga-irp-style-card:not(.jenga-irp-stack) a.jenga-irp-card::after,
    aside.jenga-irp-wrapper.jenga-irp-style-magazine:not(.jenga-irp-stack) a.jenga-irp-card::before,
    aside.jenga-irp-wrapper.jenga-irp-style-magazine:not(.jenga-irp-stack) a.jenga-irp-card::after {
        content: none !important;
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 0 !important;
    }
    /* Stack badges: still kill ::before (themes sometimes use it for aspect ratio)
       but PROTECT our ::after which renders the pick number. */
    aside.jenga-irp-wrapper.jenga-irp-stack a.jenga-irp-card::before {
        content: none !important;
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 0 !important;
    }
    /* Thumb: classic padding-bottom aspect-ratio trick.
       height: 0 + padding-bottom: (100%/ratio) creates a box that's
       exactly (container_width / ratio) tall — independent of children.
       The absolutely-positioned <img> fills the padding box via inset:0. */
    aside.jenga-irp-wrapper.jenga-irp-style-card a.jenga-irp-card > div.jenga-irp-thumb,
    aside.jenga-irp-wrapper.jenga-irp-style-magazine a.jenga-irp-card > div.jenga-irp-thumb {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: calc(100% / var(--jirp-ratio, 1.778)) !important;
        aspect-ratio: auto !important;
        float: none !important;
        margin: 0 !important;
    }
    /* Content: pure block flow — no flex-grow, no centering, no auto-margin push */
    aside.jenga-irp-wrapper.jenga-irp-style-card a.jenga-irp-card > div.jenga-irp-content,
    aside.jenga-irp-wrapper.jenga-irp-style-magazine a.jenga-irp-card > div.jenga-irp-content {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        justify-content: flex-start !important;
        float: none !important;
    }
    .jenga-irp-style-card .jenga-irp-content {
        padding: 16px 18px;
    }
    .jenga-irp-style-magazine .jenga-irp-content {
        padding: 14px 16px;
    }
    /* Meta: restore horizontal flex inside block-flow content */
    aside.jenga-irp-wrapper.jenga-irp-style-card a.jenga-irp-card .jenga-irp-meta,
    aside.jenga-irp-wrapper.jenga-irp-style-magazine a.jenga-irp-card .jenga-irp-meta {
        display: flex !important;
        margin-top: 14px !important;
    }
    .jenga-irp-style-magazine .jenga-irp-title {
        font-size: 16px;
        -webkit-line-clamp: 2;
    }
    .jenga-irp-style-magazine .jenga-irp-excerpt {
        -webkit-line-clamp: 2;
        font-size: 13px;
    }

    /* Overlay adjustments */
    .jenga-irp-style-overlay .jenga-irp-card {
        min-height: 200px;
    }
    .jenga-irp-style-overlay .jenga-irp-title {
        font-size: 16px;
    }
    .jenga-irp-style-overlay .jenga-irp-content {
        padding: 18px;
    }

    /* Minimal keeps horizontal */
    .jenga-irp-style-minimal .jenga-irp-card {
        flex-direction: row;
    }

    .jenga-irp-title { font-size: 15px; }
    .jenga-irp-excerpt { font-size: 13px; }
}

@media (max-width: 480px) {
    /* aspect-ratio: var(--jirp-ratio) inherited from 768px query — correct for all orientations */
    .jenga-irp-meta {
        flex-wrap: wrap;
        gap: 8px;
    }
    .jenga-irp-style-overlay .jenga-irp-card {
        min-height: 180px;
    }
    .jenga-irp-style-minimal .jenga-irp-thumb {
        width: 65px;
        min-width: 65px;
    }
}

/* ══════════════════════════════════════════════════════════
   ACCESSIBILITY
   ══════════════════════════════════════════════════════════ */

.jenga-irp-card:focus-visible {
    outline: 3px solid var(--jirp-primary);
    outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .jenga-irp-animate { opacity: 1; transform: none; transition: none; }
    .jenga-irp-card { transition: none; }
    .jenga-irp-thumb img { transition: none; }
    .jenga-irp-cta svg { transition: none; }
}