/* =================================================================
   GIO PHYSIQUE — Responsive Layers
   Mobile-first refinements. Loaded after style.css so these win.
   ================================================================= */

/* ---- Large desktop down to laptop (≤ 1100px) -------------------- */
@media (max-width: 1100px) {
  .hero__title { font-size: clamp(3rem, 8.5vw, 6.5rem); }

  .transform-grid,
  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  .masonry__item { flex-basis: calc(33.333% - 0.667rem); }
}

/* ---- Collapse nav → hamburger early (8 links + CTA get tight) --- */
@media (max-width: 1200px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}

/* ---- Tablet (≤ 900px) ------------------------------------------- */
@media (max-width: 900px) {
  :root { --section-y: clamp(64px, 10vw, 110px); }

  /* Hero: media becomes full-bleed backdrop behind the text */
  .hero {
    padding-top: 110px;
    padding-bottom: 48px;
    align-items: center;
  }
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: left;
  }
  .hero__media {
    width: 100%;
    background-position: 72% center;
    opacity: 0.85;
  }
  /* Stronger scrim so the headline reads over the image on narrow screens */
  .hero__media-scrim {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 40%, #000 92%),
      linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,0,0,0.1) 70%);
  }
  .hero__title { font-size: clamp(3.2rem, 13vw, 6rem); }
  .hero__sub { max-width: 100%; }
  .hero__scroll { display: none; }

  /* Stats: 2 x 2 */
  .trust__grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .stat:nth-child(2)::after { display: none; }
  .stat { padding: 1.6rem 0.5rem; }

  /* Stack two-column sections */
  .about__grid,
  .faq__grid,
  .app__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 480px; }
  .faq__intro { position: static; }
  .app__visual { order: -1; }

  /* Timeline goes vertical */
  .timeline { grid-template-columns: 1fr; gap: 2.4rem; max-width: 420px; margin-inline: auto; }
  .timeline::before,
  .timeline::after { display: none; }
  .timeline__step {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: 1.2rem;
    text-align: left;
    align-items: center;
  }
  .timeline__num { margin-bottom: 0; }
  .timeline__step > :not(.timeline__num) { grid-column: 2; }
  .timeline__title { margin-top: 0; }
  .timeline__text { margin-inline: 0; }

  /* Pricing stacks; featured no longer scaled */
  .pricing__grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .plan--featured { transform: none; }
  .plan--featured:hover { transform: translateY(-8px); }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

/* ---- Small tablet / large phone (≤ 640px) ----------------------- */
@media (max-width: 640px) {
  :root { --gutter: 20px; }

  .transform-grid,
  .feature-grid { grid-template-columns: 1fr; }

  /* Masonry → 2 columns, reset spans for even flow */
  .masonry__item { flex-basis: calc(50% - 0.5rem); }
  .masonry__item--wide { grid-column: span 2; }
  .masonry__item--tall { grid-row: span 2; }

  .section__title { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  /* Hide the hero sub-paragraph on phones — it crowds the screen */
  .hero__sub { display: none; }
  /* Compact hero buttons on phones — hug their text instead of filling the width */
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
  .hero__actions .btn {
    width: auto;
    --btn-py: 0.7rem;
    --btn-px: 1.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .hero__social { flex-wrap: wrap; gap: 0.8rem; }

  .about__signature { font-size: 2.4rem; }
  .cta__title { font-size: clamp(2.6rem, 13vw, 4rem); }

  .carousel__controls { gap: 1rem; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bar-inner { flex-direction: column; gap: 0.5rem; text-align: center; }
  .store-badges { justify-content: flex-start; }
}

/* ---- Small phone (≤ 400px) -------------------------------------- */
@media (max-width: 400px) {
  .brand__name { display: none; }
  .stat__num { font-size: 2.6rem; }
  .testimonial { padding: 1.4rem 0.5rem; }
  .phone { width: 260px; }
}

/* ---- Reduce motion: kill perpetual float/pulse ------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero__img,
  .phone,
  .hero__smoke--1,
  .hero__smoke--2,
  .video__play-ring,
  .loader__gp,
  .hero__scroll-line::after { animation: none !important; }
}

/* ---- Landscape phones: shrink hero so content fits -------------- */
@media (max-height: 560px) and (orientation: landscape) and (max-width: 900px) {
  .hero { min-height: auto; padding-block: 120px 60px; }
  .hero__figure { max-height: 80vh; }
}