/* ===========================================================================
   header-ruled-cells — the bar drawn as a table, not a row of floating labels
   ---------------------------------------------------------------------------
   Scope: .vbs-header-ruled-cells
   Depends on: css/tokens.css, css/base.css

   Every item is a cell with a vertical hairline between it and the next, full
   header height, and the row is closed by an accent-tinted action cell. A
   practice with forty pages behind four words then reads as an index rather
   than four links adrift in a lot of white, and the divisions give the bar the
   drawn, technical quality that a plain flex row has to fake with weight.

   --- the panels are not in here --------------------------------------------
   Two cells are triggers rather than links, and what they open — a mega menu —
   is picked separately, so the same header can be paired with any panel or
   none. They carry aria-expanded and aria-controls and nothing else, which is
   also the whole state contract: [aria-expanded="true"] turns the chevron and
   lifts the cell onto the panel's own ground, so the bar stays welded to a
   panel it does not contain. Same for the mobile toggle, which points at a
   popup template by id.
   ========================================================================= */

.vbs-header-ruled-cells {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--vb-surface);
	border-block-end: var(--vb-border-hair) solid var(--vb-color-rule);
}

.vbs-header-ruled-cells__inner {
	display: flex;
	align-items: stretch;
	min-block-size: 4.75rem;
}

/* --- brand ----------------------------------------------------------------
   A cell like the others, so the hairline that closes it lands on the same
   rhythm rather than floating beside it. */
.vbs-header-ruled-cells__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-inline-end: auto;
	padding-inline-end: 1.75rem;
	font-family: var(--vb-font-display);
	font-weight: var(--vb-weight-heading);
	font-size: var(--vb-fs-h3);
	letter-spacing: var(--vb-ls-h3);
	text-transform: var(--vb-case-display);
	color: var(--vb-color-ink);
	white-space: nowrap;
}
.vbs-header-ruled-cells__mark {
	inline-size: 1.4rem;
	block-size: 1.4rem;
	flex: none;
	color: var(--vb-color-accent);
}

/* --- cells ---------------------------------------------------------------- */
.vbs-header-ruled-cells__nav { display: none; }
.vbs-header-ruled-cells__cells { display: flex; align-items: stretch; block-size: 100%; }
.vbs-header-ruled-cells__cell {
	display: flex;
	align-items: stretch;
	border-inline-start: var(--vb-border-hair) solid var(--vb-color-rule);
}

.vbs-header-ruled-cells__cell-link,
.vbs-header-ruled-cells__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding-inline: 1.5rem;
	background-color: transparent;
	border: 0;
	font-size: var(--vb-fs-small);
	font-weight: var(--vb-weight-strong);
	color: var(--vb-color-ink-soft);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--vb-dur-base) var(--vb-ease-out-soft),
	            color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-ruled-cells__cell-link:hover,
.vbs-header-ruled-cells__trigger:hover {
	background-color: var(--vb-panel);
	background-image: var(--vb-panel-image);
	background-blend-mode: var(--vb-panel-blend);
	color: var(--vb-color-ink);
}

.vbs-header-ruled-cells__chev {
	inline-size: 0.75rem;
	block-size: 0.75rem;
	flex: none;
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft);
}
/* Held open by whatever opened the panel — the cell keeps the panel's ground
   so the two read as one object while the panel is on screen. */
.vbs-header-ruled-cells__trigger[aria-expanded="true"] {
	background-color: var(--vb-panel);
	background-image: var(--vb-panel-image);
	background-blend-mode: var(--vb-panel-blend);
	color: var(--vb-color-ink);
}
.vbs-header-ruled-cells__trigger[aria-expanded="true"] .vbs-header-ruled-cells__chev { transform: rotate(180deg); }

/* --- the action cell ------------------------------------------------------ */
.vbs-header-ruled-cells__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-inline: 1.75rem;
	border-inline-start: var(--vb-border-hair) solid var(--vb-color-rule);
	background-color: var(--vb-color-accent-soft);
	color: var(--vb-color-accent);
	font-size: var(--vb-fs-small);
	font-weight: var(--vb-weight-strong);
	white-space: nowrap;
	transition: background-color var(--vb-dur-base) var(--vb-ease-out-soft),
	            color var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-ruled-cells__cta svg {
	inline-size: 1rem;
	block-size: 1rem;
	flex: none;
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-ruled-cells__cta:hover {
	background-color: var(--vb-color-accent);
	color: var(--vb-color-accent-contrast);
}
.vbs-header-ruled-cells__cta:hover svg { transform: translateX(0.25em); }

/* --- the mobile trigger ---------------------------------------------------
   Six dots in a 3x2 matrix — a grid mark for a grid header — which collapse
   onto one row when the menu is open. Nothing rotates: the shape resolves. */
.vbs-header-ruled-cells__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	align-self: center;
	border: 0;
	border-radius: var(--vb-radius-sm);
	background-color: transparent;
	color: var(--vb-color-ink);
	cursor: pointer;
}

.vbs-header-ruled-cells__dots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.28rem;
	inline-size: 1.35rem;
}
.vbs-header-ruled-cells__dots > span {
	display: block;
	block-size: 0.28rem;
	border-radius: var(--vb-radius-pill);
	background-color: currentColor;
	transition: transform var(--vb-dur-base) var(--vb-ease-out-soft),
	            opacity var(--vb-dur-base) var(--vb-ease-out-soft);
}
.vbs-header-ruled-cells__toggle:hover .vbs-header-ruled-cells__dots > span:nth-child(n+4) {
	transform: translateY(-0.14rem);
}
.vbs-header-ruled-cells__toggle[aria-expanded="true"] .vbs-header-ruled-cells__dots > span:nth-child(-n+3) {
	transform: translateY(0.28rem);
	opacity: 0;
}
.vbs-header-ruled-cells__toggle[aria-expanded="true"] .vbs-header-ruled-cells__dots > span:nth-child(n+4) {
	transform: translateY(-0.28rem);
}

@media (max-width: 63.9375rem) {
	/* Brand, action and toggle in 390px. The action stays in the bar rather
	   than moving into the menu — on a phone it is the most valuable thing in
	   the header — so everything around it gives up its padding instead. */
	.vbs-header-ruled-cells__brand { padding-inline-end: 0.5rem; min-inline-size: 0; }
	.vbs-header-ruled-cells__cta {
		padding-inline: 0.9rem;
		border-inline-start: 0;
		border-radius: var(--vb-radius-sm);
		margin-block: 0.7rem;
	}
	.vbs-header-ruled-cells__cta svg { display: none; }
}

@media (min-width: 64rem) {
	.vbs-header-ruled-cells__nav { display: flex; }
	.vbs-header-ruled-cells__toggle { display: none; }
}