/* الطلاب المجازون (sheikh/graduates.js), in the navy design canvas. The search and section pills come from people.css
   (.pp-search, .pp-select). One card per graduate, the whole card a link to his file: his photo in a gold ring, his name
   and what he read large (the sheikh reads these at a glance), the day of his ijaza, and a small drawn ijaza. */
.gr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.gr-bar .gr-search { flex: 0 1 420px; max-width: none; }
.gr-bar .gr-select { flex: 0 1 230px; }
.gr-bar svg { flex: none; color: var(--ink-2); }
.gr-order { margin-inline-start: auto; font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); }

.gr-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 14px; }
.gr-card { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-card);
  background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none;
  transition: box-shadow 200ms ease-out, transform 160ms ease-out; }
.gr-card:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) {
  .gr-card:hover { box-shadow: 0 0 0 1px rgba(16, 27, 58, .07), 0 16px 32px -16px rgba(16, 27, 58, .28); }
  .gr-card:hover .gr-name { color: var(--brand); }
}
@media (prefers-reduced-motion: reduce) { .gr-card { transition: none; } .gr-card:active { transform: none; } }
.gr-text { min-width: 0; display: flex; flex-direction: column; }
.gr-who { display: flex; align-items: center; gap: 12px; }
.gr-pic { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--brand-soft); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold-edge); }
.gr-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gr-name { min-width: 0; font-size: var(--text-3xl); font-weight: 800; line-height: 1.3; transition: color 150ms ease-out; }
.gr-sec { margin-top: 10px; font-size: var(--text-2xl); font-weight: 700; line-height: 1.35; color: var(--brand); }
.gr-when { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; line-height: 1.5; font-size: var(--text-md); color: var(--ink-2); }
.gr-when svg { flex: none; margin-top: 2px; color: var(--gold-mark); }

/* the drawn ijaza: cream paper, a double gold frame, a navy star, three lines of text and a seal */
.gr-paper { position: relative; flex: none; width: 74px; height: 104px; padding-top: 15px; border-radius: 5px; background: #FBF8EE; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(16, 27, 58, .07), 0 8px 16px -10px rgba(16, 27, 58, .45); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gr-paper::before { content: ""; position: absolute; inset: 4px; border: 1.5px solid #C9A95A; border-radius: 3px; }
.gr-paper::after { content: ""; position: absolute; inset: 7px; border: .75px solid #D8C27A; border-radius: 2px; }
.gr-st { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-hover); box-shadow: 0 0 0 2px #F2E4B4; }
.gr-paper b { font-size: var(--text-xs); font-weight: 800; line-height: 1; color: var(--brand-hover); }
.gr-paper i { display: block; height: 2px; border-radius: 2px; background: #E5DCC2; }
.gr-paper i:nth-of-type(1) { width: 38px; }
.gr-paper i:nth-of-type(2) { width: 44px; }
.gr-paper i:nth-of-type(3) { width: 30px; }
.gr-seal { position: absolute; bottom: 12px; inset-inline-start: 13px; width: 14px; height: 14px; border-radius: 50%; background: #F2E4B4; box-shadow: inset 0 0 0 1px #C9A95A; }

.gr-empty { flex-direction: row; align-items: center; gap: 14px; padding: 22px; }
.gr-empty-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }

@media (max-width: 1000px) { .gr-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .gr-bar .gr-search { flex: 1 1 100%; }
  .gr-bar .gr-select { flex: 1 1 160px; }
  .gr-order { flex-basis: 100%; margin: 0; }
  .gr-card { padding: 16px; gap: 12px; }
  .gr-paper { width: 60px; height: 84px; padding-top: 12px; }
  .gr-pic { width: 44px; height: 44px; }
}