/* ─── dayogreats / prose.css ───────────────────────────
 * Editorial typography for case studies and essays.
 * Also used as block-editor editor-style.
 * ────────────────────────────────────────────────────── */

.case-section { margin-bottom: 48px; }
.case-section-label {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--ink-faint);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.case-section-label::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--accent);
}
.case-section h3 {
	font-family: 'Newsreader', serif;
	font-weight: 500;
	font-variation-settings: "opsz" 36;
	font-size: 28px;
	line-height: 1.2;
	color: var(--ink);
	margin-bottom: 18px;
	letter-spacing: -0.01em;
}

.prose, .case-main .wp-block-post-content {
	font-family: 'DM Sans', sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: 680px;
}
.prose p, .case-main p {
	margin-bottom: 1em;
}
.prose strong, .case-main strong { color: var(--ink); font-weight: 500; }
.prose em, .case-main em { color: var(--ink); font-style: italic; }
.prose a, .case-main a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
	transition: border-color 0.2s;
}
.prose a:hover, .case-main a:hover { border-bottom-color: var(--accent); }

.prose h2, .case-main h2 {
	font-family: 'Newsreader', serif;
	font-weight: 500;
	font-size: 32px;
	color: var(--ink);
	margin: 56px 0 16px;
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.prose h3, .case-main h3 {
	font-family: 'Newsreader', serif;
	font-weight: 500;
	font-size: 24px;
	color: var(--ink);
	margin: 40px 0 12px;
	line-height: 1.2;
}

.dropcap {
	font-family: 'Newsreader', serif;
	font-weight: 500;
	font-size: 64px;
	line-height: 0.85;
	float: left;
	margin: 6px 12px -4px 0;
	color: var(--accent);
	
}

.pull-quote, .wp-block-pullquote {
	font-family: 'Newsreader', serif;
	font-weight: 400;
	font-variation-settings: "opsz" 60;
	font-style: italic;
	font-size: 26px;
	line-height: 1.3;
	color: var(--ink);
	max-width: 580px;
	border-left: 3px solid var(--accent);
	padding: 8px 0 8px 24px;
	margin: 36px 0;
	letter-spacing: -0.01em;
	background: transparent;
}

.footnote, .footnote-ref {
	display: inline-block;
	font-family: 'JetBrains Mono', monospace;
	font-size: 9px;
	color: var(--accent);
	vertical-align: super;
	margin-left: 2px;
	text-decoration: none;
}

.prose blockquote, .case-main blockquote {
	border-left: 2px solid var(--accent);
	padding-left: 20px;
	margin: 24px 0;
	font-style: italic;
	color: var(--ink-soft);
}

.prose code, .case-main code {
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	background: var(--rule-soft);
	padding: 2px 6px;
	border-radius: 2px;
	color: var(--ink);
}

.prose pre, .case-main pre {
	font-family: 'JetBrains Mono', monospace;
	font-size: 13px;
	background: var(--ink);
	color: var(--paper);
	padding: 20px;
	overflow-x: auto;
	border-radius: 2px;
	margin: 24px 0;
}
.prose pre code, .case-main pre code { background: transparent; padding: 0; color: inherit; }

.prose hr, .case-main hr {
	border: 0;
	height: 1px;
	background: var(--rule);
	margin: 48px 0;
}

.prose ul, .case-main ul,
.prose ol, .case-main ol {
	margin: 16px 0 16px 24px;
}
.prose li, .case-main li { margin-bottom: 8px; }

.prose table, .case-main table {
	width: 100%;
	border-collapse: collapse;
	margin: 24px 0;
	font-size: 14px;
}
.prose th, .case-main th,
.prose td, .case-main td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--rule);
	text-align: left;
}
.prose th, .case-main th {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-faint);
	font-weight: 500;
}

/* ────────────────────────────────────────────────────
 * EDITORIAL IMAGE HANDLING
 * Images inserted via the block editor render with this CSS.
 * Handles: wp:image, wp:gallery, wp:cover, figures, captions.
 * ──────────────────────────────────────────────────── */

.prose img, .case-main img,
.wp-block-image img {
	max-width: 100%;
	height: auto;
	display: block;
}

.prose figure, .case-main figure,
.wp-block-image {
	margin: 40px 0;
	position: relative;
}

/* Default block image — sits within prose width */
.wp-block-image:not(.alignwide):not(.alignfull) {
	margin-left: -20px;
	margin-right: -20px;
}
.wp-block-image:not(.alignwide):not(.alignfull) img {
	width: 100%;
	border: 1px solid var(--rule);
}

/* Wide image — breaks out of prose column slightly */
.wp-block-image.alignwide {
	margin-left: -10vw;
	margin-right: -10vw;
	max-width: calc(100% + 20vw);
}
.wp-block-image.alignwide img {
	width: 100%;
	border: 1px solid var(--rule);
}

/* Full-width image — edge to edge */
.wp-block-image.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
.wp-block-image.alignfull img {
	width: 100%;
}

/* Left + right alignment with text wrap */
.wp-block-image.alignleft {
	float: left;
	margin: 8px 28px 20px 0;
	max-width: 45%;
}
.wp-block-image.alignright {
	float: right;
	margin: 8px 0 20px 28px;
	max-width: 45%;
}
.wp-block-image.aligncenter {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Caption — editorial style: monospace label-like or italic prose */
.wp-block-image figcaption,
.prose figure figcaption,
.case-main figure figcaption,
figure.wp-caption .wp-caption-text {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--rule);
	line-height: 1.5;
}

/* Optional: emphasized caption style — use italic Newsreader instead.
   Add class="caption-prose" to a figure to use this. */
.wp-block-image.caption-prose figcaption,
figure.caption-prose figcaption {
	font-family: 'Newsreader', serif;
	font-size: 14px;
	font-style: italic;
	font-weight: 350;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink-soft);
	border-top: none;
	padding-top: 8px;
}

/* Rounded image variant — opt-in via class="is-style-rounded" in WP */
.wp-block-image.is-style-rounded img {
	border-radius: 999px;
}

/* Gallery */
.wp-block-gallery {
	margin: 40px 0;
	display: grid;
	gap: 1px;
	background: var(--rule);
	border: 1px solid var(--rule);
}
.wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wp-block-gallery .wp-block-image {
	margin: 0;
	background: var(--paper);
}
.wp-block-gallery .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: none;
}
.wp-block-gallery .wp-block-image figcaption {
	font-size: 10px;
	padding: 8px 12px;
	border-top: 1px solid var(--rule);
	margin-top: 0;
	background: var(--paper-soft);
}

/* Cover block — text-over-image hero */
.wp-block-cover {
	margin: 56px 0;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.wp-block-cover.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
.wp-block-cover .wp-block-cover__inner-container {
	z-index: 2;
	max-width: 800px;
	padding: 0 32px;
}
.wp-block-cover .wp-block-cover__inner-container > * {
	color: var(--paper);
}
.wp-block-cover .wp-block-cover__inner-container h2,
.wp-block-cover .wp-block-cover__inner-container h3 {
	font-family: 'Newsreader', serif;
	color: var(--paper);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.1;
}
.wp-block-cover .wp-block-cover__inner-container p {
	font-family: 'Newsreader', serif;
	font-style: italic;
	font-size: 20px;
	color: rgba(242, 235, 221, 0.85);
	max-width: 580px;
	margin: 16px auto 0;
}

/* Mobile responsive — collapse alignwide/alignleft/alignright */
@media (max-width: 760px) {
	.wp-block-image.alignwide,
	.wp-block-image.alignleft,
	.wp-block-image.alignright {
		float: none;
		margin: 28px 0;
		max-width: 100%;
	}
	.wp-block-gallery.columns-3,
	.wp-block-gallery.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Editorial figure number — for case studies with numbered figures.
   Use this pattern in markup: <figure class="fig"><figcaption><span class="fig-num">Fig. 1</span> Caption text.</figcaption>...</figure> */
.fig-num {
	color: var(--accent);
	font-weight: 500;
	margin-right: 8px;
}

/* Block editor editor-styles uses these same rules for live preview. */
.editor-styles-wrapper {
	background: var(--paper);
	color: var(--ink);
	font-family: 'DM Sans', sans-serif;
}
.editor-styles-wrapper .wp-block-post-content {
	max-width: 680px;
}