/**
 * MC Journal — Medico Competente Journal
 * Verbatim da Figma node 1868:4 (file BpYfeJDs9QdXWFNVbaf74R).
 * Classi prefissate .mcj- e scopate sotto .mcj-page (convenzione tema anma-3).
 */

.mcj-page { font-family: var(--f); color: var(--c-dark); background: #fff; }
.mcj-page *,
.mcj-page *::before,
.mcj-page *::after { box-sizing: border-box; }

/* =========================================================
   1. Hero
   ========================================================= */
.mcj-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 568px;
	padding: 80px 120px;
	background-color: var(--c-primary);
	background-size: cover;
	background-position: center;
}
/* Il velo tiene leggibile il testo su qualunque immagine arrivi, e
   finché non ne arriva nessuna è lui a dare la sfumatura sul blu. */
.mcj-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(26,82,118,.92) 0%, rgba(26,82,118,.65) 45%, rgba(26,82,118,.15) 75%, rgba(26,82,118,0) 100%);
}
.mcj-hero__left {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	width: 620px;
	max-width: 100%;
}
.mcj-bc { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mcj-bc a { color: rgba(255,255,255,.6); font-weight: 500; text-decoration: none; }
.mcj-bc a:hover { text-decoration: underline; }
.mcj-bc__sep { color: rgba(255,255,255,.6); }
.mcj-bc__current { color: #fff; font-weight: 500; }
.mcj-hero__kicker { color: var(--c-green, #80bd1b); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; }
.mcj-hero__sub { margin: 0; font-size: 17px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,.88); }
.mcj-hero__desc { margin: 0; font-size: 15px; font-weight: 400; line-height: 1.6; color: rgba(255,255,255,.72); }
.mcj-hero__ctas { display: flex; gap: 12px; padding-top: 4px; flex-wrap: wrap; }
.mcj-hcta {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 26px; border-radius: 8px;
	font-size: 15px; font-weight: 700; text-decoration: none;
}
.mcj-hcta svg { display: block; font-size: 18px; }
.mcj-hcta--solid { background: var(--c-red, #c0392b); color: #fff; }
.mcj-hcta--solid:hover { filter: brightness(1.08); }
.mcj-hcta--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.mcj-hcta--ghost:hover { background: rgba(255,255,255,.12); }

/* ===== Fascia dei dati, come sul Manuale ===== */
.mcj-meta {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 22px 120px; background: var(--c-green, #80bd1b); color: #fff;
}
.mcj-meta__chip { display: flex; flex-direction: column; gap: 4px; }
.mcj-meta__lbl { font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.mcj-meta__val { font-size: 18px; font-weight: 700; }

/* ===== Due colonne ===== */
.mcj-content {
	display: flex; align-items: flex-start; gap: 40px;
	max-width: 1200px; margin: 0 auto;
	padding: 64px 120px 80px; background: #fff;
}
/* padding + max-width non bastano: il tetto vale sul content box, quindi
   oltre i 1440 la fascia resterebbe larga 1200 + 240 di padding. */
.mcj-content { box-sizing: content-box; }
.mcj-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 48px; }

.mcj-breadcrumb a { color: var(--c-primary); text-decoration: none; }
.mcj-breadcrumb a:hover { text-decoration: underline; }
.mcj-breadcrumb__sep { color: var(--c-gray); }
.mcj-breadcrumb__current { color: var(--c-primary); }



.mcj-hero__title {
	margin: 0;
	font-size: 52px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}



/* =========================================================
   2. Feature card — edizione corrente
   ========================================================= */
.mcj-feature {
	padding: 64px 120px 80px;
	background: #fff;
}
.mcj-card {
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
	background: var(--c-bg-light);
	border: 1px solid #e5ebf0;
	border-radius: 16px;
	overflow: hidden;
}
.mcj-card__cover {
	flex: 0 0 260px;
	width: 260px;
	align-self: stretch;
	min-height: 360px;
	background-color: var(--c-primary);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mcj-cover__ph {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.9);
	text-align: center;
	padding: 0 16px;
}
.mcj-card__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 48px 48px 48px 8px;
	max-width: 740px;
}
.mcj-card__kicker {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--c-orange);
}
.mcj-card__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--c-primary);
}
.mcj-card__desc {
	margin: 0;
	max-width: 684px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-gray);
}
.mcj-gated {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 684px;
	padding: 16px 20px;
	background: #fcf1d9;
	border-radius: 8px;
}
.mcj-gated__txt { display: flex; flex-direction: column; gap: 2px; }
.mcj-gated__eyebrow {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--c-primary);
}
.mcj-gated__txt p {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--c-dark);
}
.mcj-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 14px 24px;
	background: var(--c-primary);
	border-radius: 6px;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.mcj-cta span { font-size: 16px; font-weight: 700; }
.mcj-cta:hover { background: #164968; }

/* =========================================================
   3. Archivio numeri precedenti
   ========================================================= */
.mcj-archivio {
	display: flex;
	flex-direction: column;
	gap: 24px;
	/* 120px come .mcj-feature e .mcj-hero: con 180 l'archivio rientrava di
	   60px per lato rispetto alla card in evidenza sopra. Sotto i 1200px i
	   breakpoint allineavano già le due fasce a 40px. */
	padding: 80px 120px 96px;
	background: #fff;
}
/* Stesso tetto della card in evidenza, che si ferma a 1200px e si centra:
   senza, oltre i 1440px l'archivio continuava ad allargarsi col viewport
   mentre la card restava ferma. Fino a 1440 le due misure coincidono, ed
   è il motivo per cui il disallineamento si vede solo su schermi grandi. */
.mcj-arch-layout {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	align-items: flex-start;
	gap: 40px;
}
/* L'archivio sta a sinistra, la colonna MY ANMA a destra. La card del
   numero corrente resta a tutta larghezza: è la vetrina della pagina e
   la sua copertina da 420px non starebbe in 760. */
.mcj-arch-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.mcj-arch__head { display: flex; flex-direction: column; gap: 8px; }
.mcj-arch__num {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--c-orange);
}
.mcj-arch__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	color: var(--c-primary);
}
.mcj-arch__desc {
	margin: 0;
	max-width: 1080px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-gray);
}

.mcj-accordion { display: flex; flex-direction: column; gap: 12px; }

.mcj-year {
	background: #fff;
	border: 1px solid #d9dee3;
	border-radius: 8px;
	overflow: hidden;
}
.mcj-year__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
}
.mcj-year__head::-webkit-details-marker { display: none; }
.mcj-year__left {
	display: flex;
	align-items: baseline;
	gap: 16px;
}
.mcj-year__anno {
	font-size: 22px;
	font-weight: 700;
	color: var(--c-primary);
}
.mcj-year__count {
	font-size: 14px;
	font-weight: 400;
	color: var(--c-gray);
}
.mcj-year__chev {
	font-size: 14px;
	font-weight: 700;
	color: var(--c-gray);
	transition: transform 0.15s ease, color 0.15s ease;
}
.mcj-year[open] .mcj-year__chev {
	transform: rotate(180deg);
	color: var(--c-primary);
}

.mcj-year__body {
	padding: 24px;
	border-top: 1px solid #d9dee3;
}
.mcj-issues {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.mcj-issue {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 238px;
}
.mcj-issue__cover {
	position: relative;
	width: 238px;
	height: 336px;
	border-radius: 6px;
	overflow: hidden;
	background-color: var(--c-primary);
	background-image: linear-gradient(150deg, #1a5276 0%, #2e86c1 100%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mcj-cover__ph--sm {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.mcj-issue__zoom {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--c-primary);
	border-radius: 18px;
	color: var(--c-primary);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	padding: 0;
}
.mcj-issue__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
}
.mcj-issue__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-primary);
}

/* =========================================================
   Lightbox copertina
   ========================================================= */
.mcj-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	background: rgba(15, 28, 40, 0.85);
}
.mcj-lightbox__img {
	width: min(90vw, 560px);
	height: min(85vh, 780px);
	background-color: var(--c-primary);
	background-image: linear-gradient(150deg, #1a5276 0%, #2e86c1 100%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.mcj-lightbox__close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 22px;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1200px) {
	.mcj-hero { padding: 48px 40px; }
	.mcj-feature { padding: 56px 40px; }
	.mcj-archivio { padding: 56px 40px 72px; }
	.mcj-hero__title { font-size: 40px; }
}
@media (max-width: 840px) {
	.mcj-card { flex-direction: column; align-items: stretch; }
	.mcj-card__cover { width: 100%; flex-basis: auto; min-height: 360px; }
	.mcj-card__content { padding: 32px 24px; }
}
@media (max-width: 560px) {
	.mcj-hero { padding: 40px 20px; }
	.mcj-meta { padding: 20px; }
	.mcj-content { padding: 40px 20px 56px; }
	.mcj-hero__title { font-size: 32px; }
	.mcj-issue,
	.mcj-issue__cover { width: 100%; }
	.mcj-issue__cover { height: auto; aspect-ratio: 238 / 336; }
}

/* ---- Icone del set al posto dei glifi (2026-10-20) ----
   anma_icon() stampa SVG da 1em con currentColor: la misura la decide
   il font-size del contenitore, già impostato più sopra, e dentro ai
   contenitori flex l'allineamento lo fa align-items. */
.mcj-cta svg,
.mcj-year__chev svg,
.mcj-issue__zoom svg,
.mcj-issue__pdf-ic svg{display:block}
/* Il lucchetto sta in un riquadro da 32px: a 1em del testo intorno
   sarebbe minuto. */
/* La freccia dell'anno ruota già su [open] con la regola più sopra:
   qui basta che l'SVG non porti con sé la correzione di linea di base. */
.mcj-year__chev{font-size:20px;display:flex;align-items:center}
.mcj-issue__zoom{font-size:16px}

/* ---- Sotto i 1120 la colonna scende sotto l'archivio ---- */
@media (max-width: 1120px) {
	.mcj-arch-layout { flex-direction: column; }
	.mcj-arch-main,
	.mcj-arch-layout .anma-side { width: 100%; }
}

/* ================================================================
   Rifacimento sull impianto del Manuale (2026-10-20)
   Le regole qui sotto spengono quel che restava dell impaginazione
   precedente, dove archivio e numero erano due fasce a tutta
   larghezza invece che il contenuto di una colonna.
================================================================ */
.mcj-archivio { padding: 0; background: none; }
.mcj-feature { padding: 0; }
.mcj-card { max-width: none; margin: 0; }

@media (max-width: 1200px) {
	.mcj-hero { padding-left: 40px; padding-right: 40px; }
	.mcj-meta { padding-left: 40px; padding-right: 40px; }
	.mcj-content { padding-left: 40px; padding-right: 40px; }
}
/* Sotto i 1120 la colonna MY ANMA scende sotto il contenuto. */
@media (max-width: 1120px) {
	.mcj-content { flex-direction: column; }
	.mcj-body,
	.mcj-content .anma-side { width: 100%; }
}
@media (max-width: 840px) {
	.mcj-meta { flex-wrap: wrap; gap: 16px 32px; }
	.mcj-hero { min-height: 0; padding-top: 56px; padding-bottom: 56px; }
	.mcj-hero__title { font-size: 34px; }
}

/* ---- I margini di pagina sugli schermi stretti ----
   In fondo al file apposta: il blocco a 1200 qui sopra ha la stessa
   specificità e, a parità, comanda l'ultimo. */
@media (max-width: 560px) {
	.mcj-hero { padding-left: 20px; padding-right: 20px; }
	.mcj-meta { padding-left: 20px; padding-right: 20px; }
	.mcj-content { padding-left: 20px; padding-right: 20px; }
}