/* Programme Overview's background and independent feature image only.
   Left-column typography, content, buttons and breadcrumbs retain their existing rules. */
.wp-page.wp-programme-overview .wp-overview-hero-section {
  background: #fff url('../images/sff/wise-programme-background.png') center bottom / contain no-repeat;
}
.wp-programme-overview .wp-hero-artwork {
  --feature-rx: 0deg;
  --feature-ry: 0deg;
  --feature-lift: 0px;
  --feature-glint-x: 45%;
  --feature-glint-y: 20%;
  --feature-corner: 44px 52px 40px 48px;
  --feature-slant: 4deg;
  position: relative;
  min-width: 0;
  width: 100%;
  padding: 24px 0 56px;
  perspective: 1200px;
  perspective-origin: 50% 42%;
  isolation: isolate;
}
.wp-programme-overview .wp-feature-assembly {
  position: relative;
  transform-style: preserve-3d;
  transform: translate3d(0, var(--feature-lift), 0) rotateX(calc(1.5deg + var(--feature-rx))) rotateY(calc(-5deg + var(--feature-ry))) rotateZ(-.6deg);
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.wp-programme-overview .wp-feature-ground-shadow {
  position: absolute;
  left: 9%;
  right: 1%;
  bottom: 34px;
  height: 54px;
  border-radius: 50%;
  background: #25457538;
  filter: blur(24px);
  transform: rotate(4deg);
  transition: opacity 500ms ease, transform 500ms ease;
  pointer-events: none;
}
.wp-programme-overview .wp-feature-depth {
  position: absolute;
  inset: 0;
  border-radius: var(--feature-corner);
  border: 1px solid #cfdeec;
  background: linear-gradient(135deg, #fff, #bacde0 58%, #809bb9);
  transform: translate3d(9px, 12px, -12px) skewY(var(--feature-slant));
  box-shadow: 2px 4px 0 #94adca, 0 30px 44px -21px #1e3b666b;
  pointer-events: none;
}
.wp-programme-overview .wp-feature-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1.32;
  margin: 0;
  overflow: hidden;
  border: 2px solid #f7fbff;
  border-radius: var(--feature-corner);
  background: #e4eef7;
  transform: translateZ(10px) skewY(var(--feature-slant));
  box-shadow: 0 2px 2px #ffffffc4, 0 8px 12px -5px #17325847, 0 30px 48px -20px #17375e70;
  transition: box-shadow 500ms ease;
}
.wp-page.wp-programme-overview .wp-feature-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Counter-skew the photograph so faces stay natural inside the angled frame. */
  transform: skewY(calc(-1 * var(--feature-slant))) scale(1.095);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.wp-programme-overview .wp-feature-highlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 2px 2px #ffffffc4, inset 2px 0 2px #ffffff70, inset 0 -2px 4px #23426345;
  background: radial-gradient(ellipse at var(--feature-glint-x) var(--feature-glint-y), #ffffff22, transparent 62%);
  pointer-events: none;
}
.wp-programme-overview .wp-hero-artwork .wp-brand-panel {
  z-index: 3;
  width: clamp(155px, 14vw, 202px);
  right: -4px;
  bottom: -39px;
  padding: 21px 24px;
  border: 1px solid #8badd8;
  border-radius: 24px;
  background: linear-gradient(145deg, #40589a, #27387e 58%, #182759);
  box-shadow: inset 0 2px 2px #ffffff80, inset 0 -2px 4px #14245d99, 0 5px 0 #192b61, 0 11px 16px -7px #14234480, 0 28px 32px -14px #253e777d;
  transform: translateZ(66px) rotateZ(-1deg);
  transition: box-shadow 500ms ease;
}
.wp-programme-overview .wp-hero-artwork .wp-brand-panel img {
  filter: drop-shadow(0 2px 1px #13245440);
}
@media (hover:hover) and (pointer:fine) and (min-width:851px) and (prefers-reduced-motion:no-preference) {
  .wp-programme-overview .wp-hero-artwork.is-active { --feature-lift: -10px; }
  .wp-programme-overview .wp-hero-artwork.is-active .wp-feature-assembly { transition-duration: 190ms; }
  .wp-programme-overview .wp-hero-artwork.is-active .wp-feature-photo {
    box-shadow: 0 2px 2px #ffffffd9, 0 12px 18px -7px #17325857, 0 46px 65px -23px #17375e80;
  }
  .wp-programme-overview .wp-hero-artwork.is-active .wp-feature-ground-shadow { opacity: .72; transform: translateY(9px) rotate(4deg) scale(1.08); }
  .wp-programme-overview .wp-hero-artwork.is-active .wp-brand-panel {
    box-shadow: inset 0 2px 2px #ffffff90, inset 0 -2px 4px #14245d99, 0 5px 0 #192b61, 0 16px 23px -9px #1423448c, 0 35px 40px -15px #253e778a;
  }
}
@media (max-width:1100px) and (min-width:851px) {
  .wp-programme-overview .wp-hero-artwork { --feature-corner: 32px 42px 30px 38px; }
  .wp-programme-overview .wp-hero-artwork .wp-brand-panel { width: 150px; padding: 16px 20px; border-radius: 20px; }
}
@media (max-width:1100px) {
  /* Keep narrow-screen copy entirely free of illustration. Reuse two small crops
     from the original artwork around the photo, rather than enlarging a wide
     background to the height of the whole mobile section. */
  .wp-page.wp-programme-overview .wp-overview-hero-section { background: #fff; }
  .wp-programme-overview .wp-hero-artwork { padding: 128px 0 190px; }
  .wp-programme-overview .wp-hero-artwork::before,
  .wp-programme-overview .wp-hero-artwork::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -12px;
    pointer-events: none;
    background-image: url('../images/sff/wise-programme-background.png');
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 82%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 82%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  /* Graduation cap and open book: original artwork's upper-right corner. */
  .wp-programme-overview .wp-hero-artwork::before {
    top: 0;
    width: clamp(210px, 42vw, 280px);
    aspect-ratio: 522 / 220;
    background-size: 320.31% auto;
    background-position: right top;
  }
  /* Compass and football: original artwork's lower-right corner. */
  .wp-programme-overview .wp-hero-artwork::after {
    bottom: 0;
    width: clamp(230px, 47vw, 300px);
    aspect-ratio: 492 / 249;
    background-size: 339.84% auto;
    background-position: right bottom;
  }
  .wp-programme-overview .wp-feature-ground-shadow { bottom: 167px; }
}
@media (max-width:850px) {
  .wp-programme-overview .wp-hero-artwork { --feature-slant: 3deg; max-width: 650px; width: calc(100% - 24px); margin: 22px auto 0; }
  .wp-programme-overview .wp-feature-assembly { transform: rotateY(-3deg) rotateX(1deg); }
  .wp-programme-overview .wp-feature-photo { aspect-ratio: 1.42; }
  .wp-programme-overview .wp-hero-artwork .wp-brand-panel { right: -4px; width: clamp(145px, 26vw, 190px); bottom: -32px; }
}
@media (max-width:600px) {
  .wp-programme-overview .wp-hero-artwork { --feature-corner: 28px 34px 26px 32px; width: calc(100% - 16px); padding-top: 100px; padding-bottom: 155px; }
  .wp-programme-overview .wp-hero-artwork::before { width: 220px; }
  .wp-programme-overview .wp-hero-artwork::after { width: 245px; }
  .wp-programme-overview .wp-feature-depth { transform: translate3d(6px, 9px, -10px) skewY(var(--feature-slant)); }
  .wp-programme-overview .wp-feature-photo { aspect-ratio: 1.26; }
  .wp-programme-overview .wp-hero-artwork .wp-brand-panel { width: 134px; padding: 15px 17px; right: -5px; bottom: -27px; border-radius: 19px; }
  .wp-programme-overview .wp-feature-ground-shadow { bottom: 135px; height: 35px; filter: blur(18px); }
}
@media (prefers-reduced-motion:reduce) {
  .wp-programme-overview .wp-hero-artwork *, .wp-programme-overview .wp-hero-artwork { transition: none!important; animation: none!important; }
  .wp-programme-overview .wp-feature-assembly { transform: rotateY(-3deg) rotateX(1deg); }
}