/* ==================================================================
   Mars Feature Layout
   Everything is scoped under .mars-feature so it won't touch the rest
   of the site. Change the brand colors/fonts in the block below, or
   override them from Appearance > Customize > Additional CSS, e.g.:
     .mars-feature { --mf-accent: #c8102e; }
   ================================================================== */

.mars-feature {
	/* ---- Brand tokens: Mars Roofing palette ---- */
	--mf-ink:       #292D32;  /* Charcoal: headings + body text */
	--mf-ink-soft:  #60676D;  /* Slate Gray: subhead, captions, byline */
	--mf-accent:    #9E2A2B;  /* Mars Red: category labels, links, quote marks */
	--mf-gold:      #B58A3A;  /* Heritage Gold: accent lines */
	--mf-rule:      #DCD8D0;  /* hairlines (a shade darker than Stone #E8E5DF) */
	--mf-paper:     #F8F7F4;  /* Warm White page background */

	/* ---- Measure ---- */
	--mf-col:   680px;   /* reading column */
	--mf-wide:  1080px;  /* lead + wide images */
	--mf-gutter: 20px;

	/* ---- Type ---- */
	--mf-display: "Playfair Display", Georgia, serif;
	--mf-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
	--mf-label:   "Inter", system-ui, -apple-system, sans-serif;

	/* Break out of whatever boxed/narrow container the theme wraps us in */
	display: block;
	position: relative;
	width: 100vw;
	max-width: 100vw;
	flex: 0 0 auto;
	float: none;
	margin: 0 calc(50% - 50vw);
	padding: 0 0 48px;
	background: var(--mf-paper);
	color: var(--mf-ink);
	font-family: var(--mf-body);
	font-size: 20px;
	line-height: 1.65;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
}
/* Stop the 100vw breakout from causing a sideways scrollbar */
html body.mars-feature-layout { overflow-x: clip; }

/* Neutralize theme "card" styling on the article (Astra, OceanWP, GeneratePress, etc.) */
body.mars-feature-layout .mars-feature .mf-article {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.mars-feature *,
.mars-feature *::before,
.mars-feature *::after { box-sizing: border-box; }
.mars-feature img { max-width: 100%; height: auto; display: block; box-shadow: none; border-radius: 0; }
body.mars-feature-layout .mars-feature figure,
body.mars-feature-layout .mars-feature .wp-block-image {
	box-shadow: none !important;
	background: none !important;
	border-radius: 0 !important;
}

/* Shared column widths */
.mars-feature .mf-story,
.mars-feature .mf-author-note,
.mars-feature .mf-comments {
	max-width: var(--mf-col);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mf-gutter);
	padding-right: var(--mf-gutter);
}

/* ---------------- Headline block ---------------- */
.mars-feature .mf-head {
	max-width: 960px;
	margin: 0 auto;
	padding: 72px var(--mf-gutter) 36px;
	text-align: center;
}
.mars-feature .mf-kicker {
	margin: 0 0 18px;
	font-family: var(--mf-label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.mars-feature .mf-kicker a { color: var(--mf-accent); text-decoration: none; }
.mars-feature .mf-title {
	margin: 0 auto 22px;
	max-width: 900px;
	font-family: var(--mf-display);
	font-weight: 800;
	font-size: clamp(38px, 6.5vw, 72px);
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--mf-ink);
	text-transform: none;
	text-wrap: balance;
}
.mars-feature .mf-dek {
	margin: 0 auto 30px;
	max-width: var(--mf-col);
	font-family: var(--mf-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(19px, 2.2vw, 23px);
	line-height: 1.45;
	color: var(--mf-ink-soft);
	text-wrap: balance;
}
.mars-feature .mf-byline {
	display: inline-block;
	padding: 10px 4px;
	border-top: 1px solid var(--mf-gold);
	border-bottom: 1px solid var(--mf-gold);
	font-family: var(--mf-label);
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mf-ink-soft);
}
.mars-feature .mf-byline strong { color: var(--mf-ink); font-weight: 600; }
.mars-feature .mf-dot { margin: 0 10px; }

/* ---------------- Lead image ---------------- */
.mars-feature .mf-lead {
	max-width: var(--mf-wide);
	margin: 8px auto 64px;
	padding: 0 var(--mf-gutter);
}
.mars-feature .mf-lead img { width: 100%; }

/* ---------------- Captions (lead + block editor) ---------------- */
.mars-feature figcaption,
.mars-feature .wp-element-caption {
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--mf-rule);
	font-family: var(--mf-body);
	font-size: 15px;
	font-style: normal;
	line-height: 1.5;
	text-align: left;
	color: var(--mf-ink-soft);
}

/* ---------------- Body copy ---------------- */
.mars-feature .mf-story > * { margin-top: 0; margin-bottom: 1.25em; }
.mars-feature .mf-story p {
	font-family: var(--mf-body);
	font-size: 1em;
	line-height: 1.65;
	color: var(--mf-ink);
	hyphens: auto;
}
/* Drop cap on the first paragraph (or any paragraph with the editor's Drop Cap toggle) */
.mars-feature .mf-story > p:first-of-type::first-letter,
.mars-feature .mf-story p.has-drop-cap:not(:focus)::first-letter {
	float: left;
	margin: 0;
	padding: .06em .09em 0 0;
	font-family: var(--mf-display);
	font-weight: 800;
	font-size: 5.2em;
	line-height: .82;
	font-style: normal;
	text-transform: none;
	color: var(--mf-ink);
}
.mars-feature .mf-story > p:last-of-type::after {
	content: "";
	display: inline-block;
	width: .6em;
	height: .6em;
	margin-left: 6px;
	background: var(--mf-ink);
}
.mars-feature .mf-story h2,
.mars-feature .mf-story h3 {
	margin: 2.2em 0 .7em;
	font-family: var(--mf-display);
	font-weight: 600;
	line-height: 1.2;
	color: var(--mf-ink);
	text-transform: none;
	letter-spacing: 0;
}
.mars-feature .mf-story h2 { font-size: 30px; }
.mars-feature .mf-story h3 { font-size: 24px; }
.mars-feature .mf-story a {
	color: var(--mf-accent);
	text-decoration: underline;
	text-decoration-color: var(--mf-accent);
	text-underline-offset: 3px;
}
.mars-feature .mf-story ul,
.mars-feature .mf-story ol { padding-left: 1.3em; }
.mars-feature .mf-story li { margin-bottom: .4em; }

/* ---------------- Images ---------------- */
.mars-feature .mf-story .wp-block-image,
.mars-feature .mf-story figure { margin-top: 56px; margin-bottom: 56px; }
.mars-feature .mf-story .wp-block-image img { width: 100%; }

/* Wide / Full width images break out of the reading column */
.mars-feature .mf-story .alignwide,
.mars-feature .mf-story .alignfull {
	width: calc(min(var(--mf-wide), 100vw) - 2 * var(--mf-gutter));
	max-width: none;
	margin-left: calc(50% - (min(var(--mf-wide), 100vw) - 2 * var(--mf-gutter)) / 2);
	margin-right: 0;
}
.mars-feature .mf-story .alignleft {
	float: left;
	max-width: 50%;
	margin: .3em 1.5em 1em 0;
}
.mars-feature .mf-story .alignright {
	float: right;
	max-width: 50%;
	margin: .3em 0 1em 1.5em;
}
.mars-feature .mf-story .aligncenter { margin-left: auto; margin-right: auto; }

/* ---------------- Pull quote (Pullquote block) ---------------- */
.mars-feature .mf-story .wp-block-pullquote {
	margin: 56px 0;
	padding: 28px 0;
	border: 0;
	border-top: 2px solid var(--mf-gold);
	border-bottom: 1px solid var(--mf-rule);
	background: none;
	box-shadow: none;
	text-align: center;
	color: var(--mf-ink);
}
.mars-feature .mf-story .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.mars-feature .mf-story .wp-block-pullquote blockquote::before,
.mars-feature .mf-story .wp-block-pullquote blockquote::after { content: none; }
.mars-feature .mf-story .wp-block-pullquote p {
	margin: 0;
	font-family: var(--mf-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(26px, 3.4vw, 34px);
	line-height: 1.3;
	text-wrap: balance;
}
.mars-feature .mf-story .wp-block-pullquote p::before { content: "\201C"; color: var(--mf-accent); }
.mars-feature .mf-story .wp-block-pullquote p::after  { content: "\201D"; color: var(--mf-accent); }
.mars-feature .mf-story .wp-block-pullquote cite {
	display: block;
	margin-top: 14px;
	font-family: var(--mf-label);
	font-style: normal;
	font-size: 12px;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--mf-ink-soft);
}

/* ---------------- Regular Quote block ---------------- */
.mars-feature .mf-story .wp-block-quote {
	margin: 40px 0;
	padding: 0 0 0 24px;
	border: 0;
	border-left: 3px solid var(--mf-gold);
	background: none;
	font-style: italic;
}
.mars-feature .mf-story .wp-block-quote::before { content: none; }
.mars-feature .mf-story .wp-block-quote cite {
	font-family: var(--mf-label);
	font-style: normal;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mf-ink-soft);
}

/* ---------------- Separator block → * * * ---------------- */
.mars-feature .mf-story hr,
.mars-feature .mf-story .wp-block-separator {
	height: auto;
	width: auto;
	max-width: none;
	margin: 56px 0;
	border: 0;
	background: none;
	text-align: center;
	color: var(--mf-ink-soft);
	overflow: visible;
	opacity: 1;
}
.mars-feature .mf-story hr::after,
.mars-feature .mf-story .wp-block-separator::after {
	content: "*  *  *";
	white-space: pre;
	font-family: var(--mf-body);
	font-size: 18px;
	letter-spacing: .5em;
}

/* ---------------- Author note + comments ---------------- */
.mars-feature .mf-author-note {
	margin-top: 64px;
	padding-top: 20px;
	border-top: 1px solid var(--mf-rule);
	font-size: 16px;
	font-style: italic;
	color: var(--mf-ink-soft);
}
.mars-feature .mf-author-note p { margin: 0 0 .6em; }
.mars-feature .mf-comments { margin-top: 48px; font-size: 17px; }

/* ---------------- Mobile ---------------- */
@media (max-width: 640px) {
	.mars-feature { font-size: 18px; }
	.mars-feature .mf-head { padding-top: 44px; }
	.mars-feature .mf-dot { margin: 0 6px; }
	.mars-feature .mf-lead { margin-bottom: 44px; }
	.mars-feature .mf-story .wp-block-image,
	.mars-feature .mf-story figure,
	.mars-feature .mf-story .wp-block-pullquote { margin-top: 40px; margin-bottom: 40px; }
	.mars-feature .mf-story h2 { font-size: 25px; }
	.mars-feature .mf-story .alignleft,
	.mars-feature .mf-story .alignright { float: none; max-width: 100%; margin: 32px 0; }
}

/* ==================================================================
   Blog listing (one column)
   ================================================================== */
.mars-feature.mf-list { padding-bottom: 72px; }

.mars-feature .mf-list-head {
	max-width: var(--mf-col);
	margin: 0 auto;
	padding: 64px var(--mf-gutter) 8px;
	text-align: center;
}
.mars-feature .mf-list-title {
	margin: 0 0 14px;
	padding-bottom: 18px;
	border-bottom: 2px solid var(--mf-gold);
	font-family: var(--mf-display);
	font-weight: 800;
	font-size: clamp(40px, 6vw, 64px);
	line-height: 1.05;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--mf-ink);
}
.mars-feature .mf-list-head .mf-dek { margin-bottom: 0; }

.mars-feature .mf-river {
	max-width: var(--mf-col);
	margin: 0 auto;
	padding: 0 var(--mf-gutter);
}

.mars-feature .mf-item {
	margin: 0;
	padding: 44px 0;
	border-bottom: 1px solid var(--mf-rule);
	background: none;
	box-shadow: none;
}
.mars-feature .mf-item:last-of-type { border-bottom: 0; }

.mars-feature .mf-item-photo { display: block; margin: 0 0 22px; }
.mars-feature .mf-item-photo img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: opacity .2s ease;
}
.mars-feature .mf-item-photo:hover img { opacity: .9; }

.mars-feature .mf-item .mf-kicker { margin-bottom: 10px; }

.mars-feature .mf-item-title {
	margin: 0 0 12px;
	font-family: var(--mf-display);
	font-weight: 800;
	font-size: clamp(26px, 3.4vw, 34px);
	line-height: 1.15;
	letter-spacing: -.005em;
	text-transform: none;
	text-wrap: balance;
}
.mars-feature .mf-item-title a { color: var(--mf-ink); text-decoration: none; }
.mars-feature .mf-item-title a:hover { text-decoration: underline; text-decoration-color: var(--mf-accent); text-underline-offset: 4px; }

.mars-feature .mf-item-dek {
	margin: 0 0 16px;
	font-family: var(--mf-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--mf-ink-soft);
}

.mars-feature .mf-item-meta {
	font-family: var(--mf-label);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mf-ink-soft);
}
.mars-feature .mf-item-meta strong { color: var(--mf-ink); font-weight: 600; }

/* Lead story: wider photo, bigger headline, centered */
.mars-feature .mf-item--lead { text-align: center; padding-top: 36px; }
.mars-feature .mf-item--lead .mf-item-photo {
	width: calc(min(var(--mf-wide), 100vw) - 2 * var(--mf-gutter));
	margin-left: calc(50% - (min(var(--mf-wide), 100vw) - 2 * var(--mf-gutter)) / 2);
	margin-bottom: 28px;
}
.mars-feature .mf-item--lead .mf-item-photo img { aspect-ratio: 16 / 9; }
.mars-feature .mf-item--lead .mf-item-title { font-size: clamp(32px, 5vw, 48px); line-height: 1.08; }
.mars-feature .mf-item--lead .mf-item-dek {
	font-family: var(--mf-display);
	font-style: italic;
	font-size: clamp(18px, 2vw, 21px);
}

/* Pagination */
.mars-feature .mf-pagination { margin-top: 40px; text-align: center; }
.mars-feature .mf-pagination .nav-links {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
	font-family: var(--mf-label); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.mars-feature .mf-pagination .page-numbers {
	padding: 8px 12px; border: 1px solid var(--mf-rule); color: var(--mf-ink); text-decoration: none; background: none;
}
.mars-feature .mf-pagination .page-numbers.current { background: var(--mf-ink); border-color: var(--mf-ink); color: #fff; }
.mars-feature .mf-pagination .screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.mars-feature .mf-empty { text-align: center; padding: 48px 0; color: var(--mf-ink-soft); }

@media (max-width: 640px) {
	.mars-feature .mf-list-head { padding-top: 40px; }
	.mars-feature .mf-item { padding: 32px 0; }
	.mars-feature .mf-item-dek { font-size: 17px; }
}