/* ================= Flip cards in the evidence matrix =================
   Front = plain-language idea. Back = definition + "so what" + example.
   Desktop: the tile rotates in place.
   <= 900px: tiles are too small to hold the back, so tapping a card
   selects it and the back text appears in a panel under the grid.
======================================================================= */

.mitre-section .app-matrix .matrix-grid i.flip-tile {
  z-index: 3;                      /* sit above the shimmer sheen */
  font-style: normal;
  overflow: visible;               /* lets the swing overshoot slightly */
  background-color: transparent;
  box-shadow: none;
  perspective: 900px;
}

.flip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .2, .2, 1);
  -webkit-tap-highlight-color: transparent;
}

.flip.is-flipped {
  transform: rotateY(180deg);
}

@media (hover: hover) {
  .flip:not(.is-flipped):hover {
    transform: rotateY(9deg);      /* small "peek" to hint it turns */
  }
}

.flip:focus-visible {
  outline: 2px solid #c000ff;
  outline-offset: 3px;
  border-radius: 6px;
}

.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: clamp(10px, 1.2vw, 32px);
  border-radius: 4px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ---------- front ---------- */
.flip-front {
  justify-content: space-between;
  color: #fff;
  color: #e6d3ff;
  background: linear-gradient(145deg, #47049e, #5a00cc);
  border: 1px solid rgba(18, 192, 255, .45);
  padding: clamp(10px, 1.8vw, 32px);
}

/*.flip-front:before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #ff54c2, #12c0ff);
}*/

.flip-idea {
  display: block;
  margin-top: 60px;
  font-size: clamp(15px, 1.65vw, 18px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.flip-hint {
  align-self: flex-end;
  margin-top: auto;
  color: #fff;
  color: #ca9fff;
  font-size: 26px;
  font-weight: 100;
  line-height: 1;
}

/* ---------- back ---------- */
.flip-back {
  gap: 8px;
  justify-content: flex-start;
  color: #1c2530;
  background: #f8f6ff;
  background: #ffffff;
  /*border: 1px solid #c6b6e9;*/
  transform: rotateY(180deg);
}

.flip-def,
.flip-so,
.flip-eg {
  display: block;
}

.flip-def {
  color: #35126e;
  font-size: clamp(10.5px, 1.05vw, 13px);
  font-weight: 700;
  line-height: 1.3;
}

.flip-so {
  color: #536170;
  font-size: clamp(10.5px, 1.05vw, 12.5px);
  line-height: 1.38;
}

.flip-eg {
  margin-top: auto;
  padding-top: 7px;
  /*border-top: 1px solid #d9cdf0;*/
  color: #5b00c2;
  font-size: clamp(9px, .85vw, 11px);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.flip-eg em {
  display: block;
  display: none;
  margin-bottom: 2px;
  color: #8a6fb5;
  font-size: .85em;
  font-style: normal;
  letter-spacing: .14em;
}

/* ---------- detail panel (narrow screens only) ---------- */
.flip-detail {
  display: none;
  margin-top: 16px;
  padding: 18px 20px;
  border-left: 5px solid #c000ff;
  background: #f8f6ff;
  color: #1c2530;
}

.flip-detail small {
  display: block;
  margin-bottom: 8px;
  color: #5b00c2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.flip-detail .flip-def {
  font-size: 16px;
}

.flip-detail .flip-so {
  margin-top: 6px;
  font-size: 15px;
}

.flip-detail .flip-eg {
  margin-top: 12px;
  font-size: 11px;
}

/* ---------- visually hidden (screen-reader label) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}










/* added fix to center aninamtion on mobile   */
.aid .aid-foots { display: contents; }

.flip-hint svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}








/* ---------- narrow screens ---------- */
@media (max-width: 900px) {
  .flip,
  .flip.is-flipped,
  .flip:not(.is-flipped):hover {
    transform: none;               /* no rotation; selection state instead */
  }

  .flip-back {
    display: none;
  }

  .flip-face {
    padding: 8px;
  }

/*  .flip-front:before,
  .flip-hint {
    display: none;
  }*/

.flip-front:before {
  display: none;
}

.flip-hint {
  position: absolute;
  right: 6px;
  bottom: 6px;
  margin: 0;
  opacity: .9;
}

.flip-hint svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.25;   /* keeps thin strokes legible at small size */
}

  .flip-idea {
    font-size: 10px;
    line-height: 1.15;
    letter-spacing: 0;
  }

  .flip.is-flipped .flip-front {
    border-color: #ff54c2;
    box-shadow: 0 0 0 2px #ff54c2;
  }

  .flip-detail.is-open {
    display: block;
  }
}

@media (max-width: 640px) {
  .flip-face {
    padding: 5px;
  }

  .flip-idea {
    font-size: 7.5px;
    overflow-wrap: anywhere;
  }
  .flip-hint {
    right: 4px;
    bottom: 4px;
  }

  .flip-hint svg {
    width: 11px;
    height: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flip {
    transition: none;
  }

  .flip:not(.is-flipped):hover {
    transform: none;
  }
}
/* Mobile has no hover, so keep the hint visible at rest */
@media (hover: none) {
  .flip-hint {
    opacity: 0.9;
  }
  .flip-front {
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
  }
  .flip-front:active {
    transform: scale(0.96);
  }
}
/*@media (hover: none) {
  .card--active {
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
    position: relative;
  }
  .card--active::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 16px;
    height: 16px;
    background: url("/icons/curved-arrow.svg") no-repeat center / contain;
    opacity: 0.85;
  }
  .card--active:active {
    transform: scale(0.96);
  }
}*/