/* css/layout.css — Container, Grid, Responsive Breakpoints */

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 20px; }

/* Section base */
section { padding: var(--space-section) 0; }

/* Section title + subtitle */
.sec-title {
  font-size: var(--text-xl); font-weight: 800; text-align: center; margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sec-sub {
  text-align: center; color: var(--color-text-muted); font-size: var(--text-base);
  max-width: 560px; margin: 0 auto var(--space-xl);
}

/* Responsive Grid Helpers */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

/* Tablet */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

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