/* Brentwood Table Accordion — a link table/grid of triggers plus the panels they
 * expand. The table/grid styling mirrors bw/table-link; the panel + × styling
 * mirrors bw/interlinking's accordion. Colours come from --bw-ta-primary /
 * --bw-ta-border on the wrapper; grid column count from --bw-ta-cols. */

.bw-ta,
.bw-ta * {
	box-sizing: border-box;
}

.bw-ta__link {
	color: var(--bw-ta-primary, #cc0000);
	text-decoration: none;
}

.bw-ta__trigger {
	cursor: pointer;
}

/* ── table variant ─────────────────────────────────────────────────────────── */
.bw-ta__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.bw-ta__table td {
	padding: .4rem .75rem;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid var(--bw-ta-border, #d9d9d9);
	border-right: 1px solid var(--bw-ta-border, #d9d9d9);
}

.bw-ta__table td:last-child {
	border-right: none;
}

.bw-ta__table tr:last-child td {
	border-bottom: none;
}

/* ── grid variant ──────────────────────────────────────────────────────────── */
.bw-ta {
	container-type: inline-size;
	background: var(--bw-ta-bg, transparent);
}

.bw-ta__grid {
	display: block;
}

.bw-ta__cell {
	min-width: 0;
	padding: .25rem 0;
	border-bottom: 1px solid var(--bw-ta-border, #d9d9d9);
	border-top-left-radius: .25rem;
	border-top-right-radius: .25rem;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.bw-ta__cell:hover {
	border-bottom-color: var(--bw-ta-primary, #cc0000);
	background-color: rgba(255, 255, 255, .5);
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}

.bw-ta__cell--full {
	grid-column: 1 / -1;
}

.bw-ta__cell .bw-ta__link {
	display: block;
	width: 100%;
	height: 100%;
	padding: .25rem;
	text-align: left;
	overflow-wrap: break-word;
}

@container (min-width: 480px) {
	.bw-ta__grid {
		display: grid;
		grid-template-columns: repeat(var(--bw-ta-cols, 3), minmax(0, 1fr));
		gap: 1rem;
	}
	.bw-ta__cell .bw-ta__link {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 768px) {
		.bw-ta__grid {
			display: grid;
			grid-template-columns: repeat(var(--bw-ta-cols, 3), minmax(0, 1fr));
			gap: 1rem;
		}
		.bw-ta__cell .bw-ta__link {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
	}
}

/* ── panels ────────────────────────────────────────────────────────────────── */
.bw-ta__panels {
	width: 100%;
}

/* Closed = a 0fr grid row (collapsed to 0 height); open = 1fr (content height).
 * Animating grid-template-rows gives a smooth expand/collapse without measuring
 * the content. The inner needs overflow:hidden + min-height:0 so it can clip to
 * the animating row. No JS height math, and no display:none snap. */
.bw-ta__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
	scroll-margin-top: 100px; /* clear a sticky header when scrolled into view */
}

.bw-ta__panel.is-open {
	grid-template-rows: 1fr;
}

.bw-ta__panel-inner {
	position: relative;
	overflow: hidden;
	min-height: 0;
	width: var(--bw-ta-panel-w, 100%);
	padding-top: 2.5rem;
	padding-right: 3rem;
	opacity: 0;
	transition: opacity .25s ease;
}

.bw-ta__panel.is-open .bw-ta__panel-inner {
	opacity: 1;
}

.bw-ta__panel--left   .bw-ta__panel-inner { margin-left: 0;    margin-right: auto; }
.bw-ta__panel--center .bw-ta__panel-inner { margin-left: auto; margin-right: auto; }
.bw-ta__panel--right  .bw-ta__panel-inner { margin-left: auto; margin-right: 0; }

/* Drop the default top margin on the panel's first block (e.g. a heading) so it
 * sits close under the × instead of leaving a big gap. */
.bw-ta__panel-inner > .bw-ta__close + * {
	margin-top: 0;
}

/* A collapsed panel must not leak its × — absolutely-positioned elements can
 * escape the grid 0fr / overflow:hidden clip, which showed the inner ×'s of a
 * Table Accordion nested inside another. Hide the × until the panel is open. */
.bw-ta__panel:not(.is-open) .bw-ta__close {
	display: none;
}

/* Round × close button, top-right of the panel content. */
.bw-ta__close {
	position: absolute;
	top: .5rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 50%;
	background: transparent;
	color: #333;
	cursor: pointer;
	transition: background .15s ease;
}

.bw-ta__close:hover {
	background: rgba(0, 0, 0, .06);
}

.bw-ta__close svg {
	width: .9rem;
	height: .9rem;
	display: block;
}

@media (max-width: 768px) {
	.bw-ta__panel-inner {
		width: 100%;
		padding-right: 1.5rem;
	}
}

/* ── revealed layout (bw-ta--reveal) ──────────────────────────────────────────
 * The whole block is hidden until an in-page link to its anchor is clicked
 * (view.js reveals + scrolls; the × hides it and clears the hash). Content is
 * free-form InnerBlocks; the × floats at the panel's top-right corner. */
.bw-ta--reveal.is-hidden {
	display: none;
}

.bw-ta--reveal {
	position: relative;
	display: block;
	/* Margin lives on the WRAPPER (outside the box) so it pushes the whole box —
	 * and the × pinned to its corner — down together. If it were on the inner body
	 * instead, a wrapper background would show the margin as dead-space at the top
	 * and the × would drop below the box's real top edge. */
	margin: var(--bw-ta-m, 0);
	background: var(--bw-ta-bg, transparent);
	scroll-margin-top: 90px;
}

/* position:relative → this box is the × button's positioning context, so the ×
 * is pinned to the CONTENT box (not the outer wrapper). That decouples the ×
 * from the block's margin/padding: spacing moves the whole body, and the × rides
 * along in the same top-right corner instead of drifting with the spacing. */
.bw-ta__reveal-body {
	position: relative;
	width: 100%;
	padding: var(--bw-ta-p, 0);
}

/* The × is the reveal body's LAST child (rendered after the content), so the real
 * first/last content blocks are :first-child / :nth-last-child(2) for margin trim. */
.bw-ta__reveal-body > :first-child      { margin-top: 0; }
.bw-ta__reveal-body > :nth-last-child(2) { margin-bottom: 0; }

/* Straddle the × on the content box's top-right corner — half in, half out (a
 * fixed −0.75rem, never the block's spacing, so it rides with the box when margin
 * changes). The × is a LATE, absolutely-positioned SIBLING of the rounded inner
 * Row (not a child), and none of its real ancestors — .bw-ta--reveal, the wrapping
 * Kadence column/row — set overflow:hidden, so the overhang is never clipped even
 * when the box has rounded corners or sits in a wrapping Row. Styled like the site
 * modals (interlinking / team-modal): a grey circle with a soft shadow, not the
 * bordered panel ×. The base .bw-ta__close makes it a 2rem flex circle. z-index
 * keeps it above the panel content. */
.bw-ta__reveal-close {
	top: -0.75rem;
	right: -0.75rem;
	z-index: 3;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 9999px !important;
	background: #f3f4f6 !important;
	color: #374151;
	box-shadow: 0 1px 3px 0 rgba( 0, 0, 0, .12 ), 0 1px 2px -1px rgba( 0, 0, 0, .12 );
}

.bw-ta__reveal-close:hover,
.bw-ta__reveal-close:focus {
	background: #e5e7eb !important;
	color: #1f2937;
	outline: none;
}

/* ── editor chrome ──────────────────────────────────────────────────────────── */
.bw-ta-item-editor {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	margin-bottom: 12px;
	background: #fff;
}

.bw-ta-item-editor__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid #f0f0f0;
	background: #f6f7f7;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.bw-ta-item-editor__tag {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #757575;
	white-space: nowrap;
}

.bw-ta-item-editor__label input {
	font-weight: 600;
}

.bw-ta-item-editor__body {
	padding: 10px 12px 12px;
}

.bw-ta-item-editor__body-label {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #9a9a9a;
}