/*
 * Blog — listing grid (home.php / archive.php), single article
 * (single.php) and the shared card (inc/blog.php's
 * cyberammo_render_blog_card()). Layered on top of home.css, same as
 * pages.css, for the hero header / grid-bg / .dma-btn-a3655c67 etc.
 */

/* ---------- Listing grid ---------- */
.dma-blog-grid-wrap-e91c4a08 { max-width: 1200px; margin: 0 auto; padding: 20px 24px 40px; }
.dma-blog-grid-e91c4a08 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dma-blog-empty-e91c4a08 { text-align: center; color: var(--dma-text-muted); padding: 60px 20px; font-size: 14px; }

.dma-blog-card-e91c4a08 {
	display: flex; flex-direction: column; background: var(--dma-surface); border: 1px solid var(--dma-border);
	overflow: hidden; transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.dma-blog-card-e91c4a08:hover { border-color: rgba(239, 82, 78, 0.3); background: var(--dma-surface-hover); box-shadow: 0 4px 30px rgba(239, 82, 78, 0.08), 0 0 0 1px rgba(239, 82, 78, 0.1); transform: translateY(-2px); }

.dma-blog-card-media-e91c4a08 { display: block; aspect-ratio: 16 / 9; background: var(--dma-bg); position: relative; overflow: hidden; }
.dma-blog-card-media-e91c4a08 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dma-blog-card-icon-e91c4a08 {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dma-accent);
	background:
		radial-gradient(ellipse 200px 140px at 30% 20%, rgba(239, 82, 78, 0.14) 0%, transparent 70%),
		linear-gradient(rgba(239, 82, 78, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(239, 82, 78, 0.05) 1px, transparent 1px);
	background-size: auto, 20px 20px, 20px 20px;
}
.dma-blog-card-icon-e91c4a08 svg { width: 34px; height: 34px; }

.dma-blog-card-body-e91c4a08 { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
.dma-blog-card-cat-e91c4a08 { text-decoration: none; }
.dma-blog-card-cat-e91c4a08:hover { background: var(--dma-accent); color: var(--dma-white); border-color: var(--dma-accent); }
.dma-blog-card-title-e91c4a08 { font-size: 17px; font-weight: 700; line-height: 1.35; }
.dma-blog-card-title-e91c4a08 a { color: var(--dma-heading); text-decoration: none; }
.dma-blog-card-title-e91c4a08 a:hover { color: var(--dma-accent); }
.dma-blog-card-excerpt-e91c4a08 { font-size: 13px; color: var(--dma-text-muted); line-height: 1.65; flex: 1; }
.dma-blog-card-meta-e91c4a08 { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--dma-text-muted); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--dma-border); }

.dma-blog-pagination-e91c4a08 { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 36px; flex-wrap: wrap; }
.dma-blog-pagination-e91c4a08 .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px;
	background: var(--dma-surface); border: 1px solid var(--dma-border); color: var(--dma-text-muted); text-decoration: none;
	font-size: 13px; font-weight: 600; transition: border-color 0.2s ease, color 0.2s ease;
}
.dma-blog-pagination-e91c4a08 .page-numbers:hover { border-color: var(--dma-accent); color: var(--dma-heading); }
.dma-blog-pagination-e91c4a08 .page-numbers.current { background: var(--dma-accent); border-color: var(--dma-accent); color: #fff; }
.dma-blog-pagination-e91c4a08 .page-numbers.dots { border: none; background: none; }

/* ---------- Single article ---------- */
.dma-blog-article-e91c4a08 { max-width: 760px; margin: 0 auto; padding: 32px 24px 20px; }

.dma-blog-breadcrumb-e91c4a08 { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dma-text-muted); margin-bottom: 28px; flex-wrap: wrap; }
.dma-blog-breadcrumb-e91c4a08 a { color: var(--dma-text-muted); text-decoration: none; }
.dma-blog-breadcrumb-e91c4a08 a:hover { color: var(--dma-accent); }

.dma-blog-article-head-e91c4a08 { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.dma-blog-article-title-e91c4a08 { font-size: 34px; font-weight: 800; color: var(--dma-heading); letter-spacing: -0.02em; line-height: 1.2; }
.dma-blog-meta-e91c4a08 { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dma-text-muted); }
.dma-blog-byline-e91c4a08 { color: var(--dma-heading); font-weight: 700; }

.dma-blog-article-media-e91c4a08 { border: 1px solid var(--dma-border); margin-bottom: 32px; overflow: hidden; aspect-ratio: 16 / 7; }
.dma-blog-article-media-e91c4a08 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dma-blog-article-media-icon-e91c4a08 {
	display: flex; align-items: center; justify-content: center; color: var(--dma-accent); background: var(--dma-surface);
	background-image: radial-gradient(ellipse 400px 240px at 25% 20%, rgba(239, 82, 78, 0.12) 0%, transparent 70%),
		linear-gradient(rgba(239, 82, 78, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(239, 82, 78, 0.05) 1px, transparent 1px);
	background-size: auto, 26px 26px, 26px 26px;
}
.dma-blog-article-media-icon-e91c4a08 svg { width: 56px; height: 56px; }

/* Prose */
.dma-blog-content-e91c4a08 { font-size: 15px; line-height: 1.85; color: var(--dma-text); }
.dma-blog-content-e91c4a08 > *:first-child { margin-top: 0; }
.dma-blog-content-e91c4a08 p { margin: 0 0 20px; color: var(--dma-text); }
.dma-blog-content-e91c4a08 h2 { font-size: 22px; font-weight: 800; color: var(--dma-heading); letter-spacing: -0.01em; margin: 40px 0 16px; line-height: 1.3; }
.dma-blog-content-e91c4a08 h3 { font-size: 18px; font-weight: 700; color: var(--dma-heading); margin: 32px 0 14px; }
.dma-blog-content-e91c4a08 ul, .dma-blog-content-e91c4a08 ol { margin: 0 0 20px; padding-left: 22px; color: var(--dma-text); }
.dma-blog-content-e91c4a08 li { margin-bottom: 8px; line-height: 1.7; }
.dma-blog-content-e91c4a08 a { color: var(--dma-accent); font-weight: 600; text-decoration: none; }
.dma-blog-content-e91c4a08 a:hover { text-decoration: underline; }
.dma-blog-content-e91c4a08 strong { color: var(--dma-heading); }
.dma-blog-content-e91c4a08 blockquote {
	margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--dma-accent); color: var(--dma-text-muted);
	font-size: 15px; font-style: italic; line-height: 1.7;
}
.dma-blog-content-e91c4a08 code { background: var(--dma-surface); border: 1px solid var(--dma-border); padding: 2px 6px; border-radius: 4px; font-family: var(--dma-mono); font-size: 13px; color: var(--dma-accent); }
.dma-blog-content-e91c4a08 hr { border: none; border-top: 1px solid var(--dma-border); margin: 36px 0; }
.dma-blog-content-e91c4a08 img { max-width: 100%; height: auto; border: 1px solid var(--dma-border); }

/* Related */
.dma-blog-related-e91c4a08 { max-width: 1200px; margin: 20px auto 0; padding: 40px 24px 60px; }
.dma-blog-related-title-e91c4a08 { font-size: 20px; font-weight: 800; color: var(--dma-heading); margin-bottom: 24px; letter-spacing: -0.01em; }

/* End-of-article CTA — sits right where the post text ends, inside the
   760px-wide .dma-blog-article-e91c4a08 column, above "More From the
   Blog". Rendered by the template for every post (see
   cyberammo_render_cta_banner() in inc/blog.php); never a shortcode or
   post-content markup, so it can't be duplicated or left off. */
.dma-blog-article-cta-e91c4a08 {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 44px;
	padding: 28px; background: var(--dma-surface); border: 1px solid var(--dma-border);
}
.dma-blog-article-cta-title-e91c4a08 { font-size: 16px; font-weight: 700; color: var(--dma-heading); margin-bottom: 4px; }
.dma-blog-article-cta-text-e91c4a08 { font-size: 13px; color: var(--dma-text-muted); }
.dma-blog-article-cta-actions-e91c4a08 { display: flex; gap: 10px; flex-wrap: wrap; }
.dma-blog-cta-solid-e91c4a08 { background: var(--dma-accent); color: #fff; }
.dma-blog-cta-solid-e91c4a08:hover { background: var(--dma-accent-hover); color: #fff; }

/* Breadcrumb variant for the top of listing pages (blog index, category
   archive, search results) — the article-scoped breadcrumb above sits
   inside the 760px-wide .dma-blog-article-e91c4a08, this one sits directly
   under the header/hero at the full 1200px listing width. */
.dma-blog-breadcrumb-top-e91c4a08 { max-width: 1200px; margin: 28px auto 0; padding: 0 24px; margin-bottom: 0; }

/* ---------- Featured post ---------- */
.dma-blog-featured-wrap-e91c4a08 { max-width: 1200px; margin: 32px auto 0; padding: 0 24px; }
.dma-blog-featured-e91c4a08 {
	width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
	background: var(--dma-surface); border: 1px solid rgba(239, 82, 78, 0.25);
}
.dma-blog-featured-media-e91c4a08 { display: block; position: relative; overflow: hidden; background: var(--dma-bg); min-height: 340px; }
.dma-blog-featured-media-e91c4a08 img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.dma-blog-featured-icon-e91c4a08 {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dma-accent);
	background:
		radial-gradient(ellipse 360px 260px at 30% 20%, rgba(239, 82, 78, 0.18) 0%, transparent 70%),
		linear-gradient(rgba(239, 82, 78, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(239, 82, 78, 0.05) 1px, transparent 1px);
	background-size: auto, 22px 22px, 22px 22px;
}
.dma-blog-featured-icon-e91c4a08 svg { width: 84px; height: 84px; }
.dma-blog-featured-body-e91c4a08 { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 28px; justify-content: center; }
.dma-blog-featured-eyebrow-e91c4a08 {
	font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dma-accent); margin: 0;
}
.dma-blog-featured-title-e91c4a08 { font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
.dma-blog-featured-title-e91c4a08 a { color: var(--dma-heading); text-decoration: none; }
.dma-blog-featured-title-e91c4a08 a:hover { color: var(--dma-accent); }
.dma-blog-featured-excerpt-e91c4a08 { font-size: 13px; color: var(--dma-text-muted); line-height: 1.65; margin: 0; }
.dma-blog-featured-body-e91c4a08 .dma-blog-card-meta-e91c4a08 { border-top: none; padding-top: 0; margin-top: 0; }
.dma-blog-featured-body-e91c4a08 .dma-blog-cta-solid-e91c4a08 { align-self: flex-start; margin-top: 4px; font-size: 11px; padding: 8px 14px; }

/* ---------- Toolbar: search + filters ---------- */
.dma-blog-toolbar-e91c4a08 {
	max-width: 1200px; margin: 32px auto 0; padding: 0 24px;
	display: flex; flex-direction: column; gap: 16px;
}
/* home.css gives every direct child of .dma-page-a3655c67 its own
   stacking context at z-index:1 (for the fixed grid background behind
   everything) — which traps the search dropdown's z-index inside the
   toolbar's own layer, so the grid-wrap section below it (a later
   sibling, same z-index:1) painted over the open dropdown. Raise just
   the toolbar's stacking context above its siblings so the dropdown
   escapes correctly. Matches that rule's specificity + loads after it,
   so it wins on the cascade without needing !important. */
.dma-page-a3655c67 > .dma-blog-toolbar-e91c4a08 { z-index: 5; }

.dma-blog-search-e91c4a08 { position: relative; max-width: 420px; }
.dma-blog-search-input-e91c4a08 {
	width: 100%; height: 42px; padding: 0 42px 0 16px; background: var(--dma-surface); border: 1px solid var(--dma-border); color: var(--dma-text);
	font-size: 13px; font-family: var(--dma-font); outline: none; transition: border-color 0.2s ease;
}
.dma-blog-search-input-e91c4a08::placeholder { color: var(--dma-text-muted); }
.dma-blog-search-input-e91c4a08:focus { border-color: rgba(239, 82, 78, 0.4); }
.dma-blog-search-e91c4a08 button[type="submit"] {
	position: absolute; top: 0; right: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
	background: none; border: none; color: var(--dma-text-muted); cursor: pointer; padding: 0;
}
.dma-blog-search-e91c4a08 button[type="submit"]:hover { color: var(--dma-accent); }
.dma-blog-search-e91c4a08 button[type="submit"] svg { width: 16px; height: 16px; }

.dma-blog-search-results-e91c4a08 {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20;
	background: var(--dma-surface); border: 1px solid var(--dma-border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
	max-height: 340px; overflow-y: auto;
}
.dma-blog-search-result-e91c4a08 {
	display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; text-decoration: none;
	border-bottom: 1px solid var(--dma-border); transition: background 0.15s ease;
}
.dma-blog-search-result-e91c4a08:last-child { border-bottom: none; }
.dma-blog-search-result-e91c4a08:hover, .dma-blog-search-result-e91c4a08.dma-blog-search-result-active-e91c4a08 { background: var(--dma-surface-hover); }
.dma-blog-search-result-title-e91c4a08 { font-size: 13px; font-weight: 600; color: var(--dma-text); }
.dma-blog-search-result-cat-e91c4a08 { font-size: 11px; color: var(--dma-accent); }
.dma-blog-search-empty-e91c4a08 { padding: 16px; font-size: 12px; color: var(--dma-text-muted); text-align: center; }

.dma-blog-filters-e91c4a08 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dma-blog-filter-chip-e91c4a08 {
	display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
	padding: 7px 16px; background: var(--dma-surface); color: var(--dma-text-muted); border: 1px solid var(--dma-border); cursor: pointer;
	transition: all 0.25s ease; white-space: nowrap; user-select: none; text-decoration: none;
}
.dma-blog-filter-chip-e91c4a08:hover { border-color: rgba(239, 82, 78, 0.25); color: var(--dma-text); background: var(--dma-surface-hover); }
.dma-blog-filter-active-e91c4a08 {
	background: rgba(239, 82, 78, 0.12) !important; color: var(--dma-accent) !important; border-color: rgba(239, 82, 78, 0.3) !important; font-weight: 600;
}
.dma-blog-filter-active-e91c4a08:hover { background: rgba(239, 82, 78, 0.18) !important; border-color: rgba(239, 82, 78, 0.45) !important; color: var(--dma-accent) !important; }

@media (max-width: 1000px) {
	.dma-blog-grid-e91c4a08 { grid-template-columns: repeat(2, 1fr); }
	.dma-blog-featured-e91c4a08 { grid-template-columns: 1fr; }
	.dma-blog-featured-media-e91c4a08 { min-height: 220px; position: relative; aspect-ratio: 16 / 9; }
	.dma-blog-featured-media-e91c4a08 img { position: static; }
}
@media (max-width: 700px) {
	.dma-blog-grid-e91c4a08 { grid-template-columns: 1fr; }
	.dma-blog-grid-wrap-e91c4a08 { padding: 16px 16px 32px; }
	.dma-blog-article-e91c4a08 { padding: 24px 16px 12px; }
	.dma-blog-article-title-e91c4a08 { font-size: 26px; }
	.dma-blog-article-cta-e91c4a08 { flex-direction: column; align-items: flex-start; text-align: left; padding: 22px; }
	.dma-blog-related-e91c4a08 { padding: 32px 16px 48px; }
	.dma-blog-breadcrumb-top-e91c4a08 { padding: 0 16px; }
	.dma-blog-featured-wrap-e91c4a08 { margin: 24px auto 0; padding: 0 16px; }
	.dma-blog-featured-body-e91c4a08 { padding: 22px; }
	.dma-blog-featured-title-e91c4a08 { font-size: 20px; }
	.dma-blog-toolbar-e91c4a08 { margin: 24px auto 0; padding: 0 16px; }
	.dma-blog-search-e91c4a08 { max-width: 100%; }
	.dma-blog-filters-e91c4a08 { gap: 6px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
	.dma-blog-filters-e91c4a08::-webkit-scrollbar { display: none; }
	.dma-blog-filter-chip-e91c4a08 { padding: 6px 12px; font-size: 11px; flex-shrink: 0; }
}