/* ==========================================================================
   Chaince Securities — Transaction Tombstones

   Self-contained. Does not depend on, and is not depended on by, the
   custom-css-js snippets. All tunables are custom properties.

   No media queries: the grid uses intrinsic sizing and clamp() so it behaves
   correctly on both sides of the site's 844px custom breakpoint and Divi's
   980px menu breakpoint, without having to pick one.
   ========================================================================== */

.cs-tombstones {
	--cs-card-bg: #ffffff;
	--cs-accent: #C8781E;      /* orange rule from the announcement artwork */
	--cs-ink: #0E1321;         /* site dark navy */
	--cs-ink-soft: #5A6070;
	--cs-rule: #D9D5CB;
	--cs-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--cs-sans: "DM Sans", "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--cs-card-min: 17rem;
	--cs-gap: 1.5rem;
}

/* --- grid ---------------------------------------------------------------- */

.cs-tombstones__grid {
	display: grid;
	/* min() keeps cards from overflowing viewports narrower than --cs-card-min */
	grid-template-columns: repeat(auto-fill, minmax(min(var(--cs-card-min), 100%), 1fr));
	gap: var(--cs-gap);
	align-items: stretch;
}

/* --- card ---------------------------------------------------------------- */

.cs-tombstone {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.75rem 1.5rem 1.25rem;
	text-align: center;
	background: var(--cs-card-bg);
	color: var(--cs-ink);
	font-family: var(--cs-sans);
	border-top: 4px solid var(--cs-accent);
	box-shadow: 0 1px 2px rgba(14, 19, 33, .06), 0 6px 20px rgba(14, 19, 33, .06);
}

/* display:flex above would otherwise beat [hidden]'s display:none */
.cs-tombstone[hidden] { display: none !important; }

.cs-tombstone__date {
	margin: 0 0 1.25rem;
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cs-ink-soft);
}

.cs-tombstone__identity { margin-bottom: 1.25rem; }

.cs-tombstone__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.5rem;
	margin-bottom: .75rem;
}

.cs-tombstone__logo img {
	max-width: min(11rem, 80%);
	max-height: 3.5rem;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* serif wordmark stands in when there is no logo */
.cs-tombstone__wordmark {
	margin: 0 0 .75rem;
	font-family: var(--cs-serif);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
	line-height: 1.15;
}

.cs-tombstone__company {
	margin: 0;
	font-size: .875rem;
	line-height: 1.35;
	color: var(--cs-ink-soft);
}

/* with no logo the wordmark already shows the name — avoid printing it twice */
.cs-tombstone__wordmark + .cs-tombstone__company { display: none; }

.cs-tombstone__listing {
	margin: .35rem 0 0;
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cs-ink-soft);
}

.cs-tombstone__amount {
	margin: 0 0 .75rem;
	padding-bottom: .75rem;
	font-family: var(--cs-serif);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
	line-height: 1.1;
	border-bottom: 1px solid var(--cs-rule);
}

/* flex:1 makes the divider below line up across cards of differing height */
.cs-tombstone__type {
	margin: 0;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	font-size: .9375rem;
	line-height: 1.4;
}

.cs-tombstone__rule {
	width: 2.5rem;
	margin: 1rem auto;
	border: 0;
	border-top: 1px solid var(--cs-rule);
}

.cs-tombstone__role {
	margin: 0 0 1rem;
	font-style: italic;
	font-size: .9375rem;
}

.cs-tombstone__foot { margin-top: auto; }

.cs-tombstone__link {
	display: inline-block;
	padding-bottom: 2px;
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--cs-accent);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.cs-tombstone__link:hover,
.cs-tombstone__link:focus-visible { color: var(--cs-ink); }

/* --- filters ------------------------------------------------------------- */

/* The chips sit on whatever background the surrounding Divi section paints —
   #161d31 on /transactions/, #f9f8f5 on the light sections of the same page —
   so they cannot name their own greys. Against a light and a dark ground at
   the same time the best any single fixed colour reaches is 4.09:1, short of
   AA's 4.5:1. Resting and hover therefore draw in currentColor, the section's
   own body colour, and stay legible exactly wherever the section's own copy
   is. Only the selected chip commits to a colour of its own, and it takes the
   brand orange from the rule across the top of every card: 4.91:1 against
   #161d31 and 3.21:1 against #f9f8f5, carrying #0E1321 text at 5.43:1.
   No prefers-color-scheme — light vs dark here is a property of the Divi
   section, not of the operating system. */

.cs-tombstones__filters {
	--cs-filter-fill: var(--cs-accent);
	/* --cs-accent darkened ~6%; re-point this too if --cs-accent ever moves */
	--cs-filter-fill-hover: #BC711C;
	--cs-filter-on-fill: var(--cs-ink);
	/* spacer ring, so the focus outline still reads against an orange chip */
	--cs-filter-focus-halo: var(--cs-card-bg);

	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin: 0 0 var(--cs-gap);
}

.cs-filter {
	padding: .5rem 1rem;
	font-family: var(--cs-sans);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: inherit;
	background-color: transparent;
	/* #808080 is the fallback where color-mix() is unsupported — 4.24:1 on
	   #161d31, 3.95:1 on white, so the chip keeps a visible edge either way */
	border: 1px solid #808080;
	border-color: color-mix(in srgb, currentColor 60%, transparent);
	border-radius: 999px;
	cursor: pointer;
	transition: color .2s, border-color .2s, background-color .2s;
}

/* hover: same label, edge to full strength, faint wash of the same colour */
.cs-filter:hover {
	background-color: rgba(128, 128, 128, .14);
	background-color: color-mix(in srgb, currentColor 12%, transparent);
	border-color: currentColor;
}

/* selected: brighter than resting, never darker. aria-pressed is matched
   alongside .is-active so the state tracks the ARIA state the script sets */
.cs-filter.is-active,
.cs-filter[aria-pressed="true"] {
	color: var(--cs-filter-on-fill);
	background-color: var(--cs-filter-fill);
	border-color: var(--cs-filter-fill);
}

.cs-filter.is-active:hover,
.cs-filter[aria-pressed="true"]:hover {
	background-color: var(--cs-filter-fill-hover);
	border-color: var(--cs-filter-fill-hover);
}

/* halo first, accent ring outside it: visible on a dark section, and still
   separated from the fill when the focused chip is the orange one */
.cs-filter:focus-visible {
	outline: 2px solid var(--cs-accent);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--cs-filter-focus-halo);
}

/* --- disclaimer ---------------------------------------------------------- */

.cs-tombstones__disclaimer {
	margin-top: 2.5rem;
	text-align: center;
	font-size: .75rem;
	line-height: 1.6;
	color: var(--cs-ink-soft);
}

.cs-tombstones__disclaimer strong { letter-spacing: .08em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
	.cs-filter { transition: none; }
}