/* ============================================================
   MyCollection — responsive.css
   All @media breakpoints — consolidated in one place
   ============================================================ */

/* ── Navbar ── */
@media (max-width: 900px) {
  /* Hide desktop nav items, show hamburger */
  .nav-center { display: none; }
  .nav-lang   { display: none; }
  .nav-cta    { display: none; }
  .nav-burger { display: flex; }
}
@media (max-width: 768px) {
  .navbar { padding: 0 1.25rem; }
}

/* ── Hero — show posters as narrow side frames on mobile ── */
@media (max-width: 900px) {
  /* Only show the innermost poster column — the second column falls outside the
     narrow 120px container and would be invisible anyway, so hide it cleanly */
  .hero-posters-left  .poster-col:first-child,
  .hero-posters-right .poster-col:last-child { display: none; }

  /* The remaining column: fill the full container width */
  .hero-posters-left  .poster-col,
  .hero-posters-right .poster-col { width: 100%; }

  /* Left: align the visible column to the right edge (closest to center text) */
  .hero-posters-left  { justify-content: flex-end; }
  /* Right: align to left edge */
  .hero-posters-right { justify-content: flex-start; }

  .hero {
    grid-template-columns: 120px 1fr 120px;
    /* Fixed to viewport — prevents poster column height from pushing center off-screen */
    height: 100svh;
    height: 100vh; /* fallback for older browsers */
    min-height: 0;
  }
  /* Posters: narrow, semi-transparent, still visible */
  .hero-posters {
    opacity: .35;
    filter: saturate(1.3);
    /* Fill full grid cell height so poster scroll is clipped cleanly */
    height: 100%;
  }
  /* Keep poster col size but clip to narrow container */
  .hero-posters .hp { width: 120px; height: 180px; border-radius: 8px; }
  /* Overlay: stronger fade toward center so text is readable */
  .hero-posters-left::after {
    background: linear-gradient(to right, var(--bg) 0%, transparent 50%, rgba(8,8,16,.8) 100%);
  }
  .hero-posters-right::after {
    background: linear-gradient(to left, var(--bg) 0%, transparent 50%, rgba(8,8,16,.8) 100%);
  }
  .hero-center {
    max-width: 100%; min-width: 0;
    /* Symmetric padding so justify-content:center lands exactly in the middle.
       64px top = navbar height offset; same bottom to keep true visual centre. */
    padding: 64px 1.5rem 64px;
    align-items: center;
    text-align: center;
  }
  /* Tighten tagline vertical rhythm on tablet */
  .hero-taglines       { margin-bottom: 1.2rem; }
  .tl-desc             { margin: .2rem 0 .6rem; font-size: .8rem; }
  .tl-divider          { margin: .1rem 0 .4rem; }
  .tl-word             { font-size: clamp(1.9rem, 7.5vw, 3.2rem); }
  .hero-top-icon       { margin-bottom: .6rem; }
  .hero-cs-btn         { font-size: .82rem; padding: .8rem 1.6rem; }
}

@media (max-width: 600px) {
  .hero { grid-template-columns: 72px 1fr 72px; }
  .hero-posters .hp  { width: 72px; height: 108px; border-radius: 6px; }
  .hero-posters      { opacity: .25; }
  /* Further tighten on small phones */
  .hero-center       { padding: 64px 1.25rem 64px; }
  .tl-word           { font-size: clamp(1.7rem, 7vw, 2.6rem); }
  .tl-desc           { font-size: .75rem; margin: .15rem 0 .5rem; }
  .hero-top-icon svg { width: 24px; height: 24px; }
}

@media (max-width: 400px) {
  .hero { grid-template-columns: 50px 1fr 50px; }
  .hero-posters .hp  { width: 50px; height: 75px; }
  .hero-center       { padding: 64px 1rem 64px; }
  .tl-word           { font-size: clamp(1.5rem, 6.5vw, 2.2rem); }
}

/* ── Carousel ── */
@media (max-width: 480px) {
  .poster-card { width: 120px; height: 180px; }
}

/* ── App Showcase ── */
@media (max-width: 900px) {
  .app-showcase-row {
    grid-template-columns: 1fr; direction: ltr;
    gap: 2.5rem;
  }
  .app-showcase-phone { margin-top: 1rem; }
  .phone-img          { max-height: 460px; }
  .app-showcase-phone::before { width: 260px; height: 260px; }
  .app-showcase-phone::after  { width: 360px; height: 360px; }
}
@media (max-width: 550px) {
  .phone-img { max-height: 340px; }
}

/* ── Features bento ── */
@media (max-width: 900px) {
  .bento-grid  { grid-template-columns: repeat(2, 1fr); }
  /* Reset all explicit nth-child placements — let auto-flow handle it */
  .bento-card  { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 550px) {
  .bento-grid { grid-template-columns: 1fr; }
}

/* ── Coming soon floats ── */
@media (max-width: 600px) {
  .cs-float   { display: none; }
  .cs-ring--2 { width: 320px; height: 320px; }
  .cs-ring--1 { width: 220px; height: 220px; }
}

/* ── Spacing fixes ── */

/* Mobile: réduit l'espace entre hero et coming-soon */
@media (max-width: 768px) {
  .coming-soon { padding-top: clamp(2.5rem, 6vw, 4rem); }
}

/* Desktop: réduit l'espace entre app-showcase et features — géré directement dans app-showcase.css */

/* ── Footer ── */
@media (max-width: 900px) {
  .footer-top   { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 550px) {
  .footer-top   { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
}

/* ── Reduced motion (global) ── */
@media (prefers-reduced-motion: reduce) {
  .carousel-track, .poster-col, .phone-img { animation: none; }
  .phone-glow, .cs-ring, .cs-float, .hero-cs-btn::before { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration:  .01ms !important;
  }
}