/* The add-on's card rules (CardDesign): the featured card and its badge,
 * the Scrolling row and the Overlapping layouts. Over the free plugin's
 * card rules; the list carries the settings as data attributes. */

/* ---- The featured card ---- */
.cpbc-kind-grid[data-lift="small"] { --cpbc-cards-lift: 8px; --cpbc-cards-grow: 1.025; }
.cpbc-kind-grid,
.cpbc-kind-grid[data-lift="medium"] { --cpbc-cards-lift: 16px; --cpbc-cards-grow: 1.05; }
.cpbc-kind-grid[data-lift="large"] { --cpbc-cards-lift: 26px; --cpbc-cards-grow: 1.08; }

.cpbc-kind-grid[data-layout="rows"][data-featured="raised"]:has(.cpbc-kind-card--featured) {
	padding-top: var(--cpbc-cards-lift);
}
.cpbc-kind-grid[data-layout="rows"][data-featured="larger"]:has(.cpbc-kind-card--featured) {
	padding-block: 12px;
}
.cpbc-kind-grid[data-layout="rows"][data-featured="raised"] .cpbc-kind-card--featured {
	transform: translateY(calc(var(--cpbc-cards-lift) * -1));
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
}
.cpbc-kind-grid[data-layout="rows"][data-featured="larger"] .cpbc-kind-cell:has(> .cpbc-kind-card--featured) {
	position: relative;
	z-index: 1;
}
.cpbc-kind-grid[data-layout="rows"][data-featured="larger"] .cpbc-kind-card--featured {
	transform: scale(var(--cpbc-cards-grow));
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
/* One row that swipes on a phone: the featured card stays in line. */
@container (max-width: 599px) {
	.cpbc-kind-grid[data-phone="swipe"] .cpbc-kind-card--featured {
		transform: none;
	}
	.cpbc-kind-grid[data-layout="rows"][data-phone="swipe"]:has(.cpbc-kind-card--featured) {
		padding-top: 0;
	}
}

/* The badge words: a strip across the top, or in a corner over a photo
   beside or behind the text. The Text on Cards pair, turned round. */
.cpbc-kind-card-ribbon {
	padding: 6px 10px;
	background: var(--cpbc-text, #2e2a26);
	color: var(--cpbc-surface, #fff);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}
.cpbc-kind-grid[data-frame="thick"] .cpbc-kind-card-ribbon {
	margin-bottom: 8px;
	border-radius: calc(var(--cpbc-radius-card, 12px) * 0.6);
}
.cpbc-kind-card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--cpbc-text, #2e2a26);
	color: var(--cpbc-surface, #fff);
	font-size: 12px;
	font-weight: 700;
}

/* ---- Scrolling row and Overlapping: one card in focus ---- */
.cpbc-cards-stage {
	position: relative;
	min-width: 0;
}
.cpbc-cards-nav {
	position: absolute;
	top: 50%;
	z-index: 300;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--cpbc-border, #e2dcd2);
	border-radius: 50%;
	background: var(--cpbc-surface, #fff);
	color: var(--cpbc-text, #2e2a26);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transform: translateY(-50%);
}
.cpbc-cards-nav[hidden] {
	display: none;
}
.cpbc-cards-nav:disabled {
	opacity: 0.35;
	cursor: default;
}
.cpbc-cards-nav:focus-visible {
	outline: 2px solid var(--cpbc-accent, #a85530);
	outline-offset: 2px;
}
.cpbc-cards-nav--prev {
	left: -8px;
}
.cpbc-cards-nav--next {
	right: -8px;
}

/* Scrolling row: one row on every screen, the centred card in focus. */
.cpbc-kind-grid[data-layout="row"] {
	display: flex;
	gap: var(--cpbc-cards-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 26px 0 20px;
	scrollbar-width: thin;
}
/* Room either side so the first and the last card can sit in the centre. */
.cpbc-kind-grid[data-layout="row"]::before,
.cpbc-kind-grid[data-layout="row"]::after {
	content: "";
	flex: 0 0 max(0px, calc((100% - var(--cpbc-cards-w, 300px)) / 2 - var(--cpbc-cards-gap)));
}
.cpbc-kind-grid[data-layout="row"] > .cpbc-kind-cell {
	flex: 0 0 var(--cpbc-cards-w, 300px);
	scroll-snap-align: center;
}
.cpbc-kind-grid[data-layout="row"] > .cpbc-kind-cell > .cpbc-kind-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cpbc-kind-grid[data-layout="row"][data-focus="larger"] > .cpbc-kind-cell > .cpbc-kind-card {
	transform: scale(0.93);
}
.cpbc-kind-grid[data-layout="row"][data-focus="larger"] > .cpbc-kind-cell.is-focus > .cpbc-kind-card {
	transform: scale(1.04);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}
.cpbc-kind-grid[data-layout="row"] > .cpbc-kind-cell.is-focus {
	position: relative;
	z-index: 1;
}

/* Overlapping: the card in focus in the centre at full size, the others
   fanned out on both sides and under the ones nearer the centre. The
   script places each card. */
.cpbc-kind-grid[data-layout="deck"] {
	display: block;
	position: relative;
	min-height: 200px;
	padding: 0;
	overflow: hidden;
}
.cpbc-kind-grid[data-layout="deck"] > .cpbc-kind-cell {
	position: absolute;
	top: 16px;
	left: 0;
	width: var(--cpbc-cards-w, 300px);
	transform-origin: center center;
	transition: transform 0.3s ease;
}
.cpbc-kind-grid[data-layout="deck"] > .cpbc-kind-cell:not(.is-focus) {
	cursor: pointer;
}
.cpbc-kind-grid[data-layout="deck"] > .cpbc-kind-cell > .cpbc-kind-card {
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.cpbc-kind-grid[data-layout="deck"] > .cpbc-kind-cell.is-focus > .cpbc-kind-card {
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
}
/* In these layouts the featured card is the one they open on, not a raised one. */
.cpbc-kind-grid:is([data-layout="row"], [data-layout="deck"]) .cpbc-kind-card--featured {
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.cpbc-kind-grid[data-layout="row"] > .cpbc-kind-cell > .cpbc-kind-card,
	.cpbc-kind-grid[data-layout="deck"] > .cpbc-kind-cell {
		transition: none;
	}
}