/*
Theme Name: Codex Itineris
Theme URI: https://example.com/codex-itineris
Description: Thème enfant magazine pour Twenty Twenty-Five. Fond neutre et sobre, présentation moderne : un article à la une en haut (le dernier publié) suivi des articles précédents en disposition mansory (masonry).
Author: metaillustrator
Author URI: https://example.com
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codex-itineris
*/

/* =========================================================
   Réglages généraux — fond sobre, respiration moderne
   ========================================================= */

body {
	background-color: var(--wp--preset--color--base, #fafafa);
}

/* =========================================================
   Article à la une (le dernier publié)
   ========================================================= */

.magazine-featured {
	margin-bottom: var(--wp--preset--spacing--60, 3rem);
}

.magazine-featured .wp-block-post-title {
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin-block: 0.4em 0.3em;
}

.magazine-featured .wp-block-post-title a {
	text-decoration: none;
}

.magazine-featured .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.magazine-featured .wp-block-post-featured-image img {
	border-radius: 6px;
}

.magazine-featured .wp-block-post-terms,
.magazine-masonry .wp-block-post-terms {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	font-weight: 600;
	opacity: 0.75;
}

.magazine-featured .wp-block-post-excerpt {
	max-width: 60ch;
	font-size: 1.05rem;
}

/* =========================================================
   Titre de section « Articles précédents »
   ========================================================= */

.magazine-section-title {
	border-bottom: 1px solid var(--wp--preset--color--contrast, #111);
	padding-bottom: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--50, 2rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.9rem;
	font-weight: 700;
}

/* =========================================================
   Grille mansory (masonry) via colonnes CSS
   ========================================================= */

.magazine-masonry .wp-block-post-template {
	display: block;
	column-count: 3;
	column-gap: var(--wp--preset--spacing--50, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.magazine-masonry .wp-block-post-template > li {
	display: inline-block;
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--50, 2rem);
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

.magazine-masonry .wp-block-post-featured-image img {
	border-radius: 6px;
}

.magazine-masonry .wp-block-post-title {
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-block: 0.5em 0.25em;
}

.magazine-masonry .wp-block-post-title a {
	text-decoration: none;
}

.magazine-masonry .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.magazine-masonry .wp-block-post-excerpt {
	font-size: 0.95rem;
	opacity: 0.9;
}

.magazine-masonry .wp-block-post-date {
	font-size: 0.8rem;
	opacity: 0.6;
}

/* Pagination sous la grille */
.magazine-masonry .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--60, 3rem);
	justify-content: center;
}

/* =========================================================
   Réactivité (responsive)
   ========================================================= */

@media (max-width: 1024px) {
	.magazine-masonry .wp-block-post-template {
		column-count: 2;
	}
}

@media (max-width: 600px) {
	.magazine-masonry .wp-block-post-template {
		column-count: 1;
	}

	.magazine-featured .wp-block-post-title {
		font-size: clamp(2rem, 8vw, 2.6rem);
	}
}