/*
| Epoxy Modern Article Components
| WordPress article versions of the Product #10 hero, cards, badges and callouts.
*/

.epoxy-article,
.entry-content{
	--article-navy:#173f5f;
	--article-blue:#236b8e;
	--article-pale:#edf5f8;
	--article-border:#ccd9df;
	--article-text:#263238;
	--article-muted:#5d6b73;
	color:var(--article-text);
}

.epoxy-hero{
	border:1px solid var(--article-border);
	border-top:6px solid var(--article-navy);
	border-radius:10px;
	background:linear-gradient(135deg,#fff 0%,#f3f8fa 100%);
	padding:1.5rem;
	margin:0 0 1.25rem;
}
.epoxy-kicker{
	margin:0 0 .35rem;
	color:var(--article-blue);
	font-family:Arial,Helvetica,sans-serif;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	font-size:.82rem;
}
.epoxy-hero h1{
	margin:0 0 .45rem;
	color:var(--article-navy);
	font-size:clamp(1.8rem,4vw,2.65rem);
}
.epoxy-subtitle{
	margin:.45rem 0 0;
	max-width:950px;
	font-size:1.08rem;
	color:#3d4a52;
}
.epoxy-badges{
	display:flex;
	flex-wrap:wrap;
	gap:.55rem;
	margin-top:1rem;
}
.epoxy-badge{
	display:inline-block;
	padding:.38rem .7rem;
	border-radius:999px;
	background:var(--article-pale);
	border:1px solid #c7dbe3;
	color:var(--article-navy);
	font-family:Arial,Helvetica,sans-serif;
	font-weight:700;
	font-size:.9rem;
	white-space:nowrap;
}

.epoxy-grid{
	display:grid;
	grid-template-columns:repeat(12,minmax(0,1fr));
	gap:1rem;
}
.epoxy-card{
	grid-column:span 12;
	border:1px solid var(--article-border);
	border-radius:9px;
	background:#fff;
	padding:1.25rem;
	margin-bottom:1rem;
	box-shadow:0 2px 8px rgba(20,45,60,.05);
	overflow:hidden;
}
.epoxy-card--half{grid-column:span 6}
.epoxy-card--third{grid-column:span 4}
.epoxy-card>h2:first-child,
.epoxy-card>h3:first-child{margin-top:0}
.epoxy-card p:last-child,
.epoxy-card ul:last-child,
.epoxy-card ol:last-child{margin-bottom:0}

.epoxy-callout,
.epoxy-power-tip{
	border-left:5px solid #c88900;
	background:#fff8e8;
	padding:1rem 1.15rem;
	margin:1.25rem 0;
}
.epoxy-callout h2,
.epoxy-power-tip h2{
	margin:0 0 .6rem;
	font-size:1.15rem;
	text-transform:uppercase;
	letter-spacing:.04em;
}
.epoxy-callout--note{border-left-color:var(--article-blue);background:var(--article-pale)}
.epoxy-callout--warning{border-left-color:#c88900;background:#fff8e8}
.epoxy-callout--success{border-left-color:#2d7a46;background:#eef8f1}
.epoxy-power-tip{
	border-left-width:8px;
	border-left-color:#005a9c;
	background:#eef6fc;
	border-radius:5px;
	box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.epoxy-power-tip h2{color:#005a9c}

.entry-content blockquote{
	margin:1.25rem 0;
	padding:.8rem 1.1rem;
	border-left:5px solid var(--article-blue);
	background:#f6f9fb;
	color:#34434b;
}
.entry-content figure{margin:1.4rem auto}
.entry-content figcaption{
	margin-top:.45rem;
	color:var(--article-muted);
	font-size:.9rem;
	text-align:center;
}

.epoxy-related-links{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:.7rem 1rem;
	padding:0;
	list-style:none;
}
.epoxy-related-links a{
	display:block;
	height:100%;
	border:1px solid var(--article-border);
	border-radius:7px;
	background:#fbfdfe;
	padding:.72rem .82rem;
	font-weight:700;
	text-decoration:none;
}

@media(max-width:800px){
	.epoxy-card--half,
	.epoxy-card--third{grid-column:span 12}
	.epoxy-related-links{grid-template-columns:1fr}
	.epoxy-hero,
	.epoxy-card{padding:1rem}
}