@layer components {
  a[data-school-card] {
    --school-accent: #2563b9;
    --school-tint: #edf4ff;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px !important;
    min-width: 0;
    height: 100%;
    padding: 28px 22px 20px !important;
    overflow: hidden;
    border: 1px solid #e1e7ef;
    border-radius: 20px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 4px 18px rgb(15 31 61 / 4%);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  a[data-school-category='notations'] { --school-accent: #ad5d30; --school-tint: #fff3e9; }
  a[data-school-category='strategies'] { --school-accent: #167c55; --school-tint: #ecf8f1; }
  a[data-school-category='articles'] { --school-accent: #7053b0; --school-tint: #f3effb; }
  a[data-school-card]::before { content: ''; position: absolute; inset: 0 0 auto; height: 10px; background: linear-gradient(90deg, var(--school-accent), color-mix(in srgb, var(--school-accent) 55%, white)); }
  a[data-school-card] > div { min-width: 0; width: 100%; }
  a[data-school-card] h2, a[data-school-card] h3 { margin: 0 !important; color: #152640; font-size: 18px !important; font-weight: 800; line-height: 1.4; letter-spacing: -.025em; }
  a[data-school-card] p { color: #687588; font-size: 13px !important; line-height: 1.7; }
  a[data-school-card] > p { margin: 0 !important; flex: 1; }
  a[data-school-card] > span:first-child:not(.school-card-action), a[data-school-card] > div > span:first-child, a[data-school-card] .chip { color: var(--school-accent) !important; background: var(--school-tint) !important; border-radius: 10px; }
  a[data-school-card] > span:first-child:not(.school-card-action) { align-self: flex-start; }
  a[data-school-card] .school-card-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: auto; padding-top: 14px; border-top: 1px solid #edf0f5; color: var(--school-accent); font-size: 12px; font-weight: 800; }
  a[data-school-card] .school-card-action::after { content: '→'; font-size: 18px; line-height: 1; }
  a[data-school-card] > svg:last-of-type { display: none; }
  a[data-school-card]:focus-visible { outline: 2px solid var(--school-accent); outline-offset: 4px; }
  @media (hover: hover) { a[data-school-card]:hover { transform: translateY(-4px); border-color: var(--school-accent); box-shadow: 0 12px 30px rgb(15 31 61 / 10%); } }
  @media (max-width: 479px) { a[data-school-card] { padding: 26px 18px 18px !important; border-radius: 16px; } }
  @media (prefers-reduced-motion: reduce) { a[data-school-card] { transition: none; } a[data-school-card]:hover { transform: none; } }
}