/* ==========================================================================
   CANINOVA — LISTING DU BLOG
   Chargé sur page-blog.php et sur les archives (caninova_current_page_css).

   Tout ce qui est générique vient des composants : .cn-card, .cn-grid--fill,
   .cn-filterbar, .cn-media, .cn-empty, .cn-pagination. Ce fichier ne contient
   que la recherche, la carte « à la une » et les contrats de masquage du JS.
   ========================================================================== */

/* ==========================================================================
   CONTRATS JS — MASQUAGE
   js/blog.js pose .blog-card--hidden sur les cartes non trouvées et bascule
   la classe .hidden sur le bouton d'effacement, le compteur et le bloc vide.
   Ces règles vivaient dans css/_legacy-reference.css, qui n'est plus chargé :
   sans elles la recherche s'exécute mais plus rien ne se masque.
   ========================================================================== */

.blog-card--hidden {
  display: none !important;
}

#blog-search-clear.hidden,
#blog-search-count.hidden,
#blog-no-results.hidden {
  display: none !important;
}

/* ==========================================================================
   EN-TÊTE DE PAGE
   ========================================================================== */

/* Description éditoriale (WYSIWYG) sous le chapô. */
.cn-blog__intro {
  margin-top: 18px;
  max-width: 640px;
  font-size: var(--cn-t-sm);
}

/* ==========================================================================
   BARRE STICKY : FILTRES + RECHERCHE
   La barre elle-même est le composant .cn-filterbar ; seul le champ de
   recherche, poussé à droite, est spécifique au blog.
   ========================================================================== */

.cn-blog__search {
  position: relative;
  margin-left: auto;
  width: 100%;
  max-width: 260px;
}

.cn-blog__search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--cn-text-4);
  pointer-events: none;
}

.cn-blog__search-icon svg {
  width: 100%;
  height: 100%;
}

/* Le champ est un .cn-input : on n'ajuste que la place des deux icônes. */
.cn-blog__search-input {
  padding-left: 40px;
  padding-right: 38px;
  border-radius: var(--cn-r-pill);
}

.cn-blog__search-input::-webkit-search-cancel-button {
  display: none;
}

.cn-blog__search-clear {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--cn-text-4);
  transition: background-color var(--cn-ease), color var(--cn-ease);
}

.cn-blog__search-clear svg {
  width: 13px;
  height: 13px;
}

.cn-blog__search-clear:hover {
  background: var(--cn-teal-soft);
  color: var(--cn-teal);
}

/* Compteur de résultats, au-dessus de la grille. */
.cn-blog__count {
  margin-bottom: 18px;
}

/* ==========================================================================
   GRILLE ET CARTES D'ARTICLE
   ========================================================================== */

.cn-blog__grid {
  gap: 20px;
}

/* La carte porte un lien de recouvrement (.cn-card__overlay-link) :
   elle doit donc être positionnée. */
.cn-blog__card {
  position: relative;
}

.cn-blog__card-title {
  margin-top: 8px;
}

.cn-blog__card-title a {
  color: inherit;
}

.cn-blog__card:hover .cn-blog__card-title a {
  color: var(--cn-teal);
}

.cn-blog__card-title + p {
  margin-top: 8px;
}

/* Méta de pied de carte : plus discrète que le .cn-dotlist par défaut. */
.cn-blog__card-meta {
  font-size: var(--cn-t-meta);
  color: var(--cn-text-4);
}

.cn-blog__card-arrow {
  flex-shrink: 0;
  color: var(--cn-text-4);
}

.cn-blog__card:hover .cn-blog__card-arrow {
  color: var(--cn-terracotta);
}

.cn-blog__card:hover .cn-blog__card-arrow::after {
  transform: translateX(3px);
}

/* ==========================================================================
   CARTE « À LA UNE »
   Premier article du listing : pleine largeur, média à gauche. Elle reste une
   .blog-card à l'intérieur de #blog-listing-grid pour rester filtrable.
   ========================================================================== */

@media (min-width: 860px) {
  .cn-blog__card--featured {
    grid-column: 1 / -1;
    flex-direction: row;
  }

  .cn-blog__card--featured .cn-media {
    flex: 0 0 46%;
    aspect-ratio: auto;
    min-height: 300px;
  }

  .cn-blog__card--featured .cn-card__body {
    justify-content: center;
    padding: 36px;
  }

  .cn-blog__card--featured .cn-blog__card-title {
    margin-top: 12px;
  }
}

/* ==========================================================================
   ÉTATS VIDES
   ========================================================================== */

.cn-blog__empty {
  max-width: 620px;
  margin-inline: auto;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 720px) {
  /* Barre trop haute une fois les filtres repliés : on renonce au sticky. */
  .cn-blog__bar {
    position: static;
  }

  .cn-blog__search {
    order: -1;
    margin-left: 0;
    max-width: none;
  }
}