/* Version: 23-09-2026-20-19 */
/* ==========================================================================
   Grilles de vignettes (pf-thumbs) — anciennes classes « *-elements »
   de core/grid.css (horizontal / square / vertical).

   <div class="pf-thumbs pf-thumbs--landscape|square|portrait">
     <a class="horizontal-grid-item|square-grid-item|vertical-grid-item">…</a>
   </div>

   Colonnes par palier (--thumbs-xs … --thumbs-xl), paliers propres aux vignettes :
                 < 530   ≥ 530   ≥ 768   ≥ 1100   ≥ 1440
     landscape     1       2       2       3        3
     square        1       2       3       4        5
     portrait      2       3       3       4        5
   Aperçu : core/layout-devices.css pose --_thumbs selon l'appareil.
   ========================================================================== */

#portfolio_page .pf-thumbs {
  --_thumbs: var(--thumbs-xs);
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(var(--_thumbs), 1fr);
  gap: var(--layout-gap);
}

.pf-thumbs--landscape { --thumbs-xs: 1; --thumbs-sm: 2; --thumbs-md: 2; --thumbs-lg: 3; --thumbs-xl: 3; }
.pf-thumbs--square { --thumbs-xs: 1; --thumbs-sm: 2; --thumbs-md: 3; --thumbs-lg: 4; --thumbs-xl: 5; }
.pf-thumbs--portrait { --thumbs-xs: 2; --thumbs-sm: 3; --thumbs-md: 3; --thumbs-lg: 4; --thumbs-xl: 5; }

@media screen and (min-width: 530px) {
  #portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-sm); }
}

@media screen and (min-width: 768px) {
  #portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-md); }
}

@media screen and (min-width: 1100px) {
  #portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-lg); }
}

@media screen and (min-width: 1440px) {
  #portfolio_page .pf-thumbs { --_thumbs: var(--thumbs-xl); }
}

/* Vignette : hauteur portée par le ratio (padding-bottom). */
#portfolio_page .pf-thumbs a {
  position: relative;
  transition: 0.2s linear;
  height: 0;
  width: 100%;
  box-sizing: border-box;
}

#portfolio_page .pf-thumbs--landscape a { padding: 0% 0% 50% 0%; }
#portfolio_page .pf-thumbs--square a { padding: 0% 0% 100% 0%; }
#portfolio_page .pf-thumbs--portrait a { padding: 0% 0% 150% 0%; }

/* Accueil : deux rangées pleines selon les colonnes du palier.
   Les pages modules (listing complet) ne sont pas concernées. */
@media screen and (max-width: 529px) {
  #portfolio_page [id^="home-section-"] .pf-thumbs--landscape > :nth-child(n+3),
  #portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+3),
  #portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+5) {
    display: none;
  }
}

@media screen and (min-width: 530px) and (max-width: 767px) {
  #portfolio_page [id^="home-section-"] .pf-thumbs--landscape > :nth-child(n+5),
  #portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+5),
  #portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+7) {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1099px) {
  #portfolio_page [id^="home-section-"] .pf-thumbs--landscape > :nth-child(n+5),
  #portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+7),
  #portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+7) {
    display: none;
  }
}

@media screen and (min-width: 1100px) and (max-width: 1439px) {
  #portfolio_page [id^="home-section-"] .pf-thumbs--square > :nth-child(n+9),
  #portfolio_page [id^="home-section-"] .pf-thumbs--portrait > :nth-child(n+9) {
    display: none;
  }
}

/* Listes d'articles de l'accueil (pf-cols) : deux rangées également. */
@media screen and (max-width: 650px) {
  #portfolio_page [id^="home-section-"] .blog-list > :nth-child(n+3) {
    display: none;
  }
}

@media screen and (min-width: 651px) and (max-width: 1099px) {
  #portfolio_page [id^="home-section-"] .blog-list > :nth-child(n+5) {
    display: none;
  }
}

/* ---- Contenu des vignettes ---- */

.horizontal-grid-item .poster, .square-grid-item .poster, .vertical-grid-item .poster {
  position: absolute;
  background-size: cover;
  background-position: center;
  transition: 0.2s linear;
  height: 100%;
  width: 100%;
}

/* Contraste automatique : le texte reste masqué le temps que sa couleur soit calculée, pour
   qu'il apparaisse directement dans sa teinte définitive au lieu de basculer après coup.
   Le dégradé, lui, reste visible : seule la typo est révélée en fondu. */
.thumbnail-contrast-pending :is(h4, h5, p) {
  opacity: 0;
}

.thumbnail-contrast-resolved :is(h4, h5, p) {
  opacity: 1;
  transition: opacity 160ms linear;
}

.horizontal-grid-item .horizontal-infos, .square-grid-item .square-infos, .vertical-grid-item .vertical-infos {
  position: absolute;
  bottom: 0;
  padding: 10px var(--portfolios-thumbnail-overlay-padding-x, 10px) 20px var(--portfolios-thumbnail-overlay-padding-x, 10px);
  box-sizing: border-box;
  width: 100%;
  background: var(--portfolios-thumbnail-overlay-gradient, linear-gradient(0deg, rgba(0,0,0,0.8673670151654411) 0%, rgba(0,0,0,0.6082633737088585) 39%, rgba(0,0,0,0.4878151944371498) 67%, rgba(0,0,0,0.2721289199273459) 89%, rgba(0,0,0,0) 97%, rgba(0,0,0,0) 100%));
  transition: 0.1s linear;
}

.horizontal-grid-item h4, .square-grid-item h4, .vertical-grid-item h4 {
  margin-bottom: 2px;
}