/* »Slastni recepti« na strani izdelka — videz prevzet iz Latest Recepti Posts 1.8.3, na koncu dodatki (značke iz filtrov). */
.lrp-container {
    margin: 0 auto;
    max-width: 1440px; /* Limit max width */
}

/* Header Section */
.lrp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.lrp-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
}

.lrp-view-all {
    font-size: 14px;
    color: black;
    text-decoration: none;
    font-weight: bold;
}

/* Posts Wrapper */
.lrp-posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
}

/* 🔹 Default: 4 Equal Columns for Large Screens */
.lrp-post {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    flex: 1 1 23%;
    max-width: 23%;
}

.lrp-post:hover {
    transform: translateY(-5px);
}

/* Image Container */
.lrp-image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 220px;
}

.lrp-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Category Tag */
.lrp-category {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ffcb05;
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    text-transform: uppercase;
}

/* Content Styling */
.lrp-content {
    padding: 15px;
}

.lrp-content h3 {
    font-size: 18px;
    margin: 0 0 10px;
}

.lrp-content h3 a {
    color: black;
    text-decoration: none;
}

.lrp-content p {
    font-size: 14px;
    color: #666;
}

.lrp-meta {
    font-size: 12px;
    color: #999;
}

/* 🔹 Tablet: 2 Rows (Stacked 2x2) */
@media (max-width: 992px) {
    .lrp-container {
        max-width: 100%; /* Ensure full width */
        padding: 0 15px;
    }

    .lrp-posts {
        flex-direction: column; /* Stack posts */
        align-items: center;
    }

    .lrp-post {
        width: 48%; /* Two per row */
        max-width: 48%;
    }
}

/* 🔹 Mobile: 1 Row (Full Width) */
@media (max-width: 600px) {
    .lrp-container {
        max-width: 100%; /* Full width */
        padding: 0 0;
    }

    .lrp-post {
        width: 100%;
        max-width: 100%;
		border: 1px solid #d5d5d5;
        box-shadow: none;
    }
}

@media (max-width: 600px) {
    .swiper {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .swiper-wrapper {
        display: flex;
    }

    .swiper-slide {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Swiper navigation buttons */
    .swiper-button-prev,
    .swiper-button-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 10;
    }

    .swiper-button-prev {
        left: 10px;
		color: #525252 !important;
    	background: none;
    }

    .swiper-button-next {
        right: 10px;
		color: #525252 !important;
    	background: none;
    }

    /* Arrow Icons */
    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 20px;
        font-weight: bold;
    }
}
/* ---------------------------------------------------------------------------
   Frutilu dodatki: značka okusa, čas in vrsta iz filtrov, okus v naslovu
   Barve iz design sistema (Ink #111111, Mist #F4F4F4, okusi --flavor-*).
   --------------------------------------------------------------------------- */
.lrp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lrp-for {
    display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
    border-radius: 999px; background: #F4F4F4; color: #111111;
    font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0;
}
.lrp-for i { width: 12px; height: 12px; border-radius: 50%; background: var(--lrp-flavor, #F6A300); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }

/* Stara rumena značka: temno besedilo (beli tekst na rumeni ni berljiv) */
.lrp-category { color: #111111; font-weight: 700; }
.lrp-category--flavor {
    background: var(--lrp-flavor, #F6A300); color: var(--lrp-ink, #111111);
    text-transform: none; border-radius: 999px; letter-spacing: 0;
}
.lrp-category--new { left: auto; right: 10px; background: #111111; color: #FFFFFF; border-radius: 999px; letter-spacing: .06em; }

/* Brez slike: polje v barvi okusa s krogom */
.lrp-ph { position: absolute; inset: 0; background: color-mix(in srgb, var(--lrp-flavor, #F6A300) 16%, #fff); overflow: hidden; }
.lrp-ph::before { content: ""; position: absolute; left: 50%; bottom: -40%; width: 70%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: color-mix(in srgb, var(--lrp-flavor, #F6A300) 45%, transparent); }

/* Čas in vrsta */
.lrp-content { display: flex; flex-direction: column; }
.lrp-content p { margin: 0 0 10px; }
.lrp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.lrp-chip {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
    border-radius: 999px; background: #F4F4F4; color: #111111; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.lrp-chip svg { flex: none; }
.lrp-post { display: flex; flex-direction: column; }
.lrp-post .lrp-content { flex: 1; }
.lrp-post:focus-within { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #006B78; }
.lrp-content h3 a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .lrp-post { transition: none; } }

.lrp-container .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Manj kot 4 recepti okusa: poravnaj levo (ne na sredino) */
@media (min-width: 993px) { .lrp-container--matched .lrp-posts { justify-content: flex-start; } }
.lrp-header { gap: 12px; }
.lrp-view-all { white-space: nowrap; flex: none; }
/* Sekcija vedno čez celo širino (v flex postavitvi izdelka se sicer skrči na vsebino) */
.lrp-container { width: 100%; box-sizing: border-box; }