/**
 * OS Tabs (front end only; the editor shows each tab's label and panel stacked).
 * Structure is rendered server-side; this file handles states and the crossfade.
 */
.is-style-os-tabs > .os-tabs__list,
.is-style-os-tabs > .os-tabs__panels { margin-block: 0; }
.is-style-os-tabs [role="tabpanel"][hidden] { display: none !important; }
.is-style-os-tabs [role="tab"] { cursor: pointer; }
.is-style-os-tabs [role="tab"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

/* Chip tabs (Home Industries, industry stories, Contact Page/Careers regions): the ink fill is one
   pill that slides to the selected tab (os-tabs.js keeps its box in --os-pill-x/y/w/h on the row
   and adds has-pill), so the old and new tab never both turn grey mid-change. Each chip carries a
   white copy of its label (::before, from data-label) clipped to the part of the chip the pill
   covers (both axes, from each tab's own --os-tab-x/y/w/h), so labels turn white exactly where the
   pill is, also while it passes. On a row that wraps to a second line (long labels, e.g. the
   Careers Programs tabs), the vertical clip is what keeps a tab in the other row from showing a
   sliver of white just because its x-range happens to overlap the pill's — a single-row list never
   needs it (the vertical insets both come out 0 there). Layers inside the row: chip edges (::after,
   so the pill can pass over them), the pill, the labels, the white copies. Without the script the
   selected tab keeps its own fill (os-theme.css, os-industry-list.css). */
@property --os-pill-x { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --os-pill-w { syntax: "<length>"; inherits: true; initial-value: 0px; }
:is(.os-industries__tabs, .os-stories-tabs) > .os-tabs__list.has-pill { position: relative; isolation: isolate; }
:is(.os-industries__tabs, .os-stories-tabs) > .os-tabs__list.has-pill.is-pill-ready {
	transition: --os-pill-x var(--os-base) var(--os-ease), --os-pill-w var(--os-base) var(--os-ease);
}
:is(.os-industries__tabs, .os-stories-tabs) > .os-tabs__list.has-pill::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: var(--os-pill-w);
	height: var(--os-pill-h);
	border-radius: 8px;
	background: var(--wp--preset--color--ink);
	transform: translate(var(--os-pill-x), var(--os-pill-y));
	pointer-events: none;
}
:is(.os-industries__tabs, .os-stories-tabs) > .os-tabs__list.has-pill > .os-tabs__tab.os-tab-label,
:is(.os-industries__tabs, .os-stories-tabs) > .os-tabs__list.has-pill > .os-tabs__tab.os-tab-label:hover,
:is(.os-industries__tabs, .os-stories-tabs) > .os-tabs__list.has-pill > .os-tabs__tab.os-tab-label[aria-selected="true"] {
	position: relative;
	border-color: transparent;
	background: transparent;
	box-shadow: none; /* the phone chip edge (os-theme.css) would sit above the pill */
	color: var(--wp--preset--color--ink);
}
:is(.os-industries__tabs, .os-stories-tabs) > .os-tabs__list.has-pill > .os-tabs__tab::before {
	content: attr(data-label);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: inherit;
	color: var(--wp--preset--color--white);
	pointer-events: none;
	clip-path: inset(
		max(0px, calc(var(--os-pill-y) - var(--os-tab-y)))
		max(0px, calc(var(--os-tab-x) + var(--os-tab-w) - var(--os-pill-x) - var(--os-pill-w)))
		max(0px, calc(var(--os-tab-y) + var(--os-tab-h) - var(--os-pill-y) - var(--os-pill-h)))
		max(0px, calc(var(--os-pill-x) - var(--os-tab-x)))
	);
}
:is(.os-industries__tabs, .os-stories-tabs) > .os-tabs__list.has-pill > .os-tabs__tab::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -2;
	border: 1px solid #cacaca;
	border-radius: inherit;
	pointer-events: none;
	transition: border-color var(--os-fast) var(--os-ease);
}
:is(.os-industries__tabs, .os-stories-tabs) > .os-tabs__list.has-pill > .os-tabs__tab:hover::after { border-color: var(--wp--preset--color--ink); }
@media (prefers-reduced-motion: reduce) {
	:is(.os-industries__tabs, .os-stories-tabs) > .os-tabs__list.has-pill.is-pill-ready { transition: none; }
}

/* Switching (assets/js/os-tabs.js), the blog highlights' recipe (os-blog.css): the new panel is
   solid from the first frame and the old one fades away on top of it, so photos and dark cards
   never turn see-through over the white page, and nothing on the old panel moves as a block.
   Text and cards drift sideways in the direction of travel (a tab to the right: out to the left,
   in from the right; data-direction, set by the script), the new parts one after another, and
   photos settle from a slight zoom. Transform and opacity only; the panel area eases to the new
   height. */
/* flow-root: a first child's margin stays inside the panel area, so the old panel doesn't jump
   when it is lifted out of the flow (the stories carousel's -12px margin did). */
.os-tabs__panels { position: relative; display: flow-root; --os-drift: 1; }
.os-tabs__panels[data-direction="prev"] { --os-drift: -1; }
.os-tabs__panels.is-animating { transition: height var(--os-base) var(--os-ease); }
.os-tabs__panels > .is-leaving {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 1;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.os-tabs__panels > .is-leaving { animation: os-tab-fade-out 0.45s var(--os-ease) forwards; }

	/* The parts that drift: a panel's own children by default, or the copy, links and cards of
	   the known panels (Home Services and Industries, the industry stories carousels). */
	.os-tabs__panels > .is-leaving > :not(.wp-block-image, .os-industry__copy, .os-industry__visual, .os-service__content, .is-style-os-carousel, .os-carousel__controls),
	.os-tabs__panels > .is-leaving :is(.os-industry__copy, .os-service__content, .is-style-os-carousel) > * {
		animation: os-tab-text-out 0.35s var(--os-ease-in) forwards;
	}
	.os-tabs__panels > .is-entering > :not(.wp-block-image, .os-industry__copy, .os-industry__visual, .os-service__content, .is-style-os-carousel, .os-carousel__controls),
	.os-tabs__panels > .is-entering :is(.os-industry__copy, .os-service__content, .is-style-os-carousel) > * {
		animation: os-tab-text-in 0.7s var(--os-ease) 0.14s backwards;
	}
	.os-tabs__panels > .is-entering > :nth-child(2 of :not(.wp-block-image)),
	.os-tabs__panels > .is-entering :is(.os-industry__copy, .os-service__content, .is-style-os-carousel) > :nth-child(2) { animation-delay: 0.2s; }
	.os-tabs__panels > .is-entering > :nth-child(3 of :not(.wp-block-image)),
	.os-tabs__panels > .is-entering :is(.os-industry__copy, .os-service__content, .is-style-os-carousel) > :nth-child(3) { animation-delay: 0.26s; }
	.os-tabs__panels > .is-entering > :nth-child(4 of :not(.wp-block-image)),
	.os-tabs__panels > .is-entering :is(.os-industry__copy, .os-service__content, .is-style-os-carousel) > :nth-child(4) { animation-delay: 0.32s; }
	.os-tabs__panels > .is-entering > :nth-child(n+5 of :not(.wp-block-image)),
	.os-tabs__panels > .is-entering :is(.os-industry__copy, .os-service__content, .is-style-os-carousel) > :nth-child(n+5) { animation-delay: 0.38s; }
	/* Home Services: the button sits outside the copy box; it follows the copy. */
	.os-tabs__panels > .is-entering.os-service > .os-service__link { animation-delay: 0.38s; }

	/* Photos settle under the fading old panel (their boxes stay put and solid). */
	.os-tabs__panels > .is-entering .wp-block-image img { animation: os-tab-settle 1.1s var(--os-ease) backwards; }
	.os-tabs__panels > .is-entering .os-carousel__controls { animation: os-tab-fade-in 0.6s var(--os-ease) 0.3s backwards; }
}
@keyframes os-tab-fade-out { to { opacity: 0; } }
@keyframes os-tab-fade-in { from { opacity: 0; } }
@keyframes os-tab-text-out { to { opacity: 0; transform: translateX(calc(var(--os-drift) * -16px)); } }
@keyframes os-tab-text-in { from { opacity: 0; transform: translateX(calc(var(--os-drift) * 24px)); } }
@keyframes os-tab-settle { from { transform: scale(1.06); } }