/* =====================================================
   MOVAWAY — PAGE BLOG (blog.html)
   (header/footer/components/base sont chargés en amont)
   Réutilise : .txt-souligne depuis base.css
   ===================================================== */

/* ============ HERO : H1 superposé à l'image (pattern faq/wecare) ============ */
.blog-hero {
  padding: 0 0 30px;
}
.blog-hero-stage {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.blog-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}
.blog-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20%;
  pointer-events: none;
}
.blog-hero-overlay h1 {
  font-size: clamp(1.8rem, 1rem + 3vw, 4rem);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}

/* ============ INTRO : eyebrow + H2 + lead + 3 mini-stats ============ */
.blog-intro {
  padding: 10px 0 40px;
}
.blog-intro-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.blog-intro-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.blog-intro-title {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--ink);
}
.blog-intro-text {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.blog-intro-text strong { color: var(--ink); font-weight: 700; }
.blog-intro-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 620px;
  margin: 30px auto 0;
}
.blog-intro-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
}
.blog-intro-stat-num {
  font-size: clamp(1.4rem, 1.1rem + 0.7vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--primary);
  line-height: 1;
}
.blog-intro-stat-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* ============ LAYOUT : grille articles (gauche) + sidebar (droite) ============ */
.blog-content {
  padding: 10px 0 100px;
}
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
/* Colonne principale : grille articles + état vide + pagination empilés */
.blog-main {
  min-width: 0;        /* nécessaire pour que la grille interne respecte sa cell */
  display: flex;
  flex-direction: column;
}

/* ============ SIDEBAR : sticky en haut, suit le scroll de la page ============
   position:sticky + top → la sidebar reste visible à l'écran pendant le scroll
   de la zone principale, sans introduire de scrollbar interne. Si la sidebar
   est plus haute que la viewport, son bas ne sera plus visible une fois sticky
   accroché en haut — comportement standard Medium/Stripe/etc., acceptable car
   les widgets clés (Recherche, Catégories) sont en haut. */
.blog-sidebar {
  position: sticky;
  top: calc(var(--header-h, 86px) + 20px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: start;          /* nécessaire avec grid-container : empêche
                                  la sidebar d'être étirée sur la hauteur */
}

/* Carte générique de widget */
.blog-widget {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.blog-widget-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--primary-soft);
}

/* ============ WIDGET RECHERCHE ============ */
.blog-search {
  position: relative;
  display: flex;
  align-items: center;
}
.blog-search-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
  pointer-events: none;
}
.blog-search-input {
  width: 100%;
  background: var(--bg-soft);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 12px 38px 12px 42px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.blog-search-input::-webkit-search-cancel-button,
.blog-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.blog-search-input:hover { background: #E5E9F0; }
.blog-search-input:focus {
  outline: none;
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(41, 124, 255, 0.12);
}
.blog-search-clear {
  position: absolute;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  color: var(--ink);
  border: 0;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background .15s ease;
}
.blog-search-clear:hover { background: var(--ink-soft); color: #fff; }
.blog-search-count {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 600;
}
.blog-search-count #blog-count {
  color: var(--primary);
  font-weight: 800;
}

/* ============ WIDGET CATÉGORIES (pills avec count) ============ */
.blog-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.blog-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all .2s ease;
}
.blog-cat-btn:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.blog-cat-btn.is-active {
  background: var(--primary-cta);
  border-color: var(--primary-cta);
  color: #fff;
}
.blog-cat-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.blog-cat-btn .fi {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.blog-cat-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
}
.blog-cat-btn:hover .blog-cat-pill {
  background: #fff;
  color: var(--primary);
}
.blog-cat-btn.is-active .blog-cat-pill {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* ============ WIDGET ARTICLES RÉCENTS (mini thumbnails) ============ */
.blog-recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.blog-recent-link {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: transform .2s ease;
}
.blog-recent-link:hover { transform: translateX(2px); }
.blog-recent-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}
.blog-recent-text {
  flex: 1;
  min-width: 0;
}
.blog-recent-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 4px;
  color: var(--ink);
  transition: color .15s ease;
  /* Clamp 3 lignes pour éviter de longs titres */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-recent-link:hover .blog-recent-title { color: var(--primary); }
.blog-recent-date {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ============ WIDGET LOGEMENTS (3 aléatoires + CTA "Voir tous") ============ */
.blog-logements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.blog-logements-item {
  /* Fade-in léger au chargement initial */
  animation: blog-logements-fade .35s ease;
}
@keyframes blog-logements-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.blog-logements-link {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: transform .2s ease;
}
.blog-logements-link:hover { transform: translateX(2px); }
.blog-logements-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}
.blog-logements-text {
  flex: 1;
  min-width: 0;
}
.blog-logements-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 4px;
  color: var(--ink);
  transition: color .15s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-logements-link:hover .blog-logements-title { color: var(--primary); }
.blog-logements-price {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.2px;
}
.blog-logements-price-period {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-left: 1px;
}

/* CTA "Voir tous les logements" en bas du widget */
.blog-logements-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  transition: gap .2s ease, color .2s ease;
}
.blog-logements-cta:hover {
  gap: 10px;
  color: var(--primary-dark);
}
.blog-logements-cta svg {
  flex-shrink: 0;
}

/* ----- GRILLE ARTICLES (3 colonnes desktop) ----- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* ============ CARTE ARTICLE ============ */
.blog-card {
  background: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.blog-card[hidden] { display: none !important; }

/* Image + pastille catégorie en overlay */
.blog-card-image-link {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  background: var(--bg-soft);
}
.blog-card-image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.blog-card:hover .blog-card-image-link img {
  transform: scale(1.04);
}
.blog-card-category {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  background: var(--primary-cta);
  box-shadow: 0 2px 8px rgba(0, 8, 56, 0.15);
  z-index: 2;
}
/* Une couleur par catégorie pour différencier visuellement */
.blog-card-category-londres { background: #297CFF; }       /* bleu Movaway */
.blog-card-category-montreal { background: #DC2626; }      /* rouge feuille d'érable */

/* Corps de carte */
.blog-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.blog-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin: 0;
}
.blog-card-title a {
  color: var(--ink);
  transition: color .2s ease;
}
.blog-card-title a:hover { color: var(--primary); }
.blog-card-excerpt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  /* Clamp à 3 lignes pour égaliser visuellement les cartes */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
}
.blog-card-author { font-weight: 700; color: var(--ink); }
.blog-card-dot { color: var(--ink-mute); }
.blog-card-date { font-weight: 500; }

/* État vide (0 résultat de filtre) */
.blog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* ============ WIDGET PROMO (carte CTA avec image de fond) ============
   Image de fond Movaway + overlay sombre brand pour lisibilité
   + titre + texte + bouton CTA blanc. */
.blog-promo {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius);
  overflow: hidden;
  min-height: 280px;
  /* Image de fond + overlay sombre dégradé brand */
  background:
    linear-gradient(160deg, rgba(0, 8, 56, 0.35) 0%, rgba(0, 8, 56, 0.92) 100%),
    url('https://movaway.fr/wp-content/uploads/2025/11/home-londres.webp') center/cover no-repeat;
  box-shadow: var(--shadow-md);
}
.blog-promo-overlay {
  position: relative;
  z-index: 1;
  padding: 26px 24px 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 280px;
  justify-content: flex-end;
}
.blog-promo-eyebrow {
  display: inline-block;
  align-self: flex-start;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 14px;
}
.blog-promo-title {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 10px;
  /* Override des règles génériques de .blog-widget-title */
  padding: 0;
  border: 0;
  text-transform: none;
}
.blog-promo-text {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 18px;
}
.blog-promo-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: #fff;
  color: var(--primary);
  font-size: 14px;
  font-weight: 800;
  border-radius: var(--radius-pill);
  transition: gap .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.blog-promo-cta:hover {
  background: var(--ink);
  color: #fff;
  gap: 12px;
  transform: translateY(-1px);
}

/* ============ EN-TÊTE PAGE DE RECHERCHE (variante de .blog-cat-head) ============ */
.blog-search-head {
  padding-bottom: 34px;
  background: linear-gradient(180deg, var(--primary-soft, #E8F4FF) 0%, #fff 85%);
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.blog-search-head-form {
  max-width: 520px;
  margin-top: 22px;
}
.blog-search-head-form .blog-search-input {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* ============ PAGINATION (boutons numérotés + flèches prev/next) ============ */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 50px;
  flex-wrap: wrap;
}
.blog-pagination[hidden] { display: none; }
.blog-page-btn,
.blog-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: all .2s ease;
}
.blog-page-btn:hover:not(:disabled),
.blog-page-num:hover:not(.is-active):not(.current) {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
/* Page courante : .is-active (helper movaway_blog_pagination) ou .current
   (pagination inline de page-blog.php) : même rendu partout. */
.blog-page-num.is-active,
.blog-page-num.current {
  background: var(--primary-cta);
  border-color: var(--primary-cta);
  color: #fff;
  cursor: default;
}
.blog-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.blog-page-numbers {
  display: flex;
  gap: 6px;
  align-items: center;
}
.blog-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  color: var(--ink-soft);
  font-weight: 700;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) {
  .blog-hero-overlay { padding: 0 15%; }
  .blog-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 32px;
  }
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (max-width: 999px) {
  .blog-intro-stats { max-width: 100%; }
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .blog-sidebar {
    /* Sidebar passe en grille 2 colonnes sous la grille d'articles */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  /* Widget recherche prend toute la largeur */
  .blog-widget-search { grid-column: 1 / -1; }
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .blog-hero { padding: 0 0 20px; }
  .blog-hero-overlay { padding: 0 12%; }
  .blog-content { padding: 20px 0 60px; }
  .blog-intro { padding: 4px 0 30px; }
  .blog-intro-stats { grid-template-columns: 1fr; gap: 10px; }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .blog-sidebar { grid-template-columns: 1fr; }
  .blog-card-title { font-size: 1.05rem; }
  .blog-page-btn,
  .blog-page-num {
    min-width: 38px;
    height: 38px;
    font-size: 13px;
  }
}

/* =====================================================
   EN-TÊTE DES PAGES CATÉGORIE (category.php)
   ===================================================== */
.blog-cat-head {
  padding: 48px 0 8px;
}
.blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-soft, #6b7280);
  margin-bottom: 18px;
}
.blog-breadcrumb a {
  color: var(--ink-soft, #6b7280);
  text-decoration: none;
  transition: color .2s ease;
}
.blog-breadcrumb a:hover { color: var(--primary, #297CFF); }
.blog-breadcrumb .is-current { color: var(--ink, #000838); font-weight: 600; }
.blog-cat-title {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink, #000838);
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.blog-cat-title .fi {
  width: 1em;
  height: 0.75em;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,8,56,0.12);
}
.blog-cat-desc {
  max-width: 720px;
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft, #4b5563);
}
.blog-cat-count {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary, #297CFF);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}