/* WW James Tools — Infobox Shortcode
   Shares CSS variables and visual DNA with mower-tool.css
   ------------------------------------------------------------------ */

.jlm-infobox {
    --jlm-green:  #005e2b;
    --jlm-orange: #D4581A;
    --jlm-dark:   #2C2C2C;

    font-family: 'Open Sans', system-ui, sans-serif;
    background: #f3f8f3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(0, 60, 20, 0.16);
    width: 100%;
    margin: 24px 0;
}

/* ── Header ── */
.jlm-infobox__header {
    background: var(--jlm-green);
    padding: 16px 22px 14px;
}

.jlm-infobox__title {
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

/* ── Body ── */
.jlm-infobox__body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Image ── */
.jlm-infobox__image {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    line-height: 0;
}

.jlm-infobox__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Inner content (e.g. nested shortcodes like ww_coupon_crawler) */
.jlm-infobox__content {
    /* Crawler needs overflow:hidden on its own wrap — don't clip here */
    overflow: visible;
}

/* Ensure crawler wrap works inside constrained containers */
.jlm-infobox__content .ww-crawler-wrap {
    overflow: hidden;
    width: 100%;
}
.jlm-infobox__description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--jlm-dark);
    margin: 0;
}

/* ── CTA results bar — dark footer matching mower tool ── */
/* Defined in mower-tool.css too; this copy ensures infobox
   works on pages without the mower tool present            */
.jlm-infobox .jlm-tool__results {
    background: var(--jlm-dark);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* ── CTA button — reuses mower tool class ── */
/* .jlm-cta-btn is defined in mower-tool.css,
   but we redeclare it here so infobox works
   even without the mower tool on the page    */
.jlm-infobox .jlm-cta-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    background: var(--jlm-orange);
    color: #ffffff !important;
    border: none;
    border-radius: 50px;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.15s, transform 0.15s;
}

.jlm-infobox .jlm-cta-btn:hover {
    background: #ff6a00;
    transform: translateY(-1px);
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ── Responsive ── */
@media (min-width: 600px) {
    /* On wider screens, image and text can sit side by side */
    .jlm-infobox--landscape .jlm-infobox__body {
        flex-direction: row;
        align-items: flex-start;
    }

    .jlm-infobox--landscape .jlm-infobox__image {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .jlm-infobox--landscape .jlm-infobox__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}