/*
 * Case Study category archive - visual reproduction of Divi body layout 25540.
 *
 * Numbers come from the layout's own module settings plus the computed boxes
 * the live Divi site renders at 1440px:
 *   hero      gradient #1856eb 70% / #ffffff 70%, padding 22px 0 7px
 *   rows      80% wide capped at 1080px, Divi gutter width 3 (5.5%)
 *   cards     320px wide (29.667%), 40px of padding, #F5F5F7
 *   title     23px/1.2em weight 600 in #1955ED, centred
 *   Read More 18px/1.7em weight 500 in #1955ED, underlined, arrow after it
 *
 * The hero repeats the blogs listing's hero rather than sharing a stylesheet
 * with it: each of these restore plugins stands on its own so any one of them
 * can be deleted without disturbing the others.
 */

.eldm-case-study,
.eldm-case-study *,
.eldm-case-study *:before,
.eldm-case-study *:after {
	box-sizing: border-box;
}

.eldm-case-study {
	background-color: #fff;
	font-family: 'Noto Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7em;
	color: #666;
}

.eldm-case-study .eldm-row {
	position: relative;
	width: 80%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 30px 0;
	text-align: left;
}

/* ---------------------------------------------------------------- hero --- */

.eldm-cs-hero {
	background-image: linear-gradient(180deg, #1856eb 70%, #ffffff 70%);
	padding: 22px 0 7px;
}

.eldm-cs-hero .eldm-row--hero {
	display: flex;
	padding-top: 14px;
}

.eldm-cs-hero .eldm-col {
	width: 47.25%;
	margin-right: 5.5%;
}

.eldm-cs-hero .eldm-col:last-child {
	margin-right: 0;
}

.eldm-cs-hero .eldm-col--text {
	align-self: center;
}

.eldm-case-study .eldm-hero-text {
	padding-left: 90px;
	padding-right: 90px;
	color: #F5F5F7;
}

.eldm-case-study .eldm-hero-text h2 {
	margin: 0;
	padding-bottom: 10px;
	font-family: 'Noto Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size: 32px;
	font-weight: 700;
	font-style: italic;
	line-height: 1em;
	color: #F5F5F7;
}

.eldm-case-study .eldm-hero-media {
	display: block;
	width: 80%;
	margin-left: 0;
	text-align: left;
	line-height: 0;
}

.eldm-case-study .eldm-hero-media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* --------------------------------------------------------------- cards --- */

/* The section carries a 1px top padding from the layout; the bottom is Divi's
   default section padding of 4%. */
.eldm-cs-list {
	padding: 1px 0 4%;
}

/* Divi gutter width 3: three 29.667% columns 5.5% apart. The cards are not
   equal height - the row has no make_equal - so they sit on the top edge. */
.eldm-case-study .eldm-cs-grid {
	display: flex;
	align-items: flex-start;
	column-gap: 5.5%;
}

.eldm-case-study .eldm-cs-card {
	flex: 1 1 0;
	min-width: 0;
	padding: 40px;
	background-color: #F5F5F7;
	text-align: center;
	word-wrap: break-word;
}

.eldm-case-study .eldm-cs-card-body {
	padding-bottom: 20px;
}

.eldm-case-study .eldm-cs-card h2 {
	margin: 0;
	padding-bottom: 10px;
	font-family: 'Noto Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.2em;
	color: #1955ED;
}

/* Divi's button with a zero border width: the label is underlined, the arrow
   that follows it is not. */
.eldm-case-study .eldm-cs-more {
	display: inline-block;
	position: relative;
	padding: .3em 1em;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.7em;
	color: #1955ED;
	text-decoration: none;
	background-color: transparent;
	border: 0;
	border-radius: 3px;
	transition-duration: .2s;
}

.eldm-case-study .eldm-cs-more-text {
	text-decoration: underline;
}

.eldm-case-study .eldm-cs-more:hover {
	background: rgba(0, 0, 0, .05);
}

/* button_icon "$" is the ETmodules long right arrow, and button_on_hover
   is off, so Divi shows it at rest rather than on hover. */
.eldm-case-study .eldm-cs-icon:after {
	content: "\24";
	font-family: ETmodules;
	font-size: 18px;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	margin-left: 5.4px;
	text-decoration: none;
}

/* Divi's icon font lives in the Divi theme folder. If that has gone, fall back
   to a plain arrow rather than rendering the raw "$" the glyph maps to. */
.eldm-case-study .eldm-cs-icon-fallback:after {
	content: "\2192";
	font-size: 18px;
	line-height: 1;
	margin-left: 5.4px;
	text-decoration: none;
}

/* -------------------------------------------------------------- tablet --- */

@media only screen and (max-width: 980px) {

	.eldm-cs-hero .eldm-row--hero {
		display: block;
	}

	.eldm-cs-hero .eldm-col {
		width: 100%;
		margin-right: 0;
	}

	.eldm-cs-hero .eldm-col--text {
		margin-bottom: 30px;
	}

	.eldm-case-study .eldm-hero-text {
		padding-left: 0;
		padding-right: 0;
	}

	.eldm-case-study .eldm-hero-media {
		width: 100%;
	}

	/* Divi stacks columns below 980px. */
	.eldm-case-study .eldm-cs-grid {
		display: block;
	}

	.eldm-case-study .eldm-cs-card {
		margin-bottom: 30px;
	}

	.eldm-case-study .eldm-cs-card:last-child {
		margin-bottom: 0;
	}
}

/* ----------------------------------------------------------- wide desk --- */

@media only screen and (min-width: 1350px) {

	.eldm-case-study .eldm-row {
		padding: 27px 0;
	}

	.eldm-cs-hero .eldm-row--hero {
		padding-top: 14px;
	}

	.eldm-cs-list {
		padding: 1px 0 54px;
	}
}