/*
 * Category tiles of the Profigarden theme (Shop::tile()): the subcategories of a category, Všetky kategórie and the
 * home page. Loaded only where tiles are (Assets::enqueue(), Shop::needs_tiles()); tokens from tokens.css.
 */

/* ---------- Category tiles (.pg-tiles, .pg-cat-tile, Shop::tile()) ----------
 * Subcategories of a category (3 in a row, 128 px, as the live PG Subcategory Grid), the Všetky kategórie page
 * and the categories of the home page (.pg-tiles--l: 4 in a row, 250 px, as the live tiles of both; --home 2 on a tablet). The whole
 * tile is the link. Its own file (Assets, Shop::needs_tiles()): the catalogue, Všetky kategórie, the home page and the
 * styleguide load it, no other page (in layout.css every page loaded it, skeptik-web 7. 11.). */
.pg-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pg-gap-grid);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pg-tiles--l { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.pg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pg-tiles--l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The categories of the home page: the large tiles 4 in a row, 2 on a tablet as the live home (a row of 4 splits evenly). */
@media (min-width: 768px) and (max-width: 1024px) {
	.pg-tiles--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.pg-tiles,
	.pg-tiles--l { grid-template-columns: minmax(0, 1fr); }
}

.pg-tiles__item { min-width: 0; }

.pg-cat-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	block-size: var(--pg-tile-h);
	overflow: hidden;
	background: var(--pg-green-dark);
	color: var(--pg-white);
	text-decoration: none;
}

.pg-tiles--l .pg-cat-tile { block-size: var(--pg-tile-h-l); }

.pg-cat-tile:hover { color: var(--pg-white); }

.pg-cat-tile__img {
	position: absolute;
	inset: 0;
	z-index: var(--pg-z-below);
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform var(--pg-dur-slow) var(--pg-ease);
}

/* At least --pg-scrim behind the whole name (it may take three lines in a 128 px tile). Photo and scrim share
   one layer behind the text (the tile isolates it), the scrim is the last box (::after), so it paints over. */
.pg-cat-tile.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--pg-z-below);
	background: linear-gradient(to top, var(--pg-scrim-strong), var(--pg-scrim));
}

/* The tall tile keeps its top clear: the name sits in the lower 45 %. */
.pg-tiles--l .pg-cat-tile.has-image::after {
	background: linear-gradient(to top, var(--pg-scrim-strong) 0%, var(--pg-scrim) 50%, transparent 100%);
}

.pg-cat-tile__body {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--pg-space-12);
	inline-size: 100%;
	padding: var(--pg-space-16) var(--pg-space-20);
}

.pg-cat-tile__title {
	min-width: 0;
	color: inherit;
	font-size: var(--pg-h4);
	font-weight: var(--pg-fw-bold);
	line-height: var(--pg-lh-snug);
}

.pg-tiles--l .pg-cat-tile__title {
	font-size: var(--pg-h3);
	line-height: var(--pg-lh-tight);
}

/* Brand green square with the arrow: an icon, 3.4:1 against the white arrow (UI, WCAG 1.4.11). */
.pg-cat-tile__arrow {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: var(--pg-icon-btn);
	block-size: var(--pg-icon-btn);
	background: var(--pg-accent);
	color: var(--pg-white);
	transition: background-color var(--pg-dur-fast) var(--pg-ease);
}

.pg-cat-tile__arrow svg {
	width: var(--pg-space-20);
	height: var(--pg-space-20);
}

@media (hover: hover) and (pointer: fine) {
	.pg-cat-tile:hover .pg-cat-tile__img { transform: scale(1.04); }
	.pg-cat-tile:hover .pg-cat-tile__arrow { background: var(--pg-accent-hover); }
}