/* margheritabullo.com — layout e componenti (riferimento: docs/figma-reference.md) */

*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--c-cream);
	color: var(--c-ink);
	font-family: var(--font-sans);
	font-size: var(--step-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.container {
	max-width: var(--max-w);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------- Etichette e titoli ---------- */
.label {
	font-size: var(--step-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.label--moss { color: var(--c-moss); }
.label--lime { color: var(--c-lime); }
.h2 {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--step-h2);
	line-height: 1.05;
}
.accent { color: var(--c-accent); }
.hl { color: var(--c-accent-text); font-weight: 500; }

/* ---------- Header: lingua a sinistra, link al centro, bottone MB Editing Studio a destra ---------- */
.site-header { background: var(--c-cream); }
.header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 96px;
}
.header-lang { justify-self: start; }
.lang-switch { font-size: var(--step-label); letter-spacing: 0.08em; display: inline-flex; gap: 8px; }
.lang-switch a { color: var(--c-ink); }
.lang-switch a:hover { color: var(--c-accent-text); }
.lang-switch .lang-sep { color: var(--c-moss); }
.lang-switch .lang-current { color: var(--c-accent-text); font-weight: 600; }
.site-nav {
	display: flex;
	align-items: center;
	gap: 40px;
	font-size: var(--step-nav);
}
.nav-link--accent { color: var(--c-accent); }
.nav-cta {
	justify-self: end;
	background: linear-gradient(160deg, color-mix(in srgb, var(--c-olive) 78%, var(--c-moss)) 0%, var(--c-olive) 55%, var(--c-olive-deep) 100%);
	color: var(--c-cream);
	/* Filo di 1,8 px (1,5 px + 20%) disegnato come anello interno: i bordi veri vengono arrotondati ai pixel dello schermo. */
	--ring: 1.8px;
	border: 0;
	box-shadow: inset 0 0 0 var(--ring) var(--c-lime);
	padding: 10.5px 21.5px;
	border-radius: var(--radius-pill);
	font-size: var(--step-nav);
	white-space: nowrap;
	transition: box-shadow 0.2s ease;
}
.nav-cta:hover { background: linear-gradient(160deg, var(--c-olive) 0%, var(--c-olive-deep) 100%); box-shadow: inset 0 0 0 var(--ring) var(--c-lime-light); }

/* ---------- Hero ---------- */
.hero { overflow: hidden; }
.hero-inner {
	display: flex;
	align-items: center;
	gap: clamp(32px, 4.4vw, 64px);
	padding-block: clamp(32px, 5vw, 72px);
	min-height: calc(min(940px, 100svh) - 96px);
}
.hero-intro {
	flex: 1 0 0;
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 2.8vw, 40px);
}
.eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--step-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-olive);
}
.marker {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c-accent);
	flex: none;
}
.hero-title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--step-display);
	line-height: 0.9;
	letter-spacing: -0.01em;
}
.hero-lede {
	font-size: var(--step-lede);
	line-height: 1.45;
	color: var(--c-olive);
	max-width: 480px;
}
.portrait-frame {
	flex: none;
	width: clamp(280px, 37.5vw, 540px);
	background: var(--c-blush);
	border-radius: var(--radius-portrait);
	overflow: hidden;
}
.portrait-frame img {
	width: 100%;
	height: 100%;
	aspect-ratio: 540 / 700;
	object-fit: cover;
	object-position: top;
}

/* ---------- Breve bio ---------- */
.bio { background: var(--c-paper); padding-block: var(--sect-y); }
.split { display: flex; gap: clamp(32px, 6.6vw, 96px); align-items: flex-start; }
.split > .label { flex: none; width: 300px; }
.split-copy {
	flex: 1 0 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.bio-lead {
	font-size: var(--step-lede);
	line-height: 1.55;
	color: var(--c-olive);
	max-width: 720px;
}
.chapters { margin-top: clamp(48px, 6vw, 88px); }
.chapter {
	display: flex;
	gap: clamp(32px, 6.6vw, 96px);
	align-items: flex-start;
	padding-block: 32px;
	border-top: 1px solid color-mix(in srgb, var(--c-moss) 35%, transparent);
}
.chapter-label {
	flex: none;
	width: 300px;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--step-card-title);
	line-height: 1.2;
}
.chapter-body {
	flex: 1 0 0;
	max-width: 720px;
	font-size: var(--step-body);
	line-height: 1.7;
	color: var(--c-olive);
}

/* ---------- Aree di lavoro ---------- */
.aree { background: var(--c-olive); padding-block: var(--sect-y); }
.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: clamp(40px, 4.4vw, 64px);
}
.h2--aree {
	color: var(--c-cream);
	font-size: var(--step-h2-s);
	text-align: right;
	max-width: 660px;
}
.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.card {
	border-radius: var(--radius-card);
	padding: 28px;
	min-height: 310px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
}
.card--cream { background: var(--c-cream); }
.card--lime { background: var(--c-lime-light); }
.card-number { font-size: var(--step-label); color: var(--c-moss); }
.card--lime .card-number { color: var(--c-accent); }
.card-copy { display: flex; flex-direction: column; gap: 16px; }
.card-title {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--step-card-title);
	line-height: 1.2;
}
.card-rule {
	width: 100%;
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--c-moss);
}
.card--lime .card-rule { background: var(--c-accent); }
.card-body { font-size: var(--step-body-s); line-height: 1.5; color: var(--c-olive); }

/* ---------- Statement ---------- */
.statement { background: var(--c-lime-light); padding-block: clamp(72px, 8.3vw, 120px); }
.statement-quote {
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--step-h2);
	line-height: 1.08;
	text-align: center;
	max-width: 960px;
	margin-inline: auto;
}

/* ---------- Contatti ---------- */
.contatti { background: var(--c-olive); padding-block: clamp(64px, 7vw, 100px); }
.h2--contatti { color: var(--c-cream); text-align: right; max-width: 660px; }
.contact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
.contact-block {
	border-radius: var(--radius-card);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.contact-block--dark { background: var(--c-olive-deep); color: var(--c-cream); }
.contact-block--lime { background: var(--c-lime-light); color: var(--c-olive); }
.contact-list { display: flex; flex-direction: column; gap: 10px; }
.contact-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--step-contact);
	line-height: 1.5;
	min-width: 0;
}
.contact-list li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-accent);
	flex: none;
}
.contact-list a { overflow-wrap: anywhere; }
.contact-list .has-icon::before { display: none; }
.contact-list .has-icon a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.contact-list .icon { flex: none; color: var(--c-lime); }
.contact-block--lime .icon { color: var(--c-olive); }
.contact-list .has-icon a:hover span { text-decoration: underline; }
.contact-list .has-icon a:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 4px; }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--c-olive);
	border-top: 1px solid color-mix(in srgb, var(--c-lime) 35%, transparent);
	color: var(--c-cream);
	padding-block: 48px;
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 3.9vw, 56px);
}
.footer-links-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
}
.footer-name { font-size: 15px; }
.footer-links {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	font-size: var(--step-label);
	color: var(--c-lime-light);
}
.footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	font-size: var(--step-label);
	color: var(--c-lime-light);
}
.link-btn {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.footer-legal {
	font-size: var(--step-label);
	color: var(--c-lime-light);
	text-align: center;
	width: 100%;
}

/* ---------- Cookie banner (compatto: una riga su desktop) ---------- */
.cookie-strip {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: 14px;
	z-index: 50;
	pointer-events: none;
}
.cookie-strip .container { pointer-events: none; }

/* Effetto liquid glass: vetro traslucido con sfocatura, bordo luminoso e riflessi.
   Il tono crema è abbastanza denso da mantenere il testo leggibile anche sulle sezioni scure. */
.cookie-card {
	pointer-events: auto;
	position: relative;
	isolation: isolate;
	background: color-mix(in srgb, var(--c-cream) 66%, transparent);
	-webkit-backdrop-filter: blur(20px) saturate(1.9) brightness(1.05);
	backdrop-filter: blur(20px) saturate(1.9) brightness(1.05);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 22px;
	box-shadow:
		0 10px 34px rgba(32, 34, 25, 0.22),
		0 2px 6px rgba(32, 34, 25, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		inset 0 -1px 0 rgba(255, 255, 255, 0.25),
		inset 0 0 22px rgba(255, 255, 255, 0.28);
	padding: 10px 12px 10px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-height: calc(100vh - 28px);
	overflow: auto;
}
.cookie-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background:
		linear-gradient(115deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.22) 100%),
		radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%);
}
.cookie-strip:not([hidden]) .cookie-card { animation: mb-glass-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes mb-glass-in {
	from { opacity: 0; transform: translateY(18px) scale(0.985); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .cookie-strip:not([hidden]) .cookie-card { animation: none; } }
@media (prefers-reduced-transparency: reduce) {
	.cookie-card { background: var(--c-cream); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cookie-card { background: color-mix(in srgb, var(--c-cream) 94%, transparent); }
}
/* Con il banner aperto, il fondo pagina non resta coperto. */
body:has(.cookie-strip:not([hidden])) .site-footer { padding-bottom: 110px; }
.cookie-copy {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 12px;
	max-width: 800px;
}
.cookie-copy .label { white-space: nowrap; font-size: 12px; }
.cookie-message { font-size: 14px; line-height: 1.45; color: var(--c-ink); }
.cookie-card .label--moss { color: var(--c-olive); }
.cookie-message a { color: var(--c-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cookie-panel {
	flex-basis: 100%;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid color-mix(in srgb, var(--c-moss) 35%, transparent);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.cookie-option { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--c-ink); cursor: pointer; }
.cookie-option input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--c-olive); flex: none; }
.cookie-actions { display: flex; gap: 8px; flex: none; }
.btn {
	font-family: var(--font-sans);
	font-size: 13px;
	padding: 9px 16px;
	border-radius: var(--radius-pill);
	border: 0;
	cursor: pointer;
	white-space: nowrap;
}
.btn--lime { background: rgba(227, 235, 186, 0.85); color: var(--c-olive); }
.btn--outline { background: rgba(255, 253, 245, 0.7); color: var(--c-ink); border: 1px solid var(--c-moss); }
.btn--ink { background: var(--c-ink); color: var(--c-cream); }

/* ---------- Pagine legali ---------- */
.policy { background: var(--c-paper); padding-block: var(--sect-y); }
.policy-inner { max-width: 880px; }
.policy-title { margin: 12px 0 clamp(32px, 4vw, 56px); }
.policy-section { padding-top: 28px; margin-top: 28px; border-top: 1px solid color-mix(in srgb, var(--c-moss) 35%, transparent); }
.policy-h { font-family: var(--font-serif); font-weight: 400; font-size: var(--step-card-title); line-height: 1.2; margin-bottom: 14px; }
.policy p, .policy li { font-size: var(--step-body); line-height: 1.7; color: var(--c-olive); }
.policy p + p, .policy p + ul, .policy ul + p { margin-top: 14px; }
.policy ul { padding-left: 1.25em; list-style: disc; display: flex; flex-direction: column; gap: 10px; }
.policy a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.policy .link-btn { color: var(--c-accent-text); }
.policy-back { margin-top: 48px; }

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.hero-inner { flex-direction: column-reverse; align-items: flex-start; }
	.portrait-frame { width: min(420px, 100%); }
	.split { flex-direction: column; gap: 24px; }
	.split > .label { width: auto; }
	.chapter { flex-direction: column; gap: 12px; }
	.chapter-label { width: auto; }
	.section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
	.h2--aree, .h2--contatti { text-align: left; max-width: none; }
	.cards, .contact-grid { grid-template-columns: 1fr; }
	.card { min-height: 0; gap: 40px; }
	.cookie-card { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; border-radius: 20px; }
	.cookie-copy .label { display: none; }
	.cookie-message { font-size: 13px; }
	.cookie-actions { justify-content: flex-start; }
	.btn { padding: 8px 12px; }
}

/* ---------- Mobile: nella barra restano About, Servizi, Contatti e MB Editing Studio ---------- */
.footer-lang { display: none; }
@media (max-width: 767px) {
	.header-inner { display: flex; justify-content: space-between; gap: 10px; min-height: 64px; }
	.header-lang { display: none; }
	.site-nav { gap: 14px; font-size: 13px; }
	.nav-cta { font-size: 12px; padding: 8.5px 12.5px; }
	.footer-lang {
		display: block;
		text-align: center;
		font-size: var(--step-label);
		letter-spacing: 0.08em;
		color: var(--c-lime-light);
	}
	.footer-lang .lang-switch { gap: 10px; }
	.footer-lang .lang-switch a { color: var(--c-lime-light); }
	.footer-lang .lang-switch .lang-sep { color: var(--c-lime); }
	.footer-lang .lang-switch .lang-current { color: var(--c-cream); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
	.footer-links-row { flex-direction: column; gap: 16px; }
}
@media (max-width: 380px) {
	.header-inner { gap: 8px; }
	.site-nav { gap: 10px; font-size: 12px; }
	.nav-cta { font-size: 11px; padding: 7.5px 10.5px; }
}