/* ═════════════════════════════════════════════════════════════════════════════
   ORO · POSSIBILITIES WALL
   Namespace `oropw-`. Loaded last, owns nothing else, removable in one line.

   Replaces the inherited "Featured in" press rail, which was a wall of
   publication logos for press that does not exist — and was marked up as a
   second <h1>, so the page shipped two. What stands there now is the same
   screen real estate spent on what the token actually does.

   WHY px AND NOT rem
   ---------------------------------------------------------------
   `html{font-size}` on this build is viewport-relative — 1rem == 1vw, which is
   3.9px on a 390px phone. Everything here is px or clamp(px, vw, px).

   MOTION reuses the page's own `[view-item]` observer (the inline script in
   index.html adds `.view` when the element scrolls in). No new JS ships for
   this block; only the transitions below are ours.
   ═════════════════════════════════════════════════════════════════════════════ */

.oropw {
  --oropw-paper:  #F5F2EC;
  --oropw-dim:    #A39D92;
  --oropw-line:   rgb(245 242 236 / .10);
  --oropw-gold:   #C9A46A;
  --oropw-gold-hi:#EAD795;
  --oropw-ease:   cubic-bezier(.19, 1, .22, 1);

  width: 100%;
  padding-block: clamp(48px, 6vw, 96px);
}

/* The block sets its own measure rather than borrowing `.container`, so it
   carries no dependency on the inherited Webflow layout. */
.oropw__in {
  width: min(1280px, 92vw);
  margin-inline: auto;
}

/* ── head ─────────────────────────────────────────────────────────────────── */
.oropw__head {
  text-align: center;
  margin-bottom: clamp(28px, 3.4vw, 56px);
}

.oropw__title {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 600;
  color: var(--oropw-paper);
}
/* The second sentence carries the gold. One accent, one meaning. */
.oropw__title em {
  font-style: normal;
  background: linear-gradient(92deg, var(--oropw-gold-hi), var(--oropw-gold) 58%, #8C6743);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ── grid ─────────────────────────────────────────────────────────────────────
   Six cards. Two columns on a phone rather than one: these are two-word labels,
   and a single column would run the block to six full-width slabs and push the
   whole ecosystem section a screen further down. */
.oropw__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 18px);
}

@media (min-width: 700px)  { .oropw__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Six across only once each card clears ~195px. Below that the descriptions
   wrap to two ragged lines and the row reads as a broken table. */
@media (min-width: 1280px) { .oropw__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ── card ─────────────────────────────────────────────────────────────────── */
.oropw__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, .8vw, 14px);
  padding: clamp(16px, 1.5vw, 26px) clamp(14px, 1.3vw, 22px);
  border: 1px solid var(--oropw-line);
  border-radius: clamp(12px, 1.1vw, 18px);
  background:
    linear-gradient(180deg, rgb(245 242 236 / .035), rgb(245 242 236 / .012));
  overflow: hidden;
  transition:
    border-color .4s var(--oropw-ease),
    transform    .5s var(--oropw-ease);
}

/* the ambient bloom the rest of the page carries, lit only on approach */
.oropw__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -40% -20% auto -20%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(ellipse at 50% 50%,
    rgb(201 164 106 / .16) 0%, rgb(201 164 106 / .04) 42%, transparent 70%);
  opacity: 0;
  transition: opacity .5s ease;
}

@media (hover: hover) {
  .oropw__card:hover { border-color: rgb(201 164 106 / .34); transform: translateY(-3px); }
  .oropw__card:hover::before { opacity: 1; }
}

.oropw__i {
  display: grid;
  place-items: center;
  width: clamp(34px, 2.8vw, 44px);
  height: clamp(34px, 2.8vw, 44px);
  border-radius: 50%;
  border: 1px solid rgb(201 164 106 / .26);
  background: radial-gradient(circle at 50% 32%,
    rgb(201 164 106 / .20), rgb(201 164 106 / .04) 72%);
  color: var(--oropw-gold-hi);
  flex: 0 0 auto;
}
.oropw__i svg { display: block; width: 55%; height: 55%; }

.oropw__name {
  margin: 0;
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--oropw-paper);
}

.oropw__desc {
  margin: 0;
  font-size: clamp(12px, .92vw, 14.5px);
  line-height: 1.4;
  color: var(--oropw-dim);
  /* three of the six run to two lines; balance stops them breaking after a
     single word while their neighbours sit on one */
  text-wrap: balance;
}

/* ── state ───────────────────────────────────────────────────────────────────
   Six capabilities listed without their state is the same failure as the press
   rail this block replaced: it reads as an inventory of things that work. Each
   card carries the state its surface is actually in, using the same vocabulary
   as the ledger further down the page. */
.oropw__state {
  margin-top: auto;          /* pinned to the card's floor, so the six line up */
  padding-top: clamp(8px, .8vw, 12px);
  font-size: clamp(8.5px, .62vw, 10px);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--oropw-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.oropw__state::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
/* In progress has started; planned has not. The dot is the only difference. */
.oropw__state[data-state="progress"] { color: var(--oropw-gold); }

/* ── reveal ───────────────────────────────────────────────────────────────────
   `.view` is added by the page's existing IntersectionObserver. The transition
   is ours so nothing inherited has to be widened to reach these elements. */
.oropw [view-item] {
  opacity: 0;
  transform: translateY(16px);
}
.oropw [view-item].view {
  opacity: 1;
  transform: none;
  transition:
    opacity .6s ease,
    transform .8s var(--oropw-ease);
}

@media (prefers-reduced-motion: reduce) {
  .oropw [view-item],
  .oropw [view-item].view { opacity: 1; transform: none; transition: none; }
  .oropw__card { transition: border-color .01ms; }
  .oropw__card:hover { transform: none; }
}

@media (forced-colors: active) {
  .oropw__card { border: 1px solid CanvasText; }
  .oropw__i   { border: 1px solid CanvasText; }
}