/* layout.css - Layout Utilities */
.container {
  width: 100%;
  max-width: var(--grid-max-width);
  margin: 0 auto;
  padding: 0 2rem;
}
@media (min-width: 1024px) { .container { padding: 0 3rem; } }

.section { padding: 6rem 0; }
@media (min-width: 768px) { .section { padding: 8rem 0; } }
@media (min-width: 1024px) { .section { padding: 10rem 0; } }

.grid { display: grid; gap: 2rem; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
  .grid { gap: 3rem; }
  .grid--md-2 { grid-template-columns: repeat(2, 1fr); }
  .grid--md-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid--lg-3 { grid-template-columns: repeat(3, 1fr); }
  .grid--lg-4 { grid-template-columns: repeat(4, 1fr); }
}

.flex { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .flex { flex-direction: row; gap: 2rem; } }
.flex--center { align-items: center; justify-content: center; }
.flex--between { justify-content: space-between; align-items: center; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-white { color: var(--color-white); }
.text-gold { color: var(--color-gold); }
.text-muted { color: var(--color-navy); opacity: 0.7; }

.bg-navy { background: var(--color-navy); }
.bg-gray { background: var(--color-off-white); }
.bg-white { background: var(--color-white); }

.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.w-full { width: 100%; }
.hidden { display: none; }

@media (max-width: 767px) { .hidden-mobile { display: none !important; } }