/* Juegos — Demo-hero pilot layout */

.je-article__thumb--demo {
    width: 100%;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* Slot main page: kill gap between header and hero, between hero and body.
   Adjacent-sibling selectors (Chrome 1+, Firefox 1+, Safari 1+) — no :has() reliance.
   Also kill .je-page__layout padding-top which is the main source of white space
   above the title block. */
.je-article__header:has(+ .je-article__thumb--demo),
body:has(.je-article__thumb--demo) .je-article__header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.je-article__thumb--demo {
    margin-top: 0 !important;
}
.je-article__thumb--demo + .je-article__body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.je-article__thumb--demo + .je-article__body > *:first-child {
    margin-top: 0 !important;
}

/* Kill the page container top padding on slot main pages so hero sits flush. */
body:has(.je-article__thumb--demo) .je-page__layout,
body:has(.je-article__thumb--demo) .je-main {
    padding-top: 0 !important;
}

/* Slot main pages: ensure breathing room between demo-hero and first card,
   and between inline-img and following card.  Scoped to slot pages only. */
body:has(.je-article__thumb--demo) .je-article__body > .je-hero-card,
body:has(.je-article__thumb--demo) .je-article__body > .je-brand-card {
    margin-top: 2em !important;
}

.je-article__thumb--demo .je-demo-container,
.je-article__thumb--demo .je-demo-container.je-demo-container--hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    background-size: cover;
    background-position: center;
    margin: 0 !important;   /* kill plugin default `margin: 24px 0` */
    padding: 0 !important;
    border-radius: 0;
}

/* Inline featured image inside article body (after second H2).
   High specificity + !important — theme/Kadence reset figures aggressively. */
.je-article__body figure.je-inline-img,
.je-article .je-inline-img {
    width: 100% !important;
    margin: 2em 0 !important;
    padding: 0 !important;
    display: block;
}

.je-article__body figure.je-inline-img img,
.je-article .je-inline-img img {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    display: block;
    margin: 0;
}