/**
 * RSBlog! Blog Pack (InfiNet) — portable blog display styles.
 * Loaded site-wide on the front-end by plg_system_rsblogblog. All selectors are
 * scoped under .rsblog-* so they are inert on non-blog pages.
 */

/* ── RSBlog blog toolbar — polished header card with logged-in user info,
 *    branded icon buttons, and the login/logout as the filled "head" action. ── */
.rsblog-main-container .card.mb-5 {
    border: 1px solid #e9ecef !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .07) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%) !important;
    overflow: hidden;
}
.rsblog-main-container .card.mb-5 > .card-body { padding: .85rem 1.25rem !important; }

/* Logged-in user info (avatar + greeting) / logged-out blog tag */
.rsblog-main-container .rsb-userbar { display: flex; align-items: center; gap: .65rem; }
.rsblog-main-container .rsb-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #00bbff, #0067ff); color: #fff;
    font-weight: 700; font-size: 1.05rem; box-shadow: 0 3px 8px rgba(0, 103, 255, .35);
}
.rsblog-main-container .rsb-greeting { color: #333; font-size: 1rem; }
.rsblog-main-container .rsb-greeting strong { color: #0067ff; }
.rsblog-main-container .rsb-blogtag {
    color: #8a93a0; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; font-size: .85rem;
}

/* Icon toolbar — circular branded buttons that lift on hover */
.rsblog-main-container .card.mb-5 ul.list-inline {
    margin: 0; display: flex; justify-content: flex-end; align-items: center;
}
.rsblog-main-container .card.mb-5 .list-inline-item { margin: 0 4px; }
.rsblog-main-container .card.mb-5 .list-inline-item > a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    color: #5a6573; background: #eef1f4; text-decoration: none;
    transition: all .18s ease;
}
.rsblog-main-container .card.mb-5 .list-inline-item > a:hover {
    color: #fff; background: linear-gradient(135deg, #00bbff, #0067ff);
    transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0, 103, 255, .35);
}
/* (Login/logout previously got a filled brand-blue "head action" button; removed so
   every toolbar icon shares the same gray pill + blue-on-hover treatment — uniform.) */

/* Breathing room at the top of the blog content (between the banner and the toolbar) */
.rsblog-main-container { padding-top: 1.5rem; }
.rsblog-main-post-container { padding-top: 1.5rem; }

/* Post titles render as <h1> — dial them down a touch on the list */
.rsblog-main-container .rsblog-entry-title { font-size: 1.8rem !important; line-height: 1.25 !important; }

/* ── Consistent blog title treatment everywhere (listing, single post, sidebar):
 *    same heading font, same brand-navy colour, same weight; only the size scales
 *    by context. Hover goes to the brand blue. ── */
.rsblog-main-container .rsblog-entry-title,
.rsblog-main-container .rsblog-entry-title a,
.rsblog-main-container .rsblog-entry-title a span,
.rsblog-main-post-container .rsblog-entry-title,
.rsblog-main-post-container .rsblog-entry-title a,
.rsblog-main-post-container .rsblog-entry-title a span,
.rsblog-recent .rsblog-recent-title {
    font-family: 'Arial', sans-serif;
    color: #2b3a67;
    font-weight: 700;
    text-decoration: none;
}
.rsblog-main-container .rsblog-entry-title a:hover,
.rsblog-main-container .rsblog-entry-title a:hover span,
.rsblog-main-post-container .rsblog-entry-title a:hover,
.rsblog-recent .rsblog-recent-title:hover {
    color: #0067ff;
    text-decoration: none;
}

/* ── Category navigation: pill links under the toolbar so visitors can browse
 *    posts by category (All / blog tag / category names …). ── */
.rsblog-catnav {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: 0 0 1.75rem; padding: 0;
}
.rsblog-catnav .rsblog-cat {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .9rem; border-radius: 999px;
    background: #eef1f4; color: #44505f; text-decoration: none;
    font-size: .9rem; font-weight: 600; transition: all .15s ease;
}
.rsblog-catnav .rsblog-cat:hover { background: #dfe6ee; color: #0067ff; }
.rsblog-catnav .rsblog-cat.active {
    background: linear-gradient(135deg, #00bbff, #0067ff); color: #fff;
    box-shadow: 0 3px 8px rgba(0, 103, 255, .3);
}
.rsblog-catnav .rsblog-cat-count {
    font-size: .75rem; background: rgba(0, 0, 0, .08); color: inherit;
    border-radius: 999px; padding: 0 .45rem; line-height: 1.6;
}
.rsblog-catnav .rsblog-cat.active .rsblog-cat-count { background: rgba(255, 255, 255, .25); }

/* Category nav placed INSIDE the toolbar card — centered, with a divider above */
.rsblog-catnav-toolbar {
    justify-content: center;
    margin: .85rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid #e9ecef;
}

/* ── Recent Posts sidebar (mod_rsblog_recent): compact, single-spaced list of the
 *    latest posts — title + date + short preview, each linking to its post page. ── */
.rsblog-recent { margin: 0; padding: 0; list-style: none; }
.rsblog-recent .rsblog-recent-item {
    padding: .55rem 0;
    border-bottom: 1px solid #e9ecef;
}
.rsblog-recent .rsblog-recent-item:first-child { padding-top: 0; }
.rsblog-recent .rsblog-recent-item:last-child { padding-bottom: 0; border-bottom: 0; }
.rsblog-recent .rsblog-recent-title {
    display: block;
    padding: 0;
    color: #2b3a67;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.25;
    text-decoration: none;
}
.rsblog-recent .rsblog-recent-title:hover { color: #0067ff; text-decoration: underline; }
.rsblog-recent .rsblog-recent-date {
    display: block;
    margin-top: .1rem;
    font-size: .7rem;
    color: #98a2b3;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.rsblog-recent .rsblog-recent-preview {
    margin: .2rem 0 0;
    font-size: .8rem;
    line-height: 1.3;
    color: #6c757d;
}

/* Back-to-blog link on single post pages */
.rsblog-back { margin: 1.75rem 0 1rem; font-size: .9rem; font-weight: 600; }
.rsblog-back a { color: #0067ff; text-decoration: none; }
.rsblog-back a:hover { text-decoration: underline; }
.rsblog-back .fa { margin-right: .35rem; }

/* Offset the smooth-scroll target so a post isn't hidden under an overlay header. */
article.rsblog-post[id^="rsblog-post-"] { scroll-margin-top: 130px; }
html { scroll-behavior: smooth; }

/* ── Variant: Compact list (rsblog-variant-list) ───────────────────────────── */
.rsblog-compact-list { display: flex; flex-direction: column; gap: 1rem; }
.rsblog-compact-item {
    display: flex; gap: 1rem; align-items: flex-start;
    padding-bottom: 1rem; border-bottom: 1px solid #e9ecef;
}
.rsblog-compact-item:last-child { border-bottom: 0; }
.rsblog-compact-thumb { flex: 0 0 140px; }
.rsblog-compact-thumb img { width: 140px; height: 94px; object-fit: cover; border-radius: 10px; }
.rsblog-compact-body { flex: 1 1 auto; min-width: 0; }
.rsblog-compact-body .rsblog-entry-title { font-size: 1.25rem !important; margin: 0 0 .25rem; }
.rsblog-compact-meta { font-size: .8rem; color: #6c757d; margin-bottom: .35rem; }
.rsblog-compact-meta a { color: #0067ff; text-decoration: none; }
.rsblog-compact-excerpt { margin: 0 0 .35rem; color: #44505f; font-size: .92rem; line-height: 1.45; }
.rsblog-compact-more { font-size: .85rem; font-weight: 600; color: #0067ff; text-decoration: none; }
.rsblog-compact-more:hover { text-decoration: underline; }
@media (max-width: 575px) {
    .rsblog-compact-item { flex-direction: column; }
    .rsblog-compact-thumb, .rsblog-compact-thumb img { width: 100%; flex-basis: auto; height: auto; }
}

/* ── Variant: Magazine (rsblog-variant-mag) ────────────────────────────────── */
.rsblog-mag-featured {
    display: flex; gap: 1.5rem; align-items: stretch; margin-bottom: 1.75rem;
    background: #fff; border: 1px solid #e9ecef; border-radius: 14px; overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .07);
}
.rsblog-mag-featured-thumb { flex: 0 0 46%; display: block; }
.rsblog-mag-featured-thumb img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.rsblog-mag-featured-body { flex: 1 1 auto; padding: 1.5rem 1.75rem; align-self: center; }
.rsblog-mag-badge {
    display: inline-block; background: linear-gradient(135deg, #00bbff, #0067ff); color: #fff;
    font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: .2rem .6rem; border-radius: 999px; margin-bottom: .6rem;
}
.rsblog-mag-featured-body .rsblog-entry-title { font-size: 2rem !important; line-height: 1.2; margin: 0 0 .5rem; }
.rsblog-mag-featured-meta { font-size: .85rem; color: #6c757d; margin-bottom: .6rem; }
.rsblog-mag-featured-excerpt { color: #44505f; line-height: 1.5; margin-bottom: 1rem; }

.rsblog-mag-card {
    background: #fff; border: 1px solid #e9ecef; border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column; height: 100%;
    transition: box-shadow .18s ease, transform .18s ease;
}
.rsblog-mag-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.rsblog-mag-thumb { display: block; aspect-ratio: 16 / 9; background: #eef1f4; }
.rsblog-mag-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rsblog-mag-noimg { display: flex; align-items: center; justify-content: center; height: 100%; color: #b6c0cc; font-size: 2rem; }
.rsblog-mag-body { padding: 1rem 1.1rem 1.25rem; }
.rsblog-mag-body .rsblog-entry-title { font-size: 1.15rem !important; margin: 0 0 .3rem; }
.rsblog-mag-meta { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: .4rem; }
.rsblog-mag-excerpt { font-size: .88rem; color: #6c757d; line-height: 1.4; margin: 0; }
@media (max-width: 767px) {
    .rsblog-mag-featured { flex-direction: column; }
    .rsblog-mag-featured-thumb { flex-basis: auto; }
    .rsblog-mag-featured-thumb img { min-height: 200px; }
}

/* ── Variant: Recent-entries sidebar (rsblog-variant-side) ─────────────────── */
/* Normal static box — not pinned to the top of the page, and no scrollbar when
   the list is short. (Was position:sticky+top, which kept it stuck at the top
   while the post list scrolled past it.) */
.rsblog-side .card-body { padding: 1.1rem 1.25rem; }
.rsblog-side-title {
    font-size: 1.05rem; font-weight: 700; color: #2b3a67;
    margin: 0 0 .75rem; padding-bottom: .5rem; border-bottom: 2px solid #0067ff;
}

/* ── Optional hero banner (rsblog-hero) — full-width row, flush under the header,
 *    like the site's other page headers. Breaks out of the component column. ── */
.rsblog-hero {
    display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    text-align: center; overflow: hidden;
    /* flush: cancel the container's top padding so it sits under the menu */
    margin-top: -1.5rem;
    margin-bottom: 2rem;
    padding: 3.25rem 1.5rem;
    border-radius: 0;
}
/* (Hero pages also drop Helix's 100px #sp-main-body top padding via an inline
 *  style emitted by hero.php, so only hero pages are affected — no flash.) */
/* Avoid a horizontal scrollbar from the full-bleed row. */
body.com_rsblog { overflow-x: hidden; }
.rsblog-hero-plain { background-color: #550e5a; }
/* 'Contained' width: stay inside the content column with normal spacing + rounded corners. */
.rsblog-hero-contained {
    margin-left: 0; margin-right: 0; margin-top: 0;
    border-radius: 12px;
}
.rsblog-hero-inner { max-width: 760px; }
.rsblog-hero-title {
    color: #fff !important; font-weight: 800; margin: 0;
    font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.rsblog-hero-sub {
    color: rgba(255, 255, 255, .92); margin: .6rem 0 0;
    font-size: 1.1rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

/* ── Hero with a looping background <video> (set the "Hero video" param). Reuses
 *    .rsblog-hero-title above; a dim overlay keeps the title readable over any
 *    footage. Self-contained — no external asset/font required. ── */
.rsblog-hero.rsblog-hero-video { position: relative; }
.rsblog-hero.rsblog-hero-video .rsblog-hero-video-bg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%; width: auto; height: auto;
    object-fit: cover; z-index: 0; pointer-events: none;
}
.rsblog-hero.rsblog-hero-video::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: rgba(0, 0, 0, .35);
}
.rsblog-hero.rsblog-hero-video .rsblog-hero-inner { position: relative; z-index: 1; }

/* ── Blog toolbar: search box (listing) / "Back to Blog" link (single post) ── */
.rsb-blog-search { max-width: 460px; margin: 0; }
.rsb-back-to-blog { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.rsb-back-to-blog:hover { text-decoration: underline; }

/* ── "No results" notice (e.g. a search with no matches) ── */
.rsblog-no-results { padding: 32px 0; color: #555; font-size: 1.05rem; }
.rsblog-no-results p { margin: 0 0 16px; }

/* ── Search-results summary (active search WITH matches): count + "clear" link ── */
.rsblog-search-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 24px; padding: 12px 16px; background: #f4f7fb; border: 1px solid #e3e9f2; border-left: 3px solid #0067ff; border-radius: 6px; font-size: 1rem; color: #333; }
.rsblog-search-summary-text strong { color: #111; }
.rsblog-search-clear { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: #0067ff; }
.rsblog-search-clear:hover { text-decoration: underline; }

/* Blog page background: intentionally not set by the pack — the blog inherits the
   site's own body/#sp-main-body background. (A site can still set a page_bg image
   via the menu/plugin param.) */

/* ── Un-hide the blog Edit link. Many templates (e.g. Helix custom.css) hide Joomla's
   front-end edit pencils with a rule that includes the generic `.edit-icon`
   (`.edit-icon { display:none !important }`), which also catches RSBlog's own
   <li class="edit-icon"> Edit link in the post-action gear. Re-show ONLY the RSBlog
   one (higher specificity + !important beats the template rule). DO NOT REMOVE — the
   build refuses to package without it; see scratch/rsblogblog/build.php. */
.rsblog-post-actions .edit-icon,
ul.dropdown-menu.actions li.edit-icon {
    display: list-item !important;
}

/* Breathing room above the front-end submit/edit form toolbar (Save/Cancel) so it
   does not crowd the page banner. */
/* 1.5rem so a rendered hero's -1.5rem top margin cancels it flush; when no hero
   shows, this is just a modest gap above the Save/Cancel toolbar. */
body.view-form .edit.item-page { padding-top: 1.5rem; }

/* ── moderngrid: configurable cards per row (2/3/4) + sidebar ────────────────
   Each card sits in a .rsblog-grid-col whose width is the Bootstrap column class
   (col-md-12/N) set by moderngrid.php from the grid_columns param, so the row
   count is responsive natively. .rsblog-grid-cols-{N} is a marker on the row.
   Cards stretch to equal height within their row; collapse to one per row on phones. */
.rsblog-variant-grid .rsblog-grid { margin-bottom: .5rem; }
.rsblog-variant-grid .rsblog-grid > .rsblog-grid-col { display: flex; margin-bottom: 1.75rem; }
.rsblog-variant-grid .rsblog-grid > .rsblog-grid-col > .rsblog-post { width: 100%; display: flex; flex-direction: column; }
.rsblog-variant-grid .rsblog-entry-title { font-size: 1.4rem !important; }
/* Uniform card thumbnails: every featured image is the same 3:2 box, cropped to fill. */
.rsblog-variant-grid .rsblog-entry-image { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 6px; margin-bottom: 1rem; }
.rsblog-variant-grid .rsblog-entry-image > a { display: block; width: 100%; height: 100%; }
.rsblog-variant-grid .rsblog-entry-thumb { width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; border: 0 !important; }
@media (max-width: 767px) {
	.rsblog-variant-grid .rsblog-grid > .rsblog-grid-col { width: 100%; flex: 0 0 100%; max-width: 100%; }
}

/* Blog body uses the site's standard container width (no override) so it lines up
   with the header/nav and the rest of the site. The hero stays full-bleed. */

/* ── Categories sidebar (right_source = categories) ─────────────────────────── */
.rsblog-side-cats .rsblog-catlist { list-style: none; margin: 0; padding: 0; }
.rsblog-side-cats .rsblog-catlist-item { padding: .65rem 0; border-bottom: 1px solid #eee; }
.rsblog-side-cats .rsblog-catlist-item:last-child { border-bottom: 0; }
.rsblog-side-cats .rsblog-catlist-title { display: block; font-weight: 600; font-size: 1.05rem; }
.rsblog-side-cats .rsblog-catlist-count { display: block; color: #888; font-size: .85rem; margin: .1rem 0 .25rem; }
.rsblog-side-cats .rsblog-catlist-rss { font-size: .85rem; }
.rsblog-side-cats .rsblog-catlist-rss .fa { color: #f7941d; margin-right: .3rem; }

/* ── Most Popular sidebar (compact, under Recent) ───────────────────────────── */
.rsblog-side-popular .rsblog-popular { list-style: none; margin: 0; padding: 0; }
.rsblog-side-popular .rsblog-popular-item { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid #eee; }
.rsblog-side-popular .rsblog-popular-item:last-child { border-bottom: 0; }
.rsblog-side-popular .rsblog-popular-title { font-weight: 600; line-height: 1.25; }
.rsblog-side-popular .rsblog-popular-views { color: #888; font-size: .82rem; white-space: nowrap; }
.rsblog-side-popular .rsblog-popular-views .fa { color: #0067ff; margin-right: .25rem; }

/* ── Consistent card heights (moderngrid) ───────────────────────────────────
   Clamp the variable-length pieces (title 2 lines, excerpt 3 lines) and pin the
   Read More / footer to the bottom, so every card is the same height. */
.rsblog-variant-grid .rsblog-grid > .rsblog-grid-col > .rsblog-post > div { display: flex; flex-direction: column; height: 100%; }
.rsblog-variant-grid .rsblog-entry-title {
	display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; min-height: 3.5rem;
}
.rsblog-variant-grid .rsblog-entry-content { display: flex; flex-direction: column; flex: 1 1 auto; }
.rsblog-variant-grid .rsblog-entry-intro {
	display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
	overflow: hidden; min-height: 4.6rem; margin-bottom: 1rem;
}
.rsblog-variant-grid .rsblog-entry-more { margin-top: auto; align-self: flex-start; }

/* Small gap above the Most Popular sidebar block */
.rsblog-side-popular { margin-top: 1.5rem; }

/* ── Print: output only the blog content (strip site chrome) ─────────────────
   When printing a blog page, hide the template header/nav, hero, sidebar, footer,
   toolbar icons and action buttons so only the posts print, full width. */
@media print {
	body.view-posts #sp-header,   body.view-post #sp-header,
	body.view-posts #sp-top-bar,  body.view-post #sp-top-bar,
	body.view-posts #sp-bottom,   body.view-post #sp-bottom,
	body.view-posts #sp-footer,   body.view-post #sp-footer,
	body.view-posts .sticky-wrapper, body.view-post .sticky-wrapper,
	body.view-posts .rsblog-hero, body.view-post .rsblog-hero,
	body.view-posts .rsblog-rightcol,
	body.view-posts .rsblog-catnav,
	body.view-posts .rsblog-main-container .card.mb-5 ul.list-inline,
	body.view-posts .rsblog-post-actions, body.view-post .rsblog-post-actions,
	body.view-posts .rsblog-entry-more {
		display: none !important;
	}
	body.view-posts #sp-main-body, body.view-post #sp-main-body { background: #fff !important; }
	body.view-posts #sp-main-body > .container, body.view-post #sp-main-body > .container { max-width: 100% !important; }
	/* one post per row, full width, no card shadows when printing */
	body.view-posts .col-md-9, body.view-posts .rsblog-variant-grid .rsblog-grid > .rsblog-grid-col {
		flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
	}
	body.view-posts .rsblog-post, body.view-post .rsblog-post { box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
}

/* ── EasyBlog-migrated post content (ebd-block / eb-image) ───────────────────
   EasyBlog's own CSS is gone after the RSBlog migration, so its content blocks
   lost image sizing and float clearing (text ran over the images). Re-style:
   images size responsively; a floated image's following text block becomes a
   block-formatting context so it forms a clean column beside the image instead
   of overlapping it. */
.rsblog-entry-content .ebd-block { margin-bottom: 1rem; }
.rsblog-entry-content .eb-image img,
.rsblog-entry-content .eb-image-figure img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
.rsblog-entry-content .eb-image.align-left  { float: left;  clear: left;  width: 34%; margin: .25rem 1.5rem .5rem 0; }
.rsblog-entry-content .eb-image.align-right { float: right; clear: right; width: 34%; margin: .25rem 0 .5rem 1.5rem; }
.rsblog-entry-content .eb-image.align-center { float: none; clear: both; width: auto; margin: 1rem auto; text-align: center; }
.rsblog-entry-content .ebd-block[data-type="image"] + .ebd-block[data-type="text"] { overflow: hidden; }
.rsblog-entry-content::after { content: ""; display: block; clear: both; }
@media (max-width: 575px) {
	.rsblog-entry-content .eb-image.align-left,
	.rsblog-entry-content .eb-image.align-right { float: none; clear: both; width: 100%; margin: 0 0 1rem; }
}

/* Single blog post (article) title — dial down from the template's large h1. */
.rsblog-main-post-container .rsblog-entry-title { font-size: 1.85rem !important; line-height: 1.2 !important; }

/* ── Single-post hero (post's first image with the post title overlaid). ─────
   Height is driven inline by the Blog Pack "Hero height" param (shared with the
   blog list hero), so one setting controls both. */
.rsblog-post-hero {
	display: flex; align-items: flex-end;
	background-size: cover; background-position: center; background-repeat: no-repeat;
	border-radius: 10px; overflow: hidden; margin: 0 0 1.5rem;
}
.rsblog-post-hero-inner { width: 100%; padding: 1.5rem 2rem; }
.rsblog-post-hero-title {
	color: #fff !important; margin: 0; font-weight: 800;
	font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.15;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* ── Blog signup CTA (bottom of the blog list) — opens the native subscribe modal ── */
.rsblog-subscribe-cta {
	margin: 2.25rem 0 .5rem; padding: 2rem 1.5rem; text-align: center;
	border-radius: 14px; color: #fff;
	background: linear-gradient(135deg, #00bbff, #0067ff);
	box-shadow: 0 8px 24px rgba(0, 103, 255, .25);
}
.rsblog-subscribe-cta-title { color: #fff; margin: 0 0 .35rem; font-weight: 800; }
.rsblog-subscribe-cta-text { color: rgba(255, 255, 255, .92); margin: 0 auto 1rem; max-width: 620px; }
.rsblog-subscribe-cta-btn { background: #fff !important; color: #0067ff !important; border: 0 !important; font-weight: 700; padding: .6rem 1.4rem; }
.rsblog-subscribe-cta-btn:hover { background: #eef5ff !important; transform: translateY(-1px); }
.rsblog-subscribe-cta-btn .fa { margin-right: .4rem; }

/* Single-post hero width = Full (Blog Pack "Hero width" param). Default is contained
   (rounded, inside the container); full breaks out edge-to-edge like the list hero,
   with the title constrained to the site container so it aligns with the content. */
/* The single-post (entry) hero stays within the content container — square edges,
   full container width, no viewport breakout. (Earlier it broke out edge-to-edge,
   overflowing the contained article column on the details page.) */
.rsblog-post-hero-full {
	margin-bottom: 2rem;
	border-radius: 0;
}
.rsblog-post-hero-full .rsblog-post-hero-inner { max-width: 1320px; margin: 0 auto; }

/* The blog-LIST hero breaks out edge-to-edge on a fluid layout (matches the site's
   page headers); on a boxed layout / non-Helix template it falls back to contained. */
body.layout-fluid .rsblog-hero {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ── Subscribe popup (native Bootstrap modal, no iframe) ─────────────────────
   #rsbSubscribeModal is rendered by partials/subscribe_modal.php and driven by
   media/plg_system_rsblogblog/js/subscribe.js (AJAX → pack endpoint). The form uses
   stock Bootstrap classes; this just contains the width and tidies a few bits. */
.rsbsub-modal .rsbsub-dialog { max-width: 520px; }
.rsbsub-modal .modal-title { font-size: 1.15rem; font-weight: 600; }
.rsbsub-modal .rsbsub-alert[hidden] { display: none; }

/* ── Single-post article body — professional, readable defaults ──────────────
   Applies to EVERY post body. Layout is automatic by position so authors just
   insert images and write — no classes to learn, results stay consistent:
   a lead image opening a paragraph floats (text wraps); an image alone in its
   paragraph centers; wide images scale down; figures + pull-quotes are styled.
   Brand-neutral here (uses the pack accent); a site can recolour via its own
   template CSS without touching the pack. */
.rsblog-main-post-container .rsblog-entry-content { line-height: 1.8; }
.rsblog-main-post-container .rsblog-entry-content p { margin: 0 0 1.35em; }
.rsblog-main-post-container .rsblog-entry-content ul,
.rsblog-main-post-container .rsblog-entry-content ol { margin: 0 0 1.4em 1.4em; }
.rsblog-main-post-container .rsblog-entry-content li { margin-bottom: .4em; }
.rsblog-main-post-container .rsblog-entry-content h2,
.rsblog-main-post-container .rsblog-entry-content h3,
.rsblog-main-post-container .rsblog-entry-content h4 { clear: both; margin: 1.8em 0 .6em; line-height: 1.25; }

/* Images: responsive + polished. */
.rsblog-main-post-container .rsblog-entry-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* A) Lead image that opens a paragraph of text → float so the text wraps. */
.rsblog-main-post-container .rsblog-entry-content p > img:first-child:not(:only-child) {
	float: left; width: 300px; max-width: 42%;
	margin: .35em 1.75em 1em 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
/* B) Standalone images (alone in their paragraph, even wrapped in a/strong) → centered block. */
.rsblog-main-post-container .rsblog-entry-content p > img:only-child,
.rsblog-main-post-container .rsblog-entry-content p > a:only-child > img,
.rsblog-main-post-container .rsblog-entry-content p > strong:only-child > img,
.rsblog-main-post-container .rsblog-entry-content p > strong:only-child > strong:only-child > img {
	display: block; float: none; clear: both;
	margin: 1.8em auto; box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
/* Honor explicit alignment from the editor's align buttons, with consistent spacing. */
.rsblog-main-post-container .rsblog-entry-content img[style*="float: left"],
.rsblog-main-post-container .rsblog-entry-content img[style*="float:left"]  { margin: .35em 1.75em 1em 0 !important; }
.rsblog-main-post-container .rsblog-entry-content img[style*="float: right"],
.rsblog-main-post-container .rsblog-entry-content img[style*="float:right"] { margin: .35em 0 1em 1.75em !important; }
.rsblog-main-post-container .rsblog-entry-content img[style*="margin-left: auto"],
.rsblog-main-post-container .rsblog-entry-content img[style*="display: block"] { margin-top: 1.8em !important; margin-bottom: 1.8em !important; }

/* Figures + captions. */
.rsblog-main-post-container .rsblog-entry-content figure { clear: both; margin: 1.8em auto; text-align: center; }
.rsblog-main-post-container .rsblog-entry-content figure img { display: block; margin: 0 auto; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.rsblog-main-post-container .rsblog-entry-content figcaption { font-size: .9rem; color: #6a6a6a; font-style: italic; margin-top: .6em; }

/* Pull-quotes (brand-neutral — uses the pack accent). */
.rsblog-main-post-container .rsblog-entry-content blockquote {
	margin: 1.6em 0; padding: .8em 1.4em;
	border-left: 4px solid #0067ff; background: #f5f8ff;
	font-style: italic; color: #2b3a67; border-radius: 0 6px 6px 0;
}
.rsblog-main-post-container .rsblog-entry-content blockquote p:last-child { margin-bottom: 0; }

/* Mobile: stack lead images full-width, no float. */
@media (max-width: 600px) {
	.rsblog-main-post-container .rsblog-entry-content p > img:first-child:not(:only-child) {
		float: none; display: block; width: auto; max-width: 100%; margin: 1em auto;
	}
}