/* =============================================================================
   static/css/index.css
   Estils específics de la pàgina d'inici (templates/public/index.html).
   Es carrega només aquí, després de styles.css i abans de mercat.css.

   Índex:
     0. Botons compartits de la pàgina (.btn-pill + variants)
     1. Hero (secció a pantalla completa)
     2. CTAs del hero ("Descobreix mercats" / "Com funciona")
     3. Punts forts del hero (fila d'icones)
     4. Separació abans del parcial "Com funciona"
     5. Secció "Descobrir mercats" (carrusel de cards full-bleed)
     6. Indicadors de scroll (punts sota els carrusels, generats per index.js)
     7. CTA final "Uneix-te a la revolució dels mercats municipals"
   ============================================================================= */

/* ---------------------------------------------------------------------------
   0. Botons compartits de la pàgina

   `.btn-pill` + variants (`.btn-solid`, `.btn-glass`) viuen a styles.css
   (carregat a totes les pàgines), no aquí — són un component reutilitzable,
   no exclusiu d'aquesta pàgina. Aquesta secció només conté els ajustos de
   mida/posició propis del hero (secció 2, més avall).

   Recordatori important: NO utilitzem `.btn`/`.btn-pine` de Bootstrap/
   mercat.css als CTAs d'aquesta pàgina. mercat.css es carrega aquí mateix
   (el parcial "Com funciona" el necessita) i, com que es carrega després
   d'aquest fitxer, la seva pròpia `.btn-pine` guanyava qualsevol conflicte
   i trencava l'alçada, el centrat i la tipografia — un bug real que va
   costar diverses iteracions detectar. Noms exclusius (`.btn-pill`) fan que
   el conflicte sigui estructuralment impossible, no només pedaçat.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   1. Hero
   --------------------------------------------------------------------------- */

/* La imatge de fons s'aplica per JS (atribut `data-bg` → background-image a
   index.js) per no bloquejar el primer render amb la càrrega de la imatge. */
.hero {
	height: 100vh;
	height: 100svh; /* alçada real disponible en mòbil (evita el salt de la barra d'adreces) */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Vel fosc sobre la foto per garantir contrast amb el text blanc */
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

/* Ha d'anar per sobre de `.hero-text`/`.hero-features` (que usen z-1) perquè
   el botó "Accedir" sigui sempre clicable, encara que el segueixin en el DOM
   (amb el mateix z-index guanyaria el darrer en l'ordre del DOM). */
.hero-topbar { z-index: 2; }

.hero-modern {
	--color-pine-bright: color-mix(in srgb, var(--color-pine, #5B7065) 65%, #ffffff 35%);
}

/* Degradat molt subtil cap al forest de marca, concentrat només a la franja
   inferior (on viuen "Producte fresc / Comerç local / A prop teu"). La
   resta de la foto queda pràcticament neta, sense vel (substitueix el vel
   pla de `.hero::before`). */
.hero-modern::before {
	background: linear-gradient(
		180deg,
		transparent 0%,
		transparent 50%,
		color-mix(in srgb, var(--color-forest, #04202C) 55%, transparent) 87%,
		color-mix(in srgb, var(--color-forest, #04202C) 92%, transparent) 100%
	);
}

/* El titular cau a la zona transparent del degradat, així que necessita el
   seu propi contrast: una ombra suau en comptes de tornar a enfosquir la foto. */
.hero-text { max-width: 560px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.35); }
.hero-heading { font-size: clamp(2.1rem, 5vw, 3.25rem); line-height: 1.15; letter-spacing: -0.01em; }

/* `.hero-content` és `d-flex align-items-center` (Bootstrap) per centrar
   verticalment el titular dins l'espai restant del hero. Efecte secundari
   de flexbox poc conegut: en fer-ho, `.row` de Bootstrap (que ja és
   `display:flex` per si mateix) passa a ser flex-item d'aquest contenidor
   i, sense `flex-grow`, deixa d'ocupar el 100% de l'amplada — es redueix al
   contingut ("shrink-to-fit"). Això arrossegava `.hero-text`/`.hero-actions`
   amb ell: els botons no tenien marge sobrant on centrar-se perquè el seu
   contenidor ja estava encongit al propi contingut.

   NO es soluciona amb `width: 100%`: `.row` ja porta marges negatius propis
   de Bootstrap (per "sagnar" cap al padding del contenidor) i fixar `width`
   alhora que hi ha marges negatius als dos costats sobre-restringeix
   l'equació de la caixa — el navegador ignora silenciosament el marge dret
   perquè els números quadrin, descentrant tot el bloc cap a l'esquerra
   (això és exactament el que va passar). `flex-grow` sí que ho resol bé:
   deixa que sigui l'algorisme de flexbox qui reparteixi l'espai lliure,
   respectant els marges negatius tal com ho faria en flux normal. */
.hero-content > .row { flex: 1 1 0%; }

/* ---------------------------------------------------------------------------
   2. CTAs del hero ("Descobreix mercats" / "Com funciona")

   Centrat robust en mòbil: `.btn-pill` dins `.hero-actions` es tracta com un
   bloc normal (`display:flex` de bloc, no inline) amb `margin-inline:auto` +
   `max-width`. És la tècnica de centrat més antiga i fiable que hi ha —
   NO depèn de cap `align-items`/`justify-content` d'un contenidor flex pare,
   que és exactament el que va fallar abans amb les utilitats de Bootstrap
   (`d-flex flex-column align-items-center`) combinades amb aquest CSS.
   --------------------------------------------------------------------------- */
.hero-actions .btn-pill {
	display: flex;
	width: 100%;
	max-width: 320px;
	margin: 0 auto 12px;
}
.hero-actions .btn-pill:last-child { margin-bottom: 0; }

@media (min-width: 576px) {
	.hero-actions {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 12px;
	}
	.hero-actions .btn-pill {
		width: auto;
		max-width: none;
		margin: 0;
	}
}

/* ---------------------------------------------------------------------------
   3. Punts forts del hero (fila de 3 icones sota els CTA)
   --------------------------------------------------------------------------- */
.hero-feature-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid color-mix(in srgb, var(--color-pine-bright) 70%, transparent);
	color: var(--color-pine-bright);
	font-size: 0.95rem;
	background: color-mix(in srgb, var(--color-pine-bright) 12%, transparent);
}
.hero-feature-title { color: #fff; font-weight: 600; font-size: 0.85rem; line-height: 1.2; }
.hero-feature-desc { color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; line-height: 1.2; }

/* ---------------------------------------------------------------------------
   4. Separació abans del parcial "Com funciona"

   El parcial (partials/com_funciona.html, compartit amb mercat.html) no porta
   marge superior propi perquè a mercat.html ja li precedeix contingut amb el
   seu propi espaiat. Aquí, en canvi, va just després del hero a pantalla
   completa, així que cal afegir l'espai explícitament només en aquesta pàgina.
   --------------------------------------------------------------------------- */
#com-funciona { margin-top: clamp(2rem, 5vw, 3.5rem); }

/* ---------------------------------------------------------------------------
   5. Secció "Descobrir mercats" — carrusel horitzontal full-bleed de cards
   --------------------------------------------------------------------------- */
.index-pill-section { max-width: 1320px; margin-inline: auto; padding-inline: 12px; box-sizing: border-box; }

/* Marge en fer scroll des del CTA del hero, perquè el títol no quedi enganxat
   al mateix vora superior del viewport. */
#mercats { scroll-margin-top: 16px; }

/* Trenca l'amplada del contenidor (full-bleed) perquè la fila ocupi tot el viewport */
.index-cards-section .cards-row {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	/* Bottom padding matters here, unlike the other 3 sides: overflow-x:auto
	   makes this row clip vertically too (no overflow-y:visible escape
	   hatch once any overflow axis isn't visible), so .market-card's own
	   box-shadow — which extends past the card's bottom edge — was getting
	   cut off flush with the row instead of fading out naturally. */
	padding: 6px 12px 20px;
	box-sizing: border-box;
	position: relative;
	left: calc(50% - 50vw);
	width: 100vw;
}
.index-cards-section .cards-row::-webkit-scrollbar { display: none; }

.market-card {
	flex: 0 0 auto;
	width: calc(100vw - 24px); /* 100% de la fila, 12px de marge a cada costat */
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(16, 24, 32, 0.08);
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	-webkit-tap-highlight-color: transparent; /* el feedback de toc es dona amb :active */
}
.market-card:hover { box-shadow: 0 10px 24px rgba(16, 24, 32, 0.14); }
.market-card:active {
	transform: scale(0.97);
	box-shadow: 0 3px 10px rgba(16, 24, 32, 0.12);
}

.market-card-img { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #eee; }
.market-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.market-card-body { padding: 0.9rem 1rem 1.1rem; text-align: left; display: flex; flex-direction: column; gap: 0.35rem; }
.market-card-title { font-weight: 700; font-size: 1.05rem; color: var(--color-evergreen); }
.market-card-location { display: flex; align-items: center; gap: 4px; }
.market-card-location i { color: var(--color-pine); font-size: 0.85rem; }

/* Fila "Obert"/"Tancat" + "Tanca a les X" al cos de la card (mateixos
   colors que el component equivalent de parades_list.css, però definit
   aquí perquè aquell full d'estil no es carrega a index.html). */
.market-card-status-row { display: flex; align-items: center; gap: 6px; }
.market-card-chip.market-card-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 84px;
	height: 1.6em;
	padding: 0 0.6rem;
	border-radius: 9999px;
	color: #fff;
	font-weight: 500;
	font-size: 0.9rem;
	flex-shrink: 0;
}
.market-card-chip.market-card-status.open { background-color: #198754; }
.market-card-chip.market-card-status.closed { background-color: #dc3545; }
.market-card-stats { display: flex; align-items: center; gap: 14px; color: #6c757d; }
.market-card-stat { display: inline-flex; align-items: center; gap: 5px; }
.market-card-stat i { color: var(--color-pine); font-size: 0.95rem; }
.market-card-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--color-pine); font-weight: 600; margin-top: 2px; }
.market-card-cta i { font-size: 0.85rem; transition: transform 0.15s ease; }
.market-card:hover .market-card-cta i,
.market-card:focus-visible .market-card-cta i { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   6. Indicadors de scroll (punts sota els carrusels)
   Generats dinàmicament per `setupScrollIndicators()` a index.js.
   --------------------------------------------------------------------------- */
.pills-indicator, .markets-indicator, .cards-indicator {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 8px 0 0;
}
.pills-indicator span, .markets-indicator span, .cards-indicator span {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.12);
}
.pills-indicator span.active, .markets-indicator span.active, .cards-indicator span.active {
	background: rgba(0, 0, 0, 0.75);
	width: 16px;
	height: 8px;
	border-radius: 4px;
}
.pills-indicator span:focus, .markets-indicator span:focus, .cards-indicator span:focus {
	outline: 3px solid color-mix(in srgb, var(--color-evergreen, #198754) 30%, #000);
	outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   7. CTA final "Uneix-te a la revolució dels mercats municipals"
   --------------------------------------------------------------------------- */
.join-cta-section { padding: 3rem 0; background-color: var(--color-fog); }

/* Icona gegant i molt suau de fons, purament decorativa (no hi ha cap
   il·lustració pròpia de marca disponible; s'aproxima amb una icona). */
.join-cta-decor {
	position: absolute;
	right: -40px;
	bottom: -60px;
	font-size: 260px;
	line-height: 1;
	color: color-mix(in srgb, var(--color-pine) 12%, transparent);
	pointer-events: none;
}

/* Visual circular amb la icona de l'app + insígnia superposada
   (aproximació sense mockup de mòbil real) */
.join-cta-visual { position: relative; width: 75vw; max-width: 320px; }
.join-cta-visual-frame {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--color-pine) 15%, #fff);
	box-shadow: 0 12px 30px rgba(16, 24, 32, 0.12);
}
.join-cta-visual-img { width: 100%; height: 100%; object-fit: cover; }
.join-cta-badge {
	position: absolute;
	right: 6px;
	bottom: 6px;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-pine);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	box-shadow: 0 4px 12px rgba(16, 24, 32, 0.2);
	border: 3px solid var(--color-fog);
}
.join-cta-badge i.bi { line-height: 1; transform: translateY(1px); }

.join-cta-title { font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--color-evergreen); }
.join-cta-lead { color: #5b6660; max-width: 480px; margin-inline: auto; }
.join-cta-caption { font-size: 0.85rem; color: #6c757d; }

/* Fila d'accions del CTA final: "Forma'n part" + "Parlem?" mateixa mida,
   un al costat de l'altre també en mòbil (a diferència dels botons del
   hero, que s'apilen). */
.join-cta-actions { gap: 12px; }
.join-cta-actions .btn-pill { flex: 1 1 0; max-width: 200px; }

@media (min-width: 992px) {
	.join-cta-lead { margin-inline: 0; }
}