/* The website list's slices (inc/sites-render.php). Only the LBS Foundation theme's design tokens
   (--lbs-*): no colour or size of its own. Two classes in rules that set a heading's look, so that
   Elementor's kit (".elementor-kit-N h3", one class and an element) cannot override them. */

.lbs-sites { display: grid; gap: var(--lbs-space-5); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) { .lbs-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
	.lbs-sites--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lbs-sites--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lbs-sites > .lbs-site { position: relative; margin: 0; min-width: 0; }

/* The whole item is one link: the name's link stretches over it, and its focus ring is drawn around it. */
.lbs-site .lbs-site__name { margin: 0; }
.lbs-site .lbs-site__name a { color: inherit; text-decoration: none; }
.lbs-site .lbs-site__name a::before { content: ''; position: absolute; inset: 0; }
.lbs-site .lbs-site__name a:focus-visible { outline: none; }
.lbs-site .lbs-site__name a:focus-visible::before { outline: var(--lbs-focus-ring) solid var(--lbs-focus); outline-offset: 2px; }
.lbs-site:hover .lbs-site__name a { color: var(--lbs-red); }
.lbs-site .lbs-site__line { margin: 0; color: var(--lbs-muted); font-size: var(--lbs-fs-xs); line-height: 1.45; }

/* Short list: a small square icon beside the name and its line, hairlines above. */
.lbs-sites--short { row-gap: var(--lbs-space-4); }
.lbs-sites--short > .lbs-site {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	column-gap: var(--lbs-space-3);
	row-gap: var(--lbs-space-1);
	align-content: start;
	padding-top: var(--lbs-space-3);
	border-top: 1px solid var(--lbs-border);
}
.lbs-sites--short > .lbs-site--no-icon { grid-template-columns: minmax(0, 1fr); }
.lbs-sites--short .lbs-site__icon { grid-row: span 2; display: block; width: 2.5rem; height: 2.5rem; object-fit: contain; }
.lbs-sites--short .lbs-site__name { font-size: var(--lbs-fs-sm); font-weight: 700; line-height: var(--lbs-lh-heading); }

/* Cards: the logo whole in a box of fixed height (wide wordmarks and square marks alike), then the name
   with an arrow, as on LBS link cards, and its line. */
.lbs-sites--cards > .lbs-site {
	display: flex;
	flex-direction: column;
	gap: var(--lbs-space-2);
	padding: var(--lbs-space-5);
	background: var(--lbs-white);
	border: 1px solid var(--lbs-border-soft);
	transition: border-color var(--lbs-transition);
}
.lbs-sites--cards > .lbs-site:is(:hover, :focus-within) { border-color: var(--lbs-red); }
.lbs-site .lbs-site__logo { display: flex; align-items: center; height: 4rem; margin-bottom: var(--lbs-space-2); }
.lbs-site .lbs-site__logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.lbs-site .lbs-site__logo--icon img { width: 3rem; height: 3rem; }
.lbs-sites--cards .lbs-site__name { font-size: var(--lbs-fs-lg); line-height: var(--lbs-lh-heading); }
.lbs-sites--cards .lbs-site__name a::after { content: '\00a0\2192'; content: '\00a0\2192' / ''; color: var(--lbs-red); }

/* List: one row each, the name (with an arrow for "another website") and the address over the line; from
   768px the line beside them. Hairlines between rows; the row is the link. */
.lbs-sites.lbs-sites--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.lbs-sites--list > .lbs-site {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lbs-space-2) var(--lbs-space-7);
	padding: var(--lbs-space-4) 0;
	border-bottom: 1px solid var(--lbs-border);
}
@media (min-width: 768px) { .lbs-sites--list > .lbs-site { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.lbs-sites--list .lbs-site__name { font-size: var(--lbs-fs-lg); line-height: var(--lbs-lh-heading); }
.lbs-sites--list .lbs-site__out { width: 0.75em; height: 0.75em; stroke: var(--lbs-red); vertical-align: baseline; }
.lbs-sites--list .lbs-site__host { margin: var(--lbs-space-1) 0 0; color: var(--lbs-muted); font-size: var(--lbs-fs-xs); line-height: var(--lbs-lh-tight); overflow-wrap: anywhere; }
.lbs-sites--list .lbs-site__line { max-width: var(--lbs-content); color: var(--lbs-text); font-size: var(--lbs-fs-md); line-height: var(--lbs-lh-body); }

/* Directory: every group under its heading, its count at the other end, a heavier rule below. */
.lbs-sites-group + .lbs-sites-group { margin-top: var(--lbs-space-8); }
.lbs-sites-group__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--lbs-space-2) var(--lbs-space-5);
	padding-bottom: var(--lbs-space-3);
	border-bottom: 2px solid var(--lbs-text);
}
.lbs-sites-group .lbs-sites-group__heading { margin: 0; }
.lbs-sites-group .lbs-sites-group__count { margin: 0; color: var(--lbs-muted); font-size: var(--lbs-fs-sm); }

.lbs-sites-slice .lbs-see-more-wrap { margin: var(--lbs-space-5) 0 0; }