/* ============================================================
   stories.css — Page /stories/ — The Upside
   Architecture native HTML5 <video> (méthode TikTok/Reels).
   Pas d'iframe = pas de problème cross-origin.
   ============================================================ */

/* ── Conteneur Stories : libère l'overflow ────────────────────── */
/* Le thème Source met overflow:hidden sur .gh-feed et .gh-container-inner,
   ce qui peut clipper la dernière carte à cause de notre aspect-ratio 9:16
   plus haut que le 16:9 par défaut. On libère sur la page Stories. */
body.page-template .gh-feed,
body.page-template .gh-container-inner,
.gh-container.is-grid:has(.gh-card[data-cf-raw]),
.gh-container.is-grid:has(.gh-card[data-cf-raw]) .gh-feed,
.gh-container.is-grid:has(.gh-card[data-cf-raw]) .gh-container-inner,
.gh-container.is-grid:has(.gh-card[data-cf-raw]) .gh-main {
  overflow: visible !important;
}

/* ── Force layout vertical pour TOUTES les cartes Stories ────── */
/* Le thème Source applique parfois un layout horizontal (image à
   gauche, texte à droite) selon la position de la carte dans la grille. */
.gh-feed .gh-card[data-cf-raw] {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-items: stretch !important;
  overflow: visible !important;
}

.gh-feed .gh-card[data-cf-raw] > .gh-card-link {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: auto !important;
  align-items: stretch !important;
  gap: 16px !important;
}

.gh-feed .gh-card[data-cf-raw] .gh-card-image {
  width: 100% !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  max-width: 100% !important;
}

.gh-feed .gh-card[data-cf-raw] .gh-card-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Garantit que le titre et l'excerpt sont toujours visibles, peu importe
   les règles de Source theme (display:none sur certains breakpoints) */
.gh-feed .gh-card[data-cf-raw] .gh-card-title,
.gh-feed .gh-card[data-cf-raw] .gh-card-excerpt,
.gh-feed .gh-card[data-cf-raw] .gh-card-tag,
.gh-feed .gh-card[data-cf-raw] .gh-card-meta {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.gh-feed .gh-card[data-cf-raw] .gh-card-excerpt {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Format 9:16 portrait pour les vignettes Stories ────────── */
.gh-card[data-cf-raw] .gh-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 16 !important;
  height: auto !important;
}

.gh-card[data-cf-raw] .gh-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Voile sombre + icône ▶ avant lecture ───────────────────── */
.gh-card[data-cf-raw] .gh-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  pointer-events: none;
  transition: background 0.2s ease;
  z-index: 3;
}

.gh-card[data-cf-raw]:hover .gh-card-image::after {
  background: rgba(0, 0, 0, 0);
}

.gh-card[data-cf-raw] .gh-card-image::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/24px no-repeat;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

.gh-card[data-cf-raw]:hover .gh-card-image::before {
  transform: translate(-50%, -50%) scale(1.1);
}

/* En lecture : on cache l'image, le voile et l'icône ▶ */
.gh-card[data-cf-raw].story-playing .gh-card-image img,
.gh-card[data-cf-raw].story-playing .gh-card-image::before,
.gh-card[data-cf-raw].story-playing .gh-card-image::after {
  opacity: 0;
}

/* ── Vidéo native HTML5 ──────────────────────────────────────── */
.story-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  opacity: 0;
  pointer-events: none; /* clic traverse vers le lien <a> */
  transition: opacity 0.2s ease;
  z-index: 2;
}

.gh-card[data-cf-raw].story-playing .story-video {
  opacity: 1;
}

/* ── Bouton son ──────────────────────────────────────────────── */
/* Sibling de <video>, dans <figure>, hors de tout overlay      */
.story-sound-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 20;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Caché jusqu'au démarrage de la lecture */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.15s ease, transform 0.15s ease;
}

.gh-card[data-cf-raw].story-playing .story-sound-btn {
  opacity: 1;
  pointer-events: auto;
}

.story-sound-btn:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.1);
}

.story-sound-btn svg {
  display: block;
  flex-shrink: 0;
}

.story-sound-btn [hidden] {
  display: none !important;
}

/* ── Loader infinite scroll ──────────────────────────────────── */
.stories-loader-wrap {
  display: none;
  justify-content: center;
  padding: 2.5rem 0;
}

.stories-loader-wrap.is-visible {
  display: flex;
}

.stories-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e5e7eb;
  border-top-color: #111;
  border-radius: 50%;
  animation: stories-spin 0.75s linear infinite;
}

@keyframes stories-spin {
  to { transform: rotate(360deg); }
}

.stories-end-msg {
  text-align: center;
  color: #9ca3af;
  padding: 1.5rem 0;
  margin: 0;
  font-size: 0.88rem;
}

/* ── Marge bas avant le footer ──────────────────────────────── */
/* Desktop : 8rem suffit. Mobile : besoin de plus d'espace car
   la dernière carte (9:16) est très haute et le footer arrive collé. */
.gh-container.is-grid {
  padding-bottom: 8rem;
}

@media (max-width: 768px) {
  .gh-container.is-grid {
    padding-bottom: 24rem;
  }
}

@media (max-width: 480px) {
  .gh-container.is-grid {
    padding-bottom: 28rem;
  }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .story-video,
  .story-sound-btn,
  .gh-card[data-cf-raw] .gh-card-image::before,
  .gh-card[data-cf-raw] .gh-card-image::after {
    transition: none;
  }
  .stories-spinner {
    animation: none;
    opacity: 0.5;
  }
}