/**
 * SVX Post Universal CSS
 * 
 * @package wp.plugin.svx
 * @version 1.0.0
 * @author SV Agency
 * @since 1.0.0
 * 
 * Universal CSS for all SVX post templates
 * Loaded first as foundation for all post templates
 * 
 * Usage:
 * This CSS file contains the universal svx-post class that provides
 * consistent spacing and layout foundation for all SVX post templates.
 * This should be loaded first before any template-specific CSS files.
 * 
 * CSS Class System:
 * - svx-post: Universal wrapper class for all SVX post templates
 *   * Provides consistent spacing and layout foundation
 *   * Applied to all post templates for unified structure
 *   * Must be loaded before template-specific CSS files
 * 
 * Last Updated: 2025-01-27
 */

.svx-post {
    margin-bottom: 30px;
}

/* CSS Grid Layout for gapless, vertically nested posts */
.sv-news .row {
    
    grid-template-columns: repeat(3, 1fr);
    gap: 0; /* No gaps for seamless layout */
    margin: 0;
    padding: 0;
}

/* Remove margins when using CSS Grid */
.sv-news .row .svx-post {
    margin-bottom: 0 !important;
}

/* Size classes for vertical nesting */
.svx-post.grid-item--height1 {
    /* Default height - controlled by content */
}

.svx-post.grid-item--height2 {
    grid-row: span 2; /* Span 2 rows */
}

.svx-post.grid-item--height3 {
    grid-row: span 3; /* Span 3 rows */
}

/* Width classes */
.svx-post.grid-item--width1 {
    /* Default width - 1 column */
}

.svx-post.grid-item--width2 {
    grid-column: span 2; /* Span 2 columns */
}

/* SVX Height Classes */
.svx-height-90 {
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
}

.svx-height-180 {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
}

.svx-height-270 {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
}

/* SVX Title Classes */
.svx-tit-short {
    /* Short title styling */
}

.svx-tit-medium {
    /* Medium title styling */
}

.svx-tit-long {
    /* Long title styling */
}

.svx-post.grid-item--width3 {
    grid-column: span 3; /* Span all 3 columns */
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .sv-news .row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .svx-post.grid-item--width2,
    .svx-post.grid-item--width3 {
        grid-column: span 2; /* Span full width on medium screens */
    }
}

@media (max-width: 768px) {
    .sv-news .row {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    
    .svx-post.grid-item--width2,
    .svx-post.grid-item--width3 {
        grid-column: span 1; /* Single column on mobile */
    }
    
    .svx-post.grid-item--height2,
    .svx-post.grid-item--height3 {
        grid-row: span 1; /* Single row on mobile */
    }
}