/* EFT Calendar - public listing and course page.
   Deliberately plain so it inherits the site's own look. Class names all
   start with eftc- so they are easy to restyle from the theme. */

.eftc-listing-group {
	display: grid;
	/* auto-fit (not auto-fill): when there are fewer courses than would fill
	   a row, this collapses the empty column instead of reserving space for
	   it, so the actual cards stretch to fill the container rather than
	   leaving a gap on the right. The card's own max-width (below) is what
	   stops a lone leftover card from then ballooning to fill that space. */
	grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
	align-items: stretch;
	gap: 1.5em;
}

/* A compact (homepage/widget) listing has no short description and no time
   line, so each card needs less width to still look right - and it is often
   sat in a narrower column next to a sidebar, so a smaller minimum here
   means 3 across still fits where the full-size 16em cards would only
   manage 2. */
.eftc-listing-group--compact {
	grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
}

.eftc-card {
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	/* Stops a card growing past a sensible width when its grid track is much
	   wider than it needs to be (eg. a category page with only one course).
	   On an ordinary row of several cards this has no visible effect, since
	   each card's own share of the row is already narrower than this. */
	max-width: 24em;
}

.eftc-card:hover {
	box-shadow: 0 0 26px rgba(0, 0, 0, 0.4);
	transform: translateY(-2px);
}

.eftc-card-image {
	display: block;
	padding: 1em 1em 0;
}

.eftc-card-image img {
	display: block;
	width: 100%;
	/* A fixed shape for every card, whatever shape the trainer's own photo
	   is - a wider or taller image is cropped to fill this box rather than
	   stretching the card's height, so a mixed row of photos still lines up
	   evenly (matches the ratio of the site's existing course photos). */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
}

.eftc-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1em;
}

.eftc-card-when {
	margin: 0 0 0.05em;
	line-height: 1.15;
	opacity: 0.75;
}

.eftc-card-title {
	margin: 0 0 0.25em;
	font-size: 1.25em;
}

.eftc-card-title a {
	text-decoration: none;
}

.eftc-card-excerpt {
	margin: 0 0 0.5em;
}

/* Pushed to the bottom of the card - see the note in render_card() - so
   Trainer, Location, Price and the button line up across a row whatever
   length the title and short description come out to above them. */
.eftc-card-footer {
	margin-top: auto;
}

.eftc-card-meta {
	margin: 0 0 0.5em;
	line-height: 1.35;
	opacity: 0.75;
}

.eftc-card-trainer {
	margin-bottom: 0;
	line-height: 1.05;
}

.eftc-card-price {
	margin: 0 0 0.75em;
}

.eftc-card-cta {
	display: flex !important;
	justify-content: center !important;
	text-align: center !important;
	/* Pushed to the bottom of the card body, so the button lines up across
	   a row of cards whatever the title or short description's length. */
	margin-top: auto !important;
}

.eftc-button,
a.eftc-button:link,
a.eftc-button:visited {
	display: inline-block;
	padding: 0.5em 1.25em;
	border: 0;
	border-radius: 4px;
	background: #1892c4;
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9em;
	font-family: inherit;
	cursor: pointer;
}

/* Used on the smaller "See Course" button in a compact (homepage/widget)
   listing - everything else about the button stays the same. */
.eftc-button--small {
	padding: 0.3em 0.85em;
	font-size: 0.8em;
}

.eftc-button:hover,
.eftc-button:focus {
	background: #587ebd !important;
	color: #fff !important;
	text-decoration: none !important;
}

.eftc-no-courses {
	opacity: 0.75;
}

.eftc-hidden-initial {
	display: none;
}

.eftc-see-more {
	margin: 2em 0 0;
	text-align: center;
}

/* Bigger than the ordinary .eftc-button size (card and share buttons keep
   their own size) - this is the one button on the page not sat inside a
   card, so it can afford to stand out more. */
.eftc-see-more .eftc-button {
	padding: 0.75em 2em;
	font-size: 1.1em;
}

/* Single course page */

.eftc-course {
	padding-top: 2.5em;
	/* A small side gutter of its own, since a theme's content area doesn't
	   always add one - without this, text can end up flush against the
	   edge of the screen on a narrow (mobile) view. */
	padding-left: 1em;
	padding-right: 1em;
}

.eftc-course-header {
	margin-top: 0;
	margin-bottom: 1em;
}

.eftc-course-title {
	margin-top: 0;
}

.eftc-course-when {
	margin-top: 0.75em;
	font-size: 1.05em;
}

.eftc-course-ended {
	display: inline-block;
	padding: 0.25em 0.75em;
	margin-top: 0.5em;
	background: #f2f2f2;
	border-radius: 3px;
	font-weight: 600;
}

.eftc-course-urgency {
	margin: 0.5em 0 0;
	color: #c0392b;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.eftc-share {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.75em;
	margin-top: 1em;
}

.eftc-share-copy {
	background: #6c757d;
}

.eftc-share-copy:hover,
.eftc-share-copy:focus {
	background: #565e64 !important;
}

.eftc-share-copied {
	font-size: 0.9em;
	opacity: 0.75;
}

/* Intro: description on the left, image on the right */

.eftc-course-intro {
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: start;
	gap: 2em;
	margin-bottom: 2em;
}

.eftc-course-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* A theme's own reset can zero out paragraph spacing, which makes a
   trainer's description look like it never had paragraph breaks at all.
   These rules make sure a line break in the description always leaves a
   visible gap, however that theme handles paragraphs elsewhere. */

.eftc-course-content p {
	margin: 0 0 1em;
}

.eftc-course-content p:last-child {
	margin-bottom: 0;
}

.eftc-course-content br {
	content: '';
	display: block;
	margin-bottom: 1em;
}

/* The shaded info box: Details / Trainer / Venue (or the online image) in
   three columns, with the map spanning the full width underneath, and the
   booking note below a divider at the bottom of the same box. */

.eftc-course-info {
	background: #f2f2f2;
	border-radius: 8px;
	padding: 1.5em;
}

.eftc-course-panels {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5em;
}

.eftc-panel h2 {
	margin: 0 0 0.5em;
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.eftc-panel p {
	margin: 0 0 0.5em;
}

.eftc-panel p:last-child {
	margin-bottom: 0;
}

.eftc-venue-address {
	line-height: 1.5;
}

.eftc-panel-online-image img {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	border-radius: 4px;
}

.eftc-panel-map {
	grid-column: 1 / -1;
}

.eftc-map-frame {
	width: 100%;
	height: 320px;
	border: 0;
}

.eftc-booking-note {
	margin-top: 1.5em;
	padding-top: 1.5em;
	border-top: 1px solid #ddd;
}

.eftc-booking-note p {
	margin: 0;
}

.eftc-booking-note strong {
	text-transform: uppercase;
}

@media (max-width: 700px) {
	.eftc-course-intro,
	.eftc-course-panels {
		grid-template-columns: 1fr;
	}

	/* On the two-column desktop layout the image already sits up near the
	   title, to one side of the description - but once the columns collapse
	   to one on mobile, the two blocks stack in the order they appear in the
	   page's markup, which puts the (often long) description first and the
	   image a long way down. This puts the image back at the top on mobile
	   only, without changing the markup or the desktop layout at all. */
	.eftc-course-image {
		order: -1;
	}
}