/*** Template: Page — Resources (/resources/) ***/

/* Each top section repeats the parchment background so the hero → filters →
   featured → categories band reads as one continuous field. */

/** Hero **/

.resource-hero {
	background: var(--parchment);
	padding-block: calc(var(--header-clearance) + var(--module-spacing-large)) 0;
}

.resource-hero .container {
	row-gap: var(--text-spacing-xsmall);
}

.resource-hero .heading-2,
.resource-hero .large-text {
	grid-column: 1 / span 8;
}

/** Filter bar **/

.resources-filters {
	background: var(--parchment);
	padding-block: var(--text-spacing-large) var(--module-spacing-small);
}

/* The form is a .flex row (display/wrap/justify from the utility); this adds the
   cross-axis alignment + gap the utility leaves open. */
.resources-filters .flex {
	align-items: center;
	gap: var(--text-spacing-xsmall);
}

/* The auto margin lives here rather than on .search — it pushes everything after
   the filters to the row's far edge, so the search lands right without needing a
   margin of its own. */
.resources-filters .group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-xsmall);
	margin-right: auto;
}

/* Filter triggers read tighter than the global field: 13px medium, 44px tall. */
.resources-filters .jazzy-multiselect .trigger {
	color: var(--black);
	font-size: calc(13rem / 16);
	font-weight: 500;
	height: 44px;
	padding-block: 0;
}

/* Smaller UI — stroke goes black (not the global electric-lavender) when active. */
.resources-filters .jazzy-multiselect .trigger:focus,
.resources-filters .jazzy-multiselect .trigger[aria-expanded="true"] {
	border-color: var(--black);
}

/* Nudge the caret glyph down 1px so it optically centres in its circle. */
.resources-filters .jazzy-multiselect .caret svg {
	transform: translateY(1px);
}

.resources-filters .search {
	align-items: center;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--black) 18%, transparent);
	display: flex;
	gap: var(--text-spacing-xxsmall);
	height: 44px;
	margin-inline: 0;
	padding-right: 8px;
}

.resources-filters .search:focus-within {
	border-color: var(--black);
}

/* Stretch to the 44px field height; centring comes from the input itself. */
.resources-filters .search input {
	align-self: stretch;
	background: transparent;
	border: 0;
	color: var(--black);
	flex: 1;
	font-family: var(--body-font);
	font-size: calc(13rem / 16);
	min-width: 250px;
	padding: 0 0 0 20px;
}

.resources-filters .search input::placeholder {
	color: var(--gray-dark);
}

.resources-filters .search button {
	align-items: center;
	background: color-mix(in srgb, var(--black) 10%, transparent);
	border: 0;
	border-radius: 50%;
	color: var(--black);
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	height: 24px;
	justify-content: center;
	padding: 6px;
	width: 24px;
}

.resources-filters .search button svg {
	height: 9px;
	width: 9px;
}

/** Featured hub — featured article (left) + recents (right) **/

.resources-featured {
	background: var(--parchment);
	padding-bottom: var(--module-spacing-large);
}

/* Columns size to their own content — without this the shorter of the two
   stretches to match the taller. */
.resources-featured .container {
	align-items: start;
}

.resources-featured .main {
	gap: var(--text-spacing-small);
	grid-column: 1 / span 6;
}

.resources-featured .side {
	align-items: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-medium);
	grid-column: 7 / -1;
	padding-left: var(--text-spacing-large);
}

/* Hub cards are bare on the parchment — strip the white card chrome + padding. */
.resources-featured .card.blog-card {
	background: none;
	filter: none;
}

.resources-featured .blog-card .body {
	padding: 0;
}

/* Featured read-more hover (the card is the link) — arrow slides, colour shifts. */
.resources-featured .card.blog-card:hover .btn.secondary {
	color: var(--black-hover);
	margin-right: -4px;
	padding-right: 4px;
}

.resources-featured .card.blog-card:hover .btn.secondary .icon {
	transform: translateX(4px);
}

/* With no editor excerpt, add 8px above the button so it isn't tight to the date. */
.resources-featured .blog-card .body:not(:has(.medium-text)) .btn.secondary {
	margin-top: calc(var(--text-spacing-xsmall) + var(--text-spacing-xxsmall));
}

/** Browse categories — row of icon tiles **/

.resources-categories {
	/*background: var(--parchment);*/
	/*padding-bottom: var(--module-spacing-large);*/
	position: relative;
}

.resources-categories::before {
	background: var(--parchment);
	content: '';
	height: calc(100% - 93px);
	position: absolute;
	top: 0;
	width: 100%;
}

.resources-categories header {
	margin-bottom: var(--text-spacing-large);
	text-align: center;
}

.resources-categories .cards {
	display: grid;
	gap: var(--text-spacing-xsmall);
	grid-template-columns: repeat(6, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.resources-categories .cards li {
	display: flex;
}

.resources-categories .tile {
	align-items: center;
	background: var(--white);
	box-shadow: var(--shadow-subtle);
	color: inherit;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	min-height: 186px;
	padding: var(--text-spacing-medium) var(--text-spacing-xsmall);
	text-align: center;
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}

.resources-categories .tile:hover {
	box-shadow: var(--shadow-dropdown);
}

/* icon → label spacing (the flex gap is dropped so the arrow can own its own). */
.resources-categories .tile > .icon + h3 {
	margin-top: var(--text-spacing-small);
}

/* Body font (Acumin) — the h3 otherwise inherits the display heading font. */
.resources-categories .tile h3 {
	font-family: var(--body-font);
	transition: color 0.3s ease;
}

.resources-categories .tile:hover h3 {
	color: var(--digital-blue);
}

/* Arrow flows 14px below the label (any number of lines), collapsed at rest so
   the content stays centred; on hover it opens — lifting the icon + label — and
   fades up into place. */
.resources-categories .tile .arrow {
	background-color: var(--digital-blue);
	height: 0;
	mask: url('../svgs/arrow-right.svg') center / contain no-repeat;
	opacity: 0;
	transform: translateY(8px);
	transition: height 0.3s ease, margin-top 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
	width: 12px;
}

.resources-categories .tile:hover .arrow {
	height: 12px;
	margin-top: 14px;
	opacity: 1;
	transform: translateY(0);
}

.resources-categories .tile .icon {
	align-items: center;
	display: flex;
	height: 32px;
	justify-content: center;
}

.resources-categories .tile .icon img,
.resources-categories .tile .icon svg {
	display: block;
	height: 26px;
	width: auto;
}

/** Results grid — 3-up blog cards on the page default. Jazzy AJAX echoes the
    cards into <ul jx-form-results-items>; the paged pager is a sibling <ul>, so
    grid the items list by attribute (never [jx-form-results] > ul). **/

.resources-cat-row {
	padding-block: var(--module-spacing-medium);
}

/* minmax(0,1fr), not 1fr — a bare 1fr floors at min-content, so a card with a long
   unbreakable title blows out its track and the columns go uneven. The 0 floor keeps
   every column equal regardless of content. */
.resources-cat-row ul[jx-form-results-items] {
	display: grid;
	gap: var(--module-spacing-small) var(--text-spacing-large);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.resources-cat-row .no-results {
	color: var(--gray-dark);
}

/* While any filter is active, the featured + categories rows collapse so only the
   filtered roll shows — mirrors the old results-mode reload, reversed in pure CSS. */
.resources-hub:has(.resources-filters input[type="checkbox"]:checked) :is(.resources-featured, .resources-categories),
.resources-hub:has(.resources-filters input[type="search"]:not(:placeholder-shown)) :is(.resources-featured, .resources-categories) {
	display: none;
}

/* The featured + categories rows belong to page 1 only. The pager renders a
   `.previous` control once you're past page 1 (never on it), so it doubles as the
   "beyond page 1" signal — collapsing the rows on page 2+ for both AJAX paging and
   deep-link reloads, while leaving them in the DOM so returning to page 1 restores them. */
.resources-hub:has([jx-form-pagination] .previous) :is(.resources-featured, .resources-categories) {
	display: none;
}

/** Newsletter — euphoric-blue band (container width), copy + signup form **/

/* 120px above (the roll's own 120px bottom padding is the whole gap); flush below
   so the closing CTA's own 160px top padding is the only space above it. */
.resources-newsletter {
	padding-block: 0;
}

/* Band sits 24px from each viewport edge (not the container width). */
.resources-newsletter .inner {
	background: var(--euphoric-blue);
	background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
	color: var(--white);
	display: grid;
	gap: var(--text-spacing-large) var(--module-spacing-medium);
	grid-template-columns: 7fr 5fr;
	isolation: isolate;
	margin-inline: var(--text-spacing-small);
	overflow: hidden;
	padding: var(--module-spacing-medium);
}

@media (prefers-reduced-motion: no-preference) {

	.resources-newsletter .inner {
		animation: euphoria-drift var(--euphoria-drift-duration) ease-in-out infinite;
	}

}

.resources-newsletter .copy {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
}

.resources-newsletter .copy > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.resources-newsletter .copy .eyebrow {
	color: var(--lavender);
}

/* Drop the form past the eyebrow so the field's top sits 16px below the
   headline's cap height — optically aligned with the "Get healthcare" line. */
.resources-newsletter .form {
	align-self: start;
	margin-top: var(--module-spacing-small);
}

/* Email + Subscribe sit inline on one 56px row. */
.resources-newsletter .resources-newsletter-row {
	display: flex;
	gap: var(--text-spacing-xsmall);
}

/* Stroke only — no fill on the euphoric-blue band. */
.resources-newsletter .form input[type="email"],
.resources-newsletter .form input[type="text"] {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--white) 55%, transparent);
	color: var(--white);
	flex: 1;
	font-family: var(--body-font);
	font-size: calc(15rem / 16);
	height: 56px;
	min-width: 0;
	padding: 0 20px;
}

.resources-newsletter .form input[type="email"]:focus,
.resources-newsletter .form input[type="text"]:focus {
	border-color: var(--white);
	outline: none;
}

.resources-newsletter .form input::placeholder {
	color: color-mix(in srgb, var(--white) 70%, transparent);
}

.resources-newsletter .form button,
.resources-newsletter .form input[type="submit"] {
	background: var(--white);
	border: 0;
	color: var(--black);
	cursor: pointer;
	flex-shrink: 0;
	font-family: var(--body-font);
	font-size: calc(15rem / 16);
	font-weight: 600;
	height: 56px;
	padding: 0 24px;
	transition: background 0.2s ease;
}

.resources-newsletter .form button:hover,
.resources-newsletter .form input[type="submit"]:hover {
	background: var(--white-hover);
}

/* Legal-text style (11/16, medium). */
.resources-newsletter .footnote {
	color: color-mix(in srgb, var(--white) 75%, transparent);
	font-size: calc(11rem / 16);
	font-weight: 500;
	line-height: calc(16 / 11);
	margin-top: var(--text-spacing-small);
}

.resources-newsletter .footnote a {
	color: inherit;
	text-decoration: underline;
}

/** Editorial standards — small print at the foot of the newsletter band **/

.resources-newsletter .editorial {
	border-top: 1px solid color-mix(in srgb, var(--white) 25%, transparent);
	display: grid;
	gap: var(--text-spacing-large);
	grid-column: 1 / -1;
	grid-template-columns: 200px 1fr;
	/* 56px above = the .inner grid's 40px row-gap + this 16px. */
	margin-top: var(--text-spacing-xsmall);
	padding-top: var(--text-spacing-large);
}

/* Newsletter hidden (editorial_hide off, newsletter fields empty) leaves the
   editorial as the only child — the rule above is a divider between the two, so
   with nothing above it the border reads as a stray line and the offsets as a
   gap under the band's own padding. :first-child + .inner takes it to (0,4,0),
   clearing the (0,2,0) base. */
.resources-newsletter .inner > .editorial:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

/* Legal-text style (11/16, medium) — matches the footnote. */
.resources-newsletter .editorial .body p {
	font-size: calc(11rem / 16);
	font-weight: 500;
	line-height: calc(16 / 11);
	margin: 0;
}

.resources-newsletter .editorial .body p + p {
	margin-top: var(--text-spacing-small);
}

/* Closing demo CTA sits on the page background (no coloured band), so it gets no
   section padding by default — give it standalone breathing room here. The full
   selector clears the base .style-demo-cta padding rules (0,3,0). */
.page-template-page-resources .module.demo-cta.style-demo-cta {
	padding-block: var(--module-spacing-xlarge);
}

/* Form column gets tight in the 5-col slot — stack the button under the field
   (the row's 16px gap becomes the vertical gap). */

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1400rem / 16)) {

	.resources-newsletter-row {
		flex-direction: column;
	}

	.resources-newsletter .form input[type="email"],
	.resources-newsletter .form input[type="text"] {
		flex: none;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.resource-hero .heading-2,
	.resource-hero .large-text {
		grid-column: 1 / -1;
	}

	.resources-featured .main,
	.resources-featured .side {
		grid-column: 1 / -1;
	}

	/* Stacked below .main now — the column gutter it carried is dead space. */
	.resources-featured .side {
		padding-left: 0;
	}

	/* Copy stacks above the form here, so the headline-alignment offset is dead space. */
	.resources-newsletter .form {
		margin-top: 0;
	}

	.resources-categories .cards {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Touch from here down — there's no hover to open the arrow, so rest in the
	   opened state and let the transition go unused. Always-visible, so it takes the
	   neutral ink rather than the blue that reads as a hover accent. */
	.resources-categories .tile .arrow {
		background-color: var(--black);
		height: 12px;
		margin-top: 14px;
		opacity: 1;
		transform: translateY(0);
	}

	.resources-cat-row ul[jx-form-results-items] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.resources-newsletter .inner {
		grid-template-columns: 1fr;
	}

	.resources-newsletter .editorial {
		grid-template-columns: 1fr;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.resources-categories .cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.resources-cat-row ul[jx-form-results-items] {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Filters stack here and not before — the row still fits at tablet, where
	   stacking only cost vertical space above the results. */
	.resources-filters .flex {
		align-items: flex-start;
		flex-direction: column;
	}

	/* Stacked now, so drop the push-right that separated search from the filters. */
	.resources-filters .group {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		margin-right: 0;
		width: 100%;
	}

	.resources-filters .search {
		width: 100%;
	}

	/* Band goes edge-to-edge; its copy picks up the container's 20px gutter so the
	   text still lines up with every other module on the page. */
	.resources-newsletter .inner {
		margin-inline: 0;
		padding-inline: var(--container-outer-padding);
	}

}