/* =================================================================
   55.Newspaper.css
   AI: Newspaper-style layout using CSS Grid for story placement.
   Each story is a grid item that can span multiple columns.
   Inside each story, column-count flows the text.
   ================================================================= */

/* The newspaper container */
.Newspaper {
	background: white;
	border: 1px solid gray;
	box-shadow: var(--DefaultBoxShadow);
	padding: 1.5em 2em;
	margin-top: 2em;
	font-family: "Times New Roman", serif;
	color: black;
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
}

/* Kill all site image styling inside newspaper */
.Newspaper img {
	border-radius: 0 !important;
	box-shadow: none !important;
	border: none !important;
	max-width: 100%;
}

	.Newspaper img.NewspaperFold {
		display: block;
		width: 100%;
		height: 10px;
		object-fit: fill;
	}

/* Masthead */
.Newspaper .Masthead {
	text-align: center;
	margin-bottom: 0.5em;
}

.Newspaper .Masthead img {
	max-width: 100%;
}

/* Main headline */
	.Newspaper h1 {
		font-family: Arial, Helvetica, sans-serif !important;
		font-size: clamp(2rem, 10vw, 4rem);
		text-align: center;
		transform-origin: left;
		line-height: 1.05;
		margin: 0.2em 0;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		border-bottom: 3px double black;
		padding-bottom: 0.3em;
		color: black;
		font-weight: bolder;
	}

/* Subhead */
.Newspaper .Subhead {
	font-family: "Times New Roman", serif;
	font-size: 1.1em;
	font-style: italic;
	text-align: center;
	margin-bottom: 0.5em;
	color: black;
}

/* Byline */
.Newspaper .Byline {
	font-style: italic;
	font-size: 0.85em;
	text-align: center;
	margin-bottom: 0.5em;
	border-bottom: 1px solid black;
	padding-bottom: 0.5em;
}

/* Dateline */
.Newspaper .Dateline {
	font-weight: bold;
	font-size: 0.9em;
	font-variant: small-caps;
}

/* Lead section — text left, photo right */
.Newspaper .LeadSection {
	display: flex;
	gap: 1.5em;
	margin-bottom: 0;
	padding-bottom: 1em;
}

.Newspaper .LeadText {
	flex: 1;
	font-size: 0.92em;
	line-height: 1.4;
	text-align: justify;
}

.Newspaper .LeadText p {
	margin-top: 0;
	margin-bottom: 0.5em;
	text-indent: 1.2em;
}

.Newspaper .LeadText p:last-child {
	margin-bottom: 0;
}

.Newspaper .LeadText p:first-child {
	text-indent: 0;
}

/* Lead section photo — flex child, don't squash */
.Newspaper .LeadSection > img {
	flex: 0 0 40%;
	width: 40%;
	height: auto;
	object-fit: contain;
	align-self: flex-start;
}

/* Fold image — subtle crease line between lead and stories */
.Newspaper .Fold {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 30px;
	margin: 1em -2em;
	padding: 0;
	object-fit: fill;
	pointer-events: none;
	background-image: url('/Design/Images/NewspaperFold.png');
	background-repeat: no-repeat;
	background-size: 100% 100%; /* stretch to fill */
	pointer-events: none;
	opacity: 0.5;
}

/* === Story Grid === */
.Newspaper .Stories {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	background: transparent;
	margin-top: 1em;
}

.Newspaper .Story {
	background: white;
	padding: 0.8em;
	column-fill: balance;
	border-right: 1px solid #999;
}

.Newspaper .Story:last-child {
	border-right: none;
}

.Newspaper .Story.Span2 { grid-column: span 2; }
.Newspaper .Story.Span3 { grid-column: span 3; }
.Newspaper .Story.Span4 { grid-column: span 4; }

.Newspaper .Story.Col2 { column-count: 2; column-gap: 1em; }
.Newspaper .Story.Col3 { column-count: 3; column-gap: 1em; }
.Newspaper .Story.Col4 { column-count: 4; column-gap: 1em; }

/* Story headlines — Arial */
.Newspaper .Story h2 {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 1.4em !important;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-top: 2px solid black;
	border-bottom: 1px solid black;
	padding: 0.3em 0;
	margin: 0 0 0.5em 0;
	color: black;
	column-span: all;
}

/* Story paragraphs — Times New Roman, indented */
.Newspaper .Story p {
	font-family: "Times New Roman", serif;
	font-size: 0.92em;
	line-height: 1.4;
	text-align: justify;
	margin-top: 0;
	margin-bottom: 0;
	text-indent: 1.2em;
	break-inside: auto;
	orphans: 1;
	widows: 1;
	hyphens: auto;
	-webkit-hyphens: auto;
}

.Newspaper .Story p:last-child {
	margin-bottom: 0;
}

.Newspaper .Story p:first-of-type {
	text-indent: 0;
}

/* Story images — span all internal columns */
.Newspaper .Story img {
	max-width: 100%;
	margin: 0.5em 0;
	column-span: all;
}

/* Floated image within a story */
.Newspaper .Story img.Right {
	float: right;
	width: 70%;
	height: auto;
	margin: 0 0 0.5em 0.8em;
	column-span: none;
}

.Newspaper .Story img.Left {
	float: left;
	width: 45%;
	margin: 0 0.8em 0.5em 0;
	column-span: none;
}

/* Blockquotes — left border, no site styling */
.Newspaper blockquote {
	background: none !important;
	border: none !important;
	border-left: 3px solid black !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-style: italic;
	padding: 0.3em 0 0.3em 1em !important;
	margin: 0.8em 0;
	color: black !important;
	font-size: inherit;
	text-align: left;
	text-align-last: left;
	text-wrap: initial;
}

.Newspaper blockquote::before,
.Newspaper blockquote::after {
	content: none !important;
	display: none !important;
}

/* Asides — pullout quotes spanning all columns */
.Newspaper aside {
	background: none !important;
	border: none !important;
	border-top: 2px solid black !important;
	border-bottom: 2px solid black !important;
	border-radius: 0 !important;
	color: black !important;
	font-family: Arial, sans-serif;
	font-size: 1.3em;
	font-style: italic;
	font-weight: bold;
	text-align: center;
	padding: 0.5em 1em !important;
	margin: 0.8em 0;
	line-height: 1.3;
	column-span: all;
	box-shadow: none !important;
}

/* Pull quote class (same as aside but explicit) */
.Newspaper .PullQuote {
	font-family: Arial, sans-serif;
	font-size: 1.3em;
	font-style: italic;
	text-align: center;
	margin: 0.8em 1em;
	color: black;
	font-weight: bold;
	line-height: 1.3;
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	padding: 0.5em 0;
	column-span: all;
}

/* Horizontal rules */
.Newspaper hr {
	border: none !important;
	border-top: 1px solid black !important;
	margin: 1em 0 !important;
	background: none !important;
	height: auto !important;
}

.Newspaper hr::before,
.Newspaper hr::after {
	content: none !important;
}

/* Correction at the bottom */
.Newspaper .Correction {
	font-style: italic;
	font-size: 0.85em;
	color: black;
	border-top: 1px solid black;
	padding-top: 0.5em;
	margin-top: 1em;
}

/* Caption under photos */
.Newspaper .Caption {
	font-size: 0.75em;
	font-style: italic;
	text-align: center;
	color: black;
	margin-top: 0.3em;
}

/* === Responsive: Mobile (matches site breakpoint at 1024px) === */
@media (max-width: 1024px) {
	.Newspaper {
		padding: 0.5em;
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden;
		box-sizing: border-box;
	}
	.Newspaper * {
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.Newspaper h1 {
		word-break: break-word;
		font-size: 1.6em !important;
	}
	.Newspaper .Stories {
		grid-template-columns: 1fr;
	}
	.Newspaper .Story.Span2,
	.Newspaper .Story.Span3,
	.Newspaper .Story.Span4 {
		grid-column: span 1;
	}
	.Newspaper .Story.Col2,
	.Newspaper .Story.Col3,
	.Newspaper .Story.Col4 {
		column-count: 1;
	}
	.Newspaper .Story {
		border-right: none;
		border-bottom: 1px solid #999;
	}
	.Newspaper .LeadSection {
		flex-direction: column-reverse;
	}
	.Newspaper .LeadText {
		column-count: 1;
	}
	.Newspaper .Story img.Right,
	.Newspaper .Story img.Left {
		float: none;
		width: 100%;
		margin: 0.5em 0;
	}
	.Newspaper .Fold {
		margin: 0.5em 0;
		width: 100% !important;
		max-width: 100% !important;
	}
}