/* ========================================
   NEWS POST CARD - Optimized for 3 Columns
   Main Color: #0070b7
   Blue to Gold Gradient on Hover
   ======================================== */

.card.news {
    border: none;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    height: 100%;
    position: relative;
}

    /* Blue to Gold gradient border on hover */
    .card.news::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 12px;
        padding: 2px;
        background: linear-gradient(135deg, #0070b7, #f39c12);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 2;
        pointer-events: none;
    }

    .card.news:hover::before {
        opacity: 1;
    }

    .card.news:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 112, 183, 0.2);
    }

    /* Image Styling */
    .card.news .card-img-right {
        width: 100%;
        height: 120px;
        object-fit: cover;
        transition: transform 0.4s ease;
        border-radius: 0;
    }

    .card.news:hover .card-img-right {
        transform: scale(1.08);
    }

    .card.news .col-md-4.p-0 {
        overflow: hidden;
    }

    /* Title Styling */
    .card.news .align-items-start {
        padding: 8px 10px 4px 10px;
    }

    .card.news .card-title {
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 0;
        color: #333;
        transition: color 0.3s ease;
    }

    .card.news a {
        text-decoration: none;
        display: block;
    }

        .card.news a:hover .card-title {
            background: linear-gradient(135deg, #0070b7, #005a94, #f39c12);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    .card.news h4.card-title {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        margin: 0;
        /* Add fixed height that accommodates 4 lines */
        min-height: 5.6em; /* 4 lines × 1.4 line-height */
        max-height: 5.6em;
        line-height: 1.4;
    }

    /* Date Section */
    .card.news .date {
        padding: 6px 4px;
        background: #f8f9fa;
        border-right: 1px solid #e9ecef;
        transition: background 0.3s ease;
    }

        .card.news .date span {
            color: #6c757d;
            font-size: 0.72rem;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .card.news .date i {
            margin-right: 3px;
            color: #0070b7;
            transition: color 0.3s ease;
        }

    .card.news:hover .date {
        background: linear-gradient(135deg, rgba(0, 112, 183, 0.05), rgba(243, 156, 18, 0.05));
    }

        .card.news:hover .date span {
            color: #005a94;
        }

        .card.news:hover .date i {
            color: #f39c12;
        }

    /* Tags Section */
    .card.news .tags {
        padding: 6px 4px;
        background: #f8f9fa;
        transition: background 0.3s ease;
    }

        .card.news .tags span {
            color: #0070b7;
            font-size: 0.72rem!important;
            font-weight: 500;
            background: rgba(0, 112, 183, 0.08);
            padding: 3px 8px;
            border-radius: 20px;
            display: ruby;
            transition: all 0.3s ease;
        }

    .card.news:hover .tags {
        background: linear-gradient(135deg, rgba(243, 156, 18, 0.05), rgba(0, 112, 183, 0.05));
    }

        .card.news:hover .tags span {
            background: linear-gradient(135deg, #0070b7, #005a94);
            color: #fff;
        }

    /* Blue-to-Gold gradient overlay on hover */
    .card.news::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient( 135deg, rgba(0, 112, 183, 0.06) 0%, rgba(0, 90, 148, 0.04) 50%, rgba(243, 156, 18, 0.06) 100% );
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
        border-radius: 12px;
        z-index: 1;
    }

    .card.news:hover::after {
        opacity: 1;
    }

/* ========================================
   RESPONSIVE - Smaller Mobile Cards
   Text stays under photo
   ======================================== */

/* Tablet - 2 columns */
@media (max-width: 991px) {
    #newstab .col-lg-6,
    #adstab .col-lg-6,
    #decisiontab .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .new-container {
        max-width: 100% !important;
    }

    .card.news .card-img-right {
        height: 110px;
    }

    .card.news .card-title {
        font-size: 0.82rem;
    }

    .card.news .align-items-start {
        padding: 6px 8px 3px 8px;
    }

    .card.news .date,
    .card.news .tags {
        padding: 5px 3px;
    }

        .card.news .date span,
        .card.news .tags span {
            font-size: 0.68rem;
        }
}

/* Mobile - 1 column, text under photo */
@media (max-width: 767px) {
    #newstab .col-lg-6,
    #adstab .col-lg-6,
    #decisiontab .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Image on top - full width container but image centered and not full width */
    .card.news .col-md-4.p-0 {
        flex: 0 0 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        padding: 15px 15px 0 15px !important;
        background: #fff;
    }

    .card.news .card-img-right {
        height: 160px;
        width: 80%;
        max-width: 300px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Text below image - full width */
    .card.news .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .card.news .card-title {
        font-size: 0.85rem;
        -webkit-line-clamp: 3;
        min-height: auto;
        max-height: 4.2em; /* 3 lines × 1.4 line-height */
    }

    .card.news .align-items-start {
        padding: 10px 15px 6px 15px;
        text-align: center;
    }

    /* Bottom row (date + tags) - stay side by side */
    .card.news .row:last-child .col-md-4 {
        flex: 0 0 40%;
        max-width: 40%;
    }

    .card.news .row:last-child .col-md-8 {
        flex: 0 0 60%;
        max-width: 60%;
    }

    .card.news .date,
    .card.news .tags {
        padding: 8px 6px;
        text-align: center !important;
    }

    .card.news .date {
        border-right: 1px solid #e9ecef;
        border-bottom: none;
    }

        .card.news .date span,
        .card.news .tags span {
            font-size: 0.68rem;
        }

    .card.news .tags span {
        padding: 3px 8px;
    }
}

/* Extra small mobile */
@media (max-width: 480px) {
    .card.news .col-md-4.p-0 {
        padding: 12px 12px 0 12px !important;
    }

    .card.news .card-img-right {
        height: 140px;
        width: 85%;
        max-width: 260px;
        border-radius: 10px;
    }

    .card.news .card-title {
        font-size: 0.8rem;
    }

    .card.news .align-items-start {
        padding: 8px 12px 4px 12px;
    }

    .card.news .row:last-child .col-md-4 {
        flex: 0 0 38%;
        max-width: 38%;
    }

    .card.news .row:last-child .col-md-8 {
        flex: 0 0 62%;
        max-width: 62%;
    }

    .card.news .date,
    .card.news .tags {
        padding: 6px 4px;
    }

        .card.news .date span,
        .card.news .tags span {
            font-size: 0.65rem;
        }

        .card.news .date i {
            margin-right: 1px;
        }

        .card.news .tags span {
            padding: 2px 6px;
        }
}


html[lang="ar"] .card.news h4.card-title {
    text-align:right;
}