/*
Theme Name: Le Carnet de Pierro (Apercu)
Theme URI: https://lecarnetdepierro.com/
Description: Thème enfant de Head Blog pour Le Carnet de Pierro. Toutes les personnalisations vivent ici, jamais dans le thème parent.
Author: Pierre & Claude
Template: head-blog
Version: 1.0.0
Text Domain: carnet-pierro
*/

/* Les surcharges de style passent ici. Le CSS du parent (Head Blog) est chargé en premier via functions.php. */

/* Page d'accueil uniquement (WordPress ajoute la classe .home au <body> quand is_front_page() est vrai) :
   on retire l'encadrement du bloc de contenu et on aligne le titre à gauche. */
.home .single-wrap {
	background-color: transparent;
	border: none;
	padding: 0;
}

.home .single-title {
	text-align: left;
}

/* Plus de respiration entre le titre et le texte d'intro, sur l'accueil */
.home .main-content-page header {
	margin-bottom: 1.75rem;
}

/* Articles récents en rangée (gauche à droite), sous le texte d'accueil */
.carnet-recent-posts {
	margin-top: 2.5rem;
	clear: both;
}

.carnet-recent-posts-title {
	text-align: left;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 1.25rem;
}

.carnet-recent-posts-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.carnet-recent-post-card {
	flex: 1 1 220px;
	max-width: calc(33.333% - 16px);
}

.carnet-recent-post-thumb {
	display: block;
	margin-bottom: 10px;
}

.carnet-recent-post-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.carnet-recent-post-card h3 {
	font-size: 17px;
	margin: 0 0 6px;
}

.carnet-recent-post-card h3 a {
	color: #000;
}

.carnet-recent-post-excerpt {
	font-size: 14px;
	opacity: 0.8;
}

@media (max-width: 767px) {
	.carnet-recent-post-card {
		max-width: 100%;
		flex-basis: 100%;
	}
}

/* Bandeau du haut (image de fond "surfeur" + nom du site), sur toutes les pages.
   Hauteur ajustée par étapes successives à la demande : 180px -> 135px -> 100px -> 70px -> 84px (+20%). */
.site-heading {
	padding: 84px 15px;
}

h1.site-title a,
.site-title a,
h1.site-title,
.site-title {
	font-size: 45px;
	line-height: 53px;
}

/* `cover` garantit que la photo remplit toujours tout le bandeau : aucune zone blanche
   possible, quelle que soit la largeur de l'écran. Le décalage du surfeur vers la droite
   vient du recadrage du fichier lui-même (voir img/header-surf.jpg), pas d'un décalage CSS
   qui, lui, découvrirait du vide.
   Le calage vertical à 95% garde le surfeur entier, pieds compris, sur écran étroit. */
.site-header {
	background-repeat: no-repeat;
	background-position: right 95%;
	background-size: cover;
}

p.site-description {
	font-size: 17px;
	line-height: 21px;
}