/*
 * JewishNews visual redesign — homepage + article + category v7.
 * The source SP Page Builder content remains intact and is hidden only after
 * jn-redesign.js has successfully created the new presentation layer.
 */

:root {
    --jn-blue: #168df0;
    --jn-blue-dark: #0570ca;
    --jn-ink: #101217;
    --jn-muted: #717985;
    --jn-line: #e5e8ec;
    --jn-surface: #ffffff;
    --jn-page: #f5f6f8;
    --jn-radius: 12px;
    --jn-shadow: 0 12px 36px rgba(12, 25, 44, 0.07);
}

html {
    scroll-behavior: smooth;
}

body.site {
    background: var(--jn-page) !important;
    color: var(--jn-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.site a {
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

/* Header: only appearance, Joomla menu behavior is untouched. */
html body.site #sp-header.dark-bg,
html body.site #sp-header.header-sticky {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #090a0c !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) !important;
}

html body.site #sp-header > .container,
html body.site #sp-header .container-inner,
html body.site #sp-header .container-inner > .row,
html body.site #sp-header .container-inner > .row > [class*="col-"],
html body.site #sp-header .sp-column {
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
}

html body.site #sp-header > .container {
    width: min(1440px, calc(100% - 40px)) !important;
    max-width: 1440px !important;
    padding: 0 !important;
}

html body.site #sp-header .container-inner > .row {
    margin: 0 !important;
    align-items: center !important;
}

html body.site #sp-header #sp-logo > .sp-column,
html body.site #sp-header #sp-menu > .sp-column,
html body.site #sp-header #sp-logo-left > .sp-column,
html body.site #sp-header #sp-logo-right > .sp-column {
    align-items: center !important;
}

html body.site #sp-header .logo-image {
    height: 46px !important;
    width: auto !important;
    max-width: 210px !important;
    object-fit: contain;
}

#sp-header .sp-megamenu-parent {
    display: flex !important;
    align-items: stretch;
    gap: 28px;
}

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
    position: relative;
    display: flex !important;
    align-items: center;
    height: 62px !important;
    padding: 0 !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    letter-spacing: .035em;
    text-transform: uppercase;
}

#sp-header .sp-megamenu-parent > li > a:hover,
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.current-item > a {
    color: #fff !important;
}

#sp-header .sp-megamenu-parent > li.active > a::after,
#sp-header .sp-megamenu-parent > li.current-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--jn-blue);
    border-radius: 3px 3px 0 0;
}



/* Mobile header / offcanvas bar */
#sp-mobile-logo {
    min-height: 54px !important;
    background: #090a0c !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) !important;
}

#sp-mobile-logo .container,
#sp-mobile-logo .container-inner,
#sp-mobile-logo .row {
    min-height: 54px !important;
    height: 54px !important;
    align-items: center !important;
}

#sp-mobile-logo .logo-image,
#sp-mobile-logo img,
#sp-mobile-logo .custom img {
    max-height: 34px !important;
    width: auto !important;
}

#offcanvas-toggler,
.offcanvas-toggler {
    line-height: 54px !important;
}


/* Gazette has a built-in 120px sticky-header offset. Keep it aligned with the compact header. */
html body.site #sp-header.header-sticky ~ section#sp-main-body {
    padding-top: 62px !important;
}

html body.site.jn-home-redesign-ready #sp-main-body {
    margin-top: 0 !important;
}

@media (max-width: 767px) {
    html body.site #sp-header.header-sticky ~ section#sp-main-body {
        padding-top: 54px !important;
    }
}

/*
 * The homepage receives jn-home-pending directly from PHP, before the first
 * browser paint. The old SP Page Builder content keeps its dimensions but is
 * invisible until the new layout is ready. This removes the 1–2 second flash.
 */
html body.site.jn-home-pending #sp-page-builder > .page-content.builder-container {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Do not animate the switch: the finished layout appears in one paint. */
html body.site.jn-home-pending .jn-home-redesign {
    visibility: visible !important;
    opacity: 1 !important;
}

/* The original page is hidden only after the new page has been built. */
.jn-home-redesign-ready #sp-page-builder > .page-content.builder-container {
    display: none !important;
}

.jn-home-redesign {
    width: 100%;
    padding: 14px 0 54px;
}

.jn-home-container {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
}

.jn-lead-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(250px, .72fr) minmax(300px, .76fr);
    gap: 24px;
    align-items: stretch;
}

.jn-hero {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: var(--jn-radius);
    background: #111820;
    box-shadow: var(--jn-shadow);
}

.jn-hero__media,
.jn-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.jn-hero__image {
    object-fit: cover;
    object-position: center;
    transition: transform .55s ease;
}

.jn-hero:hover .jn-hero__image {
    transform: scale(1.025);
}

.jn-hero__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5,8,12,.03) 20%, rgba(5,8,12,.22) 54%, rgba(5,8,12,.92) 100%);
}

.jn-hero__content {
    position: absolute;
    z-index: 2;
    left: 30px;
    right: 30px;
    bottom: 28px;
    max-width: 720px;
    color: #fff;
}

.jn-hero__category,
.jn-kicker {
    color: var(--jn-blue);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.jn-hero__category {
    display: inline-flex;
    padding: 7px 10px;
    margin-bottom: 13px;
    color: #fff;
    background: var(--jn-blue);
    border-radius: 4px;
}

.jn-hero h1 {
    margin: 0;
    font-size: clamp(28px, 2.25vw, 42px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.025em;
}

.jn-hero h1 a {
    color: #fff !important;
}

.jn-hero h1 a:hover {
    color: #fff !important;
}

.jn-hero time {
    display: block;
    margin-top: 18px;
    color: rgba(255,255,255,.76);
    font-size: 13px;
}

.jn-side-stories {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.jn-side-story {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 0 0 14px;
    border-bottom: 1px solid var(--jn-line);
}

.jn-side-story:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.jn-side-story__media {
    display: block;
    height: 96px;
    overflow: hidden;
    border-radius: 8px;
    background: #eaf2fa;
}

.jn-side-story__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jn-side-story__number {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--jn-blue);
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(145deg, #edf6ff, #f7fbff);
}

.jn-side-story__body {
    min-width: 0;
}

.jn-side-story h3 {
    margin: 5px 0 8px;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

.jn-side-story h3 a,
.jn-latest-card h3 a,
.jn-category-card h3 a {
    color: var(--jn-ink) !important;
}

.jn-side-story h3 a:hover,
.jn-latest-card h3 a:hover,
.jn-category-card h3 a:hover {
    color: var(--jn-blue-dark) !important;
}

.jn-side-story time,
.jn-latest-card time,
.jn-category-card time {
    color: var(--jn-muted);
    font-size: 12px;
}

.jn-home-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.jn-donation-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 250px;
    padding: 22px 24px;
    color: var(--jn-ink) !important;
    text-align: center;
    background: var(--jn-surface);
    border: 1px solid var(--jn-line);
    border-radius: var(--jn-radius);
    box-shadow: 0 8px 24px rgba(12,25,44,.035);
}

.jn-donation-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--jn-shadow);
}

.jn-donation-card img {
    display: block;
    width: auto;
    max-width: 240px;
    height: 116px;
    object-fit: contain;
    margin: 0 auto 8px;
}

.jn-donation-card p {
    margin: 2px 0 18px;
    color: var(--jn-muted);
    font-size: 14px;
    line-height: 1.45;
}

.jn-donation-card > span {
    display: inline-flex;
    min-width: 170px;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    background: #d9222a;
    border-radius: 5px;
}

.jn-cemetery-card {
    position: relative;
    display: block;
    min-height: 250px;
    overflow: hidden;
    color: #fff !important;
    background: #161a1d;
    border-radius: var(--jn-radius);
    box-shadow: var(--jn-shadow);
}

.jn-cemetery-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.jn-cemetery-card:hover > img {
    transform: scale(1.035);
}

.jn-cemetery-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7,9,10,.94) 0%, rgba(7,9,10,.68) 58%, rgba(7,9,10,.20) 100%);
}

.jn-cemetery-card__content {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 24px;
}

.jn-cemetery-card strong {
    max-width: 230px;
    font-size: 25px;
    line-height: 1.05;
    font-weight: 800;
}

.jn-cemetery-card small {
    max-width: 260px;
    margin-top: 10px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.4;
}

.jn-cemetery-card b {
    display: inline-flex;
    margin-top: 18px;
    padding: 9px 12px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 4px;
}

.jn-latest-section {
    margin-top: 30px;
}

.jn-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.jn-section-heading h2 {
    position: relative;
    margin: 0;
    padding-bottom: 10px;
    color: var(--jn-ink);
    font-size: 20px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.jn-section-heading h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    background: var(--jn-blue);
    border-radius: 3px;
}

.jn-section-heading > a {
    color: var(--jn-blue) !important;
    font-size: 13px;
    font-weight: 700;
}

.jn-latest-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.jn-latest-card {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 14px;
    min-height: 130px;
    padding: 12px;
    background: var(--jn-surface);
    border: 1px solid var(--jn-line);
    border-radius: 9px;
}

.jn-latest-card:hover {
    transform: translateY(-2px);
    border-color: #cbd8e5;
    box-shadow: 0 10px 24px rgba(12,25,44,.055);
}

.jn-latest-card__media {
    display: block;
    height: 112px;
    overflow: hidden;
    border-radius: 7px;
    background: #edf5fc;
}

.jn-latest-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.jn-latest-card__number {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--jn-blue);
    font-size: 31px;
    font-weight: 800;
    background: linear-gradient(145deg, #edf6ff, #f9fcff);
}

.jn-latest-card h3 {
    margin: 5px 0 8px;
    font-size: 15px;
    line-height: 1.34;
    font-weight: 700;
}

.jn-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.jn-category-card {
    padding: 18px;
    background: var(--jn-surface);
    border: 1px solid var(--jn-line);
    border-radius: var(--jn-radius);
}

.jn-category-card .jn-section-heading {
    margin-bottom: 14px;
}

.jn-category-card .jn-section-heading h2 {
    font-size: 18px;
}

.jn-category-card__content {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 16px;
}

.jn-category-lead__media {
    display: block;
    height: 210px;
    overflow: hidden;
    border-radius: 8px;
    background: #edf2f6;
}

.jn-category-lead__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jn-category-lead h3 {
    margin: 11px 0 7px;
    font-size: 16px;
    line-height: 1.32;
    font-weight: 750;
}

.jn-category-list article {
    padding: 0 0 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid var(--jn-line);
}

.jn-category-list article:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.jn-category-list h3 {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.32;
    font-weight: 700;
}

.jn-image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #eaf3fb, #f8fbfd);
}

/* The old social block is not copied into the new homepage. */
.jn-home-redesign #sppb-addon-1537359022060,
.jn-home-redesign #sppb-addon-1537344109952 {
    display: none !important;
}



/* Images for title-only Joomla news lists are filled from the article's own og:image. */
.jn-side-story__media,
.jn-latest-card__media {
    position: relative;
}

.jn-side-story__image,
.jn-latest-card__image {
    display: block;
    opacity: 0;
    animation: jn-image-in .28s ease forwards;
}

@keyframes jn-image-in {
    to { opacity: 1; }
}

.jn-side-story.has-image .jn-side-story__image,
.jn-latest-card.has-image .jn-latest-card__image,
.jn-side-story__media > img,
.jn-latest-card__media > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media (max-width: 1280px) {
    .jn-lead-layout {
        grid-template-columns: minmax(0, 1.65fr) minmax(235px, .72fr) minmax(280px, .78fr);
        gap: 18px;
    }

    .jn-latest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jn-category-card__content {
        grid-template-columns: 1fr;
    }

    .jn-category-lead__media {
        height: 220px;
    }
}

@media (max-width: 1050px) {
    #sp-header > .container,
    .jn-home-container {
        width: min(100% - 32px, 980px) !important;
    }

    .jn-lead-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr);
    }

    .jn-hero {
        min-height: 500px;
    }

    .jn-side-stories {
        grid-column: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .jn-side-story {
        grid-template-columns: 78px minmax(0, 1fr);
        border: 1px solid var(--jn-line);
        border-radius: 9px;
        padding: 10px;
        background: var(--jn-surface);
    }

    .jn-side-story__media {
        height: 78px;
    }

    .jn-home-sidebar {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .jn-category-grid {
        grid-template-columns: 1fr;
    }

    .jn-category-card__content {
        grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr);
    }
}

@media (max-width: 767px) {
    html body.site #sp-header.dark-bg,
    html body.site #sp-header.header-sticky,
    html body.site #sp-header > .container,
    html body.site #sp-header .container-inner,
    html body.site #sp-header .container-inner > .row,
    html body.site #sp-header .container-inner > .row > [class*="col-"],
    html body.site #sp-header .sp-column {
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
    }

    #sp-header > .container,
    .jn-home-container {
        width: calc(100% - 24px) !important;
    }

    html body.site #sp-header .logo-image,
    html body.site #sp-header .logo-image-phone,
    html body.site #sp-header #mod-custom157 img {
        height: 36px !important;
        width: auto !important;
        max-height: 36px !important;
    }

    html body.site #sp-header .sp-megamenu-parent > li > a,
    html body.site #sp-header .sp-megamenu-parent > li > span {
        height: 56px !important;
    }

    .jn-home-redesign {
        padding-top: 8px;
    }

    .jn-lead-layout {
        display: block;
    }

    .jn-hero {
        min-height: 410px;
    }

    .jn-hero__content {
        left: 19px;
        right: 19px;
        bottom: 20px;
    }

    .jn-hero h1 {
        font-size: 27px;
    }

    .jn-side-stories {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 14px;
    }

    .jn-side-story {
        grid-template-columns: 94px minmax(0, 1fr);
    }

    .jn-home-sidebar {
        margin-top: 18px;
    }

    .jn-donation-card,
    .jn-cemetery-card {
        min-height: 230px;
    }

    .jn-latest-grid {
        grid-template-columns: 1fr;
    }

    .jn-latest-card {
        grid-template-columns: 104px minmax(0, 1fr);
        min-height: 116px;
    }

    .jn-latest-card__media {
        height: 96px;
    }


    .jn-category-card__content {
        grid-template-columns: 1fr;
    }

    .jn-category-lead__media {
        height: 230px;
    }
}

@media (max-width: 420px) {
    .jn-hero {
        min-height: 390px;
    }

    .jn-hero h1 {
        font-size: 23px;
    }

    .jn-latest-card {
        grid-template-columns: 110px minmax(0, 1fr);
    }

    .jn-latest-card__media {
        height: 92px;
    }

    .jn-section-heading {
        align-items: flex-end;
    }

    .jn-section-heading h2 {
        font-size: 18px;
    }
}


@media (max-width: 767px) {
    html body.site #sp-header,
    html body.site #sp-header.dark-bg,
    html body.site #sp-header.header-sticky,
    html body.site #sp-header > .container,
    html body.site #sp-header .container-inner,
    html body.site #sp-header .container-inner > .row,
    html body.site #sp-header .container-inner > .row > [class*="col-"],
    html body.site #sp-header .sp-column {
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
    }

    html body.site #sp-header #mod-custom157,
    html body.site #sp-header #mod-custom157 a {
        display: flex !important;
        height: 54px !important;
        align-items: center !important;
    }

    html body.site #sp-header #mod-custom157 img,
    html body.site #sp-header .logo-image-phone {
        height: 32px !important;
        max-height: 32px !important;
        width: auto !important;
    }
}


/* ========================================================================
   ARTICLE PAGE — approved clean editorial design
   ======================================================================== */

body.site.view-article {
    background: #ffffff !important;
}

/* The old right banner is hidden before the first paint. The article itself
   is already styled by CSS, so only the enhanced sidebar waits for JS. */
body.site.view-article.jn-article-pending #sp-right {
    visibility: hidden !important;
}

body.site.view-article.jn-article-redesign-ready #sp-right {
    visibility: visible !important;
}

body.site.view-article #sp-main-body {
    margin: 0 !important;
    padding: 34px 0 80px !important;
    background: #ffffff !important;
}

body.site.view-article #sp-main-body > .container,
body.site.view-article #sp-main-body > .container > .container-inner {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
}

body.site.view-article #sp-main-body .row {
    align-items: flex-start !important;
    margin-right: -14px !important;
    margin-left: -14px !important;
}

body.site.view-article #sp-component {
    flex: 0 0 calc(100% - 370px) !important;
    width: calc(100% - 370px) !important;
    max-width: calc(100% - 370px) !important;
    padding-right: 24px !important;
    padding-left: 14px !important;
}

body.site.view-article #sp-right {
    flex: 0 0 370px !important;
    width: 370px !important;
    max-width: 370px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
}

body.site.view-article #sp-component > .sp-column,
body.site.view-article .ai-wrapper,
body.site.view-article .article-details {
    width: 100% !important;
    max-width: none !important;
}

body.site.view-article .article-details {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.site.view-article .article-details.jn-infinite-article {
    margin-top: 76px !important;
    padding-top: 58px !important;
    border-top: 1px solid var(--jn-line) !important;
}

body.site.view-article .jn-article-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin: 0 0 23px;
    color: #8a929d;
    font-size: 13px;
    line-height: 1.4;
}

body.site.view-article .jn-article-breadcrumbs a {
    color: #65707c !important;
    text-decoration: none !important;
}

body.site.view-article .jn-article-breadcrumbs a:hover {
    color: var(--jn-blue) !important;
}

body.site.view-article .jn-article-breadcrumbs span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.site.view-article .jn-article-breadcrumbs__separator {
    color: #b8bec6;
}

body.site.view-article .category-name.jn-article-kicker {
    display: block !important;
    width: max-content;
    margin: 0 0 13px !important;
    padding: 0 !important;
    font-size: 0 !important;
}

body.site.view-article .category-name.jn-article-kicker::after {
    display: none !important;
}

body.site.view-article .category-name.jn-article-kicker a {
    color: var(--jn-blue) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .045em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

body.site.view-article .article-header {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

body.site.view-article .article-header h1,
body.site.view-article .article-details .article-header h1 {
    max-width: 930px;
    margin: 0 0 17px !important;
    color: var(--jn-ink) !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: clamp(31px, 2.7vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
    text-transform: none !important;
}

body.site.view-article .header-bottom {
    margin: 0 0 25px !important;
    padding: 0 !important;
    border: 0 !important;
}

body.site.view-article .article-info {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 18px !important;
    margin: 0 !important;
    color: #7c8590 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

body.site.view-article .article-info .category-name {
    display: none !important;
}

body.site.view-article .article-info .published {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #7c8590 !important;
}

body.site.view-article .article-info .published::before {
    content: '';
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: no-repeat center/16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237c8590' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

body.site.view-article .article-info .published time {
    color: inherit !important;
    font-size: inherit !important;
}

body.site.view-article .article-full-image,
body.site.view-article figure.article-full-image,
body.site.view-article .item-image.article-full-image {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 27px !important;
    text-align: left !important;
}

body.site.view-article .article-full-image img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 11px !important;
    object-fit: cover !important;
    box-shadow: none !important;
}

body.site.view-article [itemprop='articleBody'] {
    max-width: 900px;
    color: #252a31 !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
}

body.site.view-article [itemprop='articleBody'] p,
body.site.view-article [itemprop='articleBody'] li {
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

body.site.view-article [itemprop='articleBody'] p {
    margin: 0 0 22px !important;
}

body.site.view-article [itemprop='articleBody'] a {
    color: var(--jn-blue-dark) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}

body.site.view-article [itemprop='articleBody'] img,
body.site.view-article [itemprop='articleBody'] iframe,
body.site.view-article [itemprop='articleBody'] video {
    max-width: 100% !important;
}

body.site.view-article [itemprop='articleBody'] iframe,
body.site.view-article [itemprop='articleBody'] .telegram-post {
    border-radius: 10px;
}

body.site.view-article .article-can-edit:empty,
body.site.view-article .pagenavigation,
body.site.view-article .pagination {
    display: none !important;
}

/* Keep the AjaxInfinity next link in the DOM for its script, but not in the design. */
body.site.view-article .ai-next {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Enhanced article sidebar. */
body.site.view-article .jn-article-sidebar {
    display: grid;
    gap: 22px;
}

body.site.view-article .jn-article-donation,
body.site.view-article .jn-article-sidebar-news {
    overflow: hidden;
    border: 1px solid var(--jn-line);
    border-radius: var(--jn-radius);
    background: var(--jn-surface);
    box-shadow: 0 9px 30px rgba(13, 27, 46, .045);
}

body.site.view-article .jn-article-donation {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 285px;
    padding: 24px 24px 22px;
    color: var(--jn-ink) !important;
    text-align: center;
    text-decoration: none !important;
}

body.site.view-article .jn-article-donation:hover {
    transform: translateY(-2px);
    box-shadow: var(--jn-shadow);
}

body.site.view-article .jn-article-donation img {
    width: auto;
    max-width: 230px;
    height: 104px;
    margin: 0 auto 12px;
    object-fit: contain;
}

body.site.view-article .jn-article-donation p {
    max-width: 285px;
    margin: 0 0 20px;
    color: #737c87 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

body.site.view-article .jn-article-donation span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 47px;
    padding: 11px 25px;
    border-radius: 5px;
    background: #df2029;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

body.site.view-article .jn-article-sidebar-news {
    padding: 19px 17px 13px;
}

body.site.view-article .jn-article-sidebar-news__heading {
    position: relative;
    margin: 0 0 14px;
    padding: 0 0 13px;
    border-bottom: 1px solid var(--jn-line);
    color: var(--jn-ink);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .015em;
    text-transform: uppercase;
}

body.site.view-article .jn-article-sidebar-news__heading::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 34px;
    height: 2px;
    background: var(--jn-blue);
}

body.site.view-article .jn-sidebar-news__list {
    display: grid;
    gap: 4px;
}

body.site.view-article .jn-sidebar-news__item {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 11px 0;
    border-bottom: 1px solid #eef0f3;
}

body.site.view-article .jn-sidebar-news__item:last-child {
    border-bottom: 0;
}

body.site.view-article .jn-sidebar-news__media {
    display: block;
    overflow: hidden;
    width: 104px;
    height: 70px;
    border-radius: 7px;
    background: #edf2f7;
}

body.site.view-article .jn-sidebar-news__image,
body.site.view-article .jn-sidebar-news__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.site.view-article .jn-sidebar-news__placeholder {
    background: linear-gradient(135deg, #eff5fa, #e5edf5);
}

body.site.view-article .jn-sidebar-news__body {
    min-width: 0;
}

body.site.view-article .jn-sidebar-news__body h3 {
    margin: 0 0 7px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.33 !important;
}

body.site.view-article .jn-sidebar-news__body h3 a {
    color: var(--jn-ink) !important;
    text-decoration: none !important;
}

body.site.view-article .jn-sidebar-news__body h3 a:hover {
    color: var(--jn-blue-dark) !important;
}

body.site.view-article .jn-sidebar-news__body time {
    color: #8a929d;
    font-size: 12px;
    line-height: 1.3;
}

body.site.view-article .jn-sidebar-news__loading {
    display: grid;
    gap: 12px;
    padding: 4px 0 10px;
}

body.site.view-article .jn-sidebar-news__loading span {
    display: block;
    height: 74px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f2f4f7 25%, #e9edf2 50%, #f2f4f7 75%);
    background-size: 200% 100%;
    animation: jn-sidebar-loading 1.4s linear infinite;
}

@keyframes jn-sidebar-loading {
    to { background-position: -200% 0; }
}

body.site.view-article.jn-article-redesign-ready #sp-right > .sp-column > .sp-module {
    display: none !important;
}

body.site.view-article #sp-right > .sp-column > .jn-article-sidebar {
    display: grid !important;
}

@media (max-width: 1100px) {
    body.site.view-article #sp-component {
        flex-basis: calc(100% - 330px) !important;
        width: calc(100% - 330px) !important;
        max-width: calc(100% - 330px) !important;
    }

    body.site.view-article #sp-right {
        flex-basis: 330px !important;
        width: 330px !important;
        max-width: 330px !important;
    }

    body.site.view-article .jn-sidebar-news__item {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    body.site.view-article .jn-sidebar-news__media {
        width: 90px;
        height: 64px;
    }
}

@media (max-width: 991px) {
    body.site.view-article #sp-main-body {
        padding-top: 25px !important;
    }

    body.site.view-article #sp-component {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    body.site.view-article #sp-right {
        display: none !important;
    }

    body.site.view-article [itemprop='articleBody'] {
        max-width: none;
    }
}

@media (max-width: 767px) {
    body.site.view-article #sp-main-body {
        padding: 18px 0 55px !important;
    }

    body.site.view-article #sp-main-body > .container,
    body.site.view-article #sp-main-body > .container > .container-inner {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.site.view-article #sp-component {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    body.site.view-article .jn-article-breadcrumbs {
        display: none;
    }

    body.site.view-article .category-name.jn-article-kicker {
        margin-bottom: 10px !important;
    }

    body.site.view-article .article-header h1,
    body.site.view-article .article-details .article-header h1 {
        margin-bottom: 13px !important;
        font-size: clamp(25px, 7.2vw, 30px) !important;
        line-height: 1.13 !important;
        letter-spacing: -.028em !important;
    }

    body.site.view-article .header-bottom {
        margin-bottom: 19px !important;
    }

    body.site.view-article .article-info {
        font-size: 13px !important;
    }

    body.site.view-article .article-full-image,
    body.site.view-article figure.article-full-image {
        margin-right: -16px !important;
        margin-bottom: 22px !important;
        margin-left: -16px !important;
        width: calc(100% + 32px) !important;
    }

    body.site.view-article .article-full-image img {
        border-radius: 0 !important;
    }

    body.site.view-article [itemprop='articleBody'] {
        font-size: 16px !important;
        line-height: 1.72 !important;
    }

    body.site.view-article .article-details.jn-infinite-article {
        margin-top: 52px !important;
        padding-top: 42px !important;
    }
}


/* ==========================================================================\n   CATEGORY PAGE — V6\n   ========================================================================== */
body.site.view-category {
    background: #f4f6f8 !important;
}

body.site.view-category.jn-category-pending #sp-component .blog,
body.site.view-category.jn-category-pending #sp-right {
    visibility: hidden !important;
    opacity: 0 !important;
}

body.site.view-category #sp-main-body {
    padding: 34px 0 70px !important;
    background: #f4f6f8 !important;
}

body.site.view-category #sp-main-body > .container {
    max-width: 1240px !important;
}

body.site.view-category #sp-component {
    padding-right: 24px !important;
}

body.site.view-category .jn-category-page-heading {
    margin-bottom: 24px;
}

body.site.view-category .jn-category-page-heading > span {
    display: block;
    margin-bottom: 7px;
    color: #168df2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

body.site.view-category .jn-category-page-heading h1 {
    margin: 0;
    color: #111820;
    font-size: clamp(30px, 3.3vw, 46px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
}

body.site.view-category .blog .category-desc {
    display: none !important;
}

body.site.view-category .blog .article-list,
body.site.view-category .blog .articles-more {
    margin: 0 0 22px !important;
}

body.site.view-category .blog .article-list:not(.articles-leading) > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0 !important;
}

body.site.view-category .blog .article-list:not(.articles-leading) > .row > [class*='col-'] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

body.site.view-category .jn-category-page-featured,
body.site.view-category .jn-category-page-card,
body.site.view-category .jn-category-page-row {
    overflow: hidden;
    border: 1px solid #e1e6eb !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 7px 25px rgba(28, 43, 58, .055);
}

body.site.view-category .jn-category-page-featured {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(270px, .85fr);
    min-height: 370px;
}

body.site.view-category .jn-category-page-featured > a {
    display: block;
    min-height: 370px;
}

body.site.view-category .jn-category-page-featured .article-intro-image,
body.site.view-category .jn-category-page-card .article-intro-image {
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden;
}

body.site.view-category .jn-category-page-featured .article-intro-image img,
body.site.view-category .jn-category-page-card .article-intro-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform .35s ease;
}

body.site.view-category .jn-category-page-featured:hover .article-intro-image img,
body.site.view-category .jn-category-page-card:hover .article-intro-image img {
    transform: scale(1.025);
}

body.site.view-category .jn-category-page-featured .article-info-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px !important;
}

body.site.view-category .jn-category-page-featured .article-header h2 {
    margin: 0 0 18px !important;
    font-size: clamp(25px, 2.25vw, 34px) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;
}

body.site.view-category .jn-category-page-card {
    display: flex !important;
    flex-direction: column;
    min-height: 100%;
}

body.site.view-category .jn-category-page-card > a {
    display: block;
    height: 205px;
}

body.site.view-category .jn-category-page-card .article-info-wrap {
    padding: 20px 21px 19px !important;
}

body.site.view-category .jn-category-page-card .article-header h2 {
    margin: 0 0 14px !important;
    font-size: 19px !important;
    font-weight: 750 !important;
    line-height: 1.28 !important;
    letter-spacing: -.015em !important;
}

body.site.view-category .blog .article-header h2 a {
    color: #111820 !important;
}

body.site.view-category .blog .article-header h2 a:hover,
body.site.view-category .articles-more .item-info > a:hover {
    color: #168df2 !important;
}

body.site.view-category .blog .article-info {
    margin: 0 !important;
    color: #8a949e !important;
    font-size: 12px !important;
}

body.site.view-category .blog .article-info .category-name {
    display: none !important;
}

body.site.view-category .articles-more .list-group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 !important;
}

body.site.view-category .jn-category-page-row {
    display: grid !important;
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: 112px;
    padding: 0 !important;
}

body.site.view-category .jn-category-page-row .item-image,
body.site.view-category .jn-category-page-row .item-image > a,
body.site.view-category .jn-category-page-row .article-intro-image {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

body.site.view-category .jn-category-page-row img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body.site.view-category .jn-category-page-row .item-info {
    padding: 16px 17px !important;
}

body.site.view-category .jn-category-page-row .item-info > a {
    display: block;
    margin-bottom: 9px;
    color: #111820 !important;
    font-size: 15px;
    font-weight: 750;
    line-height: 1.28;
}

body.site.view-category .pagination-wrapper,
body.site.view-category .ai-next {
    display: none !important;
}

body.site.view-category #sp-right {
    flex: 0 0 310px !important;
    width: 310px !important;
    max-width: 310px !important;
}

body.site.view-category.jn-category-redesign-ready #sp-right > .sp-column > .sp-module {
    display: none !important;
}

body.site.view-category .jn-category-sidebar {
    display: grid;
    gap: 16px;
}

body.site.view-category .jn-category-sidebar .jn-article-donation {
    margin: 0;
}

body.site.view-category .jn-category-sidebar .jn-cemetery-card {
    min-height: 218px;
}

body.site.view-category .ai-loading {
    padding: 25px 0 !important;
    text-align: center;
}

@media (max-width: 1100px) {
    body.site.view-category #sp-right {
        flex-basis: 285px !important;
        width: 285px !important;
        max-width: 285px !important;
    }

    body.site.view-category .jn-category-page-featured {
        grid-template-columns: 1.35fr .85fr;
    }
}

@media (max-width: 991px) {
    body.site.view-category #sp-component {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 15px !important;
    }

    body.site.view-category #sp-right {
        display: none !important;
    }
}

@media (max-width: 767px) {
    body.site.view-category #sp-main-body {
        padding: 20px 0 55px !important;
    }

    body.site.view-category #sp-component {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    body.site.view-category .jn-category-page-heading {
        margin-bottom: 17px;
    }

    body.site.view-category .jn-category-page-heading h1 {
        font-size: 31px;
    }

    body.site.view-category .jn-category-page-featured {
        display: flex !important;
        flex-direction: column;
        min-height: 0;
    }

    body.site.view-category .jn-category-page-featured > a {
        min-height: 0;
        height: 235px;
    }

    body.site.view-category .jn-category-page-featured .article-info-wrap {
        padding: 21px !important;
    }

    body.site.view-category .jn-category-page-featured .article-header h2 {
        font-size: 25px !important;
    }

    body.site.view-category .blog .article-list:not(.articles-leading) > .row,
    body.site.view-category .articles-more .list-group {
        grid-template-columns: 1fr !important;
    }

    body.site.view-category .jn-category-page-card > a {
        height: 205px;
    }

    body.site.view-category .jn-category-page-row {
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 105px;
    }
}


/* ==========================================================================
   ARTICLE PAGE — V7 corrections
   ========================================================================== */

/*
 * AjaxInfinity adds an inline display:none rule to .article-details.
 * Force the first article to be visible immediately, before JavaScript runs,
 * so the header is never followed by a blank white field.
 */
html body.site.view-article .article-details {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Breadcrumbs are not shown on article pages. */
html body.site.view-article .jn-article-breadcrumbs,
html body.site.view-article .breadcrumb,
html body.site.view-article .breadcrumbs,
html body.site.view-article [aria-label='Breadcrumb'],
html body.site.view-article [aria-label='Навігація'].breadcrumb {
    display: none !important;
}

/*
 * Remove the original OEOU image module everywhere on article pages.
 * The redesigned support card in the right column remains intact.
 */
html body.site.view-article #mod-custom149,
html body.site.view-article .sp-module:has(#mod-custom149),
html body.site.view-article .sp-module:has(img[src*='/images/2024/November/jpeg1.jpg']),
html body.site.view-article .mod-custom:has(img[src*='/images/2024/November/jpeg1.jpg']) {
    display: none !important;
}

/* The right column follows the reader while the infinite article feed grows. */
@media (min-width: 992px) {
    html body.site.view-article #sp-main-body .row {
        align-items: stretch !important;
    }

    html body.site.view-article #sp-right {
        align-self: stretch !important;
        overflow: visible !important;
    }

    html body.site.view-article #sp-right > .sp-column {
        position: sticky !important;
        top: 78px !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 10 !important;
        height: max-content !important;
        min-height: 0 !important;
        transform: none !important;
    }

    html body.site.view-article .jn-article-sidebar {
        position: relative !important;
        top: auto !important;
        transform: none !important;
    }
}

/* Support block inserted after every article, including AjaxInfinity articles. */
html body.site.view-article .jn-article-inline-donation {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    margin: 38px 0 0;
    padding: 22px 24px;
    border: 1px solid #e1e6eb;
    border-radius: 11px;
    background: #ffffff;
    color: #111820 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 28px rgba(13, 27, 46, .05);
    transition: transform .18s ease, box-shadow .18s ease;
}

html body.site.view-article .jn-article-inline-donation:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 36px rgba(13, 27, 46, .09);
}

html body.site.view-article .jn-article-inline-donation img {
    display: block;
    width: 118px !important;
    height: 78px !important;
    margin: 0 !important;
    object-fit: contain !important;
}

html body.site.view-article .jn-article-inline-donation__text {
    display: grid;
    gap: 5px;
    min-width: 0;
}

html body.site.view-article .jn-article-inline-donation__text strong {
    color: #111820;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

html body.site.view-article .jn-article-inline-donation__text small {
    color: #737c87;
    font-size: 14px;
    line-height: 1.5;
}

html body.site.view-article .jn-article-inline-donation > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 46px;
    padding: 11px 22px;
    border-radius: 5px;
    background: #df2029;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
}

/* More comfortable article margins on phones. */
@media (max-width: 767px) {
    html body.site.view-article #sp-main-body {
        padding-top: 16px !important;
    }

    html body.site.view-article #sp-main-body > .container {
        width: 100% !important;
        max-width: none !important;
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    html body.site.view-article #sp-main-body > .container > .container-inner {
        width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html body.site.view-article #sp-main-body .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    html body.site.view-article #sp-component {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html body.site.view-article .article-full-image,
    html body.site.view-article figure.article-full-image,
    html body.site.view-article .item-image.article-full-image {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    html body.site.view-article .article-full-image img {
        border-radius: 8px !important;
    }

    html body.site.view-article .jn-article-inline-donation {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 14px;
        margin-top: 30px;
        padding: 18px;
    }

    html body.site.view-article .jn-article-inline-donation img {
        width: 72px !important;
        height: 58px !important;
    }

    html body.site.view-article .jn-article-inline-donation__text strong {
        font-size: 16px;
    }

    html body.site.view-article .jn-article-inline-donation__text small {
        font-size: 13px;
        line-height: 1.45;
    }

    html body.site.view-article .jn-article-inline-donation > b {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }
}