/* ==========================================================================
   COURSE PAGES - SHARED
   Loaded by both course templates, after _layout.css and before the page file:
	 productinfo.asp  >  course-shared-24.css  >  course-page-24.css
	 products.asp     >  course-shared-24.css  >  course-cat-lander-24.css
   Both templates add .cp-page to <body>. Change a token or a shared block here
   and it updates course pages and category pages together.

	 1. Tokens - type scale, spacing, theme accent
	 2. Scroll reveal + decorative motion
	 3. Base typography
	 4. Section rhythm + titles
	 5. Accordions
	 6. USP grid
	 7. Resit campaign
	 8. Price match
	 9. Parents + Uni prep
	10. Callback form

   Breakpoints (max-width): 1380 narrow desktop, 1180 small laptop,
   980 tablet, 640 phone, 400 small phone.
   Note: _layout.css drops the root font size to 15px at 450px and below,
   so every rem value below scales down with it on phones.
   ========================================================================== */



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

.cp-page {
	/* type scale - each step scales fluidly between phone and desktop */
	--fs-title:clamp(2.1rem, 1.3rem + 2.7vw, 3.5rem);		/* section titles      31px > 56px */
	--fs-subtitle:clamp(1.5rem, 1.2rem + 0.9vw, 2rem);		/* sub-headings        22px > 32px */
	--fs-h4:clamp(1.2rem, 1.1rem + 0.35vw, 1.5rem);		/* card + list titles  18px > 23px */
	--fs-body:clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);	/* paragraphs          16px > 20px */
	--fs-small:clamp(1rem, 0.95rem + 0.15vw, 1.0625rem);	/* notes, meta, tables 15px > 17px */
	--fs-button:clamp(1rem, 0.95rem + 0.25vw, 1.2rem);		/* buttons             15px > 19px */
	--fs-price:clamp(2.6rem, 2rem + 1.6vw, 3.5rem);		/* large prices        39px > 56px */

	--lh-title:1.1;
	--lh-heading:1.25;
	--lh-body:1.55;

	/* spacing */
	--space-section:clamp(3rem, 1.9rem + 4.4vw, 5.5rem);	/* between page sections  45px > 88px */
	--space-title:clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);	/* below a title          11px > 20px */
	--card-pad:clamp(1.5rem, 0.8rem + 3vw, 3.5rem);		/* inside inset cards     22px > 56px */
	--gutter:max(3%, 1.25rem, calc((100% - 1720px) / 2));	/* matches .fw */

	/* theme accent - turquoise fallback (search results), overridden per qualification below */
	--accent:var(--theme-color2);
	--accent-rgb:var(--theme-color2-rgb);
	--accent-ink:#1f8f99;			/* accent for small text on white (4.5:1 contrast) */
	--accent-gradient:var(--theme-gradient2);
	--accent-bubbles:none;

	font-family:var(--theme-font1);
	font-style:normal;
}

.cp-page.gcse {
	--accent:var(--theme-color3);
	--accent-rgb:var(--theme-color3-rgb);
	--accent-ink:#c43d69;
	--accent-gradient:var(--theme-gradient3);
	--accent-bubbles:url("/pix/blob-bubbles-red.svg?v2");
}

.cp-page.a-level,
.cp-page.cat-pathways {
	--accent:var(--theme-color4);
	--accent-rgb:var(--theme-color4-rgb);
	--accent-ink:var(--theme-color4);
	--accent-gradient:var(--theme-gradient4);
	--accent-bubbles:url("/pix/blob-bubbles-blue.svg?v2");
}



/* 2. Scroll reveal + decorative motion
   One fade-up for every .animate block. The inline script at the foot of each template
   adds .reveal-ready to <html>, marks anything already on screen at load with .no-anim
   (so nothing above the fold moves) and adds .in-view to the rest as it scrolls in.
   Without the script, or with reduced motion, nothing is hidden.
   Each page file sets its own --reveal-delay stagger for side-by-side blocks.
   ========================================================================== */

@keyframes cp-reveal { from { opacity:0; transform:translate3d(0, 1.5rem, 0); } to { opacity:1; transform:none; } }
@keyframes float { 0% { transform:translatey(0); } 50% { transform:translatey(-20px); } 100% { transform:translatey(0); } }
@keyframes rotation { from { transform:rotate(0deg); } to { transform:rotate(359deg); } }
@keyframes rotation-reverse { from { transform:rotate(0deg); } to { transform:rotate(-359deg); } }

@media screen and (prefers-reduced-motion:no-preference) {
	.reveal-ready .animate:not(.in-view) { opacity:0; }
	.reveal-ready .animate.in-view:not(.no-anim) { animation:cp-reveal 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s) backwards; }

	.rotate { animation:rotation 90s infinite linear; }
	.rotate-reverse { animation:rotation-reverse 90s infinite linear; }
	.floating { transform:translatey(0); animation:float 6s ease-in-out infinite; }
}



/* 3. Base typography
   Defaults for anything without its own rule, including CMS-fed content.
   ========================================================================== */

#pcontent { display:none; }

h1, h2, h3, h4, h5, p { font-family:var(--theme-font1); font-style:normal; color:var(--theme-color1); margin:0; }
h1, h2, h3, h4, h5 { text-wrap:balance; }

h1 { font-size:var(--fs-title); font-weight:700; line-height:var(--lh-title); padding:0 0 var(--space-title); }
h2 { font-size:var(--fs-title); font-weight:700; line-height:var(--lh-title); padding:0 0 var(--space-title); letter-spacing:-0.01em; }
h3 { font-size:var(--fs-subtitle); font-weight:400; line-height:var(--lh-heading); padding:0 0 var(--space-title); }
h4 { font-size:var(--fs-h4); font-weight:600; line-height:var(--lh-heading); padding:0 0 0.75rem; }
h5 { font-size:var(--fs-body); font-weight:700; line-height:var(--lh-heading); padding:0 0 0.75rem; }
p  { font-size:var(--fs-body); font-weight:400; line-height:var(--lh-body); padding:0 0 0.8em; }

a.btn-brick,
button.btn-brick { font-size:var(--fs-button); }

.gradient-text { background-color:var(--accent); background-image:var(--accent-gradient); background-size:100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }



/* 4. Section rhythm + titles
   ========================================================================== */

/* every block below the page header is spaced the same way (each template uses its own subset) */
.cp-page .pass-rate,
.cp-page .usp-area2,
.cp-page .faqs,
.cp-page .alex-advert,
.cp-page .volume-discounts,
.cp-page .resit-area,
.cp-page .student-testimonial,
.cp-page .parent-resources,
.cp-page .faqs2,
.cp-page .latest-tech,
.cp-page .callback-area,
.cp-page .course-item-feed,
.cp-page .feed-courses,
.cp-page .course-list-area,
.cp-page .price-match,
.cp-page .search-header,
.cp-page .no-results { margin:0 0 var(--space-section); padding:0; }

.cp-page .cp-title { font-size:var(--fs-title); font-weight:700; line-height:var(--lh-title); letter-spacing:-0.01em; margin:0; padding:0 0 var(--space-title); }
.cp-page .cp-subtitle { font-size:var(--fs-subtitle); font-weight:400; line-height:var(--lh-heading); margin:0; padding:0 0 var(--space-title); }
.cp-page .cp-eyebrow { font-size:var(--fs-small); font-weight:700; line-height:1.3; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-ink); margin:0; padding:0 0 0.6rem; }

/* jump-link anchors, offset for the fixed header */
#usp-scroll-point,
#uni-prep-3,
#courses-scroll-point { position:absolute; margin-top:-70px; }



/* 5. Accordions  (course info, course FAQs, category FAQs)
   ========================================================================== */

.cp-page #accordion .accord-wrap { background:#f6f6f6; border:2px solid var(--theme-color1); border-radius:3rem; margin:0 0 0.75rem; padding:0; }
.cp-page #accordion .accord-wrap:last-child { margin-bottom:0; }
.cp-page #accordion .accord-wrap .accordion-toggle { position:relative; display:flex; align-items:center; gap:0.75rem; background:none; color:var(--theme-color1); font-size:var(--fs-h4); font-weight:700; line-height:var(--lh-heading); text-indent:0; cursor:pointer; margin:0; padding:1.4rem 4rem 1.4rem 2rem; }
.cp-page #accordion .accord-wrap .accordion-toggle::before { content:"\f107"; position:absolute; top:50%; right:2rem; display:block; font-family:FontAwesome; font-size:1.4rem; color:var(--accent); transform:translateY(-50%); transition:transform 0.4s ease-in-out; }
.cp-page #accordion .accord-wrap .accordion-toggle.active::before { transform:translateY(-50%) rotate(180deg); }
.cp-page #accordion .accord-wrap .accordion-toggle .fa { flex:0 0 1.25em; text-align:center; color:var(--accent); }
.cp-page #accordion .accord-wrap .accordion-toggle .accordion-icon { flex:0 0 1.25em; height:1.25em; background-color:var(--accent); -webkit-mask:no-repeat center / contain; mask:no-repeat center / contain; }
.cp-page #accordion .accord-wrap .accordion-toggle .accordion-icon.icon-alex { -webkit-mask-image:url(/pix/robot-icon.svg); mask-image:url(/pix/robot-icon.svg); }
.cp-page #accordion .accord-wrap .accordion-toggle .accordion-icon.icon-interactive { -webkit-mask-image:url(/pix/tools-icon.svg); mask-image:url(/pix/tools-icon.svg); }

.cp-page #accordion .accord-wrap .accordion-content { color:var(--theme-color1); font-size:var(--fs-body); line-height:var(--lh-body); margin:0; padding:0 2rem 2rem; }
.cp-page #accordion .accord-wrap .accordion-content p { padding:0 0 0.8em; }
.cp-page #accordion .accord-wrap .accordion-content > :last-child { padding-bottom:0; margin-bottom:0; }
.cp-page #accordion .accord-wrap .accordion-content h4 { padding:0.5rem 0 0.5rem; }
.cp-page #accordion .accord-wrap .accordion-content ul { list-style:none; margin:0 0 0.8em; padding:0; }
.cp-page #accordion .accord-wrap .accordion-content ul li { margin:0.3em 0 0.3em 2em; }
.cp-page #accordion .accord-wrap .accordion-content ul li::before { content:"\f058"; font-family:FontAwesome; float:left; margin-left:-1.5em; color:var(--accent); }
.cp-page #accordion .accord-wrap .accordion-content a { color:var(--accent-ink); }
.cp-page #accordion .accord-wrap .accordion-content iframe { display:block; max-width:100%; margin:0.5rem 0 1rem; }

@media screen and (max-width:640px) {
	.cp-page #accordion .accord-wrap { border-radius:2rem; }
	.cp-page #accordion .accord-wrap .accordion-toggle { padding:1.1rem 3.25rem 1.1rem 1.4rem; }
	.cp-page #accordion .accord-wrap .accordion-toggle::before { right:1.4rem; }
	.cp-page #accordion .accord-wrap .accordion-content { padding:0 1.4rem 1.5rem; }
}



/* 6. USP grid  (page files set the icon size, text and phone layout)
   ========================================================================== */

.usp-area2 .flex-container { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:2rem 3rem; }
.usp-area2 .stat-box { text-align:left; }
.usp-area2 .ico-wrap { position:relative; width:90px; height:90px; margin:0 0 1.5rem; }
.usp-area2 .ico-wrap img.back-blob,
.usp-area2 .ico-wrap img.front-blob { position:absolute; top:0; left:0; width:100%; height:auto; }
.usp-area2 .ico-wrap img.back-blob { z-index:1; }
.usp-area2 .ico-wrap img.front-blob { z-index:2; }
.usp-area2 .ico-wrap img.icon { position:relative; z-index:3; display:block; max-width:75px; margin:0 auto; padding-top:15px; }

@media screen and (max-width:980px) {
	.usp-area2 .flex-container { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:2.5rem 2rem; }
}



/* 7. Resit campaign  (base styles in _layout.css)
   ========================================================================== */

.cp-page .resit-campaign { margin:0; }
.cp-page .resit-campaign .hero-content { padding:var(--card-pad); }
.cp-page .resit-campaign .hero-content h2 { color:#fff; font-size:var(--fs-title); line-height:var(--lh-title); max-width:22ch; padding:0 0 var(--space-title); }
.cp-page .resit-campaign .hero-content p.resit-lead { color:#fff; font-size:var(--fs-subtitle); line-height:var(--lh-heading); max-width:32ch; margin:0; padding:0; }
.cp-page .resit-campaign .hero-content p.resit-lead strong { white-space:nowrap; }
.cp-page .resit-campaign .hero-content a.btn-brick { margin:clamp(1.25rem, 1rem + 1vw, 2rem) 0 0; }



/* 8. Price match
   ========================================================================== */

.price-match { background:var(--accent-bubbles) no-repeat left 2% center / 8%; }
.price-match .flex-container { display:flex; align-items:center; gap:9%; width:100%; max-width:1100px; margin:0 auto; }
.price-match .badge-area { position:relative; flex:0 0 25%; }
.price-match .badge-area img { display:block; }
.price-match .badge-area img.text { position:relative; width:100%; }
.price-match .badge-area img.back-blob { position:absolute; width:56%; left:22%; top:22%; }
.price-match .badge-area img.front-blob { position:absolute; width:56%; left:20%; top:20%; }
.price-match .badge-area img.badge { position:absolute; width:51%; left:24.5%; top:24.5%; }
.price-match .badge-area img.tick { position:absolute; width:31.5%; left:34.25%; top:33.7%; }
.price-match .text-area { flex:1 1 auto; }
.price-match .text-area h2 { font-size:var(--fs-subtitle); font-weight:400; line-height:var(--lh-heading); letter-spacing:0; }
.price-match .text-area h2 span,
.price-match .text-area h2 strong { font-weight:700; }
.price-match .text-area p { padding:0; }

@media screen and (max-width:1380px) {
	.price-match { background:none; }
}

@media screen and (max-width:980px) {
	.price-match .flex-container { display:block; text-align:center; }
	.price-match .badge-area { width:100%; max-width:290px; margin:0 auto 2rem; }
}



/* 9. Parents + Uni prep  (image and text side by side; the image always leads when stacked)
   ========================================================================== */

.parent-resources .flex-container { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(2rem, 5vw, 5rem); align-items:center; }
.parent-resources .flex-container .text:first-child { grid-column:1; grid-row:1; }
.parent-resources .flex-container .text:first-child + .decor { grid-column:2; grid-row:1; }
.parent-resources .decor { position:relative; z-index:2; }
.parent-resources .decor img { display:block; width:100%; }
.parent-resources .text p { padding:0 0 1.2em; }
.parent-resources .text .btn-brick { margin-top:0.25rem; }

@media screen and (max-width:980px) {
	.parent-resources .flex-container { grid-template-columns:minmax(0, 1fr); gap:1.5rem; }
	.parent-resources .flex-container .text:first-child { grid-row:2; }
	.parent-resources .flex-container .text:first-child + .decor { grid-column:1; grid-row:1; }
	.parent-resources .decor { width:100%; max-width:26rem; margin:0 auto; }
}



/* 10. Callback form  (left half of .double-box; each page file styles the right half)
   ========================================================================== */

.double-box { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); overflow:hidden; }
.double-box .callback { background:var(--accent); background:var(--accent-gradient); padding:var(--card-pad); }
.double-box .callback .inner { max-width:40rem; }
.double-box .callback h2 { color:#fff; }
.double-box .callback p { color:#fff; padding:0 0 1.5rem; }
.double-box .callback input,
.double-box .callback textarea { display:block; width:100%; border:none; border-radius:25px; font-size:var(--fs-body); font-style:normal; margin-bottom:1rem; padding:0.7rem 1.3rem; }
.double-box .callback textarea { height:10rem; resize:none; }
.double-box .callback input#DataConsent { display:inline; width:auto; border-radius:0; margin:0 0.4rem 0 0; padding:0; }
.double-box .callback label { display:block; color:#fff; font-size:var(--fs-small); line-height:1.5; margin-bottom:1rem; }
.double-box .callback label a { color:#fff; }
.double-box .callback label a:hover { color:var(--theme-color1); }
.double-box .callback .g-recaptcha { margin:0.5rem 0 1.25rem; }
.double-box .callback button { display:inline-block; border:none; border-radius:25px; background:#3d3f41; color:#fff; font-size:var(--fs-button); font-style:normal; padding:0.7rem 1.3rem; }

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