/* ==========================================================================
   Стена выпускников.

   Карточка у всех одна и та же: кружок портрета, имя с подписью, рассказ на
   четыре строки и поздравление на две. Текст обрезается стилями, а не при
   сборке страницы — целиком он остаётся в разметке, и читалке не нужен
   отдельный запрос за данными.
   ========================================================================== */

.alum-wall { --tone: var(--green); width: var(--page-content); margin: 0 auto; padding: 72px 0 84px; }
.alum-head { max-width: 760px; margin-bottom: 30px; }
.alum-head h2 { margin: 8px 0 14px; color: var(--green); font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); font-weight: 500; line-height: 1.06; }
.alum-lead { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* ------------------------------------------------------------- управление */
.alum-tools { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.alum-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.alum-chip { display: inline-flex; gap: 7px; align-items: center; height: 38px; padding: 0 15px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font-size: 13.5px; font-weight: 700; transition: border-color .18s, color .18s, background .18s; }
.alum-chip i { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.alum-chip:hover { border-color: var(--teal); color: var(--teal); }
.alum-chip.is-active { border-color: var(--green); background: var(--green); color: var(--white); }
.alum-chip.is-active i { color: rgba(255, 255, 255, .7); }

.alum-search { flex: 0 1 300px; }
.alum-search input { width: 100%; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font-size: 14px; }
.alum-search input:focus { border-color: var(--teal); outline: none; }

/* ----------------------------------------------------------------- сетка */
.alum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.alum-card { position: relative; display: flex; flex-direction: column; min-height: 292px; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--soft-shadow); transition: transform .18s, box-shadow .18s, border-color .18s; }
.alum-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 35%, var(--line)); box-shadow: var(--shadow); }
/* Кликабельна вся карточка, но кнопкой остаётся один элемент: так с клавиатуры
   попадается ровно одна остановка на человека, а не имя, портрет и текст. */
.alum-open { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius); background: none; }
.alum-open:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.alum-top { display: flex; gap: 14px; align-items: center; margin-bottom: 15px; }
.alum-face { flex: 0 0 auto; width: 72px; height: 72px; overflow: hidden; border-radius: 50%; object-fit: cover; object-position: 50% 26%; background: var(--wash); }
.alum-face-mono { display: grid; place-items: center; color: var(--white); background: var(--tone); font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: .5px; }
.alum-who { min-width: 0; }
/* Имя и специальность бывают очень длинными («Поиски и разведка подземных
   вод и инженерно-геологические изыскания»). Держим каждое в двух строках,
   иначе шапка съедает место у рассказа и карточки перестают быть похожими. */
.alum-who b { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 16px; font-weight: 800; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.alum-who span { display: -webkit-box; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.alum-story { display: -webkit-box; margin: 0 0 14px; overflow: hidden; color: var(--text); font-size: 14.5px; line-height: 1.55; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.alum-wish { display: -webkit-box; margin: auto 0 0; padding-left: 14px; overflow: hidden; border-left: 2px solid var(--gold); color: var(--ink); font-family: var(--serif); font-size: 14.5px; font-style: italic; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* У одной анкеты заполнены только имя, год и специальность. В растянутой
   сетке такая карточка всё равно займёт высоту ряда, поэтому ставим шапку
   посередине: пустота читается как «данных больше нет», а не как сбой. */
.alum-card:not(:has(.alum-story)):not(:has(.alum-wish)) { justify-content: center; }
.alum-card:not(:has(.alum-story)):not(:has(.alum-wish)) .alum-top { margin-bottom: 0; }

.alum-card.is-hidden { display: none; }
.alum-empty { margin: 34px 0 0; color: var(--muted); font-size: 15px; text-align: center; }
.alum-foot { display: flex; justify-content: center; margin-top: 28px; }
.alum-more { height: 44px; padding: 0 26px; border: 1px solid var(--green); border-radius: 999px; background: var(--white); color: var(--green); font-size: 14px; font-weight: 800; transition: background .18s, color .18s; }
.alum-more:hover { background: var(--green); color: var(--white); }

/* --------------------------------------------------------------- читалка */
.alum-reader { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(9, 27, 23, .62); backdrop-filter: blur(3px); }
.alum-reader[hidden] { display: none; }
.alum-reader-card { position: relative; display: flex; flex-direction: column; width: min(100%, 640px); max-height: min(88vh, 760px); border-radius: 18px; background: var(--white); box-shadow: 0 30px 80px rgba(9, 27, 23, .4); }
.alum-reader-close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 26px; line-height: 1; }
.alum-reader-close:hover { color: var(--green); }
.alum-reader-body { flex: 1 1 auto; overflow-y: auto; padding: 34px 34px 26px; }
.alum-reader-top { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; padding-right: 34px; }
.alum-reader-face { flex: 0 0 auto; width: 104px; height: 104px; overflow: hidden; border-radius: 50%; object-fit: cover; object-position: 50% 26%; background: var(--wash); }
.alum-reader-mono { display: grid; place-items: center; color: var(--white); background: var(--tone); font-family: var(--serif); font-size: 34px; }
/* Правила имени и подписи привязаны к своему блоку, а не к шапке целиком:
   монограмма — тоже span внутри шапки, и «.alum-reader-top span» перебивал
   бы её собственные стили. */
.alum-reader-who { min-width: 0; }
.alum-reader-who b { display: block; color: var(--ink); font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.2; }
.alum-reader-who span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.alum-reader-story { margin: 0 0 22px; color: var(--text); font-size: 15.5px; line-height: 1.66; }
.alum-reader-wish { margin: 0; padding: 18px 20px; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; background: var(--wash); color: var(--ink); font-family: var(--serif); font-size: 16.5px; font-style: italic; line-height: 1.5; }
.alum-reader-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--line); }
.alum-reader-step { height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--green); font-size: 13px; font-weight: 800; }
.alum-reader-step:hover { border-color: var(--green); }
.alum-reader-count { color: var(--muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- телефоны */
@media (max-width: 900px) {
  .alum-wall { padding: 52px 0 62px; }
  .alum-grid { grid-template-columns: 1fr; gap: 14px; }
  .alum-card { min-height: 0; padding: 18px; }
  .alum-search { flex: 1 1 100%; }
  /* Семь чипов в столбик съедают пол-экрана до первой карточки. На телефоне
     это лента с прокруткой вбок: один ряд вместо четырёх. */
  .alum-chips { flex-wrap: nowrap; width: 100%; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .alum-chips::-webkit-scrollbar { display: none; }
  .alum-chip { flex: 0 0 auto; }
  .alum-face { width: 60px; height: 60px; }
  .alum-face-mono { font-size: 21px; }
  .alum-reader { padding: 0; }
  .alum-reader-card { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .alum-reader-body { padding: 26px 20px 20px; }
  .alum-reader-top { gap: 14px; }
  .alum-reader-face { width: 78px; height: 78px; }
  .alum-reader-mono { font-size: 26px; }
  .alum-reader-top b { font-size: 20px; }
  .alum-reader-step { min-height: 44px; }
  .alum-chip { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .alum-card, .alum-chip, .alum-more { transition: none; }
  .alum-card:hover { transform: none; }
}