/* Shared flip-card contract for the five TIGER strategy pages. */

/* Shared layered hero treatment for the four direction pages. */
.institutional-prototype .institutional-hero,
.global-page .global-hero,
.education-page .education-hero,
.research-page .research-hero {
  display: none;
}

@media (max-width: 767px) {
  .direction-hero { padding-top: min(240px, 31.25vw); }
  .direction-hero-layer { height: min(240px, 31.25vw); }
}

.direction-hero {
  position: relative;
  width: 100%;
  height: 450px;
  container-type: inline-size;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}

.direction-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 71.63%);
}

.direction-hero-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.direction-hero-layer--front { z-index: 2; }

.direction-hero-title {
  position: absolute;
  inset: auto;
  top: calc(50% - (100% * 144 / 450) / 2);
  left: calc(100% * 80 / 1440);
  z-index: 4;
  box-sizing: border-box;
  width: calc(100% * 522 / 1440);
  height: calc(100% * 144 / 450);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: var(--strategy-theme);
  font-size: clamp(58px, 5.2vw, 92px);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: calc(72 / 60);
  text-shadow: 0 2px 12px rgba(20, 15, 24, .2);
  white-space: nowrap;
}

.direction-hero-title span { display: block; }

.direction-hero-intro {
  padding: var(--section-padding);
  background: #fff;
}

.direction-hero-intro p {
  width: min(100%, 680px);
  margin: 0 auto;
  color: var(--strategy-ink, #080b1b);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: var(--fw-light);
  line-height: 1.55;
  text-align: center;
}

@media (max-width: 767px) {
  .direction-hero {
    padding-top: min(240px, 31.25vw);
  }

  .direction-hero-layer {
    height: min(240px, 31.25vw);
  }

  .direction-hero {
    height: auto;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: min(240px, 31.25vw);
    overflow: visible;
  }

  .direction-hero-title {
    top: auto;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: var(--prototype-hero-title-mobile-padding, 24px) var(--content-pad);
    justify-content: flex-start;
    font-size: clamp(32px, 9vw, 46px);
    line-height: .94;
    white-space: normal;
    text-shadow: none;
    position: relative;
    margin-top: 0;
    background: #fff;
  }

  .direction-hero-title--single-line {
    white-space: nowrap;
    font-size: clamp(26px, 8.5vw, 46px);
  }

  .direction-hero-layer {
    top: 0;
    bottom: auto;
    height: min(240px, 31.25vw);
  }

  .direction-hero-intro { padding: var(--section-padding); }

  .direction-hero-intro p {
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
  }
}

/* Final mobile hero contract: shared direction banners use a responsive image capped at 240px. */
@media (max-width: 767px) {
  .direction-hero { padding-top: min(240px, 31.25vw); }
  .direction-hero-layer { height: min(240px, 31.25vw); }
}

/* Shared strategy-section layout replayed from Research. */
.institutional-prototype .research-strategy-section,
.global-page .research-strategy-section,
.education-page .research-strategy-section,
.research-page .research-strategy-section {
  padding: var(--section-padding);
  background: #f2f2f7;
}

.institutional-prototype .research-strategy-inner,
.global-page .research-strategy-inner,
.education-page .research-strategy-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 0;
}

.institutional-prototype .research-strategy-intro,
.global-page .research-strategy-intro,
.education-page .research-strategy-intro {
  width: min(100%, var(--content));
  margin: 0 auto 32px;
}

.institutional-prototype .research-strategy-kicker,
.global-page .research-strategy-kicker,
.education-page .research-strategy-kicker {
  margin: 0;
  color: var(--strategy-theme);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: var(--fw-medium);
  letter-spacing: -.03em;
  line-height: 1;
}

.institutional-prototype .research-strategy-grid,
.global-page .research-strategy-grid,
.education-page .research-strategy-grid {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1199px) {
  .institutional-prototype .research-strategy-grid,
  .global-page .research-strategy-grid,
  .education-page .research-strategy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .institutional-prototype .research-strategy-grid,
  .global-page .research-strategy-grid,
  .education-page .research-strategy-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .institutional-prototype .research-strategy-inner,
  .global-page .research-strategy-inner,
  .education-page .research-strategy-inner {
    padding: 0;
  }
}

.strategy-flip-card {
  position: relative;
  min-width: 0;
  min-height: 420px;
  perspective: 1200px;
}

.strategy-card-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2, .75, .2, 1);
}

.strategy-flip-card[data-flipped="true"] .strategy-card-scene,
.strategy-flip-card:hover .strategy-card-scene,
.strategy-flip-card:focus-within .strategy-card-scene {
  transform: rotateY(180deg);
}

.strategy-card-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid rgba(125, 40, 130, .22);
  border-color: color-mix(in srgb, var(--strategy-theme) 22%, transparent);
  border-radius: 14px;
  backface-visibility: hidden;
  box-shadow: 0 12px 28px rgba(29, 17, 41, .1);
}

.strategy-card-front {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.strategy-card-front > img {
  width: 100%;
  height: 260px;
  flex: 0 0 260px;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.strategy-card-front-copy {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  text-align: center;
}

/* The prototype cards use imagery and headings only; suppress the legacy
   strategy numbering that lives in the original page stylesheet. */
.strategy-card-front::after,
.strategy-card-back::after {
  content: none !important;
  display: none;
}

.strategy-card-front h2 {
  max-width: 20ch;
  margin: 0;
  color: var(--strategy-theme);
  font-size: clamp(18px, 1.55vw, 23px);
  font-weight: var(--fw-medium);
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.strategy-card-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
  color: #fff;
  background: var(--strategy-theme);
  transform: rotateY(180deg);
}

.strategy-card-back p,
.strategy-card-back ol {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: var(--fw-light);
  line-height: 1.48;
}

.strategy-card-back ol {
  margin-top: 16px;
  padding-left: 20px;
}

.strategy-card-back p + p {
  margin-top: 18px;
}

.strategy-flip-card:focus-visible {
  outline: 3px solid var(--strategy-theme);
  outline-offset: 5px;
}

.strategy-flip-card:hover .strategy-card-face,
.strategy-flip-card:focus-visible .strategy-card-face {
  border-color: color-mix(in srgb, var(--strategy-theme) 48%, transparent);
}

@media (max-width: 1199px) {
  .strategy-flip-card {
    min-height: 380px;
  }

  .strategy-card-front > img {
    height: 240px;
    flex-basis: 240px;
  }
}

@media (max-width: 767px) {
  .strategy-flip-card {
    min-height: 380px;
  }

  .strategy-card-front > img {
    height: 240px;
    flex-basis: 240px;
  }
}

@media (max-width: 399px) {
  .strategy-flip-card {
    min-height: 360px;
  }

  .strategy-card-front > img {
    height: 200px;
    flex-basis: 200px;
  }

  .strategy-card-front-copy {
    padding: 20px;
  }

  .strategy-card-back {
    padding: 22px 20px;
  }

  .strategy-card-back p,
  .strategy-card-back ol {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .strategy-card-scene {
    transition: none !important;
  }
}

@media (max-width: 767px) {
  .direction-hero { padding-top: min(240px, 31.25vw); }
  .direction-hero-layer { height: min(240px, 31.25vw); }
}