/* Payd Co Blogs & Guides hub.
   The theme (UIkit 3 + paydco-style.css) provides layout, cards, tabs,
   filters, buttons, hero and typography. This file adds only what the theme
   has no component for: entry-type badges, tag pills, the module label, the
   card icon chip, and the gate CTA accent. Heading purple #58468c matches
   elements/typo.css. */

.guide-card {
	text-decoration: none;
}

/* Entry cards stay white on the site's blue page background (.color-blue in
   elements/pages.css, set on these views in includes/guides.php) and carry the
   site's blue card glow from elements/ui.css instead of UIkit's grey shadow.
   The hover state has to be restated here because UIkit's
   .uk-card-default.uk-card-hover:hover outranks the theme's .uk-card:hover. */

.uk-card-default.guide-card {
	box-shadow: 0 10px 35px 0 rgba(137, 173, 255, 0.35);
}

.uk-card-default.uk-card-hover.guide-card:hover {
	background-color: #fff;
	box-shadow: 0 10px 55px 5px rgba(137, 173, 255, 0.35);
	/* The theme lifts cards 20px on hover, which is the exact gutter of this
	   stacked list, so a hovered entry butts into the one above it. */
	transform: translate3d(0, -6px, 0);
}

.guide-card-icon {
	width: 40px;
	height: 40px;
	border-radius: 6px;
	background: #f1edf7;
	color: #58468c;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.guide-card-icon svg {
	width: 21px;
	height: 21px;
}

.guide-card-module {
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #58468c;
}

.guide-card-title {
	font-size: 17px;
	line-height: 1.35;
}

.guide-card-arrow {
	color: #58468c;
	flex-shrink: 0;
}

/* Entry-type badges: Fix / Tip / FAQ */

.uk-label.guide-label {
	font-size: 10px;
	letter-spacing: 0.05em;
	flex-shrink: 0;
	margin-top: 3px;
}

.uk-label.guide-label-fix {
	background: #fdecea;
	color: #b3261e;
}

.uk-label.guide-label-tip {
	background: #e9f6ec;
	color: #1e7d3c;
}

.uk-label.guide-label-faq {
	background: #fbf2d9;
	color: #8a6100;
}

.uk-label.guide-tag {
	font-size: 10px;
	background: #f4f2f8;
	color: #6f6a7c;
	margin-right: 4px;
}

/* Hero copy of the badge needs to sit inline with the meta line */

.hero .uk-label.guide-label {
	margin-right: 6px;
	vertical-align: 1px;
}

/* Gate CTA card accent */

.guide-gate {
	border-left: 4px solid #58468c;
}

.guide-gate-icon {
	width: 20px;
	height: 20px;
	vertical-align: -3px;
	margin-right: 4px;
	color: #58468c;
}

/* CTA band: extra clearance above the footer */

.guides-cta-band {
	padding-bottom: 96px;
}

@media (min-width: 960px) {

	.guides-cta-band {
		padding-bottom: 130px;
	}
}