/* listings.css — the businesses-for-sale cards.

   Added 2026-09-11 with /listings/. Deliberately small: the card, its grid, its
   border, its hover and its quiet text-link action all come from cards.css via
   .gnt-cards--three, and nothing here re-states any of that. Two things that grid
   has no equivalent for:

     .gnt-listing__flag       the "Example listing" marker
     .gnt-listing__meta-list  the industry / location / price rows

   THE FLAG IS A SAFETY DEVICE, NOT DECORATION.

   The listings on staging are fabricated so the client has something to look at, and
   fabricated businesses-for-sale reaching production would be a false claim about
   real commerce -- the same failure MISSING-CONTENT.md exists to prevent, which is
   why its placeholders are ugly on purpose. So this uses --color-state-notice, the
   amber already carrying "not finished" everywhere else in the system, rather than a
   tasteful grey that someone could mistake for a design choice and ship. Removing
   the flag widget from a card is what marks that listing real.

   Every value below is a token. No new colour, size, spacing or radius is introduced. */

/* The amber ground is pale, so the label leans on a left rule for weight rather than
   on a darker fill that would fight the card's own quiet border. */
.gnt-listing__flag {
	align-self: flex-start;
	margin: 0;
	padding: var(--space-1) var(--space-3);
	border-left: var(--border-width-thick) solid var(--color-state-notice);
	border-radius: var(--radius-xs);
	background-color: var(--color-state-notice-bg);
	color: var(--ink-900);
	font-size: var(--text-body-sm);
	line-height: var(--text-body-sm-lh);
	font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------------------ the meta rows */

/* Descendant, not child: e_optimized_markup strips .elementor-widget-container on
   this build and it is a toggleable experiment, so `>` would couple this file to a
   flag an update can flip. Same reason as everywhere else in this theme. */
.gnt-listing__meta .gnt-listing__meta-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-1);
	font-size: var(--text-body-sm);
	line-height: var(--text-body-sm-lh);
}

/* The value is the part a buyer scans, so the row carries the weight and the darker
   ink and the label below gives it back. Styling it this way round, rather than
   emphasising a <strong>, keeps the label markup semantic while putting the emphasis
   where the eye needs it. */
.gnt-listing__meta .gnt-listing__meta-list li {
	display: grid;
	/* The label column is sized to "Asking price", the longest of the five. minmax
	   rather than a fixed width so a longer label the client adds later wraps its
	   value instead of overflowing the card. */
	grid-template-columns: minmax(0, 7.5rem) 1fr;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
	color: var(--color-text-body);
	font-weight: var(--font-weight-medium);
}

.gnt-listing__meta .gnt-listing__meta-list li:last-child {
	border-bottom: 0;
}

.gnt-listing__meta .gnt-listing__meta-list strong {
	font-weight: var(--font-weight-regular);
	color: var(--color-text-muted);
}

/* Kit breakpoints, not invented ones -- 1024 / 767, per CLAUDE.md. cards.css already
   reflows .gnt-cards--three itself, so only the label column needs revisiting once
   the card gets narrow. */
@media (max-width: 767px) {
	.gnt-listing__meta .gnt-listing__meta-list li {
		grid-template-columns: minmax(0, 6.5rem) 1fr;
		gap: var(--space-2);
	}
}