/**
 * PFG Latest Offers — a stack of offer cards.
 *
 * THE OWNER'S REFERENCE, OUR PAINT (2026-09-19). The reference is a competitor's
 * "exclusive offers" list: a full-width rounded card per offer, a large logo
 * tile on the left, the firm name over a dashed pill carrying the headline
 * discount in the middle, and a big code pill on the right under a small label.
 * The owner asked for that LAYOUT. They did not ask for its purple-pink gradient
 * washes, tinted card fills, glow or drop shadows, and `.claude/rules/design.md`
 * forbids all four. So: the reference's structure and hierarchy, drawn in flat
 * surface-1 panels with white hairlines at 6-10%, radius 20px, and hover as a
 * hairline brightening with no lift, scale or shadow.
 *
 * WHERE ACCENT IS ALLOWED TO APPEAR, and nowhere else in this sheet:
 *   - inside the dashed discount pill (the coupon motif, on design.md's list),
 *     where the figure is --text-1 and the word "off" is --acc;
 *   - the dashed border of that pill;
 *   - the coupon pill and its solid CTA (owned by css/coupon.css, not here);
 *   - the market dot, which is the one thing that identifies a market. The card
 *     around it is never painted, and never gets a coloured edge.
 *
 * NO HEX IS WRITTEN FOR ANY ACCENT. `data-accent="world"` resolves --acc from
 * the active vertical, and the dot re-scopes it with its own [data-world]. The
 * only literals here are fallbacks for the neutral tokens, so the block degrades
 * to less pretty rather than to unreadable outside this theme — the convention
 * css/primitives.css already follows.
 *
 * STILL A TABLE, AND THE CARDS ARE ROWS. `border-collapse: separate` with a
 * vertical `border-spacing` is what lets a <tr> read as a detached card: every
 * cell keeps its native table-cell box, so the row and column headers survive
 * a treatment that a <div> stack would have thrown away. The border is drawn on
 * the CELLS (top and bottom everywhere, left and right on the end cells, radius
 * on their outer corners) because a <tr> cannot carry one in the separated
 * border model.
 *
 * TWO LAYOUTS, ONE MARKUP. At >= 900px the browser lays the three columns out
 * natively. Below that each card becomes a two-area grid — mark and firm across
 * the top, the code pill full width beneath — because a 112px tile, a discount
 * pill and a 380px coupon side by side at 390px is a horizontal scrollbar, and
 * the page body must never scroll sideways. The <tbody> carries an explicit
 * role="rowgroup" for that second case; see the note in render.php.
 */

/* The outer frame is gone: the cards ARE the panels now, and a panel of panels
   was the reference's one piece of nesting we did not want. */
.pfg-offers {
	--pfg-offers-gap: 12px;
	--pfg-offers-radius: var(--wp--custom--radius--card, 20px);
	--pfg-offers-tile: 128px;
	--pfg-offers-pad-y: 20px;
	--pfg-offers-pad-x: 22px;
}

.pfg-offers__table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	/* Vertical only: the columns inside a card must not be pushed apart. */
	border-spacing: 0 var(--pfg-offers-gap);
	/* border-spacing also opens a gap above the first card and below the last.
	   Neither is wanted; the block's own flow spacing owns those edges. */
	margin: calc(-1 * var(--pfg-offers-gap)) 0;
}

/* Hidden at every width. See render.php: a header row above a stack of cards
   labels a grid the reader cannot see. The names still reach assistive
   technology through the <th scope="col"> elements themselves. */
.pfg-offers__colhead {
	font-weight: 500;
}

/* ---- The card ----
   One rounded, flat, hairlined panel per row. Borders over shadows; no lift on
   hover, no coloured edge ever. */
.pfg-offers__row > * {
	padding: var(--pfg-offers-pad-y) var(--pfg-offers-pad-x);
	vertical-align: middle;
	background: var(--surface-1, #14171E);
	border-top: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
	border-bottom: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
	transition: border-color 120ms ease, background-color 120ms ease;
}

.pfg-offers__row > *:first-child {
	border-left: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
	border-top-left-radius: var(--pfg-offers-radius);
	border-bottom-left-radius: var(--pfg-offers-radius);
}

.pfg-offers__row > *:last-child {
	border-right: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
	border-top-right-radius: var(--pfg-offers-radius);
	border-bottom-right-radius: var(--pfg-offers-radius);
}

/* Hover is a hairline brightening and the faintest wash. Nothing moves. */
.pfg-offers__row:hover > * {
	background: var(--hover-wash-strong, rgba(255, 255, 255, 0.06));
	border-color: var(--border-strong, rgba(255, 255, 255, 0.14));
}

@media (prefers-reduced-motion: reduce) {
	.pfg-offers__row > * {
		transition: none;
	}
}

/* ---- The columns ----
   Declared on <col>, not on a cell: `table-layout: fixed` reads the first ROW
   for its widths and the first row is the hidden header, which declares none —
   so every column came out as an exact third and the 112px mark sat in 393px of
   column. A <colgroup> outranks both rows. See render.php.

   The code column is sized to the coupon capsule css/coupon.css draws rather
   than to a fraction of the table, so the pill never has to shrink and the
   middle column absorbs whatever is left. */
.pfg-offers__col--logo {
	width: calc(var(--pfg-offers-tile) + (2 * var(--pfg-offers-pad-x)));
}

.pfg-offers__col--code {
	width: 356px;
}

/* ---- Column 1: the mark ---- */
.pfg-offers__logo {
	text-align: center;
}

/* The primitive tile is a 34px chip. Here it is the reference's big square
   plate, so the four geometry declarations are overridden and nothing else:
   the surface, the contain-not-cover rule and the self-ground mark handling all
   stay exactly as primitives.css sets them. */
/* BORDER-BOX, AND THAT IS A CORRECTION, NOT A PREFERENCE. The primitive is
   content-box on purpose (primitives.css explains why: its 5px of padding is
   what a wordmark breathes in, and the declared size is the content box). At
   34px that is a 10px difference nobody sees. At 112px with 16px of padding the
   tile measured 144px and the column was sized for 112, so the plate overhung
   its own cell. The padding is now inside the square. */
.pfg-offers__tile.pfg-tile {
	box-sizing: border-box;
	width: var(--pfg-offers-tile);
	height: var(--pfg-offers-tile);
	flex: 0 0 var(--pfg-offers-tile);
	border-radius: var(--wp--custom--radius--hero, 22px);
	font-size: clamp(22px, 2vw, 30px);
}

.pfg-offers__tile.pfg-tile--logo {
	padding: 16px;
}

/* ---- Column 2: the firm and its offer ----
   THE CELLS STAY TABLE-CELLS. `display: flex` on a <th> or <td> stops it
   generating a table-cell box, and the table then wraps each one in its own
   anonymous row — three stacked bands where three columns were intended.
   Measured at 1440 on the first version of this sheet. So every cell keeps its
   native display and the flexing happens one element in. */

.pfg-offers__firm {
	text-align: left;
	font-weight: 400;
}

.pfg-offers__firmwrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.pfg-offers__id {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	max-width: 100%;
}

/* The reference sets the firm name semibold. design.md sets display type at
   300-400, so this is Outfit 400 at the reference's size: the same emphasis
   bought with scale rather than with weight. */
.pfg-offers__name {
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-size: clamp(18px, 1.45vw, 24px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--text-1, #F2F3F8);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.pfg-offers__name:hover,
a.pfg-offers__name:focus-visible {
	/* The name is not accent-coloured on hover — the design never tints a firm
	   name. An underline is the affordance. */
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pfg-offers__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.pfg-offers__market {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: clamp(11px, 0.62vw, 12.5px);
	color: var(--text-3, #979CAD);
}

/* The one coloured thing outside the two pills, and it is 6px across. Its own
   [data-world] re-derives --acc for this element alone, so a futures card and a
   forex card differ by a dot and by nothing else. */
.pfg-offers__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--acc, currentColor);
	flex: 0 0 6px;
}

/* ---- The dashed discount pill ----
   The coupon motif the design already owns (css/coupon.css draws the same
   dashes around the code), reused for the headline figure because that is how
   the reference frames it and because design.md lists the dashed coupon pill
   among the places accent is allowed to appear. Dashed accent border, no fill:
   a tinted or gradient fill is the reference's, and it is forbidden. */
.pfg-offers__deal {
	display: inline-flex;
	align-items: baseline;
	max-width: 100%;
	padding: 7px 18px 9px;
	border: 1.5px dashed rgba(var(--acc-rgb, 167, 159, 255), 0.5);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: transparent;
}

.pfg-offers__pct {
	display: inline;
	font-family: var(--wp--preset--font-family--display, "Outfit", sans-serif);
	font-size: clamp(24px, 2.4vw, 36px);
	font-weight: 300;
	line-height: 1.05;
	/* The figure is white and the word is the accent — the reference's split.
	   Both live inside the pill, so the accent has not left the place the
	   design puts it. */
	color: var(--text-1, #F2F3F8);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	white-space: nowrap;
}

.pfg-offers__pctsym {
	/* Slightly smaller than the digits, which is what stops "90%" reading as a
	   three-character number. */
	font-size: 0.66em;
	padding-left: 0.04em;
}

.pfg-offers__pctword {
	color: var(--acc, #A79FFF);
}

/* A code that takes nothing off the price is not a saving, so it does not get
   the price treatment and it does not get the pill. Same slot, ordinary type,
   no accent, no dashes. */
.pfg-offers__pct--flat {
	display: block;
	font-family: var(--wp--preset--font-family--ui, "Manrope", sans-serif);
	font-size: clamp(13px, 0.82vw, 15px);
	font-weight: 400;
	line-height: 1.3;
	color: var(--text-2, #C6CBDD);
}

/* The terms line, with the end-date chip beside it. Everything the text can say
   comes from `scope_offerings`; there is no conditions field in the read model
   and nothing is invented here. The chip sits on the same row when both fit and
   wraps under when they do not. */
.pfg-offers__terms {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	max-width: 62ch;
}

.pfg-offers__scope {
	display: block;
	font-size: clamp(12px, 0.7vw, 13.5px);
	line-height: 1.45;
	color: var(--text-3, #979CAD);
	overflow-wrap: anywhere;
}

/* ---- Column 3: the code ----
   Centred under its own small label, as the reference has it. Sized to the
   coupon capsule css/coupon.css draws rather than to a fraction of the table,
   so the pill never has to shrink and column 2 absorbs whatever is left. */
.pfg-offers__code {
	text-align: center;
}

.pfg-offers__codewrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* Sentence case, not the reference's all-caps: design.md says sentence case and
   a three-letter label is not the place to make an exception. Letterspaced and
   muted so it reads as a caption rather than as copy. */
.pfg-offers__codelabel {
	font-family: var(--wp--preset--font-family--ui, "Manrope", sans-serif);
	font-size: clamp(10.5px, 0.6vw, 12px);
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--text-4, #838A9D);
}

/* THE CODE IS NEVER ABBREVIATED, AT ANY WIDTH. css/coupon.css ships one squeeze
   order for the capsule — the button holds its label and the CODE gives way
   with an ellipsis — and at the 288px column this block first shipped with,
   that order clipped TRADINGVIEW and RETURNSDAY at 1440 with 172px of card
   going spare beside them. On this page the code is the thing the reader came
   for and has to type.

   Two changes, both of them the design's own. The column is 356px, which holds
   the longest code in the catalogue plus about four more characters on one row.
   And the pill is opted into the wrap treatment css/coupon.css already draws
   for the review pills, where the code carries `flex: 1000 0 auto` — shrink
   factor zero, so the ellipsis cannot fire — and the button drops to its own
   full-width row when the two genuinely will not fit. The pill grows a row; the
   code never shrinks. */
.pfg-offers__code .pfg-coupon {
	width: 100%;
	max-width: 100%;
}

/* Ends-on chip. A hairline, not a coloured badge: an end date is a fact about
   the offer, not a warning, and the design has no red-or-amber urgency pill.
   It sits on the terms line rather than under the coupon: the reference puts a
   bonus chip below the pill, we have no bonus field, and the middle column had
   the room. */
.pfg-offers__ends {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 11px;
	border: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
	border-radius: 9999px;
	font-size: clamp(11px, 0.62vw, 12.5px);
	color: var(--text-3, #979CAD);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---- Narrow: the card becomes two rows ----
   Below 900px the three columns do not fit: the tile is 112px, the coupon
   capsule does not go below ~216px, and what is left for the discount pill at
   390px is about 30px. So the card becomes a grid — the mark beside the firm,
   the code pill full width under both — and the tile comes down to a size that
   leaves the name room to be a name. */
@media (max-width: 899px) {
	/* border-box is not a preference here. A <tr> forced to `display: block`
	   does not inherit the theme's box-sizing reset, so `width: 100%` plus 16px
	   of padding and a 1px border measured 384px inside a 350px column at 390 —
	   14px of the card hanging outside the page, clipped rather than scrolling
	   and therefore invisible until it was measured. */
	.pfg-offers__table,
	.pfg-offers thead,
	.pfg-offers tbody,
	.pfg-offers__row {
		display: block;
		box-sizing: border-box;
		width: 100%;
	}

	.pfg-offers__table {
		border-spacing: 0;
		margin: 0;
	}

	.pfg-offers {
		--pfg-offers-tile: 64px;
		--pfg-offers-pad-y: 16px;
		--pfg-offers-pad-x: 16px;
	}

	.pfg-offers__row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"logo firm"
			"code code";
		align-items: start;
		column-gap: 14px;
		/* The card's own border, drawn once on the row now that the cells are
		   no longer table-cells. */
		margin-bottom: var(--pfg-offers-gap);
		padding: var(--pfg-offers-pad-y) var(--pfg-offers-pad-x);
		background: var(--surface-1, #14171E);
		border: 1px solid var(--border-2, rgba(255, 255, 255, 0.08));
		border-radius: var(--pfg-offers-radius);
	}

	.pfg-offers__row:last-child {
		margin-bottom: 0;
	}

	/* The cells stop carrying the card; the row does. */
	.pfg-offers__row > * {
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
	}

	.pfg-offers__row:hover > * {
		background: transparent;
	}

	.pfg-offers__row:hover {
		background: var(--hover-wash-strong, rgba(255, 255, 255, 0.06));
		border-color: var(--border-strong, rgba(255, 255, 255, 0.14));
	}

	/* The columns are gone with the table box; the grid owns the widths now. */
	.pfg-offers colgroup {
		display: none;
	}

	.pfg-offers__logo {
		grid-area: logo;
	}

	.pfg-offers__firm {
		grid-area: firm;
	}

	.pfg-offers__code {
		grid-area: code;
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid var(--border-1, rgba(255, 255, 255, 0.06));
	}

	.pfg-offers__row:hover > .pfg-offers__code {
		border-top-color: var(--border-1, rgba(255, 255, 255, 0.06));
	}

	.pfg-offers__tile.pfg-tile--logo {
		padding: 8px;
	}

	/* Left-aligned in the stack, where there is no third column for the pill to
	   be centred in. The label and the end-date chip follow it rather than
	   floating in the middle of a card. */
	.pfg-offers__codewrap {
		align-items: flex-start;
	}

	.pfg-offers__deal {
		padding: 6px 14px 8px;
	}
}

/* ---- Editor placeholder ---- */

.pfg-offers-placeholder {
	border: 1px dashed var(--border-strong, rgba(255, 255, 255, 0.14));
	border-radius: 14px;
	padding: 18px;
	color: var(--text-3, #979CAD);
}

.pfg-offers-placeholder p {
	margin: 8px 0 0;
}