/**
 * Styles pour le widget Dramagraphie Single Slider
 *
 * @package WPC_Dramagraphie
 * @since   1.0.0
 */

/* ============================================
   Variables CSS
   ============================================ */
:root {
  --wpc-slider-gap: 20px;
  --wpc-slider-nav-size: 50px;
  --wpc-slider-transition: 0.4s ease;
  --wpc-lightbox-bg: #5d5c5c;
  --wpc-lightbox-z: 999999;
  --wpc-lightbox-nav-reserved: 100px; /* Espace réservé pour la navigation en bas */
}

/* ============================================
   Conteneur principal du slider
   ============================================ */
.wpc-single-slider {
  position: relative;
  width: 100%;
}

/* ============================================
   Flèche retour vers la période (mobile uniquement)
   ============================================ */
.wpc-single-slider__back {
  display: none;
  color: #9d9d9c;
  text-decoration: none;
  font-size: 21px;
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
}

.wpc-single-slider__back:hover {
  color: #ffffff;
  opacity: 0.8;
}

/* ============================================
   Zone de l'image (stage)
   ============================================ */
.wpc-single-slider__stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--wpc-slider-gap);
}

/* ============================================
   Image du slider
   CRITIQUE : object-fit: contain pour respecter les proportions
   ============================================ */
.wpc-single-slider__image {
  max-height: 70vh;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain; /* JAMAIS cover - pas de recadrage */
  cursor: zoom-in;
  display: block;
  transition: opacity var(--wpc-slider-transition);
}

/* Animation slide horizontal */
.wpc-single-slider__image.is-sliding-left {
  animation: slideOutLeft var(--wpc-slider-transition) forwards;
}

.wpc-single-slider__image.is-sliding-right {
  animation: slideOutRight var(--wpc-slider-transition) forwards;
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

/* ============================================
   Conteneur navigation et métadonnées
   ============================================ */
.wpc-single-slider__nav-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wpc-slider-gap);
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding-bottom: 28px; /* Espace pour l'année positionnée hors flux */
}

/* ============================================
   Boutons de navigation
   ============================================ */
.wpc-single-slider__nav {
  width: auto;
  height: auto;
  border: none;
  background-color: transparent !important;
  color: #9d9d9c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
  flex-shrink: 0;
  padding: 0;
}

.wpc-single-slider__nav:hover {
  color: #ffffff;
  opacity: 0.8;
}

.wpc-single-slider__nav:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.wpc-single-slider__nav svg {
  width: 35px;
  height: 35px;
  stroke: currentColor !important;
  stroke-width: 2;
}

/* Masquer les flèches si une seule œuvre */
.wpc-single-slider:has(.wpc-single-slider__counter-total:only-child)
  .wpc-single-slider__nav,
.wpc-single-slider[data-slides-count="1"] .wpc-single-slider__nav {
  display: none;
}

/* ============================================
   Métadonnées (titre + année)
   ============================================ */
.wpc-single-slider__meta {
  position: relative;
  text-align: center;
  flex: 1;
  min-width: 0; /* Permet au texte de se rétrécir si nécessaire */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wpc-single-slider__title {
  margin: 0 0 2px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-family: "Montserrat", Sans-serif;
}

.wpc-single-slider__year {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #9d9d9c;
  margin-top: 2px;
  letter-spacing: 3.2px;
  font-family: "Montserrat", Sans-serif;
  line-height: 1.3;
}

/* ============================================
   Compteur (position)
   ============================================ */
.wpc-single-slider__counter {
  position: absolute;
  bottom: var(--wpc-slider-gap);
  right: var(--wpc-slider-gap);
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 10;
}

.wpc-single-slider__counter-current {
  font-weight: 700;
}

/* ============================================
   Lightbox Overlay
   ============================================ */
.wpc-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--wpc-lightbox-z);
  background-color: var(--wpc-lightbox-bg);
  display: none; /* Cachée par défaut - sera affichée via JS */
  align-items: center;
  justify-content: center;
  opacity: 0;
  cursor: zoom-out;
}

/* Afficher la lightbox quand elle est ouverte */
.wpc-lightbox[style*="display: flex"],
.wpc-lightbox[style*="display:flex"] {
  display: flex !important;
  flex-direction: column;
  animation: fadeIn 0.3s ease forwards;
}

.wpc-lightbox.is-closing {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Zone de l'image dans la lightbox */
.wpc-lightbox__stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: var(--wpc-slider-gap);
  max-height: calc(
    95vh - var(--wpc-lightbox-nav-reserved)
  ); /* Synchronisé avec .wpc-lightbox__image */
  pointer-events: none; /* Permet de cliquer à travers pour atteindre le fond */
}

.wpc-lightbox__stage .wpc-lightbox__image {
  pointer-events: auto; /* Réactive les clics sur l'image */
}

/* Image dans la lightbox
   CRITIQUE : object-fit: contain pour respecter les proportions
   CRITIQUE : max-height DOIT être synchronisé avec .wpc-lightbox__stage pour éviter le rognage
   ============================================ */
.wpc-lightbox__image {
  max-height: calc(95vh - var(--wpc-lightbox-nav-reserved));
  max-width: 95vw;
  width: auto;
  height: auto;
  object-fit: contain; /* JAMAIS cover - respect proportions */
  display: block;
  cursor: zoom-out;
}

/* Bouton fermer la lightbox - SUPPRIMÉ */
.wpc-lightbox__close {
  display: none !important;
}

/* Conteneur navigation et métadonnées dans la lightbox */
.wpc-lightbox__nav-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wpc-slider-gap);
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding-bottom: 28px; /* Espace pour l'année positionnée hors flux */
  pointer-events: auto; /* Permet les clics sur les boutons */
}

/* Navigation dans la lightbox - même style que la page principale */
.wpc-lightbox__nav {
  width: auto;
  height: auto;
  border: none;
  background-color: transparent !important;
  color: #9d9d9c;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
  flex-shrink: 0;
  padding: 0;
}

.wpc-lightbox__nav:hover {
  color: #ffffff;
  opacity: 0.8;
}

.wpc-lightbox__nav:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.wpc-lightbox__nav svg {
  width: 35px;
  height: 35px;
  stroke: currentColor !important;
  stroke-width: 2;
}

/* Métadonnées dans la lightbox - même style que la page principale */
.wpc-lightbox__meta {
  position: relative;
  text-align: center;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wpc-lightbox__title {
  margin: 0 0 2px 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-family: "Montserrat", Sans-serif;
}

.wpc-lightbox__year {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: block;
  font-size: 18px;
  font-weight: 600;
  color: #9d9d9c;
  margin-top: 2px;
  letter-spacing: 3.2px;
  font-family: "Montserrat", Sans-serif;
  line-height: 1.3;
}

/* ============================================
   Bloquer le scroll du body quand lightbox ouverte
   ============================================ */
body.wpc-lightbox-open {
  overflow: hidden;
}

/* ============================================
   Responsive - Mobile (< 768px)
   ============================================ */
@media (max-width: 767px) {
  :root {
    --wpc-slider-nav-size: 40px;
    --wpc-slider-gap: 15px;
  }

  .wpc-single-slider__back {
    display: block;
    margin-bottom: 15px;
    margin-left: 20px;
  }

  .wpc-single-slider__image {
    max-height: 80vh;
    cursor: default;
  }

  /* Désactive la transition pour un suivi fluide du doigt pendant le swipe */
  .wpc-single-slider__image.is-swiping {
    transition: none !important;
  }

  .wpc-single-slider__nav svg {
    width: 35px;
    height: 35px;
  }

  .wpc-single-slider__title {
    font-size: 15px;
  }

  .wpc-single-slider__year {
    font-size: 0.875rem;
  }

  .wpc-single-slider__counter {
    bottom: 10px;
    right: 10px;
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  .wpc-lightbox__nav svg {
    width: 35px;
    height: 35px;
  }

  .wpc-lightbox__stage {
    max-height: calc(95vh - 120px);
  }
}

/* ============================================
   Responsive - Tablette (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .wpc-single-slider__image {
    max-height: 65vh;
  }

  .wpc-single-slider__nav svg {
    width: 22px;
    height: 22px;
  }
}

/* ============================================
   Accessibilité - Focus visible
   ============================================ */
.wpc-single-slider__nav:focus-visible,
.wpc-lightbox__nav:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ============================================
   États de chargement
   ============================================ */
.wpc-single-slider__image[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wpc-single-slider__image[loading="lazy"].loaded {
  opacity: 1;
}