@charset "UTF-8";
/* CSS Document */

/* ==========================================================================
   List Format Styles
   ========================================================================== */

/* Container for each list item */
.wg-links-list .wg-link-list-item {
    display: flex; /* Enable flexbox for horizontal layout */
    align-items: flex-start; /* Align image and content to the top */
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    gap: 30px; /* Separator: 30px gap between image and content */
}

/* Image Container (Desktop/Tablet) */
.wg-links-list .wg-link-image-container {
    flex-shrink: 0; /* Prevents image from shrinking */
    width: 150px; /* Fixed width for desktop/tablet */
    max-width: 100%;
}

/* Featured Image Styling */
.wg-links-list .wg-link-featured-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}

/* Content Area */
.wg-links-list .wg-link-content {
    flex-grow: 1; /* Allows content to take up remaining space */
    min-width: 0;
}


/* --- Responsive Adjustments (Mobile - screens up to 768px) --- */
@media (max-width: 768px) {
    
    .wg-links-list .wg-link-list-item {
        flex-direction: column; /* Stack items vertically on mobile */
        gap: 15px; /* Reduce vertical gap */
    }

    .wg-links-list .wg-link-image-container {
        width: 100%; /* Takes full width container space */
        order: -1; /* Place image above content on mobile */
        text-align: left; /* Changed from center to left */
    }

    /* Restrict actual image size to 100px width and align left */
    .wg-links-list .wg-link-featured-image {
        max-width: 100px; 
        width: 100%; 
        height: auto;
        margin: 0; /* Changed from 0 auto to 0 for left alignment */
    }
}


/* ==========================================================================
   Grid Format Styles
   ========================================================================== */

.wg-links-grid {
    display: grid;
    /* 3 columns on desktop/tablet */
    grid-template-columns: repeat(3, 1fr); 
    /* Use a gap for spacing between grid cells */
    gap: 30px; 
}

/* Individual Grid Cell Styling */
.wg-links-grid .wg-link-list-item {
    /* Reset list-specific styles */
    display: block; 
    border-bottom: none;
    padding: 0; 
    gap: 0;
    
    /* Grid-specific styling */
    border: 1px solid var(--wg-medium-gray);
    border-radius: 10px;
    
    /* Padding for desktop/tablet */
    padding: 30px; 
    
    /* Ensure image and content stack */
    display: flex; 
    flex-direction: column;
    gap: 15px; /* Vertical spacing between image, title, and description */
}

/* Styling for the full-width image */
.wg-links-grid .wg-link-grid-featured-image {
    display: block;
    width: 100%; /* Full width as requested */
    height: auto;
    object-fit: cover;
    border-radius: 4px; /* Maintain a slight border radius on the image */
    transition: transform 0.3s ease-in-out; /* Enable smooth transition for hover */
}

/* Image Hover Effect */
.wg-links-grid .wg-link-grid-image-link:hover .wg-link-grid-featured-image {
    /* Increases in size by 3% on hover */
    transform: scale(1.03); 
}

/* Title Styling - remove top margin for a cleaner look */
.wg-links-grid .wg-link-content h3 {
    margin-top: 0;
}

/* --- Responsive Adjustments for Grid (Mobile - screens up to 768px) --- */
@media (max-width: 768px) {
    
    /* Change to 1 column on mobile */
    .wg-links-grid {
        grid-template-columns: 1fr; 
        gap: 20px; /* Reduce gap between items on mobile */
    }

    /* Reduce padding on mobile */
    .wg-links-grid .wg-link-list-item {
        padding: 20px; 
    }
}

/* Ensure the image link container doesn't affect the layout too much in grid */
.wg-links-grid .wg-link-image-container {
    /* Removed in PHP for grid, but added here as a safeguard if structure changes */
    display: contents; 
}