/* =====================================================================
   LEVELS GRID — keep the cards centred / properly sized when the school
   switches OFF a level (e.g. no Secondary School).

   Every template puts data-lvl="N" on its levels grid, where N is the number
   of level cards really shown (1, 2 or 3; see $_lvl_n in
   inc/homepage_vars.inc.php). With 3 cards nothing here applies, so the
   normal template layouts are untouched.

     N = 1 : one centred card (never pushed to the left)
     N = 2 : two equal columns, centred as a pair (no empty third column)
   Mobile (<=767px): the 3-card swipe sliders would leave blank space after
   1-2 cards, so with 1-2 cards they become full-width stacked cards.
   Loaded after template.css and stylenew-fixes.css on purpose.
   ===================================================================== */

/* ---------- Tablet / desktop (>=768px) ---------- */
@media (min-width: 768px) {
.hp-levels[data-lvl="1"],
.tpl2 .t2-levels-grid[data-lvl="1"],
.tpl3 .t3-level-cards[data-lvl="1"],
.tpl4 .t4-features-grid[data-lvl="1"],
.tpl6 .t6-levels[data-lvl="1"],
.tpl8 .t8-levels[data-lvl="1"],
.tpl9 .t9-level-grid[data-lvl="1"],
.tpl11 .y-classes[data-lvl="1"],
.tpl12 .b-plan-grid[data-lvl="1"],
.tpl13 .n-ad-grid[data-lvl="1"],
.tpl15 .c-level-grid[data-lvl="1"] {
  display: grid !important;
  grid-template-columns: minmax(0, 560px) !important;
  justify-content: center !important;
  max-width: none !important;
  margin-left: auto !important; margin-right: auto !important;
  overflow: visible !important;
}
.hp-levels[data-lvl="2"],
.tpl2 .t2-levels-grid[data-lvl="2"],
.tpl3 .t3-level-cards[data-lvl="2"],
.tpl4 .t4-features-grid[data-lvl="2"],
.tpl6 .t6-levels[data-lvl="2"],
.tpl8 .t8-levels[data-lvl="2"],
.tpl9 .t9-level-grid[data-lvl="2"],
.tpl11 .y-classes[data-lvl="2"],
.tpl12 .b-plan-grid[data-lvl="2"],
.tpl13 .n-ad-grid[data-lvl="2"],
.tpl15 .c-level-grid[data-lvl="2"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-content: center !important;
  max-width: 920px !important;
  margin-left: auto !important; margin-right: auto !important;
  overflow: visible !important;
}
.hp-levels[data-lvl="1"] > *,
.hp-levels[data-lvl="2"] > *,
.tpl2 .t2-levels-grid[data-lvl="1"] > *,
.tpl2 .t2-levels-grid[data-lvl="2"] > *,
.tpl3 .t3-level-cards[data-lvl="1"] > *,
.tpl3 .t3-level-cards[data-lvl="2"] > *,
.tpl4 .t4-features-grid[data-lvl="1"] > *,
.tpl4 .t4-features-grid[data-lvl="2"] > *,
.tpl6 .t6-levels[data-lvl="1"] > *,
.tpl6 .t6-levels[data-lvl="2"] > *,
.tpl8 .t8-levels[data-lvl="1"] > *,
.tpl8 .t8-levels[data-lvl="2"] > *,
.tpl9 .t9-level-grid[data-lvl="1"] > *,
.tpl9 .t9-level-grid[data-lvl="2"] > *,
.tpl11 .y-classes[data-lvl="1"] > *,
.tpl11 .y-classes[data-lvl="2"] > *,
.tpl12 .b-plan-grid[data-lvl="1"] > *,
.tpl12 .b-plan-grid[data-lvl="2"] > *,
.tpl13 .n-ad-grid[data-lvl="1"] > *,
.tpl13 .n-ad-grid[data-lvl="2"] > *,
.tpl15 .c-level-grid[data-lvl="1"] > *,
.tpl15 .c-level-grid[data-lvl="2"] > * {
  max-width: none !important; min-width: 0 !important; width: auto !important;
}
}

/* ---------- Phone (<=767px): stacked, full-width, no empty swipe space ---------- */
@media (max-width: 767px) {
.hp-levels[data-lvl="1"],
.hp-levels[data-lvl="2"],
.tpl2 .t2-levels-grid[data-lvl="1"],
.tpl2 .t2-levels-grid[data-lvl="2"],
.tpl3 .t3-level-cards[data-lvl="1"],
.tpl3 .t3-level-cards[data-lvl="2"],
.tpl4 .t4-features-grid[data-lvl="1"],
.tpl4 .t4-features-grid[data-lvl="2"],
.tpl6 .t6-levels[data-lvl="1"],
.tpl6 .t6-levels[data-lvl="2"],
.tpl8 .t8-levels[data-lvl="1"],
.tpl8 .t8-levels[data-lvl="2"],
.tpl9 .t9-level-grid[data-lvl="1"],
.tpl9 .t9-level-grid[data-lvl="2"],
.tpl11 .y-classes[data-lvl="1"],
.tpl11 .y-classes[data-lvl="2"],
.tpl12 .b-plan-grid[data-lvl="1"],
.tpl12 .b-plan-grid[data-lvl="2"],
.tpl13 .n-ad-grid[data-lvl="1"],
.tpl13 .n-ad-grid[data-lvl="2"],
.tpl15 .c-level-grid[data-lvl="1"],
.tpl15 .c-level-grid[data-lvl="2"] {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  grid-template-columns: none !important;
  max-width: 100% !important;
  /* undo the slider's negative side margins / scroll padding so cards sit centred */
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
.hp-levels[data-lvl="1"] > *,
.hp-levels[data-lvl="2"] > *,
.tpl2 .t2-levels-grid[data-lvl="1"] > *,
.tpl2 .t2-levels-grid[data-lvl="2"] > *,
.tpl3 .t3-level-cards[data-lvl="1"] > *,
.tpl3 .t3-level-cards[data-lvl="2"] > *,
.tpl4 .t4-features-grid[data-lvl="1"] > *,
.tpl4 .t4-features-grid[data-lvl="2"] > *,
.tpl6 .t6-levels[data-lvl="1"] > *,
.tpl6 .t6-levels[data-lvl="2"] > *,
.tpl8 .t8-levels[data-lvl="1"] > *,
.tpl8 .t8-levels[data-lvl="2"] > *,
.tpl9 .t9-level-grid[data-lvl="1"] > *,
.tpl9 .t9-level-grid[data-lvl="2"] > *,
.tpl11 .y-classes[data-lvl="1"] > *,
.tpl11 .y-classes[data-lvl="2"] > *,
.tpl12 .b-plan-grid[data-lvl="1"] > *,
.tpl12 .b-plan-grid[data-lvl="2"] > *,
.tpl13 .n-ad-grid[data-lvl="1"] > *,
.tpl13 .n-ad-grid[data-lvl="2"] > *,
.tpl15 .c-level-grid[data-lvl="1"] > *,
.tpl15 .c-level-grid[data-lvl="2"] > * {
  flex: 0 0 auto !important;
  width: 100% !important; max-width: 100% !important; min-width: 0 !important;
}
}

/* ---------- Two-column tablet layouts: a lone 3rd card spans the full row ---------- */
@media (min-width: 401px) and (max-width: 991px) {
  .tpl12 .b-plan-grid[data-lvl="3"] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 769px) and (max-width: 1199px) {
  .tpl13 .n-ad-grid[data-lvl="3"] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- Template 5 (journey line) & 14 (growth path): flex rows with connectors ---------- */
.tpl5 .t5-journey[data-lvl="1"] { max-width: 380px; margin-left: auto; margin-right: auto; justify-content: center; }
.tpl5 .t5-journey[data-lvl="2"] { max-width: 760px; margin-left: auto; margin-right: auto; justify-content: center; }
.tpl5 .t5-journey[data-lvl="1"] .t5-journey-item::after { display: none; }

.tpl14 .g-path[data-lvl="1"] { max-width: 420px; margin-left: auto; margin-right: auto; justify-content: center; }
.tpl14 .g-path[data-lvl="2"] { max-width: 820px; margin-left: auto; margin-right: auto; justify-content: center; }
.tpl14 .g-path[data-lvl="1"]::before, .tpl14 .g-path[data-lvl="1"]::after { display: none; }
.tpl14 .g-path[data-lvl="2"]::before { left: 25%; right: 25%; }
.tpl14 .g-path[data-lvl="2"]::after { box-shadow: 0 0 0 6px rgba(var(--gold-rgb), .12); }