/* Shared styles for the academy-family pages — Stage J "Global Campus"
   rewrite (PUBLIC_UI_DESIGN.md). One sheet for all academies (18 legacy +
   admin-created); the per-page .bg-1 photo stays a head <style> from the
   template. Reveals use the shared one-time .sj-reveal system. */

/* title banner */
.back-bar {
  width: 100%;
  background: var(--sj-grad-brand);
  border-bottom: 4px solid var(--sj-gold);
  padding: clamp(56px, 8vw, 96px) 0;
}
.back-bar .back-text h4 {
  font-family: var(--sj-font-head);
  text-align: center;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 400;
  color: #fff;
  margin: 0;
}
.back-bar .back-text h4::after {
  content: ""; display: block;
  width: 44px; height: 4px; border-radius: 2px;
  background: var(--sj-gold); margin: 14px auto 0;
}
.back-bar .back-text p {
  font-family: var(--sj-font-body);
  font-weight: 600;
  text-align: center;
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 1px;
  color: rgba(255, 255, 255, .88);
  margin: 14px 0 0;
}

/* content band (photo behind, veiled by the per-page .bg-1 head style) */
.infra-new {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(28px, 5vw, 56px);
}
.infra-new-carousel {
  order: 2;
  flex: 1 1 600px;
  width: 100%;
}
.infra-new-carousel .carousel-inner {
  width: 100%;
  /* K12: FIXED 4:3 box (see infrastructure.css) — content_slide is fit-mode,
     so without this the carousel resized between slides of different shapes.
     aspect-ratio + object-fit:cover below = every slide the same size. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--sj-r-card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.infra-new-carousel .carousel-item,
.infra-new-carousel .carousel-item picture {
  height: 100%;
}
.infra-new-carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.infra-new-text {
  order: 1;
  flex: 1 1 50%;
  margin: 0 20px;
  text-align: left;
}
.infra-new-text h4 {
  font-family: var(--sj-font-head);
  color: #fff;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 400;
}
.infra-new-text h4::after {
  content: ""; display: block;
  width: 44px; height: 4px; border-radius: 2px;
  background: var(--sj-gold); margin: 12px 0 16px;
}
.infra-new-text p {
  font-family: var(--sj-font-body);
  color: rgba(255, 255, 255, .9);
  font-size: clamp(15.5px, 1.3vw, 18px);
  line-height: 1.8;
  text-align: justify; /* K7 */
}
/* K7: on this navy band the toolbar's gold highlight uses the REAL site gold
   (the ink shade #8a6d00 is for white backgrounds only — tokens rule). */
.infra-new-text .hl-gold { color: var(--sj-gold); }
/* K7: per-academy switch (fancy_gold = 0) — neutralize the legacy seeded
   "large gold" spans (they carry pre-sanitizer inline styles, hence the
   !important) AND toolbar golds, so the write-up reads as plain body text. */
.sj-hl-off p span,
.sj-hl-off .hl-gold {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
}
@media (max-width: 1320px) {
  .infra-new { flex-direction: column; align-items: center; }
  .infra-new-carousel { order: 2; flex: 1 1 100%; margin: 0; }
  .infra-new-text { order: 1; flex: 1 1 100%; margin: 20px 0 0; text-align: left; }
  .infra-new-carousel .carousel-inner { height: auto; }
}
@media (max-width: 768px) {
  .infra-new { flex-direction: column; align-items: center; }
  .infra-new-carousel { order: 2; flex: 1 1 100%; margin: 0; }
  .infra-new-text { order: 1; flex: 1 1 100%; margin: 20px 0 0; text-align: left; }
  .infra-new-carousel .carousel-inner { height: auto; }
}

/* content-carousel controls */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--sj-navy) !important;
  border-radius: 50% !important;
  padding: 15px;
}