/* Resource icon (Resources gallery) */
.sbe-resource-icon {
	margin: 0 0 var(--wp--preset--spacing--30); /* left-aligned, like the other galleries */
	width: 100%;
	max-width: 180px;
}
.sbe-resource-icon a {
	display: block;
	color: inherit;
	text-decoration: none;
}
.sbe-resource-icon__frame {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1;
	padding: 18%;
	overflow: hidden;
	border-radius: 16px;
	background: color-mix(in srgb, currentColor 6%, transparent);
}
.sbe-resource-icon__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.sbe-resource-icon__placeholder {
	font-size: var(--wp--preset--font-size--x-large, 2rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.75;
}
/* Hovering the icon or the name zooms the icon/initials slightly inside the fixed frame and underlines the name. */
.sbe-resource-icon__img,
.sbe-resource-icon__placeholder {
	transition: transform 0.4s ease;
}
.sbe-resource-icon a:hover :is(.sbe-resource-icon__img, .sbe-resource-icon__placeholder),
.sbe-resource-card:has(.wp-block-post-title a:hover) :is(.sbe-resource-icon__img, .sbe-resource-icon__placeholder) {
	transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
	.sbe-resource-icon__img,
	.sbe-resource-icon__placeholder {
		transition: none;
	}
}
/* Hovering the icon underlines the name. */
.sbe-resource-card:has(.sbe-resource-icon a:hover) .wp-block-post-title a {
	text-decoration: underline;
}

/* Resource name centred under its icon: same max width as the icon (180px). */
.sbe-resource-card .wp-block-post-title {
	max-width: 180px;
	margin-left: 0;
	margin-right: 0;
	text-align: center;
}

/* Resources grid: fixed 180px columns (icon width) spread across the full width, so the
   first icon lines up with the left edge and the last with the right edge. Overrides the
   Post Template's grid columns (columnCount 4 / min 200px); the column gap is at least the
   block gap (spacing|50) and grows to fill the row. Incomplete last rows stay in the
   columns above. */
.wp-block-post-template.is-layout-grid:has(.sbe-resource-card) {
	grid-template-columns: repeat(auto-fill, 180px);
	justify-content: space-between;
}

/* Only one column fits (narrower than 2 x 180px + 30px gap): centre it. Container query
   on the Query block, so it follows the actual gallery width. */
.wp-block-query:has(.sbe-resource-card) {
	container-type: inline-size;
}
@container (max-width: 389px) {
	.wp-block-post-template.is-layout-grid:has(.sbe-resource-card) {
		justify-content: center;
	}
}

/* Repository link (Single Resource): underlined text + arrow. Doubled class so the margin
   beats the layout's default 1.2rem block gap (`:root :where(.is-layout-constrained) > *`). */
.sbe-repo-link.sbe-repo-link {
	margin-top: var(--wp--preset--spacing--40);
}
.sbe-repo-link a {
	color: inherit;
	text-decoration: none;
}
.sbe-repo-link__text {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.sbe-repo-link__arrow {
	display: inline-block;
	margin-left: 0.4em;
	transition: transform 0.15s ease;
}
.sbe-repo-link a:hover {
	color: #555;
}
.sbe-repo-link a:hover .sbe-repo-link__arrow {
	transform: translateX(3px);
}