/* ── Responsive breakpoints ────────────────────────────────────────────── */

@media (max-width: 768px) {
  .brand-name {
    font-size: 0.95rem;
  }
  .card-header {
    padding: 10px 12px;
  }
  .photo-grid {
    gap: 4px;
  }
}

@media (max-width: 374px) {
  .brand-name {
    font-size: 0.85rem;
    letter-spacing: 0;
  }
  .app-header {
    padding: 6px 8px;
  }
  .tab-btn {
    font-size: 0.72rem;
  }
  .you-month {
    padding: 8px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The universal selector above does not reach the view-transition
     pseudo-elements, which live outside the document tree. Belt and braces:
     `with_view_transition` already skips the API entirely under this
     preference, so this only matters if that check is ever bypassed. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
  }
}