.school-showcase {
  /* Every pane is tinted with the colour of the school in its own photo, so the
     same picture keeps the same colour whichever position it lands in. The tint
     is opacity, not an rgba fill, so the YAML only has to carry a plain hex. */
  --showcase-base: #1f2a32;
  --showcase-tint: .74;
  /* The rhomboid carries the copy, and two of the school colours (#3CF,
     #45C2C8) are light enough that white text over them lands at 2.5:1.
     Darkening the whole pane keeps the hue and lifts the text past 4.5:1. */
  --showcase-romboid-shade: .66;
  --showcase-arrow-size: 50px;
  --showcase-arrow-gap: 14px;
  /* Center pane spans 29%-71% and is clipped, so at mid height the red edge
     sits 34.25% in from each side. Park the arrows just outside that edge,
     but never let them run into the 540px text column. */
  --showcase-arrow-inset: max(12px, min(
    calc(34.25% - var(--showcase-arrow-size) - var(--showcase-arrow-gap)),
    calc(50% - 222px - var(--showcase-arrow-size) - var(--showcase-arrow-gap))
  ));
  background: var(--showcase-base);
  color: #fff;
  overflow: hidden;
}

.school-showcase-swiper,
.school-showcase-slide {
  min-height: clamp(420px, 31vw, 560px);
}

.school-showcase-slide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Swiper gives slides height:100% against an auto-height wrapper, which stops
   them stretching — a short slide would leave the section background showing
   below its panes while a wordier slide sets the wrapper height. */
.school-showcase .school-showcase-slide {
  height: auto;
  align-self: stretch;
}

.school-showcase-pane {
  position: absolute;
  inset-block: 0;
  overflow: hidden;
}

.school-showcase-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--showcase-accent, var(--showcase-base));
  opacity: var(--showcase-tint);
  transition: background-color .45s ease, opacity .45s ease;
}

.school-showcase-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.school-showcase-pane-left {
  left: 0;
  width: 43%;
  background: var(--showcase-accent, var(--showcase-base));
  clip-path: polygon(0 0, 100% 0, 74% 100%, 0 100%);
}

.school-showcase-pane-center {
  left: 29%;
  width: 42%;
  z-index: 1;
  background: var(--showcase-accent, var(--showcase-base));
  clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
  filter: brightness(var(--showcase-romboid-shade));
}

.school-showcase-pane-right {
  right: 0;
  width: 43%;
  background: var(--showcase-accent, var(--showcase-base));
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
}

.school-showcase-content {
  position: relative;
  z-index: 3;
  display: flex;
  width: min(92%, 540px);
  min-height: inherit;
  margin-inline: auto;
  padding: 72px 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}


.school-showcase-title {
  color: #fff;
  font-size: clamp(2rem, 3vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
}

/* Partner logos are single-colour (#929292) with the fill baked into the SVG,
   so an <img> cannot be recoloured — brightness(0) flattens it, invert(1)
   turns it white over the photo panes. */
.school-showcase-title-logo {
  display: flex;
  justify-content: center;
  width: 100%;
  line-height: 1;
}

.school-showcase-logo {
  width: auto;
  height: clamp(44px, 5.2vw, 72px);
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
}

.school-showcase-type {
  margin: .45rem 0 1.25rem;
  color: #ffc107;
  font-size: clamp(.85rem, 1.2vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.school-showcase-description {
  max-width: 490px;
  margin-bottom: 1.5rem;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-style: italic;
  line-height: 1.35;
}

/* Same treatment as .hero-carousel-arrow on the homepage. Swiper's own nested
   rules (.swiper-horizontal .swiper-button-prev) outrank a single class and its
   stylesheet ships after this one, so size and placement go through Swiper's
   custom properties instead of fighting the cascade. */
.school-showcase-prev,
.school-showcase-next {
  --swiper-navigation-size: var(--showcase-arrow-size);
  --swiper-navigation-sides-offset: var(--showcase-arrow-inset);
  --swiper-navigation-color: var(--white);
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  font-size: 1.5rem;
  opacity: .7;
  transition: all .3s ease;
}

.school-showcase-prev:hover,
.school-showcase-next:hover,
.school-showcase-prev:focus-visible,
.school-showcase-next:focus-visible {
  background: rgba(0, 0, 0, .6);
  opacity: 1;
  transform: scale(1.1);
}

.school-showcase-prev:focus-visible,
.school-showcase-next:focus-visible {
  outline: 3px solid #ffc107;
  outline-offset: 3px;
}

.school-showcase-pagination {
  display: none;
}

@media (max-width: 767.98px) {
  .school-showcase-swiper,
  .school-showcase-slide {
    min-height: 470px;
  }

  .school-showcase-pane-left,
  .school-showcase-pane-right {
    display: none;
  }

  .school-showcase-pane-center {
    left: 0;
    width: 100%;
    clip-path: none;
  }

  .school-showcase-content {
    padding: 64px 48px 76px;
  }

  /* Media queries add no specificity, so this needs to outrank Swiper's own
     display:flex — same as the hero, which drops its arrows below 768px. */
  .school-showcase .school-showcase-prev,
  .school-showcase .school-showcase-next {
    display: none;
  }

  .school-showcase-pagination {
    display: block;
    bottom: 20px !important;
  }

  .school-showcase-pagination .swiper-pagination-bullet {
    background: #fff;
    opacity: .55;
  }

  .school-showcase-pagination .swiper-pagination-bullet-active {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .school-showcase-swiper .swiper-wrapper {
    transition-duration: 0ms !important;
  }

  .school-showcase-prev,
  .school-showcase-next {
    transition: none;
  }

  .school-showcase-prev:hover,
  .school-showcase-next:hover,
  .school-showcase-prev:focus-visible,
  .school-showcase-next:focus-visible {
    transform: none;
  }
}