/*
 * CSS Blog Archive — Planète Freeride
 *
 * Chargé sur : is_home() | is_archive() | is_page('blog').
 * Contient :
 * — Layout rangées alternées : 2fr/1fr (normal) et 1fr/2fr (inverse)
 * — Cards blog : image absolute plein format, contenu overlay bas-gauche,
 *   hover zoom 1.04, titre FatFrank, extrait tronqué à 5 lignes (-webkit-line-clamp)
 * — Tags catégories colorés par slug (turquoise ski, vert VTT, jaune freetest, beige conseils)
 * — Étiquettes (tags WP) avec icône location SVG via mask-image
 * — Pagination : numéros 40×40px, état actif/hover bleu anthracite
 * — Suppression des <p> vides générés par wpautop
 *
 * Responsive :
 * — @media (max-width: 763px)        : grilles en 1 colonne, titre-row en colonne
 * — @media (764px – 1199px) tablette : grilles en 1fr 1fr
 *
 * ⚠ BUG CORRIGÉ 2026-07-01 :
 * Le @media tablette était imbriqué dans le @media mobile.
 * Corrigé : accolade fermante insérée avant le bloc tablette.
 *
 * Enqueued via pf-loader.php — conditions is_home() | is_archive() | is_page('blog').
 * Migré depuis Code Snippets (ID 28) le 2026-07-01.
 * Ref. PR2602-0009
 */

/* ================================================
       ARCHIVE BLOG — PR2602-0009 Planète Freeride
       ================================================ */

    .pf-blog-archive {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 48px 24px;
        display: flex;
        flex-direction: column;
        gap: 48px;
    }

    /* -----------------------------------------------
       RANGÉE — layout alterné
       ----------------------------------------------- */

    .pf-blog-row {
        display: grid;
        gap: 24px;
    }

    /* Grande gauche (2/3) + Petite droite (1/3) */
    .pf-blog-row.pf-row-normal {
        grid-template-columns: 2fr 1fr;
    }

    /* Petite gauche (1/3) + Grande droite (2/3) */
    .pf-blog-row.pf-row-inverse {
        grid-template-columns: 1fr 2fr;
    }

	/* -----------------------------------------------
	   CARD — Image pleine + overlay contenu
	   ----------------------------------------------- */

	.pf-blog-card {
    position: relative;
    display: block;
    text-decoration: none;
    border: 2px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
    overflow: hidden;
}

	.pf-blog-card--grande {
		height: 420px;
	}

	.pf-blog-card--petite {
		height: 420px;
	}

	/* Image — position absolute pour couvrir tout le bloc */
	.pf-blog-card__image-wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: none;
	}

	.pf-blog-card__image-wrap img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.4s ease;
	}

	.pf-blog-card:hover .pf-blog-card__image-wrap img {
		transform: scale(1.04);
	}

	/* Bloc données — positionné en bas à gauche */
	.pf-blog-card__content {
		position: absolute;
		bottom: 25px;
		left: 25px;
		background: #FFFFFF;
		border: 1.5px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
		border-radius: 2px;
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 6px;
		z-index: 1;
	}

	/* Grande card — proportions paysage */
	.pf-blog-card--grande .pf-blog-card__content {
		width: 53%;
	}

	/* Petite card — proportions portrait */
	.pf-blog-card--petite .pf-blog-card__content {
		width: 57%;
		max-height: 60%;
	}
	/* Grande card — titre + catégorie sur la même ligne */
	.pf-blog-card--grande .pf-blog-card__titre-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
	}

	.pf-blog-card--grande .pf-blog-card__titre {
		flex: 1;
	}

	.pf-blog-card--grande .pf-blog-card__tags {
		flex-shrink: 0;
		align-self: flex-start;
	}
	/* Tags */
	.pf-blog-card__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.pf-blog-tag {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: var(--wp--custom--font-weight--bold);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		text-decoration: none;
		padding: 4px 10px;
		border-radius: 2px;
		display: inline-block;
	}
	/* Icône location devant les étiquettes */
.pf-tag-link,
.taxonomy-post_tag a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pf-tag-link::before,
.taxonomy-post_tag a::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    flex-shrink: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
	/* etiquettes pays */
.taxonomy-category a {
		border-radius:0px !important;
	}


	/* Couleurs catégories — blog cards */
		.pf-cat-ski-snowboard { background-color: var(--wp--preset--color--custom-pf-turquoise); }
		.pf-cat-ski-rando     { background-color: var(--wp--preset--color--custom-pf-turquoise); }
		.pf-cat-conseils      { background-color: var(--wp--preset--color--custom-pf-beige); }
		.pf-cat-freeride      { background-color: var(--wp--preset--color--custom-pf-turquoise); }
		.pf-cat-vtt           { background-color: var(--wp--preset--color--custom-pf-vert); }
		.pf-cat-freetest      { background-color: var(--wp--preset--color--custom-pf-jaune); }
		.taxonomy-category a[href*="ski-snowboard"] { background-color: var(--wp--preset--color--custom-pf-turquoise); }
		.taxonomy-category a[href*="ski-rando"]     { background-color: var(--wp--preset--color--custom-pf-turquoise); }
		.taxonomy-category a[href*="freeride"]      { background-color: var(--wp--preset--color--custom-pf-turquoise); }
		.taxonomy-category a[href*="conseils"]      { background-color: var(--wp--preset--color--custom-pf-beige); }
		.taxonomy-category a[href*="vtt"]           { background-color: var(--wp--preset--color--custom-pf-vert); }
		.taxonomy-category a[href*="freetest"]      { background-color: var(--wp--preset--color--custom-pf-jaune); }	
		.taxonomy-category a[href*="non-classe"]    { display: none; }
	/* Étiquettes */
	.pf-tag-link {
		background: transparent;
		border: 1px solid var(--wp--preset--color--custom-pf-bleu-anthracite);
	}

	/* Titre */
	.pf-blog-card__titre {
		font-family: var(--wp--preset--font-family--fatfrank);
		font-weight: var(--wp--custom--font-weight--regular);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		margin: 0;
		line-height: var(--wp--custom--line-height--xx-small);
	}

	.pf-blog-card--grande .pf-blog-card__titre {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.pf-blog-card--petite .pf-blog-card__titre {
		font-size: var(--wp--preset--font-size--large);
	}

	.pf-blog-card__titre a {
		color: inherit;
		text-decoration: none;
		transition: color 0.2s ease;
		font-weight:var(--wp--custom--font-weight--bold);
	}

	.pf-blog-card__titre a:hover {
		color: var(--wp--preset--color--custom-pf-orange);
	}

	/* Extrait */
	.pf-blog-card__extrait {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--small);
		font-weight: var(--wp--custom--font-weight--regular);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		line-height: var(--wp--custom--line-height--large);
		opacity: 0.8;
		margin: 0;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	/* Suppression balises p vides générées par wpautop */
	.pf-blog-card__content p:empty,
	.pf-blog-card p:empty {
		display: none;
		margin: 0;
		padding: 0;
		height: 0;
	}

	/* Meta auteur + date */
		.pf-blog-card__meta {
		display: flex;
		align-items: center;
		gap: 8px;
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--x-small);
		font-weight: var(--wp--custom--font-weight--medium);
		color: var(--wp--preset--color--neutral);
	}

	.pf-blog-card__sep {
		color: var(--wp--preset--color--outline);
	}

	/* -----------------------------------------------
	   RANGÉES
	   ----------------------------------------------- */

	.pf-blog-archive {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 48px 24px;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.pf-blog-row {
		display: grid;
		gap: 24px;
		align-items: stretch;
	}

	.pf-blog-row.pf-row-normal {
		grid-template-columns: 2fr 1fr;
	}

	.pf-blog-row.pf-row-inverse {
		grid-template-columns: 1fr 2fr;
	}

	/* -----------------------------------------------
	   PAGINATION
	   ----------------------------------------------- */

	.pf-blog-pagination {
		display: flex;
		justify-content: center;
		gap: 8px;
		padding-top: 16px;
	}

	.pf-blog-pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border: 1px solid var(--wp--preset--color--outline);
		border-radius: 2px;
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--custom-pf-bleu-anthracite);
		text-decoration: none;
		transition: background 0.2s ease, color 0.2s ease;
	}

	.pf-blog-pagination .page-numbers.current,
	.pf-blog-pagination .page-numbers:hover {
		background: var(--wp--preset--color--custom-pf-bleu-anthracite);
		color: var(--wp--preset--color--custom-pf-beige);
		border-color: var(--wp--preset--color--custom-pf-bleu-anthracite);
	}

	/* Message aucun article */
	.pf-blog-empty {
		font-family: var(--wp--preset--font-family--satoshi-variable);
		font-size: var(--wp--preset--font-size--medium);
		color: var(--wp--preset--color--neutral);
		text-align: center;
		padding: 48px 0;
	}

	/* -----------------------------------------------
	   RESPONSIVE
	   ----------------------------------------------- */

	@media (max-width: 763px) {
		.pf-blog-row.pf-row-normal,
		.pf-blog-row.pf-row-inverse {
			grid-template-columns: 1fr;
		}
	    .pf-blog-card__titre-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }	

	} /* fin @media mobile */
	@media (min-width: 764px) and (max-width: 1199px) {
		.pf-blog-row.pf-row-normal,
		.pf-blog-row.pf-row-inverse {
			grid-template-columns: 1fr 1fr;
		}
	}