/* [dcw-explore] shortcode
 * A row of linked cards pointing at other pages on the site. Styled to sit
 * alongside the core feature blocks - same thick white border and rounded
 * corners.
 *
 * Three across on desktop, snapping straight to a single full width column at
 * 860px - the point at which three cards stop holding a readable line length.
 * There is deliberately no two column stage in between.
 */
.dcw-explore-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	width: 100%;
}

/* Above the single column breakpoint, fewer than 3 cards fill the row rather
 * than leaving a gap on the right */
@media only screen and (min-width: 861px) {

	.dcw-explore-wrapper.dcw-explore-count-1 {
		grid-template-columns: 1fr;
	}

	.dcw-explore-wrapper.dcw-explore-count-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.dcw-explore-wrapper.dcw-explore-count-4 {
		grid-template-columns: repeat(2, 1fr);
	}

}

.dcw-explore-card {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: 30px;
	border: 5px solid #fff;
	border-radius: 8px;
	background-color: #5586a7;
	color: #fff;
	text-decoration: none;
}

/* colour="clear" - a translucent white box with a translucent border, for the
 * cards that should read as a quieter second tier under the solid ones. Both
 * values are white so it takes on whatever colour the page section behind it
 * happens to be. */
.dcw-explore-card-clear {
	border-color: rgba(255, 255, 255, .35);
	background-color: rgba(255, 255, 255, .12);
}

.dcw-explore-card-clear .dcw-explore-button {
	border-color: rgba(255, 255, 255, .5);
}

/* The wrapper is in the selector to outweigh a theme rule underlining links on
 * hover - the card is one big link, so an underline would strike every line of
 * text inside it */
.dcw-explore-wrapper .dcw-explore-card-linked,
.dcw-explore-wrapper .dcw-explore-card-linked:hover,
.dcw-explore-wrapper .dcw-explore-card-linked:focus {
	text-decoration: none;
}

.dcw-explore-card-linked:hover,
.dcw-explore-card-linked:focus {
	opacity: .8;
}

.dcw-explore-card .dcw-explore-title {
	margin: 0 0 15px;
	color: #fff;
	font-size: 34px;
	line-height: 1.2;
}

.dcw-explore-card .dcw-explore-text {
	flex: 1 1 auto;
	margin: 0 0 25px;
	color: #fff;
	font-size: 20px;
	line-height: 1.5;
}

.dcw-explore-card .dcw-explore-button {
	align-self: flex-start;
	flex: 0 0 auto;
	/* Set explicitly rather than inherited from the card's link, so a theme link
	 * colour cannot bleed into the button */
	color: #fff;
	box-sizing: border-box;
	padding: 8px 22px;
	/* The page content button - see .dcw-button in the theme */
	border: 3px solid #fff;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, .14);
	font-size: 18px;
	line-height: 1.2;
}

.dcw-explore-card-linked:hover .dcw-explore-button,
.dcw-explore-card-linked:focus .dcw-explore-button {
	background-color: rgba(255, 255, 255, .28);
	color: #fff;
}

/* Medium devices and below - one full width card per row */
@media only screen and (max-width: 860px) {

	.dcw-explore-wrapper,
	.dcw-explore-wrapper.dcw-explore-count-1,
	.dcw-explore-wrapper.dcw-explore-count-2,
	.dcw-explore-wrapper.dcw-explore-count-4 {
		grid-template-columns: 1fr;
	}

	.dcw-explore-card {
		width: 100%;
		padding: 25px;
	}

	.dcw-explore-card .dcw-explore-title {
		font-size: 28px;
	}

	.dcw-explore-card .dcw-explore-text {
		font-size: 18px;
	}

}