/* Wrooms Learn 2026 visual layer. Loaded after the core W theme. */
.learn-reference { overflow-x: clip; }
.learn-reference-panel { container-type: inline-size; }
.learn-reference-labcard,
.learn-reference-model,
.learn-reference-newslist > *,
.learn-reference-source { min-width: 0; }

/* Selected-lab hierarchy: labs span the board, then People + Models live together. */
.prototype-public .learn-reference-topgrid {
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .8fr) !important;
  align-items: stretch;
}
.prototype-public .learn-reference-labs { grid-column: 1 / -1; }
.prototype-public .learn-reference-people { grid-column: 1; }
.prototype-public .learn-reference-models { grid-column: 2; }

.learn-reference-labmark > span,
.learn-reference-model > span:first-child > span {
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 10px 28px rgba(0,0,0,.28);
}
.learn-reference-labcard .learn-reference-labmark img,
.learn-reference-model img { max-width: 100%; max-height: 100%; object-fit: contain; }
.learn-reference-peoplerow { align-items: stretch; }
.learn-person-card { height: 100%; }
.learn-person-card__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.learn-person-card__fallback {
  background:
    radial-gradient(circle at 24% 22%, rgba(124,58,237,.22), transparent 36%),
    radial-gradient(circle at 78% 82%, rgba(37,99,235,.18), transparent 38%),
    linear-gradient(145deg,#0b1020,#070913 64%,#05060c);
}

.learn-reference-model { align-items: flex-start !important; }
.learn-reference-model > div { min-width: 0; }
.learn-reference-model em {
  display: -webkit-box;
  margin-top: .3rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--lr-muted);
  font-size: .58rem;
  font-style: normal;
  line-height: 1.45;
}

.learn-reference-timeline-art {
  display: grid; place-items: center;
  border: 1px solid rgba(79,124,255,.28);
  background: linear-gradient(145deg,rgba(124,58,237,.2),rgba(37,99,235,.12));
  box-shadow: inset 0 1px rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.2);
}
.learn-reference-timeline-art > svg { width: 1.15rem; height: 1.15rem; color: #d9e3ff; filter: drop-shadow(0 0 8px rgba(79,124,255,.38)); }

.learn-reference-video-thumb {
  position: relative; aspect-ratio: 16 / 9; min-height: 0 !important; overflow: hidden;
  border-radius: 1rem; background: #05060b;
}
.learn-reference-video-thumb > img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .45s ease, filter .3s ease;
}
.learn-reference-video-card:hover .learn-reference-video-thumb > img { transform: scale(1.025); filter: saturate(1.08) contrast(1.03); }
.learn-reference-video-placeholder { position: absolute; inset: 50% auto auto 50%; width: 3rem; height: 3rem; transform: translate(-50%,-50%); color: #9ab5ff; }
.learn-reference-video-play {
  position: absolute; left: 1rem; bottom: 1rem; display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.34);
  color: white; background: rgba(5,6,13,.72); backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px rgba(0,0,0,.36),0 0 18px rgba(79,124,255,.28);
}
.learn-reference-video-play svg { width: 1.15rem; height: 1.15rem; margin-left: .12rem; }
.learn-reference-heading-glyph {
  display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; margin-right: .35rem;
  border-radius: .48rem; color: white; background: #050505; border: 1px solid rgba(255,255,255,.16); font-size: .95rem;
}
.learn-reference-newslist > a,
.learn-reference-newslist > div { position: relative; overflow: hidden; }
.learn-reference-news-thumb {
  display: grid !important; place-items: center; flex: 0 0 auto; border-radius: .85rem;
  background: linear-gradient(145deg,rgba(124,58,237,.22),rgba(37,99,235,.13)) !important;
}
.learn-reference-news-thumb > svg { width: 1.25rem; height: 1.25rem; color: #dce6ff; }
.learn-reference-newslist > a > svg:last-child { width: .9rem; height: .9rem; flex: 0 0 auto; color: #7887a9; }

.learn-reference-sourcegrid { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(10.5rem,1fr)); gap: .65rem !important; }
.learn-reference-source {
  display: grid !important; grid-template-columns: 2rem minmax(0,1fr) .85rem; align-items: center; gap: .65rem;
  min-height: 3.35rem; padding: .55rem .7rem !important; overflow: hidden;
}
.learn-reference-source__icon {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem;
  color: #eef2ff; background: linear-gradient(145deg,rgba(124,58,237,.22),rgba(37,99,235,.16));
  border: 1px solid rgba(79,124,255,.2); font: 700 .62rem/1 Outfit, sans-serif;
}
.learn-reference-source__icon svg { width: 1rem; height: 1rem; }
.learn-reference-source > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learn-reference-source > svg:last-child { width: .8rem; height: .8rem; color: #7887a9; }
.learn-reference-x .twitter-tweet,
.learn-reference-x .twitter-timeline { width: 100% !important; max-width: 100% !important; margin-inline: auto !important; }

@container (max-width: 520px) { .learn-reference-sourcegrid { grid-template-columns: 1fr; } }
@media (max-width: 1040px) {
  .prototype-public .learn-reference-topgrid { grid-template-columns: 1fr !important; }
  .prototype-public .learn-reference-labs,
  .prototype-public .learn-reference-people,
  .prototype-public .learn-reference-models { grid-column: 1; }
}
@media (max-width: 900px) {
  .learn-reference-video-play { width: 2.65rem; height: 2.65rem; }
  .learn-reference-timeline ol { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
}
@media (max-width: 640px) {
  .learn-reference-labrow,
  .learn-reference-peoplerow,
  .learn-reference-modelgrid { grid-template-columns: 1fr !important; }
  .learn-reference-video-thumb { border-radius: .8rem; }
  .learn-reference-source { min-height: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .learn-reference-video-thumb > img,
  .learn-person-card__portrait img { transition: none !important; }
}