/**
 * seamlessmd/resources-hero — Resources knowledge-hub hero.
 *
 * One rounded panel, one grid. The template areas are flow-relative, so RTL
 * mirrors the three columns without a second stylesheet and without a language
 * branch in PHP. Every offset uses logical properties.
 *
 * The palette has no blue token, so the accent is declared block-locally on the
 * root class rather than added globally. Tone pairs are declared per modifier
 * and consumed through two variables, so a stat card and a chip in the same
 * tone stay in sync.
 *
 * Load order: this file loads BEFORE assets/css/seamlessmd-theme.css, so any
 * rule that has to beat the bundle is scoped twice deliberately (noted inline).
 */

.seamlessmd-resources-hero {
	--seamlessmd-rh-blue: #2563eb;
	--seamlessmd-rh-navy: var( --seamlessmd-dark-navy, #0b1b3a );
	/* Mostly white with a very subtle cool cast, per the reference — the panel
	 * reads as paper, not as a blue band. The cards sitting on it carry their
	 * own border and shadow, so they stay legible against the lighter ground. */
	--seamlessmd-rh-panel-bg: linear-gradient( 155deg, #fff 0%, #fcfdff 42%, #f4f8fe 100% );
	--seamlessmd-rh-panel-border: #e4ebf7;
	--seamlessmd-rh-card-border: #e6ecf6;
	--seamlessmd-rh-radius: clamp( 1rem, 1.8vw, 1.7rem );
	--seamlessmd-rh-pad: clamp( 1.15rem, 2.1vw, 1.95rem );
	--seamlessmd-rh-gap-row: clamp( 0.9rem, 1.8vw, 1.5rem );
	--seamlessmd-rh-card-shadow: 0 10px 26px rgba( 15, 32, 68, 0.08 );

	/* Fallback tone, overridden per stat / chip modifier below. */
	--seamlessmd-rh-tone-bg: #e7effd;
	--seamlessmd-rh-tone-fg: #2563eb;

	padding-block: clamp( 0.75rem, 2vw, 1.75rem );
}

/* (0,2,0) — the hero panel runs wider than the shared container so its
 * proportions match the reference, which sets the panel almost edge to edge.
 * Scoped to this block; the shared `.seamlessmd-container` is untouched. */
.seamlessmd-resources-hero .seamlessmd-resources-hero__inner {
	/* Follows the shared page-margin token (full-bleed site layout). */
	max-inline-size: var( --seamlessmd-container-max, 1340px );
}

.seamlessmd-resources-hero__panel {
	display: grid;
	grid-template-columns: minmax( 0, 1.24fr ) minmax( 0, 0.95fr ) minmax( 0, 0.66fr );
	grid-template-areas:
		"intro media stats"
		"chips chips chips";

	/* Content row grows to whichever column is tallest — the intro's
	 * text stack, the photograph, or the stat card list. The previous
	 * 18–21.5rem floor forced the panel taller than any column needed
	 * and left a wide empty band under the search input; QA flagged the
	 * resulting whitespace ("too much empty space" — Resources row). */
	grid-template-rows: auto auto;
	column-gap: clamp( 0.75rem, 1.6vw, 1.5rem );
	row-gap: var( --seamlessmd-rh-gap-row );
	padding: var( --seamlessmd-rh-pad );
	background: var( --seamlessmd-rh-panel-bg );

	/* Per the reference the hero reads as a flat, edge-to-edge band, not a
	 * boxed card — no border, no rounded corner. `overflow: hidden` stays: it
	 * still clips the photograph's deliberate top/bottom bleed, now to a square
	 * corner. */
	overflow: hidden;
}

/* ---------- intro ---------- */

.seamlessmd-resources-hero__intro {
	grid-area: intro;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-inline-size: 0;

	/* Above the media, which bleeds under the panel padding. */
	position: relative;
	z-index: 1;
}

.seamlessmd-resources-hero__eyebrow {
	margin: 0 0 0.5rem;
	color: var( --seamlessmd-rh-blue );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Arabic letters join; tracking would break the ligatures and `uppercase`
 * has no meaning in the script. */
[dir="rtl"] .seamlessmd-resources-hero__eyebrow {
	letter-spacing: normal;
	text-transform: none;
}

.seamlessmd-resources-hero__heading {
	margin: 0 0 0.75rem;
	color: var( --seamlessmd-rh-navy );
	font-size: clamp( 1.95rem, 3.05vw, 2.85rem );
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.022em;
}

[dir="rtl"] .seamlessmd-resources-hero__heading {
	letter-spacing: normal;
	line-height: 1.35;
}

.seamlessmd-resources-hero__heading-line {
	display: block;
}

.seamlessmd-resources-hero__accent {
	color: var( --seamlessmd-rh-blue );
}

.seamlessmd-resources-hero__description {
	margin: 0;
	max-inline-size: 34rem;
	color: var( --seamlessmd-text-muted, #55617a );
	font-size: clamp( 0.92rem, 1vw, 1.02rem );
	line-height: 1.65;
}

/* ---------- search (presentation only) ---------- */

/* The Search / Clear-search labels beside each icon button are for assistive
 * tech only. The theme has no global `.screen-reader-text` rule, so without
 * this the words render visibly inside the button and push the SVG out of
 * its box. Mirrors the pricing-table / card-grid pattern. */
.seamlessmd-resources-hero .screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	-webkit-clip-path: inset( 50% );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.seamlessmd-resources-hero__search {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	inline-size: 100%;
	max-inline-size: 34.5rem;
	margin-block-start: clamp( 1rem, 1.8vw, 1.55rem );
	padding-block: 0.32rem;
	padding-inline: 0.95rem 0.32rem;
	background: #fff;
	border: 1px solid #e2e8f4;
	border-radius: 0.8rem;
	box-shadow: 0 2px 10px rgba( 15, 32, 68, 0.05 );
	/* The field is a <form> now — the UA's block margin would add space the
	 * hero's own margin-block-start already accounts for. */
	margin-block-end: 0;
}

/* The input's own outline is suppressed, so the ring moves to the field. */
.seamlessmd-resources-hero__search:focus-within {
	border-color: var( --seamlessmd-rh-blue );
	box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.16 );
}

/* Editor-driven hint tying the search to the sections below it (attr:
 * searchHint). Desktop's side-by-side structure already communicates the
 * relationship, so the hint is a narrow-viewport affordance only. */
.seamlessmd-resources-hero__search-hint {
	display: none;
}

@media ( max-width: 767px ) {
	.seamlessmd-resources-hero__search-hint {
		display: flex;
		align-items: center;
		gap: 0.45rem;
		margin: 0.6rem 0 0;
		font-size: 0.8rem;
		line-height: 1.45;
		color: var( --seamlessmd-text-muted, #5a6475 );
	}

	/* Small down-pointing chevron — decorative, points at the content the
	 * search covers. PHYSICAL borders on purpose: the down direction is
	 * direction-neutral and must not mirror under RTL (logical borders
	 * plus rotate would double-correct — styling-and-rtl.md). */
	.seamlessmd-resources-hero__search-hint::before {
		content: "";
		flex: none;
		width: 7px;
		height: 7px;
		margin-top: -4px;
		border-right: 2px solid var( --seamlessmd-rh-blue, #2563eb );
		border-bottom: 2px solid var( --seamlessmd-rh-blue, #2563eb );
		transform: rotate( 45deg );
	}

	/* Phone: the search is the section's primary action — give it more
	 * presence than the flat desktop field. */
	.seamlessmd-resources-hero__search {
		border: 1.5px solid rgba( 37, 99, 235, 0.35 );
		box-shadow: 0 8px 22px rgba( 15, 32, 68, 0.1 );
	}
}

.seamlessmd-resources-hero__search-glyph {
	flex: none;
	inline-size: 1.1rem;
	block-size: 1.1rem;
	color: #8d99ae;
}

.seamlessmd-resources-hero__search-input {
	flex: 1 1 auto;
	min-inline-size: 0;
	padding-block: 0.5rem;
	padding-inline: 0;
	background: transparent;
	border: 0;
	color: var( --seamlessmd-text, #17233d );
	font: inherit;
	font-size: 0.92rem;
	appearance: none;
}

.seamlessmd-resources-hero__search-input:focus {
	outline: none;
}

.seamlessmd-resources-hero__search-input::-webkit-search-decoration,
.seamlessmd-resources-hero__search-input::-webkit-search-cancel-button {
	appearance: none;
}

/* Clear-search control. Deliberately quiet next to the solid blue submit tile:
 * no fill, muted ink, smaller box — it cancels, it does not act. Only rendered
 * while a query is active, so there is no empty-field state to style.
 *
 * Sits between the input and the submit as a flex sibling, so RTL mirrors it
 * with the rest of the row and no directional rule is needed. */
.seamlessmd-resources-hero__search-clear {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	margin-inline-end: 0.15rem;
	border-radius: 50%;
	background: transparent;
	color: #7c88a6;
	padding: 0;
	border: 0;
	font: inherit;
	cursor: pointer;
	appearance: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.seamlessmd-resources-hero__search-clear:hover {
	background: #eef2f8;
	color: var( --seamlessmd-rh-ink, #22314f );
}

.seamlessmd-resources-hero__search-clear:focus-visible {
	outline: 2px solid var( --seamlessmd-rh-blue );
	outline-offset: 2px;
}

.seamlessmd-resources-hero__search-clear svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
}

.seamlessmd-resources-hero__search-action {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.65rem;
	block-size: 2.65rem;
	border-radius: 0.65rem;
	background: var( --seamlessmd-rh-blue );
	color: #fff;
	/* The tile is a real <button type="submit"> on a Resources page. Stripping
	 * the UA chrome keeps it pixel-identical to the decorative <span> it
	 * replaces, while gaining the affordance. */
	padding: 0;
	border: 0;
	font: inherit;
	cursor: pointer;
	appearance: none;
}

.seamlessmd-resources-hero__search-action:focus-visible {
	outline: 2px solid var( --seamlessmd-rh-blue );
	outline-offset: 2px;
}

.seamlessmd-resources-hero__search-action svg {
	inline-size: 1.2rem;
	block-size: 1.2rem;
}

/* ---------- media ---------- */

.seamlessmd-resources-hero__media {
	grid-area: media;
	display: flex;
	min-inline-size: 0;

	/* Cap the photograph's block-size so the source portrait crop
	 * (1122×1402 ≈ 4:5) doesn't stretch the content row to the same
	 * portrait height at 400 px column width. `aspect-ratio: 5/4`
	 * matches the landscape framing the design uses; `object-fit:
	 * cover` on `.__image` recrops the portrait file inside that box
	 * without distortion. Without this the row was ~500 px tall and the
	 * intro column's ~230 px stack left a wide empty band under the
	 * search input — QA row 14: "too much empty space." */
	aspect-ratio: 5 / 4;
	max-block-size: 22rem;

	/* Deliberate bleed: the photograph reaches the panel's top edge and runs
	 * down to the chip row, exactly as the reference draws it. The panel's
	 * `overflow: hidden` clips it to the rounded corner, and the bottom bleed
	 * is capped at the row gap so it can never reach the chips themselves —
	 * which sit on their own stacking layer anyway. */
	margin-block-start: calc( -1 * var( --seamlessmd-rh-pad ) );
	margin-block-end: calc( -1 * var( --seamlessmd-rh-gap-row ) );
}

/* (0,2,0) — beats the bundle's bare `img` rule regardless of load order. */
.seamlessmd-resources-hero .seamlessmd-resources-hero__image {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	object-position: 50% 26%;

	/* Feathers the four edges so the photograph reads as part of the panel
	 * instead of a pasted rectangle. The feather is deliberately narrow — a
	 * wide one dissolves the subject, which the reference keeps crisp. Two
	 * symmetric gradients intersected, so RTL needs no counterpart rule.
	 * `mask-composite` is the standard property and `-webkit-mask-composite:
	 * source-in` its WebKit spelling; where neither is honoured the first
	 * gradient still applies and the image degrades to a horizontal fade
	 * rather than to a hard rectangle. */
	-webkit-mask-image:
		linear-gradient( to right, transparent 0, #000 8%, #000 92%, transparent 100% ),
		linear-gradient( to bottom, transparent 0, #000 6%, #000 91%, transparent 100% );
	mask-image:
		linear-gradient( to right, transparent 0, #000 8%, #000 92%, transparent 100% ),
		linear-gradient( to bottom, transparent 0, #000 6%, #000 91%, transparent 100% );
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* ---------- statistics ---------- */

.seamlessmd-resources-hero__stats {
	grid-area: stats;
	display: grid;
	gap: clamp( 0.45rem, 1vw, 0.95rem );
	align-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	min-inline-size: 0;
	position: relative;
	z-index: 1;
}

.seamlessmd-resources-hero__stat {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-inline-size: 0;
	padding: clamp( 0.75rem, 1.3vw, 1.1rem );
	background: #fff;
	border: 1px solid var( --seamlessmd-rh-card-border );
	border-radius: 0.95rem;
	box-shadow: var( --seamlessmd-rh-card-shadow );
}

.seamlessmd-resources-hero__stat-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.9rem;
	block-size: 2.9rem;
	border-radius: 0.8rem;
	background: var( --seamlessmd-rh-tone-bg );
	color: var( --seamlessmd-rh-tone-fg );
}

.seamlessmd-resources-hero__stat-icon .seamlessmd-resources-hero__glyph,
.seamlessmd-resources-hero__stat-icon .seamlessmd-resources-hero__icon-image {
	inline-size: 1.55rem;
	block-size: 1.55rem;
	object-fit: contain;
}

.seamlessmd-resources-hero__stat-text {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
}

.seamlessmd-resources-hero__stat-value {
	color: var( --seamlessmd-rh-navy );
	font-size: clamp( 1.15rem, 1.55vw, 1.5rem );
	font-weight: 800;
	line-height: 1.18;
}

.seamlessmd-resources-hero__stat-label {
	color: var( --seamlessmd-text-muted, #55617a );
	font-size: 0.87rem;
	line-height: 1.35;
}

/* ---------- category chips ---------- */

.seamlessmd-resources-hero__chips {
	grid-area: chips;
	display: flex;
	flex-wrap: wrap;

	/* The row spans the panel by distributing the slack between the chips
	 * rather than by stretching them. Stretching looks right until the row
	 * wraps — a single chip left on the last row would then span the whole
	 * panel. `gap` stays the floor, so the chips never collide. */
	justify-content: space-between;
	gap: clamp( 0.4rem, 0.9vw, 0.7rem );
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	z-index: 1;
}

.seamlessmd-resources-hero__chip-item {
	flex: 0 1 auto;
	min-inline-size: 0;
}

.seamlessmd-resources-hero__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-inline-size: 0;
	padding-block: 0.72rem;
	padding-inline: 1.2rem;
	background: #fff;
	border: 1px solid var( --seamlessmd-rh-card-border );
	border-radius: 999px;
	color: var( --seamlessmd-rh-navy );
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba( 15, 32, 68, 0.04 );
}

/* The reference draws its trailing "View all" pill as a plain accent chip —
 * derived from "no icon" so no extra attribute has to be kept in sync. */
.seamlessmd-resources-hero__chip--accent {
	color: var( --seamlessmd-rh-blue );
}

a.seamlessmd-resources-hero__chip:hover,
a.seamlessmd-resources-hero__chip:focus-visible {
	border-color: var( --seamlessmd-rh-tone-fg );
	color: var( --seamlessmd-rh-tone-fg );
	box-shadow: 0 4px 12px rgba( 15, 32, 68, 0.09 );
}

.seamlessmd-resources-hero__chip-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.85rem;
	block-size: 1.85rem;
	border-radius: 0.55rem;
	background: var( --seamlessmd-rh-tone-bg );
	color: var( --seamlessmd-rh-tone-fg );
}

.seamlessmd-resources-hero__chip-icon .seamlessmd-resources-hero__glyph,
.seamlessmd-resources-hero__chip-icon .seamlessmd-resources-hero__icon-image {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	object-fit: contain;
}

.seamlessmd-resources-hero__chip-label {
	min-inline-size: 0;
}

/* ---------- tones ---------- */

.seamlessmd-resources-hero__stat--tone-blue,
.seamlessmd-resources-hero__chip--tone-blue {
	--seamlessmd-rh-tone-bg: #e7effd;
	--seamlessmd-rh-tone-fg: #2563eb;
}

.seamlessmd-resources-hero__stat--tone-cyan,
.seamlessmd-resources-hero__chip--tone-cyan {
	--seamlessmd-rh-tone-bg: #e0f3fb;
	--seamlessmd-rh-tone-fg: #0a9bc4;
}

.seamlessmd-resources-hero__stat--tone-teal,
.seamlessmd-resources-hero__chip--tone-teal {
	/* Teal retired site-wide (2026-09-03): the key stays for stored content
	 * and the hash tables; it now renders the block's blue pair. */
	--seamlessmd-rh-tone-bg: #e7effd;
	--seamlessmd-rh-tone-fg: #2563eb;
}

.seamlessmd-resources-hero__stat--tone-green,
.seamlessmd-resources-hero__chip--tone-green {
	--seamlessmd-rh-tone-bg: #e4f5ea;
	--seamlessmd-rh-tone-fg: #16a34a;
}

.seamlessmd-resources-hero__stat--tone-orange,
.seamlessmd-resources-hero__chip--tone-orange {
	--seamlessmd-rh-tone-bg: #fdeddf;
	--seamlessmd-rh-tone-fg: #ea6c17;
}

.seamlessmd-resources-hero__stat--tone-purple,
.seamlessmd-resources-hero__chip--tone-purple {
	--seamlessmd-rh-tone-bg: #f0e9fd;
	--seamlessmd-rh-tone-fg: #7c3aed;
}

.seamlessmd-resources-hero__stat--tone-pink,
.seamlessmd-resources-hero__chip--tone-pink {
	--seamlessmd-rh-tone-bg: #fdeaf3;
	--seamlessmd-rh-tone-fg: #db2777;
}

/* ---------- variants driven by what is configured ---------- */

.seamlessmd-resources-hero--no-media .seamlessmd-resources-hero__panel {
	grid-template-columns: minmax( 0, 1.4fr ) minmax( 0, 0.6fr );
	grid-template-areas:
		"intro stats"
		"chips chips";
}

.seamlessmd-resources-hero--no-stats .seamlessmd-resources-hero__panel {
	grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 0.95fr );
	grid-template-areas:
		"intro media"
		"chips chips";
}

.seamlessmd-resources-hero--no-media.seamlessmd-resources-hero--no-stats .seamlessmd-resources-hero__panel {
	grid-template-columns: minmax( 0, 1fr );
	grid-template-areas:
		"intro"
		"chips";
}

/* ---------- responsive ---------- */

/* Tablet: intro and image stay balanced, the statistics become one row. */
@media ( max-width: 991px ) {
	.seamlessmd-resources-hero__panel,
	.seamlessmd-resources-hero--no-media .seamlessmd-resources-hero__panel,
	.seamlessmd-resources-hero--no-stats .seamlessmd-resources-hero__panel {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 0.82fr );

		/* Desktop's content-row floor does not apply once the rows change. */
		grid-template-rows: none;
		grid-template-areas:
			"intro media"
			"stats stats"
			"chips chips";
	}

	.seamlessmd-resources-hero--no-media .seamlessmd-resources-hero__panel {
		grid-template-columns: minmax( 0, 1fr );
		grid-template-areas:
			"intro"
			"stats"
			"chips";
	}

	.seamlessmd-resources-hero__stats {
		grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
	}
}

/* Mobile: intro, then image, then statistics, then chips. */
@media ( max-width: 767px ) {
	.seamlessmd-resources-hero__panel,
	.seamlessmd-resources-hero--no-media .seamlessmd-resources-hero__panel,
	.seamlessmd-resources-hero--no-stats .seamlessmd-resources-hero__panel {
		grid-template-columns: minmax( 0, 1fr );
		grid-template-rows: none;
		grid-template-areas:
			"intro"
			"media"
			"stats"
			"chips";
	}

	.seamlessmd-resources-hero__media {
		/* No bleed in a single column — the image is its own band. */
		margin-block: 0;
		border-radius: 0.9rem;
		overflow: hidden;
	}

	/* Auto height, never a fixed ratio: a frame shorter than the rendered
	 * image clips it and pushes the card wider. */
	.seamlessmd-resources-hero .seamlessmd-resources-hero__image {
		block-size: auto;
		object-fit: contain;
		-webkit-mask-image: none;
		mask-image: none;
		-webkit-mask-composite: source-over;
		mask-composite: add;
	}

	.seamlessmd-resources-hero__search {
		max-inline-size: none;
	}

	.seamlessmd-resources-hero__description {
		max-inline-size: none;
	}

	/* Phone re-order (2026-08-17): the search scopes over the sections
	 * BELOW the hero, so it must sit last — directly above "Browse
	 * Resources" — not separated from it by the photograph and the stat
	 * counters. Grid areas cannot lift the search out of the intro, so on
	 * phones the panel becomes a flex column and the intro dissolves
	 * (display: contents); `order` then places the copy first, media +
	 * stats + chips in the middle, and the search + its hint at the end.
	 * Spacing moves from the grid row-gap onto explicit margins so the
	 * intro copy keeps its tight rhythm. */
	.seamlessmd-resources-hero__panel {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.seamlessmd-resources-hero__intro {
		display: contents;
	}

	.seamlessmd-resources-hero__media {
		order: 1;
		margin-block-start: 1.1rem;
	}

	.seamlessmd-resources-hero__stats {
		order: 2;
		margin-block-start: 0.9rem;
	}

	.seamlessmd-resources-hero__chips {
		order: 3;
		margin-block-start: 0.9rem;
	}

	.seamlessmd-resources-hero__search {
		order: 4;
		margin-block-start: 1.2rem;
	}

	.seamlessmd-resources-hero__search-hint {
		order: 5;
	}
}

@media ( max-width: 575px ) {
	.seamlessmd-resources-hero__stats {
		grid-template-columns: minmax( 0, 1fr );
	}

	.seamlessmd-resources-hero__chip-item {
		flex: 1 1 100%;
	}

	.seamlessmd-resources-hero__chip {
		justify-content: flex-start;
	}
}

/* ---------- no condition chips configured ----------
 *
 * `render.php` omits the whole `__chips` list when `categories` is empty, but
 * the named `chips` row stays in every `grid-template-areas` above. That leaves
 * an empty 0px track whose preceding `row-gap` still paints — 24px of dead
 * space at the bottom of the panel on desktop, 14px on tablet and mobile.
 *
 * Each template below is its counterpart above minus the chips row. Scoped with
 * `:has()` so it follows the content: re-adding chips in Admin restores the
 * original layout with no PHP change. `grid-template-rows` is restated wherever
 * the rule it overrides sets it, because these selectors outrank the originals
 * and would otherwise carry the desktop row floor into the responsive branches.
 */

.seamlessmd-resources-hero__panel:not( :has( > .seamlessmd-resources-hero__chips ) ) {
	grid-template-rows: minmax( clamp( 18rem, 24vw, 21.5rem ), auto );
	grid-template-areas: "intro media stats";
}

.seamlessmd-resources-hero--no-media
	.seamlessmd-resources-hero__panel:not( :has( > .seamlessmd-resources-hero__chips ) ) {
	grid-template-areas: "intro stats";
}

.seamlessmd-resources-hero--no-stats
	.seamlessmd-resources-hero__panel:not( :has( > .seamlessmd-resources-hero__chips ) ) {
	grid-template-areas: "intro media";
}

.seamlessmd-resources-hero--no-media.seamlessmd-resources-hero--no-stats
	.seamlessmd-resources-hero__panel:not( :has( > .seamlessmd-resources-hero__chips ) ) {
	grid-template-areas: "intro";
}

@media ( max-width: 991px ) {
	.seamlessmd-resources-hero__panel:not( :has( > .seamlessmd-resources-hero__chips ) ),
	.seamlessmd-resources-hero--no-media
		.seamlessmd-resources-hero__panel:not( :has( > .seamlessmd-resources-hero__chips ) ),
	.seamlessmd-resources-hero--no-stats
		.seamlessmd-resources-hero__panel:not( :has( > .seamlessmd-resources-hero__chips ) ) {
		grid-template-rows: none;
		grid-template-areas:
			"intro media"
			"stats stats";
	}

	.seamlessmd-resources-hero--no-media
		.seamlessmd-resources-hero__panel:not( :has( > .seamlessmd-resources-hero__chips ) ) {
		grid-template-areas:
			"intro"
			"stats";
	}
}

@media ( max-width: 767px ) {
	.seamlessmd-resources-hero__panel:not( :has( > .seamlessmd-resources-hero__chips ) ),
	.seamlessmd-resources-hero--no-media
		.seamlessmd-resources-hero__panel:not( :has( > .seamlessmd-resources-hero__chips ) ),
	.seamlessmd-resources-hero--no-stats
		.seamlessmd-resources-hero__panel:not( :has( > .seamlessmd-resources-hero__chips ) ) {
		grid-template-rows: none;
		grid-template-areas:
			"intro"
			"media"
			"stats";
	}
}