/**
 * Front-end styling for the class list, My Classes and My Certificates shortcodes.
 *
 * Written to sit inside whatever theme is active (Divi today) rather than to impose a look: no
 * resets, no element selectors, every rule scoped to a .fia-lms- class. Colours come from
 * currentColor and neutral greys so the theme's own palette still shows through.
 *
 * Loaded only on pages that actually render one of the shortcodes -- see
 * FIA_LMS_Shortcodes::enqueue_styles().
 */

.fia-lms-classes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0;
}

.fia-lms-class {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem 1.35rem 1.35rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.65);
}

/* The heading ran straight into the previous card's button before this. */
.fia-lms-class .fia-lms-class-title {
	margin: 0 0 0.15rem;
	font-size: 1.15rem;
	line-height: 1.3;
}

.fia-lms-class .fia-lms-class-title a {
	text-decoration: none;
}

.fia-lms-class .fia-lms-class-title a:hover,
.fia-lms-class .fia-lms-class-title a:focus {
	text-decoration: underline;
}

/* Every detail line is a <p>, which the theme spaces as body copy -- far too loose for a card. */
.fia-lms-class p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
}

.fia-lms-class .fia-lms-class-course {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.fia-lms-class .fia-lms-class-dates {
	font-weight: 600;
}

.fia-lms-class .fia-lms-class-mode,
.fia-lms-class .fia-lms-class-seats {
	opacity: 0.8;
}

.fia-lms-class .fia-lms-class-price {
	font-weight: 600;
}

/* Pushes the action to the bottom so cards of differing height line their buttons up. */
.fia-lms-class .fia-lms-class-actions,
.fia-lms-class .button,
.fia-lms-class .add_to_cart_button {
	margin-top: auto;
}

.fia-lms-class .button,
.fia-lms-class .add_to_cart_button {
	align-self: flex-start;
	margin-top: 0.85rem;
}

.fia-lms-class-full {
	font-weight: 600;
	opacity: 0.75;
}

.fia-lms-classes-empty {
	margin: 1.5rem 0;
	opacity: 0.8;
}

/* --- Grouped course list (default [fia_class_events] layout) --------------------- */

.fia-lms-course-groups {
	margin: 1.5rem 0;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.fia-lms-course-group {
	padding: 1.25rem 1.35rem 1.35rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.65);
	/* Contains the floated course image below so this border wraps around it, not just the text. */
	overflow: hidden;
}

/* Floated right so the heading and summary wrap beside it -- rendered before the heading in the
   markup for exactly that reason. No image at all when a Course has none set: nothing here reserves
   space for it, so the heading and text simply run full width. */
/* Deliberately over-specified, and the one !important in this file. The theme is Divi, whose own
   image rules are specific enough to beat a single plugin class -- the first attempt at a cap here
   was silently ignored and a 1024px-wide attachment rendered at its full width, swallowing the
   course text. Anything that constrains this image has to outrank the theme or it does nothing. */
.fia-lms-course-group img.fia-lms-course-image {
	float: right;
	width: auto;
	/* 600px: twice the 300px the image actually rendered at before, which is what was asked for.
	   The earlier 28rem was never the problem -- the cap simply wasn't winning against the theme,
	   so a 1024px attachment drew at full width. */
	max-width: 37.5rem !important;
	height: auto;
	margin: 0 0 0.85rem 1.25rem;
	border-radius: 0.35rem;
}

.fia-lms-course-group .fia-lms-course-title {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
	line-height: 1.3;
}

/* Dates-only layout ([fia_class_events layout="dates"]), used on a Course's own page where the
   heading/description/image are already in the post content above this. No floated image sits
   beside the list here, so it gets the full column back rather than the 50% cap below that exists
   to leave room beside that image. */
.fia-lms-course-group-dates-only .fia-lms-course-dates-heading {
	margin: 0 0 0.35rem;
	font-size: 1.1rem;
	line-height: 1.3;
}

.fia-lms-course-group-dates-only .fia-lms-class-dates-list {
	max-width: 100%;
}

/* Jump link prepended above the Course page's own dates section (see
   FIA_LMS_Shortcodes::append_dates_to_course_content()), right-aligned per the director's explicit
   ask. Given the compound `p.fia-lms-course-dates-jump` selector and an !important on the one
   property that matters -- the same treatment the course image's width cap needed above: a plain
   `text-align: right` on a single class is exactly the kind of rule Divi's own paragraph/theme
   styles are specific enough to beat, and this one hasn't been checked against a live page yet. If
   it still renders left-aligned, that's this rule losing to the theme, not the property being
   wrong. */
p.fia-lms-course-dates-jump {
	margin: 0 0 1.5rem;
	text-align: right !important;
}

.fia-lms-course-dates-jump a {
	text-decoration: none;
}

.fia-lms-course-dates-jump a:hover,
.fia-lms-course-dates-jump a:focus {
	text-decoration: underline;
}

.fia-lms-course-group .fia-lms-course-title a {
	text-decoration: none;
}

.fia-lms-course-group .fia-lms-course-title a:hover,
.fia-lms-course-group .fia-lms-course-title a:focus {
	text-decoration: underline;
}

.fia-lms-course-group p {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
	line-height: 1.45;
}

.fia-lms-course-summary {
	opacity: 0.85;
}

.fia-lms-course-mode {
	opacity: 0.8;
}

.fia-lms-course-price {
	font-weight: 600;
}

.fia-lms-class-dates-list {
	margin: 0.85rem 0 0;
	padding-left: 0;
	list-style: none;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	/* Deliberately NOT `clear: both`. Clearing pushed the whole list below the image, and since the
	   image is taller than the few lines of description beside it, that left a band of empty space
	   under the text and made the dates look detached from the course they belong to. The list is
	   capped at half the column and the image is 600px, so the two sit side by side in the space
	   available; the group's own `overflow: hidden` still contains the float, so a tall image can
	   never reach the next course's heading. */
	/* Half the page width, not the full content column: at full width the date sat at one edge and
	   its button at the other, with a stretch of empty space between them that read as a broken
	   layout rather than a list. Released at narrower widths below, where half a column is too
	   little room for a date and a button. */
	max-width: 50%;
}

.fia-lms-class-date-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.85rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 0.9rem;
}

/* Flex bases are deliberately small: inside a half-width list the old 14rem + 16rem pair exceeded
   the box and wrapped every row onto three lines. */
.fia-lms-class-date-when {
	font-weight: 600;
	flex: 1 1 9rem;
}

.fia-lms-class-date-info {
	flex: 1 1 7rem;
	opacity: 0.85;
}

.fia-lms-class-date-sep {
	opacity: 0.5;
}

.fia-lms-class-date-action {
	flex: 0 0 auto;
	margin-left: auto;
}

.fia-lms-class-date-row-full .fia-lms-class-date-when,
.fia-lms-class-date-row-full .fia-lms-class-date-info {
	opacity: 0.6;
}

/* Narrow screens (roughly 600px, the width a phone reads this at): stack date, info and button
   rather than crowd them onto one line, and drop the course image full-width above the heading
   instead of squeezing the title into two words next to it. */
/* Between a phone and a full desktop column, half the width stops being enough for a date and a
   button on one line -- give the list the whole column back before the stacking rules below. At the
   same point a 28rem image would leave the heading only a word or two per line, so cap it at a
   third of the column until the phone rule drops the float entirely. */
@media (max-width: 60rem) {
	.fia-lms-class-dates-list {
		max-width: 100%;
		/* Full width here, so there is no room beside the image -- clear it rather than squeeze
		   every row into the gap left of a floated picture. */
		clear: both;
	}

	.fia-lms-course-group img.fia-lms-course-image {
		max-width: 33% !important;
	}
}

@media (max-width: 40rem) {
	.fia-lms-class-date-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.fia-lms-class-date-action {
		margin-left: 0;
		align-self: flex-start;
	}

	.fia-lms-course-group img.fia-lms-course-image {
		float: none;
		display: block;
		max-width: 100% !important;
		margin: 0 0 0.85rem;
	}
}

/* --- My Classes / My Certificates ------------------------------------------------ */

.fia-lms-my-classes,
.fia-lms-certificates {
	margin: 1rem 0 2rem;
	padding-left: 0;
	list-style: none;
}

.fia-lms-my-class,
.fia-lms-certificate {
	padding: 1rem 1.15rem;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.5rem;
}

.fia-lms-my-class + .fia-lms-my-class,
.fia-lms-certificate + .fia-lms-certificate {
	margin-top: 0.75rem;
}

.fia-lms-cancel-form {
	margin: 0.6rem 0 0;
}

.fia-lms-my-class-closed {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	opacity: 0.75;
}

.fia-lms-notice {
	margin: 1rem 0;
	padding: 0.85rem 1.1rem;
	border-left: 4px solid currentColor;
	border-radius: 0.25rem;
	background: rgba(0, 0, 0, 0.04);
}

.fia-lms-free-register {
	margin: 1rem 0;
}

.fia-lms-free-register-note {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	opacity: 0.75;
}

.fia-lms-registered-panel {
	margin: 1rem 0;
	padding: 0.85rem 1.1rem;
	border-left: 4px solid currentColor;
	border-radius: 0.25rem;
	background: rgba(0, 0, 0, 0.04);
}

.fia-lms-registered-panel p:last-child {
	margin-bottom: 0;
}

.fia-lms-register-error {
	margin: 1rem 0;
	font-weight: 600;
}

@media (prefers-color-scheme: dark) {
	.fia-lms-class,
	.fia-lms-course-group,
	.fia-lms-my-class,
	.fia-lms-certificate {
		border-color: rgba(255, 255, 255, 0.18);
		background: rgba(255, 255, 255, 0.04);
	}

	.fia-lms-class-dates-list,
	.fia-lms-class-date-row {
		border-color: rgba(255, 255, 255, 0.12);
	}

	.fia-lms-notice,
	.fia-lms-registered-panel {
		background: rgba(255, 255, 255, 0.06);
	}
}