/* Every subject uses the same two-part card shown in the approved card reference. */
.course-units { container:subjects / inline-size; display:block; }
.subject-map { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; width:100%; padding:0 0 24px; }
.subject-card { --action-edge:#d8dee4; position:relative; min-width:0; min-height:222px; display:grid; grid-template-rows:minmax(154px,1fr) 68px; padding:0; overflow:hidden; border:2px solid color-mix(in srgb,var(--subject-card-color) 24%,white); border-radius:22px; background:var(--subject-card-color); box-shadow:0 4px 0 #d8dee4; color:var(--system-ink); text-align:start; cursor:pointer; transition:filter 160ms ease,transform 160ms ease,box-shadow 160ms ease; }
.subject-card:not(:disabled):hover { filter:brightness(1.025); transform:translateY(-2px); box-shadow:0 7px 0 #d8dee4; }
.subject-card:not(:disabled):active { transform:translateY(1px); box-shadow:0 2px 0 #d8dee4; }
.subject-card:focus-visible { outline:4px solid var(--system-blue-action-ink); outline-offset:4px; }
.subject-card__hero { position:relative; display:grid; grid-template-columns:minmax(112px,42%) minmax(0,1fr); align-items:center; gap:12px; min-width:0; padding:20px 24px; overflow:hidden; direction:ltr; background:linear-gradient(145deg,color-mix(in srgb,var(--subject-card-color) 82%,white),var(--subject-card-color)); color:#fff; }
.subject-card__title { position:relative; z-index:1; grid-column:2; min-width:0; direction:rtl; text-align:right; }
.subject-card h2 { margin:0; color:inherit; font:800 clamp(21px,2.5vw,32px)/1.4 var(--font-ui); overflow-wrap:anywhere; }
.subject-card__details { position:relative; z-index:1; display:grid; align-content:center; min-width:0; padding:10px 24px; border-radius:18px 18px 0 0; background:#fff; }
.subject-card__progress-track { position:relative; display:block; width:100%; height:18px; overflow:hidden; border-radius:999px; background:#edf1f3; }
.subject-card__progress-track>span { position:absolute; inset-block:0; inset-inline-start:0; display:block; width:calc(var(--subject-progress,0) * 1%); overflow:hidden; border-radius:inherit; background:#0a8dea; transition:width 180ms ease; }
.subject-card__progress-track>span::before { content:""; position:absolute; top:3px; right:7px; width:max(0px,calc(100% - 14px)); height:3px; border-radius:999px; background:#8fd2ff; }
.subject-card__progress-count { position:absolute; z-index:2; top:50%; left:50%; translate:-50% -50%; padding:1px 7px; border-radius:999px; background:#edf1f3; color:var(--system-number-ink); font:800 12px/16px var(--font-numeric); direction:rtl; white-space:nowrap; }
.subject-card__progress-track[data-label-covered="true"] .subject-card__progress-count { background:#0a8dea; color:#fff; }
.subject-card__lock { position:absolute; top:50%; left:50%; z-index:4; display:grid; place-items:center; width:88px; height:88px; transform:translate(-50%,-50%); }
.subject-card__lock img { display:block; width:76px; height:76px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(15,23,42,.28)); }
.subject-card--locked { cursor:not-allowed; }
.subject-card--locked::after { content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; background:rgba(15,23,42,.45); pointer-events:none; }
.subject-card[data-subject="mathematics"],.subject-card[data-subject="mathematics-2"] { --subject-card-color:#ffcc00; }
.subject-card[data-subject="physics"] { --subject-card-color:#a66bff; }
.subject-card[data-subject="biology"] { --subject-card-color:#58cc02; }
.subject-card[data-subject="chemistry"] { --subject-card-color:#ff784f; }
.subject-card[data-subject="ict"] { --subject-card-color:#0a8dea; }
.subject-card[data-subject="ict"] { grid-column:1 / -1; }
.subject-card[data-subject="english"] { --subject-card-color:#ff5c9f; }
.subject-card[data-subject="arabic"] { --subject-card-color:#ff9f1a; }
.subject-card[data-subject="islamic-education"] { --subject-card-color:#0dccaa; }
@container subjects (max-width:640px) {
  .subject-card__hero { grid-template-columns:minmax(0,1fr); }
  .subject-card__title { grid-column:1; }
  .subject-card h2 { font-size:clamp(21px,4.5cqi,29px); }
}
@container subjects (max-width:560px) {
  .subject-map { grid-template-columns:minmax(0,1fr); gap:14px; }
  .subject-card { min-height:208px; grid-template-rows:minmax(140px,1fr) 68px; }
  .subject-card__hero { padding:16px 20px; }
  .subject-card__details { padding:10px 20px; }
  .subject-card h2 { font-size:clamp(21px,8vw,29px); }
}
@media (prefers-reduced-motion:reduce) { .subject-card,.subject-card__progress-track>span { transition:none; } }