/**
 * Blog archive — mirrors homepage promotion card grid.
 * BCM: c-blog-archive, c-blog-related, c-section__*, c-blog-grid, c-blog-grid__*
 */

/* -------------------------------------------------------------------------
   Section shell
   ------------------------------------------------------------------------- */

.l-section.c-blog-archive,
.l-section.c-blog-related {
	background: var(--meda-shell-white) !important;
}

.l-section.c-blog-archive .l-section-h > .g-cols + .g-cols,
.l-section.c-blog-archive .l-section-h > .g-cols:has(.c-section__content),
.l-section.c-blog-related .l-section-h > .g-cols + .g-cols,
.l-section.c-blog-related .l-section-h > .g-cols:has(.c-section__content),
.c-blog-archive .c-section__intro .c-section__content,
.c-blog-related .c-section__intro .c-section__content {
	margin-top: 1.5rem;
}

.c-blog-archive .c-section__intro .c-section__content,
.c-blog-related .c-section__intro .c-section__content {
	width: 100%;
	max-width: none;
}

.c-blog-archive .c-section__intro .vc_column-inner,
.c-blog-related .c-section__intro .vc_column-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5625rem;
	text-align: center;
}

.c-blog-archive .c-section__intro > .vc_column-inner > .c-section__heading,
.c-blog-related .c-section__intro > .vc_column-inner > .c-section__heading {
	width: 100%;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   Blog grid — promotion card pattern
   ------------------------------------------------------------------------- */

.c-blog-grid.w-grid {
	--gap: var(--meda-promo-grid-gap) !important;
	width: 100%;
	margin-inline: auto;
}

.c-blog-grid .w-grid-list {
	align-items: stretch;
	justify-items: stretch;
}

.c-blog-grid .w-grid-item {
	width: 100%;
	max-width: none;
	height: auto;
	justify-self: stretch;
}

.c-blog-grid .w-grid-item-h {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4375rem;
	width: 100%;
	height: 100%;
	padding: 1rem;
	overflow: hidden;
	background: #fff;
	box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.12);
	transition: box-shadow var(--meda-promo-hover-duration, 0.75s) var(--meda-ease);
	will-change: transform;
}

html.meda-motion-gsap .c-blog-grid .w-grid-item-h {
	transition-property: box-shadow;
}

.no-touch .c-blog-grid .w-grid-item.meda-promo-card-is-hovered .w-grid-item-h,
.no-touch .c-blog-grid .w-grid-item:focus-within .w-grid-item-h {
	box-shadow: 8px 20px 32px rgba(0, 0, 0, 0.14);
}

.c-blog-grid .w-grid-item.meda-hover-card,
.c-blog-grid .w-grid-item {
	overflow: visible;
}

/* -------------------------------------------------------------------------
   Featured image
   ------------------------------------------------------------------------- */

.c-blog-grid-item {
	position: relative;
	width: 100%;
	max-width: none;
	align-self: stretch;
	transform-origin: 50% 68.16%;
	will-change: transform;
}

.c-blog-grid-item.w-vwrapper {
	display: block;
}

.c-blog-grid__featured-image,
.c-blog-grid__image.post_image,
.c-blog-grid__image {
	position: relative;
	width: 100%;
	aspect-ratio: 319 / 234;
	overflow: hidden;
	/* When overriding_link scales this node (no inner <a>), match side inset. */
	transform-origin: 50% 68.16%;
}

.c-blog-grid__featured-image a,
.c-blog-grid__image a {
	display: block;
	width: 100%;
	height: 100%;
	/* Match GSAP zoom origin: top inset ≈ side inset after scale (319/234). */
	transform-origin: 50% 68.16%;
	will-change: transform;
}

.c-blog-grid__featured-image img,
.c-blog-grid__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-blog-grid__featured-image:empty,
.c-blog-grid__image:empty {
	display: none;
}

/* -------------------------------------------------------------------------
   Card body
   ------------------------------------------------------------------------- */

.c-blog-grid .w-grid-item-h > .w-vwrapper:not(.c-blog-grid-item),
.c-blog-grid__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	width: 100%;
	max-width: none;
	align-self: stretch;
	text-align: left;
}

.c-blog-grid h2.c-blog-grid__title,
.c-blog-grid h2.c-blog-grid__title a,
.c-blog-grid .w-post-elm.post_title.c-blog-grid__title,
.c-blog-grid .w-post-elm.post_title.c-blog-grid__title a,
.c-blog-grid__title,
.c-blog-grid__title a {
	margin: 0;
	width: 100%;
	font-family: var(--body-font-family, var(--font-family, var(--meda-body-font)));
	font-size: var(--meda-body-font-size);
	font-weight: 600;
	line-height: var(--body-line-height, 1.15);
	text-align: left;
	color: var(--color-content-heading, var(--meda-content-heading));
}

.c-blog-grid__title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--meda-duration-fast) var(--meda-ease);
}

.no-touch .c-blog-grid__title a:hover {
	color: var(--meda-gold, #a58b46);
}

.c-blog-grid__excerpt,
.c-blog-grid__excerpt p,
.c-blog-grid .w-post-elm.post_content {
	margin: 0;
	font-family: var(--body-font-family, var(--font-family, var(--meda-body-font)));
	font-size: var(--meda-text-base);
	font-weight: var(--body-font-weight, 400);
	line-height: var(--body-line-height, 1.4);
	color: var(--color-content-text, var(--meda-content-text));
}

.c-blog-grid .w-grid-item-h > .w-vwrapper:not(.c-blog-grid-item) .w-btn,
.c-blog-grid__content .w-btn {
	align-self: flex-start;
	margin-top: auto;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.c-blog-archive .c-section__intro .c-section__content,
	.c-blog-related .c-section__intro .c-section__content {
		margin-top: 2rem;
	}

	.c-blog-grid.w-grid {
		--gap: 1.5rem !important;
	}

	.c-blog-grid .w-grid-item {
		max-width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-blog-grid .w-grid-item-h,
	.c-blog-grid__featured-image a,
	.c-blog-grid__featured-image img,
	.ma-author-card__photo {
		transition: none !important;
		will-change: auto;
	}
}

/* -------------------------------------------------------------------------
   Author card — medically reviewed by (blog single)
   Same white card, offset shadow, and gold name as the team grid.
   ------------------------------------------------------------------------- */

.ma-author-card {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
	margin: var(--meda-space-sm) 0;
	padding: 1.25rem;
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.12);
	font-family: var(--body-font-family, var(--font-family, var(--meda-body-font)));
	color: var(--color-content-text, var(--meda-content-text));
	line-height: var(--body-line-height, 1.5);
}

.ma-author-card__photo-wrap {
	flex-shrink: 0;
	display: block;
	width: 8.75rem;
	overflow: hidden;
	line-height: 0;
}

.ma-author-card__photo-wrap:focus-visible {
	outline: 2px solid var(--meda-gold);
	outline-offset: 3px;
}

.ma-author-card__photo {
	display: block;
	width: 8.75rem;
	height: 8.75rem;
	object-fit: cover;
	object-position: 50% 15%;
	transition: transform var(--meda-duration-fast) var(--meda-ease);
}

.no-touch .ma-author-card__photo-wrap:hover .ma-author-card__photo {
	transform: scale(var(--meda-image-zoom-portrait, 1.04));
}

.ma-author-card__content {
	flex: 1;
	min-width: 0;
}

.ma-author-card__label {
	display: block;
	margin: 0 0 0.35rem;
	font-size: var(--meda-text-base);
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--meda-gold);
}

.ma-author-card__name {
	display: inline-block;
	margin: 0 0 0.35rem;
	font-family: var(--body-font-family, var(--font-family, var(--meda-body-font)));
	font-size: var(--meda-text-lg);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	background: var(--meda-gold-gradient) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
}

.ma-author-card__name:focus-visible {
	outline: 2px solid var(--meda-gold);
	outline-offset: 3px;
}

.ma-author-card__credentials,
.ma-author-card__bio,
.ma-author-card__ahpra {
	margin: 0;
	font-size: var(--meda-text-base);
	font-weight: var(--body-font-weight, 400);
	line-height: var(--body-line-height, 1.5);
	color: var(--color-content-text, var(--meda-content-text));
}

.ma-author-card__credentials {
	margin-bottom: 0.75rem;
	font-weight: 500;
}

.ma-author-card__ahpra {
	margin-top: 0.75rem;
}

@media (max-width: 600px) {
	.ma-author-card {
		flex-direction: column;
		gap: 1rem;
	}
}

/* -------------------------------------------------------------------------
   Blog single — typography (staging parity: xlg title, md h2, lg-body h3)
   Scoped to single content so site-wide heading hierarchy stays intact.
   ------------------------------------------------------------------------- */

body.single-blog .c-treatment-header h1,
body.single-blog .c-treatment-header .vc_custom_heading {
	margin: 0;
	font-family: var(--h2-font-family);
	font-size: var(--meda-text-fluid-display);
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
	max-width: min(48rem, 92vw);
	margin-inline: auto;
	text-wrap: balance;
	color: var(--meda-content-heading);
}

body.single-blog .c-blog-single-content .w-post-elm.post_content,
body.single-blog .blog-description {
	font-family: var(--body-font-family, var(--font-family, var(--meda-body-font)));
	font-size: var(--meda-body-font-size, 1rem);
	font-weight: var(--body-font-weight, 400);
	line-height: var(--body-line-height, 1.5);
	color: var(--color-content-text, var(--meda-content-text));
}

body.single-blog .c-blog-single-content .w-post-elm.post_content > :first-child,
body.single-blog .blog-description > :first-child {
	margin-top: 0;
	padding: 0;
}

/* Article h2 — staging .md-font,h2 (~32px), not theme display h2 */
body.single-blog .c-blog-single-content .w-post-elm.post_content h2,
body.single-blog .blog-description h2 {
	margin: 2rem 0 0.75rem;
	font-family: var(--h3-font-family, var(--h2-font-family));
	font-size: var(--h3-font-size);
	font-weight: var(--h3-font-weight, 500);
	line-height: var(--h3-line-height, 1.25);
	letter-spacing: var(--h3-letter-spacing, 0);
	text-transform: var(--h3-text-transform, none);
	color: var(--color-content-heading, var(--meda-content-heading));
}

/* Article h3/h4 — staging .lg-body-text,h3,h4 (~20px) */
body.single-blog .c-blog-single-content .w-post-elm.post_content h3,
body.single-blog .c-blog-single-content .w-post-elm.post_content h4,
body.single-blog .blog-description h3,
body.single-blog .blog-description h4 {
	margin: 1.5rem 0 0.5rem;
	font-family: var(--body-font-family, var(--font-family, var(--meda-body-font)));
	font-size: var(--meda-text-fluid-lead);
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-content-heading, var(--meda-content-heading));
}

/* -------------------------------------------------------------------------
   Blog archive — pagination (Pattern A parity with Read More CTAs)
   Overrides Impreza grid-pagination.css circular defaults inside c-blog-grid.
   ------------------------------------------------------------------------- */

.c-blog-archive .c-blog-grid .pagination.navigation {
	margin-top: 2.5rem;
}

.c-blog-archive .c-blog-grid .pagination .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.c-blog-archive .c-blog-grid .pagination > :not(.custom) .page-numbers,
.c-blog-archive .c-blog-grid .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 2.25rem;
	height: auto;
	min-height: 2.25rem;
	padding: 0.625rem 0.75rem;
	margin: 0;
	overflow: visible;
	border-radius: 5px;
	border: 1px solid var(--meda-gold, #a58b46);
	background: transparent;
	box-shadow: none;
	font-family: var(--meda-body-font);
	font-size: var(--meda-text-base);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--meda-gold, #a58b46);
	transition:
		background-color var(--meda-btn-fill-duration, 0.45s) var(--meda-ease),
		border-color var(--meda-btn-fill-duration, 0.45s) var(--meda-ease),
		color var(--meda-btn-fill-duration, 0.45s) var(--meda-ease),
		transform var(--meda-btn-hover-duration, 0.55s) var(--meda-ease),
		box-shadow var(--meda-btn-hover-duration, 0.55s) var(--meda-ease);
}

.c-blog-archive .c-blog-grid .pagination .page-numbers::before {
	display: none !important;
}

.c-blog-archive .c-blog-grid .pagination .page-numbers span {
	position: relative;
	z-index: 1;
	font-size: inherit;
	color: inherit;
	vertical-align: middle;
}

.c-blog-archive .c-blog-grid .pagination a.page-numbers {
	color: var(--meda-gold, #a58b46);
}

.c-blog-archive .c-blog-grid .pagination .page-numbers.current {
	background: var(--meda-gold, #a58b46);
	border-color: var(--meda-gold, #a58b46);
	color: #fff !important;
	pointer-events: none;
}

.no-touch .c-blog-archive .c-blog-grid .pagination a.page-numbers:not(.current):hover,
.c-blog-archive .c-blog-grid .pagination a.page-numbers:not(.current):focus-visible {
	background: var(--meda-gold, #a58b46) !important;
	border-color: var(--meda-gold, #a58b46) !important;
	color: #fff !important;
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(165, 139, 70, 0.2);
}

.no-touch .c-blog-archive .c-blog-grid .pagination a.page-numbers:not(.current):hover span,
.c-blog-archive .c-blog-grid .pagination a.page-numbers:not(.current):focus-visible span {
	color: #fff;
}

.c-blog-archive .c-blog-grid .pagination .page-numbers.dots {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--meda-content-text) !important;
	min-width: auto;
	padding-inline: 0.25rem;
}

.c-blog-archive .c-blog-grid .pagination > :not(.custom) .page-numbers.prev,
.c-blog-archive .c-blog-grid .pagination > :not(.custom) .page-numbers.next {
	min-width: 2.25rem;
	padding-inline: 0.75rem;
}

/* EXEMPT from the 16px floor: font-size 0 hides the "Previous"/"Next" label text so only the arrow glyph shows. Raising this reveals the words. */
.c-blog-archive .c-blog-grid .pagination > :not(.custom) .page-numbers.prev span,
.c-blog-archive .c-blog-grid .pagination > :not(.custom) .page-numbers.next span {
	font-size: 0;
}

/* EXEMPT from the 16px floor: sizes the decorative ::after arrow glyph, not readable text, so the floor does not apply. */
.c-blog-archive .c-blog-grid .pagination > :not(.custom) .page-numbers.prev::after,
.c-blog-archive .c-blog-grid .pagination > :not(.custom) .page-numbers.next::after {
	font-size: 14px;
	color: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.c-blog-archive .c-blog-grid .pagination .page-numbers {
		transition: none;
	}

	.no-touch .c-blog-archive .c-blog-grid .pagination a.page-numbers:not(.current):hover,
	.c-blog-archive .c-blog-grid .pagination a.page-numbers:not(.current):focus-visible {
		transform: none;
	}
}