/* Home: "Explore by stream" bento grid (prefix agh-streams-). Tokens: css/site/tokens.css */
.agh-streams { background: var(--ag-bg); overflow: clip; isolation: isolate; }

/* ---------- Decorative background: a clean surface with two big, very soft glows ---------- */
.agh-streams-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: clip; }
.agh-streams-blob {
  position: absolute; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--ag-glow), transparent 66%);
  filter: blur(24px); opacity: .9; animation: ag-blob 28s ease-in-out infinite;
}
.agh-streams-blob--a { top: -220px; left: -220px; }
.agh-streams-blob--b { bottom: -260px; right: -200px; animation-delay: -12s; animation-duration: 34s; opacity: .75; }
html[data-theme="dark"] .agh-streams-blob { opacity: .7; }
html[data-theme="dark"] .agh-streams-blob--b { opacity: .55; }

/* ---------- Header ---------- */
.agh-streams-head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.agh-streams-head .agh-title { text-wrap: balance; }
.agh-streams-head .agh-hl { white-space: nowrap; }
.agh-streams-head .agh-lead { margin: 0 auto; max-width: 560px; }

/* ---------- Bento grid ---------- */
.agh-streams-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.agh-streams-item { min-width: 0; display: flex; }
.agh-streams-item--xl { grid-column: span 2; grid-row: span 2; }
.agh-streams-item--wide { grid-column: span 2; }
.agh-streams-tilt { flex: 1; display: flex; min-width: 0; border-radius: var(--ag-radius); }

/* ---------- Card ---------- */
.agh-streams-card {
  position: relative; isolation: isolate; flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(20px, 2vw, 28px); border-radius: var(--ag-radius);
  background: var(--ag-surface); border: 1px solid var(--ag-line);
  color: var(--ag-text); text-decoration: none;
  box-shadow: 0 1px 2px rgba(2, 44, 34, .04), 0 8px 24px rgba(2, 44, 34, .05);
  transition: transform .45s var(--ag-ease), box-shadow .45s var(--ag-ease), border-color .45s var(--ag-ease);
}
.agh-streams-card:hover { color: var(--ag-text); transform: translateY(-4px); box-shadow: var(--ag-shadow-lg); border-color: transparent; }
.agh-streams-card:focus-visible { outline: 3px solid var(--ag-brand-mid); outline-offset: 4px; color: var(--ag-text); }
html[data-theme="dark"] .agh-streams-card { box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 28px rgba(0, 0, 0, .28); }
html[data-theme="dark"] .agh-streams-card:hover { box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(52, 211, 153, .08); }

/* Spotlight + watermark layer (clipped to the card) */
.agh-streams-bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.agh-streams-bg::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ag-ease);
  background: radial-gradient(380px circle at var(--ag-mx, 50%) var(--ag-my, 50%), var(--ag-glow), transparent 45%);
}
.agh-streams-card:hover .agh-streams-bg::before,
.agh-streams-card:focus-visible .agh-streams-bg::before { opacity: 1; }
.agh-streams-mark {
  position: absolute; right: -14px; bottom: -22px; font-size: 7.5rem; line-height: 1;
  color: var(--ag-brand); opacity: .06; transform: rotate(-12deg);
  transition: transform .7s var(--ag-ease), opacity .5s var(--ag-ease);
}
.agh-streams-card:hover .agh-streams-mark { opacity: .11; transform: rotate(0deg) scale(1.08) translate(-6px, -6px); }

/* Halo decoration (featured cards): a soft glow, two thin solid rings with light
   travelling slowly around them (rotating conic sheen, masked to the ring), and a large faded watermark icon */
.agh-streams-halo {
  --aghs-head: #12A37A; --aghs-tail: rgba(18, 163, 122, .2);
  position: absolute; right: -50px; bottom: -50px; width: 360px; height: 360px; display: grid; place-items: center;
}
html[data-theme="dark"] .agh-streams-halo { --aghs-head: #6EE7B7; --aghs-tail: rgba(52, 211, 153, .18); }
.agh-streams-item--wide .agh-streams-halo { width: 240px; height: 240px; right: -40px; bottom: -90px; }
.agh-streams-halo::before {
  content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--ag-glow), transparent);
  opacity: .75; transition: opacity .5s var(--ag-ease), transform .7s var(--ag-ease);
}
.agh-streams-card:hover .agh-streams-halo::before { opacity: 1; transform: scale(1.08); }
.agh-streams-halo-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ag-line); }
.agh-streams-halo-ring::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; padding: 1.5px;
  background: conic-gradient(from 0deg, transparent 0deg 190deg, var(--aghs-tail) 280deg, var(--aghs-head) 352deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ag-spin-slow 16s linear infinite;
}
.agh-streams-halo-ring--in { inset: 22%; }
/* inner ring turns the other way, so its bright head sits at the start of the arc */
.agh-streams-halo-ring--in::before {
  background: conic-gradient(from 0deg, transparent 0deg, var(--aghs-head) 8deg, var(--aghs-tail) 80deg, transparent 170deg 360deg);
  animation-duration: 23s; animation-direction: reverse; animation-delay: -6s;
}
.agh-streams-halo-core {
  position: relative; font-size: 5rem; line-height: 1; color: var(--ag-brand); opacity: .1;
  transition: transform .7s var(--ag-ease), opacity .5s var(--ag-ease);
}
.agh-streams-item--wide .agh-streams-halo-core { font-size: 3.4rem; }
.agh-streams-card:hover .agh-streams-halo-core { opacity: .18; transform: scale(1.08) rotate(-6deg); }

/* Animated gradient border (fades in on hover; the inner square spins, masked to a ring) */
.agh-streams-ring {
  position: absolute; inset: -1px; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  overflow: hidden; opacity: 0; transition: opacity .45s var(--ag-ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.agh-streams-ring::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1;
  background: conic-gradient(from 0deg, #12A37A, #6EE7B7, #F5B53F, #05664F, #34D399, #12A37A);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: agh-streams-spin 4.5s linear infinite; animation-play-state: paused;
}
.agh-streams-card:hover .agh-streams-ring,
.agh-streams-card:focus-visible .agh-streams-ring { opacity: 1; }
.agh-streams-card:hover .agh-streams-ring::before,
.agh-streams-card:focus-visible .agh-streams-ring::before { animation-play-state: running; }
@keyframes agh-streams-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Card content */
.agh-streams-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 18px; }
.agh-streams-icon {
  position: relative; isolation: isolate; flex: none; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 16px; font-size: 1.45rem;
  color: var(--ag-brand); background: var(--ag-brand-soft);
  transition: transform .5s var(--ag-ease), color .35s var(--ag-ease);
}
.agh-streams-icon::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--ag-grad); opacity: 0; transition: opacity .4s var(--ag-ease);
  box-shadow: 0 10px 22px rgba(5, 102, 79, .28);
}
.agh-streams-card:hover .agh-streams-icon,
.agh-streams-card:focus-visible .agh-streams-icon { color: #fff; transform: rotate(-8deg) scale(1.08); }
.agh-streams-card:hover .agh-streams-icon::before,
.agh-streams-card:focus-visible .agh-streams-icon::before { opacity: 1; }

.agh-streams-chip {
  display: inline-flex; align-items: center; min-width: 0;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em; line-height: 1.2; white-space: nowrap;
  color: var(--ag-brand); background: var(--ag-surface-2); border: 1px solid var(--ag-line);
  padding: 6px 11px; border-radius: 999px;
}
.agh-streams-name { font-family: var(--ag-font); font-size: 1.14rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ag-ink); margin: 0 0 8px; }
.agh-streams-desc { font-size: .9rem; line-height: 1.6; color: var(--ag-text); margin: 0 0 18px; }
.agh-streams-cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 600; color: var(--ag-brand);
}
.agh-streams-cta i { display: inline-block; transition: transform .4s var(--ag-ease); }
.agh-streams-card:hover .agh-streams-cta i,
.agh-streams-card:focus-visible .agh-streams-cta i { transform: translateX(6px); }

/* ---------- Featured (Engineering, Medical) ---------- */
.agh-streams-item--xl .agh-streams-card,
.agh-streams-item--wide .agh-streams-card { background: linear-gradient(160deg, var(--ag-surface) 40%, var(--ag-surface-2) 100%); }
.agh-streams-item--xl .agh-streams-icon,
.agh-streams-item--wide .agh-streams-icon { width: 64px; height: 64px; border-radius: 18px; font-size: 1.75rem; color: #fff; }
.agh-streams-item--xl .agh-streams-icon::before,
.agh-streams-item--wide .agh-streams-icon::before { opacity: 1; }
.agh-streams-item--xl .agh-streams-card { padding: clamp(24px, 2.6vw, 36px); }
.agh-streams-item--xl .agh-streams-name { font-size: clamp(1.45rem, 2.2vw, 1.9rem); margin-bottom: 12px; }
.agh-streams-item--xl .agh-streams-desc { font-size: 1rem; max-width: 34ch; }
.agh-streams-item--wide .agh-streams-name { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.agh-streams-item--wide .agh-streams-desc { max-width: 38ch; }
.agh-streams-item--xl .agh-streams-cta,
.agh-streams-item--wide .agh-streams-cta {
  padding: 10px 18px; border-radius: 999px; background: var(--ag-brand); color: var(--ag-on-brand);
  box-shadow: 0 10px 22px var(--ag-glow); transition: background-color .3s var(--ag-ease);
}
.agh-streams-item--xl .agh-streams-card:hover .agh-streams-cta,
.agh-streams-item--wide .agh-streams-card:hover .agh-streams-cta { background: var(--ag-brand-strong); }

/* ---------- Accent card ("Not sure yet?") ---------- */
.agh-streams-item--accent .agh-streams-card { background: var(--ag-grad); border-color: transparent; color: rgba(255, 255, 255, .86); box-shadow: 0 16px 36px rgba(5, 102, 79, .28); }
html[data-theme="dark"] .agh-streams-item--accent .agh-streams-card { border-color: rgba(110, 231, 183, .22); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.agh-streams-item--accent .agh-streams-card:hover,
.agh-streams-item--accent .agh-streams-card:focus-visible { color: rgba(255, 255, 255, .86); }
.agh-streams-item--accent .agh-streams-bg::before { background: radial-gradient(320px circle at var(--ag-mx, 50%) var(--ag-my, 50%), rgba(255, 255, 255, .16), transparent 50%); }
.agh-streams-item--accent .agh-streams-bg::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
  transform: translateX(-130%) skewX(-20deg); animation: ag-shimmer 5.5s var(--ag-ease) infinite 1.5s;
}
.agh-streams-item--accent .agh-streams-mark { color: #fff; opacity: .1; }
.agh-streams-item--accent .agh-streams-card:hover .agh-streams-mark { opacity: .16; }
.agh-streams-item--accent .agh-streams-icon { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); animation: ag-pulse-ring 3.2s ease-out infinite; }
.agh-streams-item--accent .agh-streams-icon::before { background: rgba(255, 255, 255, .16); box-shadow: none; }
.agh-streams-item--accent .agh-streams-chip { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); }
.agh-streams-item--accent .agh-streams-name { color: #fff; }
.agh-streams-item--accent .agh-streams-desc { color: rgba(255, 255, 255, .84); }
.agh-streams-item--accent .agh-streams-cta { color: #fff; }
.agh-streams-item--accent .agh-streams-card:focus-visible { outline-color: var(--ag-gold); }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .agh-streams-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agh-streams-item--xl { grid-row: auto; }
  .agh-streams-item--xl .agh-streams-card { min-height: 280px; }
  .agh-streams-halo { width: 240px; height: 240px; right: -50px; bottom: -80px; }
  .agh-streams-halo-core { font-size: 3.4rem; }
}
@media (max-width: 575.98px) {
  .agh-streams-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .agh-streams-item--xl, .agh-streams-item--wide { grid-column: auto; }
  .agh-streams-item--xl .agh-streams-card { min-height: 0; }
  /* compact row layout: icon left, text right */
  .agh-streams-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 18px; }
  .agh-streams-top { display: contents; }
  .agh-streams-icon { grid-column: 1; grid-row: 1 / span 4; width: 48px; height: 48px; border-radius: 14px; font-size: 1.25rem; }
  .agh-streams-item--xl .agh-streams-icon, .agh-streams-item--wide .agh-streams-icon { width: 52px; height: 52px; font-size: 1.4rem; }
  .agh-streams-chip { grid-column: 2; justify-self: start; margin-bottom: 8px; }
  .agh-streams-name, .agh-streams-desc, .agh-streams-cta { grid-column: 2; }
  .agh-streams-item--xl .agh-streams-card { padding: 20px; }
  .agh-streams-item--xl .agh-streams-name { font-size: 1.35rem; margin-bottom: 8px; }
  .agh-streams-item--xl .agh-streams-desc { font-size: .92rem; }
  .agh-streams-desc { margin-bottom: 12px; }
  .agh-streams-cta { justify-self: start; }
  .agh-streams-halo, .agh-streams-item--wide .agh-streams-halo { width: 180px; height: 180px; right: -60px; bottom: -70px; }
  .agh-streams-halo-core, .agh-streams-item--wide .agh-streams-halo-core { font-size: 2.6rem; }
  .agh-streams-blob { width: 380px; height: 380px; }
  .agh-streams-blob--a { top: -160px; left: -180px; }
  .agh-streams-blob--b { bottom: -180px; right: -180px; }
}

@media (prefers-reduced-motion: reduce) {
  .agh-streams-blob, .agh-streams-halo-ring::before, .agh-streams-ring::before,
  .agh-streams-item--accent .agh-streams-icon, .agh-streams-item--accent .agh-streams-bg::after { animation: none !important; }
  .agh-streams-card, .agh-streams-card:hover { transition: none; transform: none; }
}