/* ============================================================
   LAYOUT.CSS — Container · Grid · Section Wrappers
   WE CAN Institute of English
   ============================================================ */

.container        { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 2rem; }
.container--wide  { max-width: 1400px; margin-inline: auto; padding-inline: 2rem; }
.container--narrow{ max-width: 800px; margin-inline: auto; padding-inline: 2rem; }

.section    { padding-block: var(--sp-3xl); }
.section--lg{ padding-block: calc(var(--sp-3xl) * 1.25); }
.section--sm{ padding-block: var(--sp-2xl); }

.section-header              { text-align: center; margin-bottom: var(--sp-2xl); }
.section-header__badge       { margin-bottom: var(--sp-sm); }
.section-header__title       { margin-bottom: var(--sp-sm); }
.section-header__subtitle    { max-width: 560px; margin-inline: auto; }

.grid     { display: grid; gap: var(--sp-lg); }
.grid--2  { grid-template-columns: repeat(2, 1fr); }
.grid--3  { grid-template-columns: repeat(3, 1fr); }
.grid--4  { grid-template-columns: repeat(4, 1fr); }
.grid--auto{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-center  { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.gap-sm       { gap: var(--sp-sm); }
.gap-md       { gap: var(--sp-md); }
.gap-lg       { gap: var(--sp-lg); }

.bg-dark  { background: var(--navy); }
.bg-mid   { background: var(--navy-mid); }
.bg-soft  { background: var(--navy-soft); }
.bg-white { background: var(--white); }
.bg-light { background: #f9fafb; }

.divider  { height: 1px; background: var(--border); width: 100%; }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
  .container       { padding-inline: 1.5rem; }
  .container--wide { padding-inline: 1.5rem; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: var(--sp-2xl); }
}

@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .container { padding-inline: 1.25rem; }
  .section-header { margin-bottom: var(--sp-xl); }
}

@media (max-width: 480px) {
  .container { padding-inline: 1rem; }
  .section   { padding-block: var(--sp-xl); }
}