/* =============================================================================
 * London Lantern — courses listing
 *
 * The card grid printed by [ll_courses], plus the heading classes for the
 * Elementor band above it.
 *
 * WHERE THE NUMBERS COME FROM
 * The design was supplied as a 2528px-wide render. Mapping its card row
 * (2403px) onto the site container (1320px) gives k = 1.8205 design pixels per
 * CSS pixel, and every measurement below is that division. The check that it is
 * the right k: it lands the title on 40px, the body on 15/21 and the button on
 * 48px. Reading the render as 1920 instead gives a 54px title and a 67px
 * button, which is why it is not read that way.
 *
 * VERTICAL SPACING
 * Gaps measured off a picture are ink to ink. Used as CSS margins they add the
 * half-leading of both line boxes on top, which is how the hero first came out
 * 80px too tall. So each margin below is the measured ink gap minus the leading
 * either side, and the comment keeps the original so it can be re-derived.
 * ========================================================================== */

.ll-courses {

	/* --- Grid ----------------------------------------------------------- */
	--ll-cols: 3;                  /* overridden inline by the columns attribute */
	--ll-card-gap: 18px;           /* design 33 */

	/* --- Card ----------------------------------------------------------- */
	--ll-card-radius: 16px;        /* design 28 */
	--ll-card-padx: 48px;          /* design 90 */
	--ll-card-padb: 41px;          /* design 75 — box to box, no conversion */
	--ll-card-media-h: 238px;      /* design 433 */
	--ll-card-media-fade: 46px;    /* the photo dissolving into the card */

	/* --- Type ----------------------------------------------------------- */
	--ll-card-title: 40px;         /* design cap 50 */
	--ll-card-tagline: 14px;       /* design cap 19 */
	--ll-card-text: 15px;          /* design line pitch 39 */
	--ll-card-flabel: 12px;        /* design 22 ≈ 13px; dropped a step so two
	                                  long labels stop meeting in the middle */
	--ll-card-btn-text: 18px;

	/* --- Feature circles -------------------------------------------------- */
	--ll-card-circle: 54px;        /* design 99 */
	--ll-card-glyph: 28px;         /* design 50 */
	--ll-card-frow-gap: 14px;      /* clear air between the labels — the circles
	                                  move apart with them, which is fine */

	/* --- Button ---------------------------------------------------------- */
	--ll-card-btn-h: 48px;         /* design 88 */
	--ll-card-btn-w: 248px;        /* design 451 */

	display: grid;
	grid-template-columns: repeat(var(--ll-cols, 3), minmax(0, 1fr));
	gap: var(--ll-card-gap);

	/*
	 * The grid sets its own width so it matches the rest of the site whatever
	 * the Elementor container is doing. Set that container to Full Width or it
	 * will clip this to its own narrower boxed width.
	 */
	width: 100%;
	max-width: var(--ll-container, 1320px);
	margin-inline: auto;
}


/* -----------------------------------------------------------------------------
 * Card shell
 * -------------------------------------------------------------------------- */

.ll-courses .ll-card {
	display: flex;
	flex-direction: column;
	background: var(--ll-card, #F9EFE6);
	border-radius: var(--ll-card-radius);
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(122, 36, 39, .06);
	transition: transform .25s ease, box-shadow .25s ease;
}

.ll-courses .ll-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(122, 36, 39, .12);
}

@media (prefers-reduced-motion: reduce) {

	.ll-courses .ll-card,
	.ll-courses .ll-card:hover {
		transform: none;
		transition: none;
	}
}


/* -----------------------------------------------------------------------------
 * Media
 *
 * Full bleed to the card edges, with the bottom dissolving into the card colour
 * exactly as the design does. The gradient is painted by a pseudo-element
 * rather than a mask so the card background shows through at any colour.
 * -------------------------------------------------------------------------- */

.ll-courses .ll-card__media {
	position: relative;
	display: block;
	height: var(--ll-card-media-h);
	overflow: hidden;
}

.ll-courses .ll-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ll-courses .ll-card__media::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: var(--ll-card-media-fade);
	background: linear-gradient(to bottom, rgba(249, 239, 230, 0), var(--ll-card, #F9EFE6));
	pointer-events: none;
}


/* -----------------------------------------------------------------------------
 * Body
 *
 * A flex column so the button can be pushed to the bottom — cards in a row end
 * up the same height however long the paragraphs are, and the buttons line up.
 * -------------------------------------------------------------------------- */

.ll-courses .ll-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-inline: var(--ll-card-padx);
	padding-block: 10px var(--ll-card-padb);   /* top: design ink gap 14 */
}


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

.ll-courses .ll-card__title {
	margin: 0;
	font-family: var(--ll-serif, "Playfair Display", Georgia, serif);
	font-size: var(--ll-card-title);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -.005em;
}

.ll-courses .ll-card__title a {
	color: var(--ll-maroon-deep, #890c25);
	text-decoration: none;
}

.ll-courses .ll-card__title a:hover,
.ll-courses .ll-card__title a:focus-visible {
	color: var(--ll-maroon, #890c25);
	text-decoration: none;
}


/* --- Tagline -------------------------------------------------------------- */

.ll-courses .ll-card__tagline {
	margin: 4px 0 0;               /* design ink gap 18, less both leadings */
	font-family: var(--ll-sans, "Lato", system-ui, sans-serif);
	font-size: var(--ll-card-tagline);
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ll-maroon-deep, #890c25);
}


/* --- Paragraph ------------------------------------------------------------ */

.ll-courses .ll-card__text {
	margin-top: 6px;               /* design ink gap 15, less both leadings */
	font-family: var(--ll-sans, "Lato", system-ui, sans-serif);
	font-size: var(--ll-card-text);
	line-height: 21px;
	color: var(--ll-ink, #091223);
}

.ll-courses .ll-card__text > :first-child { margin-top: 0; }
.ll-courses .ll-card__text > :last-child  { margin-bottom: 0; }


/* -----------------------------------------------------------------------------
 * Feature circles
 *
 * The column count is set inline by the renderer, so three features spread
 * evenly across the card instead of hugging the start edge.
 *
 * The row sits flush with the paragraph — in the design the first circle lines
 * up with the first letter of the text. A label wider than its own column is
 * expected ("Workplace communication" is), which is what the column gap is for:
 * it stops two long labels running into each other.
 * -------------------------------------------------------------------------- */

.ll-courses .ll-card__features {
	display: grid;
	grid-template-columns: repeat(var(--ll-fcount, 4), minmax(0, 1fr));
	column-gap: var(--ll-card-frow-gap);
	margin: 10px 0 0;              /* design ink gap 14, less the last descender */
	list-style: none;

	/* Cancel the theme's list indent, which survives list-style: none. */
	padding: 0;
}

.ll-courses .ll-card__features li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ll-courses .ll-card__features li::before,
.ll-courses .ll-card__features li::marker {
	content: none;
}

.ll-courses .ll-card__circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ll-card-circle);
	height: var(--ll-card-circle);
	border-radius: 50%;
	background: var(--ll-circle, #F1D7CA);
	color: var(--ll-maroon-deep, #890c25);
	flex: 0 0 auto;
}

/*
 * The base .ll-icon rules live in ll-course.css, which does not load on this
 * page — so the ones the card needs are repeated here rather than depended on.
 * Same convention: the wrapper carries the size, the artwork fills its height,
 * and an inline SVG takes the colour it inherits.
 */
.ll-courses .ll-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
	width: var(--ll-card-glyph);
	height: var(--ll-card-glyph);
}

.ll-courses .ll-icon svg,
.ll-courses .ll-icon img {
	width: auto;
	height: 100%;
	max-width: 100%;
	display: block;
}

.ll-courses .ll-icon svg [fill]:not([fill="none"]),
.ll-courses .ll-icon svg[fill]:not([fill="none"]) {
	fill: currentColor;
}

.ll-courses .ll-icon svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.ll-courses .ll-card__flabel {
	margin-top: 4px;               /* design gap 7, less the label's leading */
	font-family: var(--ll-sans, "Lato", system-ui, sans-serif);
	font-size: var(--ll-card-flabel);
	line-height: 15px;
	color: var(--ll-ink, #091223);

	/*
	 * A long single word ("communication", "presentations") is wider than its
	 * column. Without this it spills over its neighbour instead of the column
	 * simply being the narrower thing.
	 */
	overflow-wrap: break-word;
	hyphens: none;
}


/* -----------------------------------------------------------------------------
 * Button
 *
 * margin-block-start: auto is what makes the buttons of a row sit on one line
 * regardless of how much text is above them.
 * -------------------------------------------------------------------------- */

.ll-courses .ll-card__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: min(var(--ll-card-btn-w), 100%);
	min-height: var(--ll-card-btn-h);
	margin-block-start: auto;      /* pin to the bottom */
	margin-inline: auto;
	padding-inline: 24px;
	padding-block-start: 0;
	border-radius: 999px;
	background: var(--ll-maroon-deep, #890c25);
	color: #fff;
	font-family: var(--ll-sans, "Lato", system-ui, sans-serif);
	font-size: var(--ll-card-btn-text);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease;
}

/*
 * The parent theme styles anchors inside cards. These three are the properties
 * it overrides, so they are the three that need the weight here.
 */
.ll-courses .ll-card__btn,
.ll-courses .ll-card__btn:hover,
.ll-courses .ll-card__btn:focus-visible {
	color: #fff !important;
	border: 0 !important;
	text-decoration: none !important;
}

.ll-courses .ll-card__btn:hover,
.ll-courses .ll-card__btn:focus-visible {
	background: var(--ll-maroon, #890c25) !important;
}

/*
 * The minimum gap above the button, applied to whatever block happens to sit
 * directly above it — the features on a full card, the paragraph on a course
 * that has none.
 *
 * It is NOT `.ll-card__features + .ll-card__btn { margin-block-start: 18px }`:
 * that wins over the `auto` above and unpins the button, so in a row of cards
 * the buttons end up at three different heights. Putting the gap on the block
 * above leaves `auto` to swallow the slack, and the buttons stay in line.
 */
.ll-courses .ll-card__body > :nth-last-child(2) {
	margin-bottom: 18px;           /* design ink gap 21, less the label leading */
}

/* Arrow points the way the text runs. */
[dir="rtl"] .ll-courses .ll-card__arrow {
	transform: scaleX(-1);
}


/* -----------------------------------------------------------------------------
 * Section heading — the Elementor band above the grid
 *
 * Add these as CSS classes on the Elementor widgets so the copy stays editable
 * without touching the theme.
 * -------------------------------------------------------------------------- */

.ll-sec {
	--ll-sec-eyebrow: 18px;        /* design cap 24 */
	--ll-sec-title: 67px;          /* design cap-to-descender 113 */
	--ll-sec-sub: 20px;            /* design 35 */

	/* Rule, all measured off the design at k = 1.8205 */
	--ll-rule-line: 50px;          /* design 90 */
	--ll-rule-thick: 1.5px;        /* design 3 */
	--ll-rule-bead: 5px;           /* design 9 */
	--ll-rule-gap: 12px;           /* design 22 */
	--ll-rule-lamp-w: 16px;        /* design 28 */
	--ll-rule-lamp-h: 24px;        /* design 44 */
	--ll-rule-color: #C0ADA7;      /* sampled from the design */

	text-align: center;
	max-width: var(--ll-container, 1320px);
	margin-inline: auto;
}

.ll-sec--start {
	text-align: start;
}

/*
 * The gaps are tiny — 10 to 11px of ink between each pair. Most of that is
 * already supplied by the line boxes themselves, which is why these margins are
 * near zero rather than the measured numbers: the line-heights are doing the
 * spacing. Loosen a line-height and the margin below it has to come down.
 */
.ll-sec-eyebrow {
	margin: 0;
	font-family: var(--ll-sans, "Lato", system-ui, sans-serif);
	font-size: var(--ll-sec-eyebrow);
	line-height: 1.2;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ll-ink, #091223);
}

.ll-sec-title {
	margin: 0;                     /* design ink gap 11, all of it leading */
	font-family: var(--ll-serif, "Playfair Display", Georgia, serif);
	/* Clamped so a phone does not get a 67px heading. */
	font-size: clamp(34px, 5vw, var(--ll-sec-title));
	line-height: 1.05;
	font-weight: 700;
	color: var(--ll-maroon-deep, #890c25);
}

.ll-sec-sub {
	margin: 2px 0 0;               /* design ink gap 10, less both leadings */
	font-family: var(--ll-sans, "Lato", system-ui, sans-serif);
	font-size: var(--ll-sec-sub);
	line-height: 1.5;
	color: var(--ll-ink, #091223);
}


/* --- The lantern rule ----------------------------------------------------- */

.ll-sec-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ll-rule-gap);
	margin-top: 6px;               /* design ink gap 11, less the subtitle leading */
}

.ll-sec--start .ll-sec-rule {
	justify-content: flex-start;
}

.ll-sec-rule__line {
	width: var(--ll-rule-line);
	height: var(--ll-rule-thick);
	background: var(--ll-rule-color);
	flex: 0 0 auto;
}

/* The small bead where each hairline meets the lantern. */
.ll-sec-rule__bead {
	width: var(--ll-rule-bead);
	height: var(--ll-rule-bead);
	border-radius: 50%;
	background: var(--ll-rule-color);
	flex: 0 0 auto;
}

/*
 * Each bead sits against its own hairline rather than floating in the middle of
 * the flex gap. The children are line, bead, lamp, bead, line — so they are
 * addressed by position: `:last-of-type` would not work here, because every
 * child is a <span> and the last span is the second line, not the second bead.
 */
.ll-sec-rule__bead:nth-child(2) {
	margin-inline-start: calc(var(--ll-rule-gap) * -1);
}

.ll-sec-rule__bead:nth-child(4) {
	margin-inline-end: calc(var(--ll-rule-gap) * -1);
}

.ll-sec-rule__lamp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ll-rule-lamp-w);
	height: var(--ll-rule-lamp-h);
	color: var(--ll-maroon-deep, #890c25);
	flex: 0 0 auto;
}

.ll-sec-rule__lamp svg,
.ll-sec-rule__lamp img,
.ll-sec-rule__lamp .ll-icon {
	width: 100%;
	height: 100%;
	display: block;
}

/* The band's own gap to whatever follows it — the grid, in the design. */
.ll-sec {
	margin-bottom: 15px;           /* design 27, box to box */
}


/* -----------------------------------------------------------------------------
 * Narrower screens
 *
 * The card keeps its proportions and the grid drops a column at a time. Below
 * the two-column breakpoint a single card is capped at its design width so it
 * does not stretch into a banner on a tablet held upright.
 * -------------------------------------------------------------------------- */

@media (max-width: 1199px) {

	.ll-courses {
		--ll-cols: 2;
		--ll-card-padx: 36px;
		--ll-card-title: 34px;
		--ll-card-gap: 20px;
	}
}

@media (max-width: 767px) {

	.ll-courses {
		--ll-cols: 1;
		--ll-card-padx: 28px;
		--ll-card-padb: 32px;
		--ll-card-title: 30px;
		--ll-card-media-h: 200px;
		--ll-card-circle: 50px;
		--ll-card-glyph: 26px;
		max-width: 428px;
	}
}

/* Very narrow phones: four circles no longer fit across, so use two rows. */
@media (max-width: 379px) {

	.ll-courses .ll-card__features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 16px;
	}
}


/* =============================================================================
 * The courses page itself
 *
 * Scoped to `.ll-courses-page`, the body class added when a page carries the
 * grid — so none of this leaks onto other pages.
 * ========================================================================== */

.ll-courses-page {

	/* The theme's navbar is position:absolute and takes no space in the flow.
	   The stock banner below is what used to hold its place; once the banner is
	   gone the page has to reserve the room itself. */
	--ll-navbar-h: 87px;

	/* Nav to the eyebrow in the design: 110 design px. */
	--ll-arch-top: 60px;
}


/* --- The stock banner ------------------------------------------------------
 *
 * `.breadcrumb-area.custom-breadcrumb.bg-gray-gradient-secondary` — the blue
 * gradient block with "Courses" and a breadcrumb. The design starts straight
 * into the section heading, and the teal gradient belongs to the old palette.
 * The LearnPress breadcrumb goes with it, same as on a single course.
 * -------------------------------------------------------------------------- */

.ll-courses-page .breadcrumb-area,
.ll-courses-page .learn-press-breadcrumb {
	display: none;
}

/*
 * Reserve the navbar's height plus the design's gap. Without this the heading
 * slides underneath the floating navbar the moment the banner is hidden —
 * exactly what happened to the hero on the single course page.
 */
.ll-courses-page .builder-page-wrapper {
	padding-top: calc(var(--ll-navbar-h) + var(--ll-arch-top));
}

@media (max-width: 991px) {

	.ll-courses-page {
		/* The navbar joins the normal flow at this width — no band needed. */
		--ll-navbar-h: 0px;
		--ll-arch-top: 40px;
	}
}


/* --- Top bar ---------------------------------------------------------------
 *
 * Matched to the single course page.
 *
 * NOTE ON THE SELECTOR: it is `.top-bar-area.bg-dark`, not `.bg-dark` on its
 * own. The footer carries `bg-dark` too, so the looser selector recolours the
 * whole footer maroon as well as the strip at the top.
 * -------------------------------------------------------------------------- */

.ll-courses-page .top-bar-area.bg-dark {
	background-color: var(--ll-topbar, #890c25) !important;
}


/* --- Footer ----------------------------------------------------------------
 *
 * Same maroon as the top bar. The theme paints the whole footer from one
 * element — `footer.bg-dark` — so one rule covers the links, the newsletter
 * block and the copyright strip.
 *
 * SCOPE: this only applies on a page carrying the grid, because that is where
 * this stylesheet loads. To recolour the footer across the whole site, move
 * this rule (without the `.ll-courses-page` prefix) into the theme's global
 * custom CSS instead.
 * -------------------------------------------------------------------------- */

.ll-courses-page footer.bg-dark {
	background-color: var(--ll-topbar, #890c25) !important;
}