/* =========================================================
MIV HOME
========================================================= */

.miv-home {
	--miv-blue: #325f74;
	--miv-blue-dark: #264b5d;
	--miv-green: #41ac88;
	--miv-green-dark: #379777;

	--miv-text: #ffffff;

	--miv-band-title: rgba(17, 31, 38, .92);
	--miv-band-subtitle: rgba(17, 31, 38, .82);

	--miv-radius: 14px;
	--miv-gap: 20px;

	width: 100%;
}

.miv-home,
.miv-home * {
	box-sizing: border-box;
}


/* =========================================================
STRUTTURA
========================================================= */

.miv-home__top {
	margin-bottom: var(--miv-gap);
}

.miv-home__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--miv-gap);
}

.miv-home__grid .miv-home-card--standard {
	flex: 1 1 calc((100% - (var(--miv-gap) * 3)) / 4);
	min-width: 0;
}


/* =========================================================
CARD
========================================================= */

.miv-home-card {
	position: relative;

	min-width: 0;
	min-height: 270px;

	overflow: hidden;

	background: var(--miv-blue);
	color: var(--miv-text);

	border-radius: var(--miv-radius);

	isolation: isolate;
}


/* =========================================================
BOX 1 — TOP
========================================================= */

.miv-home-card--top {
	min-height: 440px;
}


/* =========================================================
BACKGROUND
========================================================= */

.miv-home-card__background,
.miv-home-card__overlay {
	position: absolute;
	inset: 0;
}

.miv-home-card__background {
	z-index: 0;

	background-image: var(--miv-bg-desktop);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	transform: scale(1.001);

	transition:
		transform .45s ease;
}


/* =========================================================
OVERLAY
========================================================= */

.miv-home-card__overlay {
	z-index: 1;

	background:
		linear-gradient(
			180deg,
			rgba(15, 28, 35, .08) 0%,
			rgba(15, 28, 35, .14) 45%,
			rgba(15, 28, 35, .48) 100%
		);
}


/* =========================================================
CARD SENZA IMMAGINE
========================================================= */

.miv-home-card--no-image {
	background:
		linear-gradient(
			135deg,
			var(--miv-blue) 0%,
			var(--miv-blue-dark) 100%
		);
}


/* =========================================================
TITOLO DI SEZIONE
========================================================= */

.miv-home-card__section {
	position: absolute;
	top: 0;
	left: 0;

	z-index: 5;

	max-width: calc(100% - 24px);

	padding: 10px 15px;

	background: var(--miv-blue);

	color: #fff;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .015em;

	border-radius: 0 0 10px 0;
}


/* =========================================================
CONTENUTO
========================================================= */

.miv-home-card__content {
	position: relative;

	z-index: 3;

	min-height: inherit;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;

	padding: 26px;
}


/* =========================================================
TITOLO — BANDELLA
========================================================= */

.miv-home-card__title {
	display: block;

	width: fit-content;
	max-width: 100%;

	margin: 0;

	padding: 8px 13px;

	background: var(--miv-band-title);

	color: #fff;

	font-size: 27px;
	font-weight: 700;
	line-height: 1.08;
}


/* =========================================================
SOTTOTITOLO — BANDELLA
========================================================= */

.miv-home-card__subtitle {
	display: block;

	width: fit-content;
	max-width: 100%;

	margin-top: 5px;

	padding: 7px 13px;

	background: var(--miv-band-subtitle);

	color: #fff;

	font-size: 16px;
	font-weight: 400;
	line-height: 1.42;
}


/* =========================================================
BOTTONE
========================================================= */

.miv-home .miv-home-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	
	

	margin-top: 17px;
		margin-left: auto;


	padding: 12px 24px;

	background: var(--miv-green);

	color: #fff !important;

	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;

	text-decoration: none !important;

	border: 0;

	border-radius: 999px;

	transition:
		background-color .2s ease,
		transform .2s ease;
}


/* =========================================================
STATI LINK
========================================================= */

.miv-home .miv-home-card__button:link,
.miv-home .miv-home-card__button:visited,
.miv-home .miv-home-card__button:active,
.miv-home .miv-home-card__button:focus {
	background: var(--miv-green);

	color: #fff !important;

	text-decoration: none !important;
}

.miv-home .miv-home-card__button:hover {
	background: var(--miv-green-dark);

	color: #fff !important;

	text-decoration: none !important;

	transform: translateY(-2px);
}


/* =========================================================
BOX 1 — CONTENUTO
========================================================= */

.miv-home-card--top .miv-home-card__content {
	padding: 38px;
	padding-right: 280px;
}

.miv-home-card--top .miv-home-card__title {
	font-size: 40px;
}

.miv-home-card--top .miv-home-card__subtitle {
	max-width: 760px;

	font-size: 19px;
}


/* =========================================================
BOX 1 — BOTTONE A DESTRA
========================================================= */

.miv-home-card--top .miv-home-card__button {
	position: absolute;

	right: 38px;
	bottom: 38px;

	min-width: 180px;

	margin: 0;
}


/* =========================================================
HOVER IMMAGINE
========================================================= */

.miv-home-card--has-image:hover .miv-home-card__background {
	transform: scale(1.035);
}


/* =========================================================
TABLET
========================================================= */

@media (max-width: 1100px) {

	.miv-home__grid .miv-home-card--standard {
		flex-basis: calc((100% - var(--miv-gap)) / 2);
	}

	.miv-home-card {
		min-height: 250px;
	}

	.miv-home-card--top {
		min-height: 360px;
	}

	.miv-home-card--top .miv-home-card__content {
		padding: 30px;
		padding-right: 220px;
	}

	.miv-home-card--top .miv-home-card__title {
		font-size: 34px;
	}

	.miv-home-card--top .miv-home-card__subtitle {
		font-size: 17px;
	}

	.miv-home-card--top .miv-home-card__button {
		right: 30px;
		bottom: 30px;

		min-width: 160px;
	}
}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 700px) {

	.miv-home {
		--miv-gap: 14px;
	}

	.miv-home__grid .miv-home-card--standard {
		flex-basis: 100%;
	}

	.miv-home-card {
		min-height: 230px;

		border-radius: 12px;
	}

	.miv-home-card--top {
		min-height: 300px;
	}

	.miv-home-card__background {
		background-image: var(--miv-bg-mobile);
	}

	.miv-home-card__content,
	.miv-home-card--top .miv-home-card__content {
		padding: 20px;
	}

	.miv-home-card__title,
	.miv-home-card--top .miv-home-card__title {
		max-width: 100%;

		padding: 7px 10px;

		font-size: 24px;
		line-height: 1.1;
	}

	.miv-home-card__subtitle,
	.miv-home-card--top .miv-home-card__subtitle {
		max-width: 100%;

		padding: 6px 10px;

		font-size: 15px;
		line-height: 1.4;
	}
.miv-home .miv-home-card__button,
.miv-home .miv-home-card--top .miv-home-card__button {
	position: static;
	min-width: 0;

	margin-top: 14px;
	margin-left: auto;
	margin-right: 0;

	align-self: flex-end;

	padding: 10px 18px;

	font-size: 14px;

	border-radius: 999px;
}
	.miv-home-card__section {
		max-width: calc(100% - 16px);

		padding: 8px 11px;

		font-size: 12px;
	}

	.miv-home .miv-home-card__button,
	.miv-home .miv-home-card--top .miv-home-card__button {
		position: static;

		min-width: 0;

		margin-top: 14px;

		padding: 10px 18px;

		font-size: 14px;

		border-radius: 999px;
	}
}
/* Righe esplicite: le proporzioni effettive non modificano i metadati. */
.miv-home__grid.miv-home__rows { display: flex; flex-direction: column; flex-wrap: nowrap; }
.miv-home__row { display: grid; grid-template-columns: var(--miv-columns); gap: var(--miv-gap); align-items: start; }
.miv-home__row.miv-home__top { margin-bottom: 0; }
.miv-home__row > .miv-home-card { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.miv-home__row > .miv-home-card--standard { min-height: 270px; }
.miv-home__row > .miv-home-card--top { min-height: max(440px, var(--miv-cinema-height, 0px)); }
/* Il Cinema può essere stretto: titolo e pulsante devono restare utilizzabili. */
.miv-home-card--cinema-narrow .miv-home-card__content { padding: 26px; }
.miv-home .miv-home-card--cinema-narrow .miv-home-card__button { position: static; min-width: 0; margin: 17px 0 0 auto; }
.miv-home-card--cinema-narrow .miv-home-card__title { font-size: 30px; }
@media (max-width: 1100px) {
 .miv-home__row { grid-template-columns: repeat(var(--miv-tablet-columns), minmax(0, 1fr)); }
 .miv-home__row > .miv-home-card--standard { min-height: 250px; }
 .miv-home__row > .miv-home-card--top { min-height: max(360px, var(--miv-cinema-height, 0px)); }
 .miv-home__row > .miv-home-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
 .miv-home__row { grid-template-columns: minmax(0, 1fr); }
 .miv-home__row > .miv-home-card--standard { min-height: 230px; }
 .miv-home__row > .miv-home-card--top { min-height: max(300px, var(--miv-cinema-height, 0px)); }
 .miv-home-card--cinema-narrow .miv-home-card__content { padding: 20px; }
 .miv-home-card--cinema-narrow .miv-home-card__title { font-size: 24px; }
}
/* Un solo link nativo per la card: niente link annidati o click JavaScript. */
.miv-home .miv-home-card__full-link {
 position: absolute; inset: 0; z-index: 10; display: block;
 border: 0; border-radius: inherit; background: transparent; text-decoration: none;
}
.miv-home .miv-home-card__full-link:focus-visible {
 outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 8px #264b5d;
}
.miv-home .miv-home-card--clickable:hover .miv-home-card__button,
.miv-home .miv-home-card--clickable:focus-within .miv-home-card__button {
 background-color: var(--miv-green-dark); transform: translateY(-2px);
}