/* ==========================================================================
   BSW Curriculum Map
   ==========================================================================

   Replaces the flat PNG of the curriculum map with real text, so the courses
   are selectable, searchable, translatable, readable by a screen reader, and
   legible on a phone — none of which an image of a table can do.

   Sits in @layer yak-components, alongside the theme's other component styles,
   so Customizer CSS and yak-overrides can still win against it.

   Structure it expects (see the Custom HTML block on the home page):

     section.bsw-curriculum
       h2.bsw-curriculum__title
       ol.bsw-curriculum__terms
         li.bsw-curriculum__term          <- carries the per-term colour vars
           h3.bsw-curriculum__term-heading
           div.bsw-curriculum__panel
             ul.bsw-curriculum__courses
             p.bsw-curriculum__note       <- final term only
       (no trailing note — it lives in the last panel, as in the original)

   Not a <table>. The four terms share no row relationship — the third course
   in Year 3 Fall has nothing to do with the third course in Year 3 Spring, and
   two terms do not even have a third course. Marking it up as a table would
   invent those pairings and make a screen reader announce them. Four headed
   lists in a sequence say what this actually is.

   ========================================================================== */

@layer yak-components {

	/* ----------------------------------------
		Palette
		Site accents, ordered cool-to-warm to keep the original graphic's sense
		of moving forward through the programme. Each term sets its own accent,
		the ink that sits on it, and the tint behind its course list.
		Tints are alpha over the page, so they hold up if the background shifts.
	---------------------------------------- */

	.bsw-curriculum {
		/* Depth of the arrow point, and the clear space left around it. */
		--bsw-curriculum-chevron: 26px;
		--bsw-curriculum-gap: 6px;
		--bsw-curriculum-gutter: 0.9rem;

		margin-block: 2.5rem;
	}

	.bsw-curriculum__term:nth-child(1) {
		--term-accent: var(--teal, #00778b);
		--term-ink: #ffffff;
		--term-tint: rgba(0, 119, 139, 0.08);
	}

	.bsw-curriculum__term:nth-child(2) {
		--term-accent: var(--yellow, #ffa400);
		--term-ink: var(--navy, #13294b);
		--term-tint: rgba(255, 164, 0, 0.14);
	}

	.bsw-curriculum__term:nth-child(3) {
		--term-accent: var(--lavender, #a7a4e0);
		--term-ink: var(--navy, #13294b);
		--term-tint: rgba(167, 164, 224, 0.18);
	}

	.bsw-curriculum__term:nth-child(4) {
		--term-accent: var(--orange, #ff5c39);
		--term-ink: var(--navy, #13294b);
		--term-tint: rgba(255, 92, 57, 0.12);
	}


	/* ----------------------------------------
		Title bar
	---------------------------------------- */

	.bsw-curriculum__title {
		margin: 0;
		padding: 0.7em 1rem;
		background: var(--navy, #13294b);
		color: #ffffff;
		text-align: center;
		text-wrap: balance;
		border-radius: var(--yak-radius, 5px) var(--yak-radius, 5px) 0 0;
	}


	/* ----------------------------------------
		Term columns

		Four across on desktop, two on tablet, one on phone. Each term is a
		grid row of its own so the headings stay aligned with each other and
		the tinted panels all run to the same depth, however uneven the course
		counts are.
	---------------------------------------- */

	.bsw-curriculum__terms {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		/* Columns are separated; a term and its own panel are not. The row gap
		   is zero so each header sits directly on the content it introduces. */
		column-gap: var(--bsw-curriculum-gap);
		row-gap: 0;
		margin: var(--bsw-curriculum-gap) 0 0;
		padding: 0;
		list-style: none;
	}

	.bsw-curriculum__term {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		margin: 0;
		padding: 0;
		min-width: 0;
	}

	/* subgrid is what keeps the four headings on one line. Where it is missing,
	   each term simply stacks its own heading and panel at its natural height. */
	@supports not (grid-template-rows: subgrid) {

		.bsw-curriculum__term {
			display: flex;
			flex-direction: column;
		}

		.bsw-curriculum__panel {
			flex: 1;
		}
	}


	/* ----------------------------------------
		Term heading

		The arrow is drawn with clip-path, so nothing here depends on an image.

		Each arrow is one chevron wider than its column and pulled back by the
		same amount, so its point reaches past the column edge and seats inside
		the notch of the term that follows — the two shapes are complements, and
		nesting them is what makes the row read as one continuous chain rather
		than four separate tabs with points floating in the gaps. The last arrow
		keeps its point inside the column, so the component's right edge stays
		flush with the title bar above it.
	---------------------------------------- */

	.bsw-curriculum__term-heading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.1em;
		width: calc(100% + var(--bsw-curriculum-chevron));
		margin: 0 calc(-1 * var(--bsw-curriculum-chevron)) 0 0;
		/* Right padding clears the point; the asymmetry is what keeps the label
		   optically centred in the flat part of the arrow rather than the box. */
		padding: 0.8rem calc(var(--bsw-curriculum-chevron) + var(--bsw-curriculum-gutter)) 0.8rem var(--bsw-curriculum-gutter);
		background: var(--term-accent);
		color: var(--term-ink);
		font-size: var(--yak-font-md, 1.125rem);
		line-height: 1.25;
		text-align: center;
		text-wrap: balance;
		clip-path: polygon(
			0 0,
			calc(100% - var(--bsw-curriculum-chevron)) 0,
			100% 50%,
			calc(100% - var(--bsw-curriculum-chevron)) 100%,
			0 100%
		);
	}

	/* Every term after the first is notched to receive the previous point. */
	.bsw-curriculum__term:not(:first-child) .bsw-curriculum__term-heading {
		padding-left: calc(var(--bsw-curriculum-chevron) + var(--bsw-curriculum-gutter));
		clip-path: polygon(
			0 0,
			calc(100% - var(--bsw-curriculum-chevron)) 0,
			100% 50%,
			calc(100% - var(--bsw-curriculum-chevron)) 100%,
			0 100%,
			var(--bsw-curriculum-chevron) 50%
		);
	}

	/* The final term keeps its notch but loses its point: the sequence arrives
	   here, so there is nothing further to point at. Notched on the left, it
	   still receives the arrow before it; square on the right, its edge lines
	   up with the title bar above rather than tapering away from it.

	   Nothing overhangs, so the width goes back to the column and the right
	   padding drops to a plain gutter — there is no point to clear on that
	   side any more. */
	.bsw-curriculum__term:last-child .bsw-curriculum__term-heading {
		width: 100%;
		margin-right: 0;
		padding-right: var(--bsw-curriculum-gutter);
		clip-path: polygon(
			0 0,
			100% 0,
			100% 100%,
			0 100%,
			var(--bsw-curriculum-chevron) 50%
		);
	}

	.bsw-curriculum__term-credits {
		font-weight: 400;
		white-space: nowrap;
	}


	/* ----------------------------------------
		Panel

		A flex column so the Gen Ed note can be pushed to the foot of the last
		panel, which is where the original graphic put it — and which is also
		the one place in the map with room to spare.
	---------------------------------------- */

	.bsw-curriculum__panel {
		display: flex;
		flex-direction: column;
		padding: 1.1rem var(--bsw-curriculum-gutter) 1.2rem;
		background: var(--term-tint);
	}

	/* The two outer bottom corners close the shape the title bar opens, so the
	   whole map reads as one rounded card rather than a rounded strip sitting
	   on four square ones. Only the outer corners — the inner ones butt against
	   the next column and stay square. */
	.bsw-curriculum__term:first-child .bsw-curriculum__panel {
		border-bottom-left-radius: var(--yak-radius, 5px);
	}

	.bsw-curriculum__term:last-child .bsw-curriculum__panel {
		border-bottom-right-radius: var(--yak-radius, 5px);
	}

	.bsw-curriculum__courses {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: var(--yak-font-sm, 1rem);
		line-height: 1.45;
	}

	.bsw-curriculum__courses > li + li {
		margin-top: 1rem;
	}

	.bsw-curriculum__courses b {
		font-weight: 700;
	}


	/* ----------------------------------------
		Gen Ed marker

		The asterisks are decoration; on their own a screen reader would read
		"asterisk asterisk" and the reader would have to go hunting for the
		note. The visible marker is hidden from assistive tech and the meaning
		is spelled out in its place, on the course it belongs to.
	---------------------------------------- */

	.bsw-curriculum__gened {
		color: var(--term-accent);
		font-weight: 700;
		filter: brightness(0.75);
	}

	.bsw-curriculum__note {
		margin: 1.75rem 0 0;
		padding-top: 0.85rem;
		border-top: 1px solid rgba(19, 41, 75, 0.15);
		font-size: var(--yak-font-xs, 0.875rem);
		line-height: 1.45;
		font-style: italic;
	}

	/* Sits against the bottom of the panel wherever there is slack above it. */
	.bsw-curriculum__panel .bsw-curriculum__note {
		margin-top: auto;
	}


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

	@media (max-width: 900px) {

		.bsw-curriculum__terms {
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;
		}
	}

	@media (max-width: 560px) {

		.bsw-curriculum__terms {
			grid-template-columns: 1fr;
		}
	}

	/* Stacked: drop the arrow — a right-pointing point above a list that
	   carries on downwards aims the wrong way — and keep the accent as a rule
	   down the side so each term still reads as its own colour. */
	@media (max-width: 900px) {

		.bsw-curriculum__term,
		.bsw-curriculum__term:not(:first-child) {
			display: block;
		}

		.bsw-curriculum__term-heading,
		.bsw-curriculum__term:not(:first-child) .bsw-curriculum__term-heading,
		.bsw-curriculum__term:last-child .bsw-curriculum__term-heading {
			flex-direction: row;
			flex-wrap: wrap;
			gap: 0 0.5ch;
			width: 100%;
			margin-right: 0;
			padding: 0.7rem 1rem;
			clip-path: none;
			border-radius: var(--yak-radius, 5px) var(--yak-radius, 5px) 0 0;
		}

		.bsw-curriculum__panel {
			border-left: 4px solid var(--term-accent);
			border-radius: 0 0 var(--yak-radius, 5px) var(--yak-radius, 5px);
		}

		/* Nothing to fill on a stacked panel, so let it follow the courses. */
		.bsw-curriculum__panel .bsw-curriculum__note {
			margin-top: 1.5rem;
		}
	}


	/* ----------------------------------------
		Print — the map is the sort of thing an adviser hands to a student
	---------------------------------------- */

	@media print {

		.bsw-curriculum__terms {
			grid-template-columns: repeat(2, 1fr);
		}

		.bsw-curriculum__term-heading {
			clip-path: none;
			width: 100%;
			margin-right: 0;
			padding: 0.5rem 0.75rem;
		}
	}
}