/***************************************
**
** PUFF
**
****************************************/
.jor-image-card * {
	font-family: var(--jor-text-font-stack);
}

.jor-image-card.jor-image-card,
.con-info-card-wrapper.con-info-card-wrapper,
.sv-decoration-image-card {
	position: relative;
	transition: all 0.2s ease-in-out;
	display: flex;
	align-items: stretch;
	width: auto;
	margin: 4rem 0;

	background-color: transparent;
	border: 1px solid var(--jor-image-card-grid-card-border-color);
	box-shadow: none;
}

.jor-image-card.jor-image-card:hover,
.con-info-card-wrapper.con-info-card-wrapper:hover {
	box-shadow: none;
}

.jor-image-card .jor-image-card__image-wrapper,
.sv-decoration-image-card > .sv-image-portlet {
    display: flex;
    flex-shrink: 0;
    width: 50%;
}

.sv-decoration-image-card > .sv-image-portlet {
	margin-bottom: 0;
}

.jor-image-card.jor-image-card__image-left .jor-image-card__image-wrapper img,
.jor-image-card.jor-image-card__image-right .jor-image-card__image-wrapper img,
.sv-decoration-image-card > .sv-image-portlet img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.con-info-card-wrapper.con-info-card__image.image-top img,
.jor-image-card.jor-image-card__image-top .jor-image-card__image-wrapper img,
.jor-image-card.jor-image-card__image-bottom .jor-image-card__image-wrapper img {
	height: 240px;
	object-fit: cover;
	width: 100%;
}

.con-info-card__content,
.jor-image-card__content,
.sv-decoration-image-card > .sv-layout {
	padding: 2rem;
	min-height: 160px;
}

.jor-image-card__content > .jor-image-card__item-link:before {
	content: "\f054";
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	margin-right: 0.4em;
}

/* Bild till vänster eller höger */
.jor-image-card.jor-image-card__image-top,
.jor-image-card.jor-image-card__image-bottom {
	display: flex;
	flex-direction: column;
}

.jor-image-card.jor-image-card__image-top .jor-image-card__image-wrapper,
.jor-image-card.jor-image-card__image-bottom .jor-image-card__image-wrapper {
	width: 100%;
}

.sv-layout .con-info-card-wrapper h2.con-info-card__subheading,
.jor-image-card h2.jor-image-card__heading,
.sv-decoration-image-card > .sv-layout .subheading,
.sv-decoration-image-card > .sv-layout .subheading3 {
	color: var(--jor-image-card-heading-font-color);
	font-size: 1.6875rem; /* TODO: This should just inherit from siteFont */
	margin-top: 0;
}

.jor-image-card__heading .jor-image-card__item-link {
	font-weight: revert;
}

.sv-layout .con-info-card-wrapper .normal,
.jor-image-card .jor-image-card__text {
	color: var(--jor-image-card-font-color);
	line-height: 1.5;
}
.jor-image-card .jor-image-card__text p {
	margin: 0;
	margin-bottom: 11px;
}

@media (max-width: 700px) {
	.jor-image-card,
	.sv-decoration-image-card {
		flex-direction: column;
	}

	.jor-image-card.jor-image-card__image-right,
	.jor-image-card.jor-image-card__image-bottom,
	.sv-decoration-image-card:has(> .sv-image-portlet:last-child) {
		flex-direction: column-reverse;
	}

    .jor-image-card.jor-image-card__image-left .jor-image-card__image-wrapper img,
    .jor-image-card.jor-image-card__image-right .jor-image-card__image-wrapper img,
    .sv-decoration-image-card > .sv-image-portlet img {
        max-height: 370px;
    }

	.jor-image-card .jor-image-card__image-wrapper,
	.sv-decoration-image-card > .sv-image-portlet {
		width: 100%;
	}

	.con-info-card__content,
	.jor-image-card__content,
	.sv-decoration-image-card > .sv-layout {
		padding: 1rem 1.5rem;
	}
}

/* Decoration: Dark panel
  * Styling applied when image card is placed within a Dark panel.
 ---------------------------------------------------------------------------- */

.sv-layout .jor-decoration-dark-panel .jor-image-card,
.sv-layout .jor-decoration-dark-panel .con-info-card-wrapper {
	background-color: transparent;
	border: 0;
	box-shadow: none;
	gap: 4rem;
}

.sv-layout
	.jor-decoration-dark-panel
	.sv-custom-module:first-child
	.jor-image-card,
.sv-layout
	.jor-decoration-dark-panel
	.sv-custom-module:first-child
	.con-info-card-wrapper {
	margin-top: 0;
}

.sv-layout
	.jor-decoration-dark-panel
	.sv-custom-module:last-child
	.jor-image-card,
.sv-layout
	.jor-decoration-dark-panel
	.sv-custom-module:last-child
	.con-info-card-wrapper {
	margin-bottom: 0;
}

.jor-decoration-dark-panel .jor-image-card__content {
	flex: 1;
}

@media (max-width: 700px) {
	.sv-layout .jor-decoration-dark-panel .jor-image-card {
		gap: 0.5rem;
	}

	.sv-layout .jor-decoration-dark-panel .con-info-card__content,
	.sv-layout .jor-decoration-dark-panel .jor-image-card__content {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Image card grid
 ---------------------------------------------------------------------------- */

.jor-image-card-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(var(--jor-image-card-grid-cols), 1fr);
	margin: 4rem 0;
}

.jor-image-card-grid > .sv-custom-module,
.jor-image-card-grid > .sv-custom-module > .sv-script-portlet,
.jor-image-card-grid > .sv-custom-module > [data-cid],
.jor-image-card-grid
	.con-info-card-wrapper.con-info-card-wrapper.con-info-card-wrapper,
.jor-image-card-grid .jor-image-card.jor-image-card {
	box-sizing: border-box;
	height: 100%;
}

.jor-image-card-grid
	.con-info-card-wrapper.con-info-card-wrapper.con-info-card-wrapper,
.jor-image-card-grid .jor-image-card.jor-image-card {
	margin: 0;
}

.jor-image-card-grid .con-info-card-wrapper.image-top {
	flex-direction: column;
}

.jor-image-card-grid .con-info-card-wrapper .con-info-card__content {
	height: auto !important;
}

.jor-image-card-grid .sv-custom-module:has(.jor-image-card__image-left),
.jor-image-card-grid .sv-custom-module:has(.jor-image-card__image-right) {
	grid-column: span var(--jor-image-card-grid-horizontal-span-width);
}

@media (max-width: 1100px) {
	.jor-image-card-grid {
		--jor-image-card-grid-cols: var(--jor-image-card-grid-cols-tablet);
		--jor-image-card-grid-horizontal-span-width: var(
			--jor-image-card-grid-horizontal-span-width-tablet
		);
	}
}

@media (max-width: 700px) {
	.jor-image-card-grid {
		--jor-image-card-grid-cols: var(--jor-image-card-grid-cols-mobile);
		--jor-image-card-grid-horizontal-span-width: var(
			--jor-image-card-grid-horizontal-span-width-mobile
		);
	}
}
