/* ==========================================================================
   KIRUR NISIM THEME - css/nisim/pages/cataloge.css           (owner: catalog)
   Catalog root (view/pages/cataloge.tpl): compact hero, breadcrumbs + lead
   sentence, the 8 category tiles and the CTA band.
   Shared components come from base.css (.nis-pagehero--compact,
   .nis-crumbs-bar, .nis-tile, .nis-rich, .nis-cta, .nis-kicker, .nis-btn);
   only the page blocks live here (prefix .nis-catalog).
   Keep it minifier-safe (see the header of base.css); check with css-lint.php.
   ========================================================================== */

/* lead sentence under the breadcrumbs (theme default; replaced by the CMS
   fields catalog_text_top_right / _left as soon as the owner fills them) */
.nis-catalog__lead {
	max-width: 760px;
	margin: 18px 0 0;
	color: var(--nis-text);
	font-size: clamp(16px, 1.3vw, 18.5px);
	font-weight: 300;
	line-height: 1.8;
	text-wrap: pretty;
}

/* CMS texts of the catalog page (four wysiwyg fields, all empty today) */
.nis-catalog__text {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: 20px var(--nis-gap-cols);
	margin-top: 18px;
}
.nis-catalog__text > .nis-rich:empty {
	display: none;
}
.nis-catalog__after {
	padding: 0 var(--nis-gutter) clamp(60px, 7vw, 100px);
}
.nis-catalog__after > .nis-catalog__text {
	margin-top: 0;
}

/* the tiles: 4 + 4 on desktop */
.nis-catalog__body {
	padding: clamp(60px, 7vw, 100px) var(--nis-gutter);
}
.nis-catalog__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2.2vw, 32px);
}

/* CTA band (shared component): both title lines wrap evenly on narrow screens
   (the bold line is its own box, so it is balanced too instead of leaving one word behind) */
.nis-cta__title,
.nis-cta__title > .nis-b {
	text-wrap: balance;
}
.nis-cta__title > .nis-b {
	display: inline-block;
}

/* tablets: three tiles a row on a six-track grid, so a short last row (8 tiles = 3 + 3 + 2) is centred */
@media (max-width: 1249.98px) {
	.nis-catalog__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.nis-catalog__grid > li {
		grid-column: span 2;
	}
	.nis-catalog__grid > li:nth-child(3n+1):nth-last-child(2) {
		grid-column: 2 / span 2;
	}
	.nis-catalog__grid > li:nth-child(3n+1):last-child {
		grid-column: 3 / span 2;
	}
}
/* small tablets and phones: two tiles a row (four tracks: an odd last tile is centred) */
@media (max-width: 899.98px) {
	.nis-catalog__body {
		padding-block: 48px 64px;
	}
	.nis-catalog__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.nis-catalog__grid > li,
	.nis-catalog__grid > li:nth-child(3n+1):nth-last-child(2),
	.nis-catalog__grid > li:nth-child(3n+1):last-child {
		grid-column: span 2;
	}
	.nis-catalog__grid > li:nth-child(2n+1):last-child {
		grid-column: 2 / span 2;
	}
}
@media (max-width: 599.98px) {
	.nis-catalog__lead {
		margin-top: 12px;
	}
	.nis-catalog__body {
		padding-block: 32px 56px;
	}
	/* phones: two compact columns, four short rows instead of eight screens of tiles */
	.nis-catalog__grid {
		gap: 12px;
	}
	.nis-catalog__grid .nis-tile {
		border-radius: var(--nis-r-box);
	}
	.nis-catalog__grid .nis-tile__well img {
		height: clamp(118px, 38vw, 190px);
		padding: 14px;
	}
	.nis-catalog__grid .nis-tile__foot {
		align-items: flex-start;
		padding: 13px 14px 15px;
	}
	.nis-catalog__grid .nis-tile__title {
		font-size: 15.5px;
		line-height: 1.35;
	}
	.nis-catalog__grid .nis-tile__arrow {
		display: none;
	}
}