/* =============================================================================
   Blog post reading layout
   Loaded only on single blog posts (inc/blog.php). Presentation only: the
   post's content, headings and links come from the editor unchanged. Built on
   the theme tokens in style.css so it reads as part of the same site.
   ============================================================================= */

/* ---- Header: centred, with a softer lead ---------------------------------- */
.single-post .ec-single .ec-pagehead {
	align-items: center;
	text-align: center;
	border-bottom: 0;
	padding-top: clamp(32px, 4vw, 56px);
	padding-bottom: clamp(22px, 2.6vw, 32px);
	gap: clamp(14px, 1.6vw, 18px);
}
.single-post .ec-single .ec-entry__meta { justify-content: center; }
.single-post .ec-single .ec-entry__meta a { color: var(--ec-plum); text-decoration: none; }
.single-post .ec-single .ec-pagehead__title {
	max-width: 26ch;
	margin-inline: auto;
	font-size: clamp(32px, 4.4vw, 54px);
	line-height: 1.08;
}
.single-post .ec-single .ec-pagehead__intro {
	max-width: 52ch;
	margin-inline: auto;
	font: 400 var(--ec-display-m) / 1.5 var(--ec-font-display);
	letter-spacing: -.01em;
	color: var(--ec-ink-muted);
}

/* ---- Hero image: framed, and cropped to keep the face in view ------------- */
.single-post .ec-single__hero {
	width: 100%;
	max-width: calc(1100px + 2 * var(--ec-gutter));
	margin: 0 auto clamp(26px, 3vw, 40px);
	padding-top: 0 !important;
}
.single-post .ec-single__hero .ec-media { aspect-ratio: 5 / 2; }
@media (max-width: 1100px) {
	.single-post .ec-single__hero .ec-media { aspect-ratio: 2 / 1; }
}
@media (max-width: 640px) {
	.single-post .ec-single__hero .ec-media { aspect-ratio: 4 / 3; }
}
.single-post .ec-single__hero .ec-media { border-radius: var(--ec-radius); }
.single-post .ec-single__hero .ec-media > img { object-position: 50% 10% !important; }

/* ---- Reading column: wide, with breathing room on both sides ------------- */
.single-post .ec-single__body {
	max-width: calc(1100px + 2 * var(--ec-gutter));
	margin-inline: auto;
}
.single-post .ec-prose p,
.single-post .ec-prose ul,
.single-post .ec-prose ol { line-height: 1.75; margin-bottom: 16px; }

/* Opening paragraph as a lead, with a quiet drop cap. */
.single-post .ec-prose > p:first-child {
	font-size: clamp(17px, 1.75vw, 20px);
	line-height: 1.7;
	color: var(--ec-ink);
}
.single-post .ec-prose > p:first-child::first-letter {
	float: left;
	font: 300 3.4em / .82 var(--ec-font-display);
	color: var(--ec-plum);
	margin: .08em .1em 0 0;
}

/* ---- Headings ------------------------------------------------------------- */
.single-post .ec-prose h2 {
	clear: both;
	margin: clamp(30px, 3.4vw, 44px) 0 12px;
	padding-top: clamp(22px, 2.6vw, 28px);
	border-top: 1px solid var(--ec-hairline);
	font-weight: 400;
	font-size: clamp(25px, 2.9vw, 34px);
	line-height: 1.2;
	color: var(--ec-ink);
	scroll-margin-top: 110px;
}
.single-post .ec-prose h3 {
	margin: clamp(26px, 3vw, 32px) 0 8px;
	font-weight: 500;
	font-size: clamp(18px, 1.9vw, 21px);
	line-height: 1.35;
	color: var(--ec-ink);
	scroll-margin-top: 110px;
}
.single-post .ec-prose h2 + h3 { margin-top: 18px; }

/* ---- Links ---------------------------------------------------------------- */
.single-post .ec-prose a {
	text-decoration-color: color-mix(in srgb, var(--ec-plum) 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color var(--ec-dur-hover) ease, text-decoration-color var(--ec-dur-hover) ease;
}
.single-post .ec-prose a:hover { color: var(--ec-plum); text-decoration-color: var(--ec-plum); }

/* ---- Lists ---------------------------------------------------------------- */
.single-post .ec-prose ul,
.single-post .ec-prose ol { list-style: none; padding-left: 0; display: flow-root; }
.single-post .ec-prose ul > li,
.single-post .ec-prose ol > li { position: relative; padding-left: 34px; margin-bottom: 8px; }
.single-post .ec-prose ul > li::before {
	content: "";
	position: absolute;
	left: 8px;
	top: .78em;
	width: 7px;
	height: 7px;
	border: 1px solid var(--ec-plum);
	transform: rotate(45deg);
}
.single-post .ec-prose ol { counter-reset: ec-blog-step; }
.single-post .ec-prose ol > li { counter-increment: ec-blog-step; }
.single-post .ec-prose ol > li::before {
	content: counter(ec-blog-step);
	position: absolute;
	left: 0;
	top: .2em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ec-ivory);
	border: 1px solid var(--ec-hairline);
	color: var(--ec-plum);
	font: 500 12px / 22px var(--ec-font-text);
	text-align: center;
}

/* ---- Tables: soft card, scrolls sideways on small screens ----------------- */
.single-post .ec-prose figure.wp-block-table {
	clear: both;
	margin: 18px 0 clamp(24px, 3vw, 32px);
	overflow-x: auto;
	border: 1px solid var(--ec-hairline);
	border-radius: var(--ec-radius);
	background: var(--ec-page);
	-webkit-overflow-scrolling: touch;
}
.single-post .ec-prose table { min-width: 560px; margin: 0; }
.single-post .ec-prose .wp-block-table thead { border-bottom: 0; }
.single-post .ec-prose .wp-block-table :is(th, td) {
	border: 0;
	border-bottom: 1px solid var(--ec-hairline);
}
.single-post .ec-prose thead th {
	background: var(--ec-ivory);
	padding-block: 14px;
	border-bottom: 1px solid var(--ec-hairline);
}
.single-post .ec-prose td { line-height: 1.55; color: var(--ec-ink-muted); vertical-align: top; }
.single-post .ec-prose tbody td:first-child { color: var(--ec-ink); font-weight: 500; }
.single-post .ec-prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ec-ivory) 55%, transparent); }
.single-post .ec-prose tbody tr:last-child td { border-bottom: 0; }

/* A paragraph that is only a bold label ("Quick colour guide") sits over its table. */
.single-post .ec-prose > p:has(> strong:only-child) {
	clear: both;
	margin: clamp(28px, 3.5vw, 40px) 0 0;
	font: 400 11px / 1.4 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
}
.single-post .ec-prose > p:has(> strong:only-child) strong { color: var(--ec-label-brown); font-weight: 400; }

/* ---- Pull quote: a styling-tip card --------------------------------------- */
.single-post .ec-prose blockquote {
	clear: both;
	margin: clamp(24px, 3vw, 32px) 0;
	padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 32px);
	background: var(--ec-ivory);
	border-left: 2px solid var(--ec-plum);
	border-radius: 0 var(--ec-radius) var(--ec-radius) 0;
}
.single-post .ec-prose blockquote p { margin: 0; }

/* ---- Product images: beside their section's text on wide screens --------- */
.single-post .ec-prose figure.wp-block-image {
	float: right;
	clear: none; /* the editor's .aligncenter class adds clear: both */
	width: clamp(240px, 28%, 310px);
	/* Pulled up so the top lines up with its heading. */
	margin: -36px 0 12px clamp(24px, 3vw, 36px);
	text-align: center;
}
/* Zig-zag: every second image sits on the left. */
.single-post .ec-prose figure.wp-block-image:nth-child(2n of figure.wp-block-image) {
	float: left;
	/* Not pulled up: on the left it would sit over the line above. */
	margin: 6px clamp(24px, 3vw, 36px) 12px 0;
}
/* Each image starts beside its own heading; it only clears images on its own side,
   so the text keeps flowing past the previous one without a gap. */
.single-post .ec-prose h3:has(+ figure.wp-block-image) { clear: right; }
/* After a section heading the image starts with the text, not pulled over the heading. */
.single-post .ec-prose h2 + figure.wp-block-image { margin-top: 6px; }
.single-post .ec-prose h3:has(+ figure.wp-block-image:nth-child(2n of figure.wp-block-image)) { clear: left; }
.single-post .ec-prose figure.wp-block-image > a {
	display: block;
	border-radius: var(--ec-radius);
	overflow: hidden;
	background: var(--ec-hairline);
}
.single-post .ec-prose figure.wp-block-image img {
	display: block;
	width: 100% !important;
	height: auto; /* whole photo, uncropped, so the garment shows in full */
	border-radius: var(--ec-radius);
	transition: transform var(--ec-dur-reveal) ease;
}
.single-post .ec-prose figure.wp-block-image > a:hover img { transform: scale(1.03); }
.single-post .ec-prose figure.wp-block-image figcaption {
	margin-top: 10px;
	text-align: center;
	line-height: 1.5;
}
.single-post .ec-prose figure.wp-block-image figcaption a { color: var(--ec-ink); }
.single-post .ec-single__footer { clear: both; }

@media (max-width: 700px) {
	.single-post .ec-prose figure.wp-block-image,
	.single-post .ec-prose figure.wp-block-image:nth-child(2n of figure.wp-block-image) {
		float: none;
		width: min(100%, 300px);
		margin: 14px auto 22px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.single-post .ec-prose figure.wp-block-image img,
	.single-post .ec-prose a { transition: none; }
}

@media (max-width: 640px) {
	.single-post .ec-prose > p:first-child::first-letter { font-size: 3em; }
	.single-post .ec-prose ul > li,
	.single-post .ec-prose ol > li { padding-left: 30px; }
}

/* =============================================================================
   Post lists (blog page, search, archives): template-parts/content/entry.php
   ============================================================================= */
.ec-entry__text {
	display: flex;
	flex-direction: column;
	gap: var(--ec-stack-s);
}
.ec-entry__more {
	font: 400 11px / 1.4 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	color: var(--ec-ink);
	text-decoration: none;
}
.ec-entry__more span { display: inline-block; transition: transform var(--ec-dur-hover) ease; }
.ec-entry:hover .ec-entry__more { color: var(--ec-plum); }
.ec-entry:hover .ec-entry__more span { transform: translateX(4px); }

/* Blog page: one post per row, image on the left, text on the right. */
.blog .ec-entries {
	display: block;
	max-width: calc(1100px + 2 * var(--ec-gutter));
	margin-inline: auto;
	padding-top: clamp(16px, 2vw, 24px);
}
.blog .ec-entry {
	display: grid;
	grid-template-columns: clamp(200px, 26%, 300px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(24px, 3vw, 36px) 0;
	border-bottom: 1px solid var(--ec-hairline);
}
.blog .ec-entry:last-child { border-bottom: 0; }
.blog .ec-entry:not(:has(.ec-entry__image)) { grid-template-columns: minmax(0, 1fr); }
.blog .ec-entry__image .ec-media {
	aspect-ratio: auto;
	border-radius: var(--ec-radius);
}
/* Whole photo, uncropped, so the full garment shows. */
.blog .ec-entry__image .ec-media > img {
	position: static;
	display: block;
	height: auto;
	object-fit: initial;
}
.blog .ec-entry__title { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; }
.blog .ec-entry__excerpt { max-width: 60ch; }

@media (max-width: 640px) {
	.blog .ec-entry {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 18px;
		align-items: start;
	}
	.blog .ec-entry__title { font-size: 19px; }
	.blog .ec-entry__excerpt { display: none; }
}

/* ---- End of a post: no empty footer line, tighter gap to Previous / Next -- */
.single-post .ec-single { padding-bottom: clamp(20px, 2.5vw, 32px); }
.single-post .ec-single__footer:not(:has(*)) { display: none; }
.single-post .ec-postnav {
	max-width: calc(1100px + 2 * var(--ec-gutter));
	margin-inline: auto;
	padding-block: clamp(22px, 2.6vw, 32px);
}

/* =============================================================================
   After a post: comment form card on the left, related posts on the right
   ============================================================================= */
.single-post .ec-post-after {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	max-width: calc(1100px + 2 * var(--ec-gutter));
	margin: 0 auto;
	padding: clamp(28px, 3.5vw, 48px) var(--ec-gutter) clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--ec-hairline);
}
.single-post .ec-post-after.is-single { grid-template-columns: minmax(0, 1fr); }

/* Comment form card. */
.single-post .ec-post-after .ec-comments {
	padding: clamp(24px, 3vw, 40px);
	border: 0;
	border-radius: var(--ec-radius);
	background: var(--ec-ivory);
}
.single-post .ec-post-after .comment-respond { margin: 0; }
.single-post .ec-post-after .comment-reply-title {
	margin: 0 0 14px;
	font: 500 12px / 1.4 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	color: var(--ec-ink);
}
.single-post .ec-post-after .comment-notes,
.single-post .ec-post-after .logged-in-as {
	grid-column: 1 / -1;
	max-width: 36ch;
	margin: 0 0 8px;
	font: 400 14px / 1.6 var(--ec-font-text);
	color: var(--ec-ink-muted);
}
.single-post .ec-post-after .comment-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 28px;
	max-width: none;
}
.single-post .ec-post-after .comment-form > * { grid-column: 1 / -1; }
.single-post .ec-post-after .comment-form > .comment-form-author { grid-column: 1; }
.single-post .ec-post-after .comment-form > .comment-form-email { grid-column: 2; }
/* Underlined fields, as on a printed form. */
.single-post .ec-post-after .comment-form :is(input[type='text'], input[type='email'], textarea) {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--ec-ink) 22%, transparent);
	border-radius: 0;
	background: transparent;
}
.single-post .ec-post-after .comment-form :is(input, textarea):focus {
	outline: 0;
	border-bottom-color: var(--ec-plum);
}
.single-post .ec-post-after .comment-form textarea { min-height: 150px; }
.single-post .ec-post-after .comment-form .comment-form-cookies-consent label {
	font: 400 14px / 1.5 var(--ec-font-text);
	letter-spacing: 0;
	text-transform: none;
	color: var(--ec-ink-muted);
}
.single-post .ec-post-after .comment-form .form-submit { margin-top: 4px; }

/* Related posts. */
.single-post .ec-related__title {
	margin: 0 0 clamp(20px, 2.4vw, 28px);
	font: 400 clamp(22px, 2.2vw, 28px) / 1.2 var(--ec-font-display);
	letter-spacing: -.02em;
	color: var(--ec-ink);
}
.single-post .ec-related__item {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding: 0 0 22px;
	margin: 0 0 22px;
	border-bottom: 1px solid var(--ec-hairline);
}
.single-post .ec-related__item:last-child { border-bottom: 0; margin-bottom: 0; }
.single-post .ec-related__item:not(:has(.ec-related__image)) { grid-template-columns: minmax(0, 1fr); }
.single-post .ec-related__image {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	background: var(--ec-hairline);
}
.single-post .ec-related__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
}
.single-post .ec-related__text { display: flex; flex-direction: column; gap: 8px; }
.single-post .ec-related__name {
	margin: 0;
	font: 400 clamp(17px, 1.6vw, 20px) / 1.3 var(--ec-font-display);
	letter-spacing: -.01em;
}
.single-post .ec-related__name a { color: var(--ec-ink); text-decoration: none; }
.single-post .ec-related__name a:hover { color: var(--ec-plum); }
.single-post .ec-related__date,
.single-post .ec-related__more {
	font: 400 10px / 1.4 var(--ec-font-text);
	letter-spacing: var(--ec-track-label);
	text-transform: uppercase;
	color: var(--ec-ink-muted);
}
.single-post .ec-related__more { margin-top: 6px; color: var(--ec-ink); text-decoration: none; }
.single-post .ec-related__more span { display: inline-block; transition: transform var(--ec-dur-hover) ease; }
.single-post .ec-related__item:hover .ec-related__more span { transform: translateX(4px); }

@media (max-width: 860px) {
	.single-post .ec-post-after { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
	.single-post .ec-post-after .comment-form { grid-template-columns: minmax(0, 1fr); }
	.single-post .ec-post-after .comment-form > :is(.comment-form-author, .comment-form-email) { grid-column: 1; }
}