/**
 * Tenbit Category Promo Banners / Feature Mosaic Grid Styles
 * Author: Team Tenbit (https://tenbitsol.com)
 * Version: 1.0.0
 */

.tenbit-category-banners-wrapper {
    position: relative;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #ffffff;
    box-sizing: border-box;
}

.tenbit-category-banners-wrapper *,
.tenbit-category-banners-wrapper *::before,
.tenbit-category-banners-wrapper *::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------------
   GRID LAYOUTS
------------------------------------------------------------- */
.tenbit-banners-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

/* 1. Asymmetric Mosaic Layout (Hunters Element style) */
.tenbit-banners-grid.layout-mosaic .tenbit-banner-card {
    flex: 1 1 calc(50% - 10px);
}

/* Row 1: 65% / 35% */
.tenbit-banners-grid.layout-mosaic .tenbit-banner-card:nth-child(4n + 1) {
    flex: 0 0 calc(65% - 10px);
}

.tenbit-banners-grid.layout-mosaic .tenbit-banner-card:nth-child(4n + 2) {
    flex: 0 0 calc(35% - 10px);
}

/* Row 2: 45% / 55% */
.tenbit-banners-grid.layout-mosaic .tenbit-banner-card:nth-child(4n + 3) {
    flex: 0 0 calc(45% - 10px);
}

.tenbit-banners-grid.layout-mosaic .tenbit-banner-card:nth-child(4n + 4) {
    flex: 0 0 calc(55% - 10px);
}

/* 2. Balanced 2-Columns Grid */
.tenbit-banners-grid.layout-equal_2_col .tenbit-banner-card {
    flex: 0 0 calc(50% - 10px);
}

/* 3. Balanced 3-Columns Grid */
.tenbit-banners-grid.layout-equal_3_col .tenbit-banner-card {
    flex: 0 0 calc(33.333% - 13.333px);
}

/* Per-card custom span overrides (if configured in repeater) */
.tenbit-banner-card.span-66 {
    flex: 0 0 calc(66.666% - 10px) !important;
}

.tenbit-banner-card.span-33 {
    flex: 0 0 calc(33.333% - 10px) !important;
}

.tenbit-banner-card.span-50 {
    flex: 0 0 calc(50% - 10px) !important;
}

.tenbit-banner-card.span-100 {
    flex: 0 0 100% !important;
}

/* -------------------------------------------------------------
   BANNER CARD ANATOMY
------------------------------------------------------------- */
.tenbit-banner-card {
    position: relative;
    min-height: 380px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #121518;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tenbit-banner-card:hover {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
}

/* Background Image with Zoom on Hover */
.tenbit-card-bg-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.tenbit-card-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.005);
    transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
}

.tenbit-banner-card:hover .tenbit-card-bg-img {
    transform: scale(1.055);
}

/* High-Contrast Gradient Vignette Overlay */
.tenbit-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(15, 18, 22, 0.05) 0%,
        rgba(15, 18, 22, 0.25) 35%,
        rgba(12, 14, 18, 0.75) 65%,
        rgba(9, 11, 14, 0.95) 90%,
        rgba(7, 9, 11, 0.98) 100%
    );
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.tenbit-banner-card:hover .tenbit-card-overlay {
    opacity: 0.92;
}

/* Card Content Container */
.tenbit-card-content {
    position: relative;
    z-index: 3;
    padding: 34px 36px 32px 36px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

/* Eyebrow Category Badge */
.tenbit-card-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 3px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
    transition: transform 0.25s ease, filter 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tenbit-banner-card:hover .tenbit-card-badge {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

/* Headline / Title */
.tenbit-card-title {
    font-family: "Barlow Condensed", "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 12px 0;
    transition: color 0.25s ease;
}

/* Narrative Description */
.tenbit-card-description {
    font-size: 14px;
    line-height: 1.55;
    color: #cbd5e1;
    margin: 0 0 20px 0;
    max-width: 580px;
    transition: color 0.25s ease;
}

/* Call To Action Text Link */
.tenbit-card-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ff5500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.tenbit-card-cta-arrow {
    display: inline-block;
    font-size: 15px;
    font-weight: 800;
    transition: transform 0.25s ease;
}

.tenbit-banner-card:hover .tenbit-card-cta-link {
    color: #ff7733;
}

.tenbit-banner-card:hover .tenbit-card-cta-arrow {
    transform: translateX(5px);
}

/* -------------------------------------------------------------
   RESPONSIVE DESIGN (TABLET & MOBILE)
------------------------------------------------------------- */
@media (max-width: 991px) {
    .tenbit-banners-grid.layout-mosaic .tenbit-banner-card,
    .tenbit-banners-grid.layout-mosaic .tenbit-banner-card:nth-child(n),
    .tenbit-banners-grid.layout-equal_2_col .tenbit-banner-card,
    .tenbit-banners-grid.layout-equal_3_col .tenbit-banner-card,
    .tenbit-banner-card.span-66,
    .tenbit-banner-card.span-33,
    .tenbit-banner-card.span-50 {
        flex: 0 0 calc(50% - 10px) !important;
    }

    .tenbit-banner-card {
        min-height: 340px;
    }

    .tenbit-card-title {
        font-size: 28px;
    }
}

@media (max-width: 640px) {
    .tenbit-banners-grid.layout-mosaic .tenbit-banner-card,
    .tenbit-banners-grid.layout-mosaic .tenbit-banner-card:nth-child(n),
    .tenbit-banners-grid.layout-equal_2_col .tenbit-banner-card,
    .tenbit-banners-grid.layout-equal_3_col .tenbit-banner-card,
    .tenbit-banner-card.span-66,
    .tenbit-banner-card.span-33,
    .tenbit-banner-card.span-50,
    .tenbit-banner-card.span-100 {
        flex: 0 0 100% !important;
    }

    .tenbit-banner-card {
        min-height: 300px;
    }

    .tenbit-card-content {
        padding: 24px 22px;
    }

    .tenbit-card-title {
        font-size: 24px;
    }

    .tenbit-card-description {
        font-size: 13px;
        margin-bottom: 16px;
    }
}