/* ==========================================================================
   GrowthStudioz — audit band

   A dark card: artwork on the left, the offer on the right. Stacks on a phone
   with the heading in caps and the button full width.

   Type sizes are Adarsh's, 24th September 2026:
     heading  64 desktop / 32 phone
     lead     32 desktop / 30 phone
     body     16 desktop / 12 phone
   ========================================================================== */

.gs-audit {
	--gs-audit-title: 4rem;           /* 64px */
	--gs-audit-lead: 2rem;            /* 32px */
	--gs-audit-body: 1rem;            /* 16px */

	/* Sampled from the mockup: a charcoal, distinctly lighter than the site's
	   black, which is what keeps the card reading as a panel ON the page
	   rather than as a full-bleed dark band like the footer. */
	--gs-audit-bg: #2B2B2B;

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

/* The artwork and copy as one group, centred in the card rather than pinned
   to its left with the right side empty (Adarsh, 29th September 2026). */
.gs-audit__card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gs-space-8);
	padding: var(--gs-space-7);
	border-radius: 12px;
	background: var(--gs-audit-bg);
	color: var(--gs-on-dark);
	/* VISIBLE, not hidden: on a phone the artwork is pulled above the card's
	   top edge and clipping it would cut the phone in half. */
	overflow: visible;
}

/* Tablet (768-1023): the heading scales with the card instead of running past
   it (Adarsh, 6th October 2026, "scale down"). "Sales Dropping?" is 451px at
   64 and the copy column at 768 is 337, so it spilled 34px off the screen. The
   size follows the card's own width (cqi), reaching the full 64 by about 940,
   where it fits as drawn. Phone and desktop are untouched. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.gs-audit__card {
		container-type: inline-size;
	}

	.gs-audit {
		--gs-audit-title: min(4rem, calc(8.991cqi - 0.545rem));
	}
}

/* --- artwork -------------------------------------------------------------- */

.gs-audit__media {
	flex: none;
	width: min(34%, 360px);
}

.gs-audit__art {
	display: block;
	width: 100%;
	height: auto;
}

/* --- copy ----------------------------------------------------------------- */

/* As wide as its own text (up to about 600px), so the group can centre. */
.gs-audit__copy {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 38rem;
}

.gs-audit__title {
	margin: 0;
	max-width: none;
	color: var(--gs-on-dark);
	font-size: var(--gs-audit-title);
	line-height: 1.1;
	/* The design's two lines are deliberate, so nothing may re-break them. */
	text-wrap: nowrap;
}

.gs-audit__line {
	display: block;
}

/* Tight under the heading, per the mockup: the sub-heading is the second half
   of the same statement, not a new block, so it sits close rather than at the
   full paragraph step. */
.gs-audit__lead {
	margin: var(--gs-space-2) 0 0;
	max-width: none;
	color: var(--gs-on-dark);
	font-size: var(--gs-audit-lead);
	font-weight: var(--gs-weight-medium);
	line-height: 1.2;
}

.gs-audit__body {
	margin: var(--gs-space-3) 0 0;
	max-width: 52ch;
	color: var(--gs-on-dark-muted);
	font-size: var(--gs-audit-body);
	line-height: var(--gs-lh-body);
}

/* White fill on the dark card, going to brand red on hover. The base button
   supplies everything else, so only the four colour tokens are set here. */
.gs-audit__btn {
	--btn-fill: var(--gs-white);
	--btn-line: var(--gs-white);
	--btn-ink: var(--gs-ink);
	--btn-fill-hover: var(--gs-accent);
	--btn-ink-hover: var(--gs-white);

	margin-block-start: var(--gs-space-5);
	/* Tracked out, as both mockups show. em, not px, so it holds at the
	   desktop and phone type sizes without a second value. */
	letter-spacing: 0.08em;
}

/* --- editor-only empty state ---------------------------------------------- */

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

/* ==========================================================================
   Phones
   ========================================================================== */

@media (max-width: 767px) {
	.gs-audit {
		--gs-audit-title: 2rem;       /* 32px */
		--gs-audit-lead: 1.875rem;    /* 30px */
		--gs-audit-body: 0.75rem;     /* 12px */
	}

	/* Full bleed on a phone, per the mockup: the card runs to both screen
	   edges instead of sitting inside the page gutter.

	   Same three-part fix every other full-bleed band uses: negative margin to
	   cancel main's gutter, and the max-width cap lifted, because core's
	   constrained layout centres children of .wp-block-post-content with
	   `margin-left: auto !important` and caps them with max-width. The
	   negative margin alone moves the band but cannot widen it. */
	.gs-audit {
		/* How far the artwork is lifted out of the card. Named once and used
		   twice below, so the pull and the padding that pays for it can never
		   drift apart. */
		--gs-audit-pull: calc(var(--gs-space-6) * 2.5);

		margin-inline: calc(var(--gs-gutter-now) * -1) !important;
		max-width: none !important;

		/* The artwork breaks ABOVE the card, so the card's own top edge is no
		   longer the top of the section. Without this the overhang eats into
		   the 80px gap and the phone crowds whatever sits above it.

		   The overhang is the pull minus the card's own padding, since the
		   first 32px of the lift only cancels that padding. Derived, not a
		   measured constant, so changing the pull fixes the spacing on its
		   own. */
		padding-block-start: calc(var(--gs-section-pad) + var(--gs-audit-pull) - var(--gs-space-6));
	}

	.gs-audit__card {
		flex-direction: column;
		align-items: stretch;
		gap: var(--gs-space-6);
		padding: var(--gs-space-6);
		/* Edge to edge, so no rounded corner to draw. */
		border-radius: 0;
	}

	.gs-audit__media {
		width: 100%;
		/* The artwork BREAKS OUT of the card's top edge, per the mockup, so
		   the phone reads as standing in front of the panel rather than
		   sitting inside it. The card must not clip it, and the section pays
		   for the overhang in its top padding — see --gs-audit-pull above. */
		margin-block-start: calc(var(--gs-audit-pull) * -1);
	}

	.gs-audit__art {
		/* Fills the column, height following the artwork's own ratio.

		   No fixed height (Adarsh, 24th September 2026): a pixel height would
		   be right on one screen and wrong on every other, and it would crop
		   or letterbox the moment the artwork is re-exported at a different
		   ratio. A relative width scales with the card and needs no upkeep. */
		width: 100%;
		height: auto;
		margin-inline: auto;
	}

	/* Caps on the phone layout, per the mockup. A CSS transform, not the
	   stored text, so the heading is still sentence case everywhere else and
	   an editor never has to type it twice. */
	.gs-audit__title {
		text-transform: uppercase;
		line-height: 1.2;
	}

	/* SOLID on the phone, the same white fill as desktop — only the width
	   changes. The outline treatment that used to be here was my own
	   invention, not the mockup. */
	.gs-audit__btn {
		width: 100%;
	}
}