/*
 * MNK Monkey Theatre — case-study.css
 * Riproduce il progetto Ohio "type 5" (misure produzione a 390 / 1440 / 1920px).
 */

/* ---------- Hero ---------- */
.mnk-cs-hero { position: relative; height: 75vh; min-height: 420px; overflow: hidden; background: var(--wp--preset--color--base); }
.mnk-cs-hero--empty { height: var(--mnk-header-h); min-height: 0; }
.mnk-cs-hero__media { position: absolute; inset: -8% 0 0 0; will-change: transform; }
.mnk-cs-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.mnk-cs-hero::after { content: ""; position: absolute; inset: 0; background: rgba(22, 21, 25, 0.3); pointer-events: none; }
@media (min-width: 1181px) { .mnk-cs-hero { height: 75vh; min-height: 560px; } }

/* ---------- Intestazione (headline Ohio) ---------- */
.mnk-cs-intro { display: grid; gap: 20px; padding-top: 42px; padding-bottom: 31px; }
.mnk-cs-intro__eyebrow { margin-bottom: 8px; color: var(--mnk-text-color); }
.mnk-cs-intro__title { font-size: var(--mnk-h1-project); line-height: 1.05; letter-spacing: -0.045em; }
.mnk-cs-intro__desc { margin-top: 20px; }
.mnk-cs-intro__label { margin-bottom: 2px; }
.mnk-cs-intro__brief { color: var(--mnk-white); font-family: var(--wp--preset--font-family--heading); font-size: var(--mnk-h4); font-weight: 600; line-height: 1.3; letter-spacing: -0.03em; }
.mnk-cs-intro__brief p { margin: 0 0 0.6em; }
.mnk-cs-intro__brief p:last-child { margin: 0; }
.mnk-cs-intro__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 32px; margin: 32px 0 0; }
.mnk-cs-intro__field { padding-top: 24px; border-top: 1px solid var(--mnk-line); }
.mnk-cs-intro__field dt { color: var(--mnk-text-color); font-weight: 600; line-height: 1.6; }
.mnk-cs-intro__field dd { margin: 4px 0 0; font-size: 18.05px; line-height: 1.6; }
@media (min-width: 1181px) {
	.mnk-cs-intro { grid-template-columns: 1fr 1fr; gap: 0; padding-top: 62px; padding-bottom: 62px; }
	.mnk-cs-intro__main { max-width: 80%; }
	.mnk-cs-intro__title { line-height: 1; }
	.mnk-cs-intro__aside { padding-left: 16px; }
	.mnk-cs-intro__fields { grid-template-columns: repeat(4, 1fr); gap: 0 28px; margin-top: 24px; }
	.mnk-cs-intro__fields:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
	.mnk-cs-intro__fields:not(:has(> :nth-child(3))) { grid-template-columns: repeat(4, 1fr); }
}

.mnk-cs-note { margin: 0 0 48px; color: var(--mnk-text-color); }
.mnk-cs-kpi { padding-bottom: 64px; }

/* ---------- Galleria principale (slider Ohio) ---------- */
.mnk-cs-gallery { overflow: hidden; padding-bottom: 42px; }
@media (min-width: 1181px) { .mnk-cs-gallery { padding-bottom: 32px; } }
.mnk-carousel--project .mnk-carousel__track {
	margin-inline: calc(-1 * var(--mnk-page-margin));
	padding-inline: var(--mnk-page-margin);
	scroll-padding-inline: var(--mnk-page-margin);
	gap: 40px;
}
.mnk-carousel--project .mnk-carousel__slide { scroll-snap-align: start; }
.mnk-carousel--project .mnk-carousel__slide img { border-radius: 8px; aspect-ratio: 1920 / 1102; object-fit: cover; }
.mnk-carousel--project .mnk-carousel__controls { margin-top: 28px; }
/* Con JS: slider infinito a trasformazione (stage Ohio), slide larga quanto il contenitore. */
.mnk-carousel--project.is-ready .mnk-carousel__track { margin-inline: 0; padding-inline: 0; overflow: visible; scroll-snap-type: none; cursor: grab; touch-action: pan-y; will-change: transform; }
/* Slide centrata con lato lungo massimo 1440px (84% dello schermo sotto i 1714px), vicine ai lati. */
.mnk-carousel--project.is-ready .mnk-carousel__slide { flex: 0 0 min(1440px, 84vw); }
.mnk-carousel--project.is-dragging .mnk-carousel__track { cursor: grabbing; }
.mnk-carousel--project .mnk-carousel__slide img { -webkit-user-drag: none; user-select: none; }

/* ---------- Capitoli ---------- */
.mnk-cs-chapter { padding-top: 96px; }
.mnk-cs-chapter__eyebrow {
	margin: 0;
	color: var(--mnk-white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16.72px; font-weight: 400; line-height: 1.4; text-transform: uppercase;
}
.mnk-cs-chapter__title { font-size: 36px; line-height: 1.15; letter-spacing: -0.04em; }
/* Linea superiore del capitolo (divider Ohio), anche su mobile. */
.mnk-cs-chapter--standard .mnk-cs-chapter__head { padding-top: 21px; border-top: 1px solid var(--mnk-line); }
.mnk-cs-chapter__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; }
.mnk-cs-chapter__texts { display: grid; gap: 0 32px; margin-bottom: 70px; }
.mnk-cs-chapter__texts .mnk-prose p:last-child { margin-bottom: 0; }
.mnk-cs-chapter__media { margin: 0; }
.mnk-cs-chapter__media img { width: 100%; }
.mnk-cs-chapter__media--bleed { max-width: 1440px; }
.mnk-cs-chapter__media--lead { margin-bottom: 64px; }
.mnk-cs-chapter__media figcaption { margin-top: 8px; font-size: 15px; color: var(--mnk-muted); }
.mnk-cs-chapter--r0 img { border-radius: 0; }
.mnk-cs-chapter--r8 .mnk-cs-chapter__media img, .mnk-cs-chapter--r8 .mnk-cs-item img { border-radius: 8px; }
.mnk-cs-chapter--r16 .mnk-cs-chapter__media img, .mnk-cs-chapter--r16 .mnk-cs-item img { border-radius: 16px; }

/* Elementi (griglia con titolo e sottotitolo sopra l'immagine). */
.mnk-cs-items { display: grid; gap: 64px 32px; }
.mnk-cs-item { display: flex; flex-direction: column; }
.mnk-cs-item__head { margin-bottom: 32px; }
.mnk-cs-item__title { font-size: var(--mnk-h4); letter-spacing: -0.03em; line-height: 1.2; }
.mnk-cs-item__title--h3 { font-size: var(--mnk-h3); line-height: 1.15; letter-spacing: -0.035em; }
.mnk-cs-item__title--h5 { font-size: var(--mnk-h5); line-height: 1.3; letter-spacing: -0.025em; }
.mnk-cs-item__subtitle { margin: 8px 0 0; color: var(--mnk-muted); font-size: 17.48px; font-weight: 500; line-height: 1.6; }
.mnk-cs-item img { width: 100%; }

@media (min-width: 769px) {
	.mnk-cs-items--2, .mnk-cs-items--3 { grid-template-columns: repeat(2, 1fr); }
	.mnk-cs-chapter__texts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1181px) {
	.mnk-cs-chapter { padding-top: 86px; }
	.mnk-cs-chapter__texts { margin-bottom: 81px; }
	.mnk-cs-items--3 { grid-template-columns: repeat(3, 1fr); }

	/* Standard: linea, sopratitolo a sinistra, titolo grande a destra. */
	.mnk-cs-chapter--standard .mnk-cs-chapter__head {
		flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 32px;
		padding-top: 21px; border-top: 1px solid var(--mnk-line); margin-bottom: 80px;
	}
	.mnk-cs-chapter--standard .mnk-cs-chapter__eyebrow { flex: 0 0 auto; padding-top: 0; }
	.mnk-cs-chapter--standard .mnk-cs-chapter__title { max-width: 75%; font-size: var(--mnk-h2-display); line-height: 1.05; text-align: right; }
	.mnk-cs-chapter--standard .mnk-cs-chapter__texts { grid-template-columns: repeat(4, 1fr); }
	/* Immagine che sborda di 16px per lato, ma con lato lungo massimo 1440px (centrata). */
	.mnk-cs-chapter--standard .mnk-cs-chapter__media--bleed { margin-inline: calc((100% - min(1440px, 100% + 32px)) / 2); }
	.mnk-cs-chapter--r16 .mnk-cs-chapter__media--bleed img { border-radius: 8px; }

	/* Titolo a sinistra, testi su due colonne a destra. */
	.mnk-cs-chapter--titolo_sinistra .mnk-cs-chapter__head { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-bottom: 81px; }
	.mnk-cs-chapter--titolo_sinistra .mnk-cs-chapter__head-title { display: flex; flex-direction: column; gap: 20px; }
	.mnk-cs-chapter--titolo_sinistra .mnk-cs-chapter__title { font-size: var(--mnk-h2); line-height: 1.05; }
	.mnk-cs-chapter--titolo_sinistra .mnk-cs-chapter__texts { grid-template-columns: repeat(2, 1fr); margin: 40px 0 0; }
}

/* Riquadro: testo a sinistra, media a destra. */
.mnk-cs-chapter__box { display: grid; gap: 32px; margin-inline: -16px; padding: 32px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.04); }
.mnk-cs-chapter--box .mnk-cs-chapter__title { margin: 10px 0 20px; font-size: var(--mnk-h3); line-height: 1.15; letter-spacing: -0.035em; }
.mnk-cs-chapter--box .mnk-cs-chapter__texts { margin-bottom: 0; grid-template-columns: 1fr; }
.mnk-cs-chapter--box .mnk-cs-chapter__media img, .mnk-cs-chapter--box .mnk-video { border-radius: 0; }
@media (min-width: 1181px) {
	.mnk-cs-chapter--box { padding-top: 64px; }
	.mnk-cs-chapter__box { grid-template-columns: 1fr 1fr; gap: 26px; padding: 32px 26px; align-items: start; }
}

/* Vetrina: titolo centrato, griglia in un riquadro, didascalie sotto centrate. */
.mnk-cs-chapter--vetrina .mnk-cs-chapter__head { align-items: center; text-align: center; margin-bottom: 29px; }
.mnk-cs-chapter--vetrina .mnk-cs-chapter__eyebrow { display: none; }
.mnk-cs-chapter--vetrina .mnk-cs-chapter__title { max-width: none; font-size: var(--mnk-h2); line-height: 1.05; }
.mnk-cs-chapter__showcase { margin-inline: -16px; padding: 40px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.04); }
.mnk-cs-chapter__showcase .mnk-cs-items { justify-content: center; gap: 32px; }
.mnk-cs-chapter__showcase .mnk-cs-item { align-items: center; text-align: center; }
.mnk-cs-chapter__showcase .mnk-cs-item img { max-width: 329px; }
.mnk-cs-chapter__showcase .mnk-cs-item__head { margin: 20px 0 0; }
@media (min-width: 1181px) {
	.mnk-cs-chapter--vetrina { padding-top: 58px; }
	.mnk-cs-chapter__showcase { padding: 40px 47px; }
	.mnk-cs-chapter__showcase .mnk-cs-items--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Risultati (contatori) ---------- */
/* Mobile (come Ohio): titolo, testo, contatori uno per riga, immagine. */
.mnk-cs-results { display: flex; flex-direction: column; }
.mnk-cs-results__main, .mnk-cs-results__aside { display: contents; }
.mnk-cs-results__head { order: 1; }
.mnk-cs-results .mnk-prose { order: 2; }
.mnk-cs-results .mnk-kpi { order: 3; margin: 51px 0 0; grid-template-columns: 1fr; row-gap: 51px; }
.mnk-cs-results__media { order: 4; margin: 70px 0 0; }
.mnk-cs-results__title { font-size: var(--mnk-h2); line-height: 1.05; }
.mnk-cs-results__media img { width: 100%; border-radius: 8px; }
@media (min-width: 769px) { .mnk-cs-results .mnk-kpi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1181px) {
	/* Ohio: titolo | testo sulla prima riga, contatori | immagine allineati sulla seconda. */
	.mnk-cs-results { display: grid; grid-template-columns: 1fr 1fr; gap: 73px 32px; }
	.mnk-cs-results__head { grid-area: 1 / 1; }
	.mnk-cs-results .mnk-prose { grid-area: 1 / 2; }
	.mnk-cs-results .mnk-kpi { grid-area: 2 / 1; align-self: start; margin: 0; row-gap: 70px; }
	.mnk-cs-results__media { grid-area: 2 / 2; margin: 0; }
}

/* ---------- Credits ---------- */
.mnk-cs-credits { display: grid; gap: 32px; }
.mnk-cs-credits__heading { padding-top: 16px; border-top: 1px solid var(--mnk-line); font-size: var(--mnk-h4); }
.mnk-cs-credits__groups { display: grid; gap: 32px; }
.mnk-cs-credits__role { margin: 0 0 12px; color: var(--mnk-muted); font-family: var(--wp--preset--font-family--body); font-size: 17.48px; font-weight: 500; letter-spacing: 0; }
.mnk-cs-credits__people { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mnk-cs-credits__people li { display: flex; flex-direction: column; }
.mnk-cs-credits__name { color: var(--mnk-white); font-weight: 600; }
.mnk-cs-credits__job { font-size: 16px; color: var(--mnk-muted); }
@media (min-width: 1181px) {
	.mnk-cs-credits { grid-template-columns: 25% 1fr; }
	.mnk-cs-credits__groups { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Recensione (fascia) ---------- */
.mnk-cs-review { margin-top: 64px; padding-block: 51px 43px; background: #23252b; }
.mnk-cs-review__grid { display: grid; gap: 42px; }
.mnk-cs-review__head { align-self: start; border-top: 1px solid var(--mnk-line); }
.mnk-cs-review__title { padding-top: 4px; color: #efe8dc; font-size: var(--mnk-h4); line-height: 1.3; }
.mnk-cs-review__subtitle { margin: 0; color: var(--mnk-text-color); font-size: 17.48px; font-weight: 500; line-height: 1.6; }
.mnk-cs-review__logo { display: flex; justify-content: center; }
.mnk-cs-review__logo img { width: 200px; height: 54px; object-fit: contain; }
.mnk-cs-review__quote { margin: 0; color: var(--mnk-text-color); font-size: 20.9px; line-height: 1.6; }
.mnk-cs-review__quote p { margin: 0 0 0.4em; }
.mnk-cs-review__quote p:last-child { margin: 0; }
.mnk-cs-review__author { margin-top: 12px; }
.mnk-cs-review__name { display: block; color: var(--mnk-white); font-family: var(--wp--preset--font-family--heading); font-size: 32px; font-style: normal; font-weight: 600; letter-spacing: -0.02em; line-height: 1.4; }
.mnk-cs-review__role { display: block; color: rgba(255, 255, 255, 0.43); font-size: 18.05px; line-height: 1.6; }
@media (min-width: 1181px) {
	.mnk-cs-review { margin-top: 80px; padding-block: 80px 79px; }
	.mnk-cs-review__grid { grid-template-columns: 25% 61.6%; gap: 0; }
	.mnk-cs-review__body { margin: 0; padding-inline: 16px; }
	.mnk-cs-review__quote { max-width: 684px; font-size: 22.8px; }
}

/* ---------- CTA finale nei case study (titolo h3 Ohio, testo in alto, foto a filo destro) ---------- */
.single-case_study .mnk-cta-banner:not(.mnk-cta-banner--large) .mnk-cta-banner__title { font-size: var(--mnk-h3); line-height: 1.25; letter-spacing: -0.035em; }
.single-case_study .mnk-cta-banner .mnk-eyebrow { margin-bottom: 0; }
.single-case_study .mnk-cta-banner__title { margin-bottom: 41px; }
.single-case_study .mnk-cta-banner__content { padding-block: 76px 0; }
.single-case_study .mnk-cta-banner__media { justify-self: stretch; }
.single-case_study .mnk-cta-banner__media img { width: 100%; }
/* Dopo la fascia recensione la CTA è attaccata e la foto si sovrappone alla recensione. */
body:has(.mnk-cs > .mnk-cs-review:last-child) .mnk-cta-banner { margin-top: 0; }
@media (min-width: 1181px) {
	.single-case_study .mnk-cta-banner:not(.mnk-cta-banner--large) .mnk-cta-banner__title { line-height: 1.15; }
	.single-case_study .mnk-cta-banner__title { margin-bottom: 26px; }
	.single-case_study .mnk-cta-banner__inner { min-height: 458px; }
	.single-case_study .mnk-cta-banner__content { align-self: start; padding-block: 94px 48px; }
	.single-case_study .mnk-cta-banner__media { margin: -128px 0 0; }
	.single-case_study .mnk-cta-banner__media img { width: 424px; }
}

/* ---------- Next Project (card fissa) ---------- */
.mnk-cs-next {
	position: fixed; right: 16px; bottom: 16px; z-index: 80;
	display: flex; flex-direction: column; width: 220px; overflow: hidden;
	border-radius: 8px; background: var(--mnk-surface-soft); color: var(--mnk-white);
	box-shadow: 0 16px 40px rgb(0 0 0 / 0.35);
	opacity: 0; transform: translateY(16px); visibility: hidden;
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.mnk-cs-next.is-visible { opacity: 1; transform: none; visibility: visible; }
.mnk-cs-next__img { width: 100%; height: 86px; object-fit: cover; transition: transform 0.6s ease; }
.mnk-cs-next:hover .mnk-cs-next__img { transform: scale(1.06); }
.mnk-cs-next__body { padding: 14px 16px 16px; }
.mnk-cs-next__label { display: block; color: var(--mnk-muted); font-size: 17.48px; font-weight: 500; line-height: 1.5; }
.mnk-cs-next__title { display: block; color: var(--mnk-white); font-family: var(--wp--preset--font-family--heading); font-size: 19.09px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.3; }
@media (min-width: 1181px) {
	.mnk-cs-next { right: 32px; bottom: 24px; width: 222px; }
}
@media (max-width: 768px) { .mnk-cs-next { display: none; } }

/* ---------- Archivio case study ---------- */
.mnk-cs-archive { padding-block: 72px 92px; }
.mnk-cs-archive__grid { display: grid; gap: 32px; }
@media (min-width: 769px) { .mnk-cs-archive__grid { grid-template-columns: repeat(2, 1fr); } }