/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Search Results Block                                */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

.search-results {
	box-sizing: border-box;
	width: 100%;
	overflow-x: hidden;
}

.search-results__header {
	margin-inline: clamp(2rem, 45vw - 16rem, 20%);
	width: calc(100% - 2 * clamp(2rem, 45vw - 16rem, 20%));
	padding: 2.5rem 0 1rem;
	box-sizing: border-box;
}

.search-results__title {
	font-family: var(--f-ibm-plex-sans);
	font-size: 30px;
	font-weight: 500;
	color: var(--c-navy);
	letter-spacing: -0.3px;
	line-height: 1.1;
	margin: 0 0 24px 0;
	padding: 0;
}

/* Desktop (>=1025px) keeps the live site's flat 20%-margin / 60%-width inset.
 * Below that the archive's narrow layout takes over in the max-width: 1024px
 * block further down — full width with a flat 1.25rem gutter — so the
 * percentage tiers no longer apply there. Margin creates the inset (not
 * padding) so it stays complementary with width and doesn't double-narrow the
 * content area; the 5% default below is just the fallback before either media
 * query matches. */
.search-results__container {
	--container-inset: 5%;
	padding: 2rem 0 0;
	position: relative;
	box-sizing: border-box;
	margin-inline: var(--container-inset);
	width: calc(100% - (var(--container-inset) * 2));
}

@media (min-width: 1025px) {
	.search-results__container {
		--container-inset: 20%;
	}
}

/* At and below 1024px the page adopts the archive's narrow layout
   instead of the percentage inset: full width with a flat 1.25rem
   gutter (.archive__container). Applied to the header as well as the
   card area — archive's heading sits inside its container, so the two
   move together and the title stays aligned with the card content.
   Replaces the old 10% tier between 641px and 1024px. */
@media (max-width: 1024px) {
	.search-results__header,
	.search-results__container {
		margin-inline: 0;
		width: 100%;
		padding-inline: 1.25rem;
	}
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Result Cards                                        */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Layout, typography and portrait treatment deliberately mirror .archive__card
 * (parts/archive/archive.css) so a search result reads as the same component as
 * the speech listings. Values are copied rather than shared: this stylesheet is
 * enqueued on every page for the live-search dropdown, while archive.css only
 * loads on archive pages. */
.search-results__card {
	display: flex;
	/* 1rem, not the 1.5rem on .archive__card. Archive nests an inner
	   .archive__card-left row that holds the portrait and text with gap: 1rem,
	   and it is that inner gap you actually see — the card's own 1.5rem never
	   applies, because .archive__card-left is its only in-flow child. This card
	   is flatter (portrait and content are direct children), so the visible gap
	   is declared here and has to be the inner value to match. */
	gap: 1rem;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 1.25rem 1rem;
	align-items: flex-start;
	cursor: pointer;
	/* Background left transparent, matching .archive__card: an
	   opaque card would paint over the previous card's bottom
	   shadow and clip the hover lift. */
	transition: box-shadow 0.3s ease;
}

.search-results__card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Divider between cards — the cards' own vertical padding does the separating,
   so the rule sits flush. Matches .archive__separator. */
.search-results__separator {
	border: none;
	border-top: 1px solid var(--c-gray-white, #ededed);
	margin: 0;
}

/* Drop the trailing rule. On the results page the pagination nav follows the
   last card, so :last-child alone would leave a stray divider above it. */
.search-results__separator:last-child,
.search-results__separator:has(+ .search-results__pagination) {
	display: none;
}

.search-results__card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.search-results__card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Speaker image                                       */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* 96x124 at every width, matching .archive__card-image. The
   portrait used to be hidden below 840px, one of the biggest
   departures from the listings. */
.search-results__card-image {
	display: block;
	flex-shrink: 0;
	width: 96px;
	height: 124px;
	overflow: hidden;
	border-radius: var(--brad-image, 0.1875rem);
}

.search-results__card-portrait {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
}

/* Multi-speaker (2-4): the same box, split into a 2x2 grid. Rows are 1fr rather
   than a pixel value so the grid follows the box size set above. */
.search-results__card-image--multi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	overflow: hidden;
}

/* The grid wrapper owns the box; square off the cells so they butt together. */
.search-results__card-image--multi .search-results__card-portrait {
	width: 100%;
	height: 100%;
	min-width: 0;
	object-position: center 25%;
	border-radius: 0;
}

.search-results__card-image-filler {
	background-color: var(--c-speaker-filler, #7d8b9c);
	/* Podium artwork over the slate-blue fill, anchored to the cell's
	   bottom edge. The artwork carries transparent headroom above the
	   mic, so scaling it past the cell's height crops empty space
	   rather than the podium. */
	background-image: url(../../assets/images/podium.webp);
	background-repeat: no-repeat;
	background-position: bottom center;
	/* Width of the whole GRID, not of this cell — see the --3 rule below. */
	background-size: 100% auto;
}

/* 3 speakers: this leftover cell is the bottom-RIGHT one and only half
   the grid's width, so `100% auto` would draw the podium at half the
   size it gets in the 2-speaker strip. Scale to the full grid width
   (200% of the cell) and anchor right, so the podium renders at a
   consistent size and its left portion is cropped by the photo cell
   beside it instead. */
.search-results__card-image--3 .search-results__card-image-filler {
	background-size: 200% auto;
	background-position: right bottom;
}

/* A speaker with no portrait: one cell, in that speaker's own position.
   Kept off the -filler class so the --2 bottom-row stretch never
   applies to it. */
.search-results__card-image-gap {
	background-color: var(--c-speaker-filler, #7d8b9c);
}

/* 2 speakers: photos take the top row, filler spans the whole bottom row. */
.search-results__card-image--2 .search-results__card-image-filler {
	grid-column: 1 / -1;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Card text                                           */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Byline now sits above the title and takes .archive__card-name's treatment —
   12px/500 royal rather than 14px grey. */
.search-results__card-bylines {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem;
	font-family: var(--f-ibm-plex-sans);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.037;
	margin: 0 0 0.25rem;
}

.search-results__card-speaker {
	color: var(--c-blue-royal);
	text-decoration: none;
	font-weight: 500;
	position: relative;
	z-index: 2;
}

.search-results__card-speaker:hover {
	color: var(--c-blue-royal);
	text-decoration: underline;
}

.search-results__card-title {
	font-family: var(--f-ibm-plex-sans);
	font-size: 15px;
	font-weight: 600;
	color: var(--c-navy);
	margin: 0.5rem 0 0.25rem;
	line-height: 1.037;
	letter-spacing: -0.15px;
	/* Bare URLs turn up in titles and snippets; without this such
	   a string sets a min-content floor wider than the card. */
	overflow-wrap: anywhere;
}

.search-results__card-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0.25rem 0 0;
}

.search-results__card-date {
	font-family: var(--f-ibm-plex-sans);
	font-size: 12px;
	font-weight: 500;
	color: #747474; /* --c-gray-text (#7E7E7E) fails WCAG AA; #747474 = 4.67:1 */
	line-height: 1.4;
}

/* Archive's excerpt values, but deliberately NOT its -webkit-line-clamp: 2.
   Clamping is right for a listing teaser and wrong here — it can crop the
   highlighted match that justifies the result being in the list at all. */
.search-results__card-excerpt {
	font-family: var(--f-ibm-plex-sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-gray-text, #7e7e7e);
	margin: 0.4rem 0 0;
	overflow-wrap: anywhere;
}

/* Narrow screens tighten the card's padding and nothing else — the portrait
   stays beside the text at every width, as on the archive page. Archive's
   max-width: 768px block does set flex-direction: column and gap: 0.75rem on
   .archive__card, but neither has any visible effect there: its only in-flow
   child is the .archive__card-left row, which keeps the portrait and text side
   by side and has no responsive overrides. Copying those two declarations onto
   this flatter card would stack the portrait, which archive never does. */
@media (max-width: 768px) {
	.search-results__card {
		padding: 1.25rem 0.75rem;
	}

	/* Pull the cards and their dividers out past the container gutter, as
	   .archive__list does. With the container's 1.25rem gutter, a 0.75rem pull-out
	   and the card's own 0.75rem padding, card content lands 20px from the screen
	   edge — the same figure archive's comment cites. Only the result cards and
	   rules move: the best-match speaker/topic cards keep their boxed inset, since
	   archive has no equivalent to pull out. */
	.search-results__card,
	.search-results__separator {
		margin-inline: -0.75rem;
	}
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Highlight marks                                     */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Scoped under .search-results so it outranks ElasticPress's own
 * highlighting-styles.css (.ep-highlight { font-style: italic; background: transparent }),
 * which would otherwise italicize matches instead of highlighting them. */
.search-results .ep-highlight {
	background-color: rgba(255, 253, 205, 1);
	font-style: normal;
	padding: 0;
	color: inherit;
}

/* Inherit the title's own weight so a highlighted match doesn't render lighter
   than the words around it. */
.search-results__card-title .ep-highlight {
	color: var(--c-navy);
	font-weight: inherit;
}

.search-results__card-excerpt .ep-highlight {
	font-weight: normal;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* No results                                          */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

.search-results__no-results {
	padding: 2rem 0;
	font-family: var(--f-ibm-plex-sans);
	color: var(--c-gray-dark);
}

.search-results__error {
	color: var(--c-gray-medium);
	font-size: 0.875rem;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Speaker card (best match)                           */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

.search-results__speaker-card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem;
	border: 1px solid var(--c-gray-white);
	border-radius: var(--brad-card);
	margin-bottom: 1.5rem;
	background: #fff;
}

.search-results__speaker-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.search-results__speaker-card-content {
	flex: 1;
}

.search-results__speaker-card-name {
	font-family: var(--f-ibm-plex-sans);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--c-navy);
	margin: 0 0 0.375rem;
}

.search-results__speaker-card-count {
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.9375rem;
	color: var(--c-gray-dark);
	margin: 0 0 1rem;
}

.search-results__speaker-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.search-results__speaker-card-btn {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: var(--pad-v-button) var(--pad-h-button);
	background: var(--c-navy);
	color: var(--c-white);
	border-radius: var(--brad-button-medium);
	font-family: var(--f-ibm-plex-sans);
	font-size: var(--fs-button);
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.05em;
}

.search-results__speaker-card-btn:hover {
	background: var(--c-blue-royal);
}

.search-results__speaker-card-secondary {
	position: relative;
	z-index: 2;
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.875rem;
	color: var(--c-blue-royal);
	text-decoration: none;
}

.search-results__speaker-card-secondary:hover {
	text-decoration: underline;
}

.search-results__speaker-card-image {
	flex-shrink: 0;
}

.search-results__speaker-card-portrait {
	width: 90px;
	height: 110px;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--brad-image);
}

@media (max-width: 40rem) {
	.search-results__speaker-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.search-results__speaker-card-image {
		order: -1;
	}
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Topic card (best match)                             */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

.search-results__topic-card {
	position: relative;
	padding: 1.5rem;
	border: 1px solid var(--c-gray-white);
	border-radius: var(--brad-card);
	margin-bottom: 1.5rem;
	background: #fff;
}

.search-results__topic-card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.search-results__topic-card-title {
	font-family: var(--f-ibm-plex-sans);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--c-navy);
	margin: 0 0 0.375rem;
}

.search-results__topic-card-count {
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.9375rem;
	color: var(--c-gray-dark);
	margin: 0 0 0.5rem;
}

.search-results__topic-card-synonyms {
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.875rem;
	font-style: italic;
	color: var(--c-gray-text);
	margin: 0 0 1rem;
}

.search-results__topic-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.search-results__topic-card-btn {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: var(--pad-v-button) var(--pad-h-button);
	background: var(--c-navy);
	color: var(--c-white);
	border-radius: var(--brad-button-medium);
	font-family: var(--f-ibm-plex-sans);
	font-size: var(--fs-button);
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.05em;
}

.search-results__topic-card-btn:hover {
	background: var(--c-blue-royal);
}

.search-results__topic-card-secondary {
	position: relative;
	z-index: 2;
	font-family: var(--f-ibm-plex-sans);
	font-size: 0.875rem;
	color: var(--c-blue-royal);
	text-decoration: none;
}

.search-results__topic-card-secondary:hover {
	text-decoration: underline;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Pagination                                          */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

.search-results__pagination {
	margin: 2rem 0 1rem;
}

.search-results__pagination-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.search-results__page-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.25rem;
	font-family: var(--f-ibm-plex-sans);
	font-size: 1rem;
	font-weight: 300;
	color: var(--c-black);
	text-decoration: none;
	border-radius: var(--brad-circle);
	cursor: pointer;
	transition: background-color 0.15s;
}

.search-results__page-number:hover {
	background-color: var(--c-gray-white);
}

.search-results__page-number--current {
	background-color: var(--c-blue-royal);
	color: var(--c-white);
	cursor: default;
	font-weight: 700;
}

.search-results__page-number--current:hover {
	background-color: var(--c-blue-royal);
}

/* WP native pagination fallback */
.search-results__container .navigation.pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin: 2rem 0 1rem;
}

.search-results__container .navigation.pagination .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	font-family: var(--f-ibm-plex-sans);
	font-size: 1rem;
	font-weight: 300;
	color: var(--c-black);
	text-decoration: none;
	border-radius: var(--brad-circle);
}

.search-results__container .navigation.pagination .nav-links .page-numbers.current {
	background-color: var(--c-blue-royal);
	color: var(--c-white);
	cursor: default;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Back to top                                         */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

.search-results__back-to-top-wrap {
	text-align: center;
	padding: 2rem 0 4rem;
}

.search-results__back-to-top {
	display: inline-block;
	padding: var(--pad-v-button) var(--pad-h-button);
	background: var(--c-navy);
	color: var(--c-white);
	border: none;
	border-radius: var(--brad-button-medium);
	font-family: var(--f-ibm-plex-sans);
	font-size: var(--fs-button);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background-color 0.15s;
}

.search-results__back-to-top:hover {
	background: var(--c-blue-royal);
}