/* ═══════════════════════════════════════════════════════════════════════════
   MAESTRO CARD — the full-width "Access to Maestro" panel

   Three pages open their "What you get" section with the same card: a padlock
   badge, a title, a paragraph and a link to /maestro/.

     .ce-ss-maestro-card              /cornerstones-curriculum/single-subject/
     .ce-eyfs-maestro-card            /cornerstones-curriculum/eyfs/
     .ce-mixed-what-you-get__maestro  /cornerstones-curriculum/mixed-age/

   They were three implementations of one component, and they had drifted into
   three different layouts. Measured at iPad landscape before this file existed:

     single subject  link below the text, 73 characters a line
     EYFS            link in a right-hand column, 85 characters a line
     mixed age       link below the text, 116 characters a line

   Same card, same shape of copy, three answers. Add .ce-maestro-card to the
   markup ALONGSIDE the page's own class; the page class now carries nothing
   but the accent colour.

   WHAT VARIES, and all that varies: the accent. Set --ce-maestro-accent and
   --ce-maestro-accent-hover on the page's own class. The tint and the border
   are mixed from the accent rather than written out again — 13% and 28% are
   the values all three already used, so the colours are unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

.ce-maestro-card {
	display: flex;
	/* Positioning context for the "Find out more" link's .ce-stretched-link
	   overlay, which makes the whole card clickable — the same pairing the
	   feature-list cards use via .ce-feature-list__item--linked. Without this
	   the overlay would size itself against the nearest positioned ancestor
	   instead of the card, and only the link text stayed clickable. */
	position: relative;
	align-items: center;
	gap: 2rem;
	padding: 2rem;
	margin-bottom: 1.25rem;
	border-radius: 1.5rem;
	background: color-mix(in srgb, var(--ce-maestro-accent) 13%, transparent);
	border: 1px solid color-mix(in srgb, var(--ce-maestro-accent) 28%, transparent);
	backdrop-filter: blur(20px) saturate(1.3);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05);
}

.ce-maestro-card .ce-feature-list__badge {
	color: var(--ce-maestro-accent);
	font-size: 2.75rem;
	align-self: flex-start;
	flex-shrink: 0;
}

.ce-maestro-card .ce-feature-list__content {
	flex: 1;
}

.ce-maestro-card .ce-feature-list__title {
	font-size: var(--ci-text-card-heading);
}

.ce-maestro-card .ce-feature-list__desc {
	font-size: var(--ci-text-card-body);
}

.ce-maestro-card__btn {
	flex-shrink: 0;
	align-self: center;
}

/* A text link, not a boxed button — the accent as its base colour, and the
   page's darker shade of the same hue on press. */
.ce-maestro-card__link {
	font-size: 1rem;
	color: var(--ce-maestro-accent);
}

.ce-maestro-card__link:hover,
.ce-maestro-card__link:active {
	color: var(--ce-maestro-accent-hover);
}

/* ── Above phones: the link sits under the text, not beside it ───────────────
   The card was a three-column row — badge, text, link — and the link is one
   line of 26px in a card 221px tall. It bought a 208px column plus a 32px gap
   and left 196px of that column empty, which reads as the link taking up the
   space rather than sitting with what it refers to.

   Moving it under the paragraph is not simply a matter of dropping the third
   column. Handing the paragraph the width the link gives back makes it WORSE:
   97 characters a line becomes 124 at desktop, and 85 becomes 117 at iPad
   landscape, against a comfortable maximum of about 75. The link column was
   the only thing keeping the measure readable, by accident.

   So the measure is capped deliberately instead. 40rem is ~74 characters at
   this size — inside the range at every width, and no longer dependent on a
   link column happening to be there.

   Grid rather than flex-wrap: the badge stays beside the title on row one
   while the paragraph and the link both align to the TEXT's left edge, which
   is two columns and two rows, stated. */
@media (min-width: 761px) {
	.ce-maestro-card {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
		gap: 0.85rem 2rem;
	}

	.ce-maestro-card .ce-feature-list__badge {
		grid-column: 1;
		grid-row: 1;
	}

	.ce-maestro-card .ce-feature-list__content {
		grid-column: 2;
		grid-row: 1;
	}

	.ce-maestro-card .ce-feature-list__desc {
		max-width: 40rem;
	}

	/* Column 2, so it lines up with the paragraph rather than with the badge.
	   align-self overrides the base rule's centring, which in a grid would
	   push it to the middle of its own row rather than the card. */
	.ce-maestro-card__btn {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		align-self: start;
	}
}

/* ── Phones: the icon sits beside the title ──────────────────────────────────
   Stacking the row would put the padlock on a line of its own, 44px of icon
   with nothing next to it and the title underneath. Read top to bottom that is
   three separate things — icon, heading, paragraph — where it should be one
   labelled block. The six cards in the grid below already solve it with a
   badge/title header row at 1.75rem and 0.65rem; this rebuilds the same
   arrangement and matches those two numbers, so the card looks like the cards
   beneath it rather than merely similar.

   display: contents on the wrapper is what makes it possible without touching
   the markup: it promotes the title and description to grid items of the card,
   so the title can take the badge's row while the description drops below
   both. The wrapper is a plain <div> carrying no semantics, so nothing is lost
   by taking its box away. */
@media (max-width: 760px) {
	.ce-maestro-card {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 0.75rem 0.65rem;
	}

	.ce-maestro-card .ce-feature-list__content {
		display: contents;
	}

	.ce-maestro-card .ce-feature-list__badge {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		font-size: 1.75rem;
	}

	.ce-maestro-card .ce-feature-list__title {
		grid-column: 2;
		grid-row: 1;
		margin-bottom: 0;
	}

	/* Both span the full width under the header row. */
	.ce-maestro-card .ce-feature-list__desc {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.ce-maestro-card__btn {
		grid-column: 1 / -1;
		grid-row: 3;
		justify-self: start;
	}
}