/* dr-apps-widget - Cross-promotion app carousel */

.dr-apps-widget {
	--dr-apps-icon-radius: 22.37%;

	container-type: inline-size;
	position: relative;
	padding: 0 44px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Scroll container */
.dr-apps-scroll {
	display: flex;
	align-items: stretch;
	gap: 16px;
	overflow: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
}

/* Slide — full width in 1-up, centers the card */
.dr-apps-slide {
	flex: 0 0 100%;
	display: flex;
	justify-content: center;
	scroll-snap-align: start;
}

/* App card — fixed 400px width, shrinks only on tiny screens */
.dr-apps-card {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	flex: 0 0 400px;
	max-width: 100%;
	padding: 16px;
	background-color: var(--bs-secondary-bg);
	border-radius: 16px;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s ease;
}

.dr-apps-card:hover {
	opacity: 0.75;
	text-decoration: none;
	color: inherit;
}

/* App icon */
.dr-apps-card-icon {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: var(--dr-apps-icon-radius);
	overflow: hidden;
	margin-right: 14px;
}

.dr-apps-card-icon img {
	width: 100%;
	height: 100%;
	display: block;
}

/* App info */
.dr-apps-card-info {
	flex: 1;
	min-width: 0;
}

.dr-apps-card-title {
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0 0 2px;
	color: var(--bs-body-color);
	line-height: 1.3;
}

.dr-apps-card-description {
	font-size: 1rem;
	color: var(--bs-secondary-color);
	margin: 0;
	line-height: 1.4;
}

/* Navigation arrows */
.dr-apps-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: var(--bs-tertiary-bg);
	color: var(--bs-body-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease, background-color 0.15s ease;
	z-index: 2;
	padding: 0;
}

.dr-apps-nav:hover {
	background: var(--bs-secondary-bg);
}

.dr-apps-nav svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* 1-up: anchored near the centered 400px card (halfCard + gap + arrowWidth = 244px) */
.dr-apps-nav--left {
	left: max(0px, calc(50% - 244px));
}

.dr-apps-nav--right {
	right: max(0px, calc(50% - 244px));
}

.dr-apps-nav[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* Two cards side by side when container fits 2 x 400px + 16px gap */
@container (min-width: 816px) {
	.dr-apps-slide {
		flex: 0 0 calc(50% - 8px);
	}
	.dr-apps-slide:only-child {
		flex-basis: 100%;
	}
	.dr-apps-slide:not(:only-child) > .dr-apps-card {
		flex-basis: 100%;
	}
	.dr-apps-nav--left {
		left: 0;
	}
	.dr-apps-nav--right {
		right: 0;
	}
}