/* ============================================================
   HEKLA — Section Projets
   ============================================================ */

.projects-section {
  position: relative;
  z-index: 20;
  background: #ffffff;
  padding: 40px 0 40px;
  margin-top: -2px;
}

/* ── Titre de section ─────────────────────────────────────── */
.projects-section-title {
  font-family: var(--f-serif);
  font-size: clamp(0.65rem, 0.9vw, 0.8rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-grey-500);
  margin-bottom: 48px;
}

/* ── Conteneur clippé (créé par JS) ──────────────────────── */
.projects-inner {
  position: relative;
  height: min(720px, 82vh);
  overflow: hidden;
  /* Masque doux : fondu en haut (entrée) + bas (deck) */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 6%,
    black 68%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 6%,
    black 68%,
    transparent 100%
  );
}

/* ── Bande projet — liquid glass iOS ─────────────────────── */
.project-band {
  display: flex;
  align-items: stretch;
  padding: 18px 0;
  text-decoration: none;
  color: var(--c-black);
  overflow: hidden;

  /* Liquid Glass */
  background: rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(48px) saturate(200%) brightness(1.04);
  -webkit-backdrop-filter: blur(48px) saturate(200%) brightness(1.04);
  border: 1px solid rgba(255, 255, 255, 0.78);

  /* Ombres multicouches pour l'effet de profondeur */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.07),
    0 2px 8px  rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.30),
    inset 1px 0 0 rgba(255, 255, 255, 0.60),
    inset -1px 0 0 rgba(255, 255, 255, 0.60);

  /* Coins très arrondis — style iOS widget */
  border-radius: 20px;
  margin: 0 10px 6px;

  /* GPU compositing */
  will-change: transform;
  transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* ── Hover orange ─────────────────────────────────────────── */
@media (hover: hover) {
  .project-band:hover {
    background: rgba(242, 99, 34, 0.88);
    border-color: rgba(255, 120, 50, 0.35);
    box-shadow:
      0 8px 40px rgba(242, 99, 34, 0.28),
      0 2px 10px rgba(242, 99, 34, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.25),
      inset 0 -1px 0 rgba(255, 255, 255, 0.10);
  }
  .project-band:hover .project-band__title,
  .project-band:hover .project-band__typology { color: var(--c-white); }
  .project-band:hover .project-tag { color: var(--c-white); border-color: rgba(255,255,255,0.5); }
}

/* ── is-last (réservé pour usage futur) ──────────────────── */
.project-band.is-last {
  background: rgba(242, 99, 34, 0.88);
  border-color: rgba(255, 120, 50, 0.35);
  box-shadow:
    0 8px 40px rgba(242, 99, 34, 0.28),
    0 2px 10px rgba(242, 99, 34, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.project-band.is-last .project-band__title,
.project-band.is-last .project-band__typology { color: var(--c-white); }
.project-band.is-last .project-tag { color: var(--c-white); border-color: rgba(255,255,255,0.5); }

/* ── Textes ───────────────────────────────────────────────── */
.project-band__title,
.project-band__typology,
.project-tag {
  transition: color 0.25s ease, border-color 0.25s ease;
}

/* ── Fond glissant — désactivé ───────────────────────────── */
.projects-hover-bg { display: none; }

/* ── Partie gauche ────────────────────────────────────────── */
.project-band__left {
  width: 52%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 40px;
}

.project-band__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-band__title {
  font-family: var(--f-serif);
  font-size: clamp(1.8rem, 2.6vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--c-black);
}

.project-band__typology {
  font-family: var(--f-sans);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-grey-300);
}

/* ── Tags ─────────────────────────────────────────────────── */
.project-band__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 24px;
}

.project-tag {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  padding: 5px 13px;
  border: 1px solid var(--c-grey-300);
  border-radius: 100px;
  color: var(--c-black);
  line-height: 1.4;
  transition: border-color 0.3s ease;
}

/* ── Partie droite — strip de photos ─────────────────────── */
.project-band__right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding-right: 20px;
}

/* ── Photo ────────────────────────────────────────────────── */
.project-photo {
  height: 148px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  display: block;
  background: var(--c-grey-100);
}

/* ── CTA centré ───────────────────────────────────────────── */
.projects-cta-wrap {
  display: flex;
  justify-content: center;
  padding: 32px 0 48px;
}

.projects-cta {
  display: inline-block;
  background: var(--c-black);
  color: var(--c-white);
  font-family: var(--f-sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 20px;
  transition: background 0.25s ease;
}

.projects-cta:hover {
  background: var(--c-orange);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .projects-section {
    padding: 40px 0 0;
  }
  .projects-inner {
    height: min(600px, 80vh);
  }
  .project-band__left {
    width: 45%;
    padding-left: 32px;
    padding-right: 24px;
  }
  .project-band__right {
    padding-right: 32px;
  }
  .project-photo {
    height: 120px;
  }
}

@media (max-width: 768px) {
  .projects-section {
    padding: 0;
  }
  .projects-inner {
    height: min(520px, 75vh);
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 4%,
      black 72%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 4%,
      black 72%,
      transparent 100%
    );
  }
  .project-band {
    flex-direction: column;
    gap: 16px;
    border-radius: 16px;
  }
  .project-band__left {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .project-band__right {
    justify-content: flex-start;
    overflow: hidden; /* pas de scroll — 4 photos max couvrent 100% de la largeur */
    padding-right: 20px;
    padding-left: 20px;
  }
  .project-photo {
    width: calc((100% - 18px) / 4);
    height: auto;
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
    border-radius: 8px;
  }
}