/**
 * Category Product Links Grid Shortcode Styles
 * Version: 2.2 (Forcing nowrap for text truncation)
 * - Added text truncation for long product titles.
 * - Increased specificity to override theme/menu styles.
 * - Explicitly set text color and fallback background.
 * - Attempting baseline alignment for flex items in links.
 * - Forcing white-space: nowrap on link text to prevent wrapping.
 */

/* --- Grid Container (UL element) --- */
ul.cplg-product-links-grid {
    display: grid;
    grid-template-columns: repeat(var(--cplg-grid-columns, 4), 1fr); /* Default 4 columns */
    gap: 0.75rem 1rem; /* Spacing (vertical horizontal) */
    list-style: none !important; /* Force remove list style */
    padding: 0.5rem 0 !important; /* Override padding */
    margin: 0 !important; /* Override margin */
    width: 100%;
    box-sizing: border-box;
    background-color: transparent; /* Ensure it doesn't have an unexpected background */
}

/* Set CSS variable for columns based on the class from PHP */
ul.cplg-product-links-grid.cplg-columns-1 { --cplg-grid-columns: 1; }
ul.cplg-product-links-grid.cplg-columns-2 { --cplg-grid-columns: 2; }
ul.cplg-product-links-grid.cplg-columns-3 { --cplg-grid-columns: 3; }
ul.cplg-product-links-grid.cplg-columns-4 { --cplg-grid-columns: 4; }
ul.cplg-product-links-grid.cplg-columns-5 { --cplg-grid-columns: 5; }
ul.cplg-product-links-grid.cplg-columns-6 { --cplg-grid-columns: 6; }

/* --- Grid Item Styling (LI element) --- */
ul.cplg-product-links-grid li.cplg-product-link-item {
    padding: 0;
    border: none !important; /* Ensure no border */
    text-align: left;
    background-color: transparent !important; /* Ensure no background */
    border-radius: 0;
    transition: none;
    font-family: sans-serif;
    box-sizing: border-box;
    overflow: hidden;
    list-style-type: none !important; /* Ensure no list marker */
}

ul.cplg-product-links-grid li.cplg-product-link-item:hover {
   border-color: transparent;
   box-shadow: none;
}

/* --- Link Styling (A element) --- */
ul.cplg-product-links-grid li.cplg-product-link-item a {
    text-decoration: none !important;
    color: #333333 !important;
    display: flex;
    justify-content: space-between;
    align-items: baseline; /* Align children by their text baseline */
    font-weight: 400;
    font-size: 0.9em;
    line-height: 1.4;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    word-wrap: normal; /* Should not be needed if .cplg-link-text handles nowrap */
    overflow: hidden; /* Clips content of the link itself if it overflows */
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
    position: relative;
    min-height: 1.8em;
    background-color: transparent;
    height: 100%;
    box-sizing: border-box;
}

ul.cplg-product-links-grid li.cplg-product-link-item a:hover {
    color: #000000 !important;
    text-decoration: none !important;
    background-color: #f0f0f0 !important;
}

/* --- Link Text Styling --- */
ul.cplg-product-links-grid .cplg-link-text {
    flex-grow: 1; /* Allows the text to take available space */
    margin-right: 0.5em; /* Space between text and (potential) badge */
    color: inherit !important;
    white-space: nowrap !important; /* ADDED !important: Prevents text from wrapping to a new line */
    overflow: hidden; /* Hides text that overflows the element's box */
    text-overflow: ellipsis; /* Displays "..." for clipped text */
    display: block; /* Or inline-block; helps text-overflow work */
}

/* --- HOT Badge Styling --- */
ul.cplg-product-links-grid .cplg-hot-badge {
    background-color: #e74c3c !important;
    color: #ffffff !important;
    font-size: 0.7em;
    font-weight: bold;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap; /* Badge text should also not wrap */
    margin-left: 0.5em; /* Consistent spacing from the text */
    flex-shrink: 0; /* Prevents badge from shrinking */
    z-index: 1;
}

/* --- Responsive Adjustments --- */

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    ul.cplg-product-links-grid {
        grid-template-columns: repeat(min(var(--cplg-grid-columns, 3), 3), 1fr);
        gap: 0.6rem 0.8rem;
    }
    ul.cplg-product-links-grid.cplg-columns-1 { grid-template-columns: 1fr; }
    ul.cplg-product-links-grid.cplg-columns-2 { grid-template-columns: repeat(2, 1fr); }

    ul.cplg-product-links-grid li.cplg-product-link-item a {
         font-size: 0.88em;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    ul.cplg-product-links-grid {
        grid-template-columns: repeat(min(var(--cplg-grid-columns, 2), 2), 1fr);
        gap: 0.5rem 0.6rem;
    }
     ul.cplg-product-links-grid.cplg-columns-1 {
        grid-template-columns: 1fr;
    }

    ul.cplg-product-links-grid li.cplg-product-link-item a {
        font-size: 0.85em;
        padding: 0.3rem 0.5rem;
    }
    ul.cplg-product-links-grid .cplg-hot-badge {
        font-size: 0.65em;
        padding: 0.1em 0.4em;
        margin-left: 0.4em;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
     ul.cplg-product-links-grid {
         gap: 0.4rem 0.5rem;
     }
      ul.cplg-product-links-grid li.cplg-product-link-item a {
        font-size: 0.82em;
        padding: 0.25rem 0.4rem;
    }
     ul.cplg-product-links-grid .cplg-hot-badge {
        font-size: 0.6em;
        margin-left: 0.3em;
    }
}