/* ampeco/tw-open-positions — LAYOUT + dynamic/responsive states only.
   Structure + most visuals are Tailwind utilities (DS tokens) in render.php.
   Here: section rhythm, filter/card hover + active (JS-toggled), the < 720px
   stacked layout — all via DS theme-reactive custom props (--color-* / --spacing-*
   / --shadow-*), never hardcoded hex. Mirrors careers.css #roles. */

/* No section padding here — the wrapping group block owns vertical spacing. */
/* Section heading bottom-margin is the mb-[32px] utility in render.php; the
   per-item title's 4px gap is the mb-[4px] utility on .tw-openpos__title. Here
   just zero the heading's top margin. */
.tw-openpos__heading { margin-top: 0; }
.tw-openpos__tabs { margin-bottom: var(--spacing-5xl, 2.5rem); }

/* 20px inline-SVG icons (tw-* blocks must size inline SVGs explicitly). */
.tw-openpos__ic { width: 20px; height: 20px; flex: none; }

.tw-openpos__tab,
.tw-openpos__card { transition: all .2s ease; cursor: pointer; }
.tw-openpos__tab { background: transparent; }

/* Apply CTA is the canonical site button (.btn .btn--secondary .btn--medium from
   app.css) — do NOT restyle it here; only stop it stretching in the card flex row. */
.tw-openpos__cta { flex-shrink: 0; }

/* WHOLE CARD IS THE LINK (stretched-link). The card already showed cursor:pointer
   while only the CTA was clickable — this makes the box keep that promise.
   Done with an overlay on the CTA's ::after rather than by wrapping the card in
   an <a> or adding a JS click handler, on purpose:
     • exactly ONE <a> stays in the DOM — no duplicate link announced to screen
       readers, no interactive element nested inside another;
     • middle-click, cmd-click, "copy link address" and the status-bar URL all
       keep working, which a JS window.open() would break;
     • the markup in render.php is untouched, so every existing instance renders
       byte-identical to before (see _authoring.md → "Touching a shared block").
   .ds-btn sets no `position`, so the ::after resolves against the card below.
   Trade-off, accepted: the overlay makes the card's text non-selectable. */
.tw-openpos__card { position: relative; }
.tw-openpos__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-m);
	z-index: 1;
}

/* Keyboard parity: the CTA is still the only tab stop, so lift the whole card
   when it takes focus — otherwise the focus ring sits on a button whose real
   hit area is the entire box. */
.tw-openpos__card:has(.tw-openpos__cta:focus-visible) {
	border-color: var(--color-border-default);
	box-shadow: var(--shadow-3);
	outline: 2px solid var(--color-border-brand);
	outline-offset: 2px;
}

/* Filter pills — hover + active = brand outline + brand text, transparent fill
   (per design; NOT a filled brand pill). Active also bumps weight. */
.tw-openpos__tab:hover,
.tw-openpos__tab.is-active {
	border-color: var(--color-border-brand);
	color: var(--color-text-brand);
}
.tw-openpos__tab.is-active { font-weight: 500; }

/* Role card — NO rest shadow; hover lifts (border-default + shadow-3). */
.tw-openpos__card:hover {
	border-color: var(--color-border-default);
	box-shadow: var(--shadow-3);
}

/* Filtered-out role cards. */
.tw-openpos__card[hidden] { display: none; }

/* Mobile (< 720px): stack the card, column the meta, smaller heading. */
@media (max-width: 720px) {
	.tw-openpos__card {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-xxl, 1.5rem);
		padding: var(--spacing-xxl, 1.5rem);
	}
	.tw-openpos__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-xs, .25rem);
	}
	.tw-openpos__heading { font-size: 30px; }
}