/*
Avahi Post Cards — "News & Awards" card grid.

Rendered by includes/post-cards.php (shortcode [av_post_cards]) and by the
Avahi Post Cards Elementor widget. Everything here is a DEFAULT: the widget's
Style tab writes higher-specificity rules that override these, so the block
looks right out of the box and stays fully editable.

Structure: desktop / base styles first, media queries at the bottom.
*/

/* -----------------------------------------------------------------------------
   Grid
-------------------------------------------------------------------------- */
.av-pc {
	--av-pc-cols: 3;
	--av-pc-cols-tablet: 2;
	--av-pc-cols-mobile: 1;

	display: grid;
	grid-template-columns: repeat(var(--av-pc-cols), minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

/* -----------------------------------------------------------------------------
   Card
-------------------------------------------------------------------------- */
.av-pc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.02);
	transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}

.av-pc-card:hover {
	border-color: rgba(255, 255, 255, 0.22);
}

/* Whole-card click target. Sits under the real links so the title and the CTA
   stay individually focusable and keyboard-reachable. */
.av-pc-cover {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.av-pc--linked .av-pc-title-link,
.av-pc--linked .av-pc-more,
.av-pc--linked .av-pc-term {
	position: relative;
	z-index: 2;
}

/* -----------------------------------------------------------------------------
   Media — the square brand / featured tile
-------------------------------------------------------------------------- */
.av-pc-media {
	display: block;
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	margin-bottom: 24px;
	border-radius: 14px;
	overflow: hidden;
	background-color: #ffffff;
	line-height: 0;
}

.av-pc-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* image_fit="contain" — for logos that must not be cropped. */
.av-pc--contain .av-pc-img {
	object-fit: contain;
	padding: 8px;
	box-sizing: border-box;
}

/* Height Mode = "Natural image height". The tile stops constraining the image
   and simply wraps it, so the shape of the file decides the height. */
.av-pc--media-auto .av-pc-media {
	height: auto;
}

.av-pc--media-auto .av-pc-img {
	height: auto;
}

.av-pc-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #1a2440 0%, #0d1222 100%);
}

/* -----------------------------------------------------------------------------
   Body
-------------------------------------------------------------------------- */
.av-pc-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.av-pc-term {
	align-self: start;
	margin-bottom: 12px;
	padding: 4px 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	color: #9fb0cc;
	font-size: 12px;
	line-height: 1.5;
	text-decoration: none;
}

.av-pc-title {
	margin: 0 0 8px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
}

.av-pc-title-link {
	color: inherit;
	text-decoration: none;
}

.av-pc-title-link:hover,
.av-pc-title-link:focus-visible {
	color: inherit;
	text-decoration: none;
}

.av-pc-date {
	display: block;
	margin-bottom: 16px;
	color: #7d8798;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
}

.av-pc-excerpt {
	margin: 0 0 16px;
	color: #aeb8ca;
	font-size: 14px;
	line-height: 1.6;
}

/* -----------------------------------------------------------------------------
   "Read the article" link
-------------------------------------------------------------------------- */
/* Flows directly under the date, as in the design — the cards still bottom-out
   together because the grid stretches them. The widget's "Pin To Card Bottom"
   switch adds `margin-top: auto` when you want the links aligned instead. */
.av-pc-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: start;
	color: #488fdc;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.av-pc-more:hover,
.av-pc-more:focus-visible {
	color: #6cb2ec;
	text-decoration: none;
}

.av-pc-arrow {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	transition: transform .25s ease;
}

.av-pc-card:hover .av-pc-arrow {
	transform: translateX(4px);
}

/* -----------------------------------------------------------------------------
   Empty state + pagination
-------------------------------------------------------------------------- */
.av-pc-empty {
	margin: 0;
	color: #8b97ab;
	font-size: 15px;
}

.av-pc-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.av-pc-pager-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	color: #cdd6e6;
	font-size: 14px;
	line-height: 1;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.av-pc-pager-item:hover {
	border-color: rgba(255, 255, 255, 0.32);
	color: #ffffff;
}

.av-pc-pager-item.is-current {
	border-color: #488fdc;
	background-color: #488fdc;
	color: #ffffff;
}

.av-pc-pager-gap {
	color: #6b7688;
	font-size: 14px;
}

/* Previous / Next carry words rather than numbers, so they need room. */
.av-pc-pager-arrow {
	padding: 0 16px;
}

.av-pc-pager-arrow.is-disabled {
	opacity: .4;
	cursor: default;
}

/* -----------------------------------------------------------------------------
   Load more
-------------------------------------------------------------------------- */
.av-pc-loadmore-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 32px;
}

.av-pc-loadmore {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 28px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background-color: transparent;
	color: #ffffff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.av-pc-loadmore:hover:not(:disabled) {
	border-color: #488fdc;
	background-color: #488fdc;
	color: #ffffff;
}

.av-pc-loadmore:disabled {
	opacity: .6;
	cursor: default;
}

.av-pc-loadmore[hidden] {
	display: none;
}

.av-pc-loadmore-status {
	margin: 0;
	color: #8b97ab;
	font-size: 14px;
	text-align: center;
}

.av-pc-loadmore-status:empty {
	display: none;
}

/* -----------------------------------------------------------------------------
   Utilities
-------------------------------------------------------------------------- */
.av-pc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Keyboard focus must stay visible even though the card is one big link. */
.av-pc-title-link:focus-visible,
.av-pc-more:focus-visible,
.av-pc-term:focus-visible,
.av-pc-loadmore:focus-visible,
.av-pc-pager-item:focus-visible {
	outline: 2px solid #6cb2ec;
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.av-pc-card,
	.av-pc-arrow {
		transition: none;
	}

	.av-pc-card:hover .av-pc-arrow {
		transform: none;
	}
}

/* =============================================================================
   Responsive — Elementor's default breakpoints (tablet 1024, mobile 767)
   ========================================================================== */
@media (max-width: 1024px) {
	.av-pc {
		grid-template-columns: repeat(var(--av-pc-cols-tablet), minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.av-pc {
		grid-template-columns: repeat(var(--av-pc-cols-mobile), minmax(0, 1fr));
		gap: 16px;
	}

	.av-pc-card {
		padding: 20px;
	}

	.av-pc-media {
		margin-bottom: 20px;
	}
}

/* ==========================================================================
   Featured post — one wide card above the grid

   Its own block rather than a wide variant of .av-pc-card: the grid card is a
   vertical stack sized by a column, this is a two-up band sized by the row.
   Sharing a template would have meant one of them fighting the other's rules.
   ========================================================================== */
.av-pc-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	margin-bottom: var(--av-pc-feature-gap, 32px);
	border-radius: var(--av-pc-feature-radius, 20px);
	background-color: var(--av-pc-feature-bg, #0b0f1d);
	overflow: hidden;
}

/* Artwork on the right: swap the columns rather than reorder in markup, so the
   reading order stays image-then-text for anything not using the visual order. */
.av-pc-feature--media-right .av-pc-feature__media { order: 2; }
.av-pc-feature--media-right .av-pc-feature__body  { order: 1; }

/* Stacked variant: artwork over the copy at any width. */
.av-pc-feature--top {
	grid-template-columns: minmax(0, 1fr);
}

.av-pc-feature__media {
	position: relative;
	display: block;
	min-height: var(--av-pc-feature-media-min, 260px);
	overflow: hidden;
}

.av-pc-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* `contain` on the grid is usually a logo; honour the same intent here. */
.av-pc--contain .av-pc-feature__media img {
	object-fit: contain;
}

.av-pc-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: var(--av-pc-feature-pad, 48px);
	min-width: 0;
}

.av-pc-feature__eyebrow {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--av-pc-feature-eyebrow, rgba(255, 255, 255, .62));
}

.av-pc-feature__title {
	margin: 0;
	font-size: clamp(24px, 2.1vw, 34px);
	line-height: 1.22;
	font-weight: 600;
	color: var(--av-pc-feature-title, #ffffff);
	/* A long headline must wrap rather than widen the column. */
	min-width: 0;
	overflow-wrap: break-word;
}

.av-pc-feature__title a {
	color: inherit;
	text-decoration: none;
}

.av-pc-feature__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.av-pc-feature__date {
	font-size: 15px;
	color: var(--av-pc-feature-date, rgba(255, 255, 255, .5));
}

.av-pc-feature__excerpt {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--av-pc-feature-excerpt, rgba(255, 255, 255, .62));
}

.av-pc-feature__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: start;
	font-size: 15px;
	font-weight: 600;
	color: var(--av-pc-feature-link, #488FDC);
	text-decoration: none;
}

.av-pc-feature__link:hover {
	color: var(--av-pc-feature-link-hover, #6CB2EC);
}

.av-pc-feature__link .av-pc-arrow {
	width: 18px;
	height: 18px;
	transition: transform .25s ease;
}

.av-pc-feature__link:hover .av-pc-arrow {
	transform: translateX(3px);
}

/*
 * Below the tablet breakpoint the two-up band has no room to be a band.
 *
 * Forced, because the Style controls fight it. Artwork Width emits
 *   .elementor-NN .elementor-element.elementor-element-XX
 *   .av-pc-feature--side.av-pc-feature--media-left{grid-template-columns:40% ...}
 * at (0,5,0) with NO media query, and Minimum Artwork Height the same at
 * (0,4,0). Both therefore apply at 320px as well, where they produced a
 * two-column band with a 260px image floor — a sliver of picture beside a
 * sliver of text. Repeating the class and marking these important is what
 * actually collapses the card on a phone.
 *
 * Only the two STRUCTURAL properties are forced. Padding is left alone: it is
 * a responsive control, so a per-device value set in Elementor still wins.
 */
@media (max-width: 767px) {
	.av-pc-feature.av-pc-feature.av-pc-feature,
	.av-pc-feature.av-pc-feature.av-pc-feature.av-pc-feature--side,
	.av-pc-feature.av-pc-feature.av-pc-feature.av-pc-feature--top {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Media back on top whichever side it was on, so the stack reads the same
	   way round as every other card on the page. */
	.av-pc-feature--media-right .av-pc-feature__media { order: 0; }
	.av-pc-feature--media-right .av-pc-feature__body  { order: 0; }

	.av-pc-feature.av-pc-feature .av-pc-feature__media {
		/* A desktop floor on a phone is what made the picture fill the screen. */
		min-height: 0 !important;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.av-pc-feature__body {
		padding: 24px;
	}
}

/* -----------------------------------------------------------------------------
   Inline meta — "DEC 17, 2025 | COMPANY NEWS" above the title

   One line replacing the term pill and the separate date. Deliberately quiet:
   small, upper case and letter-spaced, so it reads as a label rather than
   competing with the headline underneath it.
-------------------------------------------------------------------------- */
.av-pc-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--av-pc-meta-color, #9fb0cc);
	font-size: var(--av-pc-meta-size, 12px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* The separator is decoration, not content — it is aria-hidden in the markup
   and dimmed here so the two real parts stay the emphasis. */
.av-pc-meta__sep {
	opacity: .45;
	font-weight: 400;
}

/* Wrapping mid-label looks like two separate labels; keep each part whole and
   let the line break between them instead. */
.av-pc-meta__date,
.av-pc-meta__term {
	white-space: nowrap;
}

/* ==========================================================================
   Tile classes — the hooks for custom CSS

   The renderer marks every tile with where its image came from, so a grid
   mixing brand logos and ordinary featured images can style each kind on its
   own. These names are stable; target them rather than :nth-child.

     .av-pc-media--field      the custom field / ACF image (a logo, usually)
     .av-pc-media--featured   the post's own featured image
     .av-pc-media--fallback   the Fallback Image, when a post has neither
     .av-pc-media--none       no image at all; the tile is not rendered

   The same suffixes appear on the featured card as
   .av-pc-feature__media.av-pc-media--field, and so on.

   The image inside any of them is always .av-pc-img.

   Nothing is declared here on purpose: the widget's Style tab writes these
   through Elementor, and a default in this file would sit under whatever you
   set there and only confuse matters. Example of a custom rule:

     .av-pc-media--field .av-pc-img { filter: grayscale(1); }
     .av-pc-media--field:hover .av-pc-img { filter: none; }
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Search — the field above the grid on an archive
-------------------------------------------------------------------------- */
.av-pc-search {
	display: flex;
	justify-content: var(--av-pc-search-justify, center);
	margin-bottom: var(--av-pc-search-gap, 32px);
}

.av-pc-search .av-pc-search__field {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--av-pc-search-width, 420px);
}

.av-pc-search .av-pc-search__icon {
	position: absolute;
	left: 16px;
	width: 18px;
	height: 18px;
	color: var(--av-pc-search-icon, #7d8798);
	pointer-events: none;
}

.av-pc-search .av-pc-search__input {
	width: 100%;
	/* Room for the icon on the left and the clear button on the right. */
	padding: 12px 40px 12px 44px !important;
	border: 1px solid var(--av-pc-search-border, rgba(255, 255, 255, 0.16));
	border-radius: var(--av-pc-search-radius, 999px);
	background: var(--av-pc-search-bg, rgba(255, 255, 255, 0.04));
	color: var(--av-pc-search-color, #e8edf5);
	font-size: 15px;
	line-height: 1.4;
	/* Padding inside the width, or the field overflows its own max-width. */
	box-sizing: border-box;
}

.av-pc-search .av-pc-search__input::placeholder {
	color: var(--av-pc-search-placeholder, #7d8798);
}

.av-pc-search .av-pc-search__input:focus {
	outline: none;
	border-color: var(--av-pc-search-border-focus, #488FDC);
}

/* Safari draws its own clear button on type=search; ours is the visible one. */
.av-pc-search .av-pc-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.av-pc-search .av-pc-search__clear {
	position: absolute;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: var(--av-pc-search-icon, #7d8798);
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.av-pc-search .av-pc-search__clear:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

/* ==========================================================================
   Category / tag archive — the page around the grid

   Used by category.php and tag.php through includes/archive-cards.php. Loaded
   with the card styles because the archive never appears without them.
   ========================================================================== */
/*
 * The pill gradient, kept in step with .av-pg by value rather than by
 * reference: --av-pg-grad is declared on .av-pg, which neither of these sits
 * inside, so pointing at it would always fall through to the default. Change
 * these two together with the blog grid's.
 */
.av-pc--bleed,
.av-archive {
	--av-archive-pill-grad: linear-gradient(90deg, #366ADF 0%, #46BAE3 100%);
	--av-archive-pill-ring: #366ADF;
}

.av-archive {

	/* Same measure as the site's Elementor containers, so the grid lines up
	   with every other section rather than sitting a little wider or narrower. */
	max-width: var(--av-archive-width, 1200px);
	margin: 0 auto;
	padding: var(--av-archive-pad, 72px 20px 96px);
}

.av-archive .av-archive__head {
	margin-bottom: var(--av-archive-head-gap, 40px);
}

.av-archive .av-archive__eyebrow {
	display: block;
	margin-bottom: 10px;
	color: var(--av-archive-eyebrow, #488FDC);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.av-archive .av-archive__title {
	margin: 0;
	color: var(--av-archive-title, #ffffff);
	/* Scales with the viewport: these titles run long, and a fixed size either
	   wraps to four lines on a laptop or looks lost on a wide screen. */
	/*
	 * The Elementor kit styles headings as `.elementor-kit-N h1`, which is
	 * (0,1,1) and outranks a single class. Two classes deep handles the size;
	 * !important handles the kit's line-height, which was making a long
	 * category name overlap its own second line.
	 */
	font-size: clamp(28px, 3.4vw, 46px) !important;
	line-height: 1.18 !important;
	font-weight: 600;
	/* A long category name must wrap, not push the page wider. */
	overflow-wrap: break-word;
}

.av-archive .av-archive__count {
	margin: 12px 0 0;
	color: var(--av-archive-muted, #7d8798);
	font-size: 15px;
}

.av-archive .av-archive__desc {
	max-width: 780px;
	margin-top: 16px;
	color: var(--av-archive-muted, #7d8798);
	font-size: 16px;
	line-height: 1.65;
}

.av-archive .av-archive__desc p:last-child {
	margin-bottom: 0;
}

/* The search box belongs to the grid, not the heading; left-align it here so
   it reads as part of the page rather than a centred banner. */
.av-archive .av-pc-search {
	justify-content: flex-start;
}

@media (max-width: 767px) {
	.av-archive {
		padding: 40px 18px 64px;
	}

	.av-archive .av-archive__head {
		margin-bottom: 28px;
	}

	/* Full width on a phone: a 420px field in a 320px column overflows. */
	.av-archive .av-pc-search__field {
		max-width: 100%;
	}
}

/* -----------------------------------------------------------------------------
   Archive category pill — matched to the blog grid

   The blog page is a different component (.av-pg, includes/post-grid.php) whose
   pill has a GRADIENT border. A gradient cannot go in `border-color`, so the
   original does it with a masked ::before ring; this copies that exact
   technique rather than approximating it with a solid blue line, so the two
   pages match instead of nearly matching.

   Scoped to .av-archive on purpose: Post Cards widgets already placed around
   the site keep the plain pill they have today.
-------------------------------------------------------------------------- */
.av-pc--bleed .av-pc-term {
	position: relative;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	max-width: 100%;

	/* A long category name wraps inside the pill instead of running past it. */
	white-space: normal;
	overflow-wrap: break-word;

	border: 0;
	border-radius: 999px;
	padding: 8px 16px;
	background: transparent;

	/* Values lifted from .av-pg .av-pg-card-term so the two are identical. */
	color: #ffffff;
	font-family: Manrope, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	text-decoration: none;
	transition: color .18s ease;
}

/* The ring. Two stacked masks cancel each other everywhere except the 1px
   padding box, which leaves the gradient showing as a border and nothing
   showing in the middle. */
.av-pc--bleed .av-pc-term::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--av-archive-pill-grad);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}

/* No mask-composite support: a solid ring beats no outline at all. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
	.av-pc--bleed .av-pc-term {
		border: 1px solid var(--av-archive-pill-ring);
	}

	.av-pc--bleed .av-pc-term::before {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
   Archive card text — matched to the blog grid

   Values taken from .av-pg-card-title-link / -date / -cta in custom-theme.css.

   Two classes deep because the Elementor kit styles bare links as
   `.elementor-kit-N a`, which is (0,1,1). The base rule here is
   `.av-pc-title-link { color: inherit }` at (0,1,0), so without this the kit
   won and every card headline on the archive rendered in link blue instead of
   white. The date and CTA are set for the same reason and to keep the two
   pages on one type scale.
-------------------------------------------------------------------------- */
.av-pc--bleed .av-pc-title,
.av-pc--bleed .av-pc-title-link {
	color: #ffffff;
	font-family: Manrope, sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 34px;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.av-pc--bleed .av-pc-title-link:hover {
	color: var(--av-archive-accent, #46BAE3);
}

.av-pc--bleed .av-pc-date {
	color: rgba(255, 255, 255, 0.60);
	font-family: Manrope, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: normal;
}

.av-pc--bleed .av-pc-more {
	color: #488FDC;
	font-family: Manrope, sans-serif;
	font-size: 18px;
	font-weight: 600;
}

.av-pc--bleed .av-pc-more:hover {
	color: var(--av-archive-accent, #46BAE3);
}

/* The headline is the biggest thing on the card, so it has to come down on a
   phone or three words fill the tile. */
@media (max-width: 767px) {
	.av-pc--bleed .av-pc-title,
	.av-pc--bleed .av-pc-title-link {
		font-size: 20px;
		line-height: 1.35;
	}

	.av-pc--bleed .av-pc-date,
	.av-pc--bleed .av-pc-more {
		font-size: 16px;
	}
}

/* -----------------------------------------------------------------------------
   Archive card shape — full-bleed image, padded body

   The base .av-pc-media is a 72x72 logo tile, which is right for the press
   grid it was built for and wrong here: on an archive the featured image is
   the card's headline act. The blog grid puts a 5/3 image across the full
   width with the padding on the body instead, so the archive does the same.
-------------------------------------------------------------------------- */
.av-pc--bleed .av-pc-card {
	/* Padding moves to the body so the image can reach the card edges. */
	padding: 0;
	/* Clips the image to the card's own rounded corners. */
	overflow: hidden;
}

.av-pc--bleed .av-pc-media {
	width: 100%;
	height: auto;
	/* Same ratio as .av-pg-card-media, so a row of archive cards lines up with
	   a row of blog cards. */
	aspect-ratio: 5 / 3;
	margin: 0;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.04);
}

.av-pc--bleed .av-pc-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.av-pc--bleed .av-pc-body {
	gap: 8px;
	padding: 22px 24px 26px;
}

/* The date and CTA carry their own spacing on the widget; inside the padded
   body that doubles up. */
.av-pc--bleed .av-pc-date {
	margin-bottom: 0;
}

.av-pc--bleed .av-pc-more {
	margin-top: 6px;
}

@media (max-width: 767px) {
	.av-pc--bleed .av-pc-body {
		padding: 18px 18px 22px;
	}
}

/* -----------------------------------------------------------------------------
   Author box — picture, name, bio

   Shared by the Avahi Author Box widget, the author archive header and the
   [av_author_box] shortcode; they all render the same markup.
-------------------------------------------------------------------------- */
.av-author-box {
	display: flex;
	align-items: flex-start;
	gap: var(--av-author-gap, 24px);
}

/* Picture over the text instead of beside it. */
.av-author-box--stacked {
	flex-direction: column;
}

.av-author-box__portrait {
	flex: 0 0 auto;
	/* The avatar is an inline image; without this the wrapper keeps a few px of
	   descender space under it and the row looks misaligned. */
	line-height: 0;
}

.av-author-box__avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	/* A portrait is rarely square. Crop rather than squash the face. */
	object-fit: cover;
	background: rgba(255, 255, 255, 0.06);
}

.av-author-box__body {
	/* Lets long words wrap instead of stretching the flex item. */
	min-width: 0;
}

.av-author-box .av-author-box__name {
	margin: 0 0 6px;
	color: var(--av-author-name, #ffffff);
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.2;
	font-weight: 600;
	overflow-wrap: break-word;
}

.av-author-box__count {
	margin: 0 0 10px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 15px;
}

.av-author-box .av-author-box__bio {
	color: var(--av-author-bio, rgba(255, 255, 255, 0.72));
	font-size: 17px;
	line-height: 1.65;
	/* Comfortable measure; the widget exposes this as a control. */
	max-width: 70ch;
}

.av-author-box__bio p {
	margin: 0 0 10px;
}

.av-author-box__bio p:last-child {
	margin-bottom: 0;
}

.av-author-box .av-author-box__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	color: var(--av-author-link, #488FDC);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.av-author-box__arrow {
	width: 16px;
	height: 16px;
	transition: transform .25s ease;
}

.av-author-box__link:hover .av-author-box__arrow {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.av-author-box__link:hover .av-author-box__arrow {
		transform: none;
	}
}

/* On a phone the picture goes above the text whichever layout was chosen; a
   96px portrait beside a bio leaves the bio about twelve characters wide. */
@media (max-width: 600px) {
	.av-author-box {
		flex-direction: column;
		gap: 16px;
	}

	.av-author-box .av-author-box__bio {
		font-size: 15px;
	}
}

/* -----------------------------------------------------------------------------
   Hover — full-bleed cards

   Four things move together, all cheap for the compositor: the card lifts,
   its border picks up the brand blue, the artwork scales inside its own
   overflow, and the CTA arrow steps forward. Only transform and opacity are
   animated, so none of it triggers layout.
-------------------------------------------------------------------------- */
.av-pc--bleed .av-pc-card {
	transition:
		transform .32s cubic-bezier(.2, .7, .3, 1),
		border-color .32s ease,
		box-shadow .32s ease;
	/* Its own layer, so the image scaling below cannot bleed past the radius
	   on a subpixel edge mid-transition. */
	isolation: isolate;
}

.av-pc--bleed .av-pc-card:hover {
	transform: translateY(-6px);
	border-color: rgba(70, 186, 227, 0.45);
	box-shadow: 0 18px 40px -18px rgba(4, 12, 28, 0.9);
}

/* The tile clips; the image inside it is what grows. */
.av-pc--bleed .av-pc-img {
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
	will-change: transform;
}

.av-pc--bleed .av-pc-card:hover .av-pc-img {
	transform: scale(1.05);
}

.av-pc--bleed .av-pc-card:hover .av-pc-title-link {
	color: var(--av-archive-accent, #46BAE3);
}

.av-pc--bleed .av-pc-arrow {
	transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.av-pc--bleed .av-pc-card:hover .av-pc-arrow {
	transform: translateX(5px);
}

/* Keyboard users get the same signal, and a visible ring. */
.av-pc--bleed .av-pc-card:focus-within {
	transform: translateY(-6px);
	border-color: rgba(70, 186, 227, 0.45);
}

.av-pc--bleed .av-pc-card :focus-visible {
	outline: 2px solid #46BAE3;
	outline-offset: 3px;
	border-radius: 4px;
}

/*
 * Someone who has asked their system for less motion gets the colour change
 * and nothing that moves. Not a blanket `animation: none` — losing the hover
 * feedback entirely would be worse than the movement.
 */
@media (prefers-reduced-motion: reduce) {
	.av-pc--bleed .av-pc-card,
	.av-pc--bleed .av-pc-card:hover,
	.av-pc--bleed .av-pc-card:focus-within,
	.av-pc--bleed .av-pc-img,
	.av-pc--bleed .av-pc-card:hover .av-pc-img,
	.av-pc--bleed .av-pc-arrow,
	.av-pc--bleed .av-pc-card:hover .av-pc-arrow {
		transform: none;
		transition: border-color .2s ease, color .2s ease;
	}
}

/* -----------------------------------------------------------------------------
   Pagination — circle style

   Round buttons, the current page filled with the brand gradient, chevrons
   instead of the words Previous / Next. The words are still in the markup,
   visually hidden, so a screen reader announces them.
-------------------------------------------------------------------------- */
.av-pc-pager--circles {
	gap: 10px;
}

.av-pc-pager--circles .av-pc-pager-item {
	/* Equal width and height, or a two-digit page turns the circle into an
	   oval next to the single-digit ones. */
	width: 44px;
	min-width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--av-pc-pager-ring, rgba(255, 255, 255, 0.22));
	border-radius: 50%;
	background: transparent;
	color: var(--av-pc-pager-color, #ffffff);
	font-size: 15px;
	font-weight: 500;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease;
}

.av-pc-pager--circles .av-pc-pager-item:hover {
	border-color: var(--av-pc-pager-ring-hover, rgba(255, 255, 255, 0.55));
	color: #ffffff;
}

.av-pc-pager--circles .av-pc-pager-item.is-current {
	border-color: transparent;
	/* Same gradient as the category pill, so the page reads as one system. */
	background: var(--av-pc-pager-current, linear-gradient(135deg, #1E63E9 0%, #46BAE3 100%));
	color: #ffffff;
	font-weight: 600;
}

/* Arrows are square circles too, so they need the number-button padding gone. */
.av-pc-pager--circles .av-pc-pager-arrow {
	padding: 0;
}

.av-pc-pager--circles .av-pc-pager-chevron {
	width: 18px;
	height: 18px;
}

.av-pc-pager--circles .av-pc-pager-arrow:not(.is-disabled):hover {
	transform: scale(1.06);
}

.av-pc-pager--circles .av-pc-pager-gap {
	/* The ellipsis is a label, not a button: no ring, and it should not look
	   clickable. */
	min-width: 20px;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: .06em;
}

@media (prefers-reduced-motion: reduce) {
	.av-pc-pager--circles .av-pc-pager-arrow:not(.is-disabled):hover {
		transform: none;
	}
}

@media (max-width: 480px) {
	.av-pc-pager--circles {
		gap: 6px;
	}

	.av-pc-pager--circles .av-pc-pager-item {
		width: 38px;
		min-width: 38px;
		height: 38px;
		font-size: 14px;
	}
}

/* -----------------------------------------------------------------------------
   Empty state

   The base .av-pc-empty is one muted line, which is right inline in a page but
   reads as a rendering fault when it is the ONLY thing on an author or category
   archive. Given the whole area, it gets room and centring so it looks
   deliberate.
-------------------------------------------------------------------------- */
.av-pc-wrap--empty .av-pc-empty,
.av-archive .av-pc-empty {
	padding: 56px 24px;
	border: 1px dashed rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 17px;
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 767px) {
	.av-pc-wrap--empty .av-pc-empty,
	.av-archive .av-pc-empty {
		padding: 36px 18px;
		font-size: 15px;
	}
}

/* -----------------------------------------------------------------------------
   Search field states

   Hover and focus are set explicitly and two classes deep. Left alone, the
   theme's own `input:hover` / `:focus` wins on specificity and draws a hard
   white ring that belongs to no part of this design.
-------------------------------------------------------------------------- */
.av-pc-search .av-pc-search__input:hover {
	border-color: var(--av-pc-search-border-hover, rgba(255, 255, 255, 0.34));
}

.av-pc-search .av-pc-search__input:focus,
.av-pc-search .av-pc-search__input:focus-visible {
	border-color: var(--av-pc-search-border-focus, #46BAE3);
	/* The brand ring replaces the browser's default outline rather than
	   sitting inside it. */
	outline: none;
	box-shadow: 0 0 0 3px rgba(70, 186, 227, 0.18);
}

/* Windows high contrast strips box-shadow, so keep a real outline there. */
@media (forced-colors: active) {
	.av-pc-search .av-pc-search__input:focus {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
}

/* -----------------------------------------------------------------------------
   Minimal card — no picture: meta line, headline, arrow in the corner

   For press entries that have no artwork of their own. The arrow sits at the
   bottom of the card rather than after the headline, so a row of cards with
   two-line and four-line titles still has its arrows on one line.
-------------------------------------------------------------------------- */
.av-pc--minimal .av-pc-card {
	/* min-height, not height: a very long headline still grows the card rather
	   than being clipped, but a short one does not collapse next to it. */
	min-height: var(--av-pc-minimal-height, 190px);
	padding: 22px 22px 20px;
}

.av-pc--minimal .av-pc-body {
	/* The body owns the full card height so margin-top:auto below can push the
	   arrow to the bottom. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.av-pc--minimal .av-pc-meta {
	margin-bottom: 14px;
}

.av-pc--minimal .av-pc-title {
	margin: 0;
	color: #ffffff;
	font-size: 17px;
	line-height: 1.38;
	font-weight: 600;
	overflow-wrap: break-word;
}

/* The arrow, alone in the corner. */
.av-pc--minimal .av-pc-more {
	/* Pins it to the bottom whatever the headline does above. */
	margin-top: auto;
	padding-top: 24px;
	align-self: flex-end;
	color: #ffffff;
}

/*
 * The visible words go, the accessible name stays.
 *
 * .av-pc-more holds two spans: one aria-hidden with the link text, one
 * sr-only carrying "Read the article: <headline>". Hiding the first leaves a
 * link that looks like a bare arrow and still announces where it goes; using
 * display:none on the whole label would leave a link with no name at all.
 */
.av-pc--minimal .av-pc-more > span[aria-hidden="true"] {
	display: none;
}

.av-pc--minimal .av-pc-arrow {
	width: 26px;
	height: 26px;
	transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}

.av-pc--minimal .av-pc-card:hover .av-pc-arrow {
	transform: translateX(5px);
}

.av-pc--minimal .av-pc-card {
	transition: border-color .28s ease, background-color .28s ease;
}

.av-pc--minimal .av-pc-card:hover,
.av-pc--minimal .av-pc-card:focus-within {
	border-color: rgba(255, 255, 255, 0.28);
	background-color: rgba(255, 255, 255, 0.035);
}

@media (prefers-reduced-motion: reduce) {
	.av-pc--minimal .av-pc-card:hover .av-pc-arrow {
		transform: none;
	}
}

@media (max-width: 767px) {
	.av-pc--minimal .av-pc-card {
		min-height: 0;
		padding: 18px;
	}

	.av-pc--minimal .av-pc-more {
		padding-top: 18px;
	}
}