/**
 * [ao_edu_directory_tabs] — Educators / Programs tabs (theme 2.234.0).
 *
 * The cards are the archives' .listing-card and the tabs the featured
 * events grid's .hp-events__tab, both styled elsewhere; the popup reuses
 * edu-program-search.css (.ao-eps .ao-eps__dialog). This file only adds
 * what the widget itself needs. Every selector is scoped under .ao-edt so
 * page-content rules (.hp-content a, .page-detail__content h3) cannot win.
 */

.ao-edt {
	width: 100%;
	/* Block margins only: on a Full Width page the side margins centre the
	   block (.page-full__prose > *, theme 2.236.0). */
	margin-block: 0 var(--space-8, 2rem);
}

/* The /<education-slug>/ archive's grid wrapped as a root for the programs
   popup (theme 2.247.0): no space of its own — the archive spaces it. */
.ao-edt.ao-edt--archive {
	margin-block: 0;
}

.ao-edt .ao-edt__heading {
	margin: 0 0 var(--space-4, 1rem);
}

/* search-bar="on" (theme 2.238.0): the finder's bar above the tabs. */
.ao-edt .ao-edt__search {
	margin: 0 0 var(--space-5, 1.25rem);
}

.ao-edt .ao-edt__search .ao-eps {
	margin: 0;
}

/* The tabs are links (they work without JavaScript). */
.ao-edt .ao-edt__tab,
.ao-edt .ao-edt__tab:hover,
.ao-edt .ao-edt__tab:focus {
	text-decoration: none;
}

.ao-edt .ao-edt__tab:focus-visible {
	outline: 2px solid var(--color-focus, #1a73e8);
	outline-offset: 2px;
}

.ao-edt .ao-edt__panel:focus-visible {
	outline: 2px solid var(--color-focus, #1a73e8);
	outline-offset: 4px;
}

.ao-edt .ao-edt__panel[hidden] {
	display: none;
}

.ao-edt.is-loading .ao-edt__panel:not([hidden]) {
	opacity: 0.5;
	transition: opacity 0.15s;
}

/* Card titles are h3 here (the widget sits under the page's own headings). */
.ao-edt .listing-card__title {
	margin-top: 0;
}

.ao-edt .listing-card__body > a {
	color: inherit;
	text-decoration: none;
}

/* image_style="square" (theme 2.235.0): 1:1 card images instead of the
   archives' 4:3. The image fills the frame the same way (cover, or the
   Listing Cards "fit the whole image" setting). */
.ao-edt.ao-edt--square .listing-card__image-wrap {
	aspect-ratio: 1 / 1;
}

/* ── Educator card: the programs button in the archive's town spot ───── */

.ao-edt .ao-edt__educator .listing-card__footer {
	justify-content: flex-end;
}

/* .btn already rounds with the Brand Kit's Shape (--radius-md). */
.ao-edt .ao-edt__programs-btn {
	margin-left: auto;
	padding: 8px 14px;
	font-size: var(--text-xs, 0.75rem);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

.ao-edt .ao-edt__programs-btn:focus-visible {
	outline: 2px solid var(--color-focus, #1a73e8);
	outline-offset: 2px;
}

.ao-edt .ao-edt__programs-none {
	margin-left: auto;
	font-size: var(--text-xs, 0.75rem);
	color: var(--color-ink-muted, #666);
}

.ao-edt .ao-edt__pagination {
	margin-top: 30px;
}

.ao-edt .ao-edt__empty {
	margin: 0;
	padding: var(--space-6, 1.5rem) 0;
	color: var(--color-ink-muted, #666);
}

/* ── Popup: the finder's dialog, with a list of program names ────────── */

.ao-edt .ao-edt__dialog-host {
	margin: 0;
}

.ao-edt .ao-edt__program-list {
	margin: 0 0 var(--space-5, 1.25rem);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ao-eps-border, #e2e2e2);
}

.ao-edt .ao-edt__program-list li {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--ao-eps-border, #e2e2e2);
}

.ao-edt .ao-edt__program-list a {
	font-weight: 600;
	text-decoration: none;
}

.ao-edt .ao-edt__program-list a:hover,
.ao-edt .ao-edt__program-list a:focus-visible {
	text-decoration: underline;
}

/* The popup's button keeps the button colours, whatever the page's link
   colour rules say. */
.ao-edt .ao-eps__popup-more .btn {
	color: #fff;
	text-decoration: none;
}