/* Fixim — страница «Значки участников» (/achievements) */

.fx-ach-page { padding: 22px 0 8px; }
.fx-ach-page h1 { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: var(--fx-text); }
.fx-art-badges:after { background-image: url(/image/art/badges.svg); }

/* группа значков */
.fx-ach-group { margin: 0 0 34px; }
.fx-ach-group h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; color: var(--fx-text); }
.fx-ach-group-sub { margin: 4px 0 14px; color: var(--fx-muted); font-size: 15px; }
.fx-ach-group-sub a { color: var(--fx-link); }

.fx-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }

/* карточка значка: крупная розетка в цветах сайта и условие получения */
.fx-ach-card { margin: 0; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; scroll-margin-top: 96px; transition: box-shadow .3s ease, border-color .3s ease; }
.fx-ach-card:target { border-color: #9CC4F5; box-shadow: 0 0 0 4px rgba(37,99,235,.14); }
.fx-ach-big { flex: none; width: 56px; }
.fx-ach-big .badge { position: relative; width: 56px; height: 56px; font-size: 56px; line-height: 56px; text-align: center; }
.fx-ach-big .badge span:before { margin: 0; }
.fx-ach-big .badge .icon-certificate { display: block; text-shadow: 0 3px 6px rgba(15,58,99,.16); }
.fx-ach-big .badge span.b { position: absolute; left: 0; top: 0; width: 56px; line-height: 56px; font-size: 22px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.3); }

.fx-ach-body { display: flex; flex-direction: column; min-width: 0; gap: 3px; padding-top: 2px; }
.fx-ach-name { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--fx-text); }
.fx-ach-why { font-size: 15px; line-height: 1.45; color: #34495E; }
.fx-ach-why a { color: var(--fx-link); }
.fx-ach-count { margin-top: 4px; font-size: 13px; color: var(--fx-muted); }

/* кто держит значок прямо сейчас */
.fx-ach-holder { display: flex; align-items: center; gap: 7px; margin-top: 8px; padding-top: 9px; border-top: 1px dashed var(--fx-line); font-size: 14px; color: var(--fx-muted); }
.fx-ach-holder .fx-ini, .fx-ach-holder .fx-ava { width: 24px; height: 24px; }
.fx-ach-holder .fx-ini { font-size: 12px; }
.fx-ach-holder a { font-weight: 600; color: var(--fx-text); }

@media (max-width: 900px) {
	.fx-ach-page { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 700px) {
	.fx-ach-page h1 { font-size: 30px; }
	.fx-ach-grid { grid-template-columns: 1fr; gap: 10px; }
	.fx-ach-card { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.fx-ach-card { transition: none; }
}