/**
 * Single récit: article header, hero treatments, related-content galleries
 * and résonance cards.
 *
 * Adapted from sliceofcactus-astro/src/pages/recits/[id].astro and
 * sliceofcactus-astro/public/css/style.css. The --accent variables and the
 * .mag-runhead recoloring live in assets/styles/templates/archive-recit.css,
 * shared with the archive template — this file reuses that same .mag-runhead
 * markup for the masthead layouts below.
 *
 * .article__masthead (+ --cover variant, the Anton banner also used by the
 * archive's .journal-name) always runs — the soc_recit_hero_layout ACF field
 * only changes what happens to the featured image itself: .article__plate
 * ("plate"), the masthead's own background ("cover"), or .article__snapshot
 * tucked beside the body text ("margin").
 *
 * The "Résonne avec" cards at the foot of the article are the shared
 * .rmosaic* mosaic (assets/styles/components/resonance-mosaic.css), same
 * presentation as the À propos page.
 */

.soc-recit-main {
	margin-top: 60px;
}

.article {
	max-width: 680px;
	margin: 0 auto;
	padding: 0 clamp(1.2rem, 4vw, 3rem);
}

.article__body {
	position: relative;
	margin: 4rem auto 0;
	color: #2b2721;
	font-family: var(--font-body);
	font-size: 1.2rem;
	line-height: 1.8;
}

.article__stamp {
	position: absolute;
	z-index: 2;
	top: -6.6rem;
	right: -180px;
	display: block;
	padding: .7rem 1.1rem;
	border: 1px solid rgb(20 18 16 / 35%);
	border-radius: 2px;
	background: var(--flash);
	box-shadow: 0 14px 28px -16px rgb(20 18 16 / 45%);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1rem;
	font-style: italic;
	text-decoration: none;
	transform: rotate(-3deg);
	transition: transform .3s var(--ease);
}

.article__stamp:hover {
	transform: rotate(0deg);
}

.article__stamp-label {
	display: block;
	margin-bottom: .25rem;
	color: rgb(20 18 16 / 75%);
	font-family: var(--font-mono);
	font-size: .62rem;
	font-style: normal;
	letter-spacing: .16em;
	text-transform: uppercase;
}

@media (max-width: 700px) {
	.article__stamp {
		position: static;
		margin: 0 0 1.6rem;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.article__stamp {
		transition-duration: .01ms;
	}
}

.article__body p {
	margin: 0 0 1.35rem;
}

.article__body p:first-of-type::first-letter {
	float: left;
	padding: .06em .12em 0 0;
	color: var(--accent);
	font-family: var(--font-head);
	font-size: 4.4rem;
	line-height: .72;
}

.article__masthead {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 3.4rem var(--gutter) 2.2rem;
	border-bottom: 3px double var(--paper);
	background: var(--accent);
	color: var(--paper);
	text-align: center;
}

.article__masthead-title {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 900;
	font-size: clamp(2.4rem, 6vw, 6.2rem);
	letter-spacing: .01em;
	line-height: 1.02;
	text-transform: uppercase;
	text-wrap: balance;
}

.article__masthead--cover {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 50vh;
	background-position: center;
	background-size: cover;
}

.article__masthead--cover::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(20 18 16 / 15%) 0%, rgb(27 49 73 / 55%) 55%, var(--accent-deep) 100%);
	content: "";
}

.article__masthead--cover .article__masthead-inner {
	position: relative;
	width: 100%;
}

.article__plate {
	width: min(980px, calc(100vw - var(--gutter) - var(--gutter)));
	max-width: none;
	margin-top: 1.4rem;
	margin-bottom: 2.2rem;
	margin-inline: 50%;
	transform: translateX(-50%);
}

.article__plate-mark {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .5rem;
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.article__plate-frame {
	padding: 10px;
	border: 1px solid var(--accent);
	outline: 1px solid var(--accent);
	outline-offset: 4px;
}

.article__plate-frame img {
	display: block;
	width: 100%;
	height: auto;
}

.article__snapshot {
	position: relative;
	float: right;
	clear: right;
	width: 220px;
	margin: .3rem 0 1.4rem 2rem;
	padding: 9px 9px 0;
	border-radius: 3px;
	background: #fbf8f2;
	box-shadow: 0 18px 30px -14px rgb(10 8 7 / 60%);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
	transform: rotate(4deg);
}

.article__snapshot:hover {
	box-shadow: 0 34px 54px -18px rgb(10 8 7 / 72%);
	transform: rotate(0deg) scale(1.06);
}

.article__snapshot::before,
.article__snapshot::after {
	position: absolute;
	width: 46px;
	height: 20px;
	background: rgb(233 255 67 / 55%);
	box-shadow: 0 2px 4px rgb(20 18 16 / 25%);
	content: "";
}

.article__snapshot::before {
	top: -8px;
	left: 18px;
	transform: rotate(-8deg);
	z-index: 1;
}

.article__snapshot::after {
	right: 10px;
	bottom: -8px;
	transform: rotate(6deg);
}

.article__snapshot img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	filter: grayscale(.12) contrast(1.03);
}

.article__snapshot-cap {
	display: block;
	overflow: hidden;
	padding: .45rem .15rem .55rem;
	color: #5a5248;
	font-family: var(--font-mono);
	font-size: .56rem;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (max-width: 720px) {
	.article__snapshot {
		float: none;
		width: 200px;
		margin: 0 auto 1.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.article__snapshot {
		transition-duration: .01ms;
	}
}

/*
 * Related content ("Cette histoire accompagne"): the shared .mag-sommaire +
 * .more-series* blocks (assets/styles/components/magazine-hub.css), same
 * presentation as "Autres séries" on single-photo. Sits outside <article>
 * (see recit-article.php) so it runs at var(--maxw); the rules below only
 * flip that component's paper-on-dark chrome to ink-on-paper, the same way
 * .mag-runhead and .serie-resonances are flipped elsewhere in this file.
 * "Photos associées" (.article-photo-banner, below) has its own dark
 * treatment instead — a single related série reads oddly in a 3-up grid,
 * so it gets a full-width banner rather than this card pattern.
 */
.more-series--recit .mag-sommaire {
	border-top-color: rgb(20 18 16 / 22%);
	color: var(--ink);
}

.more-series--recit .mag-sommaire h2 {
	color: var(--accent);
}

.more-series--recit .mag-sommaire span {
	color: var(--grey);
}

.more-series--recit .more-series__card {
	color: var(--ink);
}

.more-series--recit .more-series__thumb {
	box-shadow: 0 14px 28px -16px rgb(20 18 16 / 35%);
}

/*
 * "Photos associées": full-width cover-image banner, same mechanics as
 * .article__masthead--cover above (image background + dark gradient for
 * legibility, text overlaid) rather than a card, since there's usually
 * just one related série to feature. Any further séries (the ACF field
 * allows more) list as plain links below instead of stacking more banners.
 */
.article-photo-banner {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-top: 4rem;
}

.article-photo-banner__link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 42vh;
	padding: 2.6rem var(--gutter);
	background-color: var(--ink);
	background-position: center;
	background-size: cover;
	color: var(--paper);
	text-decoration: none;
}

.article-photo-banner__link::before {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(20 18 16 / 10%) 0%, rgb(20 18 16 / 55%) 55%, var(--ink) 100%);
	content: "";
}

.article-photo-banner__kicker,
.article-photo-banner__title,
.article-photo-banner__meta,
.article-photo-banner__cta {
	position: relative;
	display: block;
}

.article-photo-banner__kicker {
	margin-bottom: .5rem;
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .85;
}

.article-photo-banner__title {
	font-family: var(--font-head);
	font-size: clamp(1.8rem, 4vw, 3.2rem);
	letter-spacing: .01em;
	line-height: 1.05;
	text-transform: uppercase;
	text-wrap: balance;
}

.article-photo-banner__meta {
	margin-top: .5rem;
	font-family: var(--font-mono);
	font-size: .8rem;
	letter-spacing: .06em;
	opacity: .85;
}

.article-photo-banner__cta {
	display: inline-block;
	margin-top: 1.2rem;
	padding-bottom: .1rem;
	border-bottom: 1px solid var(--paper);
	font-family: var(--font-mono);
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: opacity .3s;
}

.article-photo-banner__link:hover .article-photo-banner__cta,
.article-photo-banner__link:focus-visible .article-photo-banner__cta {
	opacity: .65;
}

.article-photo-banner__more {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	max-width: var(--maxw);
	margin: 1.2rem auto 0;
	padding: 0 var(--gutter);
	list-style: none;
}

.article-photo-banner__more a {
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .04em;
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (max-width: 700px) {
	.article-photo-banner__link {
		min-height: 32vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.article-photo-banner__cta {
		transition-duration: .01ms;
	}
}

/*
 * Sits outside <article> (see recit-article.php) so it isn't held inside the
 * 680px reading column: width and gutter come from .rmosaic-section
 * (var(--maxw)), this only sets the rhythm around it.
 */
.article__resonances {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.article__resonances-label {
	margin-bottom: 1.2rem;
	color: var(--grey);
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/*
 * The cards themselves are the shared .rmosaic* mosaic
 * (assets/styles/components/resonance-mosaic.css), same presentation as the
 * À propos page: dark --ink cards carrying their own background, so they
 * hold on this template's flat paper body without any recolouring.
 */

/*
 * Quick-access résonance tags before the related-content galleries: shared
 * .serie-resonances markup (also used by single-photo), recolored the same
 * way as elsewhere in this file — its default styling is paper-on-dark.
 */
.serie-resonances__label {
	color: var(--grey);
}

.serie-resonances__list a {
	border-color: rgb(20 18 16 / 25%);
	color: var(--ink);
}

.serie-resonances__list a:hover,
.serie-resonances__list a:focus-visible {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--paper);
}

/*
 * .back-link (magazine-hub.css) defaults to paper text for the dark
 * accent pages it was built for — invisible here, since body.single-recit
 * is a flat paper background. Same recolour as .serie-resonances__list;
 * its existing opacity-based :hover (magazine-hub.css) still applies.
 */
.back-link {
	color: var(--ink);
}