/*
 * Academy Homepage Campaigns - Hero media compositions
 * Build: r11-staging-test
 * Loaded after academy-hero.css.
 */

.and-hero__media {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* ---------- Composition 1: institutional crest (Slide 1) ---------- */

.and-media-crest {
  position: relative;
  width: min(100%, 33rem);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.and-media-crest__ring {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(197, 160, 89, 0.42);
  border-radius: 50%;
}

.and-media-crest__ring:nth-child(2) {
  inset: 17%;
  border-color: rgba(197, 160, 89, 0.24);
}

.and-media-crest__ring:nth-child(3) {
  inset: 26%;
  border-style: dashed;
  border-color: rgba(197, 160, 89, 0.18);
}

.and-media-crest img {
  position: relative;
  width: 58%;
  height: auto;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.34));
}

/* ---------- Composition 2: large flyer (Slide 2) ---------- */

/* Flyer sits square. Rotation is reserved for the fanned card groups so
   that tilt reads as "a stack of things" rather than as decoration. */
.and-media-flyer {
  margin: 0;
  height: 100%;
  align-items: center;
  width: min(100%, 44rem);
  display: flex;
  justify-content: center;
  transform: none;
}

/* Portrait artwork: the height cap, not the column width, is what keeps the
   flyer dominant without stretching the whole carousel taller than every
   other slide. Width follows proportionally; nothing is cropped. */
.and-media-flyer img {
  display: block;
  width: auto;
  max-width: 100%;
  /* r11h: the approved flyer steps up ~16% as the slide's focal point.
     Still height-governed and proportional; width follows the aspect
     ratio, so nothing is cropped or stretched. */
  max-height: clamp(34rem, 48vw, 42rem);
  border-radius: 14px;
  box-shadow: var(--and-shadow-lift);
  border: 1px solid rgba(197, 160, 89, 0.4);
}

/* The gift slide trades a little block padding for the taller flyer so the
   carousel's overall height barely moves; the copy column stays centred. */
.and-hero__slide.and-theme-gift {
  /* Asymmetric: tight above the flyer, and enough below that the taller
     flyer keeps clear breathing room above the control pill. */
  padding-block: clamp(2rem, 3.2vw, 3.25rem) clamp(4rem, 5.2vw, 5.4rem);
}

/* ---------- Composition 3: single large program card (Slide 4) ---------- */

.and-media-single {
  margin: 0;
  /* rc.3: the single program visual takes the media half rather than a
     modest block near the far edge. The wrapper adopts the media area's
     definite height so the image's max-height cap is real and the artwork
     can never outgrow the hero (proportional, uncropped). */
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.and-media-single img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 16px;
  box-shadow: var(--and-shadow-lift);
}

/* rc.3: the offset gold frame is retired. It was drawn against the old
   right-aligned wrapper; with the artwork now centred in the media half it
   rendered as a stray floating outline. */

/* ---------- Composition 4: fanned cards (Slides 3, 5, 6) ---------- */

/*
 * Overlap is produced by negative margins on a non-shrinking flex row.
 * Percentage widths alone were being shrunk by flex, which is why the
 * cards read as small icons rather than a deliberate group.
 */
.and-media-fan {
  position: relative;
  /* rc.3: the fan fills more of the media half of the full-bleed hero. */
  width: min(100%, 52rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0;
}

/*
 * Every card is the same displayed size regardless of its source file's
 * pixel dimensions: the wrapper fixes the outer box (48% of the group,
 * square) and the image fills it with object-fit, so differing source
 * sizes can never make one card render smaller than its neighbours.
 * The group deliberately runs a little wider than the media column; the
 * copy column sits above it (z-index) and the hero clips the far edge.
 */
.and-media-fan__card {
  position: relative;
  margin: 0; /* figure UA default is 1em 40px; without this the fan gaps open */
  flex: 0 0 42%;
  width: 42%;
  aspect-ratio: 1 / 1;
  border-radius: 13px;
  overflow: hidden;
  box-shadow: var(--and-shadow-soft);
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 420ms ease;
  background: var(--and-ivory);
}

.and-media-fan__card:nth-child(1) {
  /* rc.6: !important because Elementor's frontend stylesheet resets figure
     margins inside widgets at ~0-4-1 specificity
     (.elementor .elementor-widget:not(...):not(...) figure { margin: 0 }),
     which silently removed this overlap on the production homepage and made
     the fan ~100px wider per side: the right card clipped past the hero and
     the left card ran into the copy. -14% also buys a calmer text gap. */
  margin-right: -14% !important;
}

.and-media-fan__card:nth-child(3) {
  margin-left: -14% !important;
}

.and-media-fan__card img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover: the full supplied artwork always shows. Any spare
     space letterboxes against the card's ivory ground instead of cropping
     titles or borders off the art. */
  object-fit: contain;
}

.and-media-fan__card:nth-child(1) {
  transform: rotate(-7deg);
  z-index: 1;
}

.and-media-fan__card:nth-child(2) {
  /* Forward by stacking, lift shadow and a slight rise only. All three
     cards share one displayed size; the centre is never scaled. */
  transform: translateY(-3%);
  z-index: 3;
  box-shadow: var(--and-shadow-lift);
}

.and-media-fan__card:nth-child(3) {
  transform: rotate(7deg);
  z-index: 2;
}

.and-hero__slide:hover .and-media-fan__card:nth-child(1) {
  transform: rotate(-10deg) translateX(-4%);
}

.and-hero__slide:hover .and-media-fan__card:nth-child(3) {
  transform: rotate(10deg) translateX(4%);
}

/* Progression variant for Slide 6: the fan steps upward left to right,
   so the eye reads Book 2 to Book 3 to Book 4 as a climb. */
.and-media-fan--progression .and-media-fan__card:nth-child(1) {
  transform: rotate(-6deg) translateY(6%);
}

.and-media-fan--progression .and-media-fan__card:nth-child(2) {
  transform: translateY(-3%);
}

.and-media-fan--progression .and-media-fan__card:nth-child(3) {
  transform: rotate(6deg) translateY(-12%);
}

/* ---------- Composition 5: thin paperbacks (Slide 7) ---------- */

/*
 * Slim booklet, not a hardcover. The depth comes from a narrow page block
 * on the fore edge plus a soft spine gradient, so the object reads as a
 * stapled Academy storybook roughly 4mm thick.
 */

.and-media-books {
  position: relative;
  /* rc.3: the book group fills more of the media half. */
  width: min(100%, 52rem);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  padding-block: 0.75rem 1.5rem;
}

/* Same rule as the fan: the wrapper fixes an identical outer box for all
   three (the covers share one 800x1132 ratio), so the group scales as one
   object and no cover renders smaller than its neighbours. */
.and-media-book {
  position: relative;
  margin: 0; /* figure UA default is 1em 40px; without this the books drift apart */
  flex: 0 0 38%;
  width: 38%;
  aspect-ratio: 800 / 1132;
  border-radius: 3px 7px 7px 3px;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: bottom center;
}

.and-media-book img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px 7px 7px 3px;
  box-shadow:
    0 14px 30px rgba(11, 61, 46, 0.26),
    0 2px 5px rgba(11, 61, 46, 0.18);
}

/* Fore-edge: the visible stack of thin pages on the right. */
.and-media-book::after {
  content: "";
  position: absolute;
  top: 1.5%;
  bottom: 1.5%;
  right: -4px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(
    180deg,
    #fdfbf6 0 1px,
    #e6ddcb 1px 2px
  );
  box-shadow: 1px 0 2px rgba(11, 61, 46, 0.2);
}

/* Spine: a narrow shaded band on the left, kept subtle. */
.and-media-book::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 7%;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(
    90deg,
    rgba(11, 61, 46, 0.3) 0%,
    rgba(11, 61, 46, 0.11) 45%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

.and-media-book:nth-child(1) {
  transform: rotate(-6deg) translateX(22%);
  z-index: 1;
}

.and-media-book:nth-child(2) {
  transform: translateY(-5%);
  z-index: 3;
}

.and-media-book:nth-child(3) {
  transform: rotate(6deg) translateX(-22%);
  z-index: 2;
}

.and-hero__slide:hover .and-media-book:nth-child(1) {
  transform: rotate(-9deg) translateX(10%);
}

.and-hero__slide:hover .and-media-book:nth-child(3) {
  transform: rotate(9deg) translateX(-10%);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .and-hero__slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .and-hero__copy {
    max-width: none;
    order: 1;
  }

  .and-hero__media {
    order: 2;
    min-height: 0;
  }

  .and-hero__slides {
    min-height: 0;
  }

  .and-hero__slide {
    padding-bottom: calc(var(--and-pad-block) + 3.5rem);
  }
}

@media (max-width: 640px) {
  .and-hero__title {
    font-size: clamp(2.1rem, 8.5vw, 2.9rem);
  }

  .and-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .and-button {
    width: 100%;
  }

  .and-media-fan,
  .and-media-books {
    width: 100%;
  }

  .and-media-fan__card {
    flex-basis: 46%;
    width: 46%;
  }

  .and-media-fan__card:nth-child(1) {
    margin-right: -12% !important;
    transform: rotate(-6deg);
  }

  .and-media-fan__card:nth-child(2) {
    transform: translateY(-3%);
  }

  .and-media-fan__card:nth-child(3) {
    margin-left: -12% !important;
    transform: rotate(6deg);
  }

  .and-media-book {
    flex-basis: 42%;
    width: 42%;
  }

  .and-hero__controls {
    gap: 0.3rem;
    padding: 0.3rem 0.45rem;
  }

  .and-hero__arrow,
  .and-hero__toggle {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .and-hero__slide,
  .and-media-fan__card,
  .and-media-book,
  .and-media-flyer,
  .and-button {
    transition: none !important;
  }

  .and-hero__slide {
    transform: none !important;
  }
}