/* Card — i2t3 component styles
 * Bootstrap provides .card / .card-body / .card-header / .card-footer etc.
 * The rules below add the t3planet-style icon card, image-card and overlay
 * variants used by I2t3Card.html.
 */

/* No fixed margin on the card wrapper — spacing is owned by the content
 * element (section spacing / layout), not baked into the card. */

/* Base card optics ported faithfully from Bootstrap _teaser-block.scss:
 * square corners (border-radius:0), neutral border colour and a clipped body. */
.card {
    border-color: #dbdee6;
    border-radius: 0;
}
.card .card-body { overflow: hidden; }
.card .card-title a { color: inherit; }
/* Uniform card grid: equal teaser-text height so card rows align. */
.card .card-text { min-height: 78px; }
.card .card-img-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/* Light, borderless footer with NS padding. */
.card .card-footer {
    background-color: #f5f6f9;
    border-top: 0;
    padding: 0.6rem 1.25rem;
}

/* Transparent card: no box, no border (Bootstrap .bg-transparent handles the
 * background; this also drops the default .card border). */
.card.bg-transparent { border: 0; }

/* Colored card backgrounds force white text */
.card.bg-primary,
.card.bg-secondary,
.card.bg-success,
.card.bg-info,
.card.bg-warning,
.card.bg-danger,
.card.bg-dark {
    color: #fff;
}
.card.bg-primary a,
.card.bg-secondary a,
.card.bg-success a,
.card.bg-info a,
.card.bg-warning a,
.card.bg-danger a,
.card.bg-dark a {
    color: #fff;
}
.card.bg-light {
    color: var(--i2t3-text, #212529);
}
/* Keep a light card readable on an inverse (dark) band, where .i2t3-inverse
 * would otherwise force its text white. */
.i2t3-inverse .card.bg-light,
.i2t3-inverse .card.bg-light :is(p, li, h1, h2, h3, h4, h5, h6) {
    color: var(--i2t3-text, #212529);
}

/* Icon card (i2t3_card_icon == true) */
.card-block.cards-icon .card { border: 0; }
.card-block.cards-icon .card-img {
    height: 36px;
    margin-bottom: 15px;
    min-height: 1px;
}
.card-block.cards-icon .card-body h4,
.card-block.cards-icon .card-body .h4 { margin-bottom: 15px; }
.card-block.cards-icon img { width: auto; }

.card-icon i,
.card-icon svg,
.card .card-icon .fa,
.card .card-icon .fab,
.card .card-icon .far,
.card .card-icon .fas {
    color: var(--i2t3-primary, #0d6efd);
    display: inline-block;
    font-size: 50px;
    height: 36px;
    padding: 16px;
}

/* Background-image overlay card (cardPosition: overlay) */
.card-bg-img {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    min-height: 250px;
    overflow: hidden;
    position: relative;
}
/* Overlay darkening matches Bootstrap _card.scss: solid text-color at 0.3
 * opacity (not rgba(0,0,0,.3) combined with opacity:.5, which only yielded
 * ~0.15 effective darkness and left text on light images hard to read). */
.card-bg-img::before {
    background-color: var(--i2t3-text, #212529);
    content: "";
    height: 100%;
    opacity: 0.3;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}
.card-bg-img .card-content {
    padding: 20px;
    position: relative;
    z-index: 1;
}
.card-bg-img .card-content .card-header { border-bottom: 0; }
.card-bg-img .card-content .card-footer { background-color: transparent; }

/* Image-on-card (top-content / horizontal layouts).
 * NS optic: the .card-img wrapper has a min-height of 200px (not a fixed
 * 220px), so taller images grow naturally; the inner <img> is cropped to
 * cover the box. */
.card-block .card-img,
.card-block .card-img-top {
    display: block;
    min-height: 200px;
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    width: 100%;
}
.card-block .card-img img,
.card-block .card-img-top img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}