/* ==========================================================================
   EXAM SERVICE PAGE (2026) - /exams only
   Loaded by exams.asp after exams.css. Every rule is scoped to .cl-exams,
   so nothing here can reach the other pages that share exams.css.

	1. Tokens
	2. Base
	3. Hero
	4. Why book with us
	5. Exam centres (map, table, notice)
	6. Book your exams (routes)

   Breakpoints (max-width): 1180 small laptop, 1080 mobile header,
   980 tablet, 640 phone - the same widths as course-shared-24.css.
   ========================================================================== */


/* 1. Tokens ------------------------------------------------------------ */

.cl-exams {
	--fs-title:clamp(2.1rem, 1.3rem + 2.7vw, 3.5rem);	/* section titles, same as .cp-page */
	--fs-subtitle:clamp(1.5rem, 1.2rem + 0.9vw, 2rem);	/* sub-headings, same as .cp-page */
	--fs-lead:clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);	/* NEW: hero intro line */
	--fs-h4:clamp(1.2rem, 1.1rem + 0.35vw, 1.5rem);	/* card titles, same as .cp-page */
	--fs-body:clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);	/* paragraphs, same as .cp-page */
	--fs-small:clamp(1rem, 0.95rem + 0.15vw, 1.0625rem);	/* labels, table headings */
	--fs-button:clamp(1rem, 0.95rem + 0.25vw, 1.2rem);	/* buttons, same as .cp-page */
	--lh-title:1.1;	/* titles */
	--lh-heading:1.25;	/* sub-headings */
	--lh-body:1.55;	/* body copy */
	--space-section:clamp(3rem, 1.9rem + 4.4vw, 5.5rem);	/* between sections */
	--space-title:clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);	/* below a title */
	--card-pad:clamp(1.5rem, 0.8rem + 3vw, 3.5rem);	/* inside panels */
	--ex-accent:var(--theme-color2);	/* turquoise, for decoration only (borders, underlines) - 2.4:1 on white */
	--ex-ink:#18787f;	/* NEW: dark turquoise for text and icons, 5.2:1 on white and 4.8:1 on the hero panel */
	--ex-soft:#e8f6f7;	/* NEW: light turquoise tint for the table header, icon circles and notice */
	--ex-panel:#f6f6f6;	/* hero panel - change to #fff if the hero image is not transparent */
	--ex-line:#e6e6e6;	/* borders and dividers */
	--ex-gcse-ink:#c43d69;	/* darker magenta for outline buttons, 5:1 on white */
	--ex-header-offset:7rem;	/* anchor offset for the fixed header */
}


/* 2. Base ------------------------------------------------------------- */

.cl-exams { display:block; font-family:var(--theme-font1); color:#46494b; }
.cl-exams p { font-size:var(--fs-body); line-height:var(--lh-body); padding:0 0 0.8em; }
.cl-exams a:focus-visible { outline:2px solid var(--theme-color2); outline-offset:3px; }
.cl-exams .btn-brick { font-size:var(--fs-button); }
.cl-exams .btn-brick.outline-magenta { color:var(--ex-gcse-ink); border-color:var(--ex-gcse-ink); }
.cl-exams .cl-exams-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap; }
.cl-exams .cl-exams-centres,
.cl-exams .cl-exams-book { scroll-margin-top:var(--ex-header-offset); }

@media screen and (max-width:1080px){
	.cl-exams { --ex-header-offset:5rem; }
}


/* 3. Hero ------------------------------------------------------------- */

.cl-exams .cl-exams-hero { margin:clamp(2.5rem, 1rem + 3.5vw, 4.5rem) 0 var(--space-section); }
.cl-exams .cl-exams-hero-panel { display:grid; grid-template-columns:minmax(0, 46fr) minmax(0, 54fr); align-items:end; column-gap:clamp(1.5rem, 3vw, 4rem); background:var(--ex-panel); border-radius:1.5rem; }
.cl-exams .cl-exams-hero-media { margin:-3.5rem 0 0; padding:0 0 0 clamp(1rem, 2vw, 2.5rem); }
.cl-exams .cl-exams-hero-media img { display:block; width:100%; max-width:640px; height:auto; margin:0 auto; }
.cl-exams .cl-exams-hero-text { align-self:center; padding:var(--card-pad) var(--card-pad) var(--card-pad) 0; }
.cl-exams .cl-exams-hero-label { font-size:var(--fs-small); font-weight:700; line-height:1.3; color:var(--ex-ink); padding:0 0 0.75rem; }
.cl-exams .cl-exams-hero-title { font-size:var(--fs-title); font-weight:700; line-height:var(--lh-title); letter-spacing:-0.01em; text-wrap:balance; color:var(--theme-color1); padding:0 0 var(--space-title); }
.cl-exams .cl-exams-hero-lead { max-width:30em; font-size:var(--fs-lead); line-height:1.4; color:var(--theme-color1); padding:0 0 1.5rem; }
.cl-exams .cl-exams-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; }
.cl-exams .cl-exams-hero-link { font-size:var(--fs-button); font-weight:600; color:var(--theme-color1); text-decoration:underline; text-decoration-color:var(--ex-accent); text-decoration-thickness:2px; text-underline-offset:0.3em; }
.cl-exams .cl-exams-hero-link:hover { color:var(--ex-ink); }

@media screen and (max-width:980px){
	.cl-exams .cl-exams-hero { margin-top:1.5rem; }
	.cl-exams .cl-exams-hero-panel { grid-template-columns:minmax(0, 1fr); }
	.cl-exams .cl-exams-hero-text { order:-1; padding:var(--card-pad) var(--card-pad) 1rem; }
	.cl-exams .cl-exams-hero-media { margin:0; padding:0 var(--card-pad); }
	.cl-exams .cl-exams-hero-media img { max-width:30rem; }
}

@media screen and (max-width:640px){
	.cl-exams .cl-exams-hero-panel { border-radius:1rem; }
	.cl-exams .cl-exams-hero-actions .btn-brick { flex:1 1 100%; }
}


/* 4. Why book with us ------------------------------------------------- */

.cl-exams .cl-exams-why { margin:0 0 var(--space-section); }
.cl-exams .cl-exams-why-title { font-size:var(--fs-subtitle); font-weight:700; line-height:var(--lh-heading); color:var(--theme-color1); padding:0 0 clamp(1.25rem, 2vw, 2rem); }
.cl-exams .cl-exams-why-list { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); list-style:none; margin:0; padding:0; }
.cl-exams .cl-exams-why-item { margin:0; padding:0 clamp(1.25rem, 2.5vw, 3rem); border-left:1px solid var(--ex-line); }
.cl-exams .cl-exams-why-item:first-child { padding-left:0; border-left:0; }
.cl-exams .cl-exams-why-item:last-child { padding-right:0; }
.cl-exams .cl-exams-why-icon { display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; margin:0 0 1rem; border-radius:50%; background:var(--ex-soft); color:var(--ex-ink); font-size:1.3rem; }
.cl-exams .cl-exams-why-item h3 { font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-heading); color:var(--theme-color1); padding:0 0 0.5rem; }
.cl-exams .cl-exams-why-item p { padding:0; }

@media screen and (max-width:980px){
	.cl-exams .cl-exams-why-list { grid-template-columns:minmax(0, 1fr); }
	.cl-exams .cl-exams-why-item,
	.cl-exams .cl-exams-why-item:first-child,
	.cl-exams .cl-exams-why-item:last-child { display:grid; grid-template-columns:3rem minmax(0, 1fr); column-gap:1.25rem; padding:1.25rem 0; border-left:0; border-top:1px solid var(--ex-line); }
	.cl-exams .cl-exams-why-item:first-child { padding-top:0; border-top:0; }
	.cl-exams .cl-exams-why-icon { grid-row:span 2; margin:0; }
}


/* 5. Exam centres ----------------------------------------------------- */

.cl-exams .cl-exams-centres { margin:0 0 var(--space-section); }
.cl-exams .cl-exams-centres-grid { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); grid-template-rows:auto 1fr; grid-template-areas:"map head" "map body"; column-gap:clamp(2rem, 5vw, 6rem); }
.cl-exams .cl-exams-centres-head { grid-area:head; }
.cl-exams .cl-exams-centres-body { grid-area:body; }
.cl-exams .cl-exams-centres-map { grid-area:map; align-self:start; position:sticky; top:var(--ex-header-offset); }
.cl-exams .cl-exams-centres-map img { display:block; width:100%; max-width:500px; height:auto; margin:0 auto; }
.cl-exams .cl-exams-centres-title { font-size:var(--fs-title); font-weight:700; line-height:var(--lh-title); letter-spacing:-0.01em; text-wrap:balance; color:var(--theme-color1); padding:0 0 var(--space-title); }
.cl-exams .cl-exams-centres-head p { max-width:36em; }

/* centre table (the explicit borders and padding also cancel the unscoped "table th" rule in exams.css) */
.cl-exams .cl-exams-table-wrap { margin:0.75rem 0 1.5rem; border:1px solid var(--ex-line); border-radius:1rem; overflow:hidden; }
.cl-exams .cl-exams-table { width:100%; margin:0; border-collapse:collapse; font-size:var(--fs-body); line-height:1.3; color:var(--theme-color1); }
.cl-exams .cl-exams-table th,
.cl-exams .cl-exams-table td { padding:0.8rem 1.25rem; border:0; border-top:1px solid var(--ex-line); text-align:center; vertical-align:middle; }
.cl-exams .cl-exams-table thead th { border-top:0; background:var(--ex-soft); font-size:var(--fs-small); font-weight:700; }
.cl-exams .cl-exams-table th:first-child { text-align:left; }
.cl-exams .cl-exams-table tbody th { font-weight:600; }
.cl-exams .cl-exams-yes,
.cl-exams .cl-exams-no { display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; border-radius:50%; font-family:FontAwesome; font-size:0.85rem; line-height:1; }
.cl-exams .cl-exams-yes { background:var(--ex-ink); color:#fff; }
.cl-exams .cl-exams-yes::before { content:"\f00c"; content:"\f00c" / ""; }
.cl-exams .cl-exams-no { color:#707070; }
.cl-exams .cl-exams-no::before { content:"\f068"; content:"\f068" / ""; }

/* booking notice */
.cl-exams .cl-exams-notice { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:1rem; padding:clamp(1.25rem, 2vw, 1.75rem); background:var(--ex-soft); border-left:4px solid var(--ex-accent); border-radius:0 1rem 1rem 0; }
.cl-exams .cl-exams-notice-icon { font-size:1.5rem; line-height:1.2; color:var(--ex-ink); }
.cl-exams .cl-exams-notice h3 { font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-heading); color:var(--theme-color1); padding:0 0 0.5rem; }
.cl-exams .cl-exams-notice ul { margin:0; padding:0 0 0 1.1em; }
.cl-exams .cl-exams-notice li { margin:0 0 0.4em; font-size:var(--fs-body); line-height:var(--lh-body); color:var(--theme-color1); }
.cl-exams .cl-exams-notice li:last-child { margin-bottom:0; }

@media screen and (max-width:980px){
	.cl-exams .cl-exams-centres-grid { grid-template-columns:minmax(0, 1fr); grid-template-rows:auto; grid-template-areas:"head" "map" "body"; }
	.cl-exams .cl-exams-centres-map { position:static; margin:0.5rem 0 1.5rem; }
	.cl-exams .cl-exams-centres-map img { max-width:24rem; }
}

@media screen and (max-width:640px){
	.cl-exams .cl-exams-table th,
	.cl-exams .cl-exams-table td { padding:0.75rem 0.6rem; }
	.cl-exams .cl-exams-table th:first-child { padding-left:1rem; }
}


/* 6. Book your exams -------------------------------------------------- */

.cl-exams .cl-exams-book { margin:0 0 var(--space-section); }
.cl-exams .cl-exams-book-title { font-size:var(--fs-title); font-weight:700; line-height:var(--lh-title); letter-spacing:-0.01em; text-align:center; color:var(--theme-color1); padding:0 0 var(--space-title); }
.cl-exams .cl-exams-book-intro { max-width:34em; margin:0 auto; text-align:center; padding-bottom:clamp(1.5rem, 3vw, 2.5rem); }
.cl-exams .cl-exams-routes { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(1rem, 2vw, 2rem); }
.cl-exams .cl-exams-route { display:flex; flex-direction:column; padding:var(--card-pad); border-radius:1.5rem; }
.cl-exams .cl-exams-route-direct { background:var(--theme-color5); background:var(--theme-gradient5); }
.cl-exams .cl-exams-route-course { background:#fff; border:2px solid var(--ex-line); }
.cl-exams .cl-exams-route h3 { font-size:var(--fs-subtitle); font-weight:700; line-height:var(--lh-heading); color:var(--theme-color1); padding:0 0 0.6rem; }
.cl-exams .cl-exams-route p { max-width:32em; }
.cl-exams .cl-exams-route-direct h3,
.cl-exams .cl-exams-route-direct p { color:#fff; }
.cl-exams .cl-exams-route-actions { display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:auto; padding:1rem 0 0; }
.cl-exams .cl-exams-help { text-align:center; padding:clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.cl-exams .cl-exams-help a { font-weight:700; color:var(--theme-color1); text-decoration:underline; text-decoration-color:var(--ex-accent); text-decoration-thickness:2px; text-underline-offset:0.2em; }
.cl-exams .cl-exams-help a:hover { color:var(--ex-ink); }

@media screen and (max-width:980px){
	.cl-exams .cl-exams-routes { grid-template-columns:minmax(0, 1fr); }
}

@media screen and (max-width:640px){
	.cl-exams .cl-exams-route { border-radius:1rem; }
	.cl-exams .cl-exams-route-actions .btn-brick { flex:1 1 100%; }
}