/*
 * Shop directory (/shops/).
 *
 * Replaces the old bordered table. A craft shop is chosen on what it makes,
 * not on its position in an alphabetical register, so each card leads with the
 * shop's own products and the name sits underneath.
 *
 * Everything is namespaced .shoplist-* because Bootstrap 2 and flat-ui are
 * still loaded globally and claim most short class names.
 */

.shoplist {
	/* The letter rail centres itself once it wraps. That depends on how wide
	   the rail actually is, not on the window, so it is a container query. */
	container-type: inline-size;

	--sl-ink: #34495e;
	--sl-accent: #16a085;
	--sl-muted: #8d959c;
	--sl-hairline: #e4e7ea;
	--sl-surface: #f5f5f5;

	color: var(--sl-ink);
}

/* ---------------------------------------------------------------- masthead */

.shoplist-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	margin-bottom: 18px;
}

.shoplist-head h2 {
	font-family: Bitter, Georgia, serif;
	font-weight: 700;
	color: var(--sl-ink);
	margin: 0;
	line-height: 1.15;
}

/* States what you are actually looking at, rather than repeating "Butikker". */
.shoplist-count {
	font-family: Lato, Arial, sans-serif;
	font-size: 14px;
	color: var(--sl-muted);
}

/* ------------------------------------------------------------------ search */

.shoplist-search {
	position: relative;
	margin: 0 0 18px;
	max-width: 420px;
}

.shoplist-search input[type="text"] {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 38px 0 14px;
	box-sizing: border-box;
	border: 1px solid var(--sl-hairline);
	border-radius: 3px;
	background: #fff;
	font-family: Lato, Arial, sans-serif;
	font-size: 15px;
	color: var(--sl-ink);
	box-shadow: none;
}

.shoplist-search input[type="text"]:focus {
	outline: none;
	border-color: var(--sl-accent);
	box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.12);
}

.shoplist-search button {
	position: absolute;
	top: 0;
	right: 0;
	width: 38px;
	height: 40px;
	border: 0;
	background: none;
	color: var(--sl-muted);
	cursor: pointer;
	font-size: 15px;
	line-height: 40px;
	padding: 0;
}

.shoplist-search button:hover,
.shoplist-search button:focus-visible {
	color: var(--sl-accent);
}

/* -------------------------------------------------------------- letter rail
 *
 * The alphabet is the real navigation on this page - 29 letters including
 * A/O/AA - so it gets to be one clean rail rather than a wrapping grid of
 * boxes. Scrolls sideways on narrow screens instead of stacking.
 */

.shoplist-rail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Spread the alphabet across the full width. Only safe while it fits on
	   one line - space-between stretches a partial final row too, which is
	   why the wrapped case below switches to centring instead. */
	justify-content: space-between;
	gap: 1px;
	margin: 0 0 20px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--sl-hairline);
}

.shoplist-rail a,
.shoplist-rail span {
	flex: 0 0 auto;
	min-width: 23px;
	padding: 4px 4px;
	border-radius: 3px;
	font-family: Lato, Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	color: var(--sl-muted);
	white-space: nowrap;
}

.shoplist-rail a:hover {
	color: var(--sl-accent);
	background: var(--sl-surface);
	text-decoration: none;
}

.shoplist-rail a:focus-visible {
	outline: 2px solid var(--sl-accent);
	outline-offset: 1px;
}

.shoplist-rail .is-active {
	color: #fff;
	background: var(--sl-accent);
}

.shoplist-rail .shoplist-rail-all {
	margin-right: 5px;
	padding-right: 10px;
	border-right: 1px solid var(--sl-hairline);
	border-radius: 3px 0 0 3px;
}

/* Once the alphabet stops fitting on one line it wraps into a few centred
   rows, which reads better than a sideways scroller people have to discover. */
@container (max-width: 1010px) {
	.shoplist-rail {
		justify-content: center;
		row-gap: 2px;
	}

	.shoplist-rail .shoplist-rail-all {
		margin-right: 0;
		padding-right: 4px;
		border-right: 0;
	}
}

/* -------------------------------------------------------------------- grid */

.shoplist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 20px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.shoplist-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sl-hairline);
	border-radius: 4px;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.shoplist-card:hover {
	border-color: #cfd6dc;
	box-shadow: 0 3px 10px rgba(52, 73, 94, 0.09);
	transform: translateY(-2px);
}

.shoplist-card:focus-within {
	border-color: var(--sl-accent);
	box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.12);
}

/* --------------------------------------------------------- product mosaic */

.shoplist-mosaic {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
	/* Karoline asked for more air between the product shots - at 2px they read
	   as one collaged image rather than three separate pieces of work. The
	   gaps show the card, so keep this white and let the tiles carry grey. */
	gap: 6px;
	/* Karoline also asked for air around the outside, not just between. The
	   border-box keeps the frame square while the images inset. */
	padding: 6px;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	background: #fff;
}

.shoplist-mosaic a {
	display: block;
	overflow: hidden;
	background: var(--sl-surface);
}

.shoplist-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.shoplist-mosaic a:hover img {
	transform: scale(1.04);
}

/* The first tile is the tall one; 1 and 2 image shops fill the frame instead
   of leaving obvious holes. */
.shoplist-mosaic a:first-child {
	grid-row: span 2;
}

/* One image fills the frame - and so does two. A pair splitting the frame in
   half reads as a broken 3-up rather than a deliberate layout, so the second
   is dropped. Doing it here rather than in the template also covers a shop
   with three products where only two of them have a square rendition. */
.shoplist-mosaic a:only-child,
.shoplist-mosaic a:first-child:nth-last-child(2) {
	grid-column: 1 / -1;
	grid-row: 1 / -1;
}

.shoplist-mosaic a:first-child:nth-last-child(2) ~ a {
	display: none;
}

/* Shops with nothing for sale right now still appear; say so plainly rather
   than showing an empty frame. */
.shoplist-mosaic--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Repeat the ratio: the flex display drops the grid rows above, and
	   without this the card comes out shorter and the row goes ragged. */
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	font-family: Lato, Arial, sans-serif;
	font-size: 13px;
	color: var(--sl-muted);
	text-align: center;
	padding: 0 16px;
}

/* -------------------------------------------------------------- card body */

.shoplist-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px 14px;
	/* Fill the card so the count can sit on the baseline across a row, even
	   where a long shop name wraps to two lines. */
	flex: 1 1 auto;
}

.shoplist-name {
	font-family: Bitter, Georgia, serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.shoplist-name a {
	color: var(--sl-ink);
	text-decoration: none;
}

.shoplist-name a:hover {
	color: var(--sl-accent);
	text-decoration: none;
}

.shoplist-owner,
.shoplist-stock {
	font-family: Lato, Arial, sans-serif;
	font-size: 13px;
	color: var(--sl-muted);
	margin: 0;
}

.shoplist-owner a {
	color: var(--sl-muted);
	text-decoration: none;
	border-bottom: 1px solid var(--sl-hairline);
}

.shoplist-owner a:hover {
	color: var(--sl-accent);
	border-bottom-color: var(--sl-accent);
	text-decoration: none;
}

.shoplist-stock {
	margin-top: auto;
	padding-top: 6px;
	font-weight: 700;
	color: var(--sl-accent);
}

.shoplist-stock--none {
	color: var(--sl-muted);
	font-weight: 400;
}

/* -------------------------------------------------------------- empty page */

.shoplist-blank {
	padding: 40px 0;
	text-align: center;
	color: var(--sl-muted);
	font-family: Lato, Arial, sans-serif;
}

/* -------------------------------------------------------------- pagination
 *
 * The old markup printed every page number - 72 links at 50 shops a page.
 */

.shoplist-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 6px 0 30px;
	font-family: Lato, Arial, sans-serif;
	font-size: 14px;
}

.shoplist-pager a {
	padding: 7px 13px;
	border: 1px solid var(--sl-hairline);
	border-radius: 3px;
	color: var(--sl-ink);
	text-decoration: none;
	background: #fff;
}

.shoplist-pager a:hover {
	border-color: var(--sl-accent);
	color: var(--sl-accent);
	text-decoration: none;
}

.shoplist-pager a:focus-visible {
	outline: 2px solid var(--sl-accent);
	outline-offset: 1px;
}

.shoplist-pager .shoplist-pager-status {
	color: var(--sl-muted);
	padding: 0 4px;
}

@media (max-width: 480px) {
	.shoplist-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 14px;
	}

	.shoplist-body {
		padding: 10px 11px 12px;
	}

	.shoplist-name {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shoplist-card,
	.shoplist-mosaic img {
		transition: none;
	}

	.shoplist-card:hover {
		transform: none;
	}

	.shoplist-mosaic a:hover img {
		transform: none;
	}
}

/* ------------------------------------------------- autocomplete, this page
 *
 * epla-autocomplete.css lays a row out with a floated 34px avatar and a block
 * label, which balances in the header because a product row carries a second
 * line for the price. Shop rows are a single line, so the label rides high
 * against the circle. Flex instead, scoped here so the header is untouched.
 */

.shoplist-search .epla-ac-panel {
	left: 0;
	right: auto;
	min-width: 100%;
	max-width: 100%;
}

.shoplist-search .epla-ac-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
}

.shoplist-search .epla-ac-initial {
	float: none;
	margin-right: 0;
	flex: 0 0 34px;
}

.shoplist-search .epla-ac-label {
	/* min-width:0 lets the ellipsis work inside a flex row */
	min-width: 0;
	flex: 1 1 auto;
}

.shoplist-search .epla-ac-footer .epla-ac-row {
	gap: 0;
}