/* ResourceCard styling for the Lesson Plan query-card (Figma node 56:118) */

.kb-query-block-post.type-lesson-plan {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: max-content max-content 1fr;
	grid-auto-rows: min-content;
	height: 100%;
}

.kb-query-block-post.type-lesson-plan .taxonomy-grade-levels.wp-block-post-terms,
.kb-query-block-post.type-lesson-plan .taxonomy-subject-areas.wp-block-post-terms {
	display: inline-flex;
	grid-row: 1;
	padding: 4px 10px;
	border-radius: 4px;
}

.kb-query-block-post.type-lesson-plan .taxonomy-grade-levels.wp-block-post-terms {
	margin: 20px 0 0 20px;
	background: rgba(148, 213, 210, 0.3);
}

.kb-query-block-post.type-lesson-plan .taxonomy-subject-areas.wp-block-post-terms {
	margin: 20px 20px 0 10px;
	background: rgba(37, 119, 189, 0.1);
}

.kb-query-block-post.type-lesson-plan .taxonomy-grade-levels.wp-block-post-terms,
.kb-query-block-post.type-lesson-plan .taxonomy-subject-areas.wp-block-post-terms {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 12px;
	color: var(--global-palette2, #1c5482);
}

.kb-query-block-post.type-lesson-plan .wp-block-post-title {
	grid-column: 1 / -1;
	min-width: 0;
	margin: 16px 20px 20px 20px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--global-palette3, #041f3d);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kb-query-block-post.type-lesson-plan .wp-block-kadence-advancedbtn {
	grid-column: 1 / -1;
	align-self: end;
	border-top: 1px solid #AFCBFF;
}

/* Defensive override: Kadence's inheritStyles:"outline" attribute doesn't map to a
   real outline treatment, so the hollow button uses its own className instead of
   relying on that mechanism. */
.kb-query-block-post.type-lesson-plan .wp-block-kadence-singlebtn.resource-card-btn-outline {
	background: transparent !important;
}

.kb-query-block-post.type-lesson-plan .wp-block-kadence-singlebtn.resource-card-btn-outline:hover {
	background: rgba(4, 31, 61, 0.05) !important;
}

/* Search field + "recommended order" note above the grid (Figma node 56:4) */

.lesson-plan-search-label {
	margin: 0 0 8px 0;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #1f2937;
}

.lesson-plan-search-field .kb-filter-search-wrap {
	max-width: 546px;
	height: 48px;
	background: #f1f3f5;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	overflow: hidden;
}

/* !important: Kadence's own basic form-input reset
   (.kb-query-basic-style .kadence-filter-wrap input[type=text]) falls back through
   var(--kb-query-background-color, var(--global-palette9, #fff)) — normally white, but this
   site's rebrand reassigned --global-palette9 to the CTA gold, so every filter text input
   inherits a gold background unless explicitly overridden here. Same root cause pattern as the
   outline-button/border gotchas: a palette slot being repurposed collides with a Kadence default
   that assumed its old value. */
.lesson-plan-search-field .kb-filter-search {
	width: 100%;
	height: 100%;
	padding: 0 50px 0 16px;
	background: #f1f3f5 !important;
	border: none !important;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	color: #041f3d !important;
}

/* !important: this site's rebrand also reassigned --global-palette5/6 (Kadence's typed/placeholder
   text fallbacks) to near-white (#ffffff / #f0f3f5) for use elsewhere as light-on-dark text — but
   Kadence's own input rule (`.kb-query-basic-style .kadence-filter-wrap input[type=text]`, 3
   specificity units) outranks this 2-class selector for `color`, and its `::placeholder` rule ties
   this one on specificity while loading later in the DOM (style-blocks-query.css is enqueued after
   query-cards.css), so source order breaks the tie in Kadence's favor. Both effectively rendered
   invisible near-white-on-white text/placeholder without !important here — discovered while fixing
   the identical bug on the Partner Districts search field. */
.lesson-plan-search-field .kb-filter-search::placeholder {
	color: #6b7280 !important;
}

/* Kadence's own style-blocks-query.css sets .kb-filter-search-btn with a 3-class selector
   (position:absolute, right:0, width:50px, background:0 0) that outranks a 2-class override —
   match its structure (absolute/right-aligned) rather than fighting it with flex, and use
   !important on background/color since its rule isn't itself !important but is more specific. */
.lesson-plan-search-field .kb-filter-search-wrap .kb-filter-search-btn {
	width: 44px !important;
	background: var(--global-palette9, #fdb92a) !important;
	color: #041f3d !important;
	cursor: pointer;
}

/* !important: same specificity-loss pattern as the checkbox/reset overrides below — some other
   rule with equal-or-higher specificity zeroes margin on this paragraph (confirmed via
   inline-style test: an inline margin wins, so nothing else here is !important, it's a plain
   cascade loss). Zeroed out — the search label/field above this text were removed, so there's
   no longer a gap to preserve. */
.lesson-plan-search-helper {
	margin: 0 !important;
	font-family: 'Lato', sans-serif;
	font-style: italic;
	font-size: 18px;
	line-height: 1.2;
	color: #757575;
}

/* Filter sidebar checkboxes + "Clear All" (Figma node 56:29 "FiltersSidebar") */

legend.kb-query-label {
	margin: 0 0 12px 0;
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #041f3d;
}

/* General sibling (~), not adjacent (+): each Kadence filter block emits its own per-block <style>
   tag immediately before its wrapper div, so the wrapper divs are never truly adjacent siblings —
   a `+` combinator here silently never matches. */
/* margin-top kept small (not 0): the last row's own margin-bottom (10px, below) already provides
   most of the gap before this line — Figma node 56:29's dividers sit only ~12px below the last
   checkbox row (row-bottom to line: 235→247 in the Grade Level group, 145→157 in Subject Area),
   so 2px here + 10px row margin = 12px, matching the design instead of stacking a full 20px on top. */
.wp-block-kadence-query-filter-checkbox ~ .wp-block-kadence-query-filter-checkbox,
.wp-block-kadence-query-filter-checkbox ~ .wp-block-kadence-query-filter-reset {
	display: block;
	margin-top: 2px;
	padding-top: 20px;
	border-top: 1px solid #e5e7eb;
}

/* !important: Kadence's `.kb-query-basic-style .kadence-filter-wrap .kb-radio-check-item` (3
   classes) sets `margin:0`, outranking a 1-class override. */
.kb-radio-check-item {
	margin-bottom: 10px !important;
}

.kb-radio-check-item label {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	color: #041f3d;
}

/* !important: same root-cause pattern as the search-field gold-background gotcha above —
   Kadence's checkbox reset (style-blocks-query.css) falls back through
   var(--kb-query-background-color, var(--global-palette9, #fff)) for the UNCHECKED state and
   var(--kb-query-check-highlight-color, #0c5aff) for the CHECKED state. This site's
   --global-palette9 is the CTA gold, so every unchecked box renders solid gold, and a checked box
   would render Kadence's default blue instead of gold. Setting the two custom properties directly
   (Kadence's own intended override point) fixes both without fighting specificity. */
.wp-block-kadence-query-filter-checkbox {
	--kb-query-background-color: #ffffff;
	--kb-query-check-highlight-color: #fdb92a;
}

/* !important: Kadence's own `.kb-query-basic-style .kadence-filter-wrap input[type=checkbox]`
   selector (3 classes) outranks a 1-class override on size/radius even though the background/
   border-color above wins via CSS variable substitution rather than specificity. */
.wp-block-kadence-query-filter-checkbox input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	border-radius: 4px !important;
}

.wp-block-kadence-query-filter-reset {
	margin-top: 20px;
}

/* !important throughout: the button carries Kadence's own `kb-btn-global-outline` + palette-color
   classes, which outrank a 1-class override on width/color/display the same way the outline-button
   gotcha above does. */
.wp-block-kadence-query-filter-reset .kb-button {
	display: block !important;
	width: 100% !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 4px 0 !important;
	font-family: 'Lato', sans-serif;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-align: center !important;
	text-transform: none !important;
	text-decoration: underline;
	color: #757575 !important;
}

.wp-block-kadence-query-filter-reset .kb-button:hover {
	color: #041f3d !important;
}

/* 16px side padding on the whole content column (search, sidebar/accordion, "recommended order"
   note, grid). Originally written mobile-only, matching Figma node 532:3038/532:3105/532:3107's
   consistent x=16 inset (390px frame, 358px content). Widened to apply at ALL breakpoints per
   explicit user decision (2026-08-06) — note this intentionally stacks on top of the outer
   page-level container's own edge padding at tablet/desktop widths (40px at 1280px, 120px at
   1440px), so content now sits 16px further in than Figma's desktop frame (node 56:4) shows
   there (Figma's desktop sidebar/content sit flush against that outer container with no
   additional inset of their own). Kept as a single rule (not duplicated per breakpoint) since
   every reordered mobile block is a direct grid item of this same container, so one padding
   declaration insets all of them consistently regardless of breakpoint. */
/* Direct-child combinator (>), not descendant: a plain descendant selector here also matched the
   nested `lesson-plan-grid-wrap` rowlayout's own .kt-row-column-wrap several levels deeper (Kadence
   nests a rowlayout-per-column-wrap at every level), stacking this 16px on top of that nested wrap's
   own 16px and doubling the grid's side inset to 32px vs. the search field's correct 16px. `>` scopes
   this to only the immediate .kt-row-column-wrap child of this specific row, matching the same
   direct-child pattern Kadence's own generated per-instance CSS already uses for row->column-wrap. */
.kb-row-layout-id8714_73db0d-5b > .kt-row-column-wrap {
	padding: 0 16px;
	box-sizing: border-box;
}

/* Figma node 532:3117's Button/Base sits at the same x as the badges/title above it (left-
   aligned) — Kadence's advancedbtn wrapper defaults to justify-content:center. Originally
   overridden mobile-only, on the assumption desktop's narrow 3-col card made centering read as
   left-aligned by coincidence — that coincidence broke the moment the card grid dropped to 2
   columns (2026-08-06, to fix a button-wrap regression from the padding change above): at the
   wider 2-col card width, centered buttons sit ~70px right of the badges both at desktop and
   tablet. Applied unconditionally (not breakpoint-scoped) since left-alignment is what Figma
   actually specifies and centering was never an intentional design choice at any width. */
.kb-query-block-post.type-lesson-plan .wp-block-kadence-advancedbtn {
	justify-content: flex-start;
}

/* Mobile "Filter Resources" accordion (Figma node 532:3027, "lesson-plans-listing-mobile")
   768px matches Kadence's own rowlayout mobile-stacking breakpoint
   (kadence-blocks/dist/style-blocks-rowlayout.css: @media(max-width:767px)), so the
   accordion and the column reorder below both flip at the same point Kadence itself
   already uses to stack these two columns full-width. */
@media (min-width: 768px) {
	.lesson-plan-filter-toggle {
		display: none;
	}
}

@media (max-width: 767px) {
	/* True interleaving (Search -> Filters -> "recommended order" note -> Grid) needs every
	   block to be an independently-orderable sibling, but Search+helper+Grid all live inside
	   ONE kadence/column while Filters is the other whole column — CSS `order` on the two
	   columns can only move one whole chunk before/after the other, not thread Filters between
	   Search and the grid. Fixed by unwrapping both column wrappers with `display:contents`
	   (mobile-only, scoped to this specific rowlayout instance by its uniqueID class so no other
	   rowlayout on the site is affected): every block becomes a direct grid item of the shared
	   .kt-row-column-wrap and can be given its own `order`, with zero post_content duplication —
	   still the exact same single live instance of every filter block, so the working AJAX
	   filtering can't be affected. Neither unwrapped wrapper carries its own background/border/
	   padding in this instance (confirmed via kadence-blocks/dist/blocks-column.css: the only
	   unconditional .wp-block-kadence-column rule is margin/width, nothing visual to lose). Only
	   row-gap is mobile-only here (zeroed because unwrapping makes it apply between every
	   individual block instead of just the original 2 whole columns) — the side padding lives in
	   its own unconditional rule above, not here. */
	.kb-row-layout-id8714_73db0d-5b > .kt-row-column-wrap {
		row-gap: 0;
	}

	.kb-row-layout-id8714_73db0d-5b .kadence-column8714_a42322-ed,
	.kb-row-layout-id8714_73db0d-5b .kadence-column8714_a42322-ed > .kt-inside-inner-col,
	.kb-row-layout-id8714_73db0d-5b .kadence-column8714_7b025e-04,
	.kb-row-layout-id8714_73db0d-5b .kadence-column8714_7b025e-04 > .kt-inside-inner-col {
		display: contents;
	}

	.lesson-plan-filter-toggle,
	.lesson-plan-filter-body {
		order: 2;
	}

	.lesson-plan-search-helper {
		order: 3;
	}

	.lesson-plan-grid-wrap {
		order: 4;
	}

	/* text-transform/font-weight: overriding Kadence's global bare-`button` selector
	   (button,.button,.wp-block-button__link,...{text-transform:uppercase;font-weight:900}) —
	   same sitewide gotcha already documented for the card CTA buttons above. */
	.lesson-plan-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		margin: 24px 0 0 0;
		padding: 16px;
		background: #f1f3f5;
		border: 1px solid #e0e0e0;
		border-radius: 12px;
		cursor: pointer;
		font-family: 'Lato', sans-serif;
		text-transform: none;
		font-weight: 700;
	}

	.lesson-plan-filter-toggle-icon,
	.lesson-plan-filter-toggle-chevron {
		display: inline-flex;
		flex: 0 0 16px;
	}

	.lesson-plan-filter-toggle-chevron svg {
		transition: transform 0.2s ease;
	}

	.lesson-plan-filter-toggle.is-open .lesson-plan-filter-toggle-chevron svg {
		transform: rotate(180deg);
	}

	.lesson-plan-filter-toggle-label {
		flex: 1;
		margin: 0 8px;
		text-align: left;
		font-weight: 700;
		font-size: 15px;
		color: #041f3d;
	}

	.lesson-plan-filter-body {
		display: none;
		margin: 0;
	}

	.lesson-plan-filter-body.is-open {
		display: block;
		margin-top: 12px;
	}

	/* Desktop zeroes this out (no search field above it anymore), but mobile keeps a small
	   gap between the "Filter Resources" toggle/body and this helper line. */
	.lesson-plan-search-helper {
		margin-top: 8px !important;
	}

	.lesson-plan-grid-wrap {
		margin-top: 0;
	}
}

/* ResourceCard styling for the Partner District query-card (Figma node 96:1703) —
   single county badge + title + two plain text lines, no buttons. Fixed 186px
   height (Figma's own frame is a fixed h-186/min-h-186, not a min-height that
   grows), so long district names rely on the 2-line clamp below rather than the
   card expanding. */
.kb-query-block-post.type-district {
	box-sizing: border-box;
	height: 186px;
	overflow: hidden;
	padding: 20px;
}

.kb-query-block-post.type-district .taxonomy-counties.wp-block-post-terms {
	display: inline-flex;
	margin: 0 0 16px 0;
	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(37, 119, 189, 0.1);
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 12px;
	white-space: nowrap;
	color: var(--global-palette2, #1c5482);
}

.kb-query-block-post.type-district .wp-block-post-title {
	margin: 0 0 8px 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	color: var(--global-palette3, #041f3d);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Districts with a Redirect URL render the title as a link (see
   kadence_ccgi_resourcehub_link_district_card_title() in functions.php) —
   inherit the heading's own color/font instead of default link blue. */
.kb-query-block-post.type-district .wp-block-post-title a {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

/* Hover/focus affordance is a color shift, not an underline: this title can
   wrap to 2 lines (-webkit-line-clamp above), and Chrome's native line-clamp
   implementation only paints text-decoration on the clamped title's first
   wrapped line, not the rest — confirmed live, and border-bottom (even with
   box-decoration-break: clone) has the same per-fragment painting gap here.
   A color change has no such fragment-slicing behavior, so it renders
   correctly across every wrapped line. */
.kb-query-block-post.type-district .wp-block-post-title a:hover,
.kb-query-block-post.type-district .wp-block-post-title a:focus {
	color: var(--global-palette2, #1c5482);
}

.kb-query-block-post.type-district .partner-district-year,
.kb-query-block-post.type-district .partner-district-status {
	margin: 0;
	font-family: 'Lato', sans-serif;
	font-size: 13.5px;
	line-height: 19.58px;
	color: #757575;
}

.kb-query-block-post.type-district .partner-district-year {
	margin-bottom: 8px;
}

/* Search field above the grid (Figma node 96:1486) — same treatment as the
   Lesson Plans search field (same colors/dimensions in Figma), just re-scoped
   to this page's own className so the two grids' search fields can diverge
   independently later without one page's CSS affecting the other. */
.partner-district-search-label {
	margin: 0 0 8px 0;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #1f2937;
}

.partner-district-search-field .kb-filter-search-wrap {
	max-width: 546px;
	height: 48px;
	background: #f1f3f5;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	overflow: hidden;
}

/* !important: same Kadence basic-input gold-background fallback documented above
   for .lesson-plan-search-field. */
.partner-district-search-field .kb-filter-search {
	width: 100%;
	height: 100%;
	padding: 0 50px 0 16px;
	background: #f1f3f5 !important;
	border: none !important;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	color: #041f3d !important;
}

/* !important: this site's rebrand also reassigned --global-palette5/6 (Kadence's typed/placeholder
   text fallbacks) to near-white (#ffffff / #f0f3f5) for use elsewhere as light-on-dark text — but
   Kadence's own input rule (`.kb-query-basic-style .kadence-filter-wrap input[type=text]`, 3
   specificity units) outranks this 2-class selector for `color`, and its `::placeholder` rule ties
   this one on specificity while loading later in the DOM (style-blocks-query.css is enqueued after
   query-cards.css), so source order breaks the tie in Kadence's favor. Both effectively render
   invisible near-white-on-white text/placeholder without !important here. */
.partner-district-search-field .kb-filter-search::placeholder {
	color: #6b7280 !important;
}

.partner-district-search-field .kb-filter-search-wrap .kb-filter-search-btn {
	width: 44px !important;
	background: var(--global-palette9, #fdb92a) !important;
	color: #041f3d !important;
	cursor: pointer;
}

/* Numbered pager (Figma node 99:5 "Pager") — Kadence's native query-pagination
   block, styled entirely via CSS rather than the block's own color/background
   attributes since the active-page box-shadow isn't exposed as a block setting.
   Scoped to the block's generic wrapper class, not a page-specific className:
   confirmed via the live DOM that Kadence_Blocks_Pro_Pagination_Block::build_html()
   hardcodes its own wrapper class list and never merges in the block's
   `className` attribute, despite block.json declaring `"className": true`
   support — the same "declared but not actually implemented" gap already hit
   with inheritStyles:"outline" and empty-string textTransform. Unscoped so the
   upcoming Promotional Material / External Video grids can reuse this as-is,
   same convention as the checkbox/reset filter styles below. */
.wp-block-kadence-query-pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wp-block-kadence-query-pagination .nav-links a.page-numbers,
.wp-block-kadence-query-pagination .nav-links span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 4px;
	background: #f1f3f5;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	color: #757575;
	text-decoration: none;
}

.wp-block-kadence-query-pagination .nav-links span.current {
	background: #2577bd;
	box-shadow: 0px 2px 6px 0px rgba(37, 119, 189, 0.25);
	font-weight: 700;
	color: #ffffff;
}

.wp-block-kadence-query-pagination .nav-links span.dots {
	background: transparent;
}

/* !important on min-width: Kadence's own `.pagination .page-numbers` rule sets
   `min-width:2.5em`, which at this rule's 18px font-size resolves to 45px and
   wins over the plain `width:36px` above (min-width always overrides width in
   a conflict, regardless of specificity) — confirmed via computed style
   (45px until this was added). Forcing min-width back to 36px keeps Prev/Next
   the same size as the numbered squares. */
.wp-block-kadence-query-pagination .nav-links a.prev,
.wp-block-kadence-query-pagination .nav-links a.next {
	min-width: 36px !important;
	font-size: 18px;
}

/* ResourceCard styling for the Promotional Material query-card (Figma node
   59:2607) — 300px featured-image frame, one material-type badge, title.
   No buttons: the title is wrapped in a link (see
   kadence_ccgi_resourcehub_link_promotional_material_card_title() in
   functions.php) whose ::before is blown up to cover the whole card —
   `position: relative` here is what that overlay positions against. */
.kb-query-block-post.type-promotional-material {
	position: relative;
	box-sizing: border-box;
}

.kb-query-block-post.type-promotional-material .wp-block-post-title a {
	color: inherit;
	font: inherit;
	text-decoration: none;
}

.kb-query-block-post.type-promotional-material .wp-block-post-title a::before {
	content: '';
	position: absolute;
	inset: 0;
}

.kb-query-block-post.type-promotional-material .wp-block-post-featured-image {
	margin: 0;
	height: 300px;
	min-height: 300px;
	background: #e0e0e0;
	overflow: hidden;
}

.kb-query-block-post.type-promotional-material .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kb-query-block-post.type-promotional-material .taxonomy-material-types.wp-block-post-terms {
	display: inline-flex;
	margin: 20px 20px 0 20px;
	padding: 4px 10px;
	border-radius: 4px;
	background: rgba(37, 119, 189, 0.1);
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 12px;
	white-space: nowrap;
	color: var(--global-palette2, #1c5482);
}

.kb-query-block-post.type-promotional-material .wp-block-post-title {
	margin: 16px 20px 20px 20px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	color: var(--global-palette3, #041f3d);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Search field above the grid (Figma node 96:467) — same treatment as the
   Lesson Plans/Partner Districts search fields, re-scoped to this page's own
   className per the same isolation convention used for those two. */
.promotional-material-search-label {
	margin: 0 0 8px 0;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: #1f2937;
}

.promotional-material-search-field .kb-filter-search-wrap {
	max-width: 546px;
	height: 48px;
	background: #f1f3f5;
	border: 1px solid #d1d5db;
	border-radius: 4px;
	overflow: hidden;
}

/* !important: same Kadence basic-input gold-background fallback documented
   above for .lesson-plan-search-field/.partner-district-search-field. */
.promotional-material-search-field .kb-filter-search {
	width: 100%;
	height: 100%;
	padding: 0 50px 0 16px;
	background: #f1f3f5 !important;
	border: none !important;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	color: #041f3d !important;
}

.promotional-material-search-field .kb-filter-search::placeholder {
	color: #6b7280 !important;
}

.promotional-material-search-field .kb-filter-search-wrap .kb-filter-search-btn {
	width: 44px !important;
	background: var(--global-palette9, #fdb92a) !important;
	color: #041f3d !important;
	cursor: pointer;
}

/* 16px side padding on the whole content column (search, sidebar/accordion,
   grid, pagination) — same technique and same "apply at ALL breakpoints"
   decision already made for .lesson-plan-search-field's row (see that rule's
   comment above), just re-scoped to this page's own rowlayout uniqueID
   (8749_pm_row01, confirmed via rendered markup: `kb-row-layout-id8749_pm_row01`).
   Matches Figma node 532:3439's consistent x=16 inset on SearchAndFilters
   (532:3450) and ResultsGrid (532:3494) at the 390px mobile frame. */
.kb-row-layout-id8749_pm_row01 > .kt-row-column-wrap {
	padding: 0 16px;
	box-sizing: border-box;
}

/* Mobile "Filter Resources" accordion — same pattern as
   .lesson-plan-filter-toggle above, re-scoped to this page's own className
   (promotional-material-filters.js toggles these same classes). */
@media (min-width: 768px) {
	.promotional-material-filter-toggle {
		display: none;
	}
}

@media (max-width: 767px) {
	/* Same interleaving problem and fix as the Lesson Plans row above (see its
	   longer comment for the full explanation): Search+Grid+Pagination all
	   live in one kadence/column while Filters is the other whole column, so
	   `display:contents` unwraps both to let `order` thread Filters between
	   Search and the grid — Figma's mobile order is Search -> Filters -> Grid
	   -> Pager (node 532:3439). */
	.kb-row-layout-id8749_pm_row01 > .kt-row-column-wrap {
		row-gap: 0;
	}

	.kadence-column8749_pm_col01,
	.kadence-column8749_pm_col01 > .kt-inside-inner-col,
	.kadence-column8749_pm_col02,
	.kadence-column8749_pm_col02 > .kt-inside-inner-col {
		display: contents;
	}

	.promotional-material-search-label,
	.promotional-material-search-field {
		order: 1;
	}

	.promotional-material-filter-toggle,
	.promotional-material-filter-body {
		order: 2;
	}

	.promotional-material-grid-wrap {
		order: 3;
	}

	.kb-row-layout-id8749_pm_row01 .wp-block-kadence-query-pagination {
		order: 4;
	}

	.promotional-material-filter-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
		margin: 24px 0 0 0;
		padding: 16px;
		background: #f1f3f5;
		border: 1px solid #e0e0e0;
		border-radius: 12px;
		cursor: pointer;
		font-family: 'Lato', sans-serif;
		text-transform: none;
		font-weight: 700;
	}

	.promotional-material-filter-toggle-icon,
	.promotional-material-filter-toggle-chevron {
		display: inline-flex;
		flex: 0 0 16px;
	}

	.promotional-material-filter-toggle-chevron svg {
		transition: transform 0.2s ease;
	}

	.promotional-material-filter-toggle.is-open .promotional-material-filter-toggle-chevron svg {
		transform: rotate(180deg);
	}

	.promotional-material-filter-toggle-label {
		flex: 1;
		margin: 0 8px;
		text-align: left;
		font-weight: 700;
		font-size: 15px;
		color: #041f3d;
	}

	.promotional-material-filter-body {
		display: none;
		margin: 0;
	}

	.promotional-material-filter-body.is-open {
		display: block;
		margin-top: 12px;
	}

	.promotional-material-grid-wrap {
		margin-top: 0;
	}
}

/* ResourceCard styling for the External Video query-card (Figma node
   149:62/532:3604) — image-only thumbnail with the title placed below it
   (Figma has no title in this position at all; a real title line below the
   thumbnail is an explicit deviation from the mockup, not a Figma match).
   aspect-ratio (not a fixed height) so the same rule holds the Figma
   383:216 (desktop) and 358:202/mobile ratio proportionally at any card
   width, rather than needing a separate mobile override. */
.kb-query-block-post.type-external-video .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 383 / 216;
	border-radius: 8px;
	overflow: hidden;
	background: #e0e0e0;
}

.kb-query-block-post.type-external-video .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

/* The click-through link (see kadence_ccgi_resourcehub_link_external_video_card_image()
   in functions.php) wraps the whole <figure> — display:block keeps the anchor from
   collapsing to inline height and disturbing the aspect-ratio box above. */
.kb-query-block-post.type-external-video a.external-video-card-thumb-link {
	display: block;
}

.kb-query-block-post.type-external-video .wp-block-post-title {
	margin: 12px 0 0 0;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: var(--global-palette3, #041f3d);
}

/* Section heading ("Video Topic" in Figma, e.g. "Test Videos" here) repeats
   once per Video Category query on the page — Figma node 149:51/149:56 shows
   consistent 64px top padding before each heading at every breakpoint it
   appears in the desktop frame (node 66:3607). */
.external-video-section-heading {
	margin: 64px 0 24px 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 28px;
	color: #041f3d;
}

@media (max-width: 767px) {
	.external-video-section-heading {
		margin: 32px 0 16px 0;
		font-size: 20px;
	}
}

/* 16px side padding at all breakpoints — same convention already established for
   the Lesson Plans/Partner Districts/Promotional Materials pages' own outer
   rowlayout (see .kb-row-layout-id8714_73db0d-5b's comment above for why this
   isn't Figma's own desktop spec but a deliberate cross-page consistency choice),
   re-scoped to this page's own rowlayout uniqueID (kb-row-layout-id8747_page_row01). */
.kb-row-layout-id8747_page_row01 > .kt-row-column-wrap {
	padding: 0 16px;
	box-sizing: border-box;
}

/* 16px side padding at all breakpoints — same convention as the rule directly
   above (this page's outer rowlayout was missed when the Partner Districts
   page was originally built, leaving the Search field and grid flush against
   the screen edges on mobile), re-scoped to this page's own rowlayout
   uniqueID (kb-row-layout-id8745_pd_page_row01). This is the outer row that
   wraps both the search field and the nested .partner-district-grid-wrap row,
   so one rule fixes both; `>` keeps it from stacking with that nested row's
   own .kt-row-column-wrap. */
.kb-row-layout-id8745_pd_page_row01 > .kt-row-column-wrap {
	padding: 0 16px;
	box-sizing: border-box;
}