/* ==========================================================================
   Two Column Module — Figma 5993:1008 "Text 2 columns"
   docs/TWO-COLUMN-MODULE-AUDIT.md

   Ships inside the live cascade (dist/style.css + dev.css), so every rule here
   is scoped under .two-column-module. That out-specifies the live
   `.redactor-styles x` rules (0,1,1) and leaves the rest of the site untouched.

   1. Tokens   2. Layout   3. Rich text   4. Link styles   5. Link tile
   6. Lightbox   7. Responsive   8. Reduced motion
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

.two-column-module,
.tcm-lightbox {
	--tcm-purple:   #391b76;   /* tile label bar, link text + icons */
	--tcm-heading:  #2a2671;   /* rich-text headings */
	--tcm-body:     #290000;   /* rich-text body (client-confirmed, Figma value) */
	--tcm-lavender: #d7d6e9;   /* link-style circles */
	--tcm-white:    #ffffff;

	--tcm-font-head: "Tenor Sans", serif;
	--tcm-font-body: "Poppins", sans-serif;

	--tcm-ease: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out, as find-school */
}


/* 2. Layout
   Figma at 1920: 50px gutters, three equal 573.33px columns with 50px gaps,
   left spans two (1196.67px). No background: the module sits on the page's white
   (the grey band sampled from the static Figma render was removed after client QA
   against the Figma prototype preview, 2026-10-20).
   ========================================================================== */

.two-column-module {
	padding: 88px 50px 82px;   /* banner bottom 845.8 → first tile 933.4 · last link → footer 82 */
	overflow: hidden;
}

/* Figma puts the footer 82px under the last link — the module's own bottom padding.
   Live adds a site-wide #footer top margin (70px, 35px on mobile) on top of that.
   Drop it only when this module is the very last thing before the footer — no CTA
   banner or Read Next in between. Other pages are unaffected. */
#general-page:has(> .page-content:last-child > .two-column-module:last-child) + #footer {
	margin-top: 0;
}

.tcm-grid {
	display: grid;
	/* minmax(0, …) so a long URL or a wide table can't push a column past the viewport */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 50px;
	align-items: start;
	max-width: 1820px;
	margin: 0 auto;
}

.tcm-main {
	grid-column: span 2;
	padding-top: 13px;   /* heading box sits 13px below the first tile in Figma */
}

/* No right-column blocks: the text takes the full width */
.tcm-main:only-child {
	grid-column: 1 / -1;
}

.tcm-aside {
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	flex-direction: column;
	gap: 29px;
	min-width: 0;
}

/* A text block sits 45px under the tile above it, not 29px */
.tcm-aside > .tcm-text {
	padding-top: 16px;
}


/* 3. Rich text
   Figma headings are 32px Tenor Sans, the same as the live .redactor-styles h3,
   so editors pick Heading 3. Only colour, rhythm and body face change here.
   ========================================================================== */

.two-column-module .redactor-styles {
	font-family: var(--tcm-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.665;
	letter-spacing: 0.035em;
	color: var(--tcm-body);
}

.two-column-module .redactor-styles :is(h1, h2, h3, h4, h5, h6) {
	color: var(--tcm-heading);
}

.two-column-module .redactor-styles h3 {
	font-family: var(--tcm-font-head);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.665;
	letter-spacing: 0.035em;
	margin: 0 0 31px;
}

/* Rhythm is measured line-centre to line-centre in Figma (70.6 heading→para,
   50.8 para→para, 73.4 para→heading). Figma gives each paragraph's first line a
   2.17 leading, which is drawing noise; these margins reproduce the centres at a
   uniform 1.665. Collapses with the paragraph's 24px bottom margin to leave 33px. */
.two-column-module .redactor-styles * + :is(h2, h3, h4) {
	margin-top: 33px;
}

.two-column-module .redactor-styles :is(p, ul, ol, blockquote) {
	margin: 0 0 24px;
}

.two-column-module .redactor-styles > :last-child {
	margin-bottom: 0;
}

.two-column-module .redactor-styles :is(strong, b) {
	font-weight: 700;
}

/* Plain inline links: DNA3 purple instead of the live Bootstrap blue */
.two-column-module .redactor-styles a {
	color: var(--tcm-purple);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.two-column-module .redactor-styles a:hover {
	color: var(--tcm-heading);
	text-decoration-thickness: 2px;
}


/* 4. Link styles — applied in CKEditor as classes on <a>
   CKEditor can add a class but not markup, so the circle is ::before and the
   icon is ::after, drawn with an SVG mask filled by currentColor.
   ========================================================================== */

.two-column-module .redactor-styles :is(a.link-button, a.link-document) {
	position: relative;
	display: -webkit-inline-box;
	display: inline-flex;
	-webkit-box-align: center;
	align-items: center;
	vertical-align: top;   /* baseline alignment adds ~8px of descender space under each row */
	border: 0;             /* live global `a { border: 1px solid transparent }` */
	font-family: var(--tcm-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--tcm-purple);
	text-decoration: none;
}

.two-column-module .redactor-styles :is(a.link-button, a.link-document)::before,
.two-column-module .redactor-styles :is(a.link-button, a.link-document)::after {
	content: "";
	-webkit-transition: background-color 0.3s ease, border-color 0.3s ease, -webkit-transform 0.3s var(--tcm-ease);
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--tcm-ease);
}

.two-column-module .redactor-styles :is(a.link-button, a.link-document)::before {
	-webkit-box-flex: 0;
	flex: 0 0 auto;
	box-sizing: border-box;
	border-radius: 50%;
}

.two-column-module .redactor-styles :is(a.link-button, a.link-document)::after {
	position: absolute;
	top: 50%;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* Button — 40px lavender ring, chevron, uppercase label 23.5px to the right */
.two-column-module .redactor-styles a.link-button {
	gap: 23.5px;
	text-transform: uppercase;
}

.two-column-module .redactor-styles a.link-button::before {
	width: 40px;
	height: 40px;
	border: 1px solid var(--tcm-lavender);
}

.two-column-module .redactor-styles a.link-button::after {
	left: 17.4px;   /* centred, +1px optical nudge as in Figma */
	width: 7.29px;
	height: 13.41px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.28557 13.414'%3E%3Cpath d='M1.411 13.414L0 12L5.289 6.707L0 1.414L1.415 0L6.7 5.293C7.07494 5.66806 7.28557 6.17667 7.28557 6.707C7.28557 7.23733 7.07494 7.74594 6.7 8.121L1.411 13.414Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.28557 13.414'%3E%3Cpath d='M1.411 13.414L0 12L5.289 6.707L0 1.414L1.415 0L6.7 5.293C7.07494 5.66806 7.28557 6.17667 7.28557 6.707C7.28557 7.23733 7.07494 7.74594 6.7 8.121L1.411 13.414Z'/%3E%3C/svg%3E");
}

.two-column-module .redactor-styles a.link-button:hover::before {
	background-color: var(--tcm-lavender);
}

.two-column-module .redactor-styles a.link-button:hover::after {
	-webkit-transform: translate(2px, -50%);
	transform: translate(2px, -50%);
}

/* Document — 53px lavender disc, document glyph, label 14.5px to the right */
.two-column-module .redactor-styles a.link-document {
	gap: 14.5px;
}

.two-column-module .redactor-styles a.link-document::before {
	width: 53px;
	height: 53px;
	background-color: var(--tcm-lavender);
}

.two-column-module .redactor-styles a.link-document::after {
	left: 13.97px;   /* (53 - 25.1) / 2 */
	width: 25.1px;
	height: 30.87px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.0968 30.8708' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.4354 1H3.88708C3.12138 1 2.38704 1.30417 1.84561 1.84561C1.30417 2.38704 1 3.12138 1 3.88708V26.9837C1 27.7494 1.30417 28.4838 1.84561 29.0252C2.38704 29.5667 3.12138 29.8708 3.88708 29.8708H21.2096C21.9753 29.8708 22.7096 29.5667 23.2511 29.0252C23.7925 28.4838 24.0967 27.7494 24.0967 26.9837V9.66125L15.4354 1Z'/%3E%3Cpath d='M15.4355 1V9.66125H24.0968'/%3E%3Cpath d='M18.3223 16.8789H6.77393'/%3E%3Cpath d='M18.3223 22.6533H6.77393'/%3E%3Cpath d='M9.66101 11.105H6.77393'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.0968 30.8708' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.4354 1H3.88708C3.12138 1 2.38704 1.30417 1.84561 1.84561C1.30417 2.38704 1 3.12138 1 3.88708V26.9837C1 27.7494 1.30417 28.4838 1.84561 29.0252C2.38704 29.5667 3.12138 29.8708 3.88708 29.8708H21.2096C21.9753 29.8708 22.7096 29.5667 23.2511 29.0252C23.7925 28.4838 24.0967 27.7494 24.0967 26.9837V9.66125L15.4354 1Z'/%3E%3Cpath d='M15.4355 1V9.66125H24.0968'/%3E%3Cpath d='M18.3223 16.8789H6.77393'/%3E%3Cpath d='M18.3223 22.6533H6.77393'/%3E%3Cpath d='M9.66101 11.105H6.77393'/%3E%3C/svg%3E");
}

.two-column-module .redactor-styles a.link-document:hover::before {
	background-color: var(--tcm-purple);
}

.two-column-module .redactor-styles a.link-document:hover::after {
	background-color: var(--tcm-white);
}

/* 4b. Link styles — live CMS markup
   Live dist/app.js rewrites every a.custom-ckeditor-button (column 1 Style dropdown) to
   <i class="v-middle"><svg chevron/></i><span class="v-middle">label</span>, and every
   a.custom-ckeditor-document to <i><svg document/></i><span> wrapped in
   div.p0.document-downloads. The column-2 nested entries are rendered server-side in the
   same shape (rich-text.twig). So on live the icon is a real <i>, not ::before/::after.

   These selectors also out-specify the live rules the classes drag in:
   .custom-link.dark (gold hover pill, growing arrow shaft), .page-content
   .document-downloads a (gold 53px disc, gold hover pill) and the global
   a { border: 1px solid transparent }.
   ========================================================================== */

.two-column-module .redactor-styles :is(a.custom-ckeditor-button, a.custom-ckeditor-document) {
	display: -webkit-inline-box;
	display: inline-flex;
	-webkit-box-align: center;
	align-items: center;
	vertical-align: top;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--tcm-font-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--tcm-purple);
	text-decoration: none;
}

.two-column-module .redactor-styles :is(a.custom-ckeditor-button, a.custom-ckeditor-document):hover {
	background: none;
	color: var(--tcm-purple);
}

.two-column-module .redactor-styles :is(a.custom-ckeditor-button, a.custom-ckeditor-document) i {
	display: -webkit-inline-box;
	display: inline-flex;
	-webkit-box-flex: 0;
	flex: 0 0 auto;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	color: var(--tcm-purple);
	-webkit-transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.two-column-module .redactor-styles :is(a.custom-ckeditor-button, a.custom-ckeditor-document) i svg {
	display: block;
	-webkit-transition: -webkit-transform 0.3s var(--tcm-ease);
	transition: transform 0.3s var(--tcm-ease);
}

.two-column-module .redactor-styles :is(a.custom-ckeditor-button, a.custom-ckeditor-document) span {
	display: inline;
	max-width: none;
}

/* Button — 40px lavender ring, chevron, uppercase label 23.5px to the right */
.two-column-module .redactor-styles a.custom-ckeditor-button {
	gap: 23.5px;
	text-transform: uppercase;
}

.two-column-module .redactor-styles a.custom-ckeditor-button i {
	width: 40px;
	height: 40px;
	border: 1px solid var(--tcm-lavender);
	background-color: transparent;
}

/* the live hover grows an arrow shaft out of this */
.two-column-module .redactor-styles a.custom-ckeditor-button i::before {
	display: none;
}

/* 9×15 artboard; the path itself is 7.29 × 13.41, the Figma chevron size */
.two-column-module .redactor-styles a.custom-ckeditor-button i svg {
	width: 9px;
	height: 15px;
	margin-left: 1px;   /* optical nudge, as in Figma */
}

.two-column-module .redactor-styles a.custom-ckeditor-button i svg path {
	fill: currentColor;
}

.two-column-module .redactor-styles a.custom-ckeditor-button:hover i {
	border-color: var(--tcm-lavender);
	background-color: var(--tcm-lavender);
}

.two-column-module .redactor-styles a.custom-ckeditor-button:hover i svg {
	-webkit-transform: translateX(2px);
	transform: translateX(2px);
}

/* Document — 53px lavender disc, document glyph, label 14.5px to the right */
.two-column-module .redactor-styles a.custom-ckeditor-document {
	gap: 14.5px;
	text-transform: none;
}

.two-column-module .redactor-styles a.custom-ckeditor-document i {
	width: 53px;
	height: 53px;
	border: 0;
	background-color: var(--tcm-lavender);
}

.two-column-module .redactor-styles a.custom-ckeditor-document i svg {
	width: 26px;
	height: 32px;
}

.two-column-module .redactor-styles a.custom-ckeditor-document i svg path {
	stroke: currentColor;
}

.two-column-module .redactor-styles a.custom-ckeditor-document:hover i {
	background-color: var(--tcm-purple);
	color: var(--tcm-white);
}

/* app.js wraps each document link in div.p0.document-downloads; live gives that 25px padding */
.two-column-module .redactor-styles .document-downloads {
	margin: 0;
	padding: 0;
}


/* Rhythm around link paragraphs: 39px after text, 30px between links.
   Margins collapse, so 39px top against the paragraph's 24px bottom gives 39.
   Descendant :has(), not child: app.js moves document links into a wrapper div. */
.two-column-module .redactor-styles p:has(:is(.link-button, .link-document, .custom-ckeditor-button, .custom-ckeditor-document)) {
	margin-bottom: 30px;
}

.two-column-module .redactor-styles * + p:has(:is(.link-button, .link-document, .custom-ckeditor-button, .custom-ckeditor-document)) {
	margin-top: 39px;
}

.two-column-module .redactor-styles p:has(:is(.link-button, .link-document, .custom-ckeditor-button, .custom-ckeditor-document)) + p:has(:is(.link-button, .link-document, .custom-ckeditor-button, .custom-ckeditor-document)) {
	margin-top: 0;
}

/* The last link row closes the column like any other last child */
.two-column-module .redactor-styles > p:has(:is(.link-button, .link-document, .custom-ckeditor-button, .custom-ckeditor-document)):last-child {
	margin-bottom: 0;
}


/* 5. Link tile
   Fill = 16:9 crop (573.79 × 322.5 in Figma). Fit = the image's own ratio.
   ========================================================================== */

/* border: 0 — live style.css has a global `a, button { border: 1px solid transparent }`,
   which shaves 2px off every tile (16:9 → 321.4px tall) and nudges the stack down 1px. */
.two-column-module .tcm-tile {
	display: block;
	border: 0;
	color: var(--tcm-white);
	text-decoration: none;
}

.tcm-tile__media {
	position: relative;
	display: block;
	overflow: hidden;
	background-color: var(--tcm-lavender);   /* shows only while the image loads */
}

.tcm-tile__media img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: -webkit-transform 0.6s var(--tcm-ease);
	transition: transform 0.6s var(--tcm-ease);
}

.tcm-tile--fill .tcm-tile__media {
	aspect-ratio: 16 / 9;
}

.tcm-tile--fill .tcm-tile__media img {
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

/* Gentle zoom (client-approved). Only on tiles that are actually links. */
a.tcm-tile:hover .tcm-tile__media img,
a.tcm-tile:focus-visible .tcm-tile__media img {
	-webkit-transform: scale(1.04);
	transform: scale(1.04);
}

.tcm-tile__label {
	display: block;
	padding: 15px 25px;   /* 70.14px bar = 40px line + 15 + 15 */
	background-color: var(--tcm-purple);
	font-family: var(--tcm-font-body);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.665;
	letter-spacing: 0.035em;
	color: var(--tcm-white);
}

/* Focus rings */
.two-column-module a.tcm-tile:focus-visible,
.two-column-module .redactor-styles a:focus-visible,
.tcm-lightbox__close:focus-visible {
	outline: 2px solid var(--tcm-purple);
	outline-offset: 4px;
}


/* 6. Lightbox — native <dialog>, built by two-column.js
   `open` governs presence; .is-open, added a frame later, drives the motion
   (a transition cannot run from display:none).
   ========================================================================== */

html.tcm-lock {
	overflow: hidden;
}

.tcm-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.tcm-lightbox[open] {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
}

.tcm-lightbox::backdrop {
	background-color: rgba(12, 6, 36, 0.86);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

.tcm-lightbox.is-open::backdrop {
	opacity: 1;
	-webkit-transition-duration: 0.55s;
	transition-duration: 0.55s;
}

.tcm-lightbox__inner {
	position: relative;
	/* as wide as fits: 1200px max, 50px gutters, and short enough for the close button */
	width: min(1200px, calc(100vw - 100px), calc((100vh - 160px) * 16 / 9));
	opacity: 0;
	-webkit-transform: translateY(26px) scale(0.972);
	transform: translateY(26px) scale(0.972);
	-webkit-transition: opacity 0.3s var(--tcm-ease), -webkit-transform 0.3s var(--tcm-ease);
	transition: opacity 0.3s var(--tcm-ease), transform 0.3s var(--tcm-ease);
}

.tcm-lightbox.is-open .tcm-lightbox__inner {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
	-webkit-transition-duration: 0.55s;
	transition-duration: 0.55s;
}

.tcm-lightbox__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: #000;
}

.tcm-lightbox__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Pill-style close, as the find-school detail panel. Icon is currentColor —
   the background inverts on hover, so a hardcoded stroke would vanish. */
.tcm-lightbox__close {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--tcm-lavender);
	color: var(--tcm-purple);
	cursor: pointer;
	-webkit-transition: background-color 0.3s ease, color 0.3s ease;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.tcm-lightbox__close:hover {
	background-color: var(--tcm-purple);
	color: var(--tcm-white);
}

.tcm-lightbox__close svg path {
	stroke: currentColor;
}


/* 7. Responsive — no mobile frames supplied.
   Client decision: on small screens the text column comes first, tiles below.
   ========================================================================== */

@media only screen and (max-width: 1199.98px) {
	.two-column-module {
		padding-right: 30px;
		padding-left: 30px;
	}

	.tcm-grid {
		column-gap: 30px;
	}
}

@media only screen and (max-width: 991.98px) {
	.tcm-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 50px;
	}

	.tcm-main {
		grid-column: auto;
		padding-top: 0;
	}

	/* A full-width 16:9 tile would be ~520px tall here; cap the column instead */
	.tcm-aside {
		max-width: 640px;
	}
}

@media only screen and (max-width: 767.98px) {
	.two-column-module {
		padding: 50px 17px;   /* 17px = live .full-text-editor */
	}

	.tcm-grid {
		row-gap: 40px;
	}

	.tcm-aside {
		gap: 20px;
	}

	.tcm-aside > .tcm-text {
		padding-top: 10px;
	}

	.two-column-module .redactor-styles h3 {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.two-column-module .redactor-styles * + :is(h2, h3, h4) {
		margin-top: 36px;
	}

	.tcm-tile__label {
		padding: 12px 20px;
		font-size: 18px;
	}

	.tcm-lightbox__inner {
		width: min(calc(100vw - 34px), calc((100vh - 140px) * 16 / 9));
	}
}


/* 8. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.tcm-tile__media img,
	.tcm-lightbox::backdrop,
	.tcm-lightbox__inner,
	.two-column-module .redactor-styles :is(a.link-button, a.link-document)::before,
	.two-column-module .redactor-styles :is(a.link-button, a.link-document)::after,
	.two-column-module .redactor-styles :is(a.custom-ckeditor-button, a.custom-ckeditor-document) i,
	.two-column-module .redactor-styles :is(a.custom-ckeditor-button, a.custom-ckeditor-document) i svg {
		-webkit-transition: none;
		transition: none;
	}

	a.tcm-tile:hover .tcm-tile__media img,
	a.tcm-tile:focus-visible .tcm-tile__media img {
		-webkit-transform: none;
		transform: none;
	}

	.tcm-lightbox__inner {
		-webkit-transform: none;
		transform: none;
	}
}