/*
 * layout.css — Container, grille, header/footer, sections, responsive.
 */

/* ── Container ───────────────────────────────────────────────────── */

.container {
	width:      100%;
	max-width:  var(--container-max);
	margin-left:  auto;
	margin-right: auto;
	padding-left:  var(--container-pad);
	padding-right: var(--container-pad);
}

.container-narrow {
	max-width: 800px;
}

/* ── Grille 12 colonnes ──────────────────────────────────────────── */

.grid {
	display:               grid;
	grid-template-columns: repeat(12, 1fr);
	gap:                   var(--space-6);
}

.col-1  { grid-column: span 1;  }
.col-2  { grid-column: span 2;  }
.col-3  { grid-column: span 3;  }
.col-4  { grid-column: span 4;  }
.col-5  { grid-column: span 5;  }
.col-6  { grid-column: span 6;  }
.col-7  { grid-column: span 7;  }
.col-8  { grid-column: span 8;  }
.col-9  { grid-column: span 9;  }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

@media (max-width: 1023px) {
	.col-md-6  { grid-column: span 6;  }
	.col-md-12 { grid-column: span 12; }
}

@media (max-width: 767px) {
	.grid { gap: var(--space-4); }

	.col-1, .col-2, .col-3, .col-4,
	.col-5, .col-6, .col-7, .col-8,
	.col-9, .col-10, .col-11 {
		grid-column: span 12;
	}
}

/* ── Auto-grid (cartes responsives sans breakpoints manuels) ─────── */

.auto-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap:                   var(--space-6);
}

.auto-grid-sm {
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}

/* ── Sections ────────────────────────────────────────────────────── */

.section {
	padding-top:    var(--space-16);
	padding-bottom: var(--space-16);
}

.section-sm {
	padding-top:    var(--space-8);
	padding-bottom: var(--space-8);
}

.section-lg {
	padding-top:    var(--space-24);
	padding-bottom: var(--space-24);
}

@media (max-width: 767px) {
	.section    { padding-top: var(--space-12); padding-bottom: var(--space-12); }
	.section-lg { padding-top: var(--space-16); padding-bottom: var(--space-16); }
}

.section-alt {
	background: var(--surface);
}

.section-dark {
	background: var(--bw-anthracite);
	color:      #e8eaed;
}

[data-theme="dark"] .section-dark {
	background: #0a0c10;
}

/* ── Section header (titre + sous-titre centré) ──────────────────── */

.section-header {
	text-align:    center;
	margin-bottom: var(--space-12);
}

.section-header h2 {
	margin-bottom: var(--space-4);
}

.section-header .lead {
	font-size:  var(--text-md);
	color:      var(--fg-muted);
	max-width:  640px;
	margin:     0 auto;
	line-height: var(--lh-relaxed);
}

/* ── Site header ─────────────────────────────────────────────────── */

.site-header {
	position:         sticky;
	top:              0;
	z-index:          100;
	background:       var(--bg);
	border-bottom:    1px solid var(--border);
	transition:       box-shadow var(--transition), background-color var(--transition);
}

.site-header.is-scrolled {
	box-shadow: var(--shadow-1);
}

.site-header__inner {
	display:     flex;
	align-items: center;
	gap:         var(--space-4);
	height:      72px;
}

/* Logo */
.site-logo,
.site-header__logo {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	color:           var(--accent);
	text-decoration: none;
}

/* ── Vrai logo SVG (file-based ou Customizer) ────────────────────── */

.site-logo__image {
	height:    40px;
	width:     auto;
	max-width: 200px;
	display:   block;
}

/* Swap light/dark — nécessite .site-logo--has-dark sur le <a> */
.site-logo__image--dark { display: none; }

[data-theme="dark"] .site-logo--has-dark .site-logo__image--light { display: none; }
[data-theme="dark"] .site-logo--has-dark .site-logo__image--dark  { display: block; }

/* ── Wordmark fallback (JetBrains Mono, style logotype) ─────────── */

.site-logo__wordmark,
.site-logo__text {
	font-family:    'JetBrains Mono', 'Courier New', monospace;
	font-size:      1rem;      /* 16px — mono est visuellement plus grand qu'Inter */
	font-weight:    600;       /* semi-bold, poids disponible en woff2 */
	letter-spacing: 0.12em;    /* tracking ouvert = effet logotype */
	text-transform: uppercase;
	color:          var(--accent);
	white-space:    nowrap;
}

/* Primary nav centré / poussé à droite selon espace */
.site-nav {
	flex:        1;
	display:     flex;
	justify-content: flex-end;
	align-items: center;
	gap:         var(--space-3);
}

/* Header right zone (CTA + toggle + burger) */
.site-header__actions {
	display:     flex;
	align-items: center;
	gap:         var(--space-3);
	flex-shrink: 0;
}

/* ── Lang switcher FR|EN (Polylang) ──────────────────────────────── */

/* Rendu uniquement si Polylang actif + ≥ 2 langues configurées
   (voir template-parts/lang-switcher.php). Style "mono uppercase"
   cohérent avec les kickers de section ; langue courante en rouge
   accent, non cliquable. Séparateur pipe | injecté via ::before
   sur chaque item sauf le premier. */
.lang-switcher {
	display:     inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size:   var(--text-xs);
	font-weight: var(--fw-semi);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
}

.lang-switcher__item {
	color:           var(--fg-muted);
	text-decoration: none;
	padding:         var(--space-1) var(--space-2);
	border-radius:   var(--radius-sm);
	transition:      color var(--transition), background-color var(--transition);
}

.lang-switcher__item:hover,
.lang-switcher__item:focus-visible {
	color: var(--accent);
}

.lang-switcher__item:focus-visible {
	outline:        2px solid var(--accent);
	outline-offset: 2px;
}

.lang-switcher__item--current {
	color:       var(--accent);
	font-weight: var(--fw-bold);
	cursor:      default;
}

/* Séparateur pipe entre items */
.lang-switcher__item + .lang-switcher__item::before {
	content:     '|';
	color:       var(--fg-muted);
	opacity:     0.45;
	margin:      0 var(--space-1);
	font-weight: var(--fw-semi);
}

/* ── Qualifs bar ─────────────────────────────────────────────────── */

.qualifs-bar {
	background:   var(--surface);
	border-bottom: 1px solid var(--border);
	overflow-x:   auto;
	scrollbar-width: none;
}

.qualifs-bar::-webkit-scrollbar {
	display: none;
}

.qualifs-bar__list {
	display:      flex;
	align-items:  center;
	gap:          var(--space-6);
	padding:      var(--space-2) var(--container-pad);
	max-width:    var(--container-max);
	margin:       0 auto;
	white-space:  nowrap;
}

@media (max-width: 767px) {
	.qualifs-bar__list {
		gap: var(--space-4);
	}
}

.qualifs-bar__item {
	display:     flex;
	align-items: center;
	gap:         var(--space-1);
	font-size:   var(--text-xs);
	font-weight: var(--fw-semi);
	color:       var(--bw-gray-dark);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

[data-theme="dark"] .qualifs-bar__item {
	color: var(--bw-gray-muted);
}

.qualifs-bar__item::before {
	content:       '';
	display:       inline-block;
	width:         4px;
	height:        4px;
	border-radius: 50%;
	background:    var(--bw-red);
	flex-shrink:   0;
}

/* Les items du bandeau sont cliquables → /qualifications/#<slug>.
   Hover discret pour signaler l'affordance sans alourdir le bandeau.
   Sélecteur dédoublé (.qualifs-bar .qualifs-bar__link:hover) pour battre
   la spécificité de `.qualifs-bar a:not(.btn)` dans typography.css (0,2,1). */
.qualifs-bar__link {
	display:     inline-flex;
	align-items: center;
	transition:  color var(--transition);
}

.qualifs-bar .qualifs-bar__link:hover,
.qualifs-bar .qualifs-bar__link:focus-visible {
	color: var(--accent);
}

/* Section title for qualification archive */
.section__heading {
	font-size:   var(--text-xl);
	font-weight: var(--fw-bold);
	color:       var(--heading);
	margin:      0 0 var(--space-2);
}

.section__lead {
	color:       var(--muted);
	font-size:   var(--text-sm);
	max-width:   52ch;
	margin:      0 0 var(--space-4);
}

.qualifications-stack {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-4);
}

/* ── Formations PDF downloads ────────────────────────────────── */
.formations-downloads {
	background:    var(--surface);
	border-top:    1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding:       var(--space-6) 0;
}

.formations-downloads__grid {
	display:   grid;
	grid-template-columns: 1fr 1fr;
	gap:       var(--space-4);
}

@media (max-width: 767px) {
	.formations-downloads__grid {
		grid-template-columns: 1fr;
	}
}

.formations-download-card {
	display:       flex;
	align-items:   center;
	gap:           var(--space-4);
	background:    var(--bg-alt);
	border:        1px solid var(--border);
	border-radius: var(--radius);
	padding:       var(--space-4) var(--space-5);
}

.formations-download-card__icon {
	flex-shrink: 0;
	color:       var(--accent);
}

.formations-download-card__info {
	flex:        1;
	min-width:   0;
	display:     flex;
	flex-direction: column;
	gap:         var(--space-1);
}

.formations-download-card__info strong {
	font-size:   var(--text-sm);
	font-weight: var(--fw-semi);
	color:       var(--heading);
}

.formations-download-card__info span {
	font-size: var(--text-xs);
	color:     var(--muted);
}

.btn--disabled {
	opacity:        0.5;
	cursor:         not-allowed;
	pointer-events: none;
}

/* ── Formations — mention légale Qualiopi ────────────────────── */
.formations-disclaimer {
	max-width:     70ch;
	margin-top:    var(--space-8);
	margin-inline: auto;
	padding-top:   var(--space-6);
	border-top:    1px solid color-mix(in srgb, currentColor 18%, transparent);
	font-size:     var(--text-sm);
	line-height:   var(--lh-relaxed);
	color:         var(--fg-muted);
}

.formations-disclaimer p {
	margin: 0 0 var(--space-3);
}

.formations-disclaimer p:last-child {
	margin-bottom: 0;
}

/* ── Site footer ─────────────────────────────────────────────────── */

.site-footer {
	background:  var(--bw-anthracite);
	color:       #c1c6cc;
	font-size:   var(--text-sm);
	line-height: var(--lh-relaxed);
	border-top:  1px solid var(--bw-red);
	position:    relative;
	overflow:    hidden;
}

/* Grain — même pattern que .home-stats::after (texture sur anthracite). */
.site-footer::after {
	content:          '';
	position:         absolute;
	inset:            0;
	pointer-events:   none;
	z-index:          0;
	opacity:          0.04;
	mix-blend-mode:   overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.site-footer__main,
.site-footer__bottom {
	position: relative;
	z-index:  1;
}

[data-theme="dark"] .site-footer {
	background: #070809;
	border-top: 1px solid var(--border);
}

.site-footer a {
	color: #c1c6cc;
	transition: color var(--transition);
}

.site-footer a:hover {
	color: #fff;
}

.site-footer__main {
	padding-top:    var(--space-16);
	padding-bottom: var(--space-12);
}

.site-footer__columns {
	display:               grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap:                   var(--space-8);
}

@media (max-width: 1023px) {
	.site-footer__columns {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.site-footer__columns {
		grid-template-columns: 1fr;
		gap:                   var(--space-8);
	}
}

.site-footer__brand {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-4);
}

/* Signature Fraunces italic rouge — bloc monumental au-dessus des colonnes.
   Remplace l'ancienne petite .site-footer__tagline qui disparaissait sous
   le logo brand. */
.site-footer__signature {
	font-family:    var(--font-display);
	font-style:     italic;
	font-weight:    500;
	font-size:      clamp(2.25rem, 4.5vw, 3.5rem);   /* 36 → 56px fluide */
	line-height:    1.15;
	letter-spacing: -0.015em;
	color:          var(--bw-red);
	max-width:      800px;
	margin:         0 0 var(--space-12);
}

.site-footer__address {
	font-style:  normal;
	color:       #8a8f95;
	line-height: var(--lh-relaxed);
}

.site-footer__col-title {
	font-weight:   var(--fw-semi);
	color:         #e8eaed;
	font-size:     var(--text-sm);
	margin-bottom: var(--space-4);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.site-footer__nav li {
	margin-bottom: var(--space-2);
}

.site-footer__logo-link {
	color:           var(--accent);
	text-decoration: none;
	display:         flex;
	align-items:     center;
}

/* Logo PNG/SVG dans le footer — légèrement plus grand qu'en header (44 vs 40 px)
   pour asseoir la marque en fin de page. Max-width élargi à 240 px pour
   accepter le ratio 4.66:1 du PNG Brightway sans clipping. */
.site-footer__logo-image {
	display:    block;
	height:     44px;
	width:      auto;
	max-width:  240px;
}

.site-footer__qualifs {
	margin-top: var(--space-2);
}

.site-footer__qualifs-list {
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--space-2) var(--space-4);
	font-size:  var(--text-xs);
	color:      #8a8f95;
	font-weight: var(--fw-medium);
}

.site-footer__qualifs-list li {
	display:     flex;
	align-items: center;
	gap:         var(--space-1);
}

.site-footer__qualifs-list li::before {
	content:       '';
	display:       inline-block;
	width:         4px;
	height:        4px;
	border-radius: 50%;
	background:    var(--bw-red);
	flex-shrink:   0;
}

.site-footer__bottom {
	border-top: 1px solid #2a2e33;
	padding:    var(--space-4) 0;
}

.site-footer__bottom-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             var(--space-4);
}

.site-footer__copyright {
	color: #8a8f95;
}

.site-footer__legal {
	display: flex;
	gap:     var(--space-6);
}

/* ════════════════════════════════════════════════════════════════════
 * LAYOUTS SPÉCIFIQUES AUX CPT (D.5)
 * ════════════════════════════════════════════════════════════════════ */

/* ── Référence single (main + sidebar) ──────────────────────────── */

.reference-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--space-12);
	align-items: start;
}

@media (max-width: 1023px) {
	.reference-layout {
		grid-template-columns: 1fr;
	}
	.reference-layout__sidebar {
		order: -1;
	}
}

.reference-layout__main section + section {
	margin-top: var(--space-10);
}

.reference-layout__main h2 {
	font-size: var(--text-xl);
	margin-bottom: var(--space-4);
}

.result-block {
	background:    var(--bg-alt);
	border-left:   4px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding:       var(--space-6);
}

.result-block__text {
	font-size:   var(--text-lg);
	font-weight: var(--fw-medium);
	margin:      0;
}

.testimonial-block {
	margin:        var(--space-8) 0 0;
	border-left:   3px solid var(--border);
	padding-left:  var(--space-6);
}

.testimonial-block__quote p {
	font-style:  italic;
	font-size:   var(--text-lg);
	color:       var(--fg);
	margin:      0 0 var(--space-3);
}

.testimonial-block__author {
	font-size: var(--text-sm);
	color:     var(--muted);
}

.testimonial-block__author strong {
	display: block;
}

/* ── Sidebar référence ───────────────────────────────────────────── */

.ref-sidebar__logo {
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--border);
}

.ref-sidebar__logo img {
	max-width: 160px;
	height:    auto;
}

.ref-sidebar__meta {
	margin: 0 0 var(--space-6);
}

.ref-sidebar__meta-item {
	display:       flex;
	flex-direction: column;
	gap:           var(--space-1);
	padding:       var(--space-3) 0;
	border-bottom: 1px solid var(--border);
}

.ref-sidebar__meta-item:first-child {
	padding-top: 0;
}

.ref-sidebar__meta dt {
	font-size:   var(--text-xs);
	font-weight: var(--fw-semi);
	color:       var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ref-sidebar__meta dd {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.ref-sidebar__cta {
	text-align: center;
}

.ref-sidebar__cta p {
	font-size:     var(--text-sm);
	color:         var(--muted);
	margin-bottom: var(--space-3);
}

/* ── Formation single (main + sidebar) ──────────────────────────── */

.formation-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--space-12);
	align-items: start;
}

@media (max-width: 1023px) {
	.formation-layout {
		grid-template-columns: 1fr;
	}
	.formation-layout__sidebar {
		order: -1;
	}
}

.formation-layout__main section + section {
	margin-top: var(--space-10);
}

.formation-layout__main h2 {
	font-size:     var(--text-xl);
	margin-bottom: var(--space-4);
}

.objectives-list {
	list-style: none;
	padding:    0;
	margin:     0;
	display:    flex;
	flex-direction: column;
	gap: var(--space-2);
}

.objectives-list li::before {
	content: "✓ ";
	color:   var(--accent);
	font-weight: var(--fw-bold);
}

.form-sidebar-card {
	background:    var(--bg-alt);
	border:        1px solid var(--border);
	border-radius: var(--radius);
	padding:       var(--space-6);
	position:      sticky;
	top:           calc(var(--header-h) + var(--space-6));
}

.form-sidebar-card__title {
	font-size:     var(--text-lg);
	margin-bottom: var(--space-4);
}

.form-sidebar__meta {
	margin:  0 0 var(--space-6);
}

.form-sidebar__meta-item {
	display:       flex;
	flex-direction: column;
	gap:           var(--space-1);
	padding:       var(--space-3) 0;
	border-bottom: 1px solid var(--border);
}

.form-sidebar__meta-item:first-child {
	padding-top: 0;
}

.form-sidebar__meta dt {
	font-size:   var(--text-xs);
	font-weight: var(--fw-semi);
	color:       var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.form-sidebar__meta dd {
	margin: 0;
}

.form-sidebar__price {
	font-size:   var(--text-xl);
	font-weight: var(--fw-bold);
	color:       var(--accent);
}

.form-sidebar__cta {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-2);
}

/* ── Équipe grid ─────────────────────────────────────────────────── */

.team-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap:                   var(--space-6);
}

.card-membre {
	text-align: center;
}

.card-membre__photo {
	padding:    var(--space-6) var(--space-6) 0;
}

.card-membre__img {
	width:         120px;
	height:        120px;
	border-radius: 50%;
	object-fit:    cover;
	margin:        0 auto;
	display:       block;
	border:        3px solid var(--border);
}

.card-membre__img--placeholder svg {
	border-radius: 50%;
}

.card-membre__role {
	font-size:  var(--text-sm);
	color:      var(--muted);
	margin-top: var(--space-1);
}

.card-membre__linkedin {
	display:     inline-flex;
	align-items: center;
	color:       var(--muted);
	margin-top:  var(--space-3);
	transition:  color var(--transition);
}

.card-membre__linkedin:hover {
	color: var(--accent);
}

/* ── Membre single ───────────────────────────────────────────────── */

.membre-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--space-12);
	align-items: start;
}

@media (max-width: 767px) {
	.membre-layout {
		grid-template-columns: 1fr;
	}
	.membre-layout__photo {
		text-align: center;
	}
}

.membre-photo {
	width:         100%;
	max-width:     280px;
	height:        280px;
	border-radius: var(--radius);
	object-fit:    cover;
	display:       block;
}

.membre-photo--placeholder {
	background: var(--bg-alt);
	border:     1px solid var(--border);
	display:    flex;
	align-items: center;
	justify-content: center;
}

.membre-bio {
	font-size:   var(--text-lg);
	line-height: var(--leading-relaxed);
}

/* ── Expertises archive grid ─────────────────────────────────────── */

.expertises-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   var(--space-6);
}

@media (max-width: 767px) {
	.expertises-grid {
		grid-template-columns: 1fr;
	}
}

.card-expertise--large .card__body {
	padding: var(--space-8);
}

.card-expertise__icon--lg svg {
	width:  40px;
	height: 40px;
}

/* ── Qualification cards ─────────────────────────────────────────── */

.qualification-card {
	display:       grid;
	grid-template-columns: 200px 1fr;
	gap:           var(--space-8);
	align-items:   start;
	padding:       var(--space-8) 0;
	border-bottom: 1px solid var(--border);
	/* Ancre /qualifications/#<slug> doit arriver sous le header sticky. */
	scroll-margin-top: calc(var(--header-h) + var(--space-3));
}

.qualification-card:first-child {
	padding-top: 0;
}

.qualification-card:last-child {
	border-bottom: none;
}

@media (max-width: 767px) {
	.qualification-card {
		grid-template-columns: 1fr;
	}
}

.qualification-card__logo {
	display:     flex;
	align-items: center;
}

.qualification-card__logo img {
	max-width: 160px;
	height:    auto;
}

.qualification-card__name-fallback {
	font-weight: var(--fw-bold);
	font-size:   var(--text-xl);
	color:       var(--accent);
}

.qualification-card__title {
	font-size:     var(--text-xl);
	margin-bottom: var(--space-3);
}

.qualification-card__desc {
	color:         var(--muted);
	margin-bottom: var(--space-4);
}

.qualification-card__meta {
	display:    flex;
	gap:        var(--space-6);
	font-size:  var(--text-sm);
	margin:     0 0 var(--space-4);
}

.qualification-card__meta dt {
	font-weight: var(--fw-semi);
	color:       var(--muted);
}

.qualification-card__meta dd {
	margin: 0;
}

/* ── FAQ archive ─────────────────────────────────────────────────── */

.faq-nav {
	border-bottom: 1px solid var(--border);
	background:    var(--bg-alt);
	position:      sticky;
	top:           var(--header-h);
	z-index:       10;
}

.faq-nav__list {
	list-style: none;
	padding:    0;
	margin:     0;
	display:    flex;
	overflow-x: auto;
	gap:        0;
	-webkit-overflow-scrolling: touch;
}

.faq-nav__link {
	display:        flex;
	align-items:    center;
	gap:            var(--space-2);
	padding:        var(--space-4) var(--space-5);
	font-size:      var(--text-sm);
	font-weight:    var(--fw-medium);
	text-decoration: none;
	color:          var(--fg);
	white-space:    nowrap;
	border-bottom:  2px solid transparent;
	transition:     color var(--transition), border-color var(--transition);
}

.faq-nav__link:hover {
	color:        var(--accent);
	border-color: var(--accent);
}

.faq-nav__count {
	background:    var(--border);
	border-radius: 999px;
	font-size:     var(--text-xs);
	padding:       0.1em 0.5em;
}

/* ── Références archive filter ───────────────────────────────────── */

.references-filter {
	margin-bottom: var(--space-8);
}

.references-filter__controls {
	display:     flex;
	flex-wrap:   wrap;
	gap:         var(--space-4);
	align-items: flex-end;
}

.filter-label {
	display:        flex;
	flex-direction: column;
	gap:            var(--space-1);
	font-size:      var(--text-sm);
	font-weight:    var(--fw-medium);
}

.filter-label--inline {
	flex-direction: row;
	align-items:    center;
}

.filter-tabs {
	display:     flex;
	flex-wrap:   wrap;
	gap:         var(--space-2);
	margin-bottom: var(--space-6);
}

.filter-tab {
	display:         inline-block;
	padding:         var(--space-2) var(--space-4);
	border:          1px solid var(--border);
	border-radius:   var(--radius-sm);
	font-size:       var(--text-sm);
	font-weight:     var(--fw-medium);
	text-decoration: none;
	color:           var(--fg);
	background:      var(--bg);
	transition:      border-color var(--transition), background var(--transition), color var(--transition);
}

.filter-tab:hover {
	border-color: var(--accent);
	color:        var(--accent);
}

.filter-tab--active {
	background:   var(--accent);
	border-color: var(--accent);
	color:        #fff;
}

.card-reference__logo img {
	max-height: 60px;
	width:      auto;
	max-width:  160px;
	filter:     grayscale(0.5);
	transition: filter var(--transition);
}

.card-reference:hover .card-reference__logo img {
	filter: grayscale(0);
}

.card-reference__tags {
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--space-1);
	margin-top: var(--space-3);
}

.card__meta-line {
	font-size:  var(--text-xs);
	color:      var(--muted);
	margin-top: var(--space-2);
}

.bw-filter-loading {
	grid-column: 1 / -1;
	text-align:  center;
	padding:     var(--space-12);
}

.no-results {
	grid-column: 1 / -1;
	text-align:  center;
	color:       var(--muted);
	padding:     var(--space-12) 0;
}

.card__meta {
	list-style: none;
	padding:    0;
	margin:     var(--space-3) 0 0;
	display:    flex;
	flex-wrap:  wrap;
	gap:        var(--space-4);
	font-size:  var(--text-sm);
	color:      var(--muted);
}

.card__meta li {
	display:     flex;
	align-items: center;
	gap:         var(--space-1);
}

/* ── Pagination ──────────────────────────────────────────────────── */

.pagination {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             var(--space-2);
}

.page-numbers {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       2.5rem;
	height:          2.5rem;
	padding:         0 var(--space-3);
	border:          1px solid var(--border);
	border-radius:   var(--radius-sm);
	font-size:       var(--text-sm);
	text-decoration: none;
	color:           var(--fg);
	transition:      border-color var(--transition), background var(--transition);
}

.page-numbers:hover,
.page-numbers.current {
	background:   var(--accent);
	border-color: var(--accent);
	color:        #fff;
}

.page-numbers.dots {
	border:     none;
	background: none;
}

/* ── Post navigation ─────────────────────────────────────────────── */

.post-nav {
	display:     flex;
	gap:         var(--space-4);
	align-items: center;
}