/**
 * @package     Joomla.Site
 * @subpackage  com_categoryblog
 *
 * @copyright   (C) Manuel Wathall
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 *
 * Column grid plus a floated intro-image card style matching the site's
 * category blog. The grid is driven by the --categoryblog-columns custom
 * property set inline from the num_columns param, so it never collides with
 * Bootstrap's .col-* classes.
 */

/* --- Column grid ------------------------------------------------------- */

.categoryblog-items {
    display: grid;
    grid-template-columns: repeat(var(--categoryblog-columns, 1), minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 575.98px) {
    .categoryblog-items {
        grid-template-columns: minmax(0, 1fr);
    }
}

.categoryblog-item {
    min-width: 0;
}

/* --- Intro image floated left, text wraps around it -------------------- */

.com-content-category-blog__item figure.item-image {
    float: left;
    width: 200px;
    height: 200px;
    margin: 0 15px 0 0;
    overflow: hidden;
}

.com-content-category-blog__item figure.item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Clear the float after each blog item so items don't overlap. */
.com-content-category-blog__item .item-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Mobile: image on top, text below. */
@media (max-width: 576px) {
    .com-content-category-blog__item figure.item-image {
        float: none;
        width: 100%;
        height: auto;
        margin: 0 0 10px 0;
    }
}

/* Hide videos and iframes inside the intro text area. */
.com-content-category-blog__item .article-intro-text video,
.com-content-category-blog__item .article-intro-text iframe {
    display: none !important;
}

/* Bordered card style for blog items. */
.com-content-category-blog__item.blog-item {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 12px;
}

/* Meta line (date / category / author): align left with the title and text,
   lay the entries out inline with consistent spacing, and collapse the empty
   whitespace that the template leaves between the conditional spans. */
.com-content-category-blog__item .article-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: center;
    margin: 0.25rem 0 0.5rem;
    padding: 0;
    font-size: 0.875em;
}

.com-content-category-blog__item .article-info > span {
    margin: 0;
    padding: 0;
}

/* --- Minimal built-in lightbox (image link target = "lightbox") -------- */

.categoryblog-lightbox {
    cursor: zoom-in;
}

.categoryblog-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
}

.categoryblog-lightbox-overlay[hidden] {
    display: none;
}

.categoryblog-lightbox-image {
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
}

body.categoryblog-lightbox-open {
    overflow: hidden;
}