/* ============================================================
   SPO — Archive cards (Offres / archives) — 2026 PRO
   Scope: .spo-hp-native-grid + .spo-hp-native-card (+ link inside)
   Objectifs: grille fluide, cartes pro, scan rapide, a11y, perf percue
   No regression: additif uniquement, sans dependance template
   ============================================================ */

/* -------------------------
   0) Tokens locaux (safe)
   ------------------------- */
:root{
  --spo-card-radius:16px;
  --spo-card-pad:16px;
  --spo-card-gap:16px;

  --spo-card-bg:var(--spo-surface, #fff);
  --spo-card-border:rgba(15, 42, 68, .12);
  --spo-card-border-hover:rgba(15, 42, 68, .28);

  --spo-card-shadow:0 8px 24px rgba(15, 42, 68, .08);
  --spo-card-shadow-hover:0 14px 34px rgba(15, 42, 68, .12);

  --spo-focus:rgba(30, 79, 122, .35);
  --spo-focus-strong:rgba(30, 79, 122, .55);

  --spo-title:var(--spo-primary, #0F2A44);
  --spo-text:var(--spo-text, #1F2937);
  --spo-muted:var(--spo-muted, #64748B);
  --spo-bg:var(--spo-bg, #F4F6F8);
}

/* -------------------------
   1) Grille fluide
   - auto-fit pour exploiter toutes les largeurs
   - minmax pour garder des cartes lisibles
   ------------------------- */
.spo-hp-native-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--spo-card-gap) !important;
  align-items:stretch;
}

/* petit ajustement confort */
@media (max-width: 640px){
  .spo-hp-native-grid{
    grid-template-columns:1fr;
    gap:12px !important;
  }
}

/* -------------------------
   2) Carte : structure, finition, equal height
   ------------------------- */
.spo-hp-native-card{
  height:100%;
  min-width:0;
  background:var(--spo-card-bg);
  border:1px solid var(--spo-card-border);
  border-radius:var(--spo-card-radius);
  box-shadow:var(--spo-card-shadow);
  overflow:hidden;
  position:relative;
  isolation:isolate; /* hover/focus sans artefacts */
}

/* Liseret discret "job board" */
.spo-hp-native-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, var(--spo-secondary, #1E4F7A), transparent);
  opacity:.55;
}

/* Hover premium */
@media (hover:hover){
  .spo-hp-native-card:hover{
    border-color:var(--spo-card-border-hover);
    box-shadow:var(--spo-card-shadow-hover);
  }
}

/* -------------------------
   3) Lien full-height (si présent)
   - rend toute la carte exploitable
   - organise en colonne
   ------------------------- */
.spo-hp-native-card .spo-hp-native-link{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:var(--spo-card-pad);
  text-decoration:none;
  color:inherit;
}

/* Fallback : si le lien n'existe pas, on garde le padding sur la carte */
.spo-hp-native-card:not(:has(.spo-hp-native-link)){
  padding:var(--spo-card-pad);
}

/* Focus clavier visible (a11y) */
.spo-hp-native-card .spo-hp-native-link:focus-visible{
  outline:3px solid var(--spo-focus);
  outline-offset:2px;
  border-radius:calc(var(--spo-card-radius) - 6px);
}

/* -------------------------
   4) Typo + lisibilité
   - clamp titres, meta discrète
   ------------------------- */

/* Titre (couvre beaucoup de structures possibles) */
.spo-hp-native-card :is(h2, h3, .entry-title, .hp-listing__title, .listing__title){
  margin:0 0 10px 0;
  color:var(--spo-title);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.22;
  font-size:1.05rem;

  /* clamp 2 lignes */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Meta (date, lieu, etc.) */
.spo-hp-native-card :is(.meta, .entry-meta, .hp-listing__details, .listing__details, .hp-listing__subtitle, .listing__subtitle){
  margin:0;
  color:var(--spo-muted);
  font-size:.92rem;
  line-height:1.35;

  /* limite hauteur */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Texte description si présent */
.spo-hp-native-card :is(p, .excerpt, .entry-summary, .hp-listing__description, .listing__description){
  margin:0;
  color:var(--spo-text);
  font-size:.95rem;
  line-height:1.45;

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Espacement intelligent : pousse le CTA en bas */
.spo-hp-native-card .spo-hp-native-link > :is(p, .excerpt, .entry-summary){
  margin-top:2px;
}
.spo-hp-native-card .spo-hp-native-link > :last-child{
  margin-top:auto;
}

/* -------------------------
   5) Badges / chips (si tags/catégories existent)
   - cible plusieurs structures possibles sans dépendre du HTML
   ------------------------- */
.spo-hp-native-card :is(.tags, .tagcloud, .hp-listing__labels, .listing__labels, .hp-listing__categories, .listing__categories, .hp-listing__attributes, .listing__attributes){
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 0 0;
}

.spo-hp-native-card :is(.tags a, .tagcloud a, .hp-listing__labels a, .listing__labels a, .hp-listing__categories a, .listing__categories a){
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15, 42, 68, .14);
  background:rgba(244, 246, 248, .9);
  color:var(--spo-title);
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}

@media (hover:hover){
  .spo-hp-native-card :is(.tags a, .tagcloud a, .hp-listing__labels a, .listing__labels a, .hp-listing__categories a, .listing__categories a):hover{
    border-color:rgba(30, 79, 122, .35);
    background:rgba(30, 79, 122, .08);
  }
}

/* -------------------------
   6) Zone CTA "Voir l'offre" (sans toucher HTML)
   - si un bouton/lien existe, on le stylise
   - sinon, la carte reste entièrement cliquable
   ------------------------- */
.spo-hp-native-card :is(a.button, a.btn, .button a, .btn a, .hp-button, .hp-link--button, .listing__action a){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15, 42, 68, .18);
  background:linear-gradient(180deg, #ffffff, rgba(244, 246, 248, .9));
  color:var(--spo-title);
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}

@media (hover:hover){
  .spo-hp-native-card :is(a.button, a.btn, .button a, .btn a, .hp-button, .hp-link--button, .listing__action a):hover{
    border-color:rgba(30, 79, 122, .40);
    background:rgba(30, 79, 122, .10);
  }
}
.spo-hp-native-card :is(a.button, a.btn, .button a, .btn a, .hp-button, .hp-link--button, .listing__action a):focus-visible{
  outline:3px solid var(--spo-focus-strong);
  outline-offset:2px;
}

/* -------------------------
   7) Pagination (si présente)
   ------------------------- */
body.archive :is(.pagination, .nav-links, .page-numbers){
  margin:22px 0 10px;
}

body.archive :is(.pagination .page-numbers, .nav-links .page-numbers, .page-numbers a, .page-numbers span){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(15, 42, 68, .14);
  background:#fff;
  color:var(--spo-title);
  font-weight:800;
  text-decoration:none;
  margin:0 6px 8px 0;
}

body.archive :is(.pagination .page-numbers.current, .nav-links .page-numbers.current, .page-numbers.current){
  background:rgba(30, 79, 122, .12);
  border-color:rgba(30, 79, 122, .30);
}

@media (hover:hover){
  body.archive :is(.pagination .page-numbers, .nav-links .page-numbers, .page-numbers a):hover{
    border-color:rgba(30, 79, 122, .38);
    background:rgba(30, 79, 122, .08);
  }
}
body.archive :is(.pagination .page-numbers, .nav-links .page-numbers, .page-numbers a):focus-visible{
  outline:3px solid var(--spo-focus);
  outline-offset:2px;
}

/* -------------------------
   8) Barre filtres sticky (si filtres HivePress existent)
   - stylise et rend sticky sans casser si absent
   ------------------------- */
body.archive :is(.hp-form--search, .hp-form--filter, .hp-search, .listing-search, .search-form){
  position:sticky;
  top:12px;
  z-index:20;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(244, 246, 248, .75);
  border:1px solid rgba(15, 42, 68, .10);
  border-radius:16px;
  padding:12px;
  margin:14px 0 18px;
}

/* Champs plus lisibles (si présents) */
body.archive :is(.hp-form--search, .hp-form--filter, .hp-search, .listing-search, .search-form)
:is(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], select, textarea){
  width:100%;
  border-radius:12px;
  border:1px solid rgba(15, 42, 68, .16);
  padding:10px 12px;
  background:#fff;
}
body.archive :is(.hp-form--search, .hp-form--filter, .hp-search, .listing-search, .search-form)
:is(input, select, textarea):focus{
  outline:none;
  border-color:rgba(30, 79, 122, .40);
  box-shadow:0 0 0 4px rgba(30, 79, 122, .14);
}

/* -------------------------
   9) Empty state (si aucun resultat)
   - stylise le bloc de "no results" si le theme en affiche un
   ------------------------- */
body.archive :is(.no-results, .hp-empty, .hp-message, .message, .notice){
  border:1px dashed rgba(15, 42, 68, .22);
  background:rgba(244, 246, 248, .9);
  border-radius:16px;
  padding:16px;
  color:var(--spo-title);
}

/* -------------------------
   10) Reduction motion (accessibilite)
   ------------------------- */
@media (prefers-reduced-motion: no-preference){
  .spo-hp-native-card{
    transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  }
  @media (hover:hover){
    .spo-hp-native-card:hover{
      transform:translateY(-2px);
    }
  }
}
@media (prefers-reduced-motion: reduce){
  .spo-hp-native-card{
    transition:none;
  }
}

/* -------------------------
   11) Micro-corrections anti-debordement
   ------------------------- */
.spo-hp-native-card *{
  min-width:0;
}
.spo-hp-native-card :is(a, span, strong, em){
  overflow-wrap:anywhere;
}
/* SPO — Patch: masquer le hero archive HivePress (safe) */
.header-hero.header-hero--cover.hp-listing-category.hp-listing-category--view-page.header-hero--large{
  display:none !important;
}

/* Optionnel: supprime l’espace résiduel si le thème garde une marge */
body.archive .site-content,
body.archive .content{
  padding-top:0 !important;
  margin-top:0 !important;
}