```css
/* 
 * CSS for News Block: Grid Block A (PRO OPTIMIZED)
 * Path: nplsportspro-theme/assets/css/custom-widgets/npl-grid-block-a.css
 */

/* ==============================================================
   PRO FEATURE: SKELETON LOADING ANIMATION
   ============================================================== */
.npl-skeleton {
    background: #e2e2e2;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    background-size: 200% 100%;
    animation: 1.5s npl-shine linear infinite;
    position: relative;
    overflow: hidden;
}

@keyframes npl-shine {
    to { background-position-x: -200%; }
}

/* Hide the overlay text and gradient while skeleton is active */
.npl-skeleton::before,
.npl-skeleton .npl-card-content-overlay {
    opacity: 0;
    visibility: hidden;
}

/* ==============================================================
   BASE STYLES & DESKTOP
   ============================================================== */
.npl-grid-block-a-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 30px;
    font-family: sans-serif;
}

/* Common Card Elements */
.npl-card-link-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
}

.npl-category-badge {
    background-color: #e0e0e0;
    color: #000;
    padding: 3px 8px;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 8px;
    position: relative;
    z-index: 10;
}

.npl-card-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
    z-index: 10;
}

.npl-card-title a:hover {
    color: #e6e6e6;
}

.npl-card-meta {
    font-size: 11px;
    color: #ccc;
    margin-top: 5px;
    position: relative;
    z-index: 10;
}

.npl-meta-separator { margin: 0 5px; }

/* PRO IMAGE HANDLING (Object-Fit) */
.npl-main-card-image img,
.npl-sub-post-card img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Acts like background-size: cover */
    z-index: 0;
    opacity: 0; /* Hidden initially for fade-in effect */
    transition: opacity 0.4s ease-in-out;
}

/* Fade image in once the skeleton class is removed by JS */
.npl-main-card-image:not(.npl-skeleton) img,
.npl-sub-post-card:not(.npl-skeleton) img {
    opacity: 1;
}

/* Gradient Overlays */
.npl-main-card-image::before,
.npl-sub-post-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
    transition: opacity 0.4s ease-in-out;
}
.npl-main-card-image::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
}
.npl-sub-post-card::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.9) 100%);
}

.npl-card-content-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    transition: opacity 0.4s ease-in-out;
}

/* Main Large Card */
.npl-main-post-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    background: #fff;
}

.npl-main-card-image {
    position: relative;
    flex-grow: 1;
    min-height: 350px;
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.npl-main-card-image .npl-card-title {
    font-size: 24px;
    margin: 0;
    line-height: 1.3;
    font-weight: 700;
}

.npl-main-card-excerpt {
    padding: 15px;
    border-top: 1px solid #ddd;
}

.npl-main-card-excerpt p {
    margin: 0;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

/* Right Side 2x2 Grid */
.npl-sub-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 15px;
}

.npl-sub-post-card {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: flex-end;
    padding: 15px;
    border: 1px solid #ddd;
}

.npl-sub-post-card .npl-card-title {
    font-size: 14px;
    margin: 0;
    line-height: 1.3;
    font-weight: 700;
}

/* ==============================================================
   RESPONSIVE MEDIA QUERIES
   ============================================================== */
@media (min-width: 1920px) {
    .npl-grid-block-a-wrapper { gap: 20px; }
    .npl-sub-posts-grid { gap: 20px; }
    .npl-main-card-image { min-height: 450px; }
    .npl-main-card-image .npl-card-title { font-size: 32px; }
    .npl-sub-post-card .npl-card-title { font-size: 18px; }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .npl-main-card-image { min-height: 300px; }
    .npl-main-card-image .npl-card-title { font-size: 20px; }
    .npl-sub-post-card { min-height: 180px; }
    .npl-sub-post-card .npl-card-title { font-size: 13px; }
}

@media (max-width: 991px) and (min-width: 768px) {
    .npl-grid-block-a-wrapper { grid-template-columns: 1fr; }
    .npl-main-card-image { min-height: 350px; }
    .npl-sub-posts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) and (min-width: 576px) {
    .npl-grid-block-a-wrapper { grid-template-columns: 1fr; }
    .npl-main-card-image { min-height: 280px; }
    .npl-main-card-image .npl-card-title { font-size: 20px; }
    .npl-sub-posts-grid { grid-template-columns: repeat(2, 1fr); }
    .npl-sub-post-card { min-height: 160px; }
}

@media (max-width: 575px) and (min-width: 480px) {
    .npl-grid-block-a-wrapper { grid-template-columns: 1fr; }
    .npl-main-card-image { min-height: 250px; padding: 15px; }
    .npl-main-card-image .npl-card-title { font-size: 18px; }
    .npl-sub-posts-grid { grid-template-columns: 1fr; }
    .npl-sub-post-card { min-height: 200px; }
}

@media (max-width: 479px) {
    .npl-grid-block-a-wrapper { grid-template-columns: 1fr; }
    .npl-main-card-image { min-height: 220px; padding: 10px; }
    .npl-main-card-image .npl-card-title { font-size: 16px; }
    .npl-main-card-excerpt p { font-size: 13px; }
    .npl-sub-posts-grid { grid-template-columns: 1fr; gap: 10px; }
    .npl-sub-post-card { min-height: 180px; padding: 10px; }
}