/* ============================================
   CHRU Nancy — Single Post (article de blog)
   ============================================ */

/* === Hero Band === */
.chru-post-hero-band {
	background: var(--chru-gray, #F6F6F6);
	padding: 32px 80px 40px;
	text-align: center;
}

/* Breadcrumb article : style de base dans components.css (source unique).
   Ici : contexte (layout, couleur, taille propre à l'article). */
.chru-post-hero-band .chru-breadcrumb {
	padding: 0 0 16px;
	display: flex;
	justify-content: center;
	color: var(--chru-blue-text, #2D4356);
	font-size: 0.8125rem;
}

.chru-post-hero-band .chru-breadcrumb strong {
	color: var(--chru-blue-service, #14446B);
}

.chru-post-hero__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.chru-post-hero__badge {
	display: inline-block;
	background: var(--chru-blue-light, #009FE3);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 14px;
	border-radius: 20px;
	text-decoration: none;
	transition: background 0.2s;
}

.chru-post-hero__badge:hover {
	background: var(--chru-blue-canard, #197CAA);
	color: #fff;
}

.chru-post-hero__date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: var(--chru-gray-text, #929292);
}

.chru-post-hero__date svg {
	color: var(--chru-blue-pastel, #7CA1CC);
}

.chru-post-hero__readtime {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: var(--chru-gray-text, #929292);
}

.chru-post-hero__readtime svg {
	color: var(--chru-blue-pastel, #7CA1CC);
}

.chru-post-hero__title {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--chru-blue-service, #14446B);
	max-width: 800px;
	margin: 0 auto;
}

/* === Image à la une === */
.chru-post-hero-image {
	max-width: 960px;
	margin: -20px auto 0;
	padding: 0 24px;
	position: relative;
	z-index: 1;
}

.chru-post-hero-image__inner {
	border-radius: 16px;
	overflow: hidden;
	/* Ombre douce mais nette : 12px de blur (avant 32px) — évite l'effet
	   « flou en dégradé » perçu en bas de l'image (retour client mai 2026). */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.chru-post-hero-image__inner img {
	width: 100%;
	height: auto;
	display: block;
}

/* Hero examen : format bandeau 843×413 (ratio ~2.04:1) */
.chru-single-examen .chru-post-hero-image {
	max-width: calc(843px + 48px); /* 843 d'image + 2×24px de padding */
}
.chru-single-examen .chru-post-hero-image__inner {
	aspect-ratio: 843 / 413;
}
.chru-single-examen .chru-post-hero-image__inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* === Corps de l'article === */
.chru-post-body {
	max-width: var(--container-max, 1320px);
	margin: 0 auto;
	padding: 48px 24px 64px;
}

.chru-post-body__inner {
	display: grid;
	/* 2 colonnes : sommaire (369px, harmonisé avec single-service) + contenu —
	   la sidebar « Mis à jour le » a été supprimée, la date la plus récente
	   est affichée en haut de l'article. */
	grid-template-columns: var(--sidebar-width, 369px) 1fr;
	gap: 40px;
	align-items: start;
}

/* === Sommaire sticky ===
 * Styles de base : voir components.css (.chru-sommaire) — source unique.
 * Ici on ne garde que la position sticky propre à l'article. */
.chru-single-post .chru-sommaire {
	position: sticky;
	top: 100px;
	min-width: 0;
}

.chru-post-body__main {
	min-width: 0;
}

/* Contenu éditeur */

/* Faible spécificité (:where) pour ne pas écraser les blocs CHRU */
:where(.chru-post-content) h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	margin: 2em 0 0.75em;
	scroll-margin-top: calc(var(--header-height, 150px) + 20px);
}

:where(.chru-post-content) h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--chru-blue-text, #2D4356);
	margin: 1.75em 0 0.5em;
}

:where(.chru-post-content) p {
	font-size: 1rem;
	/* Interlignage légèrement réduit pour aérer sans étaler verticalement. */
	line-height: 1.45;
	color: var(--chru-blue-text, #2D4356);
	margin-bottom: 0.7em;
}

/* Premier élément : pas de margin-top */
:where(.chru-post-content) > *:first-child {
	margin-top: 0;
}

/* Auto-espacement : tout bloc suivi d'un H2 ajoute de l'air en haut du H2.
   Règle générique : fonctionne même quand le H2 est imbriqué dans un groupe. */
:where(.chru-post-content) * + h2,
:where(.chru-post-content) * + .wp-block-heading:is(h2),
:where(.chru-post-content) .wp-block-heading + h2 {
	margin-top: 2.5em;
}

/* Espacement H3 après autre contenu (idem mais plus léger) */
:where(.chru-post-content) * + h3,
:where(.chru-post-content) * + .wp-block-heading:is(h3) {
	margin-top: 1.75em;
}

/* Paragraphe juste avant une image : resserrer (évite le double espace p + figure) */
:where(.chru-post-content) p:has(+ figure.wp-block-image),
:where(.chru-post-content) p:has(+ .wp-block-image),
:where(.chru-post-content) p:has(+ .wp-block-gallery),
:where(.chru-post-content) p:has(+ .wp-block-embed) {
	margin-bottom: 0.4em;
}

:where(.chru-post-content) a {
	color: var(--chru-blue-light, #009FE3);
	text-decoration: underline;
	text-underline-offset: 2px;
}

:where(.chru-post-content) a:hover {
	color: var(--chru-blue-canard, #197CAA);
}

/* Images directes (hors blocs CHRU et hors galerie).
   Marge resserrée pour rapprocher l'image du paragraphe. */
.chru-post-content > p > img,
.chru-post-content > figure.wp-block-image,
.chru-post-content > figure.wp-block-image img {
	border-radius: 12px;
}
.chru-post-content > figure.wp-block-image,
.chru-post-content > p > img {
	margin: 0.6em 0;
}

/* Galerie WP — bords arrondis sur les images, pas sur le wrapper figure */
.chru-post-content .wp-block-gallery .wp-block-image img,
.chru-post-content figure.wp-block-image > img,
.chru-post-content figure.wp-block-image > a > img {
	border-radius: 12px;
}

/* Légende sous l'image (pas en overlay) + crédit photo */
.chru-post-content figure.wp-block-image figcaption,
.chru-post-content .wp-block-gallery figcaption,
.chru-post-content .wp-block-image figcaption {
	position: static !important;
	background: none !important;
	color: var(--chru-gray-text, #6c6c6c) !important;
	font-size: 14px;
	font-style: italic;
	text-align: left;
	margin-top: 8px;
	padding: 0 !important;
}

.chru-post-content figcaption .chru-credit {
	display: block;
	font-size: 12px;
	font-style: normal;
	color: #888;
	margin-top: 2px;
}

/* Reset pour ne PAS appliquer le style global aux blocs CHRU custom */
.chru-post-content [class*="chru-block-"] img,
.chru-post-content [class*="wp-block-chru-"] img {
	border-radius: 0;
	margin: 0;
}

.chru-post-content blockquote {
	border-left: 4px solid var(--chru-blue-light, #009FE3);
	padding: 16px 24px;
	margin: 1.5em 0;
	background: var(--chru-gray, #F6F6F6);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: var(--chru-blue-service, #14446B);
}

.chru-post-content ul,
.chru-post-content ol {
	padding-left: 1.5em;
	/* Aligné sur margin-bottom des paragraphes (0.9em) pour un rythme homogène */
	margin-bottom: 0.9em;
}

.chru-post-content li {
	margin-bottom: 0.5em;
	line-height: 1.6;
}

/* Dernier élément : pas de margin résiduelle (homogénéise p vs ul/ol en fin de contenu) */
:where(.chru-post-content) > p:last-child,
:where(.chru-post-content) > ul:last-child,
:where(.chru-post-content) > ol:last-child {
	margin-bottom: 0;
}

/* === Tags === */
.chru-post-tags {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--chru-gray-border, #E1E1E1);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.chru-post-tags__label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--chru-blue-text, #2D4356);
}

.chru-post-tags__item {
	display: inline-block;
	background: var(--chru-gray-light, #EFF2F5);
	color: var(--chru-blue-canard, #197CAA);
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 16px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.chru-post-tags__item:hover {
	background: var(--chru-blue-light, #009FE3);
	color: #fff;
}

/* === Partage === */
.chru-post-share {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--chru-gray-border, #E1E1E1);
	display: flex;
	align-items: center;
	gap: 16px;
}

.chru-post-share__label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--chru-blue-text, #2D4356);
	white-space: nowrap;
}

.chru-post-share__links {
	display: flex;
	gap: 8px;
}

.chru-post-share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--chru-gray-border, #E1E1E1);
	background: #fff;
	color: var(--chru-blue-text, #2D4356);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.chru-post-share__btn:hover {
	background: var(--chru-blue-light, #009FE3);
	color: #fff;
	border-color: var(--chru-blue-light, #009FE3);
}

.chru-post-share__btn::after,
.chru-post-share__btn .sr-link-external {
	display: none !important;
	content: none !important;
}

.chru-post-share__btn.copied {
	background: var(--chru-green, #3FA535);
	color: #fff;
	border-color: var(--chru-green, #3FA535);
}

/* === Sidebar === */
.chru-post-body__sidebar {
	position: sticky;
	top: 100px;
	background: var(--chru-gray, #F6F6F6);
	border-radius: 12px;
	padding: 24px;
}

.chru-post-sidebar__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--chru-gray-border, #E1E1E1);
}

.chru-post-sidebar__info-label {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--chru-gray-text, #929292);
}

.chru-post-sidebar__info-value {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--chru-blue-service, #14446B);
}

.chru-post-sidebar__section {
	margin-bottom: 20px;
}

.chru-post-sidebar__section:last-child {
	margin-bottom: 0;
}

.chru-post-sidebar__title {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--chru-blue-service, #14446B);
	margin-bottom: 12px;
}

.chru-post-sidebar__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.chru-post-sidebar__cat-link {
	display: inline-block;
	background: #fff;
	color: var(--chru-blue-canard, #197CAA);
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 16px;
	text-decoration: none;
	border: 1px solid var(--chru-gray-border, #E1E1E1);
	transition: background 0.2s, color 0.2s;
}

.chru-post-sidebar__cat-link:hover {
	background: var(--chru-blue-light, #009FE3);
	color: #fff;
	border-color: var(--chru-blue-light, #009FE3);
}

.chru-post-sidebar__related {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.chru-post-sidebar__related-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	padding: 10px 12px;
	border-radius: 8px;
	transition: background 0.2s;
}

.chru-post-sidebar__related-item:hover {
	background: #fff;
}

.chru-post-sidebar__related-date {
	font-size: 0.6875rem;
	color: var(--chru-gray-text, #929292);
}

.chru-post-sidebar__related-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--chru-blue-service, #14446B);
	line-height: 1.3;
}

/* === Navigation entre articles === */
.chru-post-nav {
	background: var(--chru-gray, #F6F6F6);
	border-top: 1px solid var(--chru-gray-border, #E1E1E1);
}

.chru-post-nav__inner {
	max-width: var(--container-max, 1320px);
	margin: 0 auto;
	padding: 24px;
	display: flex;
	justify-content: space-between;
	gap: 24px;
}

.chru-post-nav__link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	padding: 12px 16px;
	border-radius: 8px;
	transition: background 0.2s;
	max-width: 45%;
}

.chru-post-nav__link:hover {
	background: #fff;
}

.chru-post-nav__link--next {
	margin-left: auto;
	text-align: right;
}

.chru-post-nav__link svg {
	flex-shrink: 0;
	color: var(--chru-blue-light, #009FE3);
}

.chru-post-nav__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--chru-gray-text, #929292);
}

.chru-post-nav__title {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--chru-blue-service, #14446B);
	line-height: 1.3;
}

/* === Section Autres articles === */
.chru-post-others {
	background: var(--chru-gray, #F6F6F6);
	padding: 56px 0 64px;
}

.chru-post-others__inner {
	max-width: var(--container-max, 1320px);
	margin: 0 auto;
	padding: 0 24px;
}

.chru-post-others__header {
	text-align: center;
	margin-bottom: 36px;
}

.chru-post-others__title {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--chru-blue-service, #14446B);
}

.chru-post-others__accent {
	color: var(--chru-blue-light, #009FE3);
}

/* === Responsive === */
@media (max-width: 768px) {
	.chru-post-hero-band {
		padding: 24px 20px 32px;
	}

	.chru-post-hero__title {
		font-size: 1.5rem;
	}

	.chru-post-hero-image {
		padding: 0 16px;
	}

	.chru-post-body {
		padding: 32px 16px 48px;
	}

	.chru-single-post .chru-sommaire {
		display: none;
	}

	.chru-post-body__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.chru-post-body__sidebar {
		position: static;
	}

	.chru-post-nav__inner {
		flex-direction: column;
	}

	.chru-post-nav__link {
		max-width: 100%;
	}

	.chru-post-nav__link--next {
		margin-left: 0;
	}

	.chru-post-share {
		flex-direction: column;
		align-items: flex-start;
	}
}
/* Fix layout quand le sommaire est absent (article sans H2) :
   contenu seul, centré. */
.chru-post-body__inner:not(:has(.chru-sommaire)) {
    grid-template-columns: minmax(0, 860px);
    justify-content: center;
}

/* Section « Services de soins concernés » : utilise les classes
   .chru-section + .chru-svc-archive__grid + .chru-card-service du
   template d'archive pour un rendu identique. Pas de styles propres ici. */

/* === Bouton « Voir tous les articles » sous la section Nos autres articles === */
.chru-post-others__cta {
    text-align: center;
    margin-top: 36px;
}

.chru-post-others__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 36px;
    border: 2px solid var(--chru-blue-service, #14446B);
    border-radius: 30px;
    background: transparent;
    color: var(--chru-blue-service, #14446B);
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.chru-post-others__cta-btn:hover,
.chru-post-others__cta-btn:focus-visible {
    background: var(--chru-blue-service, #14446B);
    color: #fff !important;
    text-decoration: none;
}

.chru-post-others__cta-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.chru-post-others__cta-btn:hover svg {
    transform: translateX(4px);
}

/* Archive examens (taxonomy type_examen) */
.chru-examen-archive {
	padding: 48px 0 64px;
}

.chru-examen-archive__count {
	font-size: 0.9375rem;
	color: var(--chru-gray-text, #929292);
	margin-bottom: 24px;
}

.chru-examen-archive__count strong {
	color: var(--chru-blue-service, #14446B);
}

.chru-examen-archive__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.chru-examen-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 28px;
	background: var(--chru-gray, #F6F6F6);
	border-radius: 14px;
	text-decoration: none;
	transition: background 0.2s, box-shadow 0.2s;
}

.chru-examen-card:hover {
	background: #EFF2F5;
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.chru-examen-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--chru-blue-service, #14446B);
	line-height: 1.4;
}

.chru-examen-card__arrow {
	flex-shrink: 0;
	color: var(--chru-blue-canard, #197CAA);
	transition: transform 0.2s;
}

.chru-examen-card:hover .chru-examen-card__arrow {
	transform: translateX(4px);
}

.chru-examen-archive__empty {
	text-align: center;
	padding: 48px 0;
	color: var(--chru-gray-text, #929292);
}

@media (max-width: 768px) {
	.chru-examen-archive__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.chru-examen-archive__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Bouton retour examens */
.chru-examen-back {
	text-align: center;
	padding: 0 24px 48px;
}

.chru-examen-back__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 36px;
	border: 2px solid #14446B;
	border-radius: 50px;
	background: transparent;
	color: #14446B;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.chru-examen-back__btn:hover {
	background: #14446B;
	color: #fff;
}

.chru-examen-back__btn svg {
	flex-shrink: 0;
}

/* Hero band bleu clair pour les pages examens */
.chru-single-examen .chru-post-hero-band {
	background: #f2fafd;
}

.chru-single-examen .chru-post-hero__title {
	line-height: 1.2;
}

/* Layout sans sommaire (pages examens) */
.chru-post-body__inner--no-sommaire {
    display: block;
    max-width: 800px;
    margin: 0 auto;
}

/* ============================================
 * EXAMEN — Hero bandeau bleu (single-examen.php)
 * ============================================ */
.chru-single-examen .chru-examen-hero {
	background: var(--chru-blue-service, #14446B);
	color: #fff;
	padding: 48px 0 56px;
}
.chru-single-examen .chru-examen-hero__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 80px;
}
/* Breadcrumb examen : style de base dans components.css. Ici : couleur blanche sur hero sombre. */
.chru-single-examen .chru-examen-hero .chru-breadcrumb,
.chru-single-examen .chru-examen-hero .chru-breadcrumb a,
.chru-single-examen .chru-examen-hero .chru-breadcrumb strong,
.chru-single-examen .chru-examen-hero .chru-breadcrumb .separator {
	color: #fff !important;
}
.chru-single-examen .chru-examen-hero__meta {
	display: flex;
	gap: 24px;
	margin: 24px 0 16px;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.9);
}
.chru-single-examen .chru-examen-hero__date,
.chru-single-examen .chru-examen-hero__readtime {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.chru-single-examen .chru-examen-hero__title {
	margin: 0;
	font-size: 45px;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}

/* Bouton retour examen */
.chru-examen-return__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 28px;
	border: 2px solid var(--chru-blue-service, #14446B);
	border-radius: 30px;
	color: var(--chru-blue-service, #14446B);
	background: #fff;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.chru-examen-return__btn:hover,
.chru-examen-return__btn:focus-visible {
	background: var(--chru-blue-service, #14446B);
	color: #fff !important;
	text-decoration: none;
}
.chru-examen-return__btn:hover svg,
.chru-examen-return__btn:focus-visible svg {
	stroke: #fff;
}

@media (max-width: 768px) {
	.chru-single-examen .chru-examen-hero {
		padding: 32px 0 40px;
	}
	.chru-single-examen .chru-examen-hero__inner {
		padding: 0 20px;
	}
	.chru-single-examen .chru-examen-hero__title {
		font-size: 32px;
	}
}