/* ============================================================
 * Header icon cards — unified geometry (zibll 1:1)
 *
 * The top multi-function component ("顶部多功能组件") renders its icon
 * cards through one path: aksrt_header_slide() →
 * aksrt_icon_cover_card() (see inc/helpers/homepage/header-components.php
 * and inc/helpers/aksrt-icon-cards.php). This file is the single source of
 * truth for their size/layout, loaded after Zibll main.min.css on every
 * page so cards stay identical across home / archive / single / search.
 *
 * DOM: .header-slider-card.container
 *        > (.zib-widget.padding-10 | div)
 *          > .flex.jse.flex-row.gutters-5.flex-col-sm-2
 *            > (.flex1 | .relative-h)
 *              > [.main-color] .icon-cover-card.aksrt-icon-cover-card.flex.ac.(zib-widget|padding-10)
 *                > .icon-cover-icon.badg.cir.(c-*|jb-*)[.radius4]  (the badge)
 *                > .icon-cover-desc.ml10.flex1.px12-sm
 * ============================================================ */

/* --- Equal-width cells + zibll gutters (both header wrapper aliases) --- */
.header-slider-card .flex,
.header-components-card .flex {
    display: flex;
}
.header-slider-card .flex.jse,
.header-components-card .flex.jse,
.header-slider-card .jse,
.header-components-card .jse {
    justify-content: space-evenly;
}
.header-slider-card .flex-row,
.header-components-card .flex-row {
    flex-direction: row;
}
.header-slider-card .flex.ac,
.header-components-card .flex.ac,
.header-slider-card .ac,
.header-components-card .ac {
    align-items: center;
}

.header-slider-card .gutters-5,
.header-components-card .gutters-5,
.header-slider-card .flex.jse.flex-row,
.header-components-card .flex.jse.flex-row {
    margin: -5px;
}
.header-slider-card .gutters-5 > *,
.header-components-card .gutters-5 > *,
.header-slider-card .flex.jse.flex-row > *,
.header-components-card .flex.jse.flex-row > * {
    padding: 5px !important;
    box-sizing: border-box;
}

/* Higher-specificity scope selector wins over the single-post-only
 * zibll-utilities.css `.flex1{flex:1 1 auto}` so every card is equal-width:
 * zibll uses `flex:1; overflow:hidden`. */
.header-slider-card .flex1,
.header-components-card .flex1,
.header-slider-card .flex .flex1,
.header-components-card .flex .flex1 {
    flex: 1 1 0;
    overflow: hidden;
    min-width: 0;
}
.header-slider-card .relative-h,
.header-components-card .relative-h {
    position: relative;
    height: 100%;
}

.header-slider-card,
.header-components-card {
    position: relative;
    margin-top: -40px;
    z-index: 1;
    width: 100%;
}

.header-slider-card .zib-widget,
.header-components-card .zib-widget {
    margin-bottom: 0;
}

/* --- Card box: compact zibll proportions in every context --- */
.icon-cover-card.aksrt-icon-cover-card {
    padding: 10px;
    font-size: 16px;
    line-height: 1.6;
    height: 100%;
    box-sizing: border-box;
}

/* --- Icon badge: fixed size so a custom (non-FA) icon cannot stretch it --- */
.icon-cover-card .icon-cover-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    min-width: 45px;
    font-size: 25px;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.icon-cover-card .icon-cover-icon > img,
.icon-cover-card .icon-cover-icon > svg {
    width: 1.6em;
    height: 1.6em;
    max-width: 1.6em;
    max-height: 1.6em;
    object-fit: contain;
}

/* --- Text column: equal truncation --- */
.icon-cover-card .icon-cover-desc {
    min-width: 0;
}

/* --- Mobile: two columns + zibll padding overrides --- */
@media (max-width: 767px) {
    .header-slider-card,
    .header-components-card {
        margin-top: -35px;
    }
    .header-slider-card .flex.flex-row.flex-col-sm-2,
    .header-components-card .flex.flex-row.flex-col-sm-2 {
        flex-wrap: wrap;
    }
    .header-slider-card .flex.flex-row.flex-col-sm-2 > *,
    .header-components-card .flex.flex-row.flex-col-sm-2 > * {
        flex-basis: 50%;
    }
    .header-slider-card .icon-cover-card.zib-widget,
    .header-components-card .icon-cover-card.zib-widget {
        padding: 10px;
    }
    .header-slider-card .icon-cover-card.padding-10,
    .header-components-card .icon-cover-card.padding-10 {
        padding: 2px;
    }
}