/**
 * Application Hub section block — public + editor-canvas styling.
 * Relies on tokens/utilities from application-hub-tokens.css (declared as a
 * block.json style dependency, so it always loads alongside this file).
 */

.wp-block-application-hub-section {
	box-sizing: border-box;
	color: var(--ah-color-text);
	font-size: var(--ah-font-size-body);
	line-height: 1.5;
	margin-bottom: 20px;
}

/* Industry/Area/Application page: every top-level section block (Overview,
   Rheonics Advantage, Applications, Benefits, Solutions, Certifications,
   Featured Articles, Get in contact…), whatever mix of block types they are,
   guaranteed at least 80px apart. `gap` never collapses the way adjacent
   margins do (PublicPageChrome::wrap() wraps them in this container) — each
   block's own margin is zeroed out here so it can't ALSO add to the gap and
   produce an inconsistent, larger-than-intended space on top of it. */
.application-hub-page__sections {
	display: flex;
	flex-direction: column;
}
.application-hub-page__sections > .wp-block-application-hub-section,
.application-hub-page__sections > .wp-block-media-text,
.application-hub-page__sections > .wp-block-application-hub-certifications,
.application-hub-page__sections > .wp-block-application-hub-promo-banner,
.application-hub-page__sections > .application-hub-card-grid {
	margin-top: 0;
	margin-bottom: 0;
	/* Application Area/Application pages have simpler, fewer sections
	   (Sensor Installation, Certifications, Applications listing, or an
	   Article's own body) than an Industry page's elaborate layout — 80px
	   read as too much space there. Industry pages get that fuller 80px
	   back via the more specific override below (PublicPageChrome::wrap()
	   adds the .application-hub-page--{type} modifier this targets). */
	padding-top: var(--ah-space-4);
	padding-bottom: var(--ah-space-7);
}
.application-hub-page--industry .application-hub-page__sections > .wp-block-application-hub-section,
.application-hub-page--industry .application-hub-page__sections > .wp-block-media-text,
.application-hub-page--industry .application-hub-page__sections > .wp-block-application-hub-certifications,
.application-hub-page--industry .application-hub-page__sections > .wp-block-application-hub-promo-banner,
.application-hub-page--industry .application-hub-page__sections > .application-hub-card-grid {
	padding-top: 80px;
	padding-bottom: 80px;
}
/* The very first section (Overview on Industry pages, Sensor Installation
   on Application Area pages, whatever a page starts with) directly follows
   the sticky secondary nav, which already reads as its own visual break —
   stacking the container's own top padding (var(--ah-space-7), or 80px on
   Industry) plus the block's own margin-top (e.g. .wp-block-media-text's
   margin-block, see application-hub-page-chrome.css) on top of that left an
   oversized gap. Capped at 40px total and !important: the Industry-specific
   rule above is one class more specific (".application-hub-page--industry
   .application-hub-page__sections > …") than a plain ":first-child" selector
   can match, so without !important this loses to it there and Industry's
   Overview keeps its full 80px regardless of source order. margin-top: 0
   here also replaces the old ".application-hub-page__anchor + .wp-block-media-text"
   reset in application-hub-page-chrome.css, which never matched anything —
   the anchor span is a sibling of this whole container, not of the section
   block nested inside it. */
.application-hub-page__sections > *:first-child {
	padding-top: 10px !important;
	margin-top: 0 !important;
}
@media (max-width: 767px) {
	.application-hub-page__sections > *:first-child {
		padding-top: 0 !important;
	}
}

/* 36px/600 by default (Industry, Application Area, Application, and
   Editorial Collection, which shares Application's template) — Article
   overrides this back down to 28px/600 below (denser reading content, one
   shared size read too big for it). !important throughout: .ah-title-lg
   (application-hub-tokens.css) sets its own font shorthand on the same
   element, and without !important these longhand overrides lose to it. */
.application-hub-section__heading {
	color: var(--ah-color-brand);
	margin-bottom: var(--ah-space-6) !important;
	font-size: 36px !important;
	font-weight: 600 !important;
}
.application-hub-page--article .application-hub-section__heading {
	font-size: 28px !important;
	font-weight: 600 !important;
}
@media (max-width: 767px) {
	.application-hub-section__heading {
		font-size: 28px !important;
	}
}

.application-hub-section--panel {
	background: var(--ah-color-surface-accent);
	border-left: 4px solid var(--ah-color-brand);
	padding: var(--ah-space-5);
}

/* Breadcrumb (shared by the plain and hero entity-header variants).
   A deep trail (Industry > Area > Application > Article) used to wrap
   across multiple lines and break the hero header's fixed height — the
   middle now collapses server-side into a single "…" crumb (see
   BlockRegistrar::render_breadcrumb()), and this stays a single
   non-wrapping row with per-label truncation plus a horizontal-scroll
   fallback as a last resort. */
.application-hub-breadcrumb {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--ah-space-2);
	font: 400 0.9375rem/1.4 var(--ah-font-family);
	color: #838383;
	margin-bottom: var(--ah-space-6);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.application-hub-breadcrumb__crumb {
	display: flex;
	align-items: center;
	gap: var(--ah-space-2);
	flex: none;
}
/* The current page is never truncated — only the ancestor crumbs before
   it get an ellipsis; the row scrolls horizontally if it doesn't fit. */
.application-hub-breadcrumb__crumb:not(.application-hub-breadcrumb__crumb--current) a,
.application-hub-breadcrumb__crumb:not(.application-hub-breadcrumb__crumb--current) span:not(.application-hub-breadcrumb__sep) {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 220px;
}
.application-hub-breadcrumb__crumb--current {
	white-space: nowrap;
}
.application-hub-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.application-hub-breadcrumb a:hover {
	color: var(--ah-color-brand-light);
	text-decoration: none;
}
.application-hub-breadcrumb [aria-current="page"] {
	color: var(--ah-color-brand-light);
	font-weight: 500;
}
.application-hub-breadcrumb__sep {
	color: #838383;
	font-size: 1.25em;
	font-weight: 400;
	line-height: 1;
	flex: none;
}
.application-hub-breadcrumb--light,
.application-hub-breadcrumb--light a {
	color: rgba(255, 255, 255, 0.82);
}
.application-hub-breadcrumb--light [aria-current="page"] {
	color: var(--ah-color-brand-light);
}

@media (max-width: 767px) {
	.application-hub-breadcrumb__crumb:not(.application-hub-breadcrumb__crumb--current) a,
	.application-hub-breadcrumb__crumb:not(.application-hub-breadcrumb__crumb--current) span:not(.application-hub-breadcrumb__sep) {
		max-width: 140px;
	}
	/* Tightest space of all — drop the immediate-parent crumb too,
	   leaving Home › … › Current (or Home › Current with no ellipsis
	   when the trail was already short). */
	.application-hub-breadcrumb__crumb--parent {
		display: none;
	}
}

/* Entity header */
.application-hub-section--entity-header {
	margin-top: 0;
}
/* Full-bleed: the hero's photo/color band spans the viewport regardless of
   the max-width column every other section sits in; only its own text
   content (below) is re-inset to that same readable column. */
.application-hub-section--hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	background-color: var(--ah-color-surface-dark);
	background-size: cover;
	background-position: center;
	color: var(--ah-color-text-inverse);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 0px;
	height: 400px;
}
/* State 2: a real photo behind a brand-color scrim so the white heading/lede
   stay legible over any image. State 1 (no image) is just the plain
   background-color above, set directly by the hero class. */
.application-hub-section--hero-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ah-color-hero-overlay);
}
.application-hub-section__header-content {
	position: relative;
	z-index: 1;
}
.application-hub-section--hero .application-hub-section__header-content {
	max-width: var(--ah-container-max);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--ah-container-pad);
}
.application-hub-section--hero .ah-hero-title {
	font: 700 48px/1.2 var(--ah-font-family);
	margin-bottom: 20px;
	max-width: 56rem;
}
/* Article's own plain h1 — same markup/class as the hero title, but
   never inside .application-hub-section--hero, so this can't leak into
   the hero variant regardless of which properties it sets here. */
.application-hub-section--entity-header:not(.application-hub-section--hero) .ah-hero-title {
	font-size: 42px;
	margin-top: 0;
	margin-bottom: 22px;
}

.application-hub-section--hero .ah-hero-title,
.application-hub-section--hero .application-hub-section__lede,
.application-hub-section--hero .application-hub-section__date {
	color: var(--ah-color-text-inverse);
}
.application-hub-section--hero .ah-subtitle {
	max-width: 538px;
	color: var(--ah-color-text-inverse);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	margin-top: 20px;
}
.application-hub-section__lede {
	border-left: 3px solid rgba(0, 0, 0, 0.10);
	padding-left: var(--ah-space-4);
	margin-block: var(--ah-space-5);
	color: var(--ah-color-text-subtle);
}
.application-hub-section__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ah-space-3);
}
.application-hub-section__read-time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #5f6f7f;
	font: 400 12px/1.4 var(--ah-font-family);
	white-space: nowrap;
}
.application-hub-section__read-time svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	stroke-width: 1.8;
}
.application-hub-section--hero .application-hub-section__read-time {
	color: rgba(255, 255, 255, 0.88);
}
.application-hub-section__date {
	color: #5f6f7f;
	font: 400 12px/1.4 var(--ah-font-family);
}
.application-hub-section__featured-image {
	margin: var(--ah-space-5) 0 0;
}
.application-hub-section__featured-image img {
	display: block;
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	border-radius: var(--ah-radius-lg);
	box-shadow: 0 18px 45px rgba(15, 61, 99, 0.10);
}
.application-hub-section--hero .application-hub-section__featured-image img {
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

/* Industry hero: text + CTA left, a dedicated image right (below on mobile)
   — deliberately independent of .application-hub-section--hero/-hero-photo
   above (no dark scrim), since this is a solid brand-blue fill rather than a
   photo. Full-bleed via the same 100vw technique as .application-hub-section--hero. */
.application-hub-section--industry-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 0;
	background: linear-gradient(135deg, var(--ah-color-brand) 0%, #0976bf 100%);
}
/* With no hero image, the photo column is empty and the hero otherwise
   collapses to hug the text tightly — the with-image state doesn't need
   this since the photo itself already sets a taller height. */
.application-hub-section--industry-hero--no-media {
	padding-block: 80px;
}
.application-hub-industry-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--ah-space-6);
}
.application-hub-industry-hero__content .ah-hero-title {
	font: 700 48px/1.2 var(--ah-font-family);
	margin-bottom: var(--ah-space-3);
	color: var(--ah-color-text-inverse);
}
.application-hub-industry-hero__content .ah-subtitle {
	max-width: 46rem;
	color: var(--ah-color-text-inverse);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: var(--ah-space-5);
}
.application-hub-industry-hero__cta {
	display: inline-flex;
	/* Overrides .ah-btn's own fully-round/tighter defaults for this one
	   instance only — a moderate radius and roomier padding, not a pill. */
	padding: 14px 28px;
	border-radius: var(--ah-radius-md);
}
.application-hub-industry-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}
/* Two <img> tags are only in the markup when a distinct mobile image is set
   (BlockRegistrar::render_industry_hero()) — desktop shows by default, the
   767px rule below swaps to the mobile one. When no mobile image is set,
   there's only ever one plain <img> and neither of these classes exists. */
.application-hub-industry-hero__media-mobile {
	display: none;
}
/* Tablet (and everything narrower, refined further below): single column,
   image below text. Sized by viewport width alone, not orientation — an
   orientation query leaves a landscape tablet outside a "portrait" rule
   entirely (still full-bleed-oversized) while a portrait phone matches both
   this and the 767px block below at once, fighting over the final size. One
   width-based tier per range avoids both. */
@media (max-width: 1024px) {
	.application-hub-industry-hero__inner {
		grid-template-columns: 1fr;
		padding-block: var(--ah-space-6);
	}
	.application-hub-industry-hero__media {
		order: 2;
		max-width: 60%;
		margin-inline: auto;
	}
}
@media (max-width: 767px) {
	.application-hub-industry-hero__inner {
		/* A bit more breathing room above the hero content specifically on
		   mobile, on top of the 1024px rule's padding-block above. */
		padding-top: var(--ah-space-7);
	}
	.application-hub-industry-hero__content .ah-hero-title {
		font-size: 36px;
	}
	.application-hub-industry-hero__content .ah-subtitle {
		font-size: 16px;
	}
	.application-hub-industry-hero__media {
		max-width: 75%;
		margin-inline: auto;
	}
	.application-hub-industry-hero__media-desktop {
		display: none;
	}
	.application-hub-industry-hero__media-mobile {
		display: block;
	}
}

/* quick_answer: rendered as an accented lede with a small uppercase eyebrow */
.application-hub-section--quick_answer {
	border-left: 3px solid var(--ah-color-brand);
	padding: var(--ah-space-3) var(--ah-space-4) var(--ah-space-1);
	font-size: var(--ah-font-size-regular);
	color: var(--ah-color-text);
	background-color: var(--ah-color-surface-accent);
}
.application-hub-section__eyebrow {
	display: block;
	color: var(--ah-color-brand);
	margin-bottom: var(--ah-space-2);
}

/* Figures */
.application-hub-section__figure {
	margin: 0 auto;
	max-width: 720px;
	width: 100%;
	height: auto;
}
.application-hub-section__figure img {
	width: 100%;
	height: auto;
	border-radius: var(--ah-radius-md);
	display: block;
}
.application-hub-section__figure figcaption {
	text-align: center;
	color: var(--ah-color-text-subtle);
	margin-top: var(--ah-space-2);
}
.application-hub-section__image-required {
	background: var(--ah-color-surface-accent-strong);
	border: 1px dashed var(--ah-color-brand);
	border-radius: var(--ah-radius-md);
	padding: var(--ah-space-5);
	text-align: center;
	color: var(--ah-color-brand);
}

/* Native <video> (a plain HTML5 element, not an embed) — same shape as
   figures above. */
.application-hub-section__video {
	margin: 0 auto;
	max-width: 600px;
	width: 100%;
}
.application-hub-section__video video {
	display: block;
	width: 100%;
	height: auto;
	/* A plain width:100%/height:auto pair only computes a real height once
	   the browser has loaded enough of the video to know its intrinsic
	   aspect ratio — until then (and on the front end, where nothing forces
	   that load the way the editor canvas does), the box can render as a
	   sliver holding just the control bar. Reserving a 16:9 box up front
	   means it never collapses, on the front end or before metadata loads;
	   the video itself still displays correctly (letterboxed if its real
	   ratio differs) rather than fighting a computed height of near-zero. */
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background: #000;
	border-radius: var(--ah-radius-md);
}
.application-hub-section__video-caption {
	text-align: center;
	color: var(--ah-color-text-subtle);
	margin-top: var(--ah-space-2);
}
.application-hub-section__video-required {
	background: var(--ah-color-surface-accent-strong);
	border: 1px dashed var(--ah-color-brand);
	border-radius: var(--ah-radius-md);
	padding: var(--ah-space-5);
	text-align: center;
	color: var(--ah-color-brand);
}

.application-hub-section__testimonial {
	margin: 0 auto;
	max-width: 640px;
	padding: 0;
	text-align: center;
}
.application-hub-section__testimonial-mark {
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 72px;
	line-height: 1;
	color: var(--ah-color-brand-light);
	margin-bottom: var(--ah-space-2);
}
.application-hub-section__testimonial-quote {
	margin: 0;
	font-style: italic;
	font-size: var(--ah-font-size-xl);
	line-height: 1.5;
	color: var(--ah-color-text);
}
.application-hub-section__testimonial-author {
	margin-top: var(--ah-space-4);
	font-style: normal;
	font-weight: 600;
	font-size: var(--ah-font-size-sm);
	color: var(--ah-color-brand);
}
.application-hub-section__testimonial-author::before {
	content: "— ";
}
.application-hub-section__testimonial-required {
	background: var(--ah-color-surface-accent-strong);
	border: 1px dashed var(--ah-color-brand);
	border-radius: var(--ah-radius-md);
	padding: var(--ah-space-5);
	text-align: center;
	color: var(--ah-color-brand);
}

/* Data tables */
.application-hub-section--data_table {
	max-width: 100%;
}
.application-hub-section__table-scroll {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid rgba(15, 83, 135, 0.16);
	border-radius: var(--ah-radius-md);
	background: var(--ah-color-surface-card);
	box-shadow: 0 14px 34px rgba(15, 61, 99, 0.08);
}
.wp-block-application-hub-section table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	min-width: 640px;
	background: var(--ah-color-surface-card);
}
.wp-block-application-hub-section th,
.wp-block-application-hub-section td {
	border: 0;
	border-right: 1px solid rgba(15, 83, 135, 0.14);
	border-bottom: 1px solid rgba(15, 83, 135, 0.14);
	padding: 12px 10px;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}
.wp-block-application-hub-section thead th {
	background: linear-gradient(180deg, #f4fbff 0%, #eaf6fd 100%);
	color: var(--ah-color-brand);
	font: 700 0.95rem/1.35 var(--ah-font-family);
	letter-spacing: 0.01em;
}
.wp-block-application-hub-section tbody td {
	color: var(--ah-color-text);
	font: 400 var(--ah-font-size-body)/1.55 var(--ah-font-family);
}
.wp-block-application-hub-section tbody tr:nth-child(even) td {
	background: rgba(55, 170, 225, 0.04);
}
.wp-block-application-hub-section tbody tr:hover td {
	background: rgba(55, 170, 225, 0.08);
}
.wp-block-application-hub-section th:last-child,
.wp-block-application-hub-section td:last-child {
	border-right: 0;
}
.wp-block-application-hub-section tbody tr:last-child td {
	border-bottom: 0;
}
.application-hub-section__table-scroll::-webkit-scrollbar {
	height: 10px;
}
.application-hub-section__table-scroll::-webkit-scrollbar-track {
	background: rgba(15, 83, 135, 0.08);
	border-radius: 999px;
}
.application-hub-section__table-scroll::-webkit-scrollbar-thumb {
	background: rgba(15, 83, 135, 0.35);
	border-radius: 999px;
}
.application-hub-section__table-scroll::-webkit-scrollbar-thumb:hover {
	background: rgba(15, 83, 135, 0.55);
}
.application-hub-section__note {
	color: var(--ah-color-text-subtle);
	margin-top: var(--ah-space-3);
	font-size: 0.875rem;
	line-height: 1.5;
}

@media (max-width: 767px) {
	.application-hub-section__table-scroll {
		margin-inline: calc(var(--ah-container-pad) * -1);
		width: calc(100% + (var(--ah-container-pad) * 2));
		max-width: none;
		border-radius: 0;
		border-inline: 0;
	}

	.application-hub-section--hero .application-hub-section__header-content {
		width: auto;
	}
	.application-hub-section--hero .ah-hero-title {
		font-size: 36px;
	}
	.application-hub-section--hero .ah-subtitle {
		font-size: 16px;
	}
	.application-hub-section--entity-header:not(.application-hub-section--hero) .ah-hero-title {
		font-size: 32px;
	}

	.wp-block-application-hub-section table {
		min-width: 620px;
	}
	.wp-block-application-hub-section th,
	.wp-block-application-hub-section td {
		padding: 14px 16px;
	}
}

/* Stat tiles: short value/label highlight cards (e.g. "Inline" / "Batter
   viscosity as a control variable — SRV"). auto-fill (not auto-fit) keeps
   each tile's width constant whether there are two tiles or six, same
   reasoning as the Sensor Installation cards. */
.application-hub-section__stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--ah-space-4);
	margin-top: var(--ah-space-3);
}
@media (min-width: 1025px) {
	/* auto-fit + a capped track width (instead of 1fr) lets fewer tiles
	   than fit-per-row collapse to a compact row that justify-content can
	   center, rather than stretching to fill the row from the left. */
	.application-hub-section__stats {
		grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
		justify-content: center;
	}
}
.application-hub-section__stat-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--ah-space-1);
	padding: var(--ah-space-4);
	height: 120px;
	text-align: center;
	background: var(--ah-color-surface-accent);
	border-radius: var(--ah-radius-md);
}
.application-hub-section__stat-value {
	color: var(--ah-color-brand);
}
.application-hub-section__stat-label {
	color: var(--ah-color-text-subtle);
}

/* Industry Overview: 3 background-image cards, heading/text bottom-aligned
   in white over a gradient scrim. Heading/lede for this section type are
   centered (unlike every other section, which is left-aligned) per the
   Industry page spec. */
.application-hub-section--overview_cards .application-hub-section__heading,
.application-hub-section--overview_cards .ah-body-lg {
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
}
.application-hub-section--overview_cards .application-hub-section__heading {
	font-weight: 600;
}
.application-hub-section__overview-subtitle {
	margin-top: var(--ah-space-2);
	margin-bottom: var(--ah-space-4);
	text-align: center;
}
.application-hub-section__overview-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--ah-space-4);
	margin-top: var(--ah-space-5);
}
.application-hub-section__overview-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	overflow: hidden;
	border-radius: var(--ah-radius-lg);
	background-color: var(--ah-color-surface-dark);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.application-hub-section__overview-card-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(0, 0, 0, 0) 100%);
}
.application-hub-section__overview-card-content {
	position: relative;
	padding: var(--ah-space-5);
	color: var(--ah-color-text-inverse);
}
.application-hub-section__overview-card-content h3 {
	color: var(--ah-color-text-inverse);
	font-size: 20px;
	margin-bottom: var(--ah-space-2);
}
.application-hub-section__overview-card-content p {
	color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 767px) {
	.application-hub-section__overview-cards {
		grid-template-columns: 1fr;
	}
}

/* Industry Benefits: two 3-item columns flanking one shared vertical product
   image — heading/subtitle centered the same way overview_cards' are above.
   Stacks to column 1, then the image, then column 2 on mobile: the natural
   result of the 3-column grid collapsing to one, in document order. */
/* Full-bleed white band — same 100vw negative-margin technique as the hero
   and the Applications tinted band above, so Benefits visibly reads as its
   own row distinct from the plain page background around it (see
   BlockRegistrar::render_section()'s ah-container inset wrap for this type). */
.application-hub-section--split_benefits {
	background: var(--ah-color-surface-card);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-block: var(--ah-space-7);
}
.application-hub-section--split_benefits .application-hub-section__heading {
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
}
.application-hub-split-benefits {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--ah-space-6);
	margin-top: var(--ah-space-5);
}
.application-hub-split-benefits__column {
	display: flex;
	flex-direction: column;
	gap: var(--ah-space-5);
}
/* The two columns hug the center image instead of stretching across their
   whole grid track — tighter/more centered, closer to the reference. Only
   the columns' own box shifts inward; text inside stays left-aligned. */
.application-hub-split-benefits__column:first-child {
	justify-self: end;
}
.application-hub-split-benefits__column:last-child {
	justify-self: start;
}
.application-hub-split-benefits__column-heading {
	color: var(--ah-color-brand);
	font-size: 24px !important;
}
.application-hub-split-benefits__item {
	display: flex;
	align-items: flex-start;
	gap: var(--ah-space-3);
}
.application-hub-split-benefits__icon {
	flex: none;
	width: 75px;
	height: 75px;
	object-fit: contain;
}
.application-hub-split-benefits__icon--placeholder {
	background: var(--ah-color-border);
}
.application-hub-split-benefits__item-text {
	margin: auto 0;
}
.application-hub-split-benefits__item-text h4 {
	margin: 0 0 var(--ah-space-1) 0;
	font-size: 16px;
}
.application-hub-split-benefits__item-text p {
	margin: 0;
	color: var(--ah-color-text-subtle);
	font-size: 16px;
}
.application-hub-split-benefits__center {
	display: flex;
	justify-content: center;
}
.application-hub-split-benefits__media {
	width: 100%;
	max-width: 220px;
	height: auto;
	object-fit: contain;
}
.application-hub-split-benefits__media--placeholder {
	width: 220px;
	aspect-ratio: 9 / 16;
	border-radius: var(--ah-radius-md);
	background: var(--ah-color-border);
}
/* 767px matches the mobile breakpoint used everywhere else on this page
   (.application-hub-section__heading, the breadcrumb, etc.) — 900px left
   tablet-portrait widths (e.g. 768-899px) stacked instead of showing the
   same 3-column layout desktop gets. */
@media (max-width: 767px) {
	.application-hub-split-benefits {
		grid-template-columns: 1fr;
	}
	/* The inward-hugging alignment above is a desktop-only refinement — the
	   stacked mobile layout stays full-width, unaffected. */
	.application-hub-split-benefits__column:first-child,
	.application-hub-split-benefits__column:last-child {
		justify-self: stretch;
	}
	.application-hub-split-benefits__media,
	.application-hub-split-benefits__media--placeholder {
		max-width: 200px;
	}
}

/* Industry Solutions: every published sensor product, plain simple cards —
   heading/subtitle centered the same way Advantage/Benefits are above.
   BlockRegistrar::render_solutions()/ProductsGateway::get_sensors(). */
.application-hub-section--solutions .application-hub-section__heading {
	text-align: center;
	max-width: 46rem;
	margin-inline: auto;
}
/* Infinite, auto-advancing carousel — see initSolutionsCarousels() in
   application-hub-page-chrome.js for the Swiper loop/autoplay config (no
   pagination dots, arrows only). Outer padding-inline clears room for the
   circular arrow buttons so they don't overlap the first/last card. */
.application-hub-solutions {
	position: relative;
	margin-top: var(--ah-space-7);
	padding-inline: 44px;
	/* Swiper's own core CSS always sets .swiper{overflow:hidden} — required
	   to hide off-screen slides — which otherwise clips the card's own
	   box-shadow flush at the top/bottom (no such clipping horizontally
	   since padding-inline above already gives it room on that axis). */
	padding-block: 16px;
	--swiper-theme-color: var(--ah-color-brand);
}
.application-hub-solutions .swiper-slide {
	height: auto;
	display: flex;
	/* slidesPerView: 2 at tablet width, 3 at desktop (see
	   initSolutionsCarousels()) divides the track evenly between that many
	   slides — the card's own max-width (below) just keeps each one from
	   stretching too wide, it doesn't fix the slide width itself. */
	justify-content: center;
}
/* Chevron-in-a-circle arrows on each side of the row — Swiper's own bundled
   CSS/JS draws the chevron itself inside these empty elements, this only
   adds the circular button chrome around it. */
.application-hub-solutions .swiper-button-prev,
.application-hub-solutions .swiper-button-next {
	box-sizing: border-box;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	background: var(--ah-color-surface-card);
	border: 1px solid var(--ah-color-border);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.application-hub-solutions .swiper-button-prev svg,
.application-hub-solutions .swiper-button-next svg {
	width: 14px;
	height: 14px;
}
.application-hub-solutions__card {
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	background: var(--ah-color-surface-card);
	border-radius: var(--ah-radius-md);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
/* Rounded only at the top, to match the card's own corners, since
   overflow:hidden on the card itself (removed above) also clipped its own
   box-shadow — the shadow and the image-corner clipping can't both live on
   the same element. */
.application-hub-solutions__media {
	width: 100%;
	height: 250px;
	object-fit: contain;
	border-radius: var(--ah-radius-md) var(--ah-radius-md) 0 0;
}
.application-hub-solutions__media--placeholder {
	height: 250px;
	background: var(--ah-color-border);
	border-radius: var(--ah-radius-md) var(--ah-radius-md) 0 0;
}
.application-hub-solutions__body {
	margin-top: 20px;
	padding: 0 var(--ah-space-4) var(--ah-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--ah-space-1);
}
.application-hub-solutions__shortname {
	font-size: 14px;
	font-weight: 400;
	color: var(--ah-color-brand);
}
.application-hub-solutions__body h3 {
	font-size: 24px;
	font-weight: 600;
	color: var(--ah-color-brand);
	margin: 0;
}
.application-hub-solutions__body p {
	font-size: 14px;
	color: var(--ah-color-text-subtle);
	margin: 0;
	/* Clamped instead of a fixed card height (removed above) — a longer
	   sensor description no longer gets vertically cut off, it just
	   truncates its own text and cards stay the same height as each other. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* "Key Capabilities for {Industry}" rotator, nested inside the Rheonics
   Advantage media-text block (BlockRegistrar::render_capability_carousel()).
   Only .is-active is shown; initCapabilityCarousels() in
   application-hub-page-chrome.js swaps which slide carries that class on a
   timer — no library, no arrows/dots. */
.application-hub-capability-carousel-block {
	margin-top: var(--ah-space-6);
}
.application-hub-capability-carousel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ah-space-3);
}
.application-hub-capability-carousel__label {
	font: 500 20px var(--ah-font-family);
	color: var(--ah-color-brand);
	margin: 0;
}
/* Plain unicode glyphs rather than an icon font/SVG dependency for one
   control — decorative only, the real label is the button's aria-label
   (set server-side and kept in sync on toggle, see
   application-hub-page-chrome.js initCapabilityCarousels()). */
.application-hub-capability-carousel__pause {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--ah-color-border);
	background: var(--ah-color-surface-card);
	color: var(--ah-color-text-subtle);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.application-hub-capability-carousel__pause:hover {
	color: var(--ah-color-brand);
	border-color: var(--ah-color-brand);
}
.application-hub-capability-carousel__pause::before {
	content: "\23F8"; /* pause glyph */
}
.application-hub-capability-carousel__pause.is-paused::before {
	content: "\25B6"; /* play glyph */
}
.application-hub-capability-carousel {
	margin-top: var(--ah-space-5);
}
.application-hub-capability-carousel__slide {
	display: none;
	align-items: center;
	gap: var(--ah-space-4);
}
.application-hub-capability-carousel__slide.is-active {
	display: flex;
}
.application-hub-capability-carousel__icon {
	flex: none;
	width: 48px;
	height: 48px;
	object-fit: contain;
}
.application-hub-capability-carousel__icon--placeholder {
	border-radius: var(--ah-radius-sm);
	background: var(--ah-color-surface-accent-strong);
}
.application-hub-capability-carousel__text {
	color: var(--ah-color-text);
	min-width: 0;
	overflow-wrap: break-word;
}
.application-hub-capability-carousel__text p {
	margin: 0;
}

/* Rheonics Advantage details media-text: vertical spacing between it and
   its neighbors comes from .application-hub-page__sections's own `gap`
   above, not a margin here — and — unlike the Overview media-text above it
   — the image should trail the content on mobile, not lead it. WP core's
   is-stacked-on-mobile always puts .media at grid-row:1 regardless of
   mediaPosition (see wp-includes/js/dist/block-library.js), so this
   overrides just that row order for this one instance. */
.application-hub-advantage-media {
	max-width: var(--ah-container-max);
	margin: var(--ah-space-6) auto;
}

.application-hub-advantage-media .wp-block-heading {
	font: 700 32px/1.25 var(--ah-font-family);
}
@media (max-width: 767px) {
	.application-hub-advantage-media .wp-block-heading {
		font-size: 26px;
	}
}
@media (max-width: 600px) {
	.application-hub-advantage-media.is-stacked-on-mobile > .wp-block-media-text__media {
		grid-row: 2;
	}
	.application-hub-advantage-media.is-stacked-on-mobile > .wp-block-media-text__content {
		grid-row: 1;
	}
}

/* FAQ accordion */
.application-hub-section--faq .application-hub-section__heading {
	margin-bottom: var(--ah-space-5);
}
.application-hub-section__faq {
	display: flex;
	flex-direction: column;
	gap: var(--ah-space-3);
}
.application-hub-section__faq-item {
	border: 1px solid rgba(15, 83, 135, 0.16);
	border-radius: var(--ah-radius-md);
	overflow: hidden;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
	margin-bottom: 5px;
}
.application-hub-section__faq-item summary {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--ah-space-3);
	min-height: 58px;
	padding: 0px 56px 0px 18px;
	cursor: pointer;
	list-style: none;
	background-color: var(--ah-color-surface-card);
	color: var(--ah-color-brand);
	font-size: var(--ah-font-size-body);
	line-height: 1.35;
	border-radius: inherit;
	transition: color 0.16s ease, background-color 0.16s ease;
}
.application-hub-section__faq-item summary::-webkit-details-marker {
	display: none;
}
.application-hub-section__faq-item summary::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-65%) rotate(45deg);
	transition: transform 0.16s ease;
}
.application-hub-section__faq-item:hover {
	border-color: rgba(15, 83, 135, 0.35);
	box-shadow: 0 8px 22px rgba(15, 83, 135, 0.08);
}
.application-hub-section__faq-item[open] {
	border-color: rgba(15, 83, 135, 0.38);
	box-shadow: 0 10px 26px rgba(15, 83, 135, 0.10);
}
.application-hub-section__faq-item[open] summary {
	color: var(--ah-color-brand-hover);
	background: rgba(55, 170, 225, 0.08);
}
.application-hub-section__faq-item[open] summary::after {
	transform: translateY(-35%) rotate(-135deg);
}
.application-hub-section__faq-item div {
	padding: 10px 18px;
	color: var(--ah-color-text);
	font-size: var(--ah-font-size-body);
	line-height: 1.65;
	background-color: var(--ah-color-surface-card);
}
.application-hub-section__faq-item div > :first-child {
	margin-top: 0;
}
.application-hub-section__faq-item div > :last-child {
	margin-bottom: 0;
}

/* CTA */
.application-hub-section--cta {
	text-align: left;
}
.application-hub-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ah-space-3);
	margin-top: var(--ah-space-4);
}

/* Child listing card grid */
.application-hub-section__children {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: var(--ah-space-5);
}
.application-hub-section__child-card {
	display: flex;
	flex-direction: column;
	gap: var(--ah-space-2);
}
.application-hub-section__child-card h3 {
	margin: 0;
}
.application-hub-section__child-card h3 a {
	color: var(--ah-color-text);
	text-decoration: none;
}
.application-hub-section__child-card p {
	color: var(--ah-color-text-subtle);
	flex-grow: 1;
	margin-bottom: var(--ah-space-5);
}

/* Application page "All articles" cards: no thumbnail, audience + Read Article. */
.application-hub-section--article-listing {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	padding-top: var(--ah-space-6);
}

/* Application Area / Industry page "All applications" cards: eyebrow + title
   + description above the grid — a full-width tinted background band
   instead of a thin divider line, with vertical padding so the heading/cards
   don't sit flush against the band's edges. Full-bleed to the viewport edge,
   same technique as the hero (.application-hub-section--hero above): only
   the background stretches edge to edge, its .application-hub-section__inset
   child keeps the heading/cards inset to the normal reading column like
   every other section's text. */
.application-hub-section--area-listing {
	background: linear-gradient(135deg, rgba(230, 239, 248, 0.54) 0%, #E6EFF8 100%);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-block: var(--ah-space-8);
}
.application-hub-section__inset {
	max-width: var(--ah-container-max);
	margin-inline: auto;
	padding-inline: var(--ah-container-pad);
}

/* Industry "Applications" tabs, one per Application Area
   (BlockRegistrar::render_applications_overview()). Plain
   data-ah-tabs/hidden-attribute toggle, see application-hub-page-chrome.js.
   Wraps on desktop (rarely more than a handful of Areas); on mobile it's a
   single scrollable row instead — the same horizontal-scroll technique the
   breadcrumb already uses — rather than wrapping into a cramped multi-row
   block of small buttons. */
.application-hub-section__tab-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ah-space-2);
	margin-top: var(--ah-space-4);
	margin-bottom: var(--ah-space-5);
}
.application-hub-section__tab {
	border: 1px solid var(--ah-color-border);
	background: var(--ah-color-surface-card);
	color: var(--ah-color-text);
	border-radius: var(--ah-radius-md);
	padding: var(--ah-space-2) var(--ah-space-4);
	font-size: 0.9375rem;
	cursor: pointer;
}
.application-hub-section__tab.is-active {
	background: var(--ah-color-brand);
	border-color: var(--ah-color-brand);
	color: var(--ah-color-text-inverse);
}
.application-hub-section__tab-panel[hidden] {
	display: none;
}
@media (max-width: 767px) {
	.application-hub-section__tab-bar {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* Scrolls fine without a visible scrollbar cluttering a swipeable row. */
		scrollbar-width: none;
	}
	.application-hub-section__tab-bar::-webkit-scrollbar {
		display: none;
	}
	.application-hub-section__tab {
		flex: none;
		white-space: nowrap;
	}
}

/* One tab's content: the Application Area's own preview (image, "{Area}
   Applications" caption, excerpt, Explore link) plus up to N of its own
   child Applications as small image+name tiles
   (BlockRegistrar::render_application_area_preview()/
   render_application_preview_card() — N is the editor's "Applications shown
   per tab" setting, 2-4, default 3). A preview shows as soon as its node
   exists in the Content Tree, in any real status (this is meant to preview
   planned structure); only wraps it in a link once that page is actually
   published — an unpublished one renders the same image+text, just inert
   and slightly dimmed. Both tiers are image-as-background + dark scrim +
   white overlaid text, not a card — same recipe as render_overview_cards()'s
   Rheonics Advantage tiles above, so text stays legible over any photo. */
.application-hub-tab-preview__main {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 320px;
	overflow: hidden;
	border-radius: var(--ah-radius-lg);
	background-color: var(--ah-color-border);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.application-hub-tab-preview__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(0, 0, 0, 0) 100%);
}
.application-hub-tab-preview__content {
	position: relative;
	padding: var(--ah-space-5);
	color: var(--ah-color-text-inverse);
}
.application-hub-tab-preview__content h3 {
	color: var(--ah-color-text-inverse);
	margin-bottom: var(--ah-space-2);
}
.application-hub-tab-preview__content p {
	color: rgba(255, 255, 255, 0.88);
	margin-bottom: var(--ah-space-3);
}
/* .ah-btn--outline defaults to blue border/text (right for a white
   background) — over a photo + dark scrim it needs to be white instead. */
.application-hub-tab-preview__content .ah-btn--outline {
	border-color: #fff;
	color: #fff;
}
.application-hub-tab-preview__content .ah-btn--outline:hover,
.application-hub-tab-preview__content .ah-btn--outline:focus-visible {
	background: rgba(255, 255, 255, 0.15);
}
.application-hub-tab-preview__applications {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--ah-space-4);
	margin-top: var(--ah-space-5);
}
.application-hub-tab-preview__app {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 150px;
	overflow: hidden;
	border-radius: var(--ah-radius-md);
	background-color: var(--ah-color-border);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-decoration: none;
}
.application-hub-tab-preview__app-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.22) 45%, rgba(0, 0, 0, 0) 100%);
}
.application-hub-tab-preview__app-name {
	position: relative;
	padding: var(--ah-space-3);
	color: var(--ah-color-text-inverse);
}
.application-hub-tab-preview__app--draft {
	opacity: 0.7;
}
/* Same reasoning as the tab bar above: a wrapped grid of small tiles reads
   cramped on mobile — a swipeable single row is the cleaner fit. */
@media (max-width: 767px) {
	.application-hub-tab-preview__applications {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		/* Scrolls fine without a visible scrollbar cluttering a swipeable row. */
		scrollbar-width: none;
	}
	.application-hub-tab-preview__applications::-webkit-scrollbar {
		display: none;
	}
	.application-hub-tab-preview__app {
		flex: 0 0 140px;
		scroll-snap-align: start;
	}
}

/* Industry page "Featured Articles" keeps the plain divider treatment. */
.application-hub-section--featured-articles {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	padding-top: var(--ah-space-6);
}
.application-hub-section__description {
	color: var(--ah-color-text-subtle);
	max-width: 720px;
	margin-top: var(--ah-space-2);
}
.application-hub-section__article-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--ah-space-5);
	margin-top: var(--ah-space-5);
	margin-bottom: var(--ah-space-5);
}
.application-hub-section__article-card {
	display: flex;
	flex-direction: column;
	gap: var(--ah-space-3);
}
.application-hub-section__article-card h3 {
	margin: 0;
}
.application-hub-section__article-card h3 a {
	color: var(--ah-color-brand);
	text-decoration: none;
}
.application-hub-section__article-card p {
	color: var(--ah-color-text);
	flex-grow: 1;
}
.application-hub-section__article-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ah-space-3);
	padding-top: var(--ah-space-3);
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.application-hub-section__see-all {
	display: flex;
	width: fit-content;
	margin: 60px auto;
}