/* ============================================================
   HEKLA — Blocs de contenu — Page projet
   ============================================================ */

/* ── Conteneur général des blocs ───────────────────────────── */
.projet-blocks {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

/* ── Largeurs des blocs ─────────────────────────────────────── */
.block-wrap {
  width: 100%;
  margin: 0 auto;
  padding: 5px 0;
}

/* Bloc espace — pas de padding, hauteur libre */
.block-wrap--spacer {
  padding: 0;
}

.block-wrap--full   { max-width: 100%; padding-left: 0; padding-right: 0; }
.block-wrap--large  { max-width: 1280px; padding-left: clamp(24px, 4vw, 80px); padding-right: clamp(24px, 4vw, 80px); }
.block-wrap--half   { max-width: 50%;    padding-left: clamp(24px, 4vw, 80px); padding-right: clamp(24px, 4vw, 80px); }
.block-wrap--medium { max-width: 900px;  padding-left: clamp(24px, 4vw, 80px); padding-right: clamp(24px, 4vw, 80px); }
.block-wrap--small  { max-width: 640px;  padding-left: clamp(24px, 4vw, 80px); padding-right: clamp(24px, 4vw, 80px); }
.block-wrap--third  { max-width: 420px;  padding-left: clamp(24px, 4vw, 80px); padding-right: clamp(24px, 4vw, 80px); }

/* ── Bloc TEXTE ─────────────────────────────────────────────── */
.block-text {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.75;
  color: var(--c-text);
  font-weight: 300;
}

/* ── Bloc PHOTO ─────────────────────────────────────────────── */
.block-photo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.block-photo__img {
  width: 100%;
  display: block;
  aspect-ratio: 16/9; /* défaut — surchargé par les classes ratio */
  object-fit: cover;
  border-radius: 20px;
}

/* Ratios bloc photo */
.block-photo--ratio-auto     .block-photo__img { aspect-ratio: auto; height: auto; }
.block-photo--ratio-cinema   .block-photo__img { aspect-ratio: 16/9; }
.block-photo--ratio-landscape .block-photo__img { aspect-ratio: 4/3; }
.block-photo--ratio-square   .block-photo__img { aspect-ratio: 1; }
.block-photo--ratio-portrait .block-photo__img { aspect-ratio: 3/4; }
.block-photo--ratio-tall     .block-photo__img { aspect-ratio: 9/16; }

.block-wrap--full .block-photo--ratio-auto .block-photo__img {
  max-height: 85vh;
  object-fit: contain;
}

.block-photo__caption {
  font-size: 0.78rem;
  color: var(--c-text-muted, rgba(255,255,255,0.45));
  letter-spacing: 0.04em;
  padding: 0 2px;
}

/* ── Bloc GRILLE PHOTOS ─────────────────────────────────────── */
.block-photo-grid {
  display: grid;
  gap: 10px;
}

.block-photo-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.block-photo-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.block-photo-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Ratios grille — définis sur le CONTENEUR, pas le média ──
   Cela permet à width:100% + height:100% de se résoudre
   correctement sur img/video, et à object-fit de fonctionner. */
.block-photo-grid__item {
  overflow: hidden;
  background: #fff;
  aspect-ratio: 1; /* défaut carré */
  border-radius: 20px;
  position: relative; /* contexte de positionnement pour les enfants absolus */
}

.block-photo-grid--ratio-auto      .block-photo-grid__item { aspect-ratio: auto; }
.block-photo-grid--ratio-cinema    .block-photo-grid__item { aspect-ratio: 16/9; }
.block-photo-grid--ratio-landscape .block-photo-grid__item { aspect-ratio: 4/3; }
.block-photo-grid--ratio-square    .block-photo-grid__item { aspect-ratio: 1; }
.block-photo-grid--ratio-portrait  .block-photo-grid__item { aspect-ratio: 3/4; }
.block-photo-grid--ratio-tall      .block-photo-grid__item { aspect-ratio: 9/16; }

/* ratio-auto + vidéo/iframe : :has() n'est pas supporté Firefox < 121.
   Le ratio est forcé en JS via item.style.aspectRatio quand ratio=auto.
   On garde le sélecteur :has() en bonus pour les navigateurs qui le supportent. */
.block-photo-grid--ratio-auto .block-photo-grid__item:has(video),
.block-photo-grid--ratio-auto .block-photo-grid__item:has(iframe) {
  aspect-ratio: 16/9;
}
.block-photo-grid--ratio-auto .block-photo-grid__video:not(.block-photo-grid__video--cover) {
  height: auto;
}
/* La classe .block-photo-grid__item--video-ratio est ajoutée par JS
   pour les navigateurs ne supportant pas :has() */
.block-photo-grid__item--video-ratio {
  aspect-ratio: 16/9 !important;
}

.block-photo-grid__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: none;
}

.block-photo-grid__video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* défaut : vidéo entière visible, barres possibles */
  display: block;
}
.block-photo-grid__video--cover {
  object-fit: cover;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.block-photo-grid__iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

/* ── Cover pour les iframes (YouTube / Vimeo) ────────────────
   object-fit n'existe pas sur iframe → trick :
   on surdimensionne l'iframe en 16:9, on la centre,
   le parent (overflow:hidden) cache le surplus.           */
.block-photo-grid__item--cover {
  position: relative;
  overflow: hidden;
}
.block-photo-grid__item--cover .block-photo-grid__iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* maintenir le ratio source 16:9 tout en couvrant la cellule */
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: 16 / 9;
}

/* ── Bloc VIDÉO ─────────────────────────────────────────────── */
.block-video {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}

/* Le radius est porté AUSSI par le média lui-même. <video> et <iframe>
   obtiennent leur propre couche de composition, que le overflow:hidden
   du parent ne découpe pas de manière fiable — Safari laisse les angles
   carrés. Le poser directement sur l'élément est le seul moyen sûr. */
.block-video video,
.block-video__ratio iframe {
  border-radius: 20px;
}

.block-video video {
  width: 100%;
  display: block;
  /* aspect-ratio 16:9 par défaut : évite l'effondrement à hauteur 0
     avant que les métadonnées de la vidéo soient chargées.
     Le navigateur corrige automatiquement quand les vraies dimensions arrivent. */
  aspect-ratio: 16 / 9;
}

.block-wrap--full .block-video video {
  max-height: 90vh;
  object-fit: cover;
}

/* Iframe 16:9 pour YouTube / Vimeo */
.block-video__ratio {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  border-radius: 20px;
  overflow: hidden;
}

.block-video__ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Bloc GIF ───────────────────────────────────────────────── */
.block-gif {
  text-align: center;
}

.block-gif img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* ── Bloc CITATION ──────────────────────────────────────────── */
/* ── Bloc CRÉDITS ───────────────────────────────────────────── */
.block-credits {
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}


.block-credits__title {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 24px;
}

.block-credits__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 60px;
}

.block-credits__item {
  text-align: center;
}

.block-credits__role {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 4px;
}

.block-credits__name {
  font-size: 0.95rem;
  color: var(--c-text);
  font-weight: 400;
}

/* ── Animations entrée ──────────────────────────────────────── */
.block-wrap {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.block-wrap.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .block-photo-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
  .block-photo-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }

  .block-wrap {
    padding: 5px 0;
  }

  /* Premier bloc toujours à 98px du haut pour passer sous .projet-infos
     (pill fixe). S'applique quel que soit le type de bloc (texte, photo,
     grille, vidéo, crédits, espace). Spécificité (0,2,0) > --spacer/--full. */
  .projet-blocks .block-wrap:first-child {
    padding-top: 108px;
  }
}

@media (max-width: 480px) {
  .block-photo-grid--cols-2,
  .block-photo-grid--cols-3,
  .block-photo-grid--cols-4 {
    grid-template-columns: 1fr;
  }
}