/* PIB Journal Gallery — бенто ⇄ кладка + общий лайтбокс. Токены темы с фолбэками. */

.pib-g-wrap { margin: 28px 0; }

/* переключатель раскладки — виден только редактору (предпросмотр) */
.pib-g-switch { display: inline-flex; align-items: center; gap: 12px; border: 1px dashed var(--copper, #b0683a); padding: 6px 6px 6px 12px; margin-bottom: 16px; background: rgba(176, 104, 58, .06); }
.pib-g-switch-note { font-family: var(--sans, "Inter", sans-serif); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--copper, #b0683a); }
.pib-g-tab {
	font-family: var(--sans, "Inter", sans-serif); font-size: 11px; letter-spacing: 1.2px;
	text-transform: uppercase; padding: 9px 18px; background: transparent; color: var(--ink, #1a1612);
	border: none; cursor: pointer; transition: background .15s, color .15s;
}
.pib-g-tab.active { background: var(--ink, #1a1612); color: var(--paper, #f5f1ea); }

/* общий вид плитки */
.pib-g-item {
	position: relative; margin: 0; overflow: hidden; cursor: zoom-in;
	background: var(--paper-deep, #ece6db);
}
.pib-g-item img { display: block; width: 100%; transition: transform .6s ease; }
.pib-g-item:hover img { transform: scale(1.03); }
/* Кнопка на товар — тот же язык, что у кнопок сайта (.btn-dark и кнопки в модалках):
   капс, sans, разрядка; по центру снизу, тёмная плашка для читаемости на фото. */
/* Селектор усилен (.pib-g a.pib-g-sku): в записи действует тематическое
   правило .fab-prose a — оно красило кнопку медью и добавляло подчёркивание. */
.pib-g a.pib-g-sku {
	position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
	background: var(--ink, #1a1612); color: var(--paper, #f5f1ea);
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 20px; text-decoration: none; border-bottom: 0; white-space: nowrap;
	font-family: var(--sans, "Inter", sans-serif); font-size: 11px; font-weight: 500;
	letter-spacing: 1.6px; text-transform: uppercase;
	transition: background .15s, color .15s;
}
.pib-g a.pib-g-sku:hover { background: var(--copper, #b0683a); color: #fff; }
.pib-g-cap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 30px 14px 12px; color: #fff; pointer-events: none;
	font-family: var(--serif, "Noto Serif", serif); font-size: 13px; line-height: 1.4;
	background: linear-gradient(transparent, rgba(0, 0, 0, .62));
}
.pib-g-item:has(.pib-g-sku) .pib-g-cap { padding-bottom: 58px; } /* текст выше кнопки */

/* ─── БЕНТО: мозаика без обрезки ───
   Шаг строки мелкий (6px), поэтому сетка строк не видна, а высота плитки
   вычисляется из пропорций самого фото (JS ставит grid-row: span N).
   Горизонтальные кадры JS раздвигает на 2 колонки — отсюда «бенто»-ритм. */
.pib-g.is-bento {
	display: grid;
	grid-template-columns: repeat(var(--pib-cols, 4), 1fr);
	grid-auto-rows: 1px;          /* шаг 1px — плитка попадает в высоту фото точно */
	column-gap: 12px; row-gap: 0; /* вертикальный отступ даёт запас строк, см. JS */
}
.pib-g.is-bento .pib-g-item { align-self: start; grid-row-end: span 300; } /* запас до расчёта */
.pib-g.is-bento .pib-g-item img { width: 100%; height: auto; } /* фото целиком */
.pib-g.is-bento .is-wide { grid-column: span 2; }

/* ─── КЛАДКА (masonry): колонки равной ширины, высота по фото, без обрезки ─── */
.pib-g.is-masonry { column-count: var(--pib-cols, 4); column-gap: 12px; }
.pib-g.is-masonry .pib-g-item {
	break-inside: avoid; -webkit-column-break-inside: avoid;
	display: inline-block; width: 100%; margin: 0 0 12px;
}
.pib-g.is-masonry .pib-g-item img { height: auto; } /* натуральные пропорции */

/* Шаг строки (1px) НЕ переопределяем — меняем только число колонок и отступы. */
@media (max-width: 1023px) {
	.pib-g.is-bento { grid-template-columns: repeat(3, 1fr); }
	.pib-g.is-masonry { column-count: 3; }
}
@media (max-width: 599px) {
	.pib-g.is-bento { grid-template-columns: repeat(2, 1fr); column-gap: 8px; }
	.pib-g.is-masonry { column-count: 2; column-gap: 8px; }
	.pib-g.is-masonry .pib-g-item { margin-bottom: 8px; }
	.pib-g a.pib-g-sku { font-size: 10px; padding: 9px 14px; gap: 6px; letter-spacing: 1.2px; bottom: 10px; }
	.pib-g-item:has(.pib-g-sku) .pib-g-cap { padding-bottom: 44px; }
}

/* ─── общий лайтбокс (полное фото без обрезки) ─── */
.pib-lb {
	position: fixed; inset: 0; z-index: 1400; background: rgba(26, 22, 18, .93);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; transition: opacity .25s; padding: 48px 72px 0;
}
.pib-lb.open { opacity: 1; visibility: visible; }
.pib-lb-img {
	max-width: 100%; max-height: calc(100vh - 160px); object-fit: contain; display: block;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
}
.pib-lb-bar {
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center;
	padding: 20px 16px 26px; color: var(--paper, #f5f1ea);
}
.pib-lb-cap { font-family: var(--serif, "Noto Serif", serif); font-size: 15px; max-width: 60ch; }
.pib-lb-link {
	font-family: var(--sans, "Inter", sans-serif); font-size: 11px; letter-spacing: 1.4px;
	text-transform: uppercase; color: var(--paper, #f5f1ea);
	border: 1px solid rgba(245, 241, 234, .5); padding: 10px 18px; text-decoration: none;
	transition: background .15s, color .15s; white-space: nowrap;
}
.pib-lb-link:hover { background: var(--paper, #f5f1ea); color: var(--ink, #1a1612); }
.pib-lb-x, .pib-lb-prev, .pib-lb-next {
	position: absolute; background: none; border: none; cursor: pointer;
	color: rgba(245, 241, 234, .75); padding: 12px; line-height: 0; transition: color .15s;
}
.pib-lb-x:hover, .pib-lb-prev:hover, .pib-lb-next:hover { color: #fff; }
.pib-lb-x { top: 16px; right: 16px; }
.pib-lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.pib-lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
@media (max-width: 599px) {
	.pib-lb { padding: 32px 6px 0; }
	.pib-lb-img { max-height: calc(100vh - 200px); }
	.pib-lb-bar { gap: 10px; }
}