/* =========================================================================
   DOMINO INTERNI — responsive.css
   Media query mobile-first per i breakpoint: 360, 480, 768, 1024, 1280, 1440.
   Include container queries con fallback e gestione landscape/touch.
   ========================================================================= */

/* -------------------------------------------------------------------------
   ≥360px — telefoni piccoli
   ---------------------------------------------------------------------- */
@media (min-width: 360px) {
	.hero__actions .button {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
   ≥480px — telefoni grandi
   ---------------------------------------------------------------------- */
@media (min-width: 480px) {
	.ambienti__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero__actions .button {
		flex: none;
	}

	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-grid__item--wide {
		grid-column: 1 / -1;
	}

	.cataloghi-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.form-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.form-field--full,
	.form-notice,
	.form-message {
		grid-column: 1 / -1;
	}

	.search-result__link {
		grid-template-columns: 180px 1fr;
		align-items: center;
	}

	.search-result__media {
		aspect-ratio: 4 / 3;
		height: 100%;
	}
}

/* -------------------------------------------------------------------------
   ≥768px — tablet
   ---------------------------------------------------------------------- */
@media (min-width: 768px) {
	.site-header__cta {
		display: inline-flex;
	}

	/* Il manifesto viene pinnato da GSAP: deve coprire l'intero viewport
	   per non lasciar intravedere la sezione successiva durante il pin */
	.manifesto {
		min-height: 100svh;
	}

	.intro__grid {
		grid-template-columns: 1.1fr 0.9fr;
		gap: clamp(3rem, 6vw, 6rem);
		align-items: center;
	}

	/* Composizione asimmetrica: immagine leggermente fuori asse */
	.intro__figure {
		margin-block-start: 3rem;
	}

	.progetti__grid {
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
	}

	/* Griglia editoriale asimmetrica: il primo elemento occupa tutta la riga */
	.progetti__grid > .progetto-card--wide {
		grid-column: 1 / -1;
	}

	.progetti__grid > .progetto-card--tall:nth-of-type(3n) {
		margin-block-start: 3rem;
	}

	.metodo__steps {
		grid-template-columns: repeat(2, 1fr);
		gap: 3.5rem 2.5rem;
	}

	/* Linea orizzontale del metodo su viewport larghi */
	.metodo__line {
		inset-block: auto;
		inset-block-start: 1.05rem;
		inset-inline: 1rem;
		width: auto;
		height: 1px;
	}

	.metodo__line-fill {
		transform: scaleX(0);
		transform-origin: left center;
	}

	.related-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contatti__layout {
		grid-template-columns: 0.9fr 1.1fr;
		gap: clamp(2.5rem, 5vw, 5rem);
		align-items: start;
	}

	.progetto-single__layout {
		grid-template-columns: 1.4fr 0.6fr;
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}

	.ambiente-single__layout {
		display: grid;
		grid-template-columns: 1.3fr 0.7fr;
		gap: clamp(2.5rem, 5vw, 4.5rem);
	}

	.gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.gallery-grid__item--wide {
		grid-column: span 2;
	}

	.section__header {
		grid-template-columns: 1fr auto;
		align-items: end;
	}

	.section__header .eyebrow,
	.section__header .section__title {
		grid-column: 1;
	}

	.section__header-link {
		grid-column: 2;
		grid-row: 2;
	}

	.section__header--center {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   ≥1024px — desktop
   ---------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.site-header__nav {
		display: block;
	}

	/* Su desktop la navigazione è visibile: l'hamburger non serve */
	.menu-toggle {
		display: none;
	}

	.ambienti__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Card sfalsate per ritmo editoriale */
	.ambienti__grid .ambiente-card:nth-child(3n + 2) {
		transform: translateY(2.4rem);
	}

	.metodo__steps {
		grid-template-columns: repeat(4, 1fr);
	}

	.cataloghi-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.posts-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mobile-menu__inner {
		flex-direction: row;
		align-items: flex-end;
	}
}

/* -------------------------------------------------------------------------
   ≥1280px — desktop largo
   ---------------------------------------------------------------------- */
@media (min-width: 1280px) {
	:root {
		--header-height: 96px;
	}

	.ambienti__grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.ambienti__grid .ambiente-card:nth-child(3n + 2) {
		transform: none;
	}

	.ambienti__grid .ambiente-card:nth-child(even) {
		transform: translateY(2.4rem);
	}

	.site-footer__grid {
		grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
		gap: 3rem;
	}

	.cataloghi-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* -------------------------------------------------------------------------
   ≥1440px — schermi grandi
   ---------------------------------------------------------------------- */
@media (min-width: 1440px) {
	.hero__content {
		padding-block-end: clamp(7rem, 15vh, 10rem);
	}

	.progetti__grid {
		gap: 4rem 3rem;
	}
}

/* -------------------------------------------------------------------------
   Container queries (con fallback: le regole sopra restano valide)
   ---------------------------------------------------------------------- */
@supports (container-type: inline-size) {
	.progetto-single__details {
		container-type: inline-size;
	}

	@container (min-width: 340px) {
		.progetto-single__list {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}

/* -------------------------------------------------------------------------
   Landscape su schermi bassi (telefoni ruotati)
   ---------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
	.hero {
		min-height: 140svh;
	}

	.hero__content {
		padding-block-start: 8rem;
	}

	.hero__scroll {
		display: none;
	}

	.mobile-menu__list a {
		font-size: 1.5rem;
	}

	.mobile-menu__inner {
		padding-block-start: 5rem;
	}
}

/* -------------------------------------------------------------------------
   Dispositivi touch / senza hover
   ---------------------------------------------------------------------- */
@media (hover: none) {
	/* Nessun effetto zoom persistente al tap */
	.ambiente-card:hover .ambiente-card__image,
	.progetto-card:hover .progetto-card__image,
	.related-card:hover .related-card__image,
	.post-card:hover .post-card__image {
		transform: none;
	}

	/* Il custom cursor non esiste su touch (gestito anche via JS) */
	.custom-cursor {
		display: none;
	}

	/* Loghi brand sempre pienamente leggibili */
	.brands__logo {
		opacity: 0.75;
	}
}

/* -------------------------------------------------------------------------
   Stampa
   ---------------------------------------------------------------------- */
@media print {
	.site-header,
	.site-footer,
	.mobile-menu,
	.preloader,
	.page-transition,
	.hero__particles,
	.back-to-top,
	.custom-cursor {
		display: none !important;
	}

	body {
		background: #ffffff;
		color: #000000;
	}
}