/* ---------------------------------------------------------------------------
   RR26 Speakers page
   Ported from the approved mockup (docs/speakers/rr26_speakers_page_1.html).
   Body font is Poppins, not the mockup's Montserrat, to match the 2026 brand
   used on Home and Agenda. Track tag colours come from term meta, printed
   inline by the shortcode, so they stay in sync with the Agenda page.
--------------------------------------------------------------------------- */

.rr-speakers {
	--rr-purple: #58309c;
	--rr-purple-deep: #3b267a;
	--rr-purple-light: #b582ff;
	--rr-lavender: #f5edff;
	--rr-border: #ece4f7;
	--rr-muted: #a99bc4;
	--rr-ink: #2c2c2a;
	--rr-body: #555;

	font-family: 'Poppins', sans-serif;
	color: var(--rr-ink);
	max-width: 1100px;
	margin: 0 auto;
	padding: 8px 0 48px;
}

.rr-speakers *,
.rr-speakers *::before,
.rr-speakers *::after {
	box-sizing: border-box;
}

/* Button reset.
   Elementor's global kit styles every <button> with the kit's accent colour
   (#D728DB) and text-transform: capitalize, at a specificity that beats a single
   class. Scoping under .rr-speakers (0,2,0) wins, and every button in this
   component then opts back in to its own look below. */
.rr-speakers button {
	background: none;
	background-color: transparent;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	padding: 0;
	margin: 0;
	min-height: 0;
}

.rr-speakers button:hover,
.rr-speakers button:focus {
	background: none;
	background-color: transparent;
	color: inherit;
	box-shadow: none;
}

/* Heading reset.
   Elementor's kit styles h1-h6 with display-scale typography (h1 renders at
   80px, h2 48px, h3 32px). Each heading below sets its own size, but reset the
   inherited margins and weight here so a new heading doesn't surprise anyone. */
.rr-speakers h1,
.rr-speakers h2,
.rr-speakers h3,
.rr-speakers h4 {
	margin: 0;
	padding: 0;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

/* --- Header --------------------------------------------------------------- */

.rr-speakers__header {
	margin-bottom: 40px;
}

.rr-speakers .rr-speakers__heading {
	font-size: 36px;
	font-weight: 700;
	color: var(--rr-purple);
	margin: 0 0 10px;
	line-height: 1.2;
}

.rr-speakers__intro {
	font-size: 16px;
	color: var(--rr-body);
	line-height: 1.6;
	max-width: 640px;
	margin: 0;
}

/* --- Featured speaker ----------------------------------------------------- */

.rr-speaker-featured {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 32px;
	background: #fff;
	border: 1px solid var(--rr-border);
	border-left: 4px solid var(--rr-purple);
	border-radius: 12px;
	padding: 28px;
	margin-bottom: 40px;
	align-items: start;
}

.rr-speaker-featured__photo {
	width: 220px;
	height: 270px;
	border-radius: 10px;
	overflow: hidden;
	background: #c9b8e8;
}

.rr-speaker-featured__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rr-speaker-featured__placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, #9b7ed4 0%, var(--rr-purple) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 56px;
	font-weight: 700;
	color: var(--rr-lavender);
}

.rr-speaker-featured__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rr-muted);
	margin: 0 0 8px;
}

.rr-speakers .rr-speaker-featured__name {
	font-size: 28px;
	font-weight: 700;
	color: var(--rr-purple-deep);
	margin: 0 0 6px;
	line-height: 1.2;
}

.rr-speaker-featured__title {
	font-size: 15px;
	color: #666;
	margin: 0 0 16px;
	line-height: 1.5;
}

.rr-speaker-featured__tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 14px;
	border-radius: 6px;
	margin-bottom: 18px;
}

.rr-speaker-featured__bio {
	font-size: 15px;
	line-height: 1.7;
	color: var(--rr-body);
	margin-bottom: 18px;
}

.rr-speaker-featured__bio p {
	margin: 0 0 12px;
}

.rr-speaker-featured__bio p:last-child {
	margin-bottom: 0;
}

.rr-speaker-featured__link,
.rr-speaker-card__link {
	font-size: 14px;
	font-weight: 500;
	color: var(--rr-purple);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.rr-speaker-featured__link:hover,
.rr-speaker-card__link:hover {
	text-decoration: underline;
}

/* --- Controls: search + track pills --------------------------------------- */

.rr-speakers__controls {
	margin-bottom: 24px;
}

.rr-speakers__search {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.rr-speakers__search-input {
	flex: 1 1 320px;
	max-width: 420px;
	font-family: inherit;
	font-size: 15px;
	padding: 10px 16px;
	border: 1px solid var(--rr-border);
	border-radius: 8px;
	background: #fff;
	color: var(--rr-ink);
}

.rr-speakers__search-input:focus {
	outline: 2px solid var(--rr-purple-light);
	outline-offset: 1px;
	border-color: var(--rr-purple-light);
}

.rr-speakers__count {
	font-size: 13px;
	color: var(--rr-muted);
	margin: 0;
	white-space: nowrap;
}

.rr-speakers__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.rr-speakers .rr-speakers__pill {
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--rr-border);
	background-color: #fff;
	color: var(--rr-purple-deep);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rr-speakers .rr-speakers__pill:hover {
	background-color: #fff;
	color: var(--rr-purple-deep);
	border-color: var(--rr-purple-light);
}

.rr-speakers .rr-speakers__pill:focus-visible {
	outline: 2px solid var(--rr-purple-light);
	outline-offset: 2px;
}

/* Active pill adopts its own track colour; "All" falls back to brand purple. */
.rr-speakers .rr-speakers__pill.is-active,
.rr-speakers .rr-speakers__pill.is-active:hover {
	background-color: var(--rr-pill-bg, var(--rr-purple));
	color: var(--rr-pill-fg, #fff);
	border-color: transparent;
}

/* --- Grid ----------------------------------------------------------------- */

.rr-speakers__section-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rr-muted);
	margin: 0 0 20px;
}

/* No align-items here on purpose: the default `stretch` is what makes every card
   in a row match the tallest one, as in the approved mockup. Setting `start`
   collapses each card to its own content height and the row looks ragged. */
.rr-speakers__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* ...but stretch has to yield while a bio is open. Some bios run 2000px tall,
   and stretching two collapsed siblings to match leaves a wall of blank white.
   The mockup never hit this: it only ever showed three short placeholder cards.
   While any card is expanded, every card sizes to its own content instead. */
.rr-speakers__grid.has-open .rr-speaker-card {
	align-self: start;
}

.rr-speaker-card {
	background: #fff;
	border: 1px solid var(--rr-border);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.15s ease;

	/* Stretch the body to fill the equalised height so the card's white
	   background reaches the bottom border rather than stopping at the text. */
	display: flex;
	flex-direction: column;
}

.rr-speaker-card__body {
	flex: 1 1 auto;
}

.rr-speaker-card.is-expandable {
	cursor: pointer;
}

.rr-speaker-card:hover {
	border-color: var(--rr-purple-light);
}

.rr-speaker-card.is-hidden {
	display: none;
}

.rr-speaker-card__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--rr-lavender);
}

.rr-speaker-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rr-speaker-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	font-weight: 700;
}

.rr-speaker-card__body {
	padding: 16px 18px 18px;
}

.rr-speaker-card__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 4px;
}

.rr-speakers .rr-speaker-card__name {
	font-size: 16px;
	font-weight: 600;
	color: var(--rr-purple-deep);
	line-height: 1.3;
	margin: 0;
}

.rr-speakers .rr-speaker-card__chevron {
	font-size: 12px;
	color: var(--rr-muted);
	background-color: transparent;
	border: 0;
	padding: 3px 2px 0;
	cursor: pointer;
	line-height: 1;
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.rr-speakers .rr-speaker-card__chevron[aria-expanded="true"] {
	transform: rotate(180deg);
}

.rr-speakers .rr-speaker-card__chevron:focus-visible {
	outline: 2px solid var(--rr-purple-light);
	outline-offset: 2px;
}

.rr-speaker-card__title {
	font-size: 13px;
	color: #777;
	margin: 0 0 12px;
	line-height: 1.4;
}

.rr-speaker-card__tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 6px;
}

.rr-speaker-card__bio {
	font-size: 13px;
	line-height: 1.65;
	color: #666;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--rr-border);
}

.rr-speaker-card__bio p {
	margin: 0 0 10px;
}

.rr-speaker-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 10px 0 0 !important;
}

.rr-speaker-card__link {
	font-size: 12px;
}

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

.rr-speakers__empty {
	text-align: center;
	color: var(--rr-body);
	font-size: 15px;
	padding: 40px 0;
}

.rr-speakers .rr-speakers__clear {
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--rr-purple);
	background-color: transparent;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	padding: 0 0 0 6px;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
	/* Astra's container supplies side padding at desktop widths but not here,
	   so text would otherwise sit flush against the screen edge. */
	.rr-speakers {
		padding-left: 20px;
		padding-right: 20px;
	}

	.rr-speakers__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@media (max-width: 700px) {
	.rr-speaker-featured {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.rr-speaker-featured__photo {
		width: 100%;
		height: 280px;
	}

	.rr-speakers .rr-speakers__heading {
		font-size: 28px;
	}
}

@media (max-width: 420px) {
	.rr-speakers__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rr-speaker-card,
	.rr-speaker-card__chevron,
	.rr-speakers__pill {
		transition: none;
	}
}