/* ============================================================
   Site-16: Responsive Breakpoints (Mobile-First)
   ============================================================ */

/* --- sm: 480px --- */
@media (min-width: 480px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .metrics {
    grid-template-columns: repeat(4, 1fr);
  }
  .download-platforms {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- md: 768px --- */
@media (min-width: 768px) {
  /* Masthead: inline nav */
  .mastnav-toggle { display: none; }
  .mastnav {
    display: flex;
    position: static;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    gap: var(--space-lg);
  }
  .mastnav a {
    padding: 0;
    font-size: var(--body-sm);
    border-bottom: none;
  }

  /* Language select */
  .mastactions {
    display: flex;
    align-items: center;
  }
  .lang-select {
    margin-top: 0;
    margin-left: var(--space-md);
  }

  /* Hero: side-by-side */
  .hero {
    text-align: left;
    padding: var(--space-4xl) 0;
  }
  .hero .shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
  }
  .hero__sub { margin-left: 0; }
  .rating { justify-content: flex-start; }
  .hero__ctas { justify-content: flex-start; }
  .phone-showcase { justify-content: flex-end; }

  /* Split layout */
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split__text { order: 1; }
  .split__visual { order: 2; }

  /* Footer grid */
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Features showcase */
  .features-showcase__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .features-showcase__item:nth-child(even) .features-showcase__visual {
    order: 2;
  }
  .features-showcase__item:nth-child(even) .features-showcase__text {
    order: 1;
  }

  /* QR visible on desktop hero */
  .hero__qr {
    display: block;
  }
}

/* --- lg: 1024px --- */
@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Phone frame bigger on desktop */
  .phone-frame {
    width: 300px;
    height: 612px;
  }
}

/* --- xl: 1120px (max container) --- */
@media (min-width: 1120px) {
  .shell {
    padding: 0 var(--space-xl);
  }
}

/* --- Print --- */
@media print {
  .masthead { position: static; background: #fff; }
  .mastnav-toggle { display: none; }
  .mastnav { display: flex; position: static; background: none; border: none; box-shadow: none; padding: 0; }
  .phone-frame { animation: none; box-shadow: none; border: 2px solid #ccc; }
  .btn-primary, .btn-platform, .btn-secondary { box-shadow: none; }
  .anim-fade { opacity: 1; transform: none; }
  .anim-stagger > * { opacity: 1; transform: none; }
}