/* =========================================================================
   BuyTides — Research Library

   The page is built from native Gutenberg blocks so every string is editable
   in wp-admin. This stylesheet dresses those blocks: each rule targets a
   className set on a core block, never hand-written markup.

   Tokens and metrics are lifted 1:1 from the approved design.
   ========================================================================= */

.bt-rl {
	--bt-navy: #0b2c4d;
	--bt-cyan: #1fc8e3;
	--bt-cyan-btn: #61ddeb;
	--bt-aqua: #6fe4f2;
	--bt-link: #1b7fa8;
	--bt-muted: #7c93a3;
	--bt-body: #4b6479;
	--bt-line: #dde7ee;
	--bt-chip-bg: #eaf7fb;
	--bt-mist: #eef2f4;
	--bt-white: #fff;

	--bt-sans: "Inter", system-ui, -apple-system, sans-serif;
	--bt-display: "Outfit", "Inter", system-ui, sans-serif;

	/* Same reason as .bt-pdp / .bt-shop: the first child's margin-top would
	   otherwise collapse out through this wrapper and leave a bare strip
	   under the header. */
	display: flow-root;

	background: var(--bt-mist);
	font-family: var(--bt-sans);
	color: var(--bt-navy);
	-webkit-font-smoothing: antialiased;
}

.bt-rl *,
.bt-rl *::before,
.bt-rl *::after { box-sizing: border-box; }

/* Core groups space their children with block-gap margins. Every gap on this
   page is set deliberately below, so the inherited ones are cleared first.
   :where() keeps this at zero specificity so the rules below always win. */
.bt-rl :where(p, h1, h2, h3, .wp-block-group, .wp-block-buttons) {
	margin-block: 0;
}

.bt-rl a { color: var(--bt-link); text-decoration: none; }
.bt-rl a:hover { color: var(--bt-navy); }
.bt-rl ::selection { background: var(--bt-aqua); color: var(--bt-navy); }

/* The source design zeroes every focus outline. Keyboard users need a visible
   ring, so this matches the shop template's treatment instead — and
   :focus-visible keeps it off mouse clicks. */
.bt-rl a:focus-visible {
	outline: 2px solid var(--bt-cyan);
	outline-offset: 2px;
	border-radius: 4px;
}

.bt-rl__inner {
	max-width: 1400px;
	margin-inline: auto;
	padding: clamp(44px, 6vw, 84px) clamp(16px, 3vw, 32px) clamp(56px, 8vw, 96px);
}

/* ---------- header ---------- */
.bt-rl__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(12px, 1.6vw, 18px);
}

.bt-rl__eyebrow {
	font-family: var(--bt-display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bt-link);
}

.bt-rl__title {
	font-family: var(--bt-display);
	font-size: clamp(38px, 6vw, 76px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -.03em;
	color: var(--bt-navy);
}

.bt-rl__crumbs {
	font-size: 13.5px;
	color: var(--bt-muted);
}

.bt-rl__intro {
	max-width: 820px;
	margin: clamp(26px, 3.4vw, 40px) auto 0;
	text-align: center;
	font-size: clamp(16px, 1.25vw, 18.5px);
	line-height: 1.62;
	color: var(--bt-body);
	text-wrap: pretty;
}

/* ---------- topic chips (core/buttons + core/button) ---------- */
.bt-rl__topics {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(10px, 1.1vw, 14px);
	margin-top: clamp(32px, 4.2vw, 52px);
}

.bt-rl__topic .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--bt-white);
	border: 1.5px solid var(--bt-line);
	border-radius: 999px;
	padding: 15px 26px;
	font-family: var(--bt-display);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--bt-navy);
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}

.bt-rl__topic .wp-block-button__link:hover {
	border-color: var(--bt-cyan-btn);
	box-shadow: 0 10px 26px rgba(11, 44, 77, .10);
	color: var(--bt-navy);
}

/* Injected by research-library.js from the number of cards in the target
   section, so the counts can never drift from the content. */
.bt-rl__topic-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--bt-chip-bg);
	color: var(--bt-link);
	font-size: 13.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background .16s ease, color .16s ease;
}

.bt-rl__topic.is-active .wp-block-button__link {
	background: var(--bt-navy);
	border-color: var(--bt-navy);
	color: var(--bt-white);
}

.bt-rl__topic.is-active .wp-block-button__link:hover {
	border-color: var(--bt-cyan-btn);
	color: var(--bt-white);
}

.bt-rl__topic.is-active .bt-rl__topic-count {
	background: var(--bt-cyan-btn);
	color: var(--bt-navy);
}

/* At full size the seven chips stack one per row on a phone and take ~58% of
   the viewport before the first card. Tightening the scale lets the shorter
   labels pair up and roughly halves that, without changing the shape.
   Padding stays at 14px so the tap target clears 44px. */
@media (max-width: 600px) {
	.bt-rl__topics {
		gap: 8px;
		margin-top: clamp(24px, 6vw, 32px);
	}

	.bt-rl__topic .wp-block-button__link {
		gap: 7px;
		padding: 15px 13px;
		font-size: 13px;
	}

	.bt-rl__topic-count {
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		font-size: 11.5px;
	}
}

/* ---------- sections ---------- */
.bt-rl__section {
	margin-top: clamp(52px, 6.5vw, 88px);
	/* Chip jumps would otherwise land the heading under the sticky header. */
	scroll-margin-top: clamp(80px, 12vh, 130px);
}

.bt-rl__section-title {
	margin-bottom: clamp(18px, 2.2vw, 26px);
	font-family: var(--bt-display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bt-muted);
}

/* The block is saved with core's grid layout, but WordPress only emits a
   grid-template-columns rule for its generated container class in some
   configurations — here it did not, leaving one full-width track and a stack
   of cards. Declaring the tracks here makes the layout independent of that
   generated class, so it cannot silently regress again. */
.bt-rl__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(14px, 1.6vw, 22px);
	grid-auto-rows: 1fr;
	align-items: stretch;
}

/* ---------- cards ---------- */
.bt-rl__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 9px;
	background: var(--bt-white);
	border: 1.5px solid var(--bt-line);
	border-radius: 20px;
	padding: clamp(20px, 1.8vw, 26px);
	min-height: 250px;
	color: var(--bt-navy);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.bt-rl__card:hover {
	border-color: var(--bt-cyan-btn);
	box-shadow: 0 14px 34px rgba(11, 44, 77, .09);
}

.bt-rl__kicker {
	font-family: var(--bt-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bt-link);
}

.bt-rl__card-title {
	font-family: var(--bt-display);
	font-size: 19.5px;
	font-weight: 600;
	line-height: 1.26;
	letter-spacing: -.012em;
}

.bt-rl__card-body {
	font-size: 15px;
	line-height: 1.6;
	color: var(--bt-body);
	text-wrap: pretty;
	/* No line clamp: the design lets a card grow to fit its copy, and every row
	   is levelled by grid-auto-rows instead. Clamping truncated bodies that the
	   source design showed in full. */
	overflow: hidden;
}

.bt-rl__cta {
	margin-top: auto;
	padding-top: 16px;
	font-family: var(--bt-display);
	font-size: 14.5px;
	font-weight: 700;
	white-space: nowrap;
}

/* The arrow is a background image rather than inline SVG so the CTA stays
   plain editable text in the block editor. */
.bt-rl__cta a {
	display: inline-block;
	padding-right: 23px;
	color: var(--bt-link);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%231b7fa8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12.5 5.5L19 12l-6.5 6.5'/%3E%3C/svg%3E") no-repeat right center;
	transition: color .16s ease;
}

/* Stretches the CTA's own anchor across the whole card, so the card is
   clickable without a second overlay link for screen readers to announce. */
.bt-rl__cta a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
}

.bt-rl__card:hover .bt-rl__cta a {
	color: var(--bt-navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230b2c4d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12.5 5.5L19 12l-6.5 6.5'/%3E%3C/svg%3E");
}

/* ---------- disclaimer ---------- */
.bt-rl__note {
	margin-top: clamp(52px, 6.5vw, 88px);
	font-size: 14px;
	line-height: 1.6;
	color: var(--bt-muted);
}

@media (prefers-reduced-motion: reduce) {
	.bt-rl * { transition-duration: .01ms !important; }
}

/* ---------- block editor ----------
   The editor renders the same classNames without the theme's front-end
   wrapper, so the card and chip shapes are reproduced there to keep the
   editing view recognisable. */
.editor-styles-wrapper .bt-rl__card {
	background: var(--bt-white, #fff);
	border: 1.5px solid #dde7ee;
	border-radius: 20px;
	padding: 22px;
}

/* A stretched link would swallow every click in the editor canvas. */
.editor-styles-wrapper .bt-rl__cta a::after { content: none; }