/* ==========================================================================
   GrowthStudioz, questions band ("You Might Wonder...")

   Straight off the Figma inspector (Adarsh, 25th September 2026).

   Desktop:
     heading  DM Sans 600, 64px, tracking -3.02px, #0E0E0E, centred
     chips    #FFFFFF, radius 8, padding 10, shadows 0 4 20 #000 5% and
              0 1 0.8 #000 59%; text DM Sans 400, 20px, #000000
     beam     447 x 41 triangle, point down, #FFFFFF to #F80000
     button   the beam's width, directly under it
   Phone:
     heading  32px, tracking -1.5px, left
     chips    one per row, each as wide as its text, 8px apart; text 14px
     beam     the column's width x 41, red as on desktop (Adarsh)

   Line height: the inspector says 100%, but every text box it measures is
   1.3x its size (64 -> 83, 20 -> 26, 14 -> 18), which is DM Sans's own line
   height. 1.3 here, so the chips come out at the design's 46 and 38 and the
   inspector's gaps, measured between those boxes, apply as given.
   ========================================================================== */

.gs-questions {
	/* Every desktop/phone difference is one of these, so the phone block
	   below only ever changes dials, never rules. */
	--gs-q-title: 4rem;                    /* 64px */
	--gs-q-track: -0.0472em;               /* -3.02px at 64 */
	--gs-q-text: var(--gs-b2);             /* 20px */
	--gs-q-gap: var(--gs-space-4);         /* 16px between chips */
	--gs-q-beam-above: var(--gs-space-5);  /* 24px, chips to beam */
	--gs-q-beam-below: var(--gs-space-3);  /* 12px, beam to button */
	--gs-q-width: 27.9375rem;              /* 447px, beam and button */

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

/* --- heading -------------------------------------------------------------- */

/* The 25px to the first chip sits on the heading, not the list, so a band
   whose heading is left empty has no stray space above the chips. */
.gs-questions__title {
	margin: 0 0 1.5625rem;
	max-width: none;
	color: #0E0E0E;
	font-size: var(--gs-q-title);
	line-height: 1.3;
	letter-spacing: var(--gs-q-track);
	text-align: center;
}

/* --- the questions -------------------------------------------------------- */

/*
 * Wrapped and centred rather than set in fixed rows, so a page with other
 * questions still lays out. The cap is what gives the design its 2, 2, 1:
 * the mockup's second row (946px) fits inside it and no three chips do.
 */
.gs-questions__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--gs-q-gap);
	max-width: 62rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* Plain text, not links (Adarsh): no hover, no pointer, nothing that offers
   a click the chip would not answer. */
.gs-questions__item {
	max-width: 100%;
	margin: 0;
	padding: 0.625rem;                     /* 10px */
	border-radius: var(--gs-radius);       /* 8px */
	background: var(--gs-white);
	box-shadow:
		0 4px 20px rgb(0 0 0 / 0.05),
		0 1px 0.8px rgb(0 0 0 / 0.59);
	color: var(--gs-black);
	font-size: var(--gs-q-text);
	font-weight: var(--gs-weight-regular);
	line-height: 1.3;
	text-align: start;
}

/* --- the beam and the button ---------------------------------------------- */

.gs-questions__action {
	display: flex;
	flex-direction: column;
	gap: var(--gs-q-beam-below);
	width: min(100%, var(--gs-q-width));
	margin: var(--gs-q-beam-above) auto 0;
}

/*
 * Figma's triangle, drawn the way Figma draws one: its corners sit on an
 * ellipse inside the 41px frame, so the flat edge is a quarter of the way
 * down and 86.6% of the frame's width, and the point touches the bottom.
 * Copying that keeps every gap the inspector measured to the FRAME.
 *
 * The gradient runs white to a 28% wash of #F80000, which is what the
 * mockup actually paints at the point (sampled from the frame) rather than
 * full red, which would read as an alert rather than a glow. The tint starts
 * 46% of the way down, not at the flat edge: the mockup keeps the top of the
 * triangle white, so its pink wedge is about 250px across, not the full 387.
 */
.gs-questions__beam {
	display: block;
	height: 2.5625rem;                     /* 41px */
	clip-path: polygon(6.7% 25%, 93.3% 25%, 50% 100%);
	background: linear-gradient(to bottom, #FFFFFF 46%, rgb(248 0 0 / 0.28));
}

.gs-questions__btn {
	width: 100%;
	/* The wide tracking in the mockup, measured off both frames: 0.2em at
	   20px and at 16px. */
	letter-spacing: 0.2em;
	/* The design leaves 11px of clear space between the "l" and the arrow.
	   Three things add to the gap on their way there: the tracking after the
	   last letter (0.2em), the "l"'s own side bearing, and the empty inset
	   inside the Lucide icon before its stroke starts (7 of 24 units). Taken
	   back off the gap together, in em so it holds at 20px and 16px. */
	gap: calc(var(--gs-space-3) - 0.55em);
}

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

.gs-questions--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-questions--empty p {
	margin: 0;
	max-width: none;
}

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

@media (max-width: 767px) {
	.gs-questions {
		--gs-q-title: 2rem;                    /* 32px */
		--gs-q-track: -0.0469em;               /* -1.5px at 32 */
		--gs-q-text: var(--gs-b4);             /* 14px */
		--gs-q-gap: var(--gs-space-2);         /* 8px */
		--gs-q-beam-above: var(--gs-space-2);  /* 8px */
		--gs-q-beam-below: var(--gs-space-2);  /* 8px */
		--gs-q-width: 100%;
	}

	.gs-questions__title {
		text-align: start;
	}

	/* One per row, each only as wide as its own text (Adarsh); a question
	   longer than the column wraps inside its chip. */
	.gs-questions__list {
		flex-direction: column;
		align-items: flex-start;
		max-width: none;
	}
}