/* ==========================================================================
   Single Activity Template
   ========================================================================== */

/* ---- Page header --------------------------------------------------------- */
.ac-activity-header {
	background-color: var(--ac-color-primary);
	padding-block:    var(--ac-space-3) var(--ac-space-6);
}

.ac-activity-header__audience {
	font-size:      var(--ac-font-size-sm);
	font-weight:    600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color:          rgba( 255, 255, 255, 0.70 );
	margin:         0 0 var(--ac-space-2);
}

.ac-activity-header__title {
	font-size:   clamp( 2rem, 5vw, 3rem );
	font-weight: 800;
	line-height: 1.1;
	color:       #fff;
	margin:      0;
}

/* ---- Body: 2-col grid (left = image+desc, right = sessions) -------------- */
.ac-activity-body {
	padding-block: var(--ac-space-6);
}

.ac-activity-body__grid {
	display:               grid;
	grid-template-columns: 1fr;          /* mobile: stacked */
	gap:                   var(--ac-space-10);
	align-items:           start;
}

@media ( min-width: 52em ) {
	.ac-activity-body__grid {
		grid-template-columns: 1fr 1fr;  /* 50/50 split */
		gap:                   var(--ac-space-12);
	}
}

/* Left column: image stacked above description */
.ac-activity-body__left {
	display:        flex;
	flex-direction: column;
	gap:            var(--ac-space-6);
}

.ac-activity-intro__image img {
	display:       block;
	width:         100%;
	height:        auto;
	border-radius: var(--ac-radius-lg, 12px);
	object-fit:    cover;
}

.ac-activity-intro__description {
	font-size:   var(--ac-font-size-base);
	line-height: 1.75;
	color:       var(--ac-color-text);
}

.ac-activity-intro__description p:last-child {
	margin-bottom: 0;
}

/* ---- Sessions list ------------------------------------------------------- */
/* .ac-activity-sessions__heading is no longer output by the template.
   The activity-sessions template part now uses .ac-resource-section__title
   instead, which carries the correct size from single-resource.css. */

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

.ac-activity-sessions--in-resource {
	background-color: var(--ac-color-surface);
	border-radius:    var(--ac-radius-md, 6px);
	padding:          var(--ac-space-6);
}

.ac-activity-sessions__portal-note {
	color:         var(--ac-color-text-muted);
	margin-bottom: var(--ac-space-4);
}

/* ── ActiveNet portal buttons — shared font, not used anywhere else ──
   Font: Trebuchet MS / Segoe UI (theme uses Nunito Sans + Montserrat elsewhere).
   Makes any ActiveNet-linked button immediately visually distinct.           */

/* Filled variant — "View Sessions & Register" and Information component ActiveNet buttons */
.ac-btn--activenet {
	font-family:      'Trebuchet MS', 'Segoe UI', sans-serif;
	background-color: #0081C9;
	color:            #ffffff;
	border-color:     #0081C9;
}
.ac-btn--activenet:hover,
.ac-btn--activenet:focus {
	background-color: #002F86;
	border-color:     #002F86;
	color:            #ffffff;
}

/* "Show all N sessions" button */
.ac-activity-sessions__more-wrap {
	margin-top:  var(--ac-space-5);
	text-align:  center;
}

.ac-activity-sessions__show-all {
	transition: opacity .2s ease;
}

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

/*
 * Session item — the <li> is the visual card; the <a> inside takes up the
 * full space via display:flex so screen readers see a proper link, not
 * display:contents which causes some ATs to drop the interactive role.
 */
.ac-session-item {
	border-radius: var(--ac-radius-md, 8px);
	border-left:   4px solid var(--ac-color-primary);
	background:    var(--ac-color-surface, #f8f9fb);
	font-size:     var(--ac-font-size-sm);
	overflow:      hidden;
	transition:    background-color 0.2s ease, border-left-color 0.2s ease, color 0.2s ease;
}

/*
 * The link fills the entire card.
 * Layout: left group (date + time) on one side, location on the other.
 */
.ac-session-item__link {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--ac-space-4);
	padding:         var(--ac-space-4) var(--ac-space-5);
	width:           100%;
	text-decoration: none;
	color:           inherit;
}

/* Non-linked items: same layout */
.ac-session-item:not(.ac-session-item--linked) {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--ac-space-4);
	padding:         var(--ac-space-4) var(--ac-space-5);
}

/* Left group: date + time sit together */
.ac-session-item__left {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         var(--ac-space-2) var(--ac-space-5);
}

.ac-session-item__date,
.ac-session-item__time,
.ac-session-item__location {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-2);
	color:       var(--ac-color-text);
}

.ac-session-item__date { font-weight: 600; }

/* Location floats to the right, slightly muted */
.ac-session-item__location {
	font-size:  var(--ac-font-size-xs);
	opacity:    0.70;
	text-align: right;
	white-space: nowrap;
}

/* Hover / focus on linked items — full blue fill, matching ac-schedule__calendar */
.ac-session-item--linked:hover,
.ac-session-item--linked:focus-within {
	background-color:  var(--ac-color-primary);
	border-left-color: var(--ac-color-primary);
	color:             #fff;
}

/* All text inside goes white on hover */
.ac-session-item--linked:hover .ac-session-item__date,
.ac-session-item--linked:hover .ac-session-item__time,
.ac-session-item--linked:hover .ac-session-item__location,
.ac-session-item--linked:focus-within .ac-session-item__date,
.ac-session-item--linked:focus-within .ac-session-item__time,
.ac-session-item--linked:focus-within .ac-session-item__location {
	color:   #fff;
	opacity: 1;
}

/* Link: no underline at any state */
.ac-session-item__link,
.ac-session-item__link:hover,
.ac-session-item__link:focus {
	text-decoration: none;
	color:           inherit;
	transition:      color 0.2s ease;
}

/* Focus ring on the <li> when the inner link is keyboard-focused */
.ac-session-item--linked:focus-within {
	outline:        2px solid var(--ac-color-primary);
	outline-offset: 2px;
}

/* Hide the focus ring on the <a> itself — the <li> ring is sufficient */
.ac-session-item__link:focus {
	outline: none;
}

/* ---- Animations ---------------------------------------------------------- */
/*
 * All animations are gated on prefers-reduced-motion: no-preference.
 * The base.css global kill-switch also zeroes transition/animation durations
 * for prefers-reduced-motion: reduce, so this is a belt-and-suspenders guard.
 */
@media ( prefers-reduced-motion: no-preference ) {

	/* Header: fade in */
	.ac-activity-header {
		animation: ac-fade-in 0.4s ease both;
	}

	/* Left column (image + description): fade + slide up, slight delay */
	.ac-activity-body__left {
		animation: ac-fade-slide-up 0.5s ease 0.1s both;
	}

	/* Session items: staggered fade in */
	.ac-activity-sessions__heading {
		animation: ac-fade-slide-up 0.45s ease 0.15s both;
	}

	.ac-session-item {
		animation: ac-fade-slide-up 0.4s ease both;
	}

	/* Stagger up to 10 items; beyond that they all use the 10th delay */
	.ac-session-item:nth-child(1)  { animation-delay: 0.20s; }
	.ac-session-item:nth-child(2)  { animation-delay: 0.26s; }
	.ac-session-item:nth-child(3)  { animation-delay: 0.32s; }
	.ac-session-item:nth-child(4)  { animation-delay: 0.38s; }
	.ac-session-item:nth-child(5)  { animation-delay: 0.44s; }
	.ac-session-item:nth-child(6)  { animation-delay: 0.50s; }
	.ac-session-item:nth-child(7)  { animation-delay: 0.56s; }
	.ac-session-item:nth-child(8)  { animation-delay: 0.62s; }
	.ac-session-item:nth-child(9)  { animation-delay: 0.68s; }
	.ac-session-item:nth-child(n+10) { animation-delay: 0.70s; }

	@keyframes ac-fade-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	@keyframes ac-fade-slide-up {
		from {
			opacity:   0;
			transform: translateY( 12px );
		}
		to {
			opacity:   1;
			transform: translateY( 0 );
		}
	}
}

/* ---- Dark mode ----------------------------------------------------------- */
html[data-color-scheme="dark"] .ac-activity-intro__description { color: var(--ac-color-text); }
html[data-color-scheme="dark"] .ac-activity-sessions__heading,
html[data-color-scheme="dark"] .ac-activity-sessions__empty    { color: var(--ac-color-text); }
html[data-color-scheme="dark"] .ac-session-item                { border-left-color: #4d7cf6; background: var(--ac-color-surface); }
html[data-color-scheme="dark"] .ac-session-item__date,
html[data-color-scheme="dark"] .ac-session-item__time,
html[data-color-scheme="dark"] .ac-session-item__location      { color: var(--ac-color-text); }

@media ( prefers-color-scheme: dark ) {
	html:not([data-color-scheme="light"]) .ac-activity-intro__description { color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-activity-sessions__heading,
	html:not([data-color-scheme="light"]) .ac-activity-sessions__empty    { color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-session-item                { border-left-color: #4d7cf6; background: var(--ac-color-surface); }
	html:not([data-color-scheme="light"]) .ac-session-item__date,
	html:not([data-color-scheme="light"]) .ac-session-item__time,
	html:not([data-color-scheme="light"]) .ac-session-item__location      { color: var(--ac-color-text); }
}