/* ==========================================================================
   mod_article_showcase – Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper & layout base
   -------------------------------------------------------------------------- */
.mod-article-showcase {
    --mas-image-size:        56px;
    --mas-image-pos:         center center;
    --mas-title-size:        1rem;
    --mas-title-weight:      600;
    --mas-title-color:       #1a1a1a;
    --mas-title-font-family: inherit;
    --mas-teaser-size:       0.9rem;
    --mas-teaser-color:      #444444;
    --mas-readmore-bg:       #0d6efd;
    --mas-readmore-color:    #ffffff;
    --mas-readmore-radius:   4px;
    --mas-readmore-size:     0.85rem;
    --mas-readmore-padding:  0.35rem 0.9rem;
    --mas-readmore-border:   #0d6efd;
    --mas-card-bg:           #ffffff;
    --mas-card-padding:      1rem;
    --mas-card-radius:       8px;
    --mas-card-border:       1px solid #e5e7eb;
    --mas-card-shadow:       none;
    --mas-card-gap:          1rem;
    --mas-separator-color:   #e5e7eb;
    --mas-grid-columns:      2;
}

/* --------------------------------------------------------------------------
   Article card
   -------------------------------------------------------------------------- */
.mod-article-showcase .mas-article {
    background:    var(--mas-card-bg);
    padding:       var(--mas-card-padding);
    border-radius: var(--mas-card-radius);
    border:        var(--mas-card-border);
    box-shadow:    var(--mas-card-shadow);
    margin-bottom: var(--mas-card-gap);
}

.mod-article-showcase .mas-article:last-child {
    margin-bottom: 0;
}

/* Separator line variant */
.mod-article-showcase .mas-article.mas-separator:not(:last-child) {
    border-bottom: 1px solid var(--mas-separator-color);
    border-left:   none;
    border-right:  none;
    border-top:    none;
    border-radius: 0;
    background:    transparent;
    box-shadow:    none;
    padding-bottom: var(--mas-card-gap);
}

/* --------------------------------------------------------------------------
   Flex row layout (image left/right)
   -------------------------------------------------------------------------- */
.mod-article-showcase .mas-article.mas-flex-row {
    display:     flex;
    gap:         0.75rem;
    align-items: flex-start;
}

.mod-article-showcase .mas-article.mas-flex-row .mas-body {
    flex: 1;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Round image
   -------------------------------------------------------------------------- */
.mod-article-showcase .mas-image-wrap {
    flex-shrink: 0;
}

.mod-article-showcase .mas-image {
    display:       block;
    width:         var(--mas-image-size);
    height:        var(--mas-image-size);
    border-radius: 50%;
    object-fit:    cover;
    object-position: var(--mas-image-pos);
    flex-shrink:   0;
}

/* Top image: full width strip before content */
.mod-article-showcase .mas-image-top .mas-image {
    width:         var(--mas-image-size);
    height:        var(--mas-image-size);
    margin-bottom: 0.6rem;
}

/* --------------------------------------------------------------------------
   Date
   -------------------------------------------------------------------------- */
.mod-article-showcase .mas-date {
    display:     block;
    font-size:   0.78rem;
    color:       #888;
    margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------------------
   Title
   -------------------------------------------------------------------------- */
.mod-article-showcase .mas-title {
    font-size:   var(--mas-title-size);
    font-weight: var(--mas-title-weight);
    color:       var(--mas-title-color);
    font-family: var(--mas-title-font-family);
    margin:      0 0 0.4rem;
    line-height: 1.3;
    word-break:  break-word;
}

.mod-article-showcase .mas-title a {
    color:           inherit;
    text-decoration: none;
}

.mod-article-showcase .mas-title a:hover,
.mod-article-showcase .mas-title a:focus {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Teaser
   -------------------------------------------------------------------------- */
.mod-article-showcase .mas-teaser {
    font-size: var(--mas-teaser-size);
    color:     var(--mas-teaser-color);
    margin:    0 0 0.6rem;
    line-height: 1.55;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   Read more – custom inline style
   -------------------------------------------------------------------------- */
.mod-article-showcase .mas-readmore-wrap {
    margin-top: 0.5rem;
}

.mod-article-showcase .mas-readmore-wrap.mas-readmore-full {
    display: block;
}

.mod-article-showcase .mas-readmore-wrap.mas-readmore-full .mas-readmore {
    display: block;
    text-align: center;
}

/* Custom styled button (non-Bootstrap) */
.mod-article-showcase .mas-readmore-custom {
    display:          inline-block;
    background-color: var(--mas-readmore-bg);
    color:            var(--mas-readmore-color);
    border:           1px solid var(--mas-readmore-border);
    border-radius:    var(--mas-readmore-radius);
    font-size:        var(--mas-readmore-size);
    padding:          var(--mas-readmore-padding);
    text-decoration:  none;
    cursor:           pointer;
    transition:       filter 0.15s ease;
}

.mod-article-showcase .mas-readmore-custom:hover,
.mod-article-showcase .mas-readmore-custom:focus {
    filter: brightness(0.9);
    text-decoration: none;
}

/* Plain link style */
.mod-article-showcase .mas-readmore-link {
    display:         inline-flex;
    align-items:     center;
    gap:             0.25rem;
    font-size:       var(--mas-readmore-size);
    color:           var(--mas-readmore-bg);
    text-decoration: none;
    font-weight:     600;
}

.mod-article-showcase .mas-readmore-link:hover,
.mod-article-showcase .mas-readmore-link:focus {
    text-decoration: underline;
}

.mod-article-showcase .mas-readmore-arrow {
    transition: transform 0.15s ease;
}

.mod-article-showcase .mas-readmore-link:hover .mas-readmore-arrow {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Grid layout
   -------------------------------------------------------------------------- */
.mod-article-showcase.mas-layout-grid .mas-grid {
    display:               grid;
    grid-template-columns: repeat(var(--mas-grid-columns), 1fr);
    gap:                   var(--mas-card-gap);
}

.mod-article-showcase.mas-layout-grid .mas-article {
    margin-bottom: 0;
}

/* Responsive: collapse grid to 1 col on small screens */
@media (max-width: 600px) {
    .mod-article-showcase.mas-layout-grid .mas-grid {
        grid-template-columns: 1fr;
    }

    .mod-article-showcase .mas-article.mas-flex-row {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .mod-article-showcase.mas-layout-grid .mas-grid {
        grid-template-columns: repeat(min(var(--mas-grid-columns), 2), 1fr);
    }
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.mod-article-showcase .mas-empty {
    color:     #888;
    font-size: 0.9rem;
    font-style: italic;
}