/*!
 * @file cards.css
 * @brief STMicroelectronics customizations for sphinx-design cards in Shibuya theme
 * @author STMicroelectronics
 * @copyright Copyright (c) 2026 STMicroelectronics.
 *            All rights reserved.
 *            This software is licensed under SLA0044 terms that can be found at:
 *            https://www.st.com/SLA0044
 *            or in the LICENSE.md file in the root directory of this software component.
 */

/* ============================================================
   Sphinx Design Cards - Icon/Image Styling
   Applied to .sd-card-img-top class from sphinx-design extension
============================================================ */

/* Card icons/images - Light mode (default) */
.sd-card-img-top {
    width: 33% !important;      /* Scale down from default 100% for better proportions */
    height: auto !important;    /* Maintain aspect ratio */
    display: block;             /* Ensure proper block-level behavior */
    margin: 0 auto;             /* Center horizontally within card */
}

/* ============================================================
   Dark Mode: Icon Color Inversion

   Problem: Most icons are designed for light backgrounds (dark colors)
   and become invisible on dark backgrounds.

   Solution: Invert colors while preserving hue
   - invert(1): Flip dark → light, light → dark
   - hue-rotate(180deg): Restore original color (e.g., blue stays blue)
   - opacity: 0.9: Slightly reduce brightness for softer appearance
============================================================ */
html.dark .sd-card-img-top {
    filter: invert(1) hue-rotate(180deg);
    opacity: 0.9;
}