/* ==========================================================
   ### BLOG LAYOUT ###
   Full-width alternating article sections.
   Inner article content remains centred.
   ========================================================== */

.com-content-category-blog .blog-item {
    width: 100%;

    margin: 0;
    padding: 25px 0;

    border: 0;
}


/* --- Inner Blog Article Content --- */

.com-content-category-blog .blog-item .item-content {
    width: 100%;
    max-width: var(--content-max-width);

    margin: 0 auto;
    padding: 0;

    box-sizing: border-box;
}


/* --- Standard Blog Text Content --- */

.com-content-category-blog .item-content > p,
.com-content-category-blog .item-content > h1,
.com-content-category-blog .item-content > h2,
.com-content-category-blog .item-content > h3,
.com-content-category-blog .item-content > h4,
.com-content-category-blog .item-content > h5,
.com-content-category-blog .item-content > h6,
.com-content-category-blog .item-content > blockquote {
    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--content-padding);
    padding-right: var(--content-padding);

    box-sizing: border-box;
}


/* --- Standard Blog Lists --- */

.com-content-category-blog .item-content > ul,
.com-content-category-blog .item-content > ol {
    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: calc(var(--content-padding) + 1.5em);
    padding-right: var(--content-padding);

    box-sizing: border-box;
}


/* --- Leading Article --- */

.com-content-category-blog .items-leading .blog-item {
    background: var(--color-article-bg-1);
}


/* --- Following Articles --- */

.com-content-category-blog .blog-items .blog-item:nth-child(odd) {
    background: var(--color-article-bg-2);
}

.com-content-category-blog .blog-items .blog-item:nth-child(even) {
    background: var(--color-article-bg-3);
}


/* --- Mobile --- */

@media (max-width: 1199px) {

    .com-content-category-blog .blog-item {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* ==================== BLOG LAYOUT END ===================== */


/* ==========================================================
   ### ARTICLE CONTENT ###
   Single-article content width, text blocks, images and lists.
   ========================================================== */


/* ----------------------------------------------------------
   Content Sections
   Structural wrapper for controlled image floats.
   Uses the same readable width as normal article content.
   ---------------------------------------------------------- */

.u-ContentSection {
    display: flow-root;

    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}

.u-ContentSection > :first-child {
    margin-top: 0;
}
/* ----------------------------------------------------------
   Inner Text Spacing
   Applies standard horizontal content padding inside
   Float Sections.
   ---------------------------------------------------------- */
.u-ContentSection > p,
.u-ContentSection > h1,
.u-ContentSection > h2,
.u-ContentSection > h3,
.u-ContentSection > h4,
.u-ContentSection > h5,
.u-ContentSection > h6,
.u-ContentSection > blockquote {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);

    box-sizing: border-box;
}

/* ----------------------------------------------------------
   Content Section — stacked float
   When JS decides the floated image no longer has enough
   room, place the text first and the image underneath.
   ---------------------------------------------------------- */
/* Default no-float behaviour: image stays in source order,
   which normally means above the text. */

img.no-float {
    float: none !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}

.u-ContentSection.is-stacked {
    display: flex;
    flex-direction: column;
}

/* Default behaviour: image goes underneath */

.u-ContentSection.is-stacked > img.no-float:not(.stack-over),
.u-ContentSection.is-stacked > :has(img.no-float:not(.stack-over)) {
    order: 1;
    margin-top: 1rem;
}

/* ----------------------------------------------------------
   Joomla Main Content Grid
   ---------------------------------------------------------- */

.site-grid {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   Single Article Background
   ---------------------------------------------------------- */

.com-content-article {
    width: 100%;
    background: var(--color-content-bg);
    /* the actual body - Article background Color */
}

.com-content-article__body > :first-child {
    margin-top: 0;
}


/* ----------------------------------------------------------
   Single Article Inner Content
   ---------------------------------------------------------- */

.com-content-article__body {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}


/* --- Standard Article Text Content --- */

.com-content-article__body > p,
.com-content-article__body > h1,
.com-content-article__body > h2,
.com-content-article__body > h3,
.com-content-article__body > h4,
.com-content-article__body > h5,
.com-content-article__body > h6,
.com-content-article__body > blockquote {
    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--content-padding);
    padding-right: var(--content-padding);

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   Normal Article Images
   Ordinary article images fill the readable content width.
   Images inside Float Sections are handled separately.
   ---------------------------------------------------------- */

.com-content-article__body > img:not(.u-ImageSized),
.com-content-article__body > div:not(.u-ImageOverlay):not(.u-ContentSection) > img:not(.u-FullWidth):not(.u-ImageSized) {

    display: block;

    width: calc(100% - (2 * var(--content-padding)));
    max-width: var(--article-max-width);
    height: auto;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* ----------------------------------------------------------
   Sized Images
   Use the width specified in the image dialog.
   Shrink only if the available space becomes smaller.
   ---------------------------------------------------------- */

.com-content-article__body img.u-ImageSized {
    display: block;

    max-width: calc(100% - (2 * var(--content-padding)));
    height: auto;

    /* margin-left: auto;
    margin-right: auto; */
}

/* END Normal Article Images */
/* ----------------------------------------------------------
   Explicit Full-Width Images
   ---------------------------------------------------------- */

.com-content-article__body img.u-FullWidth {
    display: block;

    width: 100%;
    max-width: none;
    height: auto;

    margin: 0;
    padding: 0;
}


/* ----------------------------------------------------------
   Standard Article Lists
   ---------------------------------------------------------- */

.com-content-article__body > ul,
.com-content-article__body > ol {
    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: calc(var(--content-padding) + 1.5em);
    padding-right: var(--content-padding);

    box-sizing: border-box;
}

/* =================== ARTICLE CONTENT END ================== */

.container-top-a {
    width: 100%;
    background: var(--color-header-bg);
}

.container-top-a .mod-custom {
    max-width: 1600px;
    margin: 0 auto;
}

.container-top-a img {
    display: block;
    width: 100%;
    height: auto;
}