/*
 * Single Press Release — template styles.
 *
 * Loaded only on /press/<slug>/ (and /ar/press/<slug>/) via the conditional
 * enqueue in inc/blocks.php → seamlessmd_enqueue_single_press_release_styles.
 *
 * Covers the 2-col body+sidebar layout, the share-this-post strip, and the
 * "Recent news" mini-list. The hero, related-releases grid, and bottom
 * cta-band reuse their respective block stylesheets — nothing block-level
 * lives here.
 *
 * BEM:
 *   .seamlessmd-press-body / __inner / __content / __sidebar / __sticky
 *   .seamlessmd-press-share / __heading / __list / __link
 *   .seamlessmd-press-recent / __heading / __list / __item / __link / __title / __date
 *
 * Logical properties only (margin-inline, text-align: start) so RTL works
 * without per-locale rules.
 */

.seamlessmd-press-body {
	padding-block: var(--seamlessmd-section-pad, clamp(2.5rem, 5vw, 4rem));
	background: var(--seamlessmd-surface, #fff);
	color: var(--seamlessmd-text, #1a1a2e);
}

.seamlessmd-press-body__inner {
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 992px) {
	.seamlessmd-press-body__inner {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
		align-items: start;
	}
}

.seamlessmd-press-body__content {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--seamlessmd-text, #1a1a2e);
}

.seamlessmd-press-body__content > * + * {
	margin-block-start: var(--space-4, 1rem);
}

.seamlessmd-press-body__content h2 {
	margin-block: var(--space-6, 1.5rem) var(--space-3, 0.75rem);
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	line-height: 1.25;
	font-weight: 700;
	color: var(--seamlessmd-dark-navy, #1e2a5c);
}

.seamlessmd-press-body__content h3 {
	margin-block: var(--space-5, 1.25rem) var(--space-2, 0.5rem);
	font-size: clamp(1.125rem, 1.4vw, 1.375rem);
	line-height: 1.3;
	font-weight: 700;
	color: var(--seamlessmd-dark-navy, #1e2a5c);
}

.seamlessmd-press-body__content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin-block: var(--space-4, 1rem);
}

.seamlessmd-press-body__content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--space-5, 1.25rem);
	border-inline-start: 4px solid var(--seamlessmd-primary, #045089);
	font-style: italic;
	color: var(--seamlessmd-text-muted, #6b7280);
}

.seamlessmd-press-body__content a {
	color: var(--seamlessmd-primary, #045089);
	text-decoration: underline;
}

.seamlessmd-press-body__content ul,
.seamlessmd-press-body__content ol {
	padding-inline-start: 1.5rem;
}

.seamlessmd-press-body__sidebar {
	font-size: 0.9375rem;
}

@media (min-width: 992px) {
	.seamlessmd-press-body__sticky {
		position: sticky;
		top: 96px;
		display: flex;
		flex-direction: column;
		gap: var(--space-6, 1.5rem);
	}
}

@media (max-width: 991px) {
	.seamlessmd-press-body__sticky {
		display: flex;
		flex-direction: column;
		gap: var(--space-6, 1.5rem);
	}
}

/* ---- Share strip ---- */

.seamlessmd-press-share {
	padding: var(--space-5, 1.25rem);
	border-radius: 10px;
	background: var(--seamlessmd-surface-alt, #f3f3f3);
}

.seamlessmd-press-share__heading {
	margin: 0 0 var(--space-3, 0.75rem);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--seamlessmd-dark-navy, #1e2a5c);
}

.seamlessmd-press-share__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.seamlessmd-press-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--seamlessmd-primary, #045089);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

/* Bootstrap's `a:hover { color: #0056b3; text-decoration: underline }` outranks
 * the base rule's white glyph on interaction states — the glyph vanished into
 * the dark hover disc. Pin color across every state at (0,2,0). */
.seamlessmd-press-share__link:hover,
.seamlessmd-press-share__link:focus,
.seamlessmd-press-share__link:active,
.seamlessmd-press-share__link:visited {
	color: #fff;
	text-decoration: none;
}

.seamlessmd-press-share__link:hover {
	background: var(--seamlessmd-primary-dark, #034373);
	transform: translateY(-2px);
}

/* ---- Recent news mini-list ---- */

.seamlessmd-press-recent {
	padding: var(--space-5, 1.25rem);
	border-radius: 10px;
	background: var(--seamlessmd-surface-alt, #f3f3f3);
}

.seamlessmd-press-recent__heading {
	margin: 0 0 var(--space-3, 0.75rem);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--seamlessmd-dark-navy, #1e2a5c);
}

.seamlessmd-press-recent__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.seamlessmd-press-recent__item + .seamlessmd-press-recent__item {
	margin-block-start: var(--space-3, 0.75rem);
	padding-block-start: var(--space-3, 0.75rem);
	border-block-start: 1px solid var(--seamlessmd-border, #e5e7eb);
}

.seamlessmd-press-recent__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.seamlessmd-press-recent__title {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.35;
	font-weight: 600;
	color: var(--seamlessmd-dark-navy, #1e2a5c);
	transition: color 0.15s ease;
}

.seamlessmd-press-recent__link:hover .seamlessmd-press-recent__title {
	color: var(--seamlessmd-primary, #045089);
}

.seamlessmd-press-recent__date {
	display: block;
	margin-block-start: 0.25rem;
	font-size: 0.75rem;
	color: var(--seamlessmd-text-muted, #6b7280);
}

@media (prefers-reduced-motion: reduce) {
	.seamlessmd-press-share__link,
	.seamlessmd-press-recent__title {
		transition: none;
	}
}

/* ---- Hero banner colour parity (QA row 39) ----
 * The cpt-auto hero paints a flat dark-navy background under the featured
 * image + a full-cover teal overlay. On the rest of the site every hero
 * reads in the site's blue family (#2563eb) — the dark navy landed as an
 * outlier. Repaint the hero base + overlay in that blue so the top of the
 * article matches the buttons, chips and accents everywhere else. Scoped
 * to this template — the openoutcomes / archives etc. keep their own hero
 * treatment. */

.seamlessmd-single-press_release-main .seamlessmd-hero--variant-cpt-auto {
	background-color: #2563eb;
}

.seamlessmd-single-press_release-main .seamlessmd-hero--variant-cpt-auto .seamlessmd-hero__overlay {
	background-color: rgba(37, 99, 235, 0.55);
}

/* ---- Bottom CTA parity (QA row 39) ----
 * The block ships variant=solid painted with the theme's primary colour,
 * which reads as an unrelated brand strip on this page. Mirror the
 * dark-navy-gradient card used on News & FAQ + About Us: rounded card,
 * radial glow, white primary button with a trailing arrow, ghost secondary
 * (unused here but wired). The block's own align-center layout centres the
 * heading / paragraph / button group on the full card; nothing below
 * changes alignment. */

.seamlessmd-single-press_release-main .seamlessmd-cta-band--variant-solid {
	background: transparent;
	padding-block: 1rem 3rem;
}

.seamlessmd-single-press_release-main .seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__inner {
	border-radius: 20px;
	padding: 3rem 3rem 3.2rem;
	background:
		radial-gradient(1.5px 1.5px at 78% 30%, rgba(96, 165, 250, 0.9), transparent 60%),
		radial-gradient(1.5px 1.5px at 84% 62%, rgba(96, 165, 250, 0.8), transparent 60%),
		radial-gradient(1.5px 1.5px at 70% 74%, rgba(96, 165, 250, 0.7), transparent 60%),
		radial-gradient(2px 2px at 90% 42%, rgba(147, 197, 253, 0.8), transparent 60%),
		radial-gradient(closest-side at 76% 50%, rgba(37, 99, 235, 0.35), transparent),
		linear-gradient(100deg, #0a1c47 0%, #0d2a66 55%, #1747a6 100%);
}

.seamlessmd-single-press_release-main .seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__heading {
	color: #fff;
	/* Readable ceiling: wide enough for the English heading on one line at
	 * 1440 (~930px at 44px). Narrower cards wrap it into balanced lines
	 * instead of leaving a short orphan. */
	max-inline-size: 60rem;
	text-wrap: balance;
}

.seamlessmd-single-press_release-main .seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__subheading {
	color: rgba(226, 233, 246, 0.85);
	font-size: 0.95rem;
	max-inline-size: 40rem;
	margin-inline: auto;
}

.seamlessmd-single-press_release-main .seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--primary {
	background: #fff;
	border-color: #fff;
	color: #2563eb;
	border-radius: 8px;
	font-weight: 600;
	box-shadow: none;
}

.seamlessmd-single-press_release-main .seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--primary:hover {
	background: #eef2fb;
	border-color: #eef2fb;
	color: #2563eb;
}

.seamlessmd-single-press_release-main .seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--primary::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.45rem;
}

[dir="rtl"] .seamlessmd-single-press_release-main .seamlessmd-cta-band--variant-solid .seamlessmd-cta-band__cta--primary::after {
	transform: scaleX(-1);
}