/**
 * SuperUSP Widget Styles
 * Version: 2.0.0
 * Description: Responsive card-based widget system with customizable layouts and themes
 *
 * Features:
 * - Vertical and horizontal card orientations
 * - Three size variants (small, medium, big)
 * - Grid and stacked layouts
 * - Responsive mobile breakpoints
 * - Customizable colors and glow effects
 * - Accessibility-ready
 */

/* ============================================
   BASE CONFIGURATION
   ============================================ */

/* Global box-sizing */
.su-widget *, .su-widget *::before, .su-widget *::after {
    box-sizing: border-box;
}

/* Hide config and content divs */
.su-config {
    display: none !important;
}

.su-content {
    display: none !important;
}

/* ============================================
   WIDGET CONTAINER
   ============================================ */

/* Widget Base */
.su-widget {
    width: 100%;
    max-width: 800px;
    margin: 0 auto; /* Centers the widget horizontally */
}

/* Grid Container - No width: 100% for proper centering */
.su-container {
    display: grid;
    gap: 20px;
    justify-content: center; /* Centers grid items */
    margin: 0 auto; /* Centers the container itself */
}

/* ============================================
   DESKTOP GRID LAYOUTS
   ============================================ */

/* Desktop Grid Layout - 3 columns */
.su-widget[data-usp-desktop-layout="grid"][data-usp-grid-desktop-columns="3"] .su-container {
    grid-template-columns: repeat(3, max-content);
}

/* Desktop Grid Layout - 2 columns */
.su-widget[data-usp-desktop-layout="grid"][data-usp-grid-desktop-columns="2"] .su-container {
    grid-template-columns: repeat(2, max-content);
}

/* Desktop Grid Layout - 4 columns */
.su-widget[data-usp-desktop-layout="grid"][data-usp-grid-desktop-columns="4"] .su-container {
    grid-template-columns: repeat(4, max-content);
}

/* ============================================
   CARD BASE STYLES
   ============================================ */

.su-card {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-radius, 15px);
    padding: 24px 30px 24px 20px;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    overflow: hidden;
    cursor: default;
    box-shadow:
        0 0 20px var(--glow-color, transparent),
        0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left !important;
    /* Size variables with defaults (medium) */
    width: var(--card-width, 250px);
    height: var(--card-height, 344px);
}

.su-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 30px var(--glow-color, transparent),
        0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   CARD CONTENT STRUCTURE
   ============================================ */

.su-card-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left !important;
}

.su-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 7px;
    gap: 10px;
}

.su-card-heading {
    color: var(--heading-color, #FFC3E6);
    margin: 0;
    line-height: 1.2;
    text-align: left !important;
    flex: 1;
    font-size: var(--heading-size, 14px);
}

.su-card-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
}

.su-card-text {
    color: white;
    margin: 0;
    line-height: 1.4;
    text-align: left !important;
    font-size: var(--text-size, 20px);
}

.su-card-links {
    margin-top: 17px; /* 17px below the paragraph */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.su-card-link {
    color: var(--link-color, #CF8DB3);
    text-decoration: none;
    transition: opacity 0.2s ease;
    cursor: pointer;
    line-height: 1.3;
    text-align: left !important;
    display: block;
    font-size: var(--link-size, 12px);
}

.su-card-link:hover {
    opacity: 0.8;
}

.su-card-link:focus {
    outline: 2px solid var(--heading-color, #FFC3E6);
    outline-offset: 2px;
    opacity: 0.9;
}

/* ============================================
   VERTICAL CARD SIZES (DESKTOP)
   ============================================ */

/* Big */
.su-card.size-big {
    --card-width: 390px;
    --card-height: 535px;
    --heading-size: 18px;
    --text-size: 26px;
    --link-size: 14px;
}

/* Medium (Default) */
.su-card.size-medium {
    --card-width: 250px;
    --card-height: 344px;
    --heading-size: 14px;
    --text-size: 20px;
    --link-size: 12px;
}

/* Small */
.su-card.size-small {
    --card-width: 190px;
    --card-height: 260px;
    --heading-size: 12px;
    --text-size: 16px;
    --link-size: 10px;
}

/* ============================================
   HORIZONTAL CARD SIZES (DESKTOP)
   ============================================ */

/* Horizontal Big */
.su-widget[data-card-orientation="horizontal"] .su-card.size-big {
    --card-width: 507px;
    --card-height: 195px;
    --heading-size: 18px;
    --text-size: 16px;
    --link-size: 14px;
}

/* Horizontal Medium */
.su-widget[data-card-orientation="horizontal"] .su-card.size-medium {
    --card-width: 390px;
    --card-height: 150px;
    --heading-size: 14px;
    --text-size: 16px;
    --link-size: 12px;
}

/* Horizontal Small */
.su-widget[data-card-orientation="horizontal"] .su-card.size-small {
    --card-width: 247px;
    --card-height: 95px;
    --heading-size: 12px;
    --text-size: 16px;
    --link-size: 10px;
}

/* Horizontal card layout adjustments */
/* Make card relative for absolute positioning context */
.su-widget[data-card-orientation="horizontal"] .su-card {
    position: relative;
}

/* Position icon absolutely in top-right corner */
.su-widget[data-card-orientation="horizontal"] .su-card-icon {
    position: absolute;
    top: 14px;
    right: 14px;
}

/* Adjust text spacing in horizontal cards */
.su-widget[data-card-orientation="horizontal"] .su-card-text {
    margin-top: -7px;
    padding-right: 20px;
}

/* Position links wrapper at bottom, aligned to the left */
.su-widget[data-card-orientation="horizontal"] .su-card-links {
    position: absolute;
    bottom: 24px; /* Match card's bottom padding */
    margin-top: 0;
}

/* Remove icon from header flex flow */
.su-widget[data-card-orientation="horizontal"] .su-card-header {
    justify-content: flex-start; /* No need for space-between */
}

/* ============================================
   EMPTY CARDS (GRID PLACEHOLDERS)
   ============================================ */

.su-card.empty-card {
    background: #09060B;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

.su-card.empty-card:hover {
    transform: none;
    box-shadow: none;
}

/* ============================================
   CLICKABLE CARDS (WRAPPED IN LINK)
   ============================================ */

a.su-card-wrapper {
    text-decoration: none;
    display: block;
    color: inherit;
}

a.su-card-wrapper .su-card {
    cursor: pointer;
}

a.su-card-wrapper:hover .su-card {
    transform: translateY(-2px);
    box-shadow:
        0 0 30px var(--glow-color, transparent),
        0 6px 12px rgba(0, 0, 0, 0.15);
}

a.su-card-wrapper:focus {
    outline: 2px solid var(--heading-color, #FFC3E6);
    outline-offset: 4px;
    border-radius: var(--border-radius, 15px);
}

a.su-card-wrapper:focus .su-card {
    transform: translateY(-2px);
    box-shadow:
        0 0 30px var(--glow-color, transparent),
        0 6px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 768px) {
    .su-widget {
        max-width: 350px;
    }

    .su-container {
        gap: 10px;
    }

    /* Mobile Grid - 2 columns - For vertical cards only */
    .su-widget:not([data-card-orientation="horizontal"])[data-usp-mobile-layout="grid"][data-usp-grid-mobile-columns="2"] .su-container {
        grid-template-columns: repeat(2, max-content);
    }

    /* Mobile Stacked - For vertical cards only */
    .su-widget:not([data-card-orientation="horizontal"])[data-usp-mobile-layout="stacked"] .su-container {
        grid-template-columns: 1fr;
    }

    /* Mobile Card Sizes - All sizes become same on mobile */
    .su-card,
    .su-card.size-big,
    .su-card.size-medium,
    .su-card.size-small {
        --card-width: 170px;
        --card-height: 230px;
        --heading-size: 10px;
        --text-size: 14px;
        --link-size: 9px;
        border-radius: 10px;
        padding: 16px 20px 16px 14px;
    }

    /* Mobile Horizontal Cards - Stack vertically when stacked layout specified */
    .su-widget[data-card-orientation="horizontal"][data-usp-mobile-layout="stacked"] .su-container {
        grid-template-columns: 1fr;
    }

    /* Mobile Horizontal Cards - Grid layout */
    .su-widget[data-card-orientation="horizontal"][data-usp-mobile-layout="grid"] .su-container {
        grid-template-columns: repeat(var(--mobile-columns, 2), max-content);
    }

    /* Mobile Horizontal Card Sizes - All normalize to same size */
    .su-widget[data-card-orientation="horizontal"] .su-card,
    .su-widget[data-card-orientation="horizontal"] .su-card.size-big,
    .su-widget[data-card-orientation="horizontal"] .su-card.size-medium,
    .su-widget[data-card-orientation="horizontal"] .su-card.size-small {
        --card-width: 350px;
        --card-height: 136px;
        --heading-size: 10px;
        --text-size: 14px;
        --link-size: 9px;
        border-radius: 10px;
        padding: 16px 54px 16px 14px; /* Increased right padding for icon space */
    }

    /* Mobile Horizontal Icon - Position in corner with tighter margins */
    .su-widget[data-card-orientation="horizontal"] .su-card-icon {
        top: 12px;
        right: 12px;
    }

    /* Mobile Horizontal Links - Adjust bottom position */
    .su-widget[data-card-orientation="horizontal"] .su-card-links {
        bottom: 16px; /* Match mobile padding */
    }

    /* Hide empty cards on mobile */
    .su-card.empty-card {
        display: none;
    }

    /* Touch-friendly interactions on mobile devices */
    @media (hover: none) and (pointer: coarse) {
        .su-card:active {
            transform: scale(0.98);
        }

        a.su-card-wrapper:active .su-card {
            transform: scale(0.98);
        }

        .su-card-link:active {
            opacity: 0.6;
        }
    }
}