/**
 * FaceDance 4.25.1 — Layer di rifinitura performance & mobile/iPad.
 *
 * Non riscrive gli stili esistenti: aggiunge sopra un layer coordinato di
 * micro-ottimizzazioni che si sommano a quello che community-app.css già
 * fa, senza cambiare nessuna regola visibile del design.
 *
 * Cosa fa:
 *
 * 1. Rendering: content-visibility auto sulle card fuori viewport, contain
 *    per evitare cascate di reflow, will-change mirato sui bottoni. Il
 *    risultato pratico è che il feed lungo scorre più fluido — il browser
 *    salta layout+paint di card che non stanno per apparire.
 *
 * 2. Touch: touch-action manipulation ovunque sia cliccabile (elimina i
 *    residui 300ms di delay iOS/Android), tap-highlight trasparente,
 *    -webkit-overflow-scrolling touch per momentum nativo dove si scrolla.
 *
 * 3. iOS: safe-area-inset sulla bottom nav e sui modali (notch iPhone,
 *    Dynamic Island, gesture handle in fondo). font-size 16px minimo sugli
 *    input per evitare l'auto-zoom di Safari quando li si tocca.
 *
 * 4. iPad: layout più efficace nel range 768-1024 (portrait), dove la vecchia
 *    CSS scende troppo presto a single-column sprecando spazio.
 *
 * 5. Reduced motion: rispettato ovunque introduciamo animazioni nuove.
 */

/* --------------------------------------------------------------------- *
 * 1) Rendering — feed lungo scorre più fluido (versione conservativa)
 * --------------------------------------------------------------------- */

/* Ogni card è un contenitore isolato: modifiche al suo contenuto non
 * causano cascate di reflow sulle altre card. Questo è il beneficio che
 * ci interessa davvero — meno jank durante like/reaction/expand comments.
 *
 * NOTA (4.25.2): abbiamo rimosso `content-visibility: auto`. In 4.25.1 era
 * qui per skippare layout+paint di card fuori viewport, ma introduceva un
 * bug visibile: le card sotto la piega in Home nascevano con dimensione
 * placeholder 1×640; il player YouTube al primo layout misurava quella
 * dimensione, chiedeva un thumbnail small, e al successivo reflow non
 * rifaceva il fetch — restava sfocato. Il beneficio marginale sui feed
 * lunghi non vale il glitch. `contain: content` (isolamento layout+paint
 * senza rendering lazy) è sicuro anche con iframe. */
.facedance-community-mode .facedance-feed-card,
.facedance-community-mode .fd-group-discussion-card{
	contain:content;
}

/* FaceDance 4.25.2 — safety net: se qualcuno in futuro reintroducesse
 * content-visibility su queste card, le escludiamo esplicitamente per
 * quelle che contengono un iframe (YouTube, Vimeo, SoundCloud embed).
 * :has() è supportato da Chrome 105+, Safari 15.4+, Firefox 121+; sui
 * browser più vecchi la regola viene semplicemente ignorata, e visto
 * che in 4.25.2 abbiamo comunque tolto content-visibility, non c'è
 * niente da compensare. */
.facedance-community-mode .facedance-feed-card:has(iframe),
.facedance-community-mode .fd-group-discussion-card:has(iframe){
	content-visibility:visible !important;
}

/* --------------------------------------------------------------------- *
 * 2) Touch — reattività immediata su smartphone e tablet
 * --------------------------------------------------------------------- */

.facedance-community-mode a,
.facedance-community-mode button,
.facedance-community-mode [role="button"],
.facedance-community-mode [role="tab"],
.facedance-community-mode [role="menuitem"],
.facedance-community-mode input[type="submit"],
.facedance-community-mode input[type="button"],
.facedance-community-mode label[for]{
	touch-action:manipulation;
	-webkit-tap-highlight-color:transparent;
}

/* Momentum scroll iOS sui contenitori che scorrono orizzontalmente
 * (tab mobili, gallery, pannelli). */
.facedance-community-mode .fd-app-mobile-tabs,
.facedance-community-mode .facedance-gallery,
.facedance-community-mode .fd-story-strip,
.facedance-community-mode .fd-chat-messages,
.facedance-community-mode .fd-comments-list{
	-webkit-overflow-scrolling:touch;
	overscroll-behavior:contain;
}

/* --------------------------------------------------------------------- *
 * 3) iOS — safe area + no auto-zoom su focus input
 * --------------------------------------------------------------------- */

/* Safe area sulla bottom nav: iPhone con notch/gesture bar ha 34px di
 * inset in fondo che vengono coperti da qualunque elemento sticky.
 * Aggiungiamo padding-bottom dinamico che degrada a 0 su device che non
 * espongono la variabile env(). */
.facedance-community-mode .fd-bottom-nav{
	padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}

.facedance-community-mode .fd-app-mobile-tabs{
	padding-left:calc(14px + env(safe-area-inset-left, 0px));
	padding-right:calc(14px + env(safe-area-inset-right, 0px));
}

/* Modali a schermo intero: safe area anche in cima (Dynamic Island). */
.fd-post-editor-modal,
.fd-media-lightbox,
#fd-share-modal{
	padding-top:calc(18px + env(safe-area-inset-top, 0px));
	padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
}

/* No auto-zoom di Safari mobile: gli input devono avere font-size >= 16px
 * per non triggerare lo zoom automatico al focus (che poi lascia la
 * viewport strana). Non cambiamo il visual — 16px è il default di sistema
 * che gli utenti si aspettano. Vale solo sotto la soglia tablet. */
@media (max-width:820px){
	.facedance-community-mode input[type="text"],
	.facedance-community-mode input[type="email"],
	.facedance-community-mode input[type="password"],
	.facedance-community-mode input[type="search"],
	.facedance-community-mode input[type="tel"],
	.facedance-community-mode input[type="url"],
	.facedance-community-mode input[type="number"],
	.facedance-community-mode input[type="date"],
	.facedance-community-mode input[type="datetime-local"],
	.facedance-community-mode textarea,
	.facedance-community-mode select{
		font-size:16px !important;
	}
}

/* Auto-inflate del testo iOS in landscape: disattivato, così il rendering
 * mobile è consistente con quello che vediamo in Simulator. */
.facedance-community-mode{
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
}

/* --------------------------------------------------------------------- *
 * 4) iPad portrait (768-1024px) — non sprecare spazio con single column
 * --------------------------------------------------------------------- */

/* Il vecchio breakpoint 1050px fa cadere il feed a single column già su
 * iPad in landscape. In portrait (768) recuperare la doppia colonna sul
 * pannello Home evita l'effetto "iPad usato come smartphone gigante". */
@media (min-width:768px) and (max-width:1024px){
	.facedance-community-mode .fd-home-layout,
	.facedance-community-mode .fd-feed-layout{
		grid-template-columns:minmax(0,1fr) 260px !important;
		gap:20px !important;
	}
	.facedance-community-mode .fd-home-rail,
	.facedance-community-mode .fd-feed-rail{
		grid-template-columns:1fr !important;
		display:flex !important;
		flex-direction:column !important;
		gap:14px;
	}
	/* Le card del feed guadagnano un po' di respiro laterale su iPad,
	 * dove leggerle a piena larghezza (760+ px) affatica la lettura. */
	.facedance-community-mode .facedance-feed{
		max-width:680px;
		margin-inline:auto;
	}
	/* Griglia di corsi/eventi passa a 2 colonne invece che 3 (in portrait). */
	.facedance-community-mode .facedance-grid{
		grid-template-columns:repeat(2,minmax(0,1fr)) !important;
	}
}

/* --------------------------------------------------------------------- *
 * 5) Reduced motion — rispetta la preferenza di sistema
 * --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
	.facedance-community-mode *,
	.facedance-community-mode *::before,
	.facedance-community-mode *::after{
		animation-duration:0.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:0.01ms !important;
		scroll-behavior:auto !important;
	}
}

/* --------------------------------------------------------------------- *
 * 6) Immagini — hint di dimensioni fisse ai container per stabilire il
 * layout prima che le immagini scarichino (evita CLS: Cumulative Layout
 * Shift). Se il markup non porta width/height (come è oggi), il browser
 * ancora reserva spazio grazie all'aspect-ratio.
 * --------------------------------------------------------------------- */

.facedance-community-mode .fd-card-media img,
.facedance-community-mode .facedance-gallery img,
.facedance-community-mode .fd-reshare-original .fd-card-media img{
	max-width:100%;
	height:auto;
	aspect-ratio:16/10;
	object-fit:cover;
	background:rgba(20,25,17,.4);
}

/* Gli avatar mantengono aspect ratio quadrato. */
.facedance-community-mode .fd-card-head img,
.facedance-community-mode .fd-reshare-original-head img{
	aspect-ratio:1/1;
	object-fit:cover;
}

/* --------------------------------------------------------------------- *
 * 7) Focus visibile — accessibilità tastiera senza rovinare il look mouse
 * --------------------------------------------------------------------- */

.facedance-community-mode :focus-visible{
	outline:2px solid var(--fd-oro-2, #f4d77d);
	outline-offset:2px;
	border-radius:8px;
}

/* --------------------------------------------------------------------- *
 * 8) will-change strategico sui bottoni animati (senza esagerare: mettere
 * will-change ovunque peggiora la memoria)
 * --------------------------------------------------------------------- */

.facedance-community-mode .fd-app-tab,
.facedance-community-mode .fd-mod-toggle,
.facedance-community-mode .fd-btn-primary{
	will-change:background-color, transform;
}

/* --------------------------------------------------------------------- *
 * 9) Sticky bottom nav mobile: GPU compositing con transform: translateZ(0)
 * riduce lo jank su Android più vecchi.
 * --------------------------------------------------------------------- */

.facedance-community-mode .fd-bottom-nav{
	transform:translateZ(0);
	backface-visibility:hidden;
}

/* --------------------------------------------------------------------- *
 * 10) Feedback visivo immediato sul tap — 60fps garantiti perché
 * animiamo solo opacity e transform, entrambi compositing-only.
 * --------------------------------------------------------------------- */

.facedance-community-mode .fd-app-tab:active,
.facedance-community-mode .fd-mod-toggle:active,
.facedance-community-mode .fd-post-manage-btn:active,
.facedance-community-mode .fd-action:active{
	transform:scale(0.97);
	transition:transform 60ms ease-out;
}

@media (prefers-reduced-motion: reduce){
	.facedance-community-mode .fd-app-tab:active,
	.facedance-community-mode .fd-mod-toggle:active,
	.facedance-community-mode .fd-post-manage-btn:active,
	.facedance-community-mode .fd-action:active{
		transform:none;
	}
}