/* ===== Картинки-вложения: квадратные плитки сеткой (тема damaio) ===== */
:root {
	--aq-cols: 3;        /* максимум колонок (на широком экране) */
	--aq-min: 160px;     /* минимальная ширина плитки: уже не станет, колонок станет меньше */
	--aq-gap: 6px;       /* отступ между плитками */
	--aq-tile: 300px;    /* размер плитки там, где нет сетки (ЛС, предпросмотр) */
}

/* --- Сетка: колонки делят ширину поста поровну, строка всегда заполнена --- */
.aq-row,
.post-attachments {
	display: grid;
	grid-template-columns: repeat(auto-fill,
		minmax(max(var(--aq-min), (100% - (var(--aq-cols) - 1) * var(--aq-gap)) / var(--aq-cols)), 1fr));
	gap: var(--aq-gap);
}
.aq-row { margin: 6px 0; }
.post-attachments { margin: 15px 0; }

.aq-row > .inline-attachment { margin: 0; min-width: 0; }
.post-attachments > :not(.attach-img) { grid-column: 1 / -1; }   /* архивы — на всю ширину */

/* --- Плитка: <a class="attach-img"> из attachment.html --- */
a.attach-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--aq-tile);
	max-width: 100%;
	aspect-ratio: 1;                         /* квадрат; место известно до загрузки -> макет не прыгает */
	box-sizing: border-box;
	overflow: hidden;
	line-height: 0;
	border-radius: 8px;
	border: 1px solid rgba(127, 127, 127, .25);
	background: rgba(127, 127, 127, .12);   /* поля вокруг высоких/широких фото */
	transition: border-color .15s;
}
.aq-row a.attach-img,
.post-attachments > a.attach-img {
	width: 100%;                             /* в сетке плитка = ширина колонки */
}
a.attach-img:hover {
	border-color: rgba(127, 127, 127, .6);
}

/* Фото целиком, пропорции сохраняются, только уменьшается — не растягивается */
a.attach-img img.postimage {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
}

/* До 700px — всегда 2 колонки; шире — до 3 колонок */
@media (max-width: 700px) {
	.aq-row,
	.post-attachments {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}