/*
 * Section Photo — /photo/
 *
 * Chargée uniquement sur les pages photo (build.py, PHOTO_CSS_LINK).
 *
 * La mise en page reprend celle du site d'origine pavlesavic.photography :
 * colonne de contenu centrée à 60 % de la fenêtre, légendes alignées à
 * droite, alternance de photos pleine colonne et de rangées de deux, une
 * cellule pouvant rester vide pour laisser une image en demi-colonne.
 * Le menu, lui, passe dans la typo du site (NHG, soulignement animé).
 *
 * Les photos ne sont jamais recadrées : hauteur automatique, ratio d'origine.
 * Seules les vignettes de l'index sont cadrées, pour aligner la grille.
 */

:root {
  --photo-col: min(60vw, 1600px);
  --photo-gutter: 24px;
  --photo-rhythm: 96px;
}

/* .wtf-container pose déjà le décalage sous la navbar fixe (179 px) ; la
   marge basse de 345 px pensée pour la home laisse ici un vide énorme avant
   le pied de page. */
body.page-photo .wtf-container {
  margin-bottom: 40px !important;
}

body.page-photo .bg-black {
  background: #111;
}

/* ------------------------------------------------------------------ */
/* Index : une carte par catégorie                                     */
/* ------------------------------------------------------------------ */
/*
 * Trois catégories de front : Journal, Making of, Commercial. La largeur
 * vient de la grille du site (col-md-4), posée par build.py.
 *
 * Les cartes reprennent le gabarit des cartes projet (.video-container
 * .small-container), donc titre posé sur l'image et typo héritée. Il ne
 * reste ici que ce qui leur est propre : le cadre carré.
 */
.photo-index-grid {
  padding-top: 24px;
}

/* Une rangée incomplète se centre : deux projets dans une catégorie ne
   laissent plus un tiers de vide à droite. Les colonnes flottantes passent
   en flex, qui respecte leur largeur de grille (col-md-4). */
@media (min-width: 992px) {
  .photo-group-grid .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Format des cartes de collection, 37/42. Les cartes vidéo sont en 37/20
   parce qu'un plan est horizontal ; une photo, elle, est le plus souvent
   verticale, et ce portrait lui va.
   Le carré avait été choisi quand l'index n'avait que deux cartes par ligne :
   en 37/42, une seule occupait alors tout l'écran. À trois de front, la
   contrainte tombe et la page tient sans défiler. */
.photo-card .video-layer.small {
  aspect-ratio: 37 / 42;
}

/* Le <picture> ne fait qu'envelopper l'image : c'est l'<img class="image-background">
   qui est positionnée et recadrée par le CSS du site. */
.photo-card .video-layer picture {
  display: contents;
}

/* Titre centré sur l'image.
   Le site cale le bloc titre des cartes projet à 37 % de la hauteur, ce qui
   le place au-dessus du milieu : réglage fait pour un cadre 37/20 très bas,
   où le centre géométrique tombe trop bas à l'œil. Sur un carré, le titre
   doit être au centre. On repart du milieu et on remonte de la moitié de la
   hauteur du bloc, pour centrer le texte lui-même et pas son coin haut. */
.photo-card .title-block.small {
  padding-top: 0;
}

.photo-card .title-block.small .title-container {
  top: 50%;
  transform: translateY(-50%);
}

/* ------------------------------------------------------------------ */
/* Défilement au survol                                                */
/* ------------------------------------------------------------------ */
/*
 * Les vues sont injectées par photo-scrub.js au premier survol, empilées
 * au-dessus de la couverture (z-index 3) et sous le titre (z-index 10).
 * Coupe franche et non fondu : le geste doit répondre comme un défilement
 * sur une table de montage, pas comme un diaporama.
 */
.photo-scrub-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.photo-scrub-frame.is-on {
  opacity: 1;
}

/* Le titre s'efface au survol, comme sur les cartes projet, sauf qu'ici il
   dévoile la photo au lieu de lancer une vidéo.
   Les !important répondent à ceux du site : `.video-container .title-block`
   fige l'opacité à 1 et coupe les transitions, ce qui vaut pour les cartes
   vidéo dont player.js pilote le fondu en JS, mais pas ici. */
.photo-card .title-block.small {
  transition: opacity .4s ease !important;
}

.photo-card:hover .title-block.small {
  opacity: 0 !important;
}

/* Le site fait glisser le titre hors cadre quand on le survole directement
   (text-indent: 100%), parce qu'une vidéo prend sa place. Ici le fondu suffit,
   et ce glissement ferait sauter le texte. */
.photo-card .title-block.small:hover {
  text-indent: 0;
}

/* ------------------------------------------------------------------ */
/* Page série                                                          */
/* ------------------------------------------------------------------ */
.photo-series {
  padding: 0 0 80px;
}

.photo-layout {
  position: relative;
}

.photo-column {
  width: var(--photo-col);
  margin: 0 auto;
}

.photo-row {
  margin-bottom: var(--photo-gutter);
}

.photo-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--photo-gutter);
  align-items: start;
}

.photo-cell picture,
.photo-cell img {
  display: block;
  width: 100%;
  height: auto;
}

.photo-cell img {
  background: #000;
}

/* Une cellule vide occupe sa colonne sans rien afficher : c'est ce qui
   laisse une photo seule en demi-colonne, comme sur mushroom people. */
.photo-cell--empty {
  display: block;
}

/* ------------------------------------------------------------------ */
/* Légendes intercalaires (pays et date, crédits)                      */
/* ------------------------------------------------------------------ */
.photo-caption {
  font-family: NHG-35Thin, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1.7;
  color: #fff;
  text-align: right;
  margin: var(--photo-rhythm) 0 28px;
  text-wrap: pretty;
}

/* La première légende ouvre la page : elle n'a rien au-dessus d'elle. */
.photo-column > .photo-caption:first-of-type {
  margin-top: 8px;
}

.photo-caption-line {
  display: block;
}

/* ------------------------------------------------------------------ */
/* Menu de section                                                     */
/* ------------------------------------------------------------------ */
/*
 * Une seule ligne centrée au-dessus du contenu, sur les pages série et
 * catégorie : les entrées de l'index (Journal, Making of, Commercial),
 * rien d'autre. Typo et soulignement animé identiques à la navbar
 * (NHG-35Thin 18 px, trait qui se déploie en .4 s) : le menu parle la
 * langue du site au lieu d'afficher l'arborescence. L'entrée active garde
 * son trait ; sur une série rangée dans une catégorie, c'est l'entrée de
 * la catégorie qui le porte.
 */
.photo-menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 44px;
  margin: 0 auto 64px;
}

.photo-menu-item {
  position: relative;
  font-family: NHG-35Thin, Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
  text-decoration: none;
  padding: 0 0 8px;
}

.photo-menu-item:hover,
.photo-menu-item:focus {
  color: #fff;
  text-decoration: none;
}

.photo-menu-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  border-bottom: 1px solid #fff;
  transition: .4s;
}

.photo-menu-item:hover::after,
.photo-menu-item.is-active::after {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* Adaptations                                                         */
/* ------------------------------------------------------------------ */

/* Sous ~1200 px, la colonne centrée à 60 % devient trop étroite : elle
   s'élargit à presque toute la fenêtre. */
@media (max-width: 1199px) {
  :root {
    --photo-col: 92vw;
  }
}

@media (max-width: 767px) {
  :root {
    --photo-gutter: 12px;
    --photo-rhythm: 64px;
  }

  .photo-index {
    padding-bottom: 72px;
  }

  .photo-card-title {
    font-size: 22px;
  }

  .photo-series {
    padding-bottom: 88px;
  }

  /* Deux photos côte à côte sur un téléphone donnent des images de 160 px de
     haut : les rangées doubles s'empilent. */
  .photo-row--split {
    grid-template-columns: 1fr;
  }

  .photo-cell--empty {
    display: none;
  }

  .photo-menu {
    gap: 0 26px;
    margin-bottom: 48px;
  }

  .photo-menu-item {
    font-size: 15px;
  }
}