/* === Random Portfolio Grid Layout – FINAL VERSION === */

/* Desktop: 3 columns */
.si-random-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
}

.si-random-item {
    display: flex;
    flex-direction: column;
}

/* Base image frame = PORTRAIT for all items */
.si-random-image {
    overflow: hidden;
    background: #f5f5f5;
    /* portrait ratio: 122.1984 x 148.1125 */
    /* aspect-ratio: 122.1984 / 148.1125; */
    aspect-ratio: 3 / 4;
}

/* 5th item = landscape on ALL breakpoints by default */
.si-random-item:nth-child(5) .si-random-image {
    /* aspect-ratio: 260.2244 / 148.1125;*/
    aspect-ratio: 1.575 / 1;
}

.si-random-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.si-random-item:hover .si-random-image img {
    /* transform: scale(1.03);*/
}

/* Text styles */
.si-random-meta {
    margin-top: var(--space-sm);
}

@media (max-width: 600px) {
.si-random-meta {
    margin-top: 0.8rem;
}
}

.si-random-cat {
    font-size: var(--font-size-lg)!important;
    line-height: var(--line-height-medium)!important;
    margin-bottom: var(--space-xs)!important;
    font-weight: var(--font-weight-regular)!important;
}

.si-random-title {
    font-size: clamp(0.96rem, 0.5365rem + 1.1294vw, 1.44rem)!important;
    /* before font-size: clamp(0.92rem, 0.4612rem + 1.2235vw, 1.44rem)!important; */
    font-weight: var(--font-weight-bold)!important;
    font-style: normal!important;
    line-height: var(--line-height-medium)!important;
    margin-bottom: var(--space-xs)!important;
}

@media (max-width: 600px) {
.projekt-grid .si-random-title {
    font-size: clamp(1.2rem, 0.8206rem + 1.0118vw, 1.63rem)!important;
    width: var(--width-sm);
}

}

.si-random-btn {
    font-size: var(--font-size-lg)!important;
    color: var( --color-primary)!important;
    font-weight: var(--font-weight-regular)!important;
}

/* === DESKTOP: 5th item = LANDSCAPE + WIDER
/* Desktop: correct landscape height so it matches portrait items */
@media (min-width: 1025px) {
    .si-random-item:nth-child(5) .si-random-image {
        aspect-ratio: 1.575 / 1;
    }
}

.si-random-item:nth-child(5) {
    grid-column: span 2; /* spans 2 columns on desktop */
}

/* === TABLET (≤ 1024px): 2 portrait | 2 portrait | 1 landscape */
@media (max-width: 1024px) {
    .si-random-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }

    /* 5th item = full-width last row, keep landscape-ish ratio */
    .si-random-item:nth-child(5) {
        grid-column: 1 / -1;
    }
}

/* === SMARTPHONE (≤ 600px): 2 portrait | 1 landscape (ONLY 3 ITEMS)
   Show items 1 + 2 (portrait), item 5 (landscape) */
@media (max-width: 600px) {

    .si-random-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Hide items 3 and 4 completely */
    .si-random-item:nth-child(3),
    .si-random-item:nth-child(4) {
        display: none !important;
    }

    /* Item 5 becomes the landscape full-width row */
    .si-random-item:nth-child(5) {
        grid-column: 1 / -1 !important;
    }

    .si-random-item:nth-child(5) .si-random-image {
        /* here we can go a bit more classic landscape again */
        aspect-ratio: 260.2244 / 148.1125; /* landscape */
    }
}