/**
 * Interactive tools — calculator / promotional cards (author bio pattern from static HTML).
 *
 * Add CSS class **interactive-tools** (or ID **interactive-tools**) on the Elementor container
 * wrapping an HTML widget with `.section-block` > `.sec-label` + `.tool-grid` > `a.tool-card`.
 *
 * @package Personal_Team_Elementor
 * @since 1.2.15
 */

.interactive-tools,
#interactive-tools {
	--pte-it-navy: #0a3161;
	--pte-it-red: #b31942;
	--pte-it-muted: #5a6a7a;
	--pte-it-navy-bg: rgba(10, 49, 97, 0.07);
	--pte-it-navy-border: rgba(10, 49, 97, 0.12);

	box-sizing: border-box;
}

.interactive-tools *,
#interactive-tools * {
	box-sizing: border-box;
}

.interactive-tools.e-con,
#interactive-tools.e-con {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
	margin: 0;
}

.interactive-tools.e-con > .e-con-inner,
#interactive-tools.e-con > .e-con-inner {
	--padding-block-start: 0;
	--padding-block-end: 0;
	--padding-inline-start: 0;
	--padding-inline-end: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start !important;
	align-items: stretch !important;
	align-content: flex-start !important;
	width: 100%;
}

.interactive-tools .elementor-widget,
#interactive-tools .elementor-widget {
	align-self: stretch;
	width: 100%;
}

.interactive-tools .section-block,
#interactive-tools .section-block {
	margin: 0;
}

.interactive-tools .sec-label,
#interactive-tools .sec-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pte-it-red);
	margin: 0 0 0.65rem;
	line-height: 1.3;
}

.interactive-tools .tool-grid,
#interactive-tools .tool-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-top: 0.6rem;
}

.interactive-tools a.tool-card,
#interactive-tools a.tool-card {
	padding: 0.9rem 1rem;
	background: var(--pte-it-navy-bg);
	border: 1px solid var(--pte-it-navy-border);
	border-radius: 8px;
	text-decoration: none !important;
	color: inherit !important;
	display: block;
	transition: background 0.2s, border-color 0.2s;
}

.interactive-tools a.tool-card:hover,
.interactive-tools a.tool-card:focus-visible,
#interactive-tools a.tool-card:hover,
#interactive-tools a.tool-card:focus-visible {
	background: var(--pte-it-navy);
	border-color: var(--pte-it-navy);
}

.interactive-tools a.tool-card:hover .tool-name,
.interactive-tools a.tool-card:hover .tool-desc,
.interactive-tools a.tool-card:focus-visible .tool-name,
.interactive-tools a.tool-card:focus-visible .tool-desc,
#interactive-tools a.tool-card:hover .tool-name,
#interactive-tools a.tool-card:hover .tool-desc,
#interactive-tools a.tool-card:focus-visible .tool-name,
#interactive-tools a.tool-card:focus-visible .tool-desc {
	color: #fff !important;
}

.interactive-tools .tool-name,
#interactive-tools .tool-name {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--pte-it-navy);
	line-height: 1.3;
}

.interactive-tools .tool-desc,
#interactive-tools .tool-desc {
	font-size: 12px;
	color: var(--pte-it-muted);
	margin-top: 3px;
	line-height: 1.4;
}

@media (max-width: 680px) {
	.interactive-tools .tool-grid,
	#interactive-tools .tool-grid {
		grid-template-columns: 1fr;
	}
}

/* Elementor / kit */
.elementor-element.interactive-tools .sec-label,
.elementor-element#interactive-tools .sec-label {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--pte-it-red) !important;
	margin: 0 0 0.65rem !important;
	line-height: 1.3 !important;
}

.elementor-element.interactive-tools .tool-grid,
.elementor-element#interactive-tools .tool-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 0.75rem !important;
	margin-top: 0.6rem !important;
}

.elementor-element.interactive-tools a.tool-card,
.elementor-element#interactive-tools a.tool-card {
	padding: 0.9rem 1rem !important;
	background: var(--pte-it-navy-bg) !important;
	border: 1px solid var(--pte-it-navy-border) !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	color: inherit !important;
	display: block !important;
}

.elementor-element.interactive-tools a.tool-card:hover,
.elementor-element#interactive-tools a.tool-card:hover {
	background: var(--pte-it-navy) !important;
	border-color: var(--pte-it-navy) !important;
}

.elementor-element.interactive-tools .tool-name,
.elementor-element#interactive-tools .tool-name {
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--pte-it-navy) !important;
	line-height: 1.3 !important;
}

.elementor-element.interactive-tools .tool-desc,
.elementor-element#interactive-tools .tool-desc {
	font-size: 12px !important;
	color: var(--pte-it-muted) !important;
}

@media (max-width: 680px) {
	.elementor-element.interactive-tools .tool-grid,
	.elementor-element#interactive-tools .tool-grid {
		grid-template-columns: 1fr !important;
	}
}