/* ==========================================================================
   GrowthStudioz, "Backed by"

   A tracked label over a row of partner logos (Adarsh, 1st October 2026,
   Performance Marketing).

   Off the Figma inspector:
     desktop  label: DM Sans 400, 22.64px, line height 115%, 37% tracking,
              uppercase, #545454, centred; 30.19 to the logos
              logos: one centred row, every logo 60.38 tall, 64 apart
              (107.55 / 232.08 / 181.13 / 107.55 / 179.25 / 181.13 wide)
     phone    322 wide, 35 from each edge; label 12px on the left, 16 to the
              logos; logos 32 tall, three to a row, the row spread edge to
              edge, 12 between rows; 32 to the band above and below

   A logo is sized by its HEIGHT and takes whatever width its own shape gives
   it. The desktop widths above are exactly the phone ones times 1.887, the
   same as 60.38 over 32, so one height per breakpoint reproduces all twelve.
   ========================================================================== */

.gs-backed {
	padding-block: var(--gs-section-pad);
}

/* The page carries the band twice, one copy per width (see inc/backed.php). */
@media (max-width: 767px) {
	.gs-backed--desktop { display: none; }
}

@media (min-width: 768px) {
	.gs-backed--phone { display: none; }
}

/* The row is measured against this box, so the logos can scale with it. */
.gs-backed__inner {
	container-type: inline-size;
}

.gs-backed__label {
	margin: 0 0 1.886875rem;               /* 30.19px */
	max-width: none;
	color: #545454;
	font-size: 1.415rem;                   /* 22.64px */
	font-weight: var(--gs-weight-regular);
	line-height: 1.15;
	letter-spacing: 0.37em;
	text-align: center;
	text-transform: uppercase;
	/* Tracking is added after every character including the last, which
	   pushes a centred label off-centre by that much. Taken back. */
	margin-inline-end: -0.37em;
}

.gs-backed__list {
	/* One unit: 1px at the design's width, less once the row (about 1300px of
	   logos and gaps) no longer fits, so the six stay on one line and shrink
	   together instead of wrapping one logo onto a row of its own. */
	--gs-bk-u: min(1px, 100cqw / 1300);

	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(64 * var(--gs-bk-u));
	margin: 0;
	padding: 0;
	list-style: none;
}

.gs-backed__item {
	flex: none;
	max-width: none;
}

.gs-backed__logo {
	display: block;
	width: auto;
	height: calc(60.38 * var(--gs-bk-u));
	max-width: none;
}

/* --- empty (editors only) ------------------------------------------------- */

.gs-backed--empty {
	display: grid;
	place-items: center;
	min-height: 160px;
	padding: var(--gs-space-6);
	border: 1px dashed var(--gs-border);
	background: var(--gs-surface-alt);
	color: var(--gs-body);
}

.gs-backed--empty p {
	margin: 0;
	max-width: none;
}

/* --- phone ---------------------------------------------------------------- */

@media (max-width: 767px) {
	/* 32 to the band above and below, where the site's phone gap is 45: each
	   neighbour brings its own 22.5, so this band brings the 9.5 that makes
	   up the difference. */
	.gs-backed {
		padding-block: calc(2rem - var(--gs-section-pad));
	}

	/* 35 from each edge of the screen: the page's own gutter plus this. */
	.gs-backed__inner {
		padding-inline: calc(2.1875rem - var(--gs-gutter-now));
	}

	.gs-backed__label {
		margin: 0 0 1rem;                  /* 16px */
		font-size: 0.75rem;                /* 12px */
		text-align: start;
	}

	/* Three to a row. The columns are as wide as their widest logo and the
	   row is spread edge to edge; a narrower logo sits in the middle of its
	   column, which is where the frame has Meta under Shopify. */
	.gs-backed__list {
		display: grid;
		grid-template-columns: repeat(3, auto);
		justify-content: space-between;
		justify-items: center;
		gap: 0.75rem 0;                    /* 12px between rows */
	}

	/* The first of each row starts at the edge, as the frame's do. */
	.gs-backed__item:nth-child(3n + 1) {
		justify-self: start;
	}

	.gs-backed__item:nth-child(3n) {
		justify-self: end;
	}

	.gs-backed__logo {
		height: 2rem;                      /* 32px */
	}
}