/*
 * Copyright (c) Laurent Marson. Tous droits réservés.
 *
 * Base du front du blog, chargée sur toutes les pages : jetons et composants qui apparaissent
 * aussi bien sur les pages du blog (front.css) que dans le widget (widget.css), greffable sur
 * toute page, ou sous la fiche produit. Mise en page seulement : couleurs et typographie viennent du thème.
 * Surchargeable par le thème : themes/<thème>/modules/lamablog/views/css/common.css
 *
 * 1. Jetons
 * 2. Reset des listes du blog
 * 3. Pastilles (navigation du blog, catégories associées)
 * 4. Liste compacte de produits (colonne du blog, widget)
 * 5. Grille et cartes d'articles (listes du blog, fiche produit)
 * 6. Articles liés de la fiche produit
 *
 * Breakpoints en dur (une variable CSS n'est pas lue dans une media query) : 576px et 992px,
 * breakpoints sm et lg de Bootstrap, ceux des thèmes Classic et Hummingbird.
 */

/* 1. Jetons ------------------------------------------------------------------------------ */

/*
 * Jetons internes, portés par les racines du blog (pages : .lamablog, widget : .lamablog-widget)
 * et non par :root, pour ne rien ajouter au thème. Pas un contrat public : ajuster une règle
 * dans le custom.css du thème plutôt qu'un jeton.
 */
.lamablog,
.lamablog-widget {
  /* Espacements, multiples de 0,25 rem : l'échelle de admin.css (4 px à 24 px), en rem, plus 2xl et 3xl. */
  --lamablog-space-xs: 0.25rem;
  --lamablog-space-sm: 0.5rem;
  --lamablog-space-md: 0.75rem;
  --lamablog-space-lg: 1rem;
  --lamablog-space-xl: 1.5rem;
  --lamablog-space-2xl: 2rem;
  --lamablog-space-3xl: 3rem;

  --lamablog-weight-semibold: 600;
  --lamablog-weight-bold: 700;
}

/* 2. Reset des listes du blog ------------------------------------------------------------ */

.lamablog-categories__list,
.lamablog-compact-products,
.lamablog-widget__categories,
.lamablog-widget__posts {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 3. Pastilles --------------------------------------------------------------------------- */

.lamablog-categories__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lamablog-space-sm);
}

/* Dimensions propres à la pastille, hors échelle d'espacement. */
.lamablog-categories__link {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
}

.lamablog-categories__link.is-current {
  font-weight: var(--lamablog-weight-bold);
}

/* 4. Liste compacte de produits ---------------------------------------------------------- */

.lamablog-compact-products {
  display: grid;
  gap: var(--lamablog-space-md);
}

/* Miniature de 4 rem, propre au composant. */
.lamablog-compact-product {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--lamablog-space-md);
  align-items: center;
}

.lamablog-compact-product__media img {
  display: block;
  width: 100%;
  height: auto;
}

.lamablog-compact-product__name {
  display: block;
  overflow-wrap: anywhere;
}

.lamablog-compact-product__price {
  display: block;
  font-weight: var(--lamablog-weight-bold);
}

/* 5. Grille et cartes d'articles --------------------------------------------------------- */

/* Grille des articles : cartes de 280 px au moins, autant que la largeur en permet. */
.lamablog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--lamablog-space-xl);
}

/*
 * Nombre de colonnes réglé (--lamablog-grid-columns, entier posé avec la classe par le réglage
 * des colonnes) : 1 colonne sur mobile, 2 sur tablette, N sur ordinateur.
 */
.lamablog-grid--columns {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 576px) {
  .lamablog-grid--columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .lamablog-grid--columns {
    grid-template-columns: repeat(var(--lamablog-grid-columns, 2), minmax(0, 1fr));
  }
}

.lamablog-card {
  height: 100%;
}

.lamablog-card__media img,
.lamablog-post__cover {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

/* Typographie du thème : seule une taille réduite, propre aux métadonnées. */
.lamablog-card__meta,
.lamablog-post__meta {
  margin-bottom: var(--lamablog-space-sm);
  font-size: 0.875rem;
}

.lamablog-card__more {
  font-weight: var(--lamablog-weight-semibold);
}

/* 6. Articles liés de la fiche produit --------------------------------------------------- */

.lamablog-product-posts {
  margin-top: var(--lamablog-space-3xl);
}

.lamablog-product-posts__title {
  margin-bottom: var(--lamablog-space-xl);
}