/* =========================================================================
   BuyTides — Assessments hub page
   =========================================================================

   Scoped entirely to `.as-page`, the wrapper in templates/page-assessments.html,
   so nothing here can leak into the shop, the product template, or the sitewide
   chrome.

   The page is built from native Gutenberg blocks. Everything below styles those
   blocks through the classNames set on them in the editor — no block output is
   hand-written, which is what keeps the page visually editable.

   Class names avoid BEM's double hyphen on purpose: the block-comment JSON
   escapes `--` as `u002du002d`, which is easy to break by hand-editing.
   ========================================================================= */

.as-page {
	--as-navy: #2b3754;
	--as-navy-mid: #12406c;
	--as-navy-deep: #08213a;
	--as-cyan: #1fc8e3;
	--as-cyan-soft: #61ddeb;
	--as-cyan-ink: #9eedf6;
	--as-teal: #1b7fa8;
	--as-line: #dde7ee;
	--as-surface: #f4f7f9;
	--as-mist: #eef2f4;
	--as-muted: #4b6479;
	--as-muted-soft: #7c93a3;

	--as-shell: 1240px;
	--as-gutter: clamp(20px, 4vw, 48px);

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

	background: #fff;
	color: var(--as-navy);
	font-family: var(--as-sans);
}

.as-page :where(h1, h2, h3) {
	font-family: var(--as-display);
	font-weight: 600;
	letter-spacing: -0.028em;
	margin: 0;
	text-wrap: balance;
}

.as-page p {
	margin: 0;
	text-wrap: pretty;
}

/* The shared measure. Every section puts its content inside one of these. */
.as-page .as-wrap {
	width: 100%;
	max-width: var(--as-shell);
	margin-inline: auto;
	padding-inline: var(--as-gutter);
}

/* Twenty Twenty-Five hands every block a vertical block-gap margin, including
   the wrapper itself as a child of .wp-site-blocks. Left in place it opens a
   strip of page background between the announcement marquee and the hero
   video, so it is cleared outside as well as inside. */
.wp-site-blocks > .as-page {
	margin-block: 0;
}

.as-page > *,
.as-page .wp-block-group,
.as-page .wp-block-cover {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
   Block-layout resets

   Core's is-layout-flow rule puts a margin-block-start on every block after
   the first. Every container below spaces its own children with gap or an
   explicit margin, so the inherited one is cleared once here rather than
   fought rule by rule.
   ---------------------------------------------------------------------- */

.as-page :where(.as-hero-body, .as-groups, .as-group, .as-sechead, .as-grid, .as-card, .as-card-top, .as-card-foot) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

.as-page .as-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* The footage is 1920x800 (2.4:1). 46vw keeps the band close to the video's
	   own aspect at desktop widths, so it fills the frame with only a light
	   crop instead of being squeezed into a letterbox. The floor keeps the
	   headline off the marquee on a phone; the ceiling stops it eating a laptop
	   screen. */
	min-height: clamp(420px, 46vw, 620px);
	padding: clamp(64px, 7vw, 104px) 0 clamp(48px, 5vw, 76px);
	color: #fff;
	background: var(--as-navy);
}

.as-page .as-hero video.wp-block-cover__video-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	/* No brightness lift. The taller band shows the bright produce-aisle end of
	   the loop, and lifting it there pushed the headline under AA. */
	filter: saturate(1.02);
}

/* The cover block's own dim layer is switched off and replaced by ::before,
   which is a gradient rather than a flat fill: the headline sits high and the
   card grid starts right under the hero, so contrast has to hold top to
   bottom rather than in the middle only. */
.as-page .as-hero > .wp-block-cover__background {
	display: none;
}

.as-page .as-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	/* Two layers, not one flat fill. The radial pins the darkest point under the
	   headline block where contrast has to hold; the linear keeps the top edge
	   reading against the marquee and the bottom edge against the card grid.
	   A single fill dark enough for the centre flattened the whole clip. */
	background:
		radial-gradient(
			78% 82% at 50% 48%,
			rgba(43, 55, 84, 0.68) 0%,
			rgba(43, 55, 84, 0.5) 58%,
			rgba(43, 55, 84, 0.4) 100%
		),
		linear-gradient(
			180deg,
			rgba(43, 55, 84, 0.5) 0%,
			rgba(43, 55, 84, 0.42) 46%,
			rgba(43, 55, 84, 0.58) 100%
		);
}

.as-page .as-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	padding: 0;
}

.as-page .as-hero-body {
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}

.as-page .as-kick {
	font-family: var(--as-display);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--as-cyan-ink);
}

.as-page .as-hero-h1 {
	margin-block: 0 14px;
	font-size: clamp(30px, 7vw, 62px);
	line-height: 1.04;
	color: #fff;
}

.as-page .as-hero-lede {
	max-width: 700px;
	margin-inline: auto;
	font-size: clamp(15.5px, 1.4vw, 19px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.84);
}

/* The count line under the lede: "12 assessments / 3 focus areas / ...". */
.as-page .as-hero-meta {
	margin-block-start: 22px;
	font-family: var(--as-display);
	font-size: 14px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--as-cyan-soft);
}

/* Rank Math renders the trail as a plain <nav>; it is restyled rather than
   replaced so the page keeps the site's one breadcrumb implementation. The
   trail sits under the H1 rather than above it, so it carries the gap down to
   the lede instead of up from the top of the hero. */
.as-page .as-hero .rank-math-breadcrumb {
	margin-block: 0 18px;
}

.as-page .as-hero .rank-math-breadcrumb p {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	font-family: var(--as-display);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--as-cyan-ink);
}

.as-page .as-hero .rank-math-breadcrumb a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color 0.15s ease;
}

.as-page .as-hero .rank-math-breadcrumb a:hover {
	color: #fff;
}

.as-page .as-hero .rank-math-breadcrumb .separator {
	color: rgba(255, 255, 255, 0.4);
}

/* -------------------------------------------------------------------------
   Groups
   ---------------------------------------------------------------------- */

.as-page .as-sec {
	padding: clamp(28px, 3vw, 44px) 0 clamp(56px, 7vw, 96px);
}

.as-page .as-groups > .as-group + .as-group {
	margin-block-start: clamp(40px, 6vw, 88px);
}

/* Section head: title on the baseline, count pushed to the right of it. */
.as-page .as-sechead {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-block: 0 clamp(18px, 2.4vw, 28px);
}

.as-page .as-group-h {
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.15;
	color: var(--as-navy);
}

.as-page .as-group-meta {
	font-family: var(--as-display);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b8298;
	white-space: nowrap;
}

.as-page .as-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 22px);
}

/* -------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------- */

.as-page .as-card {
	display: flex;
	flex-direction: column;
	gap: clamp(11px, 1.2vw, 14px);
	padding: clamp(20px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px) clamp(18px, 2vw, 24px);
	border: 1.5px solid var(--as-line);
	border-radius: 16px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.as-page .as-card:hover {
	border-color: var(--as-cyan-soft);
	box-shadow: 0 16px 34px -22px rgba(43, 55, 84, 0.35);
	transform: translateY(-2px);
}

/* Kicker left, marker-count pill right, both on the card's first line. */
.as-page .as-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin: 0;
}

.as-page .as-card-kick {
	font-family: var(--as-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6b8298;
}

.as-page .as-card-tag {
	flex: 0 0 auto;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--as-mist);
	font-family: var(--as-display);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--as-navy-mid);
	white-space: nowrap;
}

.as-page .as-card-h {
	font-size: 22px;
	line-height: 1.18;
	color: var(--as-navy);
}

.as-page .as-card-p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--as-muted);
}

/* margin-top:auto pins the CTA to the bottom of the card, so a short and a
   long description in the same row still line their CTAs up. */
.as-page .as-card-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	margin: auto 0 0;
	padding-top: 6px;
}

.as-page .as-card-foot a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding-left: 4px;
	font-family: var(--as-display);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--as-teal);
	text-decoration: none;
}

/* The arrow is a masked SVG rather than a character so it inherits the link
   colour on hover and cannot be selected with the label text. */
.as-page .as-card-foot a::after {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M12 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.15s ease;
}

.as-page .as-card:hover .as-card-foot a {
	color: var(--as-navy-mid);
}

.as-page .as-card:hover .as-card-foot a::after {
	transform: translateX(3px);
}

/* A card whose destination is not built yet keeps the layout but stops
   advertising a link, so nothing on the page navigates to nowhere. */
.as-page .as-card-foot a[href="#"],
.as-page .as-card-foot a[href=""] {
	color: var(--as-muted-soft);
	cursor: default;
	pointer-events: none;
}

/* A card for a panel that is not open for booking yet drops the CTA entirely
   and carries a status pill instead. The foot keeps the linked cards' 44px
   height so the two kinds of card still line up across a row. */
.as-page .as-card-soon {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--as-mist);
	font-family: var(--as-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--as-muted-soft);
	white-space: nowrap;
}

.as-page .as-card-foot:has(.as-card-soon) {
	min-height: 44px;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 860px) {
	.as-page .as-grid {
		gap: 14px;
	}
}

@media (max-width: 640px) {
	.as-page .as-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 420px) {
	.as-page .as-card-h {
		font-size: 19.5px;
	}
}

/* Touch devices fire :hover on tap and then keep it, so the lift is dropped
   rather than left stuck on the last card the user touched. */
@media (hover: none) {
	.as-page .as-card:hover {
		border-color: var(--as-line);
		box-shadow: none;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.as-page .as-card,
	.as-page .as-card-foot a::after {
		transition: none;
	}

	.as-page .as-card:hover {
		transform: none;
	}
}