/* framework/resources: structure only; design in ibia.css. */

/* Load more — revealing the results a batch at a time.
   Centred under the grid, and hidden by the script once everything matching is
   on screen. It renders visible so that without JavaScript the page still shows
   every card and the button simply does nothing. */
.ibia-res__more-wrap {
	display: flex;
	justify-content: center;
	margin-block-start: var(--fw-gutter, 1.5rem);
}

.ibia-res__loadmore {
	min-height: var(--fw-input-height, 3rem);
	padding: var(--fw-btn-pad-y, 0.75rem) var(--fw-btn-pad-x, 2rem);
	border: var(--fw-btn-border, 1px solid) currentColor;
	border-radius: var(--fw-input-radius, 4px);
	background: none;
	color: var(--fw-link, #013563);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

.ibia-res__loadmore:hover { background: var(--fw-bg-grey, #f5f7fa); }

.ibia-res__loadmore:focus-visible {
	outline: var(--fw-focus-width, 2px) solid var(--fw-focus-colour, #013563);
	outline-offset: var(--fw-focus-offset, 2px);
}

/* A revealed card is focused programmatically; never show a focus ring for that. */
.ibia-res-card:focus { outline: none; }

/* With prev / next arrows the grid is one row that scrolls sideways.
   Each track is sized from the Columns setting, so that many cards fill the
   view and the rest wait off to the right. Without this every card shared the
   one row's width: eight cards on World Bunkering came out 125px wide in the
   editor. The page itself only looked right because a page-218 rule pinned the
   cards at 320px, which the editor never sees. That rule still wins on the page.
   Four classes so it beats the 0,3,0 arrows rule in ibia.css, which loads later. */
.ibia-res__main:has(> .ibia-arrows) > .ibia-res__grid.ibia-res__grid--2 { grid-template-columns: none; grid-auto-columns: calc((100% - 1 * 40px) / 2); }
.ibia-res__main:has(> .ibia-arrows) > .ibia-res__grid.ibia-res__grid--3 { grid-template-columns: none; grid-auto-columns: calc((100% - 2 * 40px) / 3); column-gap: 40px; }
.ibia-res__main:has(> .ibia-arrows) > .ibia-res__grid.ibia-res__grid--4 { grid-template-columns: none; grid-auto-columns: calc((100% - 3 * 40px) / 4); }
/* The row is padded 14px for the card shadows (ibia.css); without matching
   scroll padding, snapping pulls the first card flush to the edge and clips it. */
.ibia-res__main:has(> .ibia-arrows) > .ibia-res__grid[class*="ibia-res__grid--"] { scroll-padding-inline: 14px; }
@media (max-width: 1024px) {
	.ibia-res__main:has(> .ibia-arrows) > .ibia-res__grid.ibia-res__grid--3,
	.ibia-res__main:has(> .ibia-arrows) > .ibia-res__grid.ibia-res__grid--4 { grid-auto-columns: calc((100% - 40px) / 2); }
}
@media (max-width: 640px) {
	.ibia-res__main:has(> .ibia-arrows) > .ibia-res__grid[class*="ibia-res__grid--"] { grid-auto-columns: 100%; }
}