/* BetterChecked list entry card. Markup: theme-functions/bc-entry.php
   The screenshot strip above the card, the details line inside it (best promo code first, then the
   taxonomies, rolling from right to left, opening into the table) and the table the old inline
   styles used to dress. */

/* ==========================================================================
   Screenshots: on the white page, between the entry's paragraphs. The first one starts in
   line with the text (the inset is padding inside the scroller, so scrolled screenshots pass
   through it), the strip runs to the card's right edge.
   ========================================================================== */

.bc-shots {
	--bc-shots-inset: 40px;   /* the theme's content-horizontal-padding */
	margin: 0 0 22px;
}
.bc-shots__frame {
	position: relative;
}
.space-page-content ul.bc-shots__track,
ul.bc-shots__track {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0 0 6px var(--bc-shots-inset);
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--bc-shots-inset);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
ul.bc-shots__track::-webkit-scrollbar {
	display: none;
}
.space-page-content ul.bc-shots__track li.bc-shots__item,
li.bc-shots__item {
	flex: 0 0 calc((100% - 12px) / 1.8);   /* one whole screenshot and most of the next */
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}
li.bc-shots__item::before {
	content: none;
}
a.bc-shots__link {
	display: block;
	overflow: hidden;
	border: 0;
	border-radius: 10px;
	background: #eef0ee;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .16), 0 8px 20px -10px rgba(0, 0, 0, .28);
	transition: box-shadow .18s ease;
}
a.bc-shots__link:hover {
	box-shadow: 0 2px 5px rgba(0, 0, 0, .16), 0 12px 24px -10px rgba(0, 0, 0, .32);
}
a.bc-shots__link img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}
/* The arrows lie over the strip's edges; bc-entry.js hides the one that has nowhere to go. */
button.bc-shots__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 50%;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
	color: #1d2419;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color .15s ease, box-shadow .15s ease;
	-webkit-tap-highlight-color: transparent;
}
button.bc-shots__arrow[hidden] {
	display: none;
}
button.bc-shots__arrow:hover {
	background: #fff;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
	color: #1d2419;
}
button.bc-shots__arrow:focus-visible {
	outline: 2px solid #4a7c59 !important;   /* the theme switches outlines off */
	outline-offset: 2px !important;
}
button.bc-shots__arrow--prev {
	left: calc(var(--bc-shots-inset) + 10px);
}
button.bc-shots__arrow--prev .bc-icon {
	transform: rotate(180deg);
}
button.bc-shots__arrow--next {
	right: 10px;
}
@media (max-width: 600px) {
	.space-page-content ul.bc-shots__track li.bc-shots__item,
	li.bc-shots__item {
		flex-basis: 64%;   /* one and a half screenshots in view, a thumb does the scrolling */
	}
	button.bc-shots__arrow {
		display: none;
	}
}
@media (max-width: 572px) {
	.bc-shots {
		--bc-shots-inset: 20px;   /* the theme narrows the text inset here */
	}
}

/* ACES sizes .space-organizations-4-archive-item for its four-column grid, 50% between
   480 and 991px. The entry's title row and its card borrow the class as full-width blocks. */
.space-organizations-4-archive-item.box-100 {
	width: 100% !important;
}
/* Air between the card and the next entry's headline, which used to sit 10px under it. */
.space-organizations-4-archive-item.bc-entry {
	margin-bottom: 40px !important;
}

/* ==========================================================================
   Details inside the grey card
   ========================================================================== */

.bc-entry__rows {
	flex: 0 0 100%;   /* the card body is a wrapping flex row; without this the rolling line sets the width */
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	min-width: 0;
	padding: 2px 0 4px;
	box-sizing: border-box;
}
.bc-entry__key {
	flex: 0 0 auto;
	color: #888;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---- The rolling line ---- */

.bc-facts {
	display: block;
}
.bc-facts__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 40px;
	cursor: pointer;
}
.bc-facts:not(.is-collapsed) .bc-facts__bar {
	display: none;
}
.bc-facts__marquee {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 22px, #000 calc(100% - 22px), transparent);
}
.bc-facts__run {
	display: inline-flex;
	white-space: nowrap;
	will-change: transform;
	animation: bcTicker var(--bc-ticker-dur, 40s) linear infinite;
	animation-play-state: paused;
}
/* It rolls only while the card is on screen and nobody points at it (so the code can be clicked). */
.bc-facts.is-visible.is-collapsed .bc-facts__bar:not(:hover):not(:focus-within) .bc-facts__run {
	animation-play-state: running;
}
@keyframes bcTicker {
	to { transform: translateX(-50%); }
}
.bc-facts__seq {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-right: 4px;   /* the same distance between the two copies as between two chips */
}
.bc-facts__group {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.bc-facts__glabel {
	margin: 0 3px 0 12px;
	color: #999;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.bc-facts__seq .bc-facts__group:first-child .bc-facts__glabel {
	margin-left: 0;
}
.bc-facts button.bc-facts__toggle {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e4e4e4;
	box-shadow: none;
	color: #555;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.bc-facts button.bc-facts__toggle .bc-icon {
	transform: rotate(90deg);
}
.bc-facts__bar:hover button.bc-facts__toggle {
	background: #d8d8d8;
}
.bc-facts button.bc-facts__toggle:focus-visible {
	outline: 2px solid #4a7c59 !important;
	outline-offset: 2px !important;
}
.bc-facts__panel {
	padding: 0 0 6px;
	outline: none;
}
.bc-facts__panel[hidden] {
	display: none !important;   /* the theme sets div { display: block } */
}

/* ---- The table (as the old inline styles had it) ---- */

.bc-details-table tr          { border-bottom: none !important; }
.bc-details-table tr th       { padding: 5px 4px 2px !important; }
.bc-details-table tbody tr td { padding: 0 4px 5px !important; }
.bc-details-table {
	width: 100%;
	margin: 0 !important;   /* the theme gives tables in the content a margin */
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 12px;
}
.bc-details-table th {
	width: 50%;
	color: #888;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}
.bc-details-table td {
	max-width: 0;
	overflow: hidden;
	vertical-align: top;
}
.bc-details-table td button.bc-code__copy {
	max-width: 100%;
	margin-top: 2px;
}
.bc-chip-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 3px;
	padding-top: 2px;
}
.fact-chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 999px;
	background: #e8e8e8;
	color: #444;
	font-size: 11px;
	line-height: 20px;
	white-space: nowrap;
}
.bc-chip-logo {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
}
.bc-chip-logo img {
	display: block;
	width: auto;
	height: 20px;
	margin: 0;
}

/* ==========================================================================
   Phones
   ========================================================================== */

@media (max-width: 600px) {
	.bc-facts__bar {
		flex-wrap: wrap;
		gap: 6px 10px;
		padding: 4px 0;
	}
	.bc-facts__marquee {
		flex-basis: 100%;
		order: 3;
	}
	.bc-facts button.bc-facts__toggle {
		margin-left: auto;
	}
	.bc-details-table,
	.bc-details-table tbody,
	.bc-details-table tr,
	.bc-details-table th,
	.bc-details-table td {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		overflow: visible !important;
	}
	.bc-details-hrow {
		display: none !important;
	}
	.bc-details-table td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		color: #888;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
	}
	.bc-details-table td:empty {
		display: none;
	}
	.bc-details-table td button.bc-code__copy {
		width: 100%;
		margin: 2px 0 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bc-facts__run {
		animation: none;
	}
}