/* Orbit Education — layout layer. Structure only: shells, grids, section rhythm. */

.l-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.l-shell--narrow { max-width: var(--shell-narrow); }

.l-section { padding-block: var(--section-y); }
.l-section--tight { padding-block: calc(var(--section-y) * 0.6); }
.l-section--mist { background: var(--c-mist); }
.l-section--ink { background: var(--c-ink); color: #fff; }
.l-section--ink h2,
.l-section--ink h3 { color: #fff; }
.l-section--edge { border-top: 1px solid var(--c-line); }

.l-stack > * + * { margin-top: var(--s-4); }
.l-stack--lg > * + * { margin-top: var(--s-8); }

.l-grid { display: grid; gap: var(--s-6); }
.l-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.l-grid--auto { grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 26vw, 300px), 1fr)); }
.l-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.l-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--s-8), 5vw, var(--s-16));
  align-items: center;
}
.l-split--aside { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
.l-split--lead  { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }

.l-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.l-cluster--between { justify-content: space-between; }

.l-page-head {
  position: relative;
  background: var(--c-ink);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
.l-page-head__media {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 34%;
}
.l-page-head__scrim {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(20, 20, 22, 0.94) 0%, rgba(20, 20, 22, 0.86) 46%, rgba(20, 20, 22, 0.58) 100%);
}
.l-page-head__inner { position: relative; z-index: 3; max-width: 720px; }
.l-page-head h1 { color: #fff; }
.l-page-head p {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-md);
  margin-top: var(--s-4);
  margin-bottom: 0;
}
.l-page-head::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 50%;
  width: 460px;
  height: 460px;
  transform: translateY(-50%) rotate(-18deg);
  border: 1px solid rgba(168, 16, 14, 0.55);
  border-radius: 50%;
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}

/* Country pages: the destination flag becomes the banner artwork. */
.l-page-head--flag .l-page-head__media {
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
}
.l-page-head--flag .l-page-head__scrim {
  background:
    linear-gradient(100deg, rgba(20, 20, 22, 0.96) 0%, rgba(20, 20, 22, 0.9) 44%, rgba(20, 20, 22, 0.66) 100%);
}
.l-page-head__flagmark {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-2);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}

.l-main { display: block; }

@media (max-width: 1100px) {
  .l-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .l-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .l-split,
  .l-split--aside,
  .l-split--lead { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .l-page-head::after { width: 280px; height: 280px; right: -22%; }
}

@media (max-width: 620px) {
  .l-grid--2,
  .l-grid--3,
  .l-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .l-grid { gap: var(--s-4); }
}