/* ---------------------------------------------------------------------------
   APOL Opportunities feed.

   The workspace this replaces was a search input on a white card, so the feed
   sits on the same ground and uses the same card geometry as the rest of the
   leadership release surfaces. Everything that carries a claim — the
   verification state, the deadline line, the "this is a portal" note — is
   legible at 390px without being tapped, because those are the parts a leader
   must read before forwarding anything.
   --------------------------------------------------------------------------- */

.apol-opp { margin-bottom: 18px; }

.apol-opp-head { margin-bottom: 14px; }
.apol-opp-head h3 {
  margin: 0 0 6px;
  font: 800 17px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #14302a;
}
.apol-opp-head p {
  margin: 0 0 6px;
  color: #4a5f57;
  font: 400 11.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.apol-opp-count { font-weight: 800 !important; color: #14302a !important; }

.apol-opp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}
.apol-opp .apol-opp-filter {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid #cadbd3;
  border-radius: 999px;
  background: #fff;
  color: #2b4a41;
  font: 700 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}
.apol-opp .apol-opp-filter:hover { border-color: #57a58c; background: #eef8f4; }
.apol-opp .apol-opp-filter:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }
.apol-opp .apol-opp-filter[aria-pressed="true"] { border-color: #0c6b4f; background: #0c6b4f; color: #fff; }

.apol-opp-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.apol-opp-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 15px;
  border: 1px solid #d7e5df;
  border-radius: 14px;
  background: #fff;
  /* Programme names and URLs are long and unbreakable; they wrap rather than
     pushing the grid sideways. */
  overflow-wrap: anywhere;
}
.apol-opp-card h4 {
  margin: 0 0 8px;
  font: 800 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #14302a;
}
.apol-opp-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.apol-opp-badge {
  padding: 3px 9px;
  border-radius: 999px;
  font: 800 9.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.apol-opp-badge-category { background: #e7f0fb; color: #1d4b7a; }
.apol-opp-badge-verified { background: #e4f8ef; color: #0c5c3e; }

.apol-opp-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font: 400 11.5px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.apol-opp-facts dt { color: #6b7d76; font-weight: 800; }
.apol-opp-facts dd { margin: 0; min-width: 0; color: #2b4a41; }

.apol-opp-kind {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid #cadbd3;
  border-radius: 0 8px 8px 0;
  background: #f4f9f7;
  color: #4a5f57;
  font: 400 11px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.apol-opp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
/* Scoped through .apol-opp deliberately. The feed mounts inside .apol-release, and that stylesheet's
   `.apol-release button` rule is one point more specific than a bare class: it was winning, and
   capping the primary action at 42px — under the 44px this product ships as its smallest control.
   Measured in a real browser at 390px rather than assumed. */
.apol-opp .apol-opp-use,
.apol-opp .apol-opp-portal {
  display: inline-grid;
  flex: 1 1 auto;
  min-height: 44px;
  padding: 11px 13px;
  place-items: center;
  border-radius: 10px;
  font: 800 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.apol-opp .apol-opp-use { border: 0; background: #0c6b4f; color: #fff; }
.apol-opp .apol-opp-use:hover { background: #09543e; }
.apol-opp .apol-opp-portal { border: 1px solid #b6cec5; background: #f4f9f7; color: #14302a; }
.apol-opp .apol-opp-portal:hover { border-color: #57a58c; background: #e9f5f0; }
.apol-opp-use:focus-visible,
.apol-opp-portal:focus-visible { outline: 3px solid #7dd3fc; outline-offset: 2px; }

/* How this card came to be filed where it is, stated on the card so a reader can
   disagree with the classification instead of having to trust it. */
.apol-opp-basis {
  margin: 0;
  color: #6b7d76;
  font: 400 10px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.apol-opp-empty,
.apol-opp-failed {
  grid-column: 1 / -1;
  padding: 16px;
  border: 1px dashed #c3d4cd;
  border-radius: 14px;
  background: #f7fbf9;
}
.apol-opp-failed { border-color: #e6b8b0; background: #fff5f3; }
.apol-opp-empty b,
.apol-opp-failed b {
  display: block;
  margin-bottom: 6px;
  font: 800 13px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #14302a;
}
.apol-opp-empty p,
.apol-opp-failed p {
  margin: 0;
  color: #4a5f57;
  font: 400 11.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 640px) {
  /* One card per row, and the two actions stacked full width: side by side at
     390px they were two half-width buttons with wrapped labels. */
  .apol-opp-list { grid-template-columns: 1fr; }
  .apol-opp-actions { flex-direction: column; }
  .apol-opp .apol-opp-use,
  .apol-opp .apol-opp-portal { width: 100%; }
}