/* =============================================================================
   CyberDilmeth Elements — Tools module styles (v1.1.0)
   Shared by [cd_tools] (home showcase) and [cd_tools_grid] (directory).

   Brand tokens (Blueprint §19). Local fallbacks are provided so the module
   still renders on-brand even on a page where the site-wide brand.css hasn't
   loaded. Green is NEVER used here — Subscribe/Confirm only.
   ============================================================================= */

.cd-tools,
.cd-tools-grid {
	--cd-blue:      var(--brand-blue, #2463EB);
	--cd-blue-dark: var(--blue-dark, #1746A0);
	--cd-navy:      var(--navy-ink, #0B1E3C);
	--cd-body:      var(--body, #41506B);
	--cd-muted:     var(--muted, #8A93A6);
	--cd-line:      var(--line, #E6EAF1);
	--cd-bg:        var(--section-bg, #F4F7FB);
	--cd-white:     var(--white, #FFFFFF);
	--cd-tint:      rgba(36, 99, 235, .10);   /* light-blue icon tile */
	--cd-radius:    var(--radius-card, 12px);

	--cd-cols-d: 4;
	--cd-cols-t: 2;
	--cd-cols-m: 1;

	box-sizing: border-box;
	font-family: var(--font-body, Inter, system-ui, -apple-system, sans-serif);
	color: var(--cd-body);
}

.cd-tools *,
.cd-tools-grid * { box-sizing: border-box; }

/* ---- Section header ---- */
.cd-tools-head { margin: 0 auto var(--space-6, 32px); max-width: 720px; }
.cd-tools.align-center .cd-tools-head,
.cd-tools-grid.align-center .cd-tools-head { text-align: center; }
.cd-tools.align-left   .cd-tools-head,
.cd-tools-grid.align-left   .cd-tools-head { text-align: left; max-width: none; }

.cd-tools-title {
	color: var(--cd-navy);
	font-family: var(--font-heading, "Plus Jakarta Sans", Inter, sans-serif);
	font-weight: 700;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
	line-height: 1.2;
	margin: 0 0 8px;
}
.cd-tools-sub {
	color: var(--cd-muted);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
}

/* ---- Grid ---- */
.cd-tools-grid-wrap {
	display: grid;
	grid-template-columns: repeat(var(--cd-cols-d), minmax(0, 1fr));
	gap: var(--space-4, 16px);
}

/* ---- Card ---- */
.cd-tool-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px 20px;
	background: var(--cd-white);
	border: 1px solid var(--cd-line);
	border-radius: var(--cd-radius);
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba(11, 30, 60, .05);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	min-height: 100%;
}
a.cd-tool-card:hover,
a.cd-tool-card:focus-visible { border-color: rgba(36, 99, 235, .35); }
.cd-tools.has-hover a.cd-tool-card:hover,
.cd-tools-grid.has-hover a.cd-tool-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(11, 30, 60, .10);
}
a.cd-tool-card:focus-visible {
	outline: 2px solid var(--cd-blue);
	outline-offset: 2px;
}

/* Icon tile — always brand blue on a light-blue tint. */
.cd-tool-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--cd-tint);
	color: var(--cd-blue);
	flex: 0 0 auto;
}
.cd-tool-ic svg { width: 24px; height: 24px; display: block; }
.cd-tool-ic .cd-tool-img { width: 26px; height: 26px; object-fit: contain; }

.cd-tool-body { display: block; }
.cd-tool-title {
	display: block;
	color: var(--cd-navy);
	font-family: var(--font-heading, "Plus Jakarta Sans", Inter, sans-serif);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.3;
	margin-bottom: 6px;
}
.cd-tool-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--cd-muted);
	font-size: .9rem;
	line-height: 1.5;
	min-height: 2.6em; /* keeps card heights even */
}

/* Meta row: chips + badges */
.cd-tool-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.cd-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px 3px 7px;
	font-size: .72rem;
	font-weight: 600;
	line-height: 1.4;
	border-radius: 999px;
	border: 1px solid var(--cd-line);
	color: var(--cd-body);
	background: var(--cd-bg);
}
.cd-chip svg { width: 13px; height: 13px; color: var(--cd-blue); }
.cd-chip-client { white-space: nowrap; }

.cd-badge-soon {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	font-size: .72rem;
	font-weight: 600;
	line-height: 1.4;
	border-radius: 999px;
	color: var(--cd-muted);
	background: var(--cd-bg);
	border: 1px solid var(--cd-line);
}

/* CTA */
.cd-tool-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	color: var(--cd-blue);
	font-weight: 600;
	font-size: .9rem;
}
.cd-tool-cta.is-muted { color: var(--cd-muted); }
.cd-arrow { width: 16px; height: 16px; transition: transform .18s ease; }
.cd-tools.has-hover a.cd-tool-card:hover .cd-arrow,
.cd-tools-grid.has-hover a.cd-tool-card:hover .cd-arrow { transform: translateX(3px); }

/* Coming-soon card is non-interactive */
.cd-tool-card.is-soon { cursor: default; box-shadow: none; }
.cd-tool-card.is-soon .cd-tool-ic { opacity: .8; }

/* ---- View-all row (home) ---- */
.cd-tools-cta-row { text-align: center; margin-top: var(--space-6, 32px); }
.cd-tools-viewall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cd-blue);
	font-weight: 700;
	text-decoration: none;
	font-size: .95rem;
}
.cd-tools-viewall:hover { color: var(--cd-blue-dark); }
.cd-tools-viewall .cd-arrow { transition: transform .18s ease; }
.cd-tools-viewall:hover .cd-arrow { transform: translateX(3px); }

/* ---- Search (directory) ---- */
.cd-tools-search {
	position: relative;
	max-width: 420px;
	margin: 0 0 var(--space-5, 24px);
}
.cd-tools-grid.align-center .cd-tools-search { margin-left: auto; margin-right: auto; }
.cd-search-ic {
	position: absolute;
	left: 14px; top: 50%;
	transform: translateY(-50%);
	color: var(--cd-muted);
	pointer-events: none;
}
.cd-search-ic svg { width: 18px; height: 18px; display: block; }
.cd-tools-q {
	width: 100%;
	padding: 11px 14px 11px 42px;
	font-size: .95rem;
	color: var(--cd-body);
	background: var(--cd-white);
	border: 1px solid var(--cd-line);
	border-radius: 10px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.cd-tools-q::placeholder { color: var(--cd-muted); }
.cd-tools-q:focus {
	border-color: var(--cd-blue);
	box-shadow: 0 0 0 3px rgba(36, 99, 235, .15);
}

/* ---- Filter tabs ---- */
.cd-tools-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 var(--space-5, 24px);
}
.cd-tools-grid.align-center .cd-tools-filters { justify-content: center; }
.cd-filter {
	appearance: none;
	cursor: pointer;
	padding: 7px 16px;
	font-size: .875rem;
	font-weight: 600;
	color: var(--cd-body);
	background: var(--cd-white);
	border: 1px solid var(--cd-line);
	border-radius: 999px;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cd-tools-grid .cd-tools-filters button.cd-filter,
.cd-tools-grid .cd-tools-filters button.cd-filter:link,
.cd-tools-grid .cd-tools-filters button.cd-filter:visited {
	background: var(--cd-white) !important;
	background-image: none !important;
	color: var(--cd-body) !important;
	border-color: var(--cd-line) !important;
	text-shadow: none !important;
}
.cd-tools-grid .cd-tools-filters button.cd-filter:hover,
.cd-tools-grid .cd-tools-filters button.cd-filter:focus,
.cd-tools-grid .cd-tools-filters button.cd-filter:active {
	background: var(--cd-white) !important;   /* beat Eikra's global button:hover (was black) */
	background-image: none !important;
	border-color: rgba(36, 99, 235, .5) !important;
	color: var(--cd-blue) !important;
}
.cd-tools-grid .cd-tools-filters button.cd-filter.is-active,
.cd-tools-grid .cd-tools-filters button.cd-filter.is-active:hover,
.cd-tools-grid .cd-tools-filters button.cd-filter.is-active:focus,
.cd-tools-grid .cd-tools-filters button.cd-filter.is-active:active {
	background: var(--cd-blue) !important;
	background-image: none !important;
	border-color: var(--cd-blue) !important;
	color: #fff !important;
}
.cd-filter:focus-visible { outline: 2px solid var(--cd-blue); outline-offset: 2px; }

/* ---- Empty state + load more ---- */
.cd-tools-empty {
	text-align: center;
	color: var(--cd-muted);
	font-size: .95rem;
	padding: 32px 0;
	margin: 0;
}
.cd-tools-more-row { text-align: center; margin-top: var(--space-5, 24px); }
.cd-tools-more {
	appearance: none;
	cursor: pointer;
	padding: 10px 22px;
	font-size: .9rem;
	font-weight: 600;
	color: #fff;
	background: var(--cd-blue);
	border: 1px solid var(--cd-blue);
	border-radius: 8px;
	transition: background .15s ease;
}
.cd-tools-more:hover { background: var(--cd-blue-dark); }
.cd-tools-more:focus-visible { outline: 2px solid var(--cd-navy); outline-offset: 2px; }
.cd-tool-card[hidden] { display: none !important; }

/* ---- Screen-reader-only ---- */
.cd-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.cd-tools-grid-wrap { grid-template-columns: repeat(var(--cd-cols-t), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.cd-tools-grid-wrap { grid-template-columns: repeat(var(--cd-cols-m), minmax(0, 1fr)); }
	.cd-tools-head { text-align: center; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.cd-tool-card,
	.cd-arrow { transition: none !important; }
	.cd-tools.has-hover a.cd-tool-card:hover,
	.cd-tools-grid.has-hover a.cd-tool-card:hover { transform: none; }
}

/* --- v1.0 polish (within palette: blue/navy only) --- */
.cd-tool-ic{
	background:linear-gradient(135deg, rgba(36,99,235,.12), rgba(36,99,235,.06));
	box-shadow:inset 0 0 0 1px rgba(36,99,235,.10);
}
.cd-tools.has-hover a.cd-tool-card:hover .cd-tool-ic,
.cd-tools-grid.has-hover a.cd-tool-card:hover .cd-tool-ic{
	background:var(--cd-blue); color:#fff; transition:background .18s ease,color .18s ease;
}
.cd-tool-card.is-soon{ background:linear-gradient(180deg,#fff, #FBFCFE); }
.cd-badge-soon{ letter-spacing:.02em; }