/**
 * NIYAPRESS: Category Mobile Fix
 * Fix l'affichage des articles sur mobile
 * Responsive intelligent: 4 cols → 2 cols → 1 col
 * Version: 1.0.0 - PRODUCTION READY
 */

/* ═══════════════════════════════════════════════════════════
   DESKTOP - 4 COLONNES (par défaut, déjà bon)
   ═══════════════════════════════════════════════════════════ */

#category-grid-clean,
.category-grid-clean,
.archive-niyapress-grid,
body.category .archive-niyapress-grid,
body.archive .archive-niyapress-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 12px !important;
	width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   TABLET - 3 COLONNES (max-width: 900px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	#category-grid-clean,
	.category-grid-clean,
	.archive-niyapress-grid,
	body.category .archive-niyapress-grid,
	body.archive .archive-niyapress-grid {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 10px !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE LARGE - 2 COLONNES (max-width: 640px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	#category-grid-clean,
	.category-grid-clean,
	.archive-niyapress-grid,
	body.category .archive-niyapress-grid,
	body.archive .archive-niyapress-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
	}
	
	/* Ajuster la taille des cartes pour mobile */
	.category-card-clean,
	body.category .archive-niyapress-grid article,
	body.archive .archive-niyapress-grid article {
		aspect-ratio: 1 / 1 !important; /* Carré pour mobile */
	}
	
	/* Titre plus petit sur mobile */
	.category-card-clean h2,
	body.category .archive-niyapress-grid article h2,
	body.archive .archive-niyapress-grid article h2 {
		font-size: 0.85rem !important;
		line-height: 1.3 !important;
		padding: 10px !important;
	}
	
	/* Container padding réduit */
	.category-main-clean,
	body.category #primary,
	body.archive #primary {
		padding: 15px !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE SMALL - 1 COLONNE (max-width: 400px)
   Pour les très petits écrans
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 400px) {
	#category-grid-clean,
	.category-grid-clean,
	.archive-niyapress-grid,
	body.category .archive-niyapress-grid,
	body.archive .archive-niyapress-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	
	/* Cartes en format horizontal pour très petit mobile */
	.category-card-clean,
	body.category .archive-niyapress-grid article,
	body.archive .archive-niyapress-grid article {
		aspect-ratio: 16 / 9 !important;
	}
	
	/* Titre plus lisible */
	.category-card-clean h2,
	body.category .archive-niyapress-grid article h2,
	body.archive .archive-niyapress-grid article h2 {
		font-size: 0.95rem !important;
		line-height: 1.4 !important;
		padding: 12px !important;
	}
	
	/* Container padding minimal */
	.category-main-clean,
	body.category #primary,
	body.archive #primary {
		padding: 10px !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   AMÉLIORATION LISIBILITÉ MOBILE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	/* Overlay plus foncé pour meilleure lisibilité */
	.category-card-clean a > div:last-child,
	body.category .archive-niyapress-grid article a > div:last-child,
	body.archive .archive-niyapress-grid article a > div:last-child {
		background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, transparent 100%) !important;
	}
	
	/* Text shadow plus fort */
	.category-card-clean h2,
	body.category .archive-niyapress-grid article h2,
	body.archive .archive-niyapress-grid article h2 {
		text-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
	}
	
	/* Header catégorie mobile */
	.category-header-clean,
	body.category .category-header,
	body.archive .archive-header {
		margin-bottom: 15px !important;
		padding-bottom: 8px !important;
	}
	
	.category-header-clean h1,
	body.category .category-header h1,
	body.archive .archive-header h1 {
		font-size: 1.25rem !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION MOBILE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	.pagination,
	.nav-links {
		margin-top: 20px !important;
		font-size: 0.9rem !important;
	}
	
	.pagination .page-numbers,
	.nav-links .page-numbers {
		padding: 8px 12px !important;
		margin: 0 3px !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   TOUCH OPTIMIZATION - Zones tactiles plus grandes
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) and (hover: none) and (pointer: coarse) {
	/* Zone tactile minimum 44x44px (Apple HIG) */
	.category-card-clean a,
	body.category .archive-niyapress-grid article a,
	body.archive .archive-niyapress-grid article a {
		min-height: 44px !important;
		-webkit-tap-highlight-color: rgba(250, 163, 27, 0.3);
	}
	
	/* Désactiver les effets hover sur tactile */
	.category-card-clean:hover a,
	body.category .archive-niyapress-grid article:hover a,
	body.archive .archive-niyapress-grid article:hover a {
		transform: none !important;
	}
	
	.category-card-clean:hover img,
	body.category .archive-niyapress-grid article:hover img,
	body.archive .archive-niyapress-grid article:hover img {
		transform: none !important;
	}
	
	/* Active state pour feedback tactile */
	.category-card-clean a:active,
	body.category .archive-niyapress-grid article a:active,
	body.archive .archive-niyapress-grid article a:active {
		opacity: 0.8;
		transform: scale(0.98);
	}
}

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE MOBILE - Optimisations
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
	/* Désactiver les transitions coûteuses sur mobile */
	.category-card-clean img,
	body.category .archive-niyapress-grid article img,
	body.archive .archive-niyapress-grid article img {
		transition: none !important;
	}
	
	/* Images optimisées pour mobile */
	.category-card-clean img,
	body.category .archive-niyapress-grid article img,
	body.archive .archive-niyapress-grid article img {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
	}
}

/* ═══════════════════════════════════════════════════════════
   LANDSCAPE MOBILE - Orientation paysage
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) and (orientation: landscape) {
	#category-grid-clean,
	.category-grid-clean,
	.archive-niyapress-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (max-width: 640px) and (orientation: landscape) {
	#category-grid-clean,
	.category-grid-clean,
	.archive-niyapress-grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	
	.category-card-clean,
	body.category .archive-niyapress-grid article {
		aspect-ratio: 4 / 3 !important;
	}
}