/* ==========================================================================
   GIANT GRID BLOCK - FRONTEND
   Desktop: 3 sezioni verticali senza gap | Mobile: 7 slide Swiper
   ========================================================================== */

/* Import element styles */
@import url("elements/page-reference.css");
@import url("elements/page-reference-small.css");
@import url("elements/cta-simple.css");
@import url("elements/cta-image.css");
@import url("elements/product-placeholder.css");

/* ==========================================================================
   BLOCK BASE
   ========================================================================== */
.s4w-giant-grid {
	padding: 96px 0;
}

/* ==========================================================================
   DESKTOP LAYOUT (>= 769px)
   ========================================================================== */
.s4w-giant-grid__desktop {
	display: block;
}

.s4w-giant-grid__mobile {
	display: none;
}

/* Sezioni: NO gap tra loro */
.s4w-giant-grid__section {
	display: flex;
	width: 100%;
	margin: 0;
}

/* Colonne inner wrapper */
.s4w-giant-grid .s4w-col__inner {
	width: 100%;
	border: var(--col-border-width, 1px) solid var(--col-border-color, #E2E4E9);
	padding: var(--col-inner-padding, 20px);
	height: 100%;
	box-sizing: border-box;
}

/* Sezione 1: TwoCol Asym (1/3 + 2/3) */
.s4w-giant-grid__section--twocol-asym {
	justify-content: flex-start;
	gap: 0;
}

.s4w-giant-grid__col--small {
	flex: 0 0 33.333%;
	max-width: 33.333%;
}

.s4w-giant-grid__col--large {
	flex: 0 0 66.666%;
	max-width: 66.666%;
}

/* Sezione 2: TwoMain (1/2 + 1/2) */
.s4w-giant-grid__section--twomain {
	justify-content: space-between;
	gap: 0;
}

.s4w-giant-grid__col--half {
	flex: 0 0 50%;
	max-width: 50%;
}

.s4w-giant-grid__col--full {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Sezione 3: ThreeCol (1/3 + 1/3 + 1/3) */
.s4w-giant-grid__section--threecol {
	justify-content: space-between;
	gap: 0;
}

.s4w-giant-grid__col--third {
	flex: 0 0 33.333%;
	max-width: 33.333%;
}

/* Contenuto colonne twomain */
.s4w-giant-grid__image {
	margin-bottom: var(--spacing-lg);
	width: 100%;
	overflow: hidden;
}

.s4w-giant-grid__image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform var(--transition-normal);
}

.s4w-giant-grid__image:hover img {
	transform: scale(1.05);
}

.s4w-giant-grid__content {
	margin-bottom: var(--spacing-md);
}

.s4w-giant-grid__label {
	color: var(--text-sub-500);
}

.s4w-giant-grid__cta {
	margin-top: var(--spacing-md);
}

/* Titolo twomain: troncamento a 2 righe (desktop + mobile) */
.s4w-giant-grid__title {
	margin-top: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-transform: none;
}

/* ==========================================================================
   TABLET (769px - 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	.s4w-giant-grid {
		padding: 64px 0;
	}

	/* Aggiungi gap ridotto su tablet */
	.s4w-giant-grid__section {
		gap: 0px;
	}

	.s4w-giant-grid__section--twocol-asym {
		gap: 0;
	}
}

/* ==========================================================================
   MOBILE SWIPER (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
	.s4w-giant-grid {
		padding: 48px 0;
		overflow: hidden;
	}

	/* Nascondi desktop, mostra Swiper */
	.s4w-giant-grid__desktop {
		display: none;
	}

	.s4w-giant-grid__mobile {
		display: block;
		width: 100%;
		overflow: visible;
	}

	/* CTA Fixed sopra lo Swiper */
	.s4w-giant-grid__cta-fixed {
		margin-bottom: 32px;
		width: 100%;
	}

	/* Swiper wrapper */
	.s4w-giant-grid__swiper {
		width: 100%;
		overflow: hidden;
		padding: 0;
		margin: 0;
	}

	/* Swiper wrapper interno */
	.s4w-giant-grid__swiper .swiper-wrapper {
		display: flex;
		align-items: stretch;
	}

	/* Slide interne - larghezza fissa per slidesPerView: auto */
	.s4w-giant-grid__slide {
		width: calc(85vw - 32px);
		max-width: 450px;
		height: auto;
		flex-shrink: 0;
		display: flex;
		align-items: stretch;
		/* Performance: skip rendering per slide fuori viewport */
		content-visibility: auto;
		contain-intrinsic-size: auto 500px;
	}

	.s4w-giant-grid__slide-inner {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	/* Assicura che gli elementi interni non escano dalle slide */
	.s4w-giant-grid__slide .s4w-cta-simple,
	.s4w-giant-grid__slide .s4w-cta-image,
	.s4w-giant-grid__slide .s4w-page-reference-small,
	.s4w-giant-grid__slide .s4w-page-reference,
	.s4w-giant-grid__slide .s4w-product-placeholder {
		width: 100%;
		max-width: 100%;
	}

	/* Controlli navigazione */
	.s4w-giant-grid__controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: var(--spacing-lg);
		padding-bottom: 25px;
	}

	/* Pagination (barrette) */
	.s4w-giant-grid__controls .swiper-pagination {
		position: relative;
		display: flex;
		gap: 6px;
		align-items: center;
		flex: 0 1 240px;
		min-width: 0;
		overflow: hidden;
		bottom: auto;
		top: auto;
		left: auto;
		width: auto;
		transform: none;
	}

	.s4w-giant-grid__controls .swiper-pagination-bullet {
		width: 40px;
		height: 2px;
		background: rgba(10, 13, 20, 0.2);
		border-radius: 0;
		opacity: 1;
		margin: 0;
		transition: background var(--transition-normal);
	}

	.s4w-giant-grid__controls .swiper-pagination-bullet-active {
		background: var(--text-main-900);
	}

	/* Frecce */
	.s4w-giant-grid__arrows {
		display: flex;
		gap: 6px;
		flex-shrink: 0;
		align-items: center;
		align-self: center;
	}

	.s4w-giant-grid__arrow {
		width: 28px;
		height: 28px;
		background: transparent;
		border: none;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: opacity var(--transition-fast);
	}

	.s4w-giant-grid__arrow svg {
		width: 100%;
		height: 100%;
		display: block;
	}

	.s4w-giant-grid__arrow svg path {
		fill: var(--text-main-900);
		transition: fill var(--transition-fast);
	}

	.s4w-giant-grid__arrow--prev svg {
		transform: rotate(180deg);
	}

	.s4w-giant-grid__arrow:hover:not(.swiper-button-disabled) {
		opacity: 0.7;
	}

	.s4w-giant-grid__arrow.swiper-button-disabled {
		opacity: 0.3;
		cursor: not-allowed;
		pointer-events: none;
	}

	/* ===================================================================
	   SPAZIATURE UNIFORMI INTERNE ALLE SLIDE
	   Tutte le slide: immagine → 16px → label → 8px → titolo → 12px → bottone
	   =================================================================== */

	/* Twomain cols: uniforma immagine */
	.s4w-giant-grid__slide .s4w-giant-grid__image {
		margin-bottom: 16px;
		aspect-ratio: 1 / 1;
		overflow: hidden;
	}

	.s4w-giant-grid__slide .s4w-giant-grid__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	/* Twomain cols: label spacing */
	.s4w-giant-grid__slide .s4w-giant-grid__label {
		display: block;
		margin-bottom: 8px;
	}

	/* Twomain cols: titolo spacing */
	.s4w-giant-grid__slide .s4w-giant-grid__title {
		margin-top: 0;
		font-size: 20px !important;
	}

	/* Twomain cols: content area */
	.s4w-giant-grid__slide .s4w-giant-grid__content {
		margin-bottom: 0;
	}

	/* Twomain cols: bottone */
	.s4w-giant-grid__slide .s4w-giant-grid__cta {
		margin-top: 12px;
	}

	/* Page Reference: uniforma gap media → content */
	.s4w-giant-grid__slide .s4w-page-reference {
		gap: 16px;
	}

	/* Page Reference: riduce gap tra colonne (stacked in mobile) */
	.s4w-giant-grid__slide .s4w-page-reference__content {
		gap: 0;
	}

	/* Page Reference: label spacing */
	.s4w-giant-grid__slide .s4w-page-reference__label {
		margin-bottom: 8px;
	}
}