/* RapitwebGreen - home page sections. First section: HomePageCategories (.categoryGrid),
   a responsive grid of horizontal "picture cards" (image left, name beside it) built from
   Bootstrap's own .row/.col-* grid, so column counts stay fully driven by
   DisplayOrderHomePage settings - this file only themes .picture-card itself. */

.categoryGrid, .product-grid .news-list-homepage {
    margin: var(--section-v-space) 0;
}

.categoryGrid .picture-card {
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease;
    /* the image is the first element in the markup; in an RTL document a plain flex row
     would place it on the right (RTL's main-start). row-reverse flips main-start to the
     left for RTL specifically, so the image lands physically left as asked - no need to
     fight the document direction with an explicit direction:ltr override. The card's own
     overflow:hidden + border-radius clips the image's left corners automatically, so the
     image itself needs no radius of its own. */
    flex-direction: row-reverse;
}

    .categoryGrid .picture-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-3px);
    }

    /* image: fixed square thumbnail, zooms slightly on hover without affecting card layout */
    .categoryGrid .picture-card > a:first-child {
        display: block;
        flex: 0 0 110px;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }

    .categoryGrid .picture-card img {
        inline-size: 100%;
        block-size: 100%;
        object-fit: cover;
        transition: transform .4s ease;
    }

    .categoryGrid .picture-card:hover img {
        transform: scale(1.06);
    }

    /* name: fills the rest of the card, left-aligned, single line with ellipsis if long */
    .categoryGrid .picture-card .title {
        flex: 1 1 auto;
        min-inline-size: 0;
        margin: 0;
        padding-inline: 1rem;
        text-align: right;
        font-size: .95rem;
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .categoryGrid .picture-card .title a {
            color: var(--text);
            text-decoration: none;
        }

            .categoryGrid .picture-card .title a:hover {
                color: var(--main);
            }