/* Academy channel strip. ONE flat grid of cards (no per-academy groups). Mobile first: two across. */
.as-section { margin-block: var(--space-8, 3rem); }
.as-cards { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.as-card { margin: 0; }
.as-card a { display: block; color: var(--color-text-base); text-decoration: none; }
.as-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: var(--color-teal-deep); }
.as-tile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: .5rem;
  text-align: center; font-family: var(--font-serif); font-size: var(--text-sm); line-height: 1.25;
  color: var(--color-text-on-dark); }
.as-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
/* Shorts show YouTube's whole 16:9 picture too (contain, never cropped), on the brand teal */
.as-cards { align-items: start; }
.as-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: .4rem; font-size: var(--text-sm); line-height: 1.35; font-weight: 500; }
.as-go { display: block; margin-top: .15rem; font-size: var(--text-sm); color: var(--color-primary); }
.as-thumb img[hidden] { display: none; }
.as-card a:hover .as-title, .as-card a:focus-visible .as-title { text-decoration: underline; }
.as-card a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 10px; }
.as-by { display: block; margin-top: .1rem; font-size: var(--text-sm); color: var(--color-text-secondary); }
@media (min-width: 900px) {
  .as-cards { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .as-card a, .as-card a * { transition: none; } }

/* P2 redesign: on phones the channel strip is a single swipe row (one card wide ~58%, snap); desktop keeps the 4-up grid. */
@media (max-width: 899.98px) {
  .as-cards { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
  .as-card { flex: 0 0 58%; scroll-snap-align: start; }
  .as-section { margin-block: var(--space-5, 1.25rem); }
  .as-section h2 { margin-top: 0; font-size: 1.375rem; }
}