.course-block[class*='dates'] {
	--bg: #0b0f14;
	--card: #0f141a;
	--ink: #eaf2ff;
	--muted: #9fb0c9;
	--accent: #8cc6c1; /* primary accent */
	--accent-2: #8cc6c1; /* secondary accent for gradient */
	--ring: rgba(110, 231, 255, 0.2);
	--radius: 16px;
	--shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

	@media (prefers-color-scheme: light) {
		--bg: #f7fbff;
		--card: rgba(139, 197, 192, 0.25);
		--ink: #fff;
		--muted: #fff;
		--accent: #8cc6c1;
		--accent-2: #8cc6c1;
		--ring: rgba(139, 197, 192, 0.8);
		--shadow: 0 8px 24px rgba(2, 6, 23, 0.1);
	}

	.cohort-dates {
		padding: 75px 20px 32.5px;
		background: #004650;
		color: var(--ink);
		overflow: clip;
		.cohort-dates__wrap {
			max-width: 1024px;
			margin: 0 auto;
			h2 {
				text-align: center;
				color: white;
				margin-bottom: 0.75em;
				font-weight: 900;
				text-transform: uppercase;
			}
			h6 {
				text-align: center;
				margin-bottom: 0.5em;
				/* color: rgb(246, 115, 82); */
			}
			h5.cohort-dates__subtitle {
				margin: 0 0 1.25rem 0;
				color: white;
				text-align: center;
			}
			a {
				.cohort-dates__grid {
					--min: 130px;
					max-width: 800px;
					margin: 20px auto;
					display: flex;
					flex-wrap: wrap;
					gap: clamp(0.8rem, 2.4vw, 1.2rem);
					list-style: none;
					padding: 0;
					justify-content: center;
					@media (max-width: 480px) {
						flex-direction: row;
					}
					.date-tile {
						position: relative;
						border-radius: var(--radius);
						background: linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, transparent), var(--card));
						box-shadow: var(--shadow);
						padding: 1rem 1rem 1.1rem;
						display: grid;
						flex: 1;
						min-width: 170px;

						max-width: 200px;
						align-items: start;
						justify-items: start;
						margin-top: 0 !important;
						isolation: isolate;
						transition: transform 0.25s ease, box-shadow 0.25s ease, outline-color 0.25s ease;
						outline: 1px solid rgba(255, 255, 255, 0.04);
						@media (max-width: 480px) {
							margin-left: auto;
							margin-right: auto;
							min-width: 120px;
						}
						&:has(.sold-out) {
							opacity: 0.5;
							cursor: not-allowed;
						}
						&::after {
							/* soft ring that brightens on hover */
							content: '';
							position: absolute;
							inset: -1px;
							border-radius: inherit;
							pointer-events: none;
							box-shadow: 0 0 0 0px var(--ring);
							transition: box-shadow 0.25s ease;
						}
						&:first-child:not(:has(.sold-out)),
						&:has(.sold-out) + li {
							transform: translateY(-2px);
							box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
							margin-right: 6px;
							margin-left: 6px;
							@media (max-width: 480px) {
								margin-left: auto;
								margin-right: auto;
							}
							&::after {
								box-shadow: 0 0 0 6px var(--ring);
							}
						}
						.date-tile__month {
							--fs: calc(1.6 * clamp(1rem, 6vw, 1.3rem));
							font-size: var(--fs);
							@media (max-width: 960px) {
								font-size: calc(var(--laptop_scale) * var(--fs));
							}
							@media (max-width: 768px) {
								font-size: calc(var(--tablet_scale) * var(--fs));
							}
							@media (max-width: 480px) {
								font-size: calc(var(--phone_scale) * var(--fs));
							}
							font-weight: 600;
							letter-spacing: 0.06em;
							text-transform: uppercase;
							color: var(--muted);
							:after {
								content: 'Starting soon!';
								background: #8cc6c1;
								position: absolute;
								--fs: calc(1 * 0.95rem);
								font-size: var(--fs);
								@media (max-width: 960px) {
									font-size: calc(var(--laptop_scale) * var(--fs));
								}
								@media (max-width: 768px) {
									font-size: calc(var(--tablet_scale) * var(--fs));
								}
								@media (max-width: 480px) {
									font-size: calc(var(--phone_scale) * var(--fs));
								}
								display: inline-block;
								line-height: 1;
								color: var(--brand_primary);
								padding: 0.5em 0.75em;
								border-radius: 100px;
								right: 1rem;
								bottom: 1.1rem;
							}
						}
						.date-tile__day {
							--fs: calc(1.6 * clamp(2rem, 6vw, 2.6rem));
							font-size: var(--fs);
							@media (max-width: 960px) {
								font-size: calc(var(--laptop_scale) * var(--fs));
							}
							@media (max-width: 768px) {
								font-size: calc(var(--tablet_scale) * var(--fs));
							}
							@media (max-width: 480px) {
								font-size: calc(var(--phone_scale) * var(--fs));
							}
							line-height: 0.95;
							font-weight: 800;
							letter-spacing: 0.02em;
							margin-top: 0.15rem;
							color: var(--ink);
						}

						.date-tile__year {
							margin-top: 0.4rem;
							--fs: calc(1.6 * 1rem);
							font-size: var(--fs);
							@media (max-width: 960px) {
								font-size: calc(var(--laptop_scale) * var(--fs));
							}
							@media (max-width: 768px) {
								font-size: calc(var(--tablet_scale) * var(--fs));
							}
							@media (max-width: 480px) {
								font-size: calc(var(--phone_scale) * var(--fs));
							}
							color: var(--muted);
						}
						.date-tile__flag {
							position: absolute;
							top: 0.6rem;
							right: 0.7rem;
							font-weight: 400;
							--fs: 40px;
							font-size: var(--fs);
							@media (max-width: 960px) {
								font-size: calc(var(--laptop_scale) * var(--fs));
							}
							@media (max-width: 768px) {
								font-size: calc(var(--tablet_scale) * var(--fs));
							}
							@media (max-width: 480px) {
								font-size: calc(var(--phone_scale) * var(--fs));
							}
							line-height: 1;
							display: inline-grid;
							place-items: center;
							width: 1.35rem;
							height: 1.35rem;
							border-radius: 999px;
							color: #8cc6c1;
						}
					}

					.date-tile__tag {
						position: absolute;
						top: 0.6rem;
						right: 0.7rem;
						display: inline-block;
						margin-left: auto;
						padding: 4px 8px;
						font-size: 12px;
						line-height: 1;
						font-weight: 600;

						border-radius: 999px;
						border: 1px solid rgb(55 33 1 / 12%);
						vertical-align: middle;
						white-space: nowrap;
						text-transform: lowercase;

						&.sold-out {
							background-color: #004650;
							color: #fff;
						}
						&.warning-tag {
							background-color: var(--accent);
							color: var(--brand_primary);
						}
					}

					.date-tile--extended {
						background: linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, transparent), var(--card)),
							radial-gradient(120% 80% at 120% -10%, color-mix(in oklab, var(--accent-2) 20%, transparent) 0%, transparent 60%);
						outline-color: color-mix(in oklab, var(--accent-2) 30%, transparent);
						.date-tile__day {
							color: var(--ink);
						}
					}
				}
			}
			.cohort-dates__note {
				margin: 1rem 0 0 0;
				color: white;
				text-align: center;
				font-style: italic;
			}
		}
	}
}