/* Fullwidth Template – Special Article (full-bleed hero, centered headline, no right rail)
   Desktop only: no styles apply below 768px so mobile matches main branch default article 1:1.
   Uses default article template structure (.post-image-block, .title-area, etc.). */

/* Scoped: only special article – remove theme box-shadow and zero container padding on smaller viewports */
body.rns-special-article .article--special .primary-content > div {
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

/* Remove theme box-shadow from all these elements on special article page only */
body.rns-special-article .post-inner {
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

@media (max-width: 991.98px) {
	body.rns-special-article .block-row.article--special.rns-container-fluid {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: 768px) {

/* Ensure the special template doesn't inherit two-column expectations */
body.rns-special-article .article--special .primary-content {
    width: 100%;
    flex: 1 1 auto;
}

/*
  Center the content column horizontally.
  The base theme adds `margin-right` to `.article-content-block` to make room for the sidebar.
  When the sidebar is removed, that margin makes the column look offset.
*/
body.rns-special-article .block-row.article--special {
    justify-content: center;
}

body.rns-special-article .article--special .article-content-block {
    margin-right: 0;
}

/* Give text comfortable gutters while keeping the page wide */
body.rns-special-article .article--special .content-block {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background: #ffffff;
}

/* Constrain readable text width, while hero stays full-bleed (wider for special article) */
body.rns-special-article .article--special article.post {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* Reorder entry-header so image appears first (hero), then caption, then title block */
body.rns-special-article .article--special .entry-header {
    display: flex;
    flex-direction: column;
}
body.rns-special-article .article--special .entry-header .post-image-block {
    order: -1;
}
body.rns-special-article .article--special .entry-header .image-caption {
    order: 0;
}
body.rns-special-article .article--special .entry-header .title-indicator-wrapper {
    order: 1;
}
body.rns-special-article .article--special .entry-header .post-info-block {
    order: 2;
}

/* Full-bleed hero image (default template uses .post-image-block) */
body.rns-special-article .article--special .post-image-block {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    margin-top: -50px;
    margin-bottom: 0;
}

body.rns-special-article .article--special .post-image-block .post-thumbnail img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: cover;
}

/* [fullbleed_image] shortcode – 100 vw, 21:9 aspect ratio */
body.rns-special-article .rns-fullbleed-image {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    margin-top: 2rem;
    aspect-ratio: 21 / 9;
    overflow: hidden;
}

body.rns-special-article .rns-fullbleed-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    inset: 0;
}

/* In-content captions (e.g. [fullbleed_image], wp-caption) — left-aligned; overrides special-article center + style-rns .caption { margin: auto } */
body.rns-special-article .article--special .entry-content .image-caption,
body.rns-special-article .article--special .entry-content .wp-caption-text {
    margin: 0 0 2rem;
    max-width: 1100px;
    color: #6a5e5e;
    text-align: left;
}

body.rns-special-article .article--special .entry-content .caption {
    margin-left: 0;
    margin-right: 0;
}

/* Center headline + excerpt (default template uses .title-indicator-wrapper, .title-area) */
body.rns-special-article .article--special .title-indicator-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 10px;
}

body.rns-special-article .article--special .title-area {
    text-align: center;
}

body.rns-special-article .article--special .post-title.headline-1 {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1.1;
    margin-top: 0.75rem;
    margin-bottom: 1rem;
}

body.rns-special-article .article--special .post-excerpt-block.excerpt-2 {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* Center tag indicator when present */
body.rns-special-article .article--special .tag-indicator-wrapper {
    justify-content: center;
    margin-top: 0;
}

/*
 * Byline + share row: same 980px column as .entry-content (centered).
 * Previously this row was full width of article.post (max 1100px) while body
 * copy was a narrower centered column, so the author sat left of the paragraphs.
 */
body.rns-special-article .article--special .post-info-block {
    max-width: 980px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    justify-content: space-between;
}

body.rns-special-article .article--special .post-info-block.after-article {
    justify-content: flex-end;
}

body.rns-special-article .article--special .post-info-block .byline-1 {
    justify-content: flex-start;
    text-align: left;
    flex-wrap: wrap;
    padding-left: 0;
}

} /* @media (min-width: 768px) */

/*
 * Mobile only: fix grey area on left and center layout.
 * Cause: #page can be position:absolute on mobile (site-boxed--layout), and/or
 * asymmetric margins/padding elsewhere shift content right. Reset wrapper and
 * main block to full width, no horizontal offset, so content is centered.
 */
@media screen and (max-width: 767px) {
	body.rns-special-article #page {
		position: relative !important;
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}

	body.rns-special-article .block-row.article--special {
		width: 100%;
		max-width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-sizing: border-box;
		background-color: #ffffff;
	}

	body.rns-special-article .block-row.article--special.rns-container-fluid {
		padding-left: 0;
		padding-right: 0;
	}

	/* Same white on all layers so left padding matches article box (no off-white strip) */
	body.rns-special-article .article--special .article-content-block {
		background-color: #ffffff;
	}

	/*
	 * Prevent text clipping: use a single gutter on .content-block and
	 * remove inner horizontal padding so content uses full width minus gutter.
	 */
	body.rns-special-article .article--special .content-block {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		padding-left: 7px;
		padding-right: 7px;
		background-color: #ffffff;
	}

	body.rns-special-article .article--special .post-inner .entry-content,
	body.rns-special-article .article--special .post-inner header .post-title,
	body.rns-special-article .article--special .post-inner header .post-excerpt-block,
	body.rns-special-article .article--special .post-inner header div.image-caption,
	body.rns-special-article .article--special .post-inner .post-info-block {
		padding-left: 0;
		padding-right: 0;
	}

	body.rns-special-article .article--special .post-inner ul,
	body.rns-special-article .article--special .post-inner li,
	body.rns-special-article .article--special .post-inner ol {
		padding-left: 1rem;
		padding-right: 0;
	}

	body.rns-special-article .article--special .post-inner {
		padding-right: 0;
	}

	/* Keep media inside the viewport on small screens */
	body.rns-special-article .article--special .entry-content img {
		max-width: 100%;
		width: auto;
		height: auto;
		box-sizing: border-box;
	}

	body.rns-special-article .article--special .entry-content figure,
	body.rns-special-article .article--special .entry-content .wp-caption {
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	body.rns-special-article .article--special .entry-content iframe,
	body.rns-special-article .article--special .entry-content video {
		max-width: 100%;
		width: 100%;
	}
}

/* Only on special article template */
body.rns-special-article div#page {
	background: #ffffff;
}

body.rns-special-article .block.article-content-block.article.rns-section.leftc-rights-section {
	background: #ffffff;
} 

body.rns-special-article .social-icons-and-comment-btn {
    padding-right: 25px;
}

/* Featured image caption below hero — same 980px column and padding as in-body captions */
body.rns-special-article .article--special .entry-header > .image-caption {
    align-self: center;
    box-sizing: border-box;
    width: min(100%, 980px);
    max-width: 980px;
    margin: 0 auto 1rem;
    padding: 0.35rem 0 0;
    color: #6a5e5e;
    text-align: left;
}

/*
 * Readable column: center and cap at 980px (matches .post-info-block above).
 * Single posts have no #theme-content; pages may — use both selectors.
 * #theme-content .entry-content { max-width: 100% } (redesign.css) beats a lone
 * body.rns-special-article .entry-content without the ID in the selector chain.
 */
body.rns-special-article #theme-content .entry-content,
body.rns-special-article .article--special .entry-content {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    /* Block layout so floats wrap; overflow visible (matches video-themes.css, always loaded here). */
    display: block !important;
    overflow: visible !important;
}

body.rns-special-article .rns-openweb-inline-ad--hidden {
	display: none !important;
}

/* Open Web leaderboard banner (row 5 / column 5) between byline and body copy.
   Suppressed automatically when the post has an Everlit audio player: the banner
   would render directly above the player and create an empty 90px gap. */
body.rns-special-article .rns-special-article-banner-ad {
	max-width: 980px;
	margin: 1.5rem auto 2rem;
	text-align: center;
}

body.rns-special-article:has(.everlit-audio-embed) .rns-special-article-banner-ad {
	display: none !important;
}