/*
 * News & Articles page (templates/news-and-articles.php).
 *
 * Template-scoped on purpose — oc-custom.css ships site-wide, this is one page.
 * The filter toolbar and pager borrow the search page's visual vocabulary
 * (12px radius, hairline borders, 36px pager cells) but carry their own class
 * names: search-results.css is only ever enqueued by templates/search-results.php,
 * so reusing .oc-sr__* here would render unstyled.
 */

/* --- Featured lead image (was an inline <style> block in the template) --- */

.blog-card-image-wrapper.featured-v6 {
	position: relative;
	width: 100%;
	padding-top: 75%;
	overflow: hidden;
}

.blog-card-image-wrapper.featured-v6 img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-size-50x50 {
	max-width: 50px;
	max-height: 50px;
}

/* --- Space above the lead story --- */

/*
 * The template wraps its content in .section (120px of top padding on desktop)
 * and the featured story is itself a .section.hero.blog-hero (another 80px), so
 * 200px of stacked padding sat between the page-header band and the first card —
 * 108px even on a phone. One band of space is enough directly under a header
 * that is already a full-bleed coloured section.
 *
 * Specificity is deliberate: .section.oc-na__body (0,2,0) beats the sheet's
 * .section (0,1,0), and the nested reset has to reach (0,4,0) to beat
 * .section.hero.blog-hero (0,3,0). Media queries add none, and this sheet loads
 * after the Webflow one.
 */
.section.oc-na__body {
	padding-top: 48px;
}

.oc-na__body .section.hero.blog-hero {
	padding-top: 0;
}

@media screen and (max-width: 767px) {
	.section.oc-na__body {
		padding-top: 32px;
	}
}

@media screen and (max-width: 479px) {
	.section.oc-na__body {
		padding-top: 24px;
	}
}

/* --- Archive section --- */

/* Every pager and filter link lands on #all-articles; clear the fixed header. */
.oc-na__section {
	scroll-margin-top: 90px;
}

/*
 * Only when the current-edition block is actually above it. #oc-na-edition is
 * always rendered and hidden with .is-hidden, and the AJAX swap toggles that
 * same class — so the gap follows the block with no second flag for the PHP and
 * the JS to keep in sync. The HTML comment between the two elements is a comment
 * node, which `+` skips.
 */
#oc-na-edition:not(.is-hidden) + .oc-na__section {
	margin-top: 64px;
}

/* --- Filter toolbar --- */

/*
 * auto-fit rather than a breakpoint: the toolbar has four or five controls
 * depending on whether the department taxonomy is present, and it should reflow
 * on its own. Deliberately not built from .btn-primary/.btn-secondary — both go
 * width:100% at <=479px, which would stack two full-width pills and push the
 * grid below the fold.
 */
.oc-na__filters {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px 16px;
	align-items: end;
	margin-bottom: 32px;
}

.oc-na__field {
	min-width: 0;
}

.oc-na__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--neutral--600);
}

/*
 * Not .w-input / .w-select: those are 38px tall, 14px type, and carry a baked-in
 * 10px bottom margin that would put unexplained drift into the toolbar row.
 * 16px is also the floor below which iOS Safari zooms the viewport on focus and
 * never zooms back.
 */
.oc-na__input {
	display: block;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 12px;
	background-color: #fff;
	font-size: 16px;
	line-height: 1.3;
	color: var(--neutral--800);
}

/* No `outline: 0` here. oc-custom.css restores a keyboard focus ring site-wide
   precisely because the Webflow export strips it off form fields, and this sheet
   is enqueued after it — zeroing the outline would silently undo that. */
.oc-na__input:focus {
	border-color: var(--accent--primary-1);
}

/* Safari sizes a date input to its content and ignores width until the
   platform appearance is dropped. */
.oc-na__input[type="date"] {
	-webkit-appearance: none;
	appearance: none;
}

select.oc-na__input {
	padding-right: 34px;
}

.oc-na__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.oc-na__submit {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	min-height: 52px;
	padding: 0 26px;
	border: 1px solid var(--neutral--800);
	border-radius: 12px;
	background-color: var(--neutral--800);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
}

.oc-na__submit:hover {
	background-color: var(--neutral--700);
	border-color: var(--neutral--700);
}

.oc-na__clear {
	font-size: 14px;
	color: var(--neutral--600);
	text-decoration: underline;
}

.oc-na__clear:hover {
	color: var(--neutral--800);
}

/* --- Result count / empty state --- */

.oc-na__status {
	margin: 0 0 24px;
	font-size: 14px;
	color: var(--neutral--600);
}

/* The repeat under the grid — same line, so a reader who has scrolled the whole
   list can see where they are without scrolling back up. */
.oc-na__status--foot {
	margin: 28px 0 0;
}

.oc-na__status a {
	color: var(--neutral--800);
	text-decoration: underline;
}

/* --- Swapping in a new page --- */

/* The grid is replaced in place rather than navigated to, so the only signal a
   reader gets is this one. Dimmed, not hidden: keeping the outgoing page visible
   and the height stable stops the footer jumping up and back. */
#oc-na-results {
	position: relative;
	transition: opacity 120ms ease-out;
}

#oc-na-results.is-loading {
	opacity: 0.45;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	#oc-na-results {
		transition: none;
	}
}

/* The edition block and the Clear link are both always rendered server-side so
   the JS can show and hide them without another round trip — which only works if
   the class they toggle actually hides something. */
#oc-na-edition.is-hidden,
.oc-na__clear.is-hidden {
	display: none;
}

/* --- Pager --- */

.oc-na__pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 40px;
}

/* Repeated above the grid as well as below it: twenty-four cards is a long way
   to scroll back for a Next button. */
.oc-na__pager--top {
	margin-top: 0;
	margin-bottom: 32px;
}

.oc-na__pager--bottom {
	margin-top: 20px;
}

.oc-na__pager-num,
.oc-na__pager-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	font-size: 14px;
	color: var(--neutral--800);
}

a.oc-na__pager-num:hover,
a.oc-na__pager-step:hover {
	background-color: rgba(0, 0, 0, 0.04);
}

.oc-na__pager-num.is-current {
	background-color: var(--neutral--800);
	border-color: var(--neutral--800);
	color: #fff;
	font-weight: 700;
}

.oc-na__pager-step.is-disabled {
	opacity: 0.4;
}

.oc-na__pager-gap {
	padding: 0 2px;
	color: var(--neutral--600);
}

@media (max-width: 479px) {
	/* Keep the number row usable on a phone: the arrows lose their words. */
	.oc-na__pager-word {
		display: none;
	}

	.oc-na__submit {
		flex: 1 1 auto;
	}
}