/* =====================================================
   RAMA MEDIA GALLERY & INTERACTIVE ADDITIONS
   ===================================================== */

/* ---- Photo Gallery ---- */
.rama-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 24px 0;
}

.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
  background: #1a1a1a;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
  display: block;
}

.gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(0.85);
}

.gallery-item .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.gallery-item .overlay span {
  color: white;
  font-size: 13px;
  font-weight: 600;
}

/* ---- Lightbox ---- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  color: white;
  font-size: 36px;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  transition: background 0.2s;
}

.lightbox-close:hover { background: rgba(255,255,255,0.25); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-size: 32px;
  cursor: pointer;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  transition: background 0.2s;
}

.lightbox-nav:hover { background: rgba(212,175,55,0.5); }
.lightbox-nav.prev { left: 24px; }
.lightbox-nav.next { right: 24px; }

.lightbox-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  background: rgba(0,0,0,0.5);
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ---- Video Section ---- */
.video-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  background: #000;
}

.video-wrapper video,
.video-wrapper iframe {
  width: 100%;
  display: block;
  border-radius: 16px;
}

.video-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  cursor: pointer;
  transition: background 0.3s;
}

.video-play-overlay:hover { background: rgba(0,0,0,0.2); }

.play-btn-circle {
  width: 80px;
  height: 80px;
  background: rgba(212,175,55,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
  box-shadow: 0 8px 32px rgba(212,175,55,0.4);
}

.play-btn-circle:hover {
  transform: scale(1.1);
  background: #D4A62C;
}

/* ---- Gallery Filters ---- */
.gallery-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.filter-btn {
  padding: 8px 20px;
  border-radius: 999px;
  border: 2px solid rgba(212,175,55,0.3);
  background: transparent;
  color: #6B7280;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
}

.filter-btn.active,
.filter-btn:hover {
  background: #D4A62C;
  color: #1A1A1A;
  border-color: #D4A62C;
}

/* ---- Blog Enhancements ---- */
.blog-featured-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 400px;
  margin-bottom: 48px;
}

.blog-featured-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-featured-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px;
}

/* ---- Photo Strip (Masonry-like) ---- */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 8px;
  border-radius: 16px;
  overflow: hidden;
}

.photo-strip .main-photo {
  grid-column: 1 / 4;
  grid-row: 1 / 3;
}

.photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.photo-strip .grid-cell {
  overflow: hidden;
  background: #111;
  cursor: pointer;
}

.photo-strip .grid-cell:hover img {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .photo-strip {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .photo-strip .main-photo {
    grid-column: 1 / 3;
    grid-row: 1;
    height: 220px;
  }
  .photo-strip .grid-cell { height: 150px; }

  .rama-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ---- Stats banner ---- */
.stats-banner {
  background: linear-gradient(135deg, #0B0D0F 0%, #1a1a1a 100%);
  padding: 48px 0;
}

/* ---- Blog post photo gallery ---- */
.post-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 32px 0;
}

.post-gallery img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.post-gallery img:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

@media (max-width: 640px) {
  .post-gallery { grid-template-columns: 1fr 1fr; }
}

/* ---- Holiday Camp Section ---- */
.camp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.camp-card {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/3;
}

.camp-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.camp-card:hover img { transform: scale(1.05); }

/* Dark mode additions */
[data-theme="dark"] .filter-btn {
  color: #B0B0B0;
  border-color: rgba(212,175,55,0.2);
}



/* ============================================================
   RAMA RESPONSIVE FIXES — mobile-first improvements
   ============================================================ */

/* Ensure video plays in dark mode (no filter override) */
video { display: block; }
[data-theme="dark"] video { filter: none !important; opacity: 1 !important; }

/* ---- Nav ---- */
#main-nav { min-height: 64px; }
#mobile-menu { max-height: calc(100vh - 70px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---- Hero section full-screen on mobile ---- */
@media (max-width: 767px) {
  section.min-h-screen { min-height: 100svh; }
  .blog-hero-section { padding: 56px 0 40px; }
}

/* ---- Typography fluid ---- */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.75rem, 8vw, 3rem) !important; line-height: 1.15 !important; }
  h2 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  h3 { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; }
  .text-5xl { font-size: clamp(2rem, 9vw, 3rem) !important; }
  .text-4xl { font-size: clamp(1.6rem, 7vw, 2.25rem) !important; }
  .text-3xl { font-size: clamp(1.3rem, 6vw, 1.875rem) !important; }
  .text-7xl { font-size: clamp(2.2rem, 10vw, 4.5rem) !important; }
}

/* ---- Gallery grid responsive ---- */
@media (max-width: 640px) {
  .rama-gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .post-gallery { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .photo-strip { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; }
  .photo-strip .main-photo { grid-column: 1 / 3 !important; grid-row: 1 !important; height: 200px !important; }
  .photo-strip .grid-cell { height: 130px !important; }
}

/* ---- Camp grid mobile ---- */
@media (max-width: 640px) {
  .camp-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

/* ---- Video section stack on mobile ---- */
@media (max-width: 767px) {
  .video-wrapper { border-radius: 10px; }
  .video-wrapper video { border-radius: 10px; }
}

/* ---- Form fields ---- */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
  .grid.md\:grid-cols-2 { grid-template-columns: 1fr !important; }
}

/* ---- Blog cards on mobile ---- */
@media (max-width: 640px) {
  .blog-card-image { height: 180px; }
  .blog-card-body { padding: 16px; }
  .blog-card-title { font-size: 15px; }
}

/* ---- Buttons — prevent overflow ---- */
.btn-enhanced, a[class*="rounded-full"], button[class*="rounded-full"] {
  white-space: nowrap;
}
@media (max-width: 400px) {
  .flex-col.sm\:flex-row { flex-direction: column !important; }
  a[class*="px-8"] { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* ---- Achievements bar ---- */
@media (max-width: 480px) {
  .grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* ---- Footer responsive ---- */
@media (max-width: 640px) {
  footer .flex.flex-wrap.gap-4 { gap: 0.5rem; }
  footer .text-sm { font-size: 0.75rem; }
}

/* ---- Dark mode: video always visible ---- */
[data-theme="dark"] section video,
[data-theme="dark"] .video-wrapper video {
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
}

/* ---- Dark mode header ---- */
[data-theme="dark"] header,
[data-theme="dark"] #mobile-menu {
  background-color: rgba(26, 26, 26, 0.97) !important;
}
[data-theme="dark"] #mobile-menu a:not(.bg-brand-primary) {
  color: #d1d5db !important;
}
[data-theme="dark"] #mobile-menu a:not(.bg-brand-primary):hover {
  color: #D4A62C !important;
  background-color: rgba(212,166,44,0.08) !important;
}
[data-theme="dark"] .bg-gray-100 { background-color: #374151 !important; }
[data-theme="dark"] .text-gray-600 { color: #9ca3af !important; }

/* ---- Dark mode blog cards ---- */
[data-theme="dark"] .blog-card { background: #1f2937 !important; }
[data-theme="dark"] .blog-card-title { color: #f9fafb !important; }
[data-theme="dark"] .blog-card-excerpt { color: #9ca3af !important; }
[data-theme="dark"] .blog-card-meta { color: #6b7280 !important; }
[data-theme="dark"] .blog-card-category { background: rgba(212,175,55,0.15) !important; }

/* RTL nav spacing fix */
[dir="rtl"] .lg\:flex.flex-row-reverse { direction: rtl; }
[dir="rtl"] nav .space-x-5 > * + * { margin-right: 1.25rem; margin-left: 0; }


/* ── CRITICAL: dark mode MUST NOT change hero video section background ── */
[data-no-dark-override="1"],
[data-theme="dark"] [data-no-dark-override="1"] {
    background: #000000 !important;
}
[data-theme="dark"] [data-no-dark-override="1"] section,
[data-theme="dark"] section[data-no-dark-override="1"] {
    background: #000000 !important;
}

/* Video element — always full opacity, no filter in any mode */
video,
[data-theme="dark"] video,
[data-theme="dark"] section video,
[data-theme="dark"] .video-wrapper video {
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
    display: block !important;
    background: #000;
}

/* Hero section specifically */
section.relative.min-h-screen {
    background: #000 !important;
}
[data-theme="dark"] section.relative.min-h-screen {
    background: #000 !important;
}

/* Counter section — achievements bar must stay dark in both modes */
#achievements-section,
[data-theme="dark"] #achievements-section {
    background-color: #0B0D0F !important;
}
[data-theme="dark"] #achievements-section .text-white\/70 {
    color: rgba(255,255,255,0.7) !important;
}
[data-theme="dark"] #achievements-section .bg-white\/10 {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Blog post content area — readable in dark mode */
[data-theme="dark"] .blog-post-wrapper {
    background: transparent !important;
}
[data-theme="dark"] .blog-post-wrapper h1,
[data-theme="dark"] .blog-post-wrapper h2,
[data-theme="dark"] .blog-post-wrapper h3 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .blog-post-wrapper p,
[data-theme="dark"] .blog-post-wrapper li {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .blog-post-wrapper strong {
    color: #f1f5f9 !important;
}
[data-theme="dark"] .blog-cta-box {
    background: #1e293b !important;
    border-color: rgba(212,175,55,0.3) !important;
}
[data-theme="dark"] .stat-block {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

/* ── Nav mobile fixes ───────────────────────────────────────────────
   Force le bouton dark-toggle à rester invisible sur mobile.
   Empêche tout conflit entre Tailwind CDN et les scripts JS. */
@media (max-width: 1023px) {
    #dark-toggle {
        display: none !important;
    }
    #mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Assure que le menu mobile démarre toujours fermé (sécurité CSS) */
#mobile-menu.hidden {
    display: none !important;
}