/**
 * HTPLaw Consultation Cards widget (booking options with prices).
 *
 * Not in Figma: built from the client's booking-page screenshot and the
 * approved light mock-up (2026-10-31). Spacing follows Service Cards: white
 * band, #f5f7f9 cards with a 1px #d9d9d9 border, 6px radius, 36/39 padding,
 * 40px gaps. Title Source Serif 4 600 24px, price Source Serif 4 600 43px
 * (the section heading size), text Inter 16/1.6.
 *
 * The highlighted card is white with a 2px copper border (inset shadow, so
 * the card doesn't grow) and a soft shadow. Any card can carry a badge on
 * its top edge, highlighted or not. Card parts line up across a row
 * (subgrid, below).
 *
 * Interaction: a card whose button has a link is clickable as a whole (the
 * button's ::after covers the card), so hovering anywhere on the card is a
 * button hover too. Cards lift on hover (mouse only) and on keyboard focus;
 * outline buttons fill navy and the arrow nudges right.
 */

.htplaw-cc {
	--_bg: var(--htplaw-cc-bg, var(--htplaw-color-surface));
	--_card-bg: var(--htplaw-cc-card-bg, var(--htplaw-color-muted));
	--_card-border: var(--htplaw-cc-card-border, #d9d9d9);
	--_highlight: var(--htplaw-cc-highlight, var(--htplaw-color-accent));
	--_meta: #4a5563; /* 7.4:1 on #f5f7f9 */

	padding-top: var(--htplaw-cc-pad-top, 72px);
	padding-bottom: var(--htplaw-cc-pad-bottom, 80px);
	background: var(--_bg);
}

.htplaw-cc__eyebrow {
	text-transform: uppercase;
}

.htplaw-cc .htplaw-cc__title {
	max-width: 640px;
	margin-top: 16px;
}

.htplaw-cc__cards {
	display: grid;
	grid-template-columns: repeat(var(--htplaw-cc-columns, 3), minmax(0, 1fr));
	gap: 40px;
	align-items: stretch;
	margin: 52px 0 0;
	padding: 0;
	list-style: none;
}

.htplaw-cc--no-intro .htplaw-cc__cards {
	margin-top: 14px; /* room for a badge on the top edge */
}

.htplaw-cc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 36px 39px 39px;
	border: 1px solid var(--_card-border);
	border-radius: var(--htplaw-radius);
	background: var(--_card-bg);
	color: var(--htplaw-color-primary);
	transition: transform var(--htplaw-duration) var(--htplaw-ease), box-shadow var(--htplaw-duration) var(--htplaw-ease), border-color var(--htplaw-duration) var(--htplaw-ease);
}

/*
 * Each card spans five rows of the list's grid (title, duration, price,
 * text, button) and shares them through subgrid, so a title that wraps in
 * one card keeps the prices, text and buttons level across the row.
 * Without subgrid the cards fall back to the flex column above.
 */
@supports (grid-template-rows: subgrid) {
	.htplaw-cc__card {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.htplaw-cc__card-title.htplaw-cc__card-title { grid-row: 1; }
	.htplaw-cc__duration { grid-row: 2; }
	.htplaw-cc__price { grid-row: 3; }
	.htplaw-cc__text { grid-row: 4; }
	.htplaw-cc__action { grid-row: 5; }
}

.htplaw-cc__card.is-highlighted {
	--_card-bg: var(--htplaw-cc-card-bg, var(--htplaw-color-surface));

	border-color: var(--_highlight);
	box-shadow: inset 0 0 0 1px var(--_highlight), 0 12px 32px rgb(16 24 40 / 10%);
}

/* Hover lift (mouse only) and keyboard focus. */
@media (hover: hover) {
	.htplaw-cc__card:has(.htplaw-btn[href]):hover {
		border-color: #b9c1cc;
		box-shadow: var(--htplaw-shadow);
		transform: translateY(-4px);
	}

	.htplaw-cc__card.is-highlighted:has(.htplaw-btn[href]):hover {
		border-color: var(--_highlight);
		box-shadow: inset 0 0 0 1px var(--_highlight), 0 18px 40px rgb(16 24 40 / 16%);
	}
}

.htplaw-cc__card:has(:focus-visible) {
	box-shadow: var(--htplaw-shadow);
	transform: translateY(-4px);
}

.htplaw-cc__card.is-highlighted:has(:focus-visible) {
	box-shadow: inset 0 0 0 1px var(--_highlight), 0 18px 40px rgb(16 24 40 / 16%);
}

.htplaw-cc__badge {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--htplaw-color-accent-strong); /* white text 5.7:1 */
	color: var(--htplaw-color-on-dark);
	font-family: var(--htplaw-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

/* Doubled class outranks the kit's `.elementor-kit-N h3` rules. */
.htplaw-cc__card-title.htplaw-cc__card-title {
	margin: 0;
	color: var(--htplaw-color-primary);
	font-family: var(--htplaw-font-heading);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.15;
}

/* Duration chip: white on grey cards, grey on the white highlighted card. */
.htplaw-cc__duration {
	display: inline-flex;
	align-items: center;
	align-self: start;
	justify-self: start;
	gap: 6px;
	margin: 14px 0 0;
	padding: 4px 11px 4px 9px;
	border: 1px solid var(--_card-border);
	border-radius: 999px;
	background: var(--htplaw-color-surface);
	color: var(--_meta);
	font-family: var(--htplaw-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	width: fit-content;
}

.htplaw-cc__card.is-highlighted .htplaw-cc__duration {
	border-color: transparent;
	background: var(--htplaw-color-muted);
}

.htplaw-cc__duration svg {
	flex: none;
	width: 14px;
	height: 14px;
	color: var(--htplaw-color-accent-strong);
}

.htplaw-cc__price {
	margin: 24px 0 0;
	color: var(--htplaw-color-primary);
	font-family: var(--htplaw-font-heading);
	font-size: 43px;
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1;
}

/* A rule between the price and the description, as on pricing tables. */
.htplaw-cc__text {
	margin: 24px 0 0;
	padding-top: 22px;
	border-top: 1px solid var(--_card-border);
	color: var(--htplaw-color-text);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 1.6;
}

.htplaw-cc__card.is-highlighted .htplaw-cc__text {
	border-top-color: var(--htplaw-color-border);
}

.htplaw-cc__action {
	align-self: end;
	margin-top: auto;
	padding-top: 30px;
}

/* Block, not flex: a long label that wraps stays centred, with the arrow
   inline after its last word instead of stranded at the edge. */
.htplaw-cc__action .htplaw-btn {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 14px 16px;
	text-align: center;
	text-wrap: balance;
	white-space: normal;
}

.htplaw-cc__action .htplaw-btn svg {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 8px;
	vertical-align: -3px;
	transition: transform var(--htplaw-duration) var(--htplaw-ease);
}

/* The whole card is the button's hit area (see the header comment). */
.htplaw-cc__action .htplaw-btn[href]::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--htplaw-radius);
}

.htplaw-cc__action .htplaw-btn:hover svg,
.htplaw-cc__action .htplaw-btn:focus-visible svg {
	transform: translateX(4px);
}

/*
 * Button colours, set here per style rather than inherited from shared.css:
 * a button without a link (the default, and in the editor) matches Hello's
 * `a:not([href]):not([tabindex])` reset, which made its text inherit the
 * card's navy (navy on copper, navy on the navy hover fill). The selectors
 * outrank that reset. All text/background pairs are WCAG AA or better.
 *
 * Hover: outline fills navy; copper deepens; navy turns copper. Each gets a
 * soft shadow in its own colour. No transform on the button: it would make
 * the button, not the card, the containing block of the card-wide ::after.
 */
/* Doubled class: outranks the reset's :hover/:focus variants (0,3,1) too. */
.htplaw-cc .htplaw-cc__action a.htplaw-btn.htplaw-btn {
	--_btn-bg: var(--htplaw-color-primary);
	--_btn-border: var(--htplaw-color-primary);
	--_btn-color: var(--htplaw-color-on-dark);
	--_btn-shadow: rgb(14 27 44 / 28%);

	border-color: var(--_btn-border);
	background: var(--_btn-bg);
	color: var(--_btn-color);
	transition: background-color var(--htplaw-duration) var(--htplaw-ease), border-color var(--htplaw-duration) var(--htplaw-ease), color var(--htplaw-duration) var(--htplaw-ease), box-shadow var(--htplaw-duration) var(--htplaw-ease);
}

/* Navy text on white/grey: 15:1. */
.htplaw-cc .htplaw-cc__action a.htplaw-btn.htplaw-btn--secondary {
	--_btn-bg: var(--htplaw-color-surface);
	--_btn-border: var(--htplaw-color-primary);
	--_btn-color: var(--htplaw-color-primary);
}

/* White text on #8f5a28: 5.7:1. */
.htplaw-cc .htplaw-cc__action a.htplaw-btn.htplaw-btn--accent {
	--_btn-bg: var(--htplaw-color-accent-strong);
	--_btn-border: var(--htplaw-color-accent-strong);
	--_btn-shadow: rgb(143 90 40 / 35%);
}

/* Hover/focus: white text on navy 15:1, on #6b421d 8.6:1, on #8f5a28 5.7:1. */
.htplaw-cc .htplaw-cc__action a.htplaw-btn:is(:hover, :focus-visible) {
	--_btn-bg: var(--htplaw-color-accent-strong);
	--_btn-border: var(--htplaw-color-accent-strong);
	--_btn-shadow: rgb(143 90 40 / 35%);

	box-shadow: 0 8px 18px -6px var(--_btn-shadow);
}

.htplaw-cc .htplaw-cc__action a.htplaw-btn.htplaw-btn--secondary:is(:hover, :focus-visible) {
	--_btn-bg: var(--htplaw-color-primary);
	--_btn-border: var(--htplaw-color-primary);
	--_btn-color: var(--htplaw-color-on-dark);
	--_btn-shadow: rgb(14 27 44 / 28%);
}

.htplaw-cc .htplaw-cc__action a.htplaw-btn.htplaw-btn--accent:is(:hover, :focus-visible) {
	--_btn-bg: #6b421d;
	--_btn-border: #6b421d;
}

.htplaw-cc .htplaw-cc__action a.htplaw-btn:active {
	box-shadow: 0 2px 6px -2px var(--_btn-shadow);
}

.htplaw-cc__note {
	margin: 32px 0 0;
	color: var(--_meta);
	font-family: var(--htplaw-font-body);
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.htplaw-cc__card,
	.htplaw-cc__card:hover,
	.htplaw-cc__card:has(:focus-visible) {
		transform: none !important;
	}
}

@media (max-width: 1200px) {
	.htplaw-cc__cards {
		gap: 24px;
	}

	.htplaw-cc__card {
		padding: 32px 28px 32px;
	}
}

@media (max-width: 900px) {
	.htplaw-cc {
		padding-top: min(var(--htplaw-cc-pad-top, 72px), var(--htplaw-space-section));
		padding-bottom: min(var(--htplaw-cc-pad-bottom, 80px), var(--htplaw-space-section));
	}

	.htplaw-cc__cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px; /* room for badges between stacked cards */
		max-width: 560px;
		margin-top: 40px;
	}

	.htplaw-cc__card {
		padding: 30px 24px 26px;
	}

	.htplaw-cc__price {
		font-size: 36px;
	}

	.htplaw-cc__note {
		max-width: 560px;
		text-align: left;
	}
}