/* ══════════════════════════════════════════════
   Shared beer list styles — beers.php + brewery.php beers tab
   ══════════════════════════════════════════════ */

.beer-hdr, .beer-row {
    display: grid;
    grid-template-columns: 40px 1fr 120px 80px 70px 70px 70px;
    align-items: center;
    padding: 0 0.8rem;
}
.beer-hdr {
    padding-top: 0.55rem; padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border); background: var(--bg-alt);
}
.beer-hdr span, .beer-hdr a {
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-3); cursor: pointer; user-select: none; white-space: nowrap; transition: color 0.15s;
    text-decoration: none;
}
.beer-hdr span:hover, .beer-hdr a:hover { color: var(--text-2); text-decoration: none; }
.beer-hdr span.active, .beer-hdr a.active { color: var(--accent); }
.beer-hdr .h-mt { text-align: right; }
.beer-hdr .arr { font-size: 0.55rem; margin-left: 0.2em; }
.beer-row { border-bottom: 1px solid var(--border-light); transition: background 0.1s; }
.beer-row:nth-child(even) { background: var(--bg-alt); }
.beer-row:hover { background: var(--bg-hover); }

/* Two avatars side by side */
.beer-avatars { display: flex; gap: 3px; align-items: flex-end; flex-shrink: 0; }
.beer-avatars .av { border-radius: var(--radius-sm); }
.beer-avatars .av-brew {
    width: 28px; height: 28px; min-width: 28px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.58rem; font-weight: 700; color: var(--text-inv);
    text-transform: uppercase; overflow: hidden; background: #ddd;
}
.beer-avatars .av-brew img { width: 100%; height: 100%; object-fit: contain; display: block; }

.beer-nm { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; min-width: 0; }
.beer-nm .beer-info { min-width: 0; }
.beer-nm .beer-title {
    font-weight: 500; font-size: 0.82rem; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.beer-nm .beer-title a { color: var(--text); text-decoration: none; }
.beer-nm .beer-title a:hover { color: var(--accent); }
.beer-nm .beer-sub {
    font-size: 0.7rem; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.beer-nm .beer-sub a { color: var(--text-3); text-decoration: none; }
.beer-nm .beer-sub a:hover { color: var(--accent); }
.beer-style { font-size: 0.68rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.beer-msort { display: none; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-light); align-items: center; }
.beer-msort-label { display: none; font-size: 0.72rem; color: var(--text-3); margin-left: auto; }

.beer-mval { display: none; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.beer-mval .bmv { display: none; }
.beer-mval .bmv.active { display: grid; grid-template-columns: auto auto; gap: 0 0.2em; justify-content: end; align-items: baseline; }
.beer-mval .bmv-val { font-weight: 600; font-size: 0.82rem; color: var(--text); text-align: right; }
.beer-mval .bmv-sub { font-size: 0.68rem; color: var(--text-3); text-align: right; grid-column: 1; }

/* Пометка коллаба после названия/пивоварни: «× Zagovor» */
.collab-mark { color: var(--text-3); font-size: 0.92em; margin-left: 0.35em; white-space: nowrap; }
.collab-mark a { color: var(--text-3); text-decoration: none; }
.collab-mark a:hover { color: var(--accent); text-decoration: none; }

/* Style filter (used on beers.php) */
.style-filter { display: flex; align-items: center; gap: 0.5rem; padding: 0; margin-bottom: 0.75rem; }
.style-filter select {
    background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); padding: 0.35rem 0.5rem; font-size: 0.78rem; font-family: var(--font);
    max-width: 300px;
}
.style-filter .style-clear { font-size: 0.75rem; color: var(--accent); text-decoration: none; white-space: nowrap; }

@media (max-width: 768px) {
    .beer-hdr { display: none; }
    .beer-msort { display: flex; gap: 0; }
    .beer-msort-label { display: block; }
    .beer-row {
        grid-template-columns: 26px 1fr auto;
        gap: 0 0.5rem; padding: 0.35rem 0.75rem;
    }
    .beer-nm { gap: 0.4rem; padding: 0.1rem 0; }
    .beer-nm .av { width: 28px; height: 28px; min-width: 28px; }
    .beer-avatars .av-brew { width: 20px; height: 20px; min-width: 20px; font-size: 0.5rem; }
    .beer-nm .beer-title { font-size: 0.78rem; }
    .beer-nm .beer-sub { font-size: 0.65rem; }
    .beer-style, .c-mt { display: none; }
    .beer-mval { display: block; padding: 0; }
    .style-filter select { max-width: 100%; flex: 1; }
}