/**
 * Latest Content by Anything - Styles
 *
 * @package Latest_Content_By_Anything
 * @since 1.0.0
 */

/* CSS Custom Properties for easy theming */
:root {
    --lcba-gap: 20px;
    --lcba-item-padding: 15px;
    --lcba-border-color: #ddd;
    --lcba-bg-color: #f9f9f9;
    --lcba-title-size: 18px;
    --lcba-title-color: inherit;
    --lcba-excerpt-color: #666;
    --lcba-meta-color: #888;
    --lcba-link-color: #0073aa;
    --lcba-columns: 3;
}

/* Base container styles */
.latest-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lcba-gap);
    justify-content: flex-start;
}

/* Content item styles */
.latest-content .content-item {
    padding: var(--lcba-item-padding);
    border: 1px solid var(--lcba-border-color);
    background-color: var(--lcba-bg-color);
    box-sizing: border-box;
}

/* Thumbnail link */
.latest-content .content-item .content-thumbnail {
    display: block;
    margin-bottom: 10px;
}

.latest-content .content-item .content-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* Title styles */
.latest-content .content-item .content-title {
    font-size: var(--lcba-title-size);
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.latest-content .content-item .content-title a {
    color: var(--lcba-title-color);
    text-decoration: none;
}

.latest-content .content-item .content-title a:hover {
    color: var(--lcba-link-color);
}

/* Meta styles (date, author) */
.latest-content .content-item .content-meta {
    font-size: 0.85em;
    color: var(--lcba-meta-color);
    margin-bottom: 10px;
}

.latest-content .content-item .content-meta .meta-separator {
    margin: 0 5px;
}

/* Excerpt styles */
.latest-content .content-item .content-excerpt {
    color: var(--lcba-excerpt-color);
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Read more link */
.latest-content .content-item .content-read-more {
    display: inline-block;
    color: var(--lcba-link-color);
    text-decoration: none;
    font-weight: 500;
}

.latest-content .content-item .content-read-more:hover {
    text-decoration: underline;
}

/* Product price (WooCommerce) */
.latest-content .content-item .product-price {
    font-weight: bold;
    margin-top: 10px;
}

/* No content message */
.lcba-no-content {
    color: var(--lcba-meta-color);
    font-style: italic;
}

/* ==========================================================================
   Layout: Vertical
   ========================================================================== */
.latest-content.vertical-layout {
    flex-direction: column;
}

.latest-content.vertical-layout .content-item {
    width: 100%;
}

/* ==========================================================================
   Layout: Horizontal
   ========================================================================== */
.latest-content.horizontal-layout {
    flex-direction: row;
}

.latest-content.horizontal-layout .content-item {
    flex: 0 1 200px;
    max-width: 200px;
}

/* ==========================================================================
   Layout: Grid
   ========================================================================== */
.latest-content.lcba-grid-layout {
    display: grid;
    grid-template-columns: repeat(var(--lcba-columns), 1fr);
    gap: var(--lcba-gap);
}

.latest-content.lcba-grid-layout .content-item {
    width: 100%;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Tablet */
@media screen and (max-width: 768px) {
    .latest-content.lcba-grid-layout {
        grid-template-columns: repeat(2, 1fr);
    }

    .latest-content.horizontal-layout .content-item {
        flex: 0 1 calc(50% - var(--lcba-gap));
        max-width: calc(50% - var(--lcba-gap));
    }
}

/* Mobile */
@media screen and (max-width: 480px) {
    .latest-content.lcba-grid-layout {
        grid-template-columns: 1fr;
    }

    .latest-content.horizontal-layout {
        flex-direction: column;
    }

    .latest-content.horizontal-layout .content-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}