/**

 * Component: Article Card

 * Carte d'article pour afficher un post WordPress

 *

 * @package Dioqa_Starter_Custom

 */



/* ========================================

   VARIABLES

   ======================================== */



:root {

  --article-card-dark: var(--color-text-dark, #3b3949);

  --article-card-text: var(--color-text-muted, #6b687d);

  --article-card-primary: var(--bs-primary, #94d2eb);

  --article-card-radius: 10px;

}



/* ========================================

   CARD CONTAINER

   ======================================== */



.article-card {

  display: flex;

  flex-direction: column;

  gap: 19px;

  max-width: 420px;

}



/* Featured cards (2 premières) */

.article-card--featured {

  max-width: 100%;

}



/* ========================================

   IMAGE

   ======================================== */



.article-card-image {

  width: 100%;

  aspect-ratio: 760 / 415;

  border-radius: var(--article-card-radius);

  overflow: hidden;

  background-color: #d9d9d9;

}



.article-card-image a {

  display: block;

  width: 100%;

  height: 100%;

}



.article-card-image picture {

  display: block;

  width: 100%;

  height: 100%;

}



.article-card-image img,

.article-card-image picture img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.3s ease;

}



.article-card:hover .article-card-image img,

.article-card:hover .article-card-image picture img {

  transform: scale(1.05);

}



/* ========================================

   INFO

   ======================================== */



.article-card-info {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



/* ========================================

   CATEGORIES

   ======================================== */



.article-card-categories {

  display: flex;

  gap: 20px;

  align-items: center;

  flex-wrap: wrap;

}



.article-card-category {

  font-size: 16px;

  font-weight: 400;

  color: var(--article-card-primary);

  text-transform: uppercase;

  text-decoration: none;

  transition: opacity 0.2s ease;

}



.article-card-category:hover {

  opacity: 0.8;

  color: var(--article-card-primary);

}



/* ========================================

   TITLE

   ======================================== */



.article-card-title {

  font-size: 18px;

  font-weight: 700;

  color: var(--article-card-dark);

  line-height: 1.4;

  margin: 0;

}



.article-card-title a {

  color: inherit;

  text-decoration: none;

  transition: color 0.2s ease;

}



.article-card-title a:hover {

  color: var(--article-card-primary);

}



/* ========================================

   META (Author + Date)

   ======================================== */



.article-card-meta {

  font-size: 16px;

  font-weight: 400;

  color: var(--article-card-text);

  margin: 0;

}



.article-card-author {

  font-weight: 500;

  color: var(--article-card-dark);

}



/* ========================================

   RESPONSIVE - MD (< 768px)

   ======================================== */



@media (max-width: 767.98px) {

  .article-card {

    max-width: 100%;

  }



  .article-card-title {

    font-size: 16px;

  }



  .article-card-category {

    font-size: 14px;

  }



  .article-card-meta {

    font-size: 14px;

  }

}