/**
 * NIYAPRESS: Mobile Final Fix
 * Corrige TOUS les problèmes mobile sans casser les catégories
 * Version: 1.0.0 - PRODUCTION READY
 */

/* ═══════════════════════════════════════════════════════════
   TRIO SECTION - 1 COLONNE SUR MOBILE
   ═══════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
	/* Force 1 colonne pour trio section */
	.np-trio-grid,
	.np-trio-section .np-trio-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	
	/* Chaque colonne prend toute la largeur */
	.np-trio-column {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* Texte visible */
	.np-trio-item-title {
		color: #1a1a1a !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	.np-trio-item-date {
		color: #666 !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   CATÉGORIES - PROTECTION ABSOLUE
   Ne jamais modifier ces éléments
   ═══════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
	/* Grille catégorie - 2 colonnes sur mobile */
	body.category .archive-niyapress-grid,
	body.archive .archive-niyapress-grid,
	#category-grid-clean {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* Articles catégorie - VISIBLES */
	body.category .archive-niyapress-grid article,
	body.archive .archive-niyapress-grid article,
	.category-card-clean {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		background: transparent !important;
	}
	
	/* Images catégorie - VISIBLES */
	body.category .archive-niyapress-grid article img,
	body.archive .archive-niyapress-grid article img,
	.category-card-clean img {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* Texte catégorie - VISIBLE */
	body.category .archive-niyapress-grid article h2,
	body.archive .archive-niyapress-grid article h2,
	.category-card-clean h2 {
		color: #fff !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   HEADER MOBILE - SANS ESPACE BLANC
   Seulement sur articles et home, PAS sur catégories
   ═══════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
	/* Articles et home - zero padding */
	body.single,
	body.single-post,
	body.home,
	body.front-page {
		padding-top: 0 !important;
	}
	
	/* Header relative sur articles/home */
	body.single .site-header,
	body.single-post .site-header,
	body.home .site-header,
	body.front-page .site-header {
		position: relative !important;
		top: 0 !important;
	}
	
	/* Contenu articles/home */
	body.single .site-content,
	body.single-post .site-content,
	body.home .site-content,
	body.front-page .site-content {
		padding-top: 10px !important;
	}
	
	/* CATÉGORIES - Garder le header fixed */
	body.category .site-header,
	body.archive .site-header {
		position: fixed !important;
		top: 0 !important;
		z-index: 9000 !important;
	}
	
	/* CATÉGORIES - Padding top */
	body.category,
	body.archive {
		padding-top: 120px !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER - DESIGN CLEAN
   ═══════════════════════════════════════════════════════════ */

.article-newsletter {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	margin: 24px 0 !important;
	padding: 0 !important;
}

.article-newsletter__inner {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.article-newsletter__inner::before {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE PETIT - iPhone SE, petits Android
   ═══════════════════════════════════════════════════════════ */

@media screen and (max-width: 480px) {
	/* Trio - 1 colonne forcée */
	.np-trio-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	
	/* Catégories - 1 colonne sur très petit mobile */
	body.category .archive-niyapress-grid,
	body.archive .archive-niyapress-grid,
	#category-grid-clean {
		grid-template-columns: 1fr !important;
	}
}

/* ═══════════════════════════════════════════════════════════
   BANNIÈRES - ESPACEMENT CORRECT
   ═══════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {
	.niyapress-lachtv-leaderboard,
	.ad-banner,
	.header-banner {
		margin-top: 0 !important;
		margin-bottom: 15px !important;
	}
}
