/**
 * articles.css — Cartes "derniers articles" sur le même principe
 * visuel que les tuiles de service (assets/css/tuiles.css).
 */

/* ── Onglets Nos articles / Nouveautés (home) ──────────────────── */
.hub-news-tabs {
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}

.hub-news-tabs__tab {
  display: inline-block;
  padding: 0.5rem 1.3rem;
  border-radius: 999px;
  background: #fff;
  color: var(--wp--preset--color--primary-dark);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--wp--preset--color--border);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.hub-news-tabs__tab:hover {
  background: var(--wp--preset--color--surface);
}

.hub-news-tabs__tab.is-active {
  background: var(--wp--preset--color--primary);
  color: #fff;
  border-color: var(--wp--preset--color--primary);
}

.hub-articles-grid .wp-block-post {
  background: #fff;
  border: 1px solid #e8eef6;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.hub-articles-grid .wp-block-post::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--wp--preset--color--primary);
  z-index: 1;
}

.hub-articles-grid .wp-block-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(51, 76, 152, 0.12);
}

.hub-articles-grid .wp-block-post-featured-image {
  margin: 0;
}

.hub-articles-grid .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.hub-articles-grid .wp-block-post-date,
.hub-articles-grid .wp-block-post-title,
.hub-articles-grid .wp-block-post-excerpt,
.hub-articles-grid .wp-block-read-more {
  margin-left: 1.4rem;
  margin-right: 1.4rem;
}

.hub-articles-grid .wp-block-post-date {
  margin-top: 1.1rem;
  margin-bottom: 0.4rem;
  color: #8a8f94;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hub-articles-grid .wp-block-post-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 0.97rem;
}

.hub-articles-grid .wp-block-post-title a {
  color: var(--wp--preset--color--primary-dark);
  text-decoration: none;
}

.hub-articles-grid .wp-block-post-title a:hover {
  color: var(--wp--preset--color--primary);
}

.hub-articles-grid .wp-block-post-excerpt {
  font-size: 0.83rem;
  color: #555;
  line-height: 1.55;
  flex: 1 0 auto;
  margin-bottom: 1rem;
}

.hub-articles-grid .wp-block-post-excerpt p {
  margin: 0;
}

.hub-articles-grid .wp-block-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  margin-bottom: 1.4rem;
  transition: gap 0.15s;
}

.hub-articles-grid .wp-block-read-more::after {
  font-family: "boxicons" !important;
  font-style: normal;
  content: "\ebab"; /* bx-right-arrow-alt */
  line-height: 1;
}

.hub-articles-grid .wp-block-read-more:hover {
  color: var(--wp--preset--color--primary-dark);
  gap: 0.55rem;
}

/* ── Filtre par catégories (index.html / archive.html) ────────── */
.hub-category-filter {
  gap: 0.6rem;
  margin: 0 0 2rem 0;
}

.hub-category-filter .wp-block-categories {
  display: contents;
}

.hub-category-filter .wp-block-categories li {
  list-style: none;
  margin: 0;
}

.hub-category-filter__all,
.hub-category-filter .wp-block-categories li a {
  display: inline-block;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--primary-dark);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--wp--preset--color--border);
  transition: background 0.15s, color 0.15s;
}

.hub-category-filter__all:hover,
.hub-category-filter .wp-block-categories li a:hover {
  background: var(--wp--preset--color--primary);
  color: #fff;
  border-color: var(--wp--preset--color--primary);
}

/* ── Mise en page article + colonne latérale (single.html) ────── */
.hub-article-layout {
  align-items: flex-start;
}

.hub-article-layout__main {
  flex: 1 1 auto;
  min-width: 0;
}

.hub-article-layout__sidebar {
  flex: 0 0 240px;
  width: 240px;
  background: #fff;
  border: 1px solid #e8eef6;
  border-radius: 14px;
  padding: 1.5rem 1.3rem;
}

@media (max-width: 782px) {
  .hub-article-layout {
    flex-wrap: wrap;
  }

  .hub-article-layout__sidebar {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ── Habillage des libellés (icône + petite majuscule) ─────────── */
.hub-post-terms__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.hub-post-terms__label::before {
  font-family: "boxicons" !important;
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  color: var(--wp--preset--color--primary);
}

.hub-post-terms__label--cat::before {
  content: "\eaab"; /* bx-folder */
}

.hub-post-terms__label--tag::before {
  content: "\eb93"; /* bx-purchase-tag */
  color: #8a6d00;
}

/* Section "tous les termes du site" : pastilles un cran plus discrètes
   pour ne pas rivaliser avec celles de l'article en cours. */
.hub-category-filter--sidebar li a,
.hub-tag-filter--sidebar a {
  padding: 0.28rem 0.75rem !important;
  font-size: 0.72rem !important;
}

.hub-sidebar-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  transition: gap 0.15s;
}

.hub-sidebar-link a::after {
  font-family: "boxicons" !important;
  font-style: normal;
  content: "\ebab"; /* bx-right-arrow-alt */
  line-height: 1;
}

.hub-sidebar-link a:hover {
  color: var(--wp--preset--color--primary-dark);
  gap: 0.55rem;
}

/* ── Catégories d'un article (single.html, haut et bas) ───────── */
.hub-post-terms__label {
  margin: 0 0 0.5rem 0;
  color: #8a8f94;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hub-post-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hub-post-terms a {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--primary-dark);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--wp--preset--color--border);
  transition: background 0.15s, color 0.15s;
}

.hub-post-terms a:hover {
  background: var(--wp--preset--color--primary);
  color: #fff;
  border-color: var(--wp--preset--color--primary);
}

/* Sépare, dans la colonne latérale d'un article, les termes de
   l'article lui-même du reste des catégories/étiquettes du site. */
.hub-sidebar-divider {
  margin-top: 1.8rem !important;
  padding-top: 1.2rem;
  border-top: 1px solid #e2e5e7;
}

/* ── Pastilles catégorie + tags sur les cartes (home + listing) ─── */
.hub-post-terms-row {
  margin: 0.5rem 1.4rem 0.5rem;
  gap: 0.4rem;
}

.hub-post-terms-row .hub-post-terms {
  margin: 0;
}

.hub-post-terms--card a {
  padding: 0.2rem 0.7rem;
  font-size: 0.72rem;
}

/* Petit cadenas devant les catégories réservées aux connectés */
.hub-post-terms a[href*="/category/fiches-conseils-et-retours-dexperience/"]::before {
  font-family: "boxicons" !important;
  font-style: normal;
  content: "\eb15";
  margin-right: 0.35em;
}

/* Tags : même forme de pastille, couleur distincte (doré) pour ne pas
   les confondre avec les catégories (bleu). */
.hub-post-terms--tags a {
  background: #fdf3d9;
  color: #8a6d00;
  border-color: #f0dd9e;
}

.hub-post-terms--tags a:hover {
  background: var(--wp--preset--color--accent);
  color: #513f00;
  border-color: var(--wp--preset--color--accent);
}

.hub-post-terms--tags a::before {
  content: "#";
  opacity: 0.7;
  margin-right: 0.1em;
}

/* ── Filtre par tags (index.html / archive.html), même principe
   que .hub-category-filter mais en doré pour rester lisible en un
   coup d'œil ────────────────────────────────────────────────────── */
.hub-tag-filter {
  gap: 0.5rem;
  margin: 0 0 2rem 0;
}

.hub-tag-filter .wp-block-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.hub-tag-filter .wp-block-tag-cloud a {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: #fdf3d9;
  color: #8a6d00;
  font-size: 0.8rem !important;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #f0dd9e;
  transition: background 0.15s, color 0.15s;
}

.hub-tag-filter .wp-block-tag-cloud a::before {
  content: "#";
  opacity: 0.7;
  margin-right: 0.15em;
}

.hub-tag-filter .wp-block-tag-cloud a:hover {
  background: var(--wp--preset--color--accent);
  color: #513f00;
  border-color: var(--wp--preset--color--accent);
}

/* ── Recherche d'articles ──────────────────────────────────────── */
.hub-articles-search {
  max-width: 420px;
  position: relative;
}

/* Un seul bord, porté par le conteneur (input + bouton forment une
   même pilule) : le style natif "bouton intérieur" de WordPress met
   sinon un bord sur le conteneur ET un bord par défaut sur le champ,
   ce qui double le trait. */
.hub-articles-search .wp-block-search__inside-wrapper {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  padding: 0;
}

.hub-articles-search .wp-block-search__input {
  border: none;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
}

.hub-articles-search .wp-block-search__input:focus {
  outline: none;
}

.hub-articles-search .wp-block-search__button {
  border-radius: 0;
  background: var(--wp--preset--color--primary);
  border: none;
  color: #fff;
  padding: 0.6rem 1rem;
}

.hub-articles-search .wp-block-search__button:hover {
  background: var(--wp--preset--color--primary-dark);
}

.hub-articles-search .wp-block-search__button svg {
  fill: #fff;
}

/* Suggestions d'auto-complétion (assets/js/article-search.js) */
.hub-search-suggestions {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(31, 41, 55, 0.14);
  overflow: hidden;
  z-index: 20;
}

.hub-search-suggestions__item {
  display: block;
  padding: 0.6rem 1.1rem;
  color: var(--wp--preset--color--primary-dark);
  text-decoration: none;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.hub-search-suggestions__item:last-child {
  border-bottom: none;
}

.hub-search-suggestions__item:hover,
.hub-search-suggestions__item:focus {
  background: var(--wp--preset--color--surface);
  outline: none;
}