/**
 * JMAA Brand Kit - inner-page card layout.
 *
 * Applied where the body carries .jmaa-card-layout (Settings > Brand Kit).
 * Modelled on the high school's site: a white content card on a light grey
 * page, a breadcrumb trail across the top of the card, the page title, and
 * left-aligned copy at a readable measure. The banner photograph stays full
 * width above the card and loses its title, which now sits in the card.
 */

/* ---------- Page and card ------------------------------------------------ */

body.jmaa-card-layout {
	background: var(--jmaa-off-white, #ECECEC);
}

body.jmaa-card-layout .elementor {
	display: flex;
	flex-direction: column;
	max-width: 1120px;
	margin: 0 auto clamp(28px, 4vw, 56px);
	padding: 0 clamp(20px, 4vw, 54px) clamp(28px, 3vw, 44px);
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .10), 0 12px 32px rgba(0, 0, 0, .06);
}

/* 1.9.1: a page with no banner opens straight on the card, so the card gets
   a breathing space beneath the header. With a banner the photograph sits
   there instead, and the card stays flush against it. */
body.jmaa-card-layout .elementor:not(:has(> .e-con.jmaa-hero)) {
	margin-top: clamp(24px, 4vw, 44px);
}

/* ---------- Banner: full width above the card, photograph only ----------- */

body.jmaa-card-layout .elementor > .e-con.jmaa-hero {
	order: -1;
	width: 100vw;
	max-width: 100vw;
	margin: 0 0 clamp(24px, 3vw, 40px) calc(50% - 50vw);
	min-height: clamp(180px, 24vw, 300px);
	padding-block: 0 !important;
	border-radius: 0;
}

body.jmaa-card-layout .jmaa-hero > .elementor-widget-heading { display: none; }
body.jmaa-card-layout .jmaa-hero::after {
	background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.22) 100%);
}

/* ---------- Breadcrumbs and title ---------------------------------------- */

body.jmaa-card-layout .jmaa-page-intro {
	text-align: left;
	margin-bottom: 4px;
}

body.jmaa-card-layout .jmaa-breadcrumbs {
	font-size: .95rem;
	color: var(--jmaa-ink, #121212);
	margin: 0 0 12px;
}

body.jmaa-card-layout .jmaa-breadcrumbs a {
	color: var(--jmaa-ink, #121212);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--jmaa-gold-dark, #D99F00);
}

body.jmaa-card-layout .jmaa-breadcrumbs a:hover { color: var(--jmaa-gold-dark, #D99F00); }
body.jmaa-card-layout .jmaa-breadcrumbs__sep { margin: 0 .5em; color: var(--jmaa-grey, #A7A9AC); }

body.jmaa-card-layout .jmaa-page-title {
	margin: 0 0 22px;
	font-family: var(--jmaa-font-head, system-ui, sans-serif);
	font-size: clamp(1.7rem, 2.6vw, 2.25rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--jmaa-ink, #121212);
}

/* ---------- Content: left-aligned, readable measure ---------------------- */

body.jmaa-card-layout .elementor > .e-con:not(.jmaa-hero) {
	padding-block: 0 0 clamp(14px, 2vw, 22px) !important;
	padding-inline: 0 !important;
	text-align: left;
	align-items: flex-start;
	row-gap: 12px !important;
}

body.jmaa-card-layout .elementor-widget-text-editor {
	margin-inline: 0;
	/* The school's card fills most of its width; 94ch is about 820px here. */
	max-width: min(100%, 94ch) !important;
	font-size: 1.06rem;
	line-height: 1.6;
}

body.jmaa-card-layout .elementor-widget-text-editor p { margin-block: 0 1em; }

body.jmaa-card-layout .elementor-widget-text-editor a {
	color: var(--jmaa-ink, #121212);
	text-decoration: underline;
	text-decoration-color: var(--jmaa-gold-dark, #D99F00);
	text-underline-offset: 3px;
}

body.jmaa-card-layout .elementor-widget-text-editor a:hover { color: var(--jmaa-gold-dark, #D99F00); }

body.jmaa-card-layout .elementor-widget-text-editor ul,
body.jmaa-card-layout .elementor-widget-text-editor ol {
	padding-left: 1.4em;
	margin-block: 0 1em;
}

/* Section headings: bold and left, not the uppercase spaced style. */
body.jmaa-card-layout .elementor .elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	margin: 10px 0 6px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--jmaa-gold, #FFC20E);
	display: inline-block;
}

body.jmaa-card-layout .elementor .elementor-widget-heading h3.elementor-heading-title {
	font-size: clamp(1.02rem, 1.3vw, 1.18rem);
	font-weight: 700;
	margin: 8px 0 2px;
}

body.jmaa-card-layout .elementor-widget-image { text-align: left; }

/* Columns keep their proportions; the card gutter already exists. */
body.jmaa-card-layout .elementor .e-con .e-con { text-align: left; }

/* ---------- Narrow screens ----------------------------------------------- */

@media (max-width: 720px) {
	body.jmaa-card-layout .elementor {
		margin: 0 12px clamp(20px, 4vw, 40px);
		padding: 0 16px 24px;
	}
	body.jmaa-card-layout .elementor > .e-con.jmaa-hero {
		width: calc(100% + 32px);
		max-width: none;
		margin-left: -16px;
		min-height: 160px;
	}
}