/* AS Description Builder — desktop (media attribute: desktop breakpoint and up). */

.asdb {
	--asdb-pad: 48px;
	--asdb-head-gap: 32px;
}

/* Hero: copy beside the picture */
.asdb-hero {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 56px;
}
.asdb-hero.is-text-only {
	grid-template-columns: minmax(0, 820px);
}
.asdb-hero__media {
	order: 0;
	aspect-ratio: 5 / 4;
}
.asdb-hero.is-media-left .asdb-hero__media {
	order: -1;
}
.asdb .asdb-hero__title {
	font-size: 38px;
	line-height: 46px;
}
.asdb-hero__lead {
	margin-top: 16px !important;
	font-size: 17px;
	line-height: 28px;
}
.asdb-hero .asdb-actions {
	margin-top: 28px;
}

/* Key figures */
.asdb-stats {
	grid-template-columns: repeat(min(var(--asdb-n, 4), 6), minmax(0, 1fr));
}
.asdb-stat {
	padding: 24px 28px;
}
.asdb-stat__value {
	font-size: 30px;
	line-height: 36px;
}

/* Feature grid */
.asdb-grid {
	grid-template-columns: repeat(var(--asdb-cols, 3), minmax(0, 1fr));
}
.asdb-cards:is(.is-plain, .is-numbered) {
	column-gap: 40px;
}
.asdb-cards.is-numbered .asdb-card__num {
	font-size: 14px;
}

/* Steps: tabs beside the active step */
.asdb-steps.is-tabs {
	display: grid;
	grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr);
	align-items: start;
	gap: 16px 48px;
}
.asdb-steps.is-tabs .asdb-steps__tabs {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.asdb .asdb-steps__tab {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 10px 16px;
	border: 0;
	border-radius: var(--asdb-r);
	background: transparent;
	color: var(--asdb-muted);
	font-size: 15px;
	font-weight: 500;
	line-height: 22px;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.asdb .asdb-steps__tab:hover {
	color: var(--asdb-ink);
}
.asdb .asdb-steps__tab[aria-selected="true"] {
	background: var(--asdb-card);
	color: var(--asdb-ink);
	font-weight: 600;
}
.asdb-surface--plain .asdb-steps__tab[aria-selected="true"] {
	background: var(--asdb-soft);
}
.asdb-steps__tabnum {
	flex: none;
	font-family: var(--asdb-mono);
	font-size: 12px;
	font-weight: 500;
	opacity: 0.8;
}
.asdb-steps.is-tabs .asdb-step {
	display: block;
	min-height: 100%;
	padding: 4px 0 0;
}
.asdb-steps.is-tabs .asdb-step::before {
	display: none;
}
.asdb-steps.is-tabs .asdb-step[hidden] {
	display: none;
}
.asdb-steps.is-tabs .asdb-step__num {
	display: block;
	width: auto;
	height: auto;
	margin-bottom: 8px;
	border: 0;
	background: none;
	color: var(--asdb-muted);
	font-size: 14px;
}
.asdb-steps.is-tabs .asdb-step__title {
	padding: 0;
	font-size: 22px;
	line-height: 30px;
}
.asdb-steps.is-tabs .asdb-step__text {
	margin-top: 8px;
	font-size: 15px;
	line-height: 25px;
}
.asdb-step__pager {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}
.asdb-step__count {
	margin-left: auto;
	color: var(--asdb-muted);
	font-family: var(--asdb-mono);
	font-size: 13px;
}
.asdb-steps.is-tabs .asdb-steps__notes {
	grid-column: 2;
	margin-top: 8px;
}
.asdb-steps.is-timeline .asdb-steps__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 48px;
}
.asdb-steps.is-cards .asdb-steps__list {
	grid-template-columns: repeat(min(4, var(--asdb-steps, 4)), minmax(0, 1fr));
}

/* Specifications */
.asdb-specs.is-cols-2 .asdb-specs__rows {
	column-gap: 64px;
}

/* Downloads: files and the help card side by side */
.asdb-downloads {
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: 20px;
}
.asdb-file {
	grid-template-columns: 128px minmax(0, 1fr);
	gap: 24px;
	padding: 24px;
}
.asdb-help {
	padding: 28px;
}

/* In the box */
.asdb-package.has-media {
	gap: 56px;
}
.asdb-package.has-media .asdb-package__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.asdb-package:not(.has-media) .asdb-package__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* FAQ: heading on the left */
.asdb-faq.is-split {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	align-items: start;
	gap: 48px;
}
.asdb-faq.is-split .asdb-head {
	position: sticky;
	top: 120px;
	margin-bottom: 0;
}

/* Image & text */
.asdb-split {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 56px;
}
.asdb-split.is-media-right {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

/* Video with a playlist */
.asdb-video.has-list {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
	align-items: start;
	gap: 24px;
}
.asdb-video.has-list .asdb-video__list {
	flex-direction: column;
	gap: 4px;
	max-height: calc((100vw - 2 * var(--asdb-gutter)) * 0.6667 * 0.5625);
	margin: 0 !important;
	overflow-y: auto;
}
.asdb-video.has-list .asdb-video__list > li {
	flex: none;
}
.asdb-video.has-list .asdb-video__item {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: var(--asdb-r);
}
.asdb-video.has-list .asdb-video__item:hover,
.asdb-video.has-list .asdb-video__item[aria-current="true"] {
	background: var(--asdb-soft);
}
.asdb-video.has-list .asdb-video__thumb {
	flex: 0 0 128px;
}
.asdb-video.has-list .asdb-video__name {
	font-size: 14px;
	line-height: 20px;
}
.asdb-video:not(.has-list) .asdb-video__stage {
	max-width: 960px;
}

/* Highlights in one divided row */
.asdb-highlights.is-row {
	grid-template-columns: repeat(min(var(--asdb-n, 4), 4), minmax(0, 1fr));
	gap: 0;
}
.asdb-highlights.is-row .asdb-highlight {
	padding: 4px 24px;
	border-bottom: 0;
	border-left: 1px solid var(--asdb-line);
}
.asdb-highlights.is-row .asdb-highlight:nth-child(4n + 1) {
	padding-left: 0;
	border-left: 0;
}
.asdb-highlights.is-row .asdb-highlight:nth-child(n + 5) {
	margin-top: 24px;
}

/* Gallery */
.asdb-gallery__list {
	grid-template-columns: repeat(var(--asdb-cols, 3), minmax(0, 1fr));
	gap: 20px;
}
.asdb-gallery.is-rail .asdb-gallery__list {
	gap: 20px;
}
.asdb-gallery.is-rail .asdb-shot {
	flex-basis: calc((100% - (var(--asdb-cols, 3) - 1) * 20px) / var(--asdb-cols, 3));
}

/* Banner */
.asdb .asdb-banner__title {
	font-size: 30px;
	line-height: 38px;
}
.asdb-banner__media img {
	max-height: 260px;
}

/* Promo cards */
.asdb-tiles {
	grid-template-columns: repeat(var(--asdb-n, 3), minmax(0, 1fr));
	gap: 20px;
}
.asdb-tile {
	min-height: 220px;
	padding: 28px;
}

/* Products */
.asdb .asdb-products__row > ul {
	grid-auto-columns: calc((100% - 4 * 16px) / 5);
	gap: 16px;
}

/* Compatibility */
.asdb-compat {
	grid-template-columns: repeat(var(--asdb-n, 3), minmax(0, 1fr));
	gap: 20px;
}
.asdb-compat__group {
	padding: 24px;
}