/**
 * Framebrand Add-Ons Table widget styles.
 *
 * Defaults are the Figma values ("Hero" node 2086:36820):
 * 1920 x 1682 section, 80/56/120 padding, 80px below the heading, groups 40px
 * apart, a 63.44% item column plus two equal columns, #8069F0 header rows and
 * 56px white item rows.
 */

.fb-addons {
	--fb-ad-bg: #ffffff;
	--fb-ad-pad: 80px 56px 120px;
	--fb-ad-head-gap: 80px;
	--fb-ad-head-stack: 40px;
	--fb-ad-group-gap: 40px;
	--fb-ad-label-w: 63.44%;

	--fb-ad-title-color: #161616;
	--fb-ad-title-max-w: 768px;
	--fb-ad-title-trim: trim-both;
	--fb-ad-desc-color: #161616;
	--fb-ad-desc-max-w: 1342px;

	--fb-ad-head-bg: #8069f0;
	--fb-ad-head-color: #ffffff;
	--fb-ad-head-border: #eeeeee;
	--fb-ad-head-pad: 16px;

	--fb-ad-row-bg: #ffffff;
	--fb-ad-row-color: #161616;
	--fb-ad-row-h: 56px;
	--fb-ad-row-pad: 8px 16px;
	--fb-ad-row-divider: transparent;

	--fb-ad-tag-bg: rgba(249, 244, 255, 0.8);
	--fb-ad-tag-color: #260d40;
	--fb-ad-tag-pad: 8px 14px;
	--fb-ad-tag-radius: 4px;
	--fb-ad-tag-gap: 8px;

	/* This site's <body> is 24px/36px/0.48px; isolate so nothing inherits it. */
	font-size: 16px;
	line-height: normal;
	letter-spacing: normal;

	background: var(--fb-ad-bg);
	padding: var(--fb-ad-pad);
	box-sizing: border-box;
	width: 100%;
}

.fb-addons *,
.fb-addons *::before,
.fb-addons *::after {
	box-sizing: border-box;
}

/* --- Heading ------------------------------------------------------------- */

.fb-addons__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fb-ad-head-stack);
	text-align: center;
	margin-bottom: var(--fb-ad-head-gap);
}

.fb-addons .fb-addons__title {
	margin: 0;
	padding: 0;
	max-width: var(--fb-ad-title-max-w);
	color: var(--fb-ad-title-color);
	/* Matches the design's trimmed text box: cap-top to baseline, no leading. */
	text-box-trim: var(--fb-ad-title-trim);
	text-box-edge: cap alphabetic;
}

.fb-addons p.fb-addons__desc {
	margin: 0;
	padding: 0;
	max-width: var(--fb-ad-desc-max-w);
	color: var(--fb-ad-desc-color);
}

/* --- Groups -------------------------------------------------------------- */

.fb-addons__groups {
	display: flex;
	flex-direction: column;
	gap: var(--fb-ad-group-gap);
}

.fb-addons__scroll {
	width: 100%;
	overflow-x: auto;
}

.fb-addons__grid {
	display: grid;
	grid-template-columns: var(--fb-ad-label-w) 1fr 1fr;
	min-width: 100%;
}

.fb-addons__row {
	display: contents;
}

.fb-addons__cell {
	display: flex;
	align-items: center;
	gap: var(--fb-ad-tag-gap);
	min-height: var(--fb-ad-row-h);
	padding: var(--fb-ad-row-pad);
	background: var(--fb-ad-row-bg);
	color: var(--fb-ad-row-color);
	box-shadow: inset 0 -1px 0 var(--fb-ad-row-divider);
}

/* --- Header row ---------------------------------------------------------- */

.fb-addons__row--head .fb-addons__cell {
	min-height: 42px;
	padding: var(--fb-ad-head-pad);
	background: var(--fb-ad-head-bg);
	color: var(--fb-ad-head-color);
	box-shadow: inset 0 -1px 0 var(--fb-ad-head-border);
}

.fb-addons__col-title,
.fb-addons__col-spots,
.fb-addons__col-cost {
	color: var(--fb-ad-head-color);
	white-space: nowrap;
}

/* --- Item rows ----------------------------------------------------------- */

.fb-addons__label,
.fb-addons__spots,
.fb-addons__cost {
	color: var(--fb-ad-row-color);
	min-width: 0;
	overflow-wrap: break-word;
}

.fb-addons__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: var(--fb-ad-tag-pad);
	border-radius: var(--fb-ad-tag-radius);
	background: var(--fb-ad-tag-bg);
	color: var(--fb-ad-tag-color);
	white-space: nowrap;
}

/* --- Below 1024px -------------------------------------------------------- */

@media (max-width: 1024px) {
	.fb-addons__grid {
		grid-template-columns: minmax(320px, var(--fb-ad-label-w)) minmax(120px, 1fr) minmax(120px, 1fr);
	}
}

@media (max-width: 767px) {
	.fb-addons__grid {
		grid-template-columns: minmax(240px, 60%) minmax(96px, 1fr) minmax(110px, 1fr);
	}

	.fb-addons__cell {
		padding: 10px 12px;
	}

	.fb-addons__row--head .fb-addons__cell {
		padding: 12px;
	}

	/* Let a long item wrap instead of forcing the row wider. */
	.fb-addons__cell--label {
		flex-wrap: wrap;
		gap: 6px;
	}
}