/* AI-Genics — Home → About cards "Self-Learning Workflows / Real-Time Risk Detection / Intelligent Document Processing"
   (aigenics-tools/home.js aboutCard). Figma component sets 1439:45817 / 45786 / 45751: ON_HOVER → "Variant2", Dissolve 300 ms
   ease-out. Elementor Free cannot make a hover on the card change its children, so the cross-fade lives here:
   .ag-about-card   = the card (made keyboard-focusable by mu-plugins/aigenics-home.php)
   .ag-about-static = the default shade + caption (fades out)
   .ag-about-hover  = the Variant2 layer: shade, icon, title and text (opacity 0 in Elementor; 1 at ≤1024 px, set in Elementor) */
.ag-about-card .ag-about-static,
.ag-about-card .ag-about-hover { transition: opacity 0.3s ease-out; }

@media (min-width: 1025px) {
	.ag-about-card:hover .ag-about-static,
	.ag-about-card:focus-within .ag-about-static { opacity: 0; }
	.ag-about-card:hover .ag-about-hover,
	.ag-about-card:focus-within .ag-about-hover { opacity: 1; }
}

/* touch screens cannot hover: show the text (phones and tablets ≤1024 px already do so in Elementor) */
@media (hover: none) {
	.ag-about-card .ag-about-static { opacity: 0; }
	.ag-about-card .ag-about-hover { opacity: 1; }
}

/* keyboard focus ring: the theme's standard one (reset.css [tabindex]:focus-visible), the same as on links and buttons */

@media (prefers-reduced-motion: reduce) {
	.ag-about-card .ag-about-static,
	.ag-about-card .ag-about-hover { transition: none; }
}

/* ── Home → "Services & Solutions" slider cards (aigenics-tools/home.js service(); class ag-service-card on the card).
   Figma v8 component sets "Service_1" (1:70789 …): ON_HOVER → "Variant2", Dissolve 300 ms ease-out. Variant2 = the same photo and
   panel geometry; the photo drops to 60 % over the ice colour #b6d6dd (a light tint), the dark glass panel turns into the red gradient #a2262d → #961724 at 90 %, the copy turns beige #edcdb8 (and on the
   two one-line cards the bullet too). The red layer cross-fades in as a ::before of the panel (gradients cannot transition).
   Structure: card > img + panel (e-div-block) > title + point (flexbox) > bullet (e-div-block) + text. */
.ag-service-card > .e-div-block-base { isolation: isolate; }
.ag-service-card > .e-div-block-base::before {
	content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background: linear-gradient(180deg, #a2262d 0%, #961724 100%);
	opacity: 0; transition: opacity 0.3s ease-out;
}
/* Variant2 also shows the photo at 60 % over the ice colour #b6d6dd (instead of 100 % over #4e4e4e) — the light tint of the hover */
.ag-service-card { transition: background-color 0.3s ease-out; }
.ag-service-card > img { transition: opacity 0.3s ease-out; }
.ag-service-card .e-paragraph-base,
.ag-service-card .e-flexbox-base > .e-div-block-base { transition: color 0.3s ease-out, background-color 0.3s ease-out; }
@media (hover: hover) {
	.ag-service-card:hover { background-color: #b6d6dd; }
	.ag-service-card:hover > img { opacity: 0.6; }
	.ag-service-card:hover > .e-div-block-base::before { opacity: 0.9; } /* the red panel fill is 90 % in Figma */
	.ag-service-card:hover .e-paragraph-base { color: #edcdb8; }
	.ag-service-card:not(:has(.e-paragraph-base br)):hover .e-flexbox-base > .e-div-block-base { background-color: #edcdb8; } /* one-line cards only (Figma) */
}
/* keyboard: the card is focusable (mu-plugins/aigenics-home.php) — same state while it has focus */
.ag-service-card:focus-within > .e-div-block-base::before,
.ag-service-card:focus-visible > .e-div-block-base::before { opacity: 0.9; }
.ag-service-card:focus-within, .ag-service-card:focus-visible { background-color: #b6d6dd; }
.ag-service-card:focus-within > img, .ag-service-card:focus-visible > img { opacity: 0.6; }
.ag-service-card:focus-within .e-paragraph-base,
.ag-service-card:focus-visible .e-paragraph-base { color: #edcdb8; }
@media (prefers-reduced-motion: reduce) {
	.ag-service-card > .e-div-block-base::before,
	.ag-service-card .e-paragraph-base { transition: none; }
}