/* ============================================================
   CASE STUDY LAYOUT SPECIFICS - CASTAGNE
   ============================================================ */

/* Note: Overlay styles moved to mobile-navigation.css */

/* Acknowledgments Section */
#acknowledgments-section { 
  word-break: break-word; 
  overflow-wrap: anywhere; 
  border-top: 1px solid var(--color-gray-light); 
}

#acknowledgments-section .acknowledgment-row { 
  align-items: flex-start; 
}

#acknowledgments-section .acknowledgment-label { 
  min-width: 84px; 
}

#acknowledgments-section .acknowledgment-value { 
  word-break: break-word; 
  overflow-wrap: anywhere; 
}

#acknowledgments-section .tags-container .tag { 
  white-space: nowrap; 
  overflow-wrap: normal; 
  word-break: normal; 
}

@media (max-width: 640px) {
  #acknowledgments-section .flex, 
  #acknowledgments-section .grid { 
    gap: .5rem !important; 
  }
  
  #acknowledgments-section dt, 
  #acknowledgments-section dd { 
    margin: 0; 
  }
}

/* ============================================================
   SYNC SCROLL & LAYOUT RESPONSIVE
   ============================================================ */

/* Sync scroll Space10-like */
#sync-outer { position: relative; }
#sync-outer .sync-sticky { position: relative; height: 100vh; overflow: hidden; background: var(--color-white); }
#sync-outer .sync-inner { will-change: transform; }

@media (max-width: 1023px) {
  #sync-outer .sync-sticky { position: static; height: auto; overflow: visible; }
  #left-inner, #right-inner { transform: none !important; }
}

/* Évite un espace résiduel sous le wrapper synchronisé */
.case-study-container { padding-bottom: 0 !important; }
.narrative-gallery .gallery-block:last-child { margin-bottom: 0 !important; }
.case-content .content-section:last-child { margin-bottom: 0 !important; }

/* Navigation latérale sticky top */
#side-navigation { position: sticky; top: 0; z-index: var(--z-sidebar-sticky); height: fit-content; align-self: flex-start; }
@media (max-width: 1023px) {
  #side-navigation { display: none !important; }
}

/* Marges cosmétiques */
.case-study-container { margin-top: 25px !important; padding-top: 25px !important; margin-bottom: 50px !important; }

/* === RESPONSIVE MOBILE === */
@media (max-width: 1023px) {
  /* Désactiver le scroll sync sur mobile */
  #sync-outer { height: auto !important; }
  #sync-outer .sync-sticky { position: static !important; height: auto !important; }
  
  /* Mobile: structure verticale simple */
  .case-study-container {
    margin-top: 15px !important;
    padding-top: 15px !important;
    gap: 0px !important;
  }
  
  /* Galerie: pleine largeur sur mobile */
  .narrative-gallery {
    max-width: 100% !important;
  }
  
  /* Header mobile: espacement optimisé */
  #mobile-header {
    padding-bottom: 0 !important;
  }
  
  /* === INTERACTIONS GALERIE SUR MOBILE (réactivées) === */
  #gallery-container img,
  #gallery-container video {
    cursor: pointer !important;
    pointer-events: auto !important;
  }
  
  /* Désactiver les hover descriptions */
  .gallery-block .absolute.bottom-0 {
    display: none !important;
  }
  
  /* Désactiver le hover scale */
  .gallery-block img:hover {
    transform: none !important;
  }
  
  .gallery-block .group:hover img,
  .gallery-block .group:hover video {
    transform: none !important;
  }
  
  /* Acknowledgments: adapter sur mobile */
  #acknowledgments-section {
    margin-top: 32px !important;
    padding-top: 24px !important;
  }
  
  /* Supprimer le padding-bottom sur les acknowledgments-details en mobile */
  .acknowledgments-details {
    padding-bottom: 0 !important;
  }
  
  /* Typographie mobile */
  #mobile-header h1 {
    line-height: 1.2;
  }
  
  #mobile-header p {
    line-height: 1.5;
  }
  
  /* Lightbox fullscreen: adapter sur mobile */
  #lightbox-overlay {
    padding: 20px !important;
  }
  
  #lightbox-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  #lightbox-close {
    top: 10px !important;
    right: 10px !important;
    width: 36px !important;
    height: 36px !important;
  }
}

/* Mobile portrait (< 640px) */
@media (max-width: 639px) {
  .case-study-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  #mobile-header h1 {
    font-size: 1.875rem !important; /* 30px */
  }
  
  #mobile-header p {
    font-size: 0.875rem !important; /* 14px */
  }
  
  /* Tags plus petits sur très petit écran */
  #contributions-tags-mobile span {
    font-size: 0.75rem !important; /* 12px */
    padding: 0.375rem 0.625rem !important;
  }
}