/* Sexy Geek — estilos compartilhados entre páginas (reset, grids, utilitários).
   colors_and_type.css (tokens) é carregado antes deste arquivo em toda página. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
#root { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

.page-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.section-pad { padding: 56px 24px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.gallery-item { position: relative; overflow: hidden; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.skeleton {
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-elevated) 50%, var(--bg-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.spin { animation: spin 0.8s linear infinite; display: inline-flex; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .page-wrap { padding: 0 16px; }
  .section-pad { padding: 32px 16px; }
  .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(2, 1fr); }
}