/**
 * Single posts and success stories.
 *
 * Loaded on single.php only, over css/orchid-page.css — that file carries the
 * hero, the prose rules, the call-to-action band and the two card grids this
 * page reuses, and this one is the layer for the four things a single post has
 * that no other template does: a photograph beside the hero copy, a meta row
 * under it, a reading column, and everything that follows the article.
 *
 * The hero media block is written against .o-svc__hero--media rather than
 * .o-post, because the slot lives in the shared hero partial and any template
 * may pass it later.
 *
 * @package orchidassociate
 */

/* ==========================================================================
   The hero, with a photograph beside the copy.
   ========================================================================== */

@media (min-width: 992px) {
	.o-svc__hero--media .o-svc__hero-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
		gap: clamp(36px, 4vw, 68px);
		align-items: center;
	}

	/* A portrait stands taller in the same column, so it gets a narrower one
	   and leaves the copy the width it wants. */
	.o-svc__hero--media-portrait .o-svc__hero-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
	}

	.o-svc__hero--media .o-svc__crumbs {
		grid-column: 1 / -1;
	}
}

/* The frame. No aspect-ratio on purpose: these photographs arrive as 2048px
   squares, tall portraits and wide banners in the same list, and any ratio
   imposed on all three crops somebody's face out of one of them. Capping the
   height instead means a picture is only ever trimmed when it is tall enough
   that it would otherwise push the copy off the screen. */
.o-svc__hero-media {
	position: relative;
	margin: clamp(28px, 4vw, 36px) 0 0;
	overflow: hidden;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38);
}

/* A hairline that reads against the gradient, the dark and the photo
   treatments alike, drawn inside the radius. */
.o-svc__hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: inherit;
	pointer-events: none;
}

@media (min-width: 992px) {
	.o-svc__hero-media {
		margin-top: 0;
	}
}

.o-page .o-svc__hero-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 540px;
	object-fit: cover;
	object-position: 50% 30%;
}

/* On the light treatment the frame has no dark ground to sit on. */
.o-svc__hero--plain .o-svc__hero-media {
	background: var(--o-bg-muted, #f6f6f6);
	box-shadow: var(--o-shadow-lift, 0 18px 40px rgba(0, 0, 0, 0.16));
}

.o-svc__hero--plain .o-svc__hero-media::after {
	border-color: rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------- Meta row. */

.o-svc__hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: clamp(20px, 2.4vw, 28px) 0 0;
	padding: 0;
	list-style: none;
}

.o-svc__hero-meta li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-family: var(--o-sans, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--svc-hero-fg, #fff);
}

.o-svc__hero-meta i {
	font-size: 12px;
	opacity: 0.8;
}

.o-svc__hero--plain .o-svc__hero-meta li {
	border-color: var(--o-line, #e5e5e5);
	background: var(--o-bg-muted, #f6f6f6);
	color: var(--o-body, #4a4a4a);
}

/* ==========================================================================
   The article.
   ========================================================================== */

/* Narrower than the 62rem a service page runs to. That width is right for a
   page of cards and headings; this one is continuous prose, and a line of it
   wants to end while the eye can still find the start of the next. */
.o-svc--full .o-post__main {
	max-width: 50rem;
}

/* The opening paragraph, set a step up. On the stories it is the sentence that
   says what happened. */
.o-page .o-post__prose > p:first-of-type {
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--o-ink, #000);
}

/* Section headings carry the accent as a rule down their left edge. The prose
   rules give an .o-svc__h2 an underline instead, which belongs on a heading
   that opens a section of a landing page rather than one interrupting an
   article every few paragraphs. */
.o-page .o-post__prose h2,
.o-page .o-post__prose h3 {
	position: relative;
	padding-left: 18px;
	font-family: var(--o-display, sans-serif);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.o-page .o-post__prose h2 {
	font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
}

.o-page .o-post__prose h3 {
	font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
}

.o-page .o-post__prose h2::before,
.o-page .o-post__prose h3::before {
	content: "";
	position: absolute;
	top: 0.2em;
	bottom: 0.2em;
	left: 0;
	width: 4px;
	border-radius: 4px;
	background: var(--svc-accent);
}

/* The migrated copy is written as <li><p>, so without this every list item
   carries a paragraph's bottom margin and the lists read as loose as the
   prose around them. */
.o-post__prose li > p {
	margin-bottom: 0.5em;
}

.o-post__prose li > p:last-child {
	margin-bottom: 0;
}

.o-post__prose li > ul,
.o-post__prose li > ol {
	margin-top: 0.5em;
	margin-bottom: 0;
}

.o-post__prose hr {
	height: 0;
	margin: clamp(2em, 4vw, 2.8em) 0;
	border: 0;
	border-top: 1px solid var(--o-line, #e5e5e5);
}

.o-post__prose > figure,
.o-post__prose > img {
	margin: 1.8em 0;
}

/* The migrated copy signs off with an office address, two phone numbers and
   two email addresses. On a narrow screen an unbroken address is wider than
   the column, and one that cannot break pushes the whole page sideways. */
.o-post__prose a,
.o-post__prose code {
	overflow-wrap: anywhere;
}

/* ----------------------------------------------------------------- Share. */

.o-post__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
	margin-top: clamp(36px, 4vw, 52px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--o-line, #e5e5e5);
}

.o-page .o-post__share-label {
	margin: 0;
	font-family: var(--o-sans, sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--o-ink, #000);
}

.o-post__share-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-page .o-post__share-list a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--o-line, #e5e5e5);
	border-radius: 50%;
	font-size: 15px;
	text-decoration: none;
	color: var(--o-body, #4a4a4a);
	background: var(--o-bg, #fff);
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.o-page .o-post__share-list a:hover,
.o-page .o-post__share-list a:focus-visible {
	color: #fff;
	border-color: transparent;
	background: var(--svc-accent);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(var(--svc-accent-rgb), 0.32);
}

/* ----------------------------------------------------------------- Pager. */

.o-post__pager {
	display: grid;
	gap: clamp(12px, 1.4vw, 18px);
	margin-top: clamp(28px, 3vw, 40px);
}

@media (min-width: 640px) {
	.o-post__pager {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* The first post has no previous, the last no next. Either way the one
	   that is left keeps its own side of the row. */
	.o-post__pager-link--next:only-child {
		grid-column: 2;
	}
}

.o-page .o-post__pager-link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(18px, 2vw, 22px) clamp(20px, 2.2vw, 26px);
	border: 1px solid var(--o-line, #e5e5e5);
	border-radius: var(--o-radius, 14px);
	text-decoration: none;
	background: var(--o-bg, #fff);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.o-page .o-post__pager-link:hover,
.o-page .o-post__pager-link:focus-visible {
	border-color: transparent;
	box-shadow: var(--o-shadow-lift, 0 18px 40px rgba(0, 0, 0, 0.16));
	transform: translateY(-3px);
}

/* Right-aligned only once the two sit side by side. Stacked, a right-ragged
   title in a narrow column is harder to read than the arrow is helpful. */
@media (min-width: 640px) {
	.o-post__pager-link--next {
		align-items: flex-end;
		text-align: right;
	}
}

.o-post__pager-dir {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--o-sans, sans-serif);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--svc-accent);
}

.o-post__pager-dir i {
	font-size: 11px;
	transition: transform 0.2s ease;
}

.o-post__pager-link--prev:hover .o-post__pager-dir i {
	transform: translateX(-4px);
}

.o-post__pager-link--next:hover .o-post__pager-dir i {
	transform: translateX(4px);
}

.o-post__pager-title {
	font-family: var(--o-display, sans-serif);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--o-ink, #000);
}

/* ------------------------------------------------------- See all, below. */

.o-page .o-post__related-more {
	margin: clamp(28px, 3vw, 40px) 0 0;
	text-align: center;
}

/* ==========================================================================
   Comments.

   Core markup, so everything here is keyed to the classes WordPress emits.
   ========================================================================== */

.o-post__comments {
	margin-top: clamp(40px, 4.5vw, 64px);
	padding-top: clamp(28px, 3vw, 40px);
	border-top: 1px solid var(--o-line, #e5e5e5);
}

.o-page .o-post__comments .comments-title,
.o-page .o-post__comments .comment-reply-title {
	margin: 0 0 20px;
	font-family: var(--o-display, sans-serif);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--o-ink, #000);
}

.o-page .o-post__comments .comment-reply-title small {
	margin-left: 10px;
	font-size: 0.875rem;
	font-weight: 500;
}

.o-post__comments .comment-list,
.o-post__comments .comment-list ol {
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.o-post__comments .comment-list ol {
	margin-bottom: 0;
	padding-left: clamp(16px, 3vw, 44px);
}

.o-post__comments .comment-body {
	margin-bottom: 14px;
	padding: clamp(18px, 2vw, 24px);
	border: 1px solid var(--o-line, #e5e5e5);
	border-radius: var(--o-radius, 14px);
	background: var(--o-bg, #fff);
}

.o-post__comments .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--o-sans, sans-serif);
	font-weight: 700;
	color: var(--o-ink, #000);
}

.o-page .o-post__comments .comment-author img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.o-page .o-post__comments .comment-metadata,
.o-page .o-post__comments .comment-meta {
	margin: 6px 0 12px;
	font-family: var(--o-sans, sans-serif);
	font-size: 0.8125rem;
	color: var(--o-body, #4a4a4a);
}

.o-page .o-post__comments .comment-metadata a,
.o-page .o-post__comments .comment-author a {
	text-decoration: none;
	color: inherit;
}

.o-page .o-post__comments .reply a {
	display: inline-flex;
	align-items: center;
	font-family: var(--o-sans, sans-serif);
	font-size: 0.8125rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--svc-accent);
}

/* ------------------------------------------------------------------ Form. */

.o-page .o-post__comments .comment-notes,
.o-page .o-post__comments .comment-form-cookies-consent label,
.o-page .o-post__comments .logged-in-as {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--o-body, #4a4a4a);
}

.o-post__comments .comment-form label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--o-sans, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--o-ink, #000);
}

.o-post__comments .comment-form p {
	margin: 0 0 18px;
}

.o-page .o-post__comments input[type="text"],
.o-page .o-post__comments input[type="email"],
.o-page .o-post__comments input[type="url"],
.o-page .o-post__comments textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--o-line, #e5e5e5);
	border-radius: var(--o-radius-sm, 8px);
	font-family: var(--o-sans, sans-serif);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--o-ink, #000);
	background: var(--o-bg, #fff);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.o-page .o-post__comments input[type="text"]:focus,
.o-page .o-post__comments input[type="email"]:focus,
.o-page .o-post__comments input[type="url"]:focus,
.o-page .o-post__comments textarea:focus {
	outline: 0;
	border-color: var(--svc-accent);
	box-shadow: 0 0 0 3px rgba(var(--svc-accent-rgb), 0.14);
}

.o-post__comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.o-post__comments .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

.o-page .o-post__comments .form-submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	padding: 15px 30px;
	border: 0;
	border-radius: 999px;
	font-family: var(--o-sans, sans-serif);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: var(--svc-accent);
	box-shadow: 0 10px 26px rgba(var(--svc-accent-rgb), 0.32);
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.o-page .o-post__comments .form-submit input[type="submit"]:hover {
	background: var(--svc-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(var(--svc-accent-rgb), 0.4);
}

/* Name, email and website are three short fields; stacked they make the form
   look longer than the comment box above them. */
@media (min-width: 700px) {
	.o-post__comments .comment-form {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 16px;
	}

	.o-post__comments .comment-notes,
	.o-post__comments .logged-in-as,
	.o-post__comments .comment-form-comment,
	.o-post__comments .comment-form-cookies-consent,
	.o-post__comments .form-submit {
		grid-column: 1 / -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.o-page .o-post__share-list a:hover,
	.o-page .o-post__pager-link:hover,
	.o-page .o-post__comments .form-submit input[type="submit"]:hover {
		transform: none;
	}

	.o-post__pager-link:hover .o-post__pager-dir i {
		transform: none;
	}
}