/* ==========================================================================
   CARDS — Budget participatif Uccle (thème uccle)
   Actualités, projets, lauréats, badges de statut.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PAGE ACTUALITÉS (côté utilisateur) — vue "news", affichage "page_news"
   Toutes les règles de cette section sont limitées à cette page grâce à
   .view-id-news.view-display-id-page_news : l'affichage admin de la même
   vue n'est pas touché.
   -------------------------------------------------------------------------- */

/* Mise en page générale : 2 colonnes.
   Ligne 1 : recherche sur toute la largeur.
   Ligne 2 : filtres à gauche (280px), cards à droite. */
.view-id-news.view-display-id-page_news {
  display: grid;
  grid-template-columns: 280px 1fr;
  column-gap: 2rem;
  row-gap: 1.5rem;
  align-items: start;
  margin-bottom: 3rem; /* espace avant le footer */
}

/* Par défaut, chaque élément de la vue (titre, en-tête...) prend
   toute la largeur. Les règles suivantes placent les exceptions. */
.view-id-news.view-display-id-page_news > * {
  grid-column: 1 / -1;
}

/* Le wrapper et le <form> des filtres "disparaissent" de la mise en page :
   leurs enfants (recherche, catégories) deviennent directement des cases
   de la grille ci-dessus, ce qui permet de les placer séparément. */
.view-id-news.view-display-id-page_news .views-exposed-form-wrapper,
.view-id-news.view-display-id-page_news .views-exposed-form {
  display: contents;
}

/* Champ de recherche : ligne 1, pleine largeur.
   :not(fieldset) car le fieldset des catégories a aussi la classe form-item. */
.view-id-news.view-display-id-page_news .views-exposed-form > .form-item:not(fieldset) {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
}

.view-id-news.view-display-id-page_news .views-exposed-form input[type="text"],
.view-id-news.view-display-id-page_news .views-exposed-form input[type="search"] {
  width: 100%;
}

/* Filtre par catégorie : ligne 2, colonne de gauche. */
.view-id-news.view-display-id-page_news .views-exposed-form > fieldset {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
}

/* Boutons du formulaire (ex. "Réinitialiser", visible seulement quand un
   filtre est actif) : ligne 3, sous les catégories. */
.view-id-news.view-display-id-page_news .views-exposed-form > .form-actions {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
}

/* Liste des actualités : ligne 2, colonne de droite.
   Elle a sa propre grille de cards : autant de colonnes de 280px
   minimum que la largeur le permet. */
.view-id-news.view-display-id-page_news .view-content {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Pager et compteur : sous les cards, colonne de droite. */
.view-id-news.view-display-id-page_news .admin-table-footer {
  grid-column: 2;
}

/* Image de la card : occupe toute la largeur de la card. */
.view-id-news.view-display-id-page_news .card img {
  width: 100%;
  height: auto;
  display: block;
}
.card-img-wrapper img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

/* Tablette et mobile : une seule colonne, filtres au-dessus des cards. */
@media (max-width: 991.98px) {
  .view-id-news.view-display-id-page_news {
    grid-template-columns: 1fr;
  }
  .view-id-news.view-display-id-page_news .views-exposed-form > fieldset,
  .view-id-news.view-display-id-page_news .views-exposed-form > .form-actions,
  .view-id-news.view-display-id-page_news .view-content,
  .view-id-news.view-display-id-page_news .admin-table-footer {
    grid-column: 1;
    grid-row: auto;
  }
}


/* --------------------------------------------------------------------------
   2. CARDS — comportement commun (projets, lauréats, actualités)
   -------------------------------------------------------------------------- */

/* Card en colonne flex : permet de caler les boutons en bas de carte
   (via mt-auto) quelle que soit la longueur du texte.
   + effet de survol léger, cohérent avec .card-fun (calendrier). */
article.card {
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}

article.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .09);
}

/* Conteneur de la photo de la card : sert de repère pour les pastilles
   posées dessus (badge de statut, classement) et coupe l'image à 130px. */
.card-img-wrapper {
  overflow: hidden;
  position: relative;
  max-height: 130px;
}

/* Zone des actions ("Voir le projet" + partage) en bas des cards projet. */
.project-card-actions {
  margin-top: .5rem;
}

/* Nombre de votes affiché sur les cards projet. */
.vote-count {
  font-weight: 600;
  color: var(--primary);
  font-size: .9rem;
}


/* --------------------------------------------------------------------------
   3. PASTILLES POSÉES SUR LA PHOTO
   -------------------------------------------------------------------------- */
/* Bloc Projets lauréats : le ruban de rang occupe le coin haut gauche,
   le badge de statut passe en haut à droite. */
.top-projects .badge-status--overlay {
  left: auto;
  right: 0.75rem;
}
/* Badge de statut ("Recevable", "Lauréat"...) en haut à gauche de la photo.
   Les couleurs sont dans la section 4. */
.badge-status--overlay {
  position: absolute;
  top: .75rem;
  left: .75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

/* Pastille ronde de classement (1, 2, 3...) — bloc "Projets lauréats"
   de la page d'accueil. */
.rank-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: .9rem;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}


/* --------------------------------------------------------------------------
   4. COULEURS DES BADGES
   -------------------------------------------------------------------------- */

/* Badges génériques (état d'une phase / d'un appel). */
.badge-open     { background: var(--success-bg); color: var(--accent-dark); }
.badge-progress { background: var(--info-bg);    color: var(--primary); }
.badge-closed   { background: #EDEFF1;           color: var(--text-secondary); }
.badge-selected { background: var(--warning-bg); color: var(--warning-text); }

/* Badges de statut d'un projet — utilisés par AdminProjectStatusForm
   (classes badge-status--<state>, couleurs figées historiques). */
.badge-status--draft,
.badge-status--received      { background: #e0e0e0; color: #333; }    /* brouillon, reçu */
.badge-status--under_review  { background: #fff3cd; color: #856404; } /* en analyse */
.badge-status--published,
.badge-status--voting        { background: #d4edda; color: #155724; } /* publié, en vote */
.badge-status--not_eligible  { background: #f8d7da; color: #721c24; } /* non recevable */
.badge-status--winner,
.badge-status--completed     { background: #cfe2ff; color: #084298; } /* lauréat, réalisé */
.badge-status--not_selected  { background: #e2e3e5; color: #41464b; } /* non retenu */
.badge-merged,
.badge-status--merged{
  background:var(--purple-bg);
  color:var(--purple-text);
}

/* Badges de statut d'un projet — utilisés par BpProjectStatusHelper::
   getStatusBadgeClass() (AdminEditionViewController, et tout futur
   écran utilisant le même helper). Système séparé des badge-status--*
   ci-dessus (classes différentes, mêmes teintes de palette quand elles
   existent déjà) — ajouté le 24/09, sans toucher à l'existant. */
.badge-pending   { background: var(--warning-bg); color: var(--warning-text); }
.badge-draft     { background: #EDEFF1;           color: var(--text-secondary); }
.badge-voting    { background: var(--purple-bg);  color: var(--purple-text); }
.badge-winner    { background: var(--success-bg); color: var(--accent-dark); }
.badge-completed { background: var(--info-bg);    color: var(--primary); }
.badge-in-progress{ background: var(--warning-bg); color: var(--warning-text); }

/* --------------------------------------------------------------------------
   5. BOUTONS BOOTSTRAP DANS UN CHAMP DE TEXTE RICHE (correctif Olivero)
   Olivero applique à tout lien dans .text-content une couleur, un
   soulignement et une police. Son :not(.button) ne reconnaît pas la
   classe Bootstrap "btn", donc nos boutons (ex. bloc "Nous contacter")
   en héritaient. On remet chaque propriété explicitement.
   -------------------------------------------------------------------------- */

.text-content .btn {
  display: inline-block !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  border-radius: var(--radius-sm) !important;
  padding: .4rem .9rem !important;
  font-size: .875rem !important;
}

/* Bouton contour : état normal. */
.text-content .btn.btn-outline-primary {
  color: var(--primary) !important;
  background-color: transparent !important;
  border: 1px solid var(--primary) !important;
}

/* Bouton contour : survol, focus clavier, clic. */
.text-content .btn.btn-outline-primary:hover,
.text-content .btn.btn-outline-primary:focus,
.text-content .btn.btn-outline-primary:active {
  color: #fff !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* =========================================================
   DÉCISIONS DE LA COMMUNE — fiche projet (colonne de droite)
   Une carte par décision : en-tête (pastille + titre), corps.
   Même carte que le bloc d'informations ; la pastille porte la
   couleur sémantique (mêmes paires que les badges de statut).
   ========================================================= */
.project-decision{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
}
.project-decision__header{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-bottom:.75rem;
}
.project-decision__header h2{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:var(--text);
}
.project-decision__icon{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  border-radius:50%;
  font-size:1rem;
  background:var(--success-bg);
  color:var(--accent-dark);
}
.project-decision__subtitle{
  margin:1rem 0 .25rem;
  font-size:.85rem;
  font-weight:700;
  color:var(--text-secondary);
}
.project-decision p:last-child,
.project-decision div:last-child > :last-child{
  margin-bottom:0;
}
.project-decision a{
  color:var(--primary);
  font-weight:600;
}
/* Badge dans le texte (statut du projet commun) : plus discret qu'en en-tête */
.project-decision .badge-status{
  font-size:.75rem;
  padding:.2rem .6rem;
  vertical-align:middle;
}

/* Variantes : seule la pastille change */
.project-decision--rejected .project-decision__icon{
  background:var(--danger-bg);
  color:var(--danger-text);
}
.project-decision--merged .project-decision__icon{
  background:var(--purple-bg);
  color:var(--purple-text);
}

/* =========================================================
   POINT DE COULEUR D'UNE THÉMATIQUE (field_color)
   Point + nom de la thématique en texte : la couleur n'est jamais
   seule porteuse d'information (WCAG 1.4.1), et la forme (point)
   distingue la thématique d'un badge de statut (pastille).
   ========================================================= */
.theme-dot{
  display:inline-block;
  flex-shrink:0;
  width:.75rem;
  height:.75rem;
  border-radius:50%;
  margin-right:.4rem;
  vertical-align:middle;
  background:var(--theme-color, var(--border));
}
.theme-dot--blue{ --theme-color:var(--theme-blue-text); }
.theme-dot--sky{ --theme-color:var(--theme-sky-text); }
.theme-dot--slate{ --theme-color:var(--theme-slate-text); }
.theme-dot--indigo{ --theme-color:var(--theme-indigo-text); }
.theme-dot--purple{ --theme-color:var(--theme-purple-text); }
.theme-dot--plum{ --theme-color:var(--theme-plum-text); }
.theme-dot--magenta{ --theme-color:var(--theme-magenta-text); }
.theme-dot--pink{ --theme-color:var(--theme-pink-text); }
.theme-dot--red{ --theme-color:var(--theme-red-text); }
.theme-dot--coral{ --theme-color:var(--theme-coral-text); }
.theme-dot--orange{ --theme-color:var(--theme-orange-text); }
.theme-dot--brown{ --theme-color:var(--theme-brown-text); }
.theme-dot--gold{ --theme-color:var(--theme-gold-text); }
.theme-dot--yellow{ --theme-color:var(--theme-yellow-text); }
.theme-dot--olive{ --theme-color:var(--theme-olive-text); }
.theme-dot--lime{ --theme-color:var(--theme-lime-text); }
.theme-dot--green{ --theme-color:var(--theme-green-text); }
.theme-dot--mint{ --theme-color:var(--theme-mint-text); }
.theme-dot--teal{ --theme-color:var(--theme-teal-text); }
.theme-dot--grey{ --theme-color:var(--theme-grey-text); }


/* Informations clés d'une carte projet (thématique, quartier, budget) :
   icônes dans une colonne de largeur fixe, textes alignés. */
.project-card-meta{
  font-size:.875rem;
  color:var(--text-secondary);
  margin-left: 0px;
}
.project-card-meta li{
  display:flex;
  align-items:center;
  gap:.45rem;
  line-height:1.5;
}
.project-card-meta li + li{
  margin-top:.15rem;
}
.project-card-meta__icon{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1rem;
}
.project-card-meta__icon .theme-dot{
  margin-right:0;
}