@import '../mixins/focus';

.frontpage {
	&.frontpage-section {
		margin: 1%;
		margin-top: 30px;
		> .section-heading {
			border-bottom: solid 1px var(--bs-border-color, #eee);
			display: flex;
			justify-content: space-between;
			padding-left: 10px;
			padding-right: 10px;
			width: 100%;
			> .action {
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 18px;
				margin-top: 20px;
				margin-bottom: 10px;

				a {
					@include focus-with-background-and-color;
				}
			}
		}
	}
	.panel-default-text {
		font-size: 18px;
	}
	.cards {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		width: 100%;
	}
	.card {
		display: flex;
		flex-direction: column;
		width: 400px;
		/*border: solid 1px #ccc;
		border-radius: 4px;*/ // TODO: CHECK FOR REMOVAL #1442
		margin: 8px;
		margin-bottom: 20px;
		padding: 4px;

		@media (min-width: 1200px) and (max-width: 1800px) {
			width: 23%;
		}

		@media (min-width: 960px) and (max-width: 1199px) {
			width: 30%;
		}

		@media (min-width: 670px) and (max-width: 959px) {
			width: 47%;
		}

		@media (max-width: 669px) {
			width: 100%;
		}

		a {
			display: block;
			@include focus-with-outline-only;
		}
	}
	.widecard {
		display: flex;
		flex-direction: column;
		width: 47%;
		border: solid 1px #ccc;
		border-radius: 4px;
		margin: 8px;
		margin-bottom: 20px;
		padding: 4px;

		@media (max-width: $grid-float-breakpoint-max) {
			width: 100%;
		}
	}
	.advert-card {
		position: relative;
		background-color: var(--bs-info-bg-subtle, #d9edf7);
		border-color: var(--bs-card-border-color, #bce8f1);
		&:hover {
			filter: brightness(85%);
			/*h3 {
				color: #333;
			}
			p {
				color: #333;
			}*/ // TODO: CHECK FOR REMOVAL #1442
		}
		> a > i.icon.bi-box-arrow-up-right {
			position: absolute;
			top: 92%;
			left: 90%;
		}
	}
	a {
		&:hover {
			text-decoration: none;
		}
	}
	.card-clickable {
		flex-grow: 1;
		&:hover {
			filter: brightness(85%);
			/*h3 {
				color: #333;
			}
			p {
				color: #333;
			}*/ // TODO: CHECK FOR REMOVAL #1442
		}
	}
	.card-img-top {
		object-fit: cover;
		width: 100%;
		height: 145px;
		background-color: var(--bs-secondary-bg, #eeeeee);
	}
	.advert-image {
		position: relative;
		i {
			font-size: 90px;
			position: absolute;
			left: 34%;
			/*top: 15%;*/ // TODO: CHECK FOR REMOVAL #1442
		}
	}
	.course-image {
		position: relative;
		color: var(--bs-secondary, #fff);
		i {
			font-size: 90px;
			position: absolute;
			left: 34%;
			/*top: 15%;*/ // TODO: CHECK FOR REMOVAL #1442
		}
	}
	.card-body {
		padding: 10px;
		padding-top: 0px;
		/*color: #333333;*/ // TODO: CHECK FOR REMOVAL #1442
	}
	.card-title {
		color: var(--bs-card-title-color, #337ab7);
	}
	.card-subtitle {
		color: var(--bs-secondary-color, #333);
		font-size: 18px;
	}
	.card-footer {
		padding: 10px 10px 14px 14px;
		width: 100%;
		flex-shrink: 0;
	}
}
