/* ============================================================
   EFFLUX — SCO-101 mechanism-of-action (3D)
   Three extruded target tiles + a signature "blocked efflux
   pump" mini-schematic. Extrusion matches the pipeline chevrons.
   ============================================================ */

.moa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .moa { grid-template-columns: 1fr; } }

.moa__tile {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 30px 28px 28px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
}
.moa__tile:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -26px rgba(12,57,64,.5); border-color: var(--line-strong); }
.moa__tile--lead { border-top: 3px solid var(--spark); }

.moa__no { font: 500 11px/1 var(--font-mono); letter-spacing: 0.14em; color: var(--ink-3); }
.moa__target { font: 600 21px/1.05 var(--font-sans); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
.moa__kind { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-2); margin-top: -8px; }
.moa__desc { font: 300 14.5px/1.55 var(--font-sans); color: var(--ink-2); margin: 0; }
.moa__effect {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-1);
  display: flex; align-items: flex-start; gap: 9px;
}
.moa__effect .arrow { margin-top: 6px; color: var(--spark); }

/* ---- the 3D stage that holds each glyph ---- */
.moa__stage {
  height: 132px; position: relative;
  background:
    linear-gradient(180deg, #fff 0%, #fff 47%, var(--teal-7) 47%, var(--teal-7) 100%);
  border: 1px solid var(--line);
  overflow: hidden;
}
.moa__stage-label {
  position: absolute; left: 10px; font: 500 8.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.moa__stage-label--top { top: 9px; }
.moa__stage-label--bot { bottom: 9px; color: var(--teal-2); }

/* lipid-bilayer membrane line across the middle */
.moa__membrane {
  position: absolute; left: 0; right: 0; top: 50%; height: 14px; transform: translateY(-50%);
  background:
    radial-gradient(circle 2.4px at 7px 4px, var(--teal-4) 99%, transparent) 0 0/14px 14px repeat-x,
    radial-gradient(circle 2.4px at 7px 10px, var(--teal-4) 99%, transparent) 0 0/14px 14px repeat-x;
  opacity: .9;
}

/* generic extruded shape */
.x3d {
  filter:
    drop-shadow(1px 1.1px 0 var(--ext-teal))
    drop-shadow(2px 2.3px 0 var(--ext-teal))
    drop-shadow(3px 3.5px 0 var(--ext-teal))
    drop-shadow(4px 5px 0 var(--ext-teal))
    drop-shadow(6px 10px 9px rgba(8,32,36,0.28));
}

/* === ABCG2 — efflux pump (two extruded pillars + blocked out-arrow) === */
.moa__pump { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; gap: 16px; align-items: center; }
.moa__pillar {
  width: 22px; height: 70px;
  background: linear-gradient(180deg, var(--teal-4), var(--teal-2) 55%, var(--teal-1));
  clip-path: polygon(18% 0, 82% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
}
.moa__pillar::before { content:""; position:absolute; }
.moa__effluxarrow {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 0; height: 0; pointer-events: none;
}
.moa__effluxarrow span {
  position: absolute; left: -2px; bottom: 6px; width: 4px; height: 30px;
  background: var(--ink-3); transform: translateX(-50%);
}
.moa__effluxarrow span::after {
  content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 9px solid var(--ink-3);
}
/* SCO-101 plug blocking the channel */
.moa__plug {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%,-50%);
  width: 30px; height: 22px;
  background: linear-gradient(180deg, #e89677, var(--spark) 55%, var(--spark-deep));
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  filter:
    drop-shadow(1px 1.1px 0 #7c3b22)
    drop-shadow(2px 2.4px 0 #7c3b22)
    drop-shadow(3px 4px 0 #7c3b22)
    drop-shadow(4px 8px 7px rgba(120,50,28,.34));
  z-index: 3;
}
.moa__cross {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transform: translate(-50%,-50%); z-index: 4; pointer-events:none;
}
.moa__cross::before, .moa__cross::after {
  content:""; position:absolute; left:50%; top:50%; width: 58px; height: 4px; background: var(--spark-deep);
  border-radius: 2px;
}
.moa__cross::before { transform: translate(-50%,-50%) rotate(45deg); }
.moa__cross::after  { transform: translate(-50%,-50%) rotate(-45deg); }

/* accumulating drug molecules in cytoplasm */
.moa__mol {
  position: absolute; width: 11px; height: 11px;
  background: linear-gradient(180deg, var(--teal-3), var(--teal-1));
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  filter: drop-shadow(1px 1.4px 0 var(--ext-teal)) drop-shadow(2px 3px 3px rgba(8,32,36,.3));
}

/* === UGT1A1 — enzyme (extruded notched block) === */
.moa__enzyme {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 56px;
  background: linear-gradient(180deg, var(--teal-4), var(--teal-2) 55%, var(--teal-1));
  clip-path: polygon(0 0, 100% 0, 100% 35%, 58% 50%, 100% 65%, 100% 100%, 0 100%);
}
.moa__substrate {
  position: absolute; left: calc(50% + 26px); top: 50%; transform: translate(-50%,-50%);
  width: 16px; height: 16px;
  background: linear-gradient(180deg,#e89677,var(--spark) 60%,var(--spark-deep));
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  filter: drop-shadow(1px 1.4px 0 #7c3b22) drop-shadow(2px 3px 3px rgba(120,50,28,.3));
}

/* === SRPK1 — kinase (extruded hexagon + phosphate spark) === */
.moa__hex {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 72px; height: 66px;
  background: linear-gradient(180deg, var(--teal-4), var(--teal-2) 55%, var(--teal-1));
  clip-path: polygon(50% 0, 95% 26%, 95% 74%, 50% 100%, 5% 74%, 5% 26%);
}
.moa__phos {
  position: absolute; left: calc(50% + 24px); top: calc(50% - 22px); transform: translate(-50%,-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0b39a, var(--spark) 60%, var(--spark-deep));
  filter: drop-shadow(1px 1.4px 0 #7c3b22) drop-shadow(2px 3px 4px rgba(120,50,28,.32));
  display:flex; align-items:center; justify-content:center;
  font: 700 10px/1 var(--font-sans); color:#fff;
}

/* compact teaser row (home) */
.moa--teaser .moa__desc { display: none; }