/* ==========================================================================
   Sci Club Monviso — sezioni Home Shop (front-page.php) + listing riutilizzabili.
   Mobile-first. Colori/fonti: vedi token in chrome.css (:root).

   Scala verticale desktop (≥992px) = valori MISURATI sui bounding box del
   frame Figma "Home Shop - NO Tessera" a 1440px:
     banner→hero 40 · hero→card 30 · card→featured 128 · featured→promo 64
     promo→sponsor 128 (88+40) · sponsor→newsletter 80
     hero interno 56/56 · card 24 · titolo→griglia 40 · promo 48/64
     sponsor: tra gruppi 32, titolo→griglia 24 · newsletter 32 · footer 64
   Su mobile ~60% dei valori desktop (proporzioni sensate). Ordine delle
   sezioni invariato: qui cambia solo la spaziatura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.scm-hero { padding: 24px 0 0; } /* gap sotto il banner: Figma 40 (mobile ~60%) */

.scm-hero__box {
	position: relative;
	border-radius: 16px; /* token Figma: contenitore hero 16px */
	overflow: hidden;
	min-height: 400px;
	display: flex; align-items: center; justify-content: center;
	background: var(--scm-navy); /* fallback se immagine non disponibile */
}
.scm-hero__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 62%;
}
.scm-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(24, 49, 89, .58) 0%, rgba(24, 49, 89, .28) 45%, rgba(24, 49, 89, .5) 100%);
}
.scm-hero__content {
	position: relative;
	width: 100%;
	max-width: 800px;
	padding: 34px 20px; /* Figma hero interno 56/56 (mobile ~60%) */
	text-align: center;
}
.scm-hero__title {
	margin: 0 0 26px;
	font: 700 clamp(30px, 5.6vw, 56px)/1.12 var(--scm-font-display);
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 3px 18px rgba(10, 22, 40, .45);
}

.scm-hero__search {
	display: flex; align-items: center; gap: 8px;
	background: #fff;
	border: 1px solid #ecf3fb; border-radius: 8px;
	padding: 8px 8px 8px 18px;
	max-width: 560px; margin-inline: auto;
	box-shadow: 0 12px 34px rgba(10, 22, 40, .28);
}
.scm-hero__search > .scm-ico { color: var(--scm-muted); }
.scm-hero__search input[type="search"] {
	flex: 1; min-width: 0;
	border: 0; outline: 0; background: transparent;
	font: 400 15px var(--scm-font-body); color: var(--scm-ink);
	padding: 10px 0;
}
.scm-hero__search input::placeholder { color: var(--scm-muted); }

/* --------------------------------------------------------------------------
   2. Card categoria (row 4)
   -------------------------------------------------------------------------- */
.scm-cats { padding: 18px 0 0; } /* gap dal hero: Figma 30 (mobile ~60%) */
.scm-cats__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.scm-cat {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	background: var(--scm-bg-soft);
	border: 1px solid var(--scm-border);
	border-radius: 16px; /* token: card 16px */
	padding: 20px; /* Figma pad interno card 24 (mobile ~60%) */
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.scm-cat:hover { box-shadow: var(--scm-shadow-card); transform: translateY(-2px); text-decoration: none; }

.scm-cat__deco {
	/*
	 * Figma: decorazione low-poly in alto a destra (non in basso).
	 * NOTA DI AGGIORNAMENTO (fix 30/09/2026 "immagine card differente"):
	 * il vettore è ora il low-poly ESATTO del file Figma (24 facce, palette
	 * #83D0F5/#006787/#102757/#9BA2A7/#536EA3 + patch bianche, frame
	 * "Modalità_Isolamento" opacity 0.5). Le facce sono a fill pieno nel
	 * path: l'effetto tenue viene da QUESTA opacity del contenitore,
	 * esattamente come nel frame.
	 * MISURE FIGMA (frame I1:578): card 280×174, lowpoly 369×150 con
	 * offset left 132 / top -15 → sfora a destra di 221px (clippato) e
	 * copre il 100% dell'altezza visibile. Qui: dimensione native 369px
	 * (la card live ~280-330px) e clippatura overflow:hidden della card.
	 */
	position: absolute; right: -221px; top: -15px; bottom: auto;
	width: 369px; height: auto;
	pointer-events: none;
	opacity: .5;
}

.scm-cat__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 8px; /* token: chip 8px */
	background: #e8edf3; color: var(--scm-ink);
	margin-bottom: 8px;
}
.scm-cat__kicker {
	font: 700 12.5px/1 var(--scm-font-body);
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--scm-slate-label);
}
.scm-cat__title {
	font: 600 30px/1.05 var(--scm-font-display);
	color: var(--scm-ink);
}
.scm-cat__sub { color: var(--scm-muted); font-size: 14px; }
/* Limite di larghezza solo dove c'è la decorazione low-poly (non nella card Tessera). */
.scm-cat:not(.scm-cat--tessera) .scm-cat__title,
.scm-cat:not(.scm-cat--tessera) .scm-cat__sub { max-width: 75%; }

/* Variante Tessera (evidenziata, senza decorazione): lime @10% + bordo 1px */
.scm-cat--tessera {
	background: var(--scm-lime-soft);
	border: 1px solid var(--scm-lime);
}
.scm-cat--tessera .scm-cat__icon { background: var(--scm-lime-chip); color: var(--scm-lime-text); }
.scm-cat--tessera .scm-cat__kicker { color: var(--scm-lime-text); }

/* Chip icona per categoria */
.scm-cat--gite .scm-cat__icon { background: var(--scm-gite-bg); }
.scm-cat--corsi .scm-cat__icon { background: var(--scm-corsi-bg); }
.scm-cat--eventi .scm-cat__icon { background: var(--scm-eventi-bg); }

/* --------------------------------------------------------------------------
   3. In evidenza
   --------------------------------------------------------------------------
   NOTA DI AGGIORNAMENTO (fix cliente 30/09/2026, "Sfondo IN EVIDENZA non
   prende la fascia verticale + manca padding con parte superiore"):
   la fascia grigia (#F9F9F9, radius 56/56/0/0, full-width) è del wrapper
   .scm-band che abbraccia In evidenza + Promo (Figma nodo 12:176
   "Rectangle 6", Y 809→1702): qui le sezioni sono TRASPARENTI.
   Misure Figma: gap card categorie → fascia 64px; padding fascia →
   kicker "IN EVIDENZA" 64px; promo→fondo fascia 64px.
*/
.scm-band {
	background: var(--scm-bg-soft);
	border-radius: 56px 56px 0 0;
	overflow: hidden; /* clippa la banda low-poly decorativa interna */
	margin-top: 64px; /* gap bianco card categorie → fascia (Figma 64) */
}
.scm-featured { padding: 64px 0 0; background: transparent; } /* Figma: 809→873 = 64px fascia→kicker */
/* Box "In evidenza": solo i padding interni del contenuto (il grigio è della fascia .scm-band). */
.scm-featured__box {
	padding: 0 18px 8px;
}
.scm-featured__head {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
	margin-bottom: 24px; /* Figma titolo→griglia 40 (mobile ~60%) */
}
.scm-featured__kicker {
	display: block;
	font: 700 13px/1 var(--scm-font-body);
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--scm-slate-label); /* #5c82bb, non il blu dei bottoni */
	margin-bottom: 8px;
}
.scm-featured__title { margin: 0; font: 600 28px/1.1 var(--scm-font-display); color: var(--scm-ink); }
.scm-featured__all {
	display: inline-flex; align-items: center; gap: 5px; flex: none;
	font: 600 14px/1 var(--scm-font-body);
	color: var(--scm-blue); text-decoration: none;
	padding-bottom: 4px;
}
.scm-featured__all:hover { text-decoration: underline; }
.scm-featured__all .scm-ico { width: 16px; height: 16px; }

/* Carosello: su mobile diventa uno scroll a molla (fallback senza JS) */
.scm-featured-swiper { overflow: hidden; padding: 4px 2px 0; }
.scm-featured-swiper .swiper-wrapper {
	display: flex; gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 6px;
}
.scm-featured-swiper .swiper-wrapper::-webkit-scrollbar { display: none; }
.scm-featured-swiper .swiper-slide {
	flex: 0 0 min(80%, 300px);
	scroll-snap-align: start;
	height: auto;
}
/* Con Swiper attivo (classe aggiunta da Swiper) il wrapper torna gestito da Swiper.
   Due trappole, entrambecause di card "tagliate" a fine scroll:
   1) flex-basis: va azzerato (flex: 0 0 auto), perche' un basis fisso vince sulla
      width inline messa da Swiper → card piu' larghe di quanto calcola lo snapGrid
      → ultimo snap sfasato (tail tagliato o overscroll);
   2) overflow: il wrapper e' l'elemento TRANSLATO, quindi un overflow proprio su di
      esso ritaglia in locale le slide oltre il suo bordo (100% container) e il clip
      "seguirebbe" il translate: deve restare visible (il clip corretto e' gia' sul
      container .swiper, che non si muove e mantiene il peek a destra). */
.scm-featured-swiper.swiper-initialized .swiper-wrapper {
	display: flex; overflow: visible; scroll-snap-type: none; gap: 0;
}
.scm-featured-swiper.swiper-initialized .swiper-slide { flex: 0 0 auto; }
/* Fallback CSS nativo (niente Swiper o <2 slide): padding-right sul wrapper per far
   respirare l'ultima card a fine scroll, simmetrico al gutter sinistro del box. */
.scm-featured-swiper:not(.swiper-initialized) .swiper-wrapper { padding-right: 18px; }

.scm-featured-swiper .swiper-pagination {
	position: static; margin-top: 20px;
	display: flex; justify-content: center; gap: 6px;
}
.scm-featured-swiper .swiper-pagination-bullet {
	width: 8px; height: 8px; margin: 0 !important;
	background: #d9dfe2; opacity: 1; border-radius: 99px;
	transition: width .2s ease, background .2s ease;
}
.scm-featured-swiper .swiper-pagination-bullet-active {
	width: 24px; background: var(--scm-teal); /* #5bbdaf */
}

/* --------------------------------------------------------------------------
   4. Promo tessera (pannello navy)
   --------------------------------------------------------------------------
   NOTA DI AGGIORNAMENTO (fix cliente 30/09/2026, fascia verticale):
   la promo vive DENTRO il wrapper .scm-band (grigio condiviso con la
   sezione In evidenza, Figma nodo 12:176): background trasparente
   qui, il grigio lo porta la fascia. Misure Figma: dots carosello →
   promo 64px (padding-top); promo → fondo fascia 64px (padding-bottom,
   prima degli sponsor che stanno su bianco). */
.scm-promo { position: relative; padding: 64px 0 64px; overflow: hidden; background: transparent; }

/*
 * NOTA DI AGGIORNAMENTO (fix scostamenti 30/09/2026): banda low-poly
 * full-width dietro la sezione promo (frame Figma 12:176 "banda" con
 * top radius 56, gruppo 12:1789: low-poly 24 facce scalato ~3.8×
 * [1363×538], bianco @10% + facce, full-width dietro il pannello).
 */
.scm-promo__band {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 1363px; max-width: none; pointer-events: none; opacity: .1; z-index: 0;
}
.scm-promo__band .scm-lowpoly { width: 100%; height: auto; }
.scm-promo > .container { position: relative; z-index: 1; }

.scm-promo__panel {
	position: relative;
	background: var(--scm-navy-dark);
	border-radius: 16px; /* token Figma: pannello promo 16px */
	padding: 30px 22px; /* Figma interno 48 (verticali) / 64 (orizz.) */
	display: grid; grid-template-columns: 1fr; gap: 34px;
	box-shadow: 0 24px 60px rgba(18, 35, 57, .35);
}
.scm-promo__kicker {
	display: block;
	font: 700 13px/1 var(--scm-font-body);
	letter-spacing: .09em; text-transform: uppercase;
	color: var(--scm-lime);
	margin-bottom: 12px;
}
.scm-promo__title { margin: 0 0 14px; font: 600 32px/1.1 var(--scm-font-display); color: #fff; }
.scm-promo__text { margin: 0 0 20px; color: var(--scm-muted-2); font-size: 15px; line-height: 1.6; max-width: 46ch; }
.scm-promo__list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.scm-promo__list li {
	display: flex; align-items: center; gap: 11px;
	color: #fff; font-size: 15px; font-weight: 500;
}
.scm-promo__list .scm-ico { width: 17px; height: 17px; color: var(--scm-lime); }

/* Mockup tessera (solo CSS) */
.scm-tessera {
	position: relative;
	align-self: center;
	width: 100%; max-width: 430px;
	aspect-ratio: 1.72 / 1;
	border-radius: 24px; /* token Figma: mockup tessera 24px, fondo piatto */
	padding: 24px 26px;
	background: #183159;
	box-shadow: 0 18px 44px rgba(6, 14, 28, .5);
	display: flex; flex-direction: column; justify-content: space-between;
	overflow: hidden;
	margin-inline: auto;
}
/*
 * NOTA DI AGGIORNAMENTO (fix 30/09/2026 "immagine card differente"):
 * il vettore low-poly del mockup tessera è quello ESATTO del file Figma
 * (stesse 24 facce + patch bianche del set decorativo del progetto).
 * MISURE FIGMA (frame 9:1287 dentro tessera 9:1226 380×223): lowpoly
 * 387×157 con offset left 68 / top 101 → SFORA a destra di 75px e in
 * basso di 35px (clippato da overflow:hidden). Qui riproduciamo quegli
 * overflow esatti. Container opacity 0.3 su fondo #183159.
 */
.scm-tessera__deco { position: absolute; right: -75px; bottom: -35px; width: 387px; opacity: .3; }
.scm-tessera__deco .scm-lowpoly { width: 100%; height: auto; }

.scm-tessera__head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; }
/* Lockup 100° anniversario bianco (PNG reale, slot Figma 150×36). */
.scm-tessera__brand { display: block; width: auto; height: 36px; }
.scm-tessera__type { font: 700 13px/1 var(--scm-font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--scm-muted-2); }
.scm-tessera__season { position: relative; font: 600 25px/1 var(--scm-font-display); letter-spacing: .02em; color: #fff; }
.scm-tessera__holder { position: relative; display: flex; flex-direction: column; gap: 4px; }
.scm-tessera__label { font: 500 11px/1 var(--scm-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--scm-muted-2); }
.scm-tessera__value { font: 500 16px/1.2 var(--scm-font-body); color: #fff; }

/* --------------------------------------------------------------------------
   5. Sponsor
   -------------------------------------------------------------------------- */
/* overflow-x: clip: le frecce nav--prev/next (offset -6/-18px fuori dal
   container) non generano scroll orizzontale della pagina sui viewport
   in cui il container è quasi full-width (es. 992px). */
.scm-sponsors { padding: 24px 0 48px; overflow-x: clip; } /* Figma: 40 sopra (promo→sponsor totale 128), 80 sotto */
.scm-sponsors__title { margin: 24px 0 18px; font: 600 30px/1 var(--scm-font-display); color: var(--scm-ink); } /* Figma: 32 tra gruppi, 24 titolo→griglia */
.scm-sponsors__title:first-child { margin-top: 0; }

/* Slider a scroll-snap nativo (già mobile-first: swipe nativo, niente
   librerie). js/sponsors.js aggiunge autoplay + frecce + loop. */
.scm-sponsors__slider { position: relative; }

.scm-sponsors__track {
	display: flex; gap: 14px; margin: 0; padding: 2px 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.scm-sponsors__track::-webkit-scrollbar { display: none; }
.scm-sponsors__item { flex: 0 0 auto; scroll-snap-align: start; }

.scm-sponsor-box {
	display: flex; align-items: center; justify-content: center;
	width: 130px; height: 66px; padding: 10px 12px;
	background: var(--scm-bg-soft);
	border: 1px solid var(--scm-border);
	border-radius: 8px;
}
.scm-sponsors__slider--main .scm-sponsor-box { width: 180px; height: 86px; padding: 14px 16px; }
.scm-sponsor-box__link { display: flex; align-items: center; justify-content: center; }
.scm-sponsor-box__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* Frecce: nascoste finché lo slider non è scrollabile (le scopre il JS). */
.scm-sponsors__nav {
	position: absolute; top: 50%; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; margin: 0; padding: 0;
	transform: translateY(-50%);
	background: #fff; color: var(--scm-ink);
	border: 1px solid var(--scm-border); border-radius: 50%;
	box-shadow: var(--scm-shadow-card); cursor: pointer;
}
.scm-sponsors__nav[hidden] { display: none; }
.scm-sponsors__nav:hover { color: var(--scm-blue); border-color: var(--scm-blue); }
.scm-sponsors__nav svg { width: 18px; height: 18px; }
.scm-sponsors__nav--prev { left: -6px; }
.scm-sponsors__nav--prev svg { transform: rotate(180deg); }
.scm-sponsors__nav--next { right: -6px; }

/* --------------------------------------------------------------------------
   6. Listing generico (ricerca; riusabile per shop/categorie future)
   -------------------------------------------------------------------------- */
.scm-arch { padding: 28px 0 64px; } /* header→contenuto ~40 su desktop (vedi media) */
.scm-arch__title { margin: 0 0 26px; font: 600 30px/1.1 var(--scm-font-display); color: var(--scm-ink); }
.scm-arch__count { color: var(--scm-muted); font-size: 14px; margin: -18px 0 24px; }
.scm-arch__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.scm-arch__empty { color: var(--scm-muted); font-size: 15px; }
.scm-arch__posts { display: grid; gap: 18px; }
.scm-arch__post { border-bottom: 1px solid var(--scm-border); padding-bottom: 16px; }
.scm-arch__post h2 { margin: 0 0 4px; font: 600 20px/1.2 var(--scm-font-display); }
.scm-arch__post a { color: var(--scm-ink); text-decoration: none; }
.scm-arch__post a:hover { color: var(--scm-blue); }

/* --------------------------------------------------------------------------
   7. Breakpoint
   -------------------------------------------------------------------------- */
@media (min-width: 560px) {
	.scm-cats__grid { grid-template-columns: repeat(2, 1fr); }
	.scm-arch__grid { grid-template-columns: repeat(2, 1fr); }
	.scm-featured__box { padding: 0 30px 8px; }
	.scm-hero__box { min-height: 440px; }
	.scm-hero__content { padding: 44px 24px; }
	.scm-cat { padding: 22px; }
}

@media (min-width: 992px) {
	/* Spaziatura verticale = valori Figma misurati (vedi testata del file).
	   NOTA (fix 30/09/2026): gap e padding ora vivono sul wrapper .scm-band
	   (margin-top 64) e sulle sezioni trasparenti interne. */
	.scm-hero { padding-top: 40px; }
	.scm-hero__content { padding: 56px 24px; }
	.scm-cats { padding-top: 30px; }
	.scm-featured { padding-top: 64px; }
	.scm-featured__head { margin-bottom: 40px; }
	.scm-promo { padding: 64px 0 64px; }
	.scm-sponsors { padding: 40px 0 80px; }
	.scm-sponsors__title { margin: 32px 0 24px; }
	/* 18px: a 1440 (content 1165) fa stare l'intera fila Figma senza overflow
	   (6×180+5×18=1170 > 1165 → frecce inutili). Sotto i 1440 lo slider lavora. */
	.scm-sponsors__track { gap: 16px; }
	.scm-sponsors__nav--prev { left: -18px; }
	.scm-sponsors__nav--next { right: -18px; }
	.scm-arch { padding-top: 40px; }

	.scm-cats__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
	.scm-arch__grid { grid-template-columns: repeat(3, 1fr); }
	.scm-featured__box { padding: 0 36px 10px; }
	.scm-featured__title { font-size: 32px; }
	.scm-cat { padding: 24px; }
	.scm-cat__title { font-size: 32px; }
	/* Figma: sottotitolo su una riga (solo desktop: su mobile traboccherebbe). */
	.scm-cat__sub { white-space: nowrap; }
	.scm-sponsors__title { font-size: 32px; }
	.scm-hero__box { min-height: 500px; }
	/* Carosello interamente DENTRO il box "In evidenza": il vecchio bleed
	   (margin-right negativo, ispirato al Figma) faceva sì che le slide
	   in peek sconfinassero oltre il bordo destro del box grigio, con le
	   card "tagliate" fuori dal contenitore. Il clip resta su .swiper
	   (overflow hidden), che ora coincide col bordo del box. */
	/* Pannello promo più stretto e centrato (Figma); watermark full-width dietro. */
	.scm-promo__panel {
		max-width: 980px;
		margin-inline: auto;
	}
	.scm-promo__panel {
		grid-template-columns: 1.05fr .95fr;
		align-items: center;
		gap: 46px;
		padding: 48px 64px;
	}
	.scm-promo__title { font-size: 32px; }
}

/* Mobili stretti: frecce sponsor sotto lo slider, fuori dai loghi. */
@media (max-width: 479px) {
	.scm-sponsors__nav { top: auto; bottom: -44px; transform: none; width: 30px; height: 30px; }
	.scm-sponsors__slider { margin-bottom: 54px; }
}