/* ============================================================
   OPIFICIO DELLA BADANTE — Homepage (front-page)
   Sezioni: Hero essenze · Manifesto · Territorio · Persone · Collage · Gamma.
   Solo classi BEM prefissate odb- e token --odb-*.
   ============================================================ */

/* ============================================================
   HERO — essenze
   ============================================================ */
.odb-hero { position: relative; }

.odb-hero__inner {
	position: relative;
	min-height: 100svh;
	display: grid;
	--disc: min(clamp(340px, 42vw, 600px), calc((100svh - 134px) / 2.2));
	grid-template-columns: minmax(0, 1fr) calc(var(--disc) + clamp(48px, 6vw, 170px));
	gap: clamp(24px, 4vw, 80px);
	align-items: stretch;
	width: 100%;
	/* Larghezza fluida: mantiene proporzioni coerenti tra testo e bottiglia
	   su tutte le risoluzioni (niente gradini per fascia). */
	max-width: clamp(1100px, 64vw, 1460px);
	margin-inline: auto;
	padding: clamp(84px, 9vh, 100px) clamp(48px, 5vw, 100px) clamp(16px, 3vh, 32px) var(--odb-pad);
}

/* colonna testo */
.odb-hero__copy {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 100%;
}
.odb-hero__main {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.odb-hero__claim {
	margin: 0;
	font-family: var(--odb-font-display);
	font-weight: 500;
	font-style: normal;
	line-height: .8;
	letter-spacing: -0.005em;
	color: var(--odb-ink);
	/* Corpo che scala con larghezza E altezza (min): più piccolo sui monitor
	   medi/piccoli, al massimo (6.4rem) solo sui molto grandi. Regola unica. */
	font-size: calc(clamp(2.4rem, min(4.0vw, 12svh), 6.4rem) * var(--ts));
}
.odb-hero__claim em { font-style: italic; font-weight: 500; color: var(--odb-wine); }
.odb-hero__lead {
	font-family: var(--odb-font-sans);
	font-size: calc(clamp(1rem, 1.5vw, 1.18rem) * var(--ts));
	line-height: 1.6;
	color: var(--odb-ink-soft);
	max-width: 42ch;
	margin: clamp(22px, 3.4vh, 34px) 0 0;
}
.odb-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(20px, 3vw, 40px);
	margin-top: clamp(26px, 4vh, 40px);
}
.odb-hero__link {
	font-family: var(--odb-font-mono);
	font-size: calc(.74rem * var(--ts));
	letter-spacing: .14em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--odb-ink);
	color: var(--odb-ink);
	transition: gap .3s var(--odb-ease), color .3s var(--odb-ease), border-color .3s var(--odb-ease);
}
.odb-hero__arr { transition: transform .3s var(--odb-ease); }
.odb-hero__link:hover { color: var(--odb-wine); border-color: var(--odb-wine); }
.odb-hero__link:hover .odb-hero__arr { transform: translateX(5px); }
.odb-hero__link-b {
	font-family: var(--odb-font-mono);
	font-size: calc(.74rem * var(--ts));
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
	transition: color .3s var(--odb-ease);
}
.odb-hero__link-b:hover { color: var(--odb-ink); }

/* definizione */
.odb-hero__defn {
	position: static;
	margin: 0 0 clamp(14px, 3vh, 44px);
	max-width: 34ch;
	align-self: flex-start;
	text-align: left;
}
.odb-hero__defn dt {
	display: flex;
	align-items: baseline;
	gap: 12px;
	border-bottom: 1px solid var(--odb-ink);
	padding-bottom: 9px;
}
.odb-hero__defn-word {
	font-family: var(--odb-font-title);
	font-weight: 600;
	font-size: calc(clamp(1.35rem, 2.3vw, 1.95rem) * var(--ts));
	letter-spacing: -0.01em;
}
.odb-hero__defn-phon {
	font-family: var(--odb-font-mono);
	font-style: italic;
	font-size: calc(.72rem * var(--ts));
	color: var(--odb-ink-soft);
}
.odb-hero__defn dd {
	margin: 11px 0 0;
	font-family: var(--odb-font-mono);
	font-size: calc(.8rem * var(--ts));
	letter-spacing: .02em;
	color: var(--odb-ink-soft);
}

/* colonna disco + bottiglia (rotore) */
.odb-hero__col { position: relative; }
.odb-hero__rotor {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(var(--disc) * 2.2);
}
.odb-hero__rotor-shape {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(var(--disc) * 1.35);
	aspect-ratio: 1 / 1.06;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* La maschera (SVG/PNG dalla Options Page) definisce la forma; se assente si usa
	   il border-radius di fallback. mask-size stretcha la forma sul disco. */
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	/* drop-shadow segue l'alpha (maschera o border-radius); box-shadow no. */
	filter: drop-shadow(0 28px 34px rgba(26, 23, 18, .34));
}
.odb-hero__rotor-bottle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	height: calc(var(--disc) * 2.2);
	width: auto;
	opacity: 0;
	filter: drop-shadow(0 44px 50px rgba(26, 23, 18, .3));
}

/* mark verticale */
.odb-hero__vmark {
	position: absolute;
	right: clamp(8px, 1.4vw, 26px);
	top: clamp(160px, 28vh, 260px);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-family: var(--odb-font-mono);
	text-transform: uppercase;
	letter-spacing: .4em;
	font-size: calc(.72rem * var(--ts));
	color: var(--odb-ink-soft);
	white-space: nowrap;
	margin: 0;
}

/* lead più compatto su monitor stretti o bassi (il claim scala già da solo) */
@media (max-width: 1600px) {
	.odb-hero__lead { font-size: calc(clamp(.95rem, 1.35vw, 1.1rem) * var(--ts)); }
}
@media (max-height: 900px) {
	.odb-hero__lead { font-size: calc(clamp(.9rem, 1.2vw, 1.02rem) * var(--ts)); margin-top: clamp(14px, 2.2vh, 22px); }
}

/* Desktop piccoli/medi (md → xl, 900–1600px): il claim con 4.0vw sarebbe troppo
   piccolo. Qui lo rendo più presente. NON tocca ≥1600 (1920/2560 restano). */
@media (min-width: 900px) and (max-width: 1600px) {
	.odb-hero__claim { font-size: calc(clamp(3.2rem, 5.2vw, 4.6rem) * var(--ts)); }
	/* claim su 3 righe: i versi si uniscono a coppie (spariscono le soft) */
	.odb-hero__claim-br--soft { display: none; }
	/* Tetto alla bottiglia: in questa fascia NON deve crescere con l'altezza,
	   così i tablet altissimi (iPad Pro 12,9" verticale) non la fanno enorme.
	   I monitor bassi hanno già un disco più piccolo, quindi non cambiano. */
	.odb-hero__inner { --disc: min(clamp(340px, 42vw, 600px), calc((100svh - 134px) / 2.2), 350px); }
}

/* hero mobile */
@media (max-width: 899px) {
	.odb-hero__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		min-height: 0;
		padding: clamp(96px, 16vh, 128px) var(--odb-pad) clamp(40px, 8vh, 64px);
	}
	.odb-hero__copy { min-height: 0; }
	.odb-hero__col { order: 2; }
	.odb-hero__vmark { display: none; }
	.odb-hero__rotor { --disc: 300px; min-height: calc(var(--disc) * 2.2); }
}

/* Tablet verticale (700–899px): 2 colonne con bottiglia più piccola, per
   riempire lo spazio orizzontale invece di impilare come su telefono.
   (Sovrascrive il blocco mobile qui sopra, quindi va DOPO.) */
@media (min-width: 700px) and (max-width: 899px) {
	.odb-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
		gap: clamp(20px, 4vw, 44px);
		align-items: center;
		min-height: 0;
		padding: clamp(104px, 15vh, 132px) var(--odb-pad) clamp(40px, 7vh, 64px);
	}
	.odb-hero__col { order: 0; }
	.odb-hero__rotor { --disc: clamp(210px, 30vw, 280px); min-height: calc(var(--disc) * 2.2); }
	.odb-hero__claim { font-size: calc(clamp(2.8rem, 6vw, 4rem) * var(--ts)); }
}


/* ============================================================
   SCAFFOLD DI SEZIONE
   ============================================================ */
.odb-block {
	padding-block: clamp(82px, 13vh, 168px);
	position: relative;
}
.odb-sec-head {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-bottom: clamp(24px, 4vh, 40px);
	margin-bottom: clamp(34px, 5vh, 58px);
	border-bottom: 1px solid var(--odb-hair);
}
.odb-sec-head__idx {
	font-family: var(--odb-font-mono);
	font-size: calc(.8rem * var(--ts));
	color: var(--odb-ink-soft);
	letter-spacing: .1em;
}
.odb-sec-head__title {
	margin: 0;
	font-family: var(--odb-font-title);
	font-weight: 600;
	font-size: calc(clamp(1.9rem, 4.6vw, 3.6rem) * var(--ts));
	letter-spacing: -0.02em;
	line-height: 1;
}
.odb-sec-head .odb-marker { margin-left: auto; }

/* lede condiviso (manifesto/persone) */
.odb-lede {
	font-family: var(--odb-font-display);
	font-weight: 500;
	font-size: calc(clamp(1.55rem, 3.3vw, 2.75rem) * var(--ts));
	line-height: 1.18;
	letter-spacing: -0.005em;
	margin: 0;
	text-wrap: pretty;
}
.odb-lede em { font-style: italic; }


/* ============================================================
   MANIFESTO
   ============================================================ */
.odb-manifesto__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(30px, 4vw, 56px);
}
@media (min-width: 900px) {
	.odb-manifesto__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}
.odb-manifesto__aside p {
	font-size: calc(1.02rem * var(--ts));
	line-height: 1.62;
	color: var(--odb-ink-soft);
	margin: 0 0 1.1em;
	max-width: 42ch;
}
.odb-manifesto__aside p:last-child { margin-bottom: 0; }
.odb-manifesto__signature {
	margin-top: clamp(22px, 3vh, 32px);
	font-family: var(--odb-font-mono);
	font-size: calc(.72rem * var(--ts));
	letter-spacing: .06em;
	color: var(--odb-ink);
	text-transform: uppercase;
}


/* ============================================================
   PERSONE
   ============================================================ */
.odb-persone__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(30px, 5vw, 64px);
	align-items: start;
}
@media (min-width: 900px) {
	.odb-persone__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.odb-persone__copy .odb-lede {
	margin-bottom: clamp(22px, 3vh, 34px);
	font-size: calc(clamp(1.9rem, 4vw, 3.4rem) * var(--ts));
	line-height: 1;
}
.odb-persone__copy p {
	font-size: calc(1.04rem * var(--ts));
	line-height: 1.62;
	color: var(--odb-ink-soft);
	max-width: 44ch;
	margin: 0 0 1.1em;
}
.odb-persone__copy p:last-child { margin-bottom: 0; }
.odb-persone__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	margin: 0;
	background: var(--odb-bg-deep);
	border: 1px solid var(--odb-hair);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.odb-persone__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}
.odb-persone__tag {
	position: relative;
	z-index: 1;
	margin: 16px;
	font-family: var(--odb-font-mono);
	font-size: calc(.7rem * var(--ts));
	letter-spacing: .06em;
	color: var(--odb-ink-soft);
	text-transform: uppercase;
	background: var(--odb-bg);
	padding: 7px 11px;
	border: 1px solid var(--odb-hair);
}


/* ============================================================
   BANDA FOTO — Territorio
   ============================================================ */
.odb-photoband {
	position: relative;
	margin: 0;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 13%, 100% 100%, 0 87%);
}
.odb-photoband img {
	width: 100%;
	height: clamp(420px, 70vh, 820px);
	object-fit: cover;
	display: block;
	filter: grayscale(.08) contrast(1.02);
}
.odb-photoband figcaption {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: var(--odb-pad);
}
.odb-photoband__tag {
	font-family: var(--odb-font-mono);
	font-size: calc(.7rem * var(--ts));
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
	background: var(--odb-bg);
	padding: 7px 11px;
	border: 1px solid var(--odb-hair);
	white-space: nowrap;
}


/* ============================================================
   COLLAGE FOTO — scorrimento orizzontale continuo
   ============================================================ */
.odb-collage-sec { margin: clamp(48px, 8vh, 110px) 0; }
.odb-collage { overflow: hidden; }
.odb-collage__track {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	width: max-content;
	padding-inline: clamp(12px, 2.2vw, 44px);
	will-change: transform;
}
.odb-collage__track figure {
	position: relative;
	margin: 0;
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--odb-hair-soft);
}
.odb-collage__track img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.12);
	filter: grayscale(.06) contrast(1.02);
}
/* forme blob organiche, dimensioni molto variate */
.odb-collage__track figure:nth-child(7n+1) { width: clamp(200px, 19vw, 300px); height: 28vh; margin-top: 20vh; border-radius: 63% 37% 54% 46% / 58% 49% 51% 42%; }
.odb-collage__track figure:nth-child(7n+2) { width: clamp(340px, 32vw, 500px); height: 44vh; margin-top: 4vh;  border-radius: 71% 29% 57% 43% / 61% 47% 53% 39%; }
.odb-collage__track figure:nth-child(7n+3) { width: clamp(190px, 17vw, 270px); height: 22vh; margin-top: 0;    border-radius: 36% 64% 33% 67% / 63% 38% 62% 37%; }
.odb-collage__track figure:nth-child(7n+4) { width: clamp(310px, 29vw, 450px); height: 42vh; margin-top: 3vh;  border-radius: 48% 52% 67% 33% / 45% 58% 42% 55%; }
.odb-collage__track figure:nth-child(7n+5) { width: clamp(175px, 16vw, 245px); height: 24vh; margin-top: 24vh; border-radius: 58% 42% 41% 59% / 52% 44% 56% 48%; }
.odb-collage__track figure:nth-child(7n+6) { width: clamp(350px, 33vw, 520px); height: 46vh; margin-top: 5vh;  border-radius: 74% 26% 49% 51% / 37% 61% 39% 63%; }
.odb-collage__track figure:nth-child(7n+7) { width: clamp(220px, 20vw, 320px); height: 32vh; margin-top: 2vh;  border-radius: 42% 58% 63% 37% / 69% 34% 66% 31%; }


/* ============================================================
   LA GAMMA (lista editoriale prodotti)
   ============================================================ */
.odb-gamma { border-top: 1px solid var(--odb-hair); }
.odb-prod {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr) auto;
	gap: clamp(14px, 2.4vw, 40px);
	align-items: center;
	padding: clamp(10px, 1.8vh, 22px) 0;
	border-bottom: 1px solid var(--odb-hair);
	position: relative;
}
.odb-prod__thumb { display: block; }
.odb-prod__thumb img {
	height: clamp(72px, 8vw, 108px);
	width: auto;
	display: block;
	transition: transform .4s var(--odb-ease);
}
.odb-prod:hover .odb-prod__thumb img { transform: translateY(-4px) rotate(-2deg); }
.odb-prod__name {
	font-family: var(--odb-font-title);
	font-weight: 600;
	font-size: calc(clamp(1.5rem, 3.2vw, 2.7rem) * var(--ts));
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0;
	transition: transform .4s var(--odb-ease);
}
.odb-prod:hover .odb-prod__name { transform: translateX(10px); }
.odb-prod__cat {
	font-family: var(--odb-font-mono);
	font-size: calc(.72rem * var(--ts));
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--odb-ink-soft);
	margin-top: 10px;
}
.odb-prod__note {
	font-size: calc(.98rem * var(--ts));
	line-height: 1.55;
	color: var(--odb-ink-soft);
	max-width: 40ch;
	margin: 0;
}
.odb-prod__meta {
	font-family: var(--odb-font-mono);
	font-size: calc(.74rem * var(--ts));
	color: var(--odb-ink-soft);
	letter-spacing: .06em;
	white-space: nowrap;
	text-align: right;
}
@media (max-width: 899px) {
	.odb-prod {
		grid-template-columns: auto 1fr;
		column-gap: clamp(14px, 4vw, 26px);
		row-gap: 6px;
		align-items: center;
	}
	.odb-prod__thumb { grid-column: 1; grid-row: 1 / 5; }
	.odb-prod__thumb img { height: clamp(76px, 20vw, 120px); }
	.odb-prod__id, .odb-prod__meta, .odb-prod__note { grid-column: 2; }
	.odb-prod__meta { text-align: left; margin-top: 4px; }
	.odb-prod:hover .odb-prod__name { transform: none; }
}


/* ============================================================
   RIDUZIONE MOVIMENTO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.odb-hero__rotor-bottle,
	.odb-hero__rotor-shape,
	.odb-collage__track { transition: none; }
}