/* chp-search.css — grid + liste mobile */

.chp-search-page{
  --chp-radius:16px; --chp-gap:1.25rem; --chp-card-bg:#fff; --chp-border:#e9edf3;
  --chp-shadow:0 6px 20px rgba(20,23,28,.08); --chp-shadow-h:0 10px 28px rgba(20,23,28,.14);
  --chp-text:#111827; --chp-muted:#6b7280;
  max-width:1200px; margin-inline:auto; padding-inline:1rem;
}

@media (prefers-color-scheme: dark){
  .chp-search-page{
    --chp-card-bg:#0f1216; --chp-border:#1f2630; --chp-shadow:none;
    --chp-shadow-h:0 0 0 1px rgba(255,255,255,.06); --chp-text:#e5e7eb; --chp-muted:#9ca3af;
  }
}

.chp-search-header h1{ margin:0 0 .25rem }
.chp-search-header p{ color:var(--chp-muted); margin:.25rem 0 1rem }

.chp-grid{
  display:grid;
  /* cartes entre 200px et 280px */
  grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
  gap: var(--chp-gap);
  justify-content: start;
  align-content: start;
  align-items: stretch;        /* ← toutes les cellules ont la même hauteur de rangée */
}

.chp-card{
  background:var(--chp-card-bg);
  border:1px solid var(--chp-border);
  border-radius:var(--chp-radius);
  overflow:hidden;
  box-shadow:var(--chp-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex;               /* ← pour égaliser les hauteurs internes */
  flex-direction:column;      /* desktop : image au-dessus, texte dessous */
  height:100%;                /* remplit la cellule de grille */
}
.chp-card:focus-within,
.chp-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--chp-shadow-h);
  border-color:transparent;
}

.chp-card-media{
  display:block; position:relative; aspect-ratio:16/9; overflow:hidden;
  flex:0 0 auto;              /* zone image fixe en hauteur (via aspect-ratio) */
}
.chp-card-media img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;
}
.chp-card:hover .chp-card-media img{ transform:scale(1.04) }
.chp-card-media-fallback{
  display:block; width:100%; height:100%;
  background:linear-gradient(135deg,#eef2ff,#f0f9ff);
}
@media (prefers-color-scheme: dark){
  .chp-card-media-fallback{ background:linear-gradient(135deg,#0b1220,#111827) }
}

.chp-card-body{
  padding:1rem 1rem 1.1rem;
  display:flex; flex-direction:column; flex:1 1 auto; /* ← s’étire pour aligner les hauteurs */
}

.chp-card-title{
  font-size:1.02rem !important; line-height:1.35; margin:.1rem 0 .5rem 0 !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.chp-card-title a{ color:var(--chp-text); text-decoration:none }
.chp-card-title a:focus, .chp-card-title a:hover{ text-decoration:underline }

.chp-card-excerpt{ color:var(--chp-muted); font-size:.95rem; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.chp-card-excerpt p{ margin-bottom:5px !important }
.chp-card-title, .chp-card-excerpt{ overflow-wrap:anywhere }

/* Pagination */
.chp-pagination{ margin:1.25rem 0 0; display:flex; flex-wrap:wrap; gap:.5rem }
.chp-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.25rem; height:2.25rem; padding:0 .6rem;
  border:1px solid var(--chp-border); border-radius:10px;
  text-decoration:none; color:var(--chp-text); background:var(--chp-card-bg);
}
.chp-pagination .page-numbers.current{ font-weight:600; box-shadow:var(--chp-shadow) }
.chp-pagination .page-numbers:hover{ text-decoration:none; transform:translateY(-1px) }

/* ———————————————————————————————
   MODE MOBILE : liste, vignette à gauche, texte à droite
   ——————————————————————————————— */
@media (max-width: 640px){
  .chp-grid{ grid-template-columns: 1fr }  /* une box par ligne */
  .chp-card{
    flex-direction: row;         /* image à gauche, texte à droite */
    align-items: stretch;
  }
  .chp-card-media{
    flex: 0 0 42%;               /* largeur de la vignette */
    aspect-ratio: 4 / 3;         /* ratio un peu plus “vignette” en liste */
  }
  .chp-card-body{ padding: .75rem 1rem }  /* compacter un peu */
  .chp-card-excerpt{ -webkit-line-clamp:3 }/* 3 lignes sur mobile */
}