/* ==========================================================================
   Single Resource Template
   Two-column sticky-nav layout + Hero banner + Who It's For slider.
   ========================================================================== */

/* ==========================================================================
   Hero / Program Intro
   ========================================================================== */

.ac-resource-hero {
	position:         relative;
	min-height:       60vh;
	display:          flex;
	align-items:      center;
	background-color: var(--ac-color-primary);    /* fallback if no image */
	background-size:        cover;
	background-position:    center top;
	background-repeat:      no-repeat;
	overflow:         hidden;
}

.ac-resource-hero__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		105deg,
		rgba( 1, 21, 96, 0.88 ) 0%,
		rgba( 1, 21, 96, 0.65 ) 55%,
		rgba( 1, 21, 96, 0.30 ) 100%
	);
	z-index: 1;
}

.ac-resource-hero .ac-container {
	position: relative;
	z-index:  2;
	padding-block: var(--ac-space-16);
}

.ac-resource-hero__content {
	max-width: 680px;
}

.ac-resource-hero__heading {
	font-size:   clamp( var(--ac-font-size-2xl), 5vw, var(--ac-font-size-4xl) );
	font-weight: var(--ac-font-weight-bold);
	line-height: var(--ac-line-height-tight);
	color:       var(--ac-color-white);
	margin:      0 0 var(--ac-space-5);
}

.ac-resource-hero__statement {
	font-size:   var(--ac-font-size-md);
	line-height: var(--ac-line-height-normal);
	color:       rgba( 255, 255, 255, 0.9 );
	max-width:   58ch;
	margin:      0 0 var(--ac-space-8);
}

.ac-resource-hero .ac-btn {
	display:    inline-flex;
	align-items: center;
	gap:         var(--ac-space-2);
}

/* ==========================================================================
   Mobile pill nav (visible on small screens only, hidden on desktop)
   ========================================================================== */

.ac-resource-pill-nav-wrap {
	display:    none;     /* shown by media query below */
	position:   sticky;
	top:        var(--ac-header-height-scrolled);
	z-index:    var(--z-sticky, 100);
	background: var(--ac-color-white);
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
}

.ac-resource-pill-nav {
	display:          flex;
	gap:              var(--ac-space-2);
	overflow-x:       auto;
	padding:          var(--ac-space-3) var(--ac-space-4);
	scrollbar-width:  none;     /* Firefox */
	-ms-overflow-style: none;   /* IE/Edge */
}

.ac-resource-pill-nav::-webkit-scrollbar {
	display: none;
}

.ac-resource-pill-nav__link {
	flex-shrink:     0;
	display:         inline-block;
	padding:         var(--ac-space-2) var(--ac-space-4);
	border-radius:   var(--ac-radius-pill, 999px);
	border:          2px solid var(--ac-color-border);
	font-family:     var(--ac-font-family-ui);
	font-size:       var(--ac-font-size-sm);
	font-weight:     var(--ac-font-weight-semibold);
	color:           var(--ac-color-text);
	text-decoration: none;
	white-space:     nowrap;
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard, ease),
		color            var(--ac-duration-short) var(--ac-ease-standard, ease),
		border-color     var(--ac-duration-short) var(--ac-ease-standard, ease);
}

.ac-resource-pill-nav__link:hover,
.ac-resource-pill-nav__link:focus-visible {
	background-color: var(--ac-color-surface);
	border-color:     var(--ac-color-primary);
	color:            var(--ac-color-primary);
}

.ac-resource-pill-nav__link.is-active,
.ac-resource-pill-nav__link[aria-current="true"] {
	background-color: var(--ac-color-primary);
	border-color:     var(--ac-color-primary);
	color:            var(--ac-color-white);
}

/* ==========================================================================
   Two-column resource layout
   ========================================================================== */

.ac-resource-layout {
	display:     grid;
	grid-template-columns: 240px 1fr;
	gap:         var(--ac-space-10);
	align-items: start;
	max-width:   var(--ac-container-max);
	margin-inline: auto;
	padding-inline: var(--ac-container-padding);
	padding-block: var(--ac-space-12);
}

/* Sidebar hidden — content spans full width */
.ac-resource-layout--no-sidebar {
	grid-template-columns: 1fr !important;
	gap:                   0;
}

.ac-resource-content {
	min-width: 0; /* Prevent CSS Grid column from expanding beyond 1fr due to oversized children */
}

.ac-resource-layout--no-sidebar .ac-resource-content {
	min-width: 0;
	width:     100%;
}

/* ==========================================================================
   Desktop sticky sidebar nav
   ========================================================================== */

.ac-resource-nav-wrap {
	position:      sticky;
	top:           calc( var(--ac-header-height-scrolled) + var(--ac-space-6) );
	background:    var(--ac-color-white);
	border:        1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-lg);
	overflow:      hidden;
}

/* "On This Page" heading strip */
.ac-resource-nav__heading {
	margin:          0;
	padding:         var(--ac-space-4) var(--ac-space-5);
	background:      var(--ac-color-primary);
	color:           var(--ac-color-white);
	font-family:     var(--ac-font-family-ui);
	font-size:       var(--ac-font-size-xs);
	font-weight:     var(--ac-font-weight-bold);
	letter-spacing:  0.08em;
	text-transform:  uppercase;
}

.ac-resource-nav__list {
	list-style:     none;
	margin:         0;
	padding:        var(--ac-space-3) 0;
	display:        flex;
	flex-direction: column;
	gap:            0;
}

.ac-resource-nav__item {
	position: relative;
}

.ac-resource-nav__link {
	display:         block;
	padding:         var(--ac-space-3) var(--ac-space-5);
	border-left:     3px solid transparent;
	font-family:     var(--ac-font-family-ui);
	font-size:       var(--ac-font-size-sm);
	font-weight:     var(--ac-font-weight-medium);
	color:           var(--ac-color-text-muted);
	text-decoration: none;
	transition:
		border-color     var(--ac-duration-short) var(--ac-ease-standard, ease),
		color            var(--ac-duration-short) var(--ac-ease-standard, ease),
		background-color var(--ac-duration-short) var(--ac-ease-standard, ease);
}

.ac-resource-nav__link:hover,
.ac-resource-nav__link:focus-visible {
	border-left-color: var(--ac-color-primary);
	color:             var(--ac-color-primary);
	background-color:  color-mix( in srgb, var(--ac-color-primary) 6%, transparent );
}

.ac-resource-nav__link.is-active,
.ac-resource-nav__link[aria-current="true"] {
	border-left-color: var(--ac-color-secondary);
	color:             var(--ac-color-primary);
	font-weight:       var(--ac-font-weight-semibold);
	background-color:  color-mix( in srgb, var(--ac-color-secondary) 8%, transparent );
}

/* ==========================================================================
   Sections shared styles
   ========================================================================== */

.ac-resource-section {
	padding-block: var(--ac-space-6);
}

.ac-resource-section__header {
	margin-bottom: var(--ac-space-8);
	text-align:    left;
}

.ac-resource-section__header .ac-resource-section__intro {
	margin-inline: 0;
}

.ac-resource-section__title {
	font-size:   clamp( var(--ac-font-size-xl), 3vw, var(--ac-font-size-2xl) );
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-primary);
	line-height: var(--ac-line-height-tight);
	margin:      0;
}

/* ==========================================================================
   Prose heading hierarchy inside resource section content areas
   --------------------------------------------------------------------------
   Section / component titles (always an <h2 class="ac-resource-section__title">
   or <h2 class="ac-information__heading">) sit at 32px.
   WYSIWYG / rich-text content (Overview body, FAQ answers, Information body,
   etc.) uses raw h2–h6 whose base sizes (h3 = 32px) collide with those titles.
   The rules below scale those prose headings DOWN proportionally so the
   visual hierarchy is clear:

     Section title  (h2.ac-resource-section__title / .ac-information__heading) → 32px
     Prose h2  (inside content containers)           → 24px  (xl)
     Prose h3                                        → 20px  (lg)
     Prose h4                                        → 18px  (md)
     Prose h5/h6                                     → 16px  (base)

   Flat selectors are used (no CSS nesting) for maximum browser compatibility.
   ========================================================================== */

/* ── Prose h2 ── */
.ac-overview__body h2:not(.screen-reader-text),
.ac-faq__answer h2:not(.screen-reader-text),
.ac-information__body h2:not(.screen-reader-text),
.ac-resource-section .entry-content h2:not(.screen-reader-text) {
	font-size:   var(--ac-font-size-xl);    /* 24px */
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-primary);
	line-height: var(--ac-line-height-tight);
	margin:      var(--ac-space-8) 0 var(--ac-space-3);
}

/* ── Prose h3 ── */
.ac-overview__body h3:not(.screen-reader-text),
.ac-faq__answer h3:not(.screen-reader-text),
.ac-information__body h3:not(.screen-reader-text),
.ac-resource-section .entry-content h3:not(.screen-reader-text) {
	font-size:   var(--ac-font-size-lg);    /* 20px */
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-primary);
	line-height: var(--ac-line-height-tight);
	margin:      var(--ac-space-6) 0 var(--ac-space-2);
}

/* ── Prose h4 ── */
.ac-overview__body h4:not(.screen-reader-text),
.ac-faq__answer h4:not(.screen-reader-text),
.ac-information__body h4:not(.screen-reader-text),
.ac-resource-section .entry-content h4:not(.screen-reader-text) {
	font-size:   var(--ac-font-size-md);    /* 18px */
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-text);
	line-height: var(--ac-line-height-tight);
	margin:      var(--ac-space-5) 0 var(--ac-space-2);
}

/* ── Prose h5 / h6 ── */
.ac-overview__body h5:not(.screen-reader-text),
.ac-overview__body h6:not(.screen-reader-text),
.ac-faq__answer h5:not(.screen-reader-text),
.ac-faq__answer h6:not(.screen-reader-text),
.ac-information__body h5:not(.screen-reader-text),
.ac-information__body h6:not(.screen-reader-text),
.ac-resource-section .entry-content h5:not(.screen-reader-text),
.ac-resource-section .entry-content h6:not(.screen-reader-text) {
	font-size:   var(--ac-font-size-base);  /* 16px */
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-text-muted);
	margin:      var(--ac-space-4) 0 var(--ac-space-1);
}

/* ── First heading in a content block has no extra top gap ── */
.ac-overview__body > h2:first-child,
.ac-overview__body > h3:first-child,
.ac-overview__body > h4:first-child,
.ac-faq__answer > h2:first-child,
.ac-faq__answer > h3:first-child,
.ac-information__body > h2:first-child,
.ac-information__body > h3:first-child,
.ac-information__body > h4:first-child {
	margin-top: 0;
}

/* ── Prose lists ──
   Use .ac-resource-section ancestor for higher specificity so these rules
   beat WP global styles (:where selectors, wp-block-library, etc.).     */
.ac-resource-section .ac-overview__body ul,
.ac-resource-section .ac-overview__body ol,
.ac-resource-section .ac-faq__answer ul,
.ac-resource-section .ac-faq__answer ol,
.ac-resource-section .ac-information__body ul,
.ac-resource-section .ac-information__body ol {
	padding-left:          1.5rem;   /* indent text AND markers */
	margin-block:          0 1rem;
	list-style-position:   outside; /* markers sit in the padding gutter */
}

/* When there is a floated image (overview with image-left / image-right),
   the list element spans the full container width so its left edge sits
   behind the float — the outside markers become invisible.
   display:flow-root creates a BFC that pushes the list to the right of
   the float, so its left edge (and the padding gutter for markers) starts
   where the float ends, making bullets visible and properly indented.    */
.ac-overview__text ul,
.ac-overview__text ol {
	display: flow-root;
}

.ac-resource-section .ac-overview__body ul,
.ac-resource-section .ac-faq__answer ul,
.ac-resource-section .ac-information__body ul {
	list-style-type: disc;
}

.ac-resource-section .ac-overview__body ol,
.ac-resource-section .ac-faq__answer ol,
.ac-resource-section .ac-information__body ol {
	list-style-type: decimal;
}

/* Nested lists */
.ac-resource-section .ac-overview__body ul ul,
.ac-resource-section .ac-overview__body ol ol,
.ac-resource-section .ac-overview__body ul ol,
.ac-resource-section .ac-overview__body ol ul,
.ac-resource-section .ac-faq__answer ul ul,
.ac-resource-section .ac-faq__answer ol ol,
.ac-resource-section .ac-information__body ul ul,
.ac-resource-section .ac-information__body ol ol {
	margin-block: 0.5rem 0;
}

/* ── General fallback: bare h3/h4 anywhere in a resource section ── */
.ac-resource-section h3:not(.ac-element-heading__title):not(.screen-reader-text):not(.ac-resource-section__title):not(.ac-schedule__calendar *) {
	font-size: var(--ac-font-size-lg);   /* 20px */
}
.ac-resource-section h4:not(.ac-element-heading__title):not(.screen-reader-text):not(.ac-schedule__calendar *) {
	font-size: var(--ac-font-size-md);   /* 18px */
}

/* ── Fallback for browsers without Selectors-4 :not() support ── */
.ac-resource-section .ac-schedule__calendar h3,
.ac-resource-section .ac-schedule__calendar h4 {
	font-size: revert;
}

/* ==========================================================================
   Who It's For — compact chip slider
   Note: .ac-wif-card / .ac-wif-swiper styles live in front-page.css
   so they are available on every page (front-page.css is loaded globally).
   ========================================================================== */

.ac-resource-wif {
	overflow: visible;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 56.25em ) {    /* ≤ 900px */

	/* Switch to single-column, hide sidebar */
	.ac-resource-layout {
		grid-template-columns: 1fr;
		padding-block:         var(--ac-space-8);
		gap:                   0;
	}

	.ac-resource-nav-wrap {
		display: none;
	}

	/* Show mobile pill nav */
	.ac-resource-pill-nav-wrap {
		display: block;
	}

	/* Hero: shorter on mobile */
	.ac-resource-hero {
		min-height: 50vh;
	}

	.ac-resource-hero .ac-container {
		padding-block: var(--ac-space-12);
	}

	.ac-resource-hero__content {
		max-width: 100%;
	}

	/* Tighter section padding on mobile */
	.ac-resource-section {
		padding-block: var(--ac-space-4);
	}
}

@media ( max-width: 36em ) {    /* ≤ 576px */

	.ac-resource-hero {
		min-height: 45vh;
	}
}

/* ==========================================================================
   Shared section intro text
   ========================================================================== */

.ac-resource-section__intro {
	margin-top:  var(--ac-space-3);
	color:       var(--ac-color-text-muted);
	font-size:   var(--ac-font-size-base);
	line-height: var(--ac-line-height-normal);
}

/* ==========================================================================
   Program Overview
   ========================================================================== */

/* Base — single-column, no image */
.ac-overview__body {
	/* clearfix so the float doesn't escape the container */
	display: flow-root;
}

.ac-overview__text {
	min-width: 0;
}

.ac-overview__text p {
	margin-block: 0 var(--ac-space-4);
	line-height:  var(--ac-line-height-loose);
}

/* Image — floated so text wraps beside AND underneath it.
   The <figure> is output before the text div in the template so the float
   is established before the text block is laid out. */
.ac-overview__image {
	margin: 0;
}

.ac-resource-overview.has-image .ac-overview__image {
	float:      right;
	width:      360px;
	max-width:  45%;
	margin:     var(--ac-space-1) 0 var(--ac-space-6) var(--ac-space-8);
	clear:      right;
}

.ac-resource-overview.has-image.image-left .ac-overview__image {
	float:     left;
	margin:    var(--ac-space-1) var(--ac-space-8) var(--ac-space-6) 0;
	clear:     left;
}

.ac-overview__image img {
	width:         100%;
	height:        auto;
	border-radius: var(--ac-radius-lg);
	display:       block;
}

/* Narrow screens — un-float, full width, image above text */
@media ( max-width: 48em ) {
	.ac-resource-overview.has-image .ac-overview__image,
	.ac-resource-overview.has-image.image-left .ac-overview__image {
		float:     none;
		width:     100%;
		max-width: 100%;
		margin:    0 0 var(--ac-space-6);
	}
}

/* ==========================================================================
   Schedule / Sessions
   ========================================================================== */

.ac-schedule__calendar {
	overflow-x: auto;    /* calendar plugins sometimes overflow */
}

/* My Calendar event rows inside the schedule section */
.ac-schedule__calendar .mc-event-list li {
	border-radius: var(--ac-radius-md, 6px);
	padding:       var(--ac-space-2) var(--ac-space-3);
	transition:    background-color 0.2s ease, color 0.2s ease;
}

.ac-schedule__calendar .mc-event-list li:hover {
	background-color: var(--ac-color-primary);
	color:            #fff;
}

/* Remove link underline at all times */
.ac-schedule__calendar .mc-event-list li a,
.ac-schedule__calendar .mc-event-list li a:hover,
.ac-schedule__calendar .mc-event-list li a:focus {
	text-decoration: none;
	transition:      color 0.2s ease;
}

.ac-schedule__calendar .mc-event-list li:hover a {
	color: #fff;
}

.ac-schedule__placeholder {
	color:      var(--ac-color-text-muted);
	font-style: italic;
}

/* ==========================================================================
   Pricing / Registration
   ========================================================================== */

.ac-pricing__card {
	background:    var(--ac-color-surface);
	border:        1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-xl);
	padding:       var(--ac-space-8) var(--ac-space-8);
	display:       flex;
	flex-direction: column;
	gap:           var(--ac-space-6);
}

.ac-pricing__summary {
	margin-top:  var(--ac-space-6);
	font-size:   var(--ac-font-size-sm);
	color:       var(--ac-color-text-muted);
	line-height: var(--ac-line-height-loose);
}

.ac-pricing__summary p:first-child { margin-top: 0; }
.ac-pricing__summary p:last-child  { margin-bottom: 0; }
.ac-pricing__summary a {
	color:                 var(--ac-color-primary);
	text-decoration:       underline;
	text-underline-offset: 2px;
}

.ac-pricing__price-wrap {
	display:     flex;
	align-items: baseline;
	gap:         var(--ac-space-3);
	flex-wrap:   wrap;
}

.ac-pricing__price {
	font-size:   clamp( var(--ac-font-size-xl), 3vw, var(--ac-font-size-2xl) );
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-primary);
	line-height: var(--ac-line-height-tight);
}

.ac-pricing__price-note {
	font-size:  var(--ac-font-size-sm);
	color:      var(--ac-color-text-muted);
	font-style: italic;
}

.ac-pricing__includes {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--ac-space-3);
}

.ac-pricing__includes-item {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-3);
	font-size:   var(--ac-font-size-base);
	color:       var(--ac-color-text);
}

.ac-pricing__includes-item .fa-circle-check {
	color:      var(--ac-color-secondary);
	font-size:  1.1rem;
	flex-shrink: 0;
}

.ac-pricing__cta {
	padding-top: var(--ac-space-2);
}

/* ==========================================================================
   Instructor / Staff
   ========================================================================== */

/* ==========================================================================
   Instructors — card grid
   ========================================================================== */

.ac-instructors__grid {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	grid-template-columns: repeat( auto-fill, minmax( 170px, 1fr ) );
	gap:        var(--ac-space-6);
}

/* Card shell — no overflow:hidden so the focus outline isn't clipped */
.ac-instructor-card {
	background:    var(--ac-color-white);
	border:        1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-lg);
}

/* The inner element is either a <button> (has modal) or a <div> */
.ac-instructor-card__btn {
	display:        flex;
	flex-direction: column;
	width:          100%;
	background:     transparent;
	border:         none;
	padding:        0;
	text-align:     left;
	cursor:         default;
	color:          inherit;
	font:           inherit;
	/* Match parent corners so photo clips correctly and outline follows shape */
	border-radius:  inherit;
	overflow:       hidden;
}

.ac-instructor-card--interactive .ac-instructor-card__btn {
	cursor:     pointer;
	transition: outline-color 0.15s ease;
	/* Reserve space for outline so layout doesn't shift on focus */
	outline:    2px solid transparent;
	outline-offset: 0;
}

.ac-instructor-card--interactive .ac-instructor-card__btn:hover,
.ac-instructor-card--interactive .ac-instructor-card__btn:focus-visible {
	outline-color: var(--ac-color-primary);
}

/* Photo */
.ac-instructor-card__photo-wrap {
	aspect-ratio: 1 / 1;
	overflow:     hidden;
	background:   var(--ac-color-surface);
}

.ac-instructor-card--interactive .ac-instructor-card__photo-wrap {
	transition: opacity 0.2s ease;
}
.ac-instructor-card--interactive .ac-instructor-card__btn:hover .ac-instructor-card__photo-wrap,
.ac-instructor-card--interactive .ac-instructor-card__btn:focus-visible .ac-instructor-card__photo-wrap {
	opacity: 0.88;
}

.ac-instructor-card__photo {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.ac-instructor-card__photo-placeholder {
	width:           100%;
	height:          100%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       3rem;
	color:           var(--ac-color-border);
}

/* Info bar */
.ac-instructor-card__info {
	padding:        var(--ac-space-4) var(--ac-space-4) var(--ac-space-5);
	display:        flex;
	flex-direction: column;
	gap:            var(--ac-space-1);
}

.ac-instructor-card__name {
	font-size:   var(--ac-font-size-base);
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-primary);
	display:     block;
}

.ac-instructor-card__role {
	font-size:   var(--ac-font-size-sm);
	font-weight: var(--ac-font-weight-medium);
	color:       var(--ac-color-secondary);
	display:     block;
}

.ac-instructor-card__hint {
	display:     block;
	margin-top:  var(--ac-space-2);
	font-size:   var(--ac-font-size-xs);
	color:       var(--ac-color-text-muted);
	gap:         var(--ac-space-1);
}

/* ==========================================================================
   Instructors — modal dialog
   ========================================================================== */

.ac-instructor-modal {
	border:        none;
	border-radius: var(--ac-radius-lg);
	padding:       0;
	max-width:     min( 520px, calc( 100vw - 2rem ) );
	width:         100%;
	box-shadow:    0 16px 48px rgba( 0, 0, 0, .28 );
	background:    var(--ac-color-white);
}

/* Backdrop */
.ac-instructor-modal::backdrop {
	background: rgba( 0, 0, 0, .55 );
	backdrop-filter: blur( 2px );
}

.ac-instructor-modal__inner {
	padding:  var(--ac-space-8);
	position: relative;
}

/* Close button */
.ac-instructor-modal__close {
	position:    absolute;
	top:         var(--ac-space-4);
	right:       var(--ac-space-4);
	background:  transparent;
	border:      1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-full, 999px);
	width:       2.25rem;
	height:      2.25rem;
	display:     flex;
	align-items: center;
	justify-content: center;
	cursor:      pointer;
	color:       var(--ac-color-text-muted);
	transition:  background 0.15s, color 0.15s;
	flex-shrink: 0;
}
.ac-instructor-modal__close:hover,
.ac-instructor-modal__close:focus-visible {
	background: var(--ac-color-primary);
	color:      var(--ac-color-white);
	outline:    none;
	border-color: var(--ac-color-primary);
}

/* Header: photo + name/role side by side */
.ac-instructor-modal__header {
	display:     flex;
	gap:         var(--ac-space-5);
	align-items: flex-start;
	margin-bottom: var(--ac-space-6);
	padding-right: var(--ac-space-8); /* clearance for close btn */
}

.ac-instructor-modal__photo-wrap {
	flex-shrink:   0;
	width:         5rem;
	height:        5rem;
	border-radius: var(--ac-radius-full, 999px);
	overflow:      hidden;
	background:    var(--ac-color-surface);
}

.ac-instructor-modal__photo {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.ac-instructor-modal__identity {
	display:        flex;
	flex-direction: column;
	gap:            var(--ac-space-1);
	padding-top:    var(--ac-space-1);
}

.ac-instructor-modal__name {
	font-size:   var(--ac-font-size-lg);
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-primary);
	margin:      0;
}

.ac-instructor-modal__role {
	font-size:   var(--ac-font-size-sm);
	font-weight: var(--ac-font-weight-medium);
	color:       var(--ac-color-secondary);
	margin:      0;
}

/* Bio */
.ac-instructor-modal__bio {
	font-size:     var(--ac-font-size-base);
	color:         var(--ac-color-text);
	line-height:   var(--ac-line-height-loose);
	margin-bottom: var(--ac-space-5);
}
.ac-instructor-modal__bio p:last-child { margin-bottom: 0; }

/* Contact list */
.ac-instructor-modal__contact {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--ac-space-2);
	border-top: 1px solid var(--ac-color-border);
	padding-top: var(--ac-space-5);
}

.ac-instructor-modal__contact li {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-3);
	font-size:   var(--ac-font-size-sm);
	color:       var(--ac-color-text);
}

.ac-instructor-modal__contact li i {
	color:      var(--ac-color-secondary);
	width:      1rem;
	text-align: center;
	flex-shrink: 0;
}

.ac-instructor-modal__contact a {
	color:           var(--ac-color-link);
	text-decoration: underline;
}
.ac-instructor-modal__contact a:hover { color: var(--ac-color-primary); }

/* ==========================================================================
   FAQs — native <details>/<summary>
   Accessible by default (keyboard + screen reader). No JS required.
   ========================================================================== */

/* Remove bottom section border on the FAQs section */
.ac-resource-faqs {
	border-bottom: none;
}

.ac-faqs__list {
	display:        flex;
	flex-direction: column;
	gap:            var(--ac-space-3);
}

/* ---- Accordion item wrapper ---- */
.ac-faq {
	border-radius:  var(--ac-radius-lg);
	overflow:       hidden;
	box-shadow:     0 2px 8px rgba( 1, 21, 96, 0.08 );
	transition:     box-shadow var(--ac-duration-short) var(--ac-ease-standard, ease);
}

.ac-faq[open] {
	box-shadow: 0 4px 16px rgba( 1, 21, 96, 0.14 );
}

/* ---- Question bar — blue header ---- */
.ac-faq__question {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--ac-space-4);
	padding:         var(--ac-space-4) var(--ac-space-5);
	font-family:     var(--ac-font-family-ui);
	font-size:       var(--ac-font-size-base);
	font-weight:     var(--ac-font-weight-semibold);
	color:           var(--ac-color-white);
	background:      var(--ac-color-primary);
	cursor:          pointer;
	list-style:      none;
	user-select:     none;
	transition:      background-color var(--ac-duration-short) var(--ac-ease-standard, ease);
}

.ac-faq__question::-webkit-details-marker {
	display: none;
}

.ac-faq__question:hover {
	background-color: var(--ac-color-primary-light);
}

.ac-faq[open] .ac-faq__question {
	background-color: var(--ac-color-primary-dark);
}

/* Focus ring inset so it stays inside the blue bar */
.ac-faq__question:focus-visible {
	outline:        3px solid var(--ac-color-secondary);
	outline-offset: -4px;
}

/* ---- Chevron icon ---- */
.ac-faq__icon {
	flex-shrink: 0;
	color:       var(--ac-color-secondary);
	font-size:   0.85rem;
	transition:  transform var(--ac-duration-short) var(--ac-ease-standard, ease);
	/* Ensure icon is always visible against the blue bg */
	filter:      brightness( 1.6 ) saturate( 1.2 );
}

.ac-faq[open] .ac-faq__icon {
	transform: rotate( 180deg );
}

/* ---- Answer panel ---- */
.ac-faq__answer {
	padding:          var(--ac-space-5) var(--ac-space-6) var(--ac-space-6);
	border-left:      4px solid var(--ac-color-primary);
	font-size:        var(--ac-font-size-base);
	line-height:      var(--ac-line-height-loose);
	color:            var(--ac-color-text);
	background:       var(--ac-color-white);
}

.ac-faq__answer p:last-child,
.ac-faq__answer ul:last-child,
.ac-faq__answer ol:last-child {
	margin-bottom: 0;
}

.ac-faq__answer a {
	color:           var(--ac-color-link);
	text-decoration: underline;
}

.ac-faq__answer a:hover,
.ac-faq__answer a:focus-visible {
	color: var(--ac-color-secondary);
}

/* ==========================================================================
   Accessibility / Support
   ========================================================================== */

.ac-a11y__grid {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap:        var(--ac-space-4);
}

.ac-a11y-card {
	display:       flex;
	align-items:   flex-start;
	gap:           var(--ac-space-4);
	padding:       var(--ac-space-5);
	background:    var(--ac-color-surface);
	border:        1px solid var(--ac-color-border);
	border-radius: var(--ac-radius-md);
	border-left:   4px solid var(--ac-color-secondary);
}

.ac-a11y-card__icon {
	width:           40px;
	height:          40px;
	border-radius:   50%;
	background:      var(--ac-color-primary);
	color:           var(--ac-color-white);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	font-size:       1rem;
}

.ac-a11y-card__body {
	min-width: 0;
}

.ac-a11y-card__label {
	font-size:   var(--ac-font-size-base);
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-primary);
	margin:      0 0 var(--ac-space-1);
}

.ac-a11y-card__desc {
	font-size:   var(--ac-font-size-sm);
	color:       var(--ac-color-text-muted);
	line-height: var(--ac-line-height-normal);
	margin:      0;
}

/* ==========================================================================
   Related Programs / Post Cards
   Note: .ac-related__grid and .ac-related-card styles live in front-page.css
   (globally loaded) so they render on every page including the front page.
   ========================================================================== */

/* ==========================================================================
   Video  (reuses .ac-video-intro CSS from front-page.css)
   The section itself needs a capped height inside the content column.
   ========================================================================== */

.ac-resource-video.ac-video-intro {
	min-height: 380px;
	border-radius: var(--ac-radius-lg);
	overflow:      hidden;
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.ac-gallery__grid {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	grid-template-columns: repeat( var(--ac-gallery-cols, 3), 1fr );
	gap:        var(--ac-space-3);
}

.ac-gallery__item {
	overflow:      hidden;
	border-radius: var(--ac-radius-md);
	background:    var(--ac-color-surface);
}

.ac-gallery__link {
	display:  block;
	position: relative;
	overflow: hidden;
}

.ac-gallery__img {
	width:       100%;
	aspect-ratio: 4 / 3;
	object-fit:  cover;
	display:     block;
	transition:  transform var(--ac-duration-base, 250ms) var(--ac-ease-standard, ease);
}

.ac-gallery__link:hover .ac-gallery__img,
.ac-gallery__link:focus-visible .ac-gallery__img {
	transform: scale( 1.05 );
}

.ac-gallery__link:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 3px;
}

.ac-gallery__caption {
	display:     block;
	padding:     var(--ac-space-2) var(--ac-space-3);
	font-size:   var(--ac-font-size-xs);
	color:       var(--ac-color-text-muted);
	line-height: var(--ac-line-height-normal);
}

@media ( max-width: 56.25em ) {
	.ac-gallery__grid {
		grid-template-columns: repeat( min( var(--ac-gallery-cols, 3), 2 ), 1fr );
	}
}

@media ( max-width: 36em ) {
	.ac-gallery__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media ( prefers-reduced-motion: reduce ) {
	.ac-resource-nav__link,
	.ac-resource-pill-nav__link,
	.ac-faq,
	.ac-faq__question,
	.ac-faq__icon,
	.ac-gallery__img {
		transition: none;
	}
}