/**
 * Course Content accordion.
 *
 * Two sets of rules, because the component has two valid shapes:
 *
 *   1. As authored and as served — a stack of core/details blocks. Fully
 *      usable with no JavaScript at all.
 *   2. After accordion.js runs — a button/region pair per item, carrying
 *      aria-expanded and aria-controls.
 *
 * Both look identical. Keeping them in step is deliberate: nothing shifts when
 * the script lands.
 */

.eco-rbc-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	max-width: 62rem;
	margin-inline: auto;
}

/* QA: on the homepage, Course Content spans the same 1200px content width as
   the pillars, certificate and collaboration sections. The FAQ page keeps the
   narrower 62rem reading column above. (Not `none`: that would also beat the
   constrained layout's own content-size cap and run edge to edge.) */
.eco-rbc-course-content .eco-rbc-accordion {
	max-width: var(--wp--style--global--content-size, 1200px);
}

/* Shared item chrome ---------------------------------------------------- */

/**
 * Each item is a bordered row rather than a shared rule between rows, so the
 * gap above reads as visible space and not just a wider rule.
 */
.eco-rbc-accordion__item,
.eco-rbc-accordion .wp-block-details {
	margin: 0;
	padding: 0;
	border-top: var(--wp--custom--rule--width) solid var(--wp--preset--color--outline);
}

/* QA 1.16: top and bottom borders on every item doubled up wherever two items
   touched. One rule between items now; only the last item closes the list. */
.eco-rbc-accordion__item:last-child,
.eco-rbc-accordion .wp-block-details:last-child {
	border-bottom: var(--wp--custom--rule--width) solid var(--wp--preset--color--outline);
}

/* Trigger --------------------------------------------------------------- */

.eco-rbc-accordion__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.eco-rbc-accordion__trigger,
.eco-rbc-accordion .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	min-height: 64px;
	margin: 0;
	padding: 1.25rem 0.5rem;
	/* A near-black, not the theme's #1b1b1b body-text contrast — the trigger
	   is the module title and reads better a shade darker than running text. */
	color: #000000;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600; /* SemiBold: heaviest Libre Franklin face loaded */
	text-align: left;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Hide the native disclosure marker; the chevron replaces it. */
.eco-rbc-accordion .wp-block-details > summary {
	list-style: none;
}

.eco-rbc-accordion .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.eco-rbc-accordion .wp-block-details > summary::marker {
	content: "";
}

.eco-rbc-accordion__trigger:hover .eco-rbc-accordion__title,
.eco-rbc-accordion .wp-block-details > summary:hover {
	text-decoration: underline;
}

.eco-rbc-accordion__title {
	flex: 1 1 auto;
}

/* Chevron --------------------------------------------------------------- */

/**
 * Drawn in CSS rather than shipped as an icon: it inherits the accent colour,
 * needs no request, and rotating a border is cheaper to animate than swapping
 * an image.
 */
.eco-rbc-accordion__chevron,
.eco-rbc-accordion .wp-block-details > summary::after {
	flex: 0 0 auto;
	width: 0.7em;
	height: 0.7em;
	margin-right: 0.35em;
	border-right: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate(45deg) translate(-0.15em, -0.15em);
	transform-origin: center;
	transition: transform 180ms ease;
}

.eco-rbc-accordion .wp-block-details > summary::after {
	content: "";
}

.eco-rbc-accordion__trigger[aria-expanded="true"] .eco-rbc-accordion__chevron,
.eco-rbc-accordion .wp-block-details[open] > summary::after {
	transform: rotate(225deg) translate(-0.15em, -0.15em);
}

/* Panel ----------------------------------------------------------------- */

.eco-rbc-accordion__panel,
.eco-rbc-accordion .wp-block-details > :not(summary) {
	padding: 0 0.25rem var(--wp--preset--spacing--40);
}

.eco-rbc-accordion__panel[hidden] {
	display: none;
}

/**
 * Panel contents.
 *
 * Portrait on the left, copy on the right, matching the approved design.
 * Below 700px the portrait moves above the copy and is capped so it does not
 * push the module details off the screen.
 */
.eco-rbc-module {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: start;
}

.eco-rbc-module__media {
	margin: 0;
}

.eco-rbc-module__media img {
	display: block;
	width: 100%;
	height: auto;
}

.eco-rbc-module__body > * {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.eco-rbc-module__body > *:last-child {
	margin-bottom: 0;
}

/* "What You'll Learn" / "Meet Your Professor" / "Module Details".
   Regular weight, a step up from the x-small body — headings for structure,
   not emphasis. QA: subheadings at medium. */
.eco-rbc-module__label {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

.eco-rbc-module__body > .eco-rbc-module__label:first-child {
	margin-top: 0;
}

/* Name / title / faculty / university, separated by <br>. */
.eco-rbc-module__professor {
	line-height: 1.5;
}

/* Video length and test length, each with its own icon. */
.eco-rbc-module__fact {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block: 0 0.5rem;
}

/**
 * Icons are CSS masks rather than <img>, so they take the site's accent colour
 * through background-color and need no extra request. Sized in em so they
 * track the text if the font size changes.
 */
.eco-rbc-module__fact::before {
	content: "";
	flex: 0 0 auto;
	width: 1.6em;
	height: 1.6em;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.eco-rbc-module__fact--video::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M13.3125 19.6875L19.4062 15.7812C19.6979 15.5938 19.8438 15.3333 19.8438 15C19.8438 14.6667 19.6979 14.4062 19.4062 14.2188L13.3125 10.3125C13 10.1042 12.6821 10.0883 12.3588 10.265C12.0354 10.4417 11.8742 10.7179 11.875 11.0938V18.9062C11.875 19.2812 12.0367 19.5575 12.36 19.735C12.6833 19.9125 13.0008 19.8967 13.3125 19.6875ZM15 27.5C13.2708 27.5 11.6458 27.1717 10.125 26.515C8.60417 25.8583 7.28125 24.9679 6.15625 23.8438C5.03125 22.7188 4.14083 21.3958 3.485 19.875C2.82917 18.3542 2.50083 16.7292 2.5 15C2.5 13.2708 2.82833 11.6458 3.485 10.125C4.14167 8.60417 5.03208 7.28125 6.15625 6.15625C7.28125 5.03125 8.60417 4.14083 10.125 3.485C11.6458 2.82917 13.2708 2.50083 15 2.5C16.7292 2.5 18.3542 2.82833 19.875 3.485C21.3958 4.14167 22.7188 5.03208 23.8438 6.15625C24.9688 7.28125 25.8596 8.60417 26.5162 10.125C27.1729 11.6458 27.5008 13.2708 27.5 15C27.5 16.7292 27.1717 18.3542 26.515 19.875C25.8583 21.3958 24.9679 22.7188 23.8438 23.8438C22.7188 24.9688 21.3958 25.8596 19.875 26.5162C18.3542 27.1729 16.7292 27.5008 15 27.5ZM15 25C17.7917 25 20.1562 24.0312 22.0938 22.0938C24.0312 20.1562 25 17.7917 25 15C25 12.2083 24.0312 9.84375 22.0938 7.90625C20.1562 5.96875 17.7917 5 15 5C12.2083 5 9.84375 5.96875 7.90625 7.90625C5.96875 9.84375 5 12.2083 5 15C5 17.7917 5.96875 20.1562 7.90625 22.0938C9.84375 24.0312 12.2083 25 15 25Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M13.3125 19.6875L19.4062 15.7812C19.6979 15.5938 19.8438 15.3333 19.8438 15C19.8438 14.6667 19.6979 14.4062 19.4062 14.2188L13.3125 10.3125C13 10.1042 12.6821 10.0883 12.3588 10.265C12.0354 10.4417 11.8742 10.7179 11.875 11.0938V18.9062C11.875 19.2812 12.0367 19.5575 12.36 19.735C12.6833 19.9125 13.0008 19.8967 13.3125 19.6875ZM15 27.5C13.2708 27.5 11.6458 27.1717 10.125 26.515C8.60417 25.8583 7.28125 24.9679 6.15625 23.8438C5.03125 22.7188 4.14083 21.3958 3.485 19.875C2.82917 18.3542 2.50083 16.7292 2.5 15C2.5 13.2708 2.82833 11.6458 3.485 10.125C4.14167 8.60417 5.03208 7.28125 6.15625 6.15625C7.28125 5.03125 8.60417 4.14083 10.125 3.485C11.6458 2.82917 13.2708 2.50083 15 2.5C16.7292 2.5 18.3542 2.82833 19.875 3.485C21.3958 4.14167 22.7188 5.03208 23.8438 6.15625C24.9688 7.28125 25.8596 8.60417 26.5162 10.125C27.1729 11.6458 27.5008 13.2708 27.5 15C27.5 16.7292 27.1717 18.3542 26.515 19.875C25.8583 21.3958 24.9679 22.7188 23.8438 23.8438C22.7188 24.9688 21.3958 25.8596 19.875 26.5162C18.3542 27.1729 16.7292 27.5008 15 27.5ZM15 25C17.7917 25 20.1562 24.0312 22.0938 22.0938C24.0312 20.1562 25 17.7917 25 15C25 12.2083 24.0312 9.84375 22.0938 7.90625C20.1562 5.96875 17.7917 5 15 5C12.2083 5 9.84375 5.96875 7.90625 7.90625C5.96875 9.84375 5 12.2083 5 15C5 17.7917 5.96875 20.1562 7.90625 22.0938C9.84375 24.0312 12.2083 25 15 25Z' fill='black'/%3E%3C/svg%3E");
}

.eco-rbc-module__fact--quiz::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3Cpath d='M6.25 20H13.75C14.1042 20 14.4013 19.88 14.6412 19.64C14.8812 19.4 15.0008 19.1033 15 18.75C15 18.3958 14.88 18.0987 14.64 17.8587C14.4 17.6187 14.1033 17.4992 13.75 17.5H6.25C5.89583 17.5 5.59875 17.62 5.35875 17.86C5.11875 18.1 4.99917 18.3967 5 18.75C5 19.1042 5.12 19.4012 5.36 19.6412C5.6 19.8812 5.89667 20.0008 6.25 20ZM6.25 15H13.75C14.1042 15 14.4013 14.88 14.6412 14.64C14.8812 14.4 15.0008 14.1033 15 13.75C15 13.3958 14.88 13.0987 14.64 12.8587C14.4 12.6187 14.1033 12.4992 13.75 12.5H6.25C5.89583 12.5 5.59875 12.62 5.35875 12.86C5.11875 13.1 4.99917 13.3967 5 13.75C5 14.1042 5.12 14.4013 5.36 14.6412C5.6 14.8812 5.89667 15.0008 6.25 15ZM2.5 25C1.8125 25 1.22375 24.755 0.733752 24.265C0.243752 23.775 -0.000831211 23.1867 2.12224e-06 22.5V2.5C2.12224e-06 1.8125 0.245002 1.22375 0.735002 0.733752C1.225 0.243752 1.81334 -0.000831211 2.5 2.12224e-06H11.4688C11.8021 2.12224e-06 12.12 0.0625022 12.4225 0.187502C12.725 0.312502 12.9904 0.489585 13.2187 0.718752L19.2812 6.78125C19.5104 7.01042 19.6875 7.27625 19.8125 7.57875C19.9375 7.88125 20 8.19875 20 8.53125V22.5C20 23.1875 19.755 23.7762 19.265 24.2662C18.775 24.7562 18.1867 25.0008 17.5 25H2.5ZM11.25 7.5V2.5H2.5V22.5H17.5V8.75H12.5C12.1458 8.75 11.8487 8.63 11.6087 8.39C11.3687 8.15 11.2492 7.85333 11.25 7.5Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 25'%3E%3Cpath d='M6.25 20H13.75C14.1042 20 14.4013 19.88 14.6412 19.64C14.8812 19.4 15.0008 19.1033 15 18.75C15 18.3958 14.88 18.0987 14.64 17.8587C14.4 17.6187 14.1033 17.4992 13.75 17.5H6.25C5.89583 17.5 5.59875 17.62 5.35875 17.86C5.11875 18.1 4.99917 18.3967 5 18.75C5 19.1042 5.12 19.4012 5.36 19.6412C5.6 19.8812 5.89667 20.0008 6.25 20ZM6.25 15H13.75C14.1042 15 14.4013 14.88 14.6412 14.64C14.8812 14.4 15.0008 14.1033 15 13.75C15 13.3958 14.88 13.0987 14.64 12.8587C14.4 12.6187 14.1033 12.4992 13.75 12.5H6.25C5.89583 12.5 5.59875 12.62 5.35875 12.86C5.11875 13.1 4.99917 13.3967 5 13.75C5 14.1042 5.12 14.4013 5.36 14.6412C5.6 14.8812 5.89667 15.0008 6.25 15ZM2.5 25C1.8125 25 1.22375 24.755 0.733752 24.265C0.243752 23.775 -0.000831211 23.1867 2.12224e-06 22.5V2.5C2.12224e-06 1.8125 0.245002 1.22375 0.735002 0.733752C1.225 0.243752 1.81334 -0.000831211 2.5 2.12224e-06H11.4688C11.8021 2.12224e-06 12.12 0.0625022 12.4225 0.187502C12.725 0.312502 12.9904 0.489585 13.2187 0.718752L19.2812 6.78125C19.5104 7.01042 19.6875 7.27625 19.8125 7.57875C19.9375 7.88125 20 8.19875 20 8.53125V22.5C20 23.1875 19.755 23.7762 19.265 24.2662C18.775 24.7562 18.1867 25.0008 17.5 25H2.5ZM11.25 7.5V2.5H2.5V22.5H17.5V8.75H12.5C12.1458 8.75 11.8487 8.63 11.6087 8.39C11.3687 8.15 11.2492 7.85333 11.25 7.5Z' fill='black'/%3E%3C/svg%3E");
}

@media (max-width: 699px) {
	.eco-rbc-module {
		grid-template-columns: minmax(0, 1fr);
	}

	.eco-rbc-module__media {
		max-width: 220px;
	}
}

/* Bonus modules ---------------------------------------------------------- */

/**
 * The "optional for the certificate" note. Marked up as a <p> with this class
 * inside the panel; the icon is decorative and the text carries the meaning.
 */
.eco-rbc-module__note {
	grid-column: 1 / -1;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0.75rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	background-color: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--accent);
}