/*
 * =========================================================
 * Prevenció Patika
 * Home Promo Mosaic v2.0
 * =========================================================
 *
 * Közös CSS:
 *
 * - publikus főoldal
 * - Apollo admin előnézet
 *
 * Desktop:
 *
 * - bal oszlop: 50 / 50
 * - középső oszlop: 65 / 35
 * - jobb oszlop: 50 / 50
 *
 * Mobil:
 *
 * - kiemelt ajánlat elsőként
 * - kisebb kártyák két oszlopban
 * - középső alsó széles kártyaként
 *
 * =========================================================
 */


/* =========================================================
   Fő Grid
   ========================================================= */

.home-mosaic-grid {
    --mosaic-gap: 14px;
    --mosaic-radius: 23px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.65fr)
        minmax(0, 1fr);

    grid-template-rows:
        repeat(20, minmax(0, 1fr));

    gap: var(--mosaic-gap);

    width: 100%;
    height: 620px;

    align-items: stretch;
}


/* =========================================================
   Kártyapozíciók
   ========================================================= */

/*
 * Bal oszlop: 50 / 50
 */

.home-mosaic-slot--left_top {
    grid-area: auto;

    grid-column: 1;
    grid-row: 1 / 11;
}

.home-mosaic-slot--left_bottom {
    grid-area: auto;

    grid-column: 1;
    grid-row: 11 / 21;
}


/*
 * Középső oszlop: 65 / 35
 */

.home-mosaic-slot--center_featured {
    grid-area: auto;

    grid-column: 2;
    grid-row: 1 / 14;
}

.home-mosaic-slot--center_bottom {
    grid-area: auto;

    grid-column: 2;
    grid-row: 14 / 21;
}


/*
 * Jobb oszlop: 50 / 50
 */

.home-mosaic-slot--right_top {
    grid-area: auto;

    grid-column: 3;
    grid-row: 1 / 11;
}

.home-mosaic-slot--right_bottom {
    grid-area: auto;

    grid-column: 3;
    grid-row: 11 / 21;
}


/* =========================================================
   Kártya
   ========================================================= */

.home-mosaic-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
    isolation: isolate;

    border: 1px solid rgba(12, 40, 58, 0.045);
    border-radius: var(--mosaic-radius);

    padding: 21px;

    color: #142d3d;
    background: #f3f8f8;

    text-align: left;
    text-decoration: none;

    box-shadow:
        0 5px 22px rgba(16, 45, 62, 0.035);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

@media (hover: hover) {
    .home-mosaic-card:hover {
        transform: translateY(-3px);

        box-shadow:
            0 15px 35px rgba(16, 45, 62, 0.095);
    }
}

.home-mosaic-card:focus-visible {
    outline: 3px solid #139c9d;
    outline-offset: 3px;
}


/* =========================================================
   Háttértémák
   ========================================================= */

.home-mosaic-card--pink {
    --mosaic-accent: #bd527b;

    background:
        radial-gradient(
            circle at 90% 90%,
            rgba(255, 255, 255, 0.55),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #fceaf0,
            #f8dfe9
        );
}

.home-mosaic-card--peach {
    --mosaic-accent: #b96a37;

    background:
        radial-gradient(
            circle at 90% 85%,
            rgba(255, 255, 255, 0.6),
            transparent 50%
        ),
        linear-gradient(
            135deg,
            #fff1e4,
            #ffe2d1
        );
}

.home-mosaic-card--mint {
    --mosaic-accent: #087b77;

    background:
        radial-gradient(
            circle at 83% 30%,
            rgba(255, 255, 255, 0.62),
            transparent 43%
        ),
        linear-gradient(
            135deg,
            #d6f4eb,
            #b6e8db
        );
}

.home-mosaic-card--blue {
    --mosaic-accent: #3d72ae;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(255, 255, 255, 0.65),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #e5f2ff,
            #cfe6fb
        );
}

.home-mosaic-card--sky {
    --mosaic-accent: #4288b0;

    background:
        radial-gradient(
            circle at 90% 80%,
            rgba(255, 255, 255, 0.7),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #e5f7fd,
            #d1edf7
        );
}

.home-mosaic-card--green {
    --mosaic-accent: #448b61;

    background:
        radial-gradient(
            circle at 90% 80%,
            rgba(255, 255, 255, 0.62),
            transparent 47%
        ),
        linear-gradient(
            135deg,
            #e7f6e9,
            #cdebd2
        );
}

.home-mosaic-card--lavender {
    --mosaic-accent: #8466ae;

    background:
        linear-gradient(
            135deg,
            #f3ecff,
            #e8dcfc
        );
}

.home-mosaic-card--cream {
    --mosaic-accent: #a17b38;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #f9edce
        );
}

.home-mosaic-card--white {
    --mosaic-accent: #087f85;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f2f8f8
        );
}

.home-mosaic-card--navy {
    --mosaic-accent: #b1eee4;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 83% 22%,
            rgba(35, 171, 166, 0.25),
            transparent 46%
        ),
        linear-gradient(
            135deg,
            #12364c,
            #092537
        );
}


/* =========================================================
   Dekoratív háttérelemek
   ========================================================= */

.home-mosaic-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -95px;
    bottom: -125px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.24);

    pointer-events: none;

    z-index: -1;
}

.home-mosaic-card::after {
    content: "";

    position: absolute;

    width: 125px;
    height: 125px;

    right: 5%;
    top: -78px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.15);

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   Kártyatartalom
   ========================================================= */

.home-mosaic-card-content {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;

    align-items: flex-start;

    width: 100%;
    height: 100%;

    min-height: 0;
}


/* =========================================================
   Badge
   ========================================================= */

.home-mosaic-card-badge {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    max-width: 100%;

    padding: 6px 11px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.7);
    color: var(--mosaic-accent, #087f85);

    font-family: Roboto, Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.075em;
    line-height: 1.3;

    text-transform: uppercase;
}

.home-mosaic-badge--navy {
    background: #143d51;
    color: #fff;
}

.home-mosaic-badge--teal {
    background: #087f85;
    color: #fff;
}

.home-mosaic-badge--pink {
    background: #b64d75;
    color: #fff;
}

.home-mosaic-badge--green {
    background: #40885b;
    color: #fff;
}

.home-mosaic-badge--orange {
    background: #c77b3b;
    color: #fff;
}

.home-mosaic-badge--white {
    background: rgba(255, 255, 255, 0.9);
    color: #16384a;
}


/* =========================================================
   Termékcím
   ========================================================= */

.home-mosaic-card-title {
    position: relative;

    margin: 12px 0 5px;

    max-width: 65%;

    color: inherit;

    font-family:
        Roboto,
        Arial,
        sans-serif;

    font-size: clamp(14px, 1.2vw, 19px);
    font-weight: 800;

    line-height: 1.28;

    overflow-wrap: anywhere;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
}


/* =========================================================
   Leírás
   ========================================================= */

.home-mosaic-card-description {
    margin: 0;

    max-width: 64%;

    font-family:
        Roboto,
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1.5;

    opacity: 0.8;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* =========================================================
   Ár
   ========================================================= */

.home-mosaic-card-price-row {
    display: flex;
    align-items: baseline;

    flex-wrap: wrap;
    gap: 5px 9px;

    margin-top: auto;
    padding-top: 12px;

    max-width: 65%;

    position: relative;
    z-index: 3;
}

.home-mosaic-card-old-price {
    font-family:
        Roboto,
        Arial,
        sans-serif;

    font-size: 12px;

    opacity: 0.55;

    text-decoration: line-through;
}

.home-mosaic-card-price {
    font-family:
        Roboto,
        Arial,
        sans-serif;

    font-size: clamp(17px, 1.5vw, 22px);
    font-weight: 800;

    letter-spacing: -0.025em;
    white-space: nowrap;
}


/* =========================================================
   CTA
   ========================================================= */

.home-mosaic-card-action {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 10px;

    padding: 8px 14px;

    border-radius: 999px;

    background: #ffffff;
    color: #153a4c;

    font-family: Roboto, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 3px 13px rgba(0, 0, 0, 0.045);
}

.home-mosaic-card--navy
.home-mosaic-card-action {
    background: #15a4a2;
    color: #fff;
}


/* =========================================================
   Promóciós képek
   ========================================================= */

.home-mosaic-card-image-wrap {
    position: absolute;

    right: 2%;
    top: 50%;

    transform: translateY(-43%);

    width: 48%;
    height: 72%;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 1;

    pointer-events: none;
}

.home-mosaic-card-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 12px 13px rgba(15, 42, 52, 0.10)
        );
}


/* =========================================================
   Középső nagy – 65%
   ========================================================= */

.home-mosaic-slot--center_featured {
    padding: 28px 30px;
}

.home-mosaic-slot--center_featured
.home-mosaic-card-title {
    max-width: 55%;

    font-size: clamp(20px, 1.8vw, 28px);

    line-height: 1.2;

    margin-top: 10px;

    -webkit-line-clamp: 3;
}

.home-mosaic-slot--center_featured
.home-mosaic-card-description {
    max-width: 53%;

    font-size: 13px;
}

.home-mosaic-slot--center_featured
.home-mosaic-card-image-wrap {
    width: 48%;
    height: 83%;

    right: 0;
    top: 52%;

    transform: translateY(-43%);
}

.home-mosaic-card-highlight {
    display: block;

    margin-top: 8px;
    margin-bottom: 7px;

    font-family:
        Roboto,
        Arial,
        sans-serif;

    font-size: clamp(30px, 3.1vw, 50px);
    font-weight: 900;

    letter-spacing: -0.07em;
    line-height: 1;

    color: var(--mosaic-accent, #087b77);
}

.home-mosaic-card--navy
.home-mosaic-card-highlight {
    color: #b1eee4;
}

.home-mosaic-slot--center_featured
.home-mosaic-card-price-row {
    max-width: 55%;
}

.home-mosaic-slot--center_featured
.home-mosaic-card-action {
    padding: 10px 18px;

    background: #0a817b;
    color: #fff;

    font-size: 13px;
}


/* =========================================================
   Középső alsó – 35%
   ========================================================= */

.home-mosaic-slot--center_bottom {
    padding: 22px 26px;
}

.home-mosaic-slot--center_bottom
.home-mosaic-card-title {
    max-width: 57%;

    font-size: clamp(16px, 1.45vw, 22px);

    -webkit-line-clamp: 2;
}

.home-mosaic-slot--center_bottom
.home-mosaic-card-description {
    max-width: 54%;

    -webkit-line-clamp: 2;
}

.home-mosaic-slot--center_bottom
.home-mosaic-card-image-wrap {
    right: 2%;

    top: 50%;
    transform: translateY(-50%);

    width: 41%;
    height: 92%;
}

.home-mosaic-slot--center_bottom
.home-mosaic-card-price-row {
    max-width: 58%;
}


/* =========================================================
   Placeholder
   ========================================================= */

.home-mosaic-card--placeholder {
    display: flex;
    justify-content: center;
    align-items: center;

    flex-direction: column;

    gap: 9px;

    border: 2px dashed rgba(20, 69, 79, 0.13);

    background: #f6f9fa;

    color: #73909c;

    text-align: center;
}

.home-mosaic-placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: #e8f0f2;

    font-size: 17px;
    font-weight: 800;
}

.home-mosaic-placeholder-title {
    font-size: 14px;
    font-weight: 800;
}

.home-mosaic-placeholder-text {
    font-size: 12px;
    opacity: 0.7;
}


/* =========================================================
   Kisebb desktop / tablet
   ========================================================= */

@media (max-width: 1100px) {

    .home-mosaic-grid {
        --mosaic-gap: 11px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1.5fr)
            minmax(0, 1fr);

        height: 580px;
    }

    .home-mosaic-card {
        padding: 17px;
    }

    .home-mosaic-slot--center_featured {
        padding: 22px;
    }

    .home-mosaic-card-title {
        max-width: 70%;
        font-size: 15px;
    }

    .home-mosaic-card-image-wrap {
        width: 45%;
        height: 67%;
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-highlight {
        font-size: 47px;
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-title {
        font-size: 21px;
    }
}


/* =========================================================
   Mobil
   ========================================================= */

@media (max-width: 767px) {

    .home-mosaic-grid {
        --mosaic-gap: 10px;
        --mosaic-radius: 18px;

        height: auto;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows: auto;

        grid-template-areas: none;
    }

    /*
     * Mobilon megszüntetjük
     * a desktopos sorpozíciókat.
     */

    .home-mosaic-slot--center_featured {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .home-mosaic-slot--left_top {
        grid-column: 1;
        grid-row: 2;
    }

    .home-mosaic-slot--right_top {
        grid-column: 2;
        grid-row: 2;
    }

    .home-mosaic-slot--left_bottom {
        grid-column: 1;
        grid-row: 3;
    }

    .home-mosaic-slot--right_bottom {
        grid-column: 2;
        grid-row: 3;
    }

    .home-mosaic-slot--center_bottom {
        grid-column: 1 / -1;
        grid-row: 4;
    }


    /*
     * Mobil kártyák
     */

    .home-mosaic-card {
        min-height: 225px;
        padding: 16px;
    }

    .home-mosaic-card-title {
        max-width: 90%;

        font-size: 14px;

        line-height: 1.3;

        -webkit-line-clamp: 3;
    }

    .home-mosaic-card-description {
        max-width: 90%;
        font-size: 11px;
    }

    .home-mosaic-card-image-wrap {
        top: auto;
        bottom: 8%;

        transform: none;

        width: 55%;
        height: 50%;
    }

    .home-mosaic-card-price-row {
        max-width: 100%;

        padding-top: 65px;
    }

    .home-mosaic-card-price {
        font-size: 17px;
    }

    .home-mosaic-card-action {
        padding: 7px 12px;
        font-size: 11px;
    }


    /*
     * Mobil középső nagy
     */

    .home-mosaic-slot--center_featured {
        min-height: 335px;
        padding: 22px;
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-title {
        max-width: 57%;
        font-size: 21px;
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-description {
        max-width: 57%;
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-highlight {
        font-size: 47px;
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-image-wrap {
        width: 47%;
        height: 76%;

        top: 52%;
        bottom: auto;

        transform: translateY(-42%);
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-price-row {
        max-width: 60%;
        padding-top: 18px;
    }


    /*
     * Mobil középső alsó
     */

    .home-mosaic-slot--center_bottom {
        min-height: 215px;
    }

    .home-mosaic-slot--center_bottom
    .home-mosaic-card-title {
        max-width: 58%;
    }

    .home-mosaic-slot--center_bottom
    .home-mosaic-card-image-wrap {
        width: 40%;
        height: 88%;

        top: 50%;
        bottom: auto;

        transform: translateY(-50%);
    }

    .home-mosaic-slot--center_bottom
    .home-mosaic-card-price-row {
        max-width: 60%;
        padding-top: 10px;
    }
}


/* =========================================================
   Nagyon keskeny mobil
   ========================================================= */

@media (max-width: 390px) {

    .home-mosaic-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .home-mosaic-slot--center_featured {
        grid-column: 1;
        grid-row: 1;
    }

    .home-mosaic-slot--left_top {
        grid-column: 1;
        grid-row: 2;
    }

    .home-mosaic-slot--right_top {
        grid-column: 1;
        grid-row: 3;
    }

    .home-mosaic-slot--left_bottom {
        grid-column: 1;
        grid-row: 4;
    }

    .home-mosaic-slot--right_bottom {
        grid-column: 1;
        grid-row: 5;
    }

    .home-mosaic-slot--center_bottom {
        grid-column: 1;
        grid-row: 6;
    }

    .home-mosaic-card {
        min-height: 195px;
    }

    .home-mosaic-card-image-wrap {
        width: 43%;
        height: 78%;
    }

    .home-mosaic-card-title,
    .home-mosaic-card-description,
    .home-mosaic-card-price-row {
        max-width: 57%;
    }

    .home-mosaic-slot--center_featured {
        min-height: 325px;
    }
}


/* =========================================================
   Mozgáscsökkentés
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .home-mosaic-card {
        transition: none;
    }

    .home-mosaic-card:hover {
        transform: none;
    }
}

/*
 * =========================================================
 * Home Mosaic – Image refinement v2.1
 * =========================================================
 *
 * A négy szélső promóciós kártya.
 *
 * Kép:
 * - jobb oldali 40–45%
 * - magasság 85%
 * - függőlegesen középre igazítva
 *
 * =========================================================
 */

@media (min-width: 768px) {

    .home-mosaic-slot--left_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-image-wrap {
        position: absolute;

        right: 1%;
        top: 50%;
        bottom: auto;

        transform: translateY(-50%);

        width: 48%;
        height: 85%;
    }

    /*
     * A szövegek maradjanak
     * a kártya bal oldalán.
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-title,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-title,

    .home-mosaic-slot--right_top
    .home-mosaic-card-title,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-title {
        max-width: 58%;
    }

    .home-mosaic-slot--left_top
    .home-mosaic-card-description,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-description,

    .home-mosaic-slot--right_top
    .home-mosaic-card-description,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-description {
        max-width: 56%;
    }
}

/*
 * =========================================================
 * Mozaik – címek és szövegek finomhangolása
 * ========================================================= */

/* A termékcím ne legyen túl nagy */

.home-mosaic-card-title {
    font-size: clamp(14px, 1.1vw, 17px);
    line-height: 1.25;
}

/* Középső nagy ajánlat */

.home-mosaic-slot--center_featured
.home-mosaic-card-title {
    font-size: clamp(19px, 1.65vw, 25px);
    -webkit-line-clamp: 3;
}

/* Középső alsó, lapos kártya */

.home-mosaic-slot--center_bottom
.home-mosaic-card-title {
    font-size: clamp(15px, 1.2vw, 19px);

    line-height: 1.2;

    margin-top: 8px;
    margin-bottom: 4px;

    -webkit-line-clamp: 2;
}

/* Leírás rövidebb a lapos kártyán */

.home-mosaic-slot--center_bottom
.home-mosaic-card-description {
    font-size: 11px;
    line-height: 1.35;

    -webkit-line-clamp: 1;
}

/* Az alsó kártya belső margója */

.home-mosaic-slot--center_bottom {
    padding: 17px 22px;
}

/*
 * =========================================================
 * Home Mosaic – Compact layout v2.2
 * =========================================================
 *
 * Desktop:
 * - kompaktabb teljes mozaik
 * - nagyobb promóciós képek
 * - változatlan 50/50 – 65/35 – 50/50 arány
 *
 * =========================================================
 */


/* =========================================================
   Desktop méretek
   ========================================================= */

@media (min-width: 1101px) {

    .home-mosaic-grid {
        height: 540px;
    }

    /*
     * Négy szélső kártya képei
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-image-wrap {
        right: -1%;
        top: 50%;
        bottom: auto;

        transform: translateY(-50%);

        width: 58%;
        height: 95%;
    }

    /*
     * A rövid marketingcímeknek
     * már nincs szükségük akkora helyre.
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-title,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-title,

    .home-mosaic-slot--right_top
    .home-mosaic-card-title,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-title {
        max-width: 61%;
    }

    /*
     * Leírások
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-description,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-description,

    .home-mosaic-slot--right_top
    .home-mosaic-card-description,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-description {
        max-width: 57%;
    }

    /*
     * Középső nagy kártya
     */

    .home-mosaic-slot--center_featured
    .home-mosaic-card-image-wrap {
        width: 51%;
        height: 91%;

        right: 0;
        top: 50%;

        transform: translateY(-50%);
    }

    /*
     * Középső alsó kártya
     */

    .home-mosaic-slot--center_bottom
    .home-mosaic-card-image-wrap {
        width: 45%;
        height: 95%;
    }

}


/* =========================================================
   Kisebb desktop / tablet
   ========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

    .home-mosaic-grid {
        height: 520px;
    }

    .home-mosaic-slot--left_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-image-wrap {
        right: -2%;
        top: 50%;
        bottom: auto;

        transform: translateY(-50%);

        width: 55%;
        height: 90%;
    }

}

/*
 * =========================================================
 * Home Mosaic – Layout refinement v2.3
 * =========================================================
 *
 * Desktop:
 *
 * Bal:      50 / 50
 * Középső: 60 / 40
 * Jobb:     50 / 50
 *
 * Szélső kártyák:
 *
 * 40% szöveg
 * 60% kép
 *
 * =========================================================
 */

@media (min-width: 768px) {

    /*
     * =========================================
     * Középső oszlop: 60 / 40
     * =========================================
     */

    .home-mosaic-slot--center_featured {
        grid-row: 1 / 13;
    }

    .home-mosaic-slot--center_bottom {
        grid-row: 13 / 21;
    }


    /*
     * =========================================
     * Négy szélső kártya
     * =========================================
     */

    .home-mosaic-slot--left_top,
    .home-mosaic-slot--left_bottom,
    .home-mosaic-slot--right_top,
    .home-mosaic-slot--right_bottom {
        padding: 17px;

        display: grid;

        grid-template-columns:
            minmax(0, 40%)
            minmax(0, 60%);

        align-items: stretch;
    }


    /*
     * =========================================
     * Szöveges terület
     * =========================================
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-content,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-content,

    .home-mosaic-slot--right_top
    .home-mosaic-card-content,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-content {
        grid-column: 1;

        position: relative;

        width: 100%;
        min-width: 0;
        height: 100%;

        z-index: 2;
    }


    /*
     * =========================================
     * Termékcím és leírás
     * =========================================
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-title,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-title,

    .home-mosaic-slot--right_top
    .home-mosaic-card-title,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-title {
        max-width: 100%;

        font-size: 14px;
        line-height: 1.25;

        -webkit-line-clamp: 3;
    }

    .home-mosaic-slot--left_top
    .home-mosaic-card-description,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-description,

    .home-mosaic-slot--right_top
    .home-mosaic-card-description,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-description {
        max-width: 100%;

        font-size: 10px;
        line-height: 1.4;

        -webkit-line-clamp: 3;
    }


    /*
     * =========================================
     * Termékképek
     * =========================================
     *
     * A képek most saját gridterületet
     * kapnak, nem lógnak rá a szövegre.
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-image-wrap {
        position: relative;

        grid-column: 2;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        transform: none;

        width: 100%;
        height: 100%;

        max-width: 100%;
        min-width: 0;
    }

    .home-mosaic-slot--left_top
    .home-mosaic-card-image,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-image,

    .home-mosaic-slot--right_top
    .home-mosaic-card-image,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-image {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }


    /*
     * =========================================
     * Ár és gomb
     * =========================================
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-price-row,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-price-row,

    .home-mosaic-slot--right_top
    .home-mosaic-card-price-row,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-price-row {
        max-width: 100%;

        padding-top: 8px;
    }


    /*
     * =========================================
     * Középső alsó kártya
     * =========================================
     */

    .home-mosaic-slot--center_bottom {
        padding: 18px 22px;
    }

    .home-mosaic-slot--center_bottom
    .home-mosaic-card-title {
        max-width: 55%;

        font-size: 18px;
        line-height: 1.25;

        -webkit-line-clamp: 2;
    }

    .home-mosaic-slot--center_bottom
    .home-mosaic-card-description {
        max-width: 55%;

        font-size: 11px;

        -webkit-line-clamp: 2;
    }

    .home-mosaic-slot--center_bottom
    .home-mosaic-card-price-row {
        max-width: 55%;

        padding-top: 8px;
    }

}

/*
 * =========================================================
 * Home Mosaic – Mobile refinement v2.4
 * =========================================================
 *
 * - kompaktabb heti ajánlat
 * - kisebb kártyákon kép felül
 * - szöveg a kép alatt
 * - ár és CTA alul
 * - változatlan desktop
 *
 * =========================================================
 */

@media (max-width: 767px) {

    /*
     * =========================================
     * Középső nagy – heti ajánlat
     * =========================================
     */

    .home-mosaic-slot--center_featured {
        min-height: 270px;
        height: 270px;

        padding: 18px;
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-highlight {
        font-size: 38px;

        margin-top: 10px;
        margin-bottom: 5px;
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-title {
        max-width: 55%;

        font-size: 17px;
        line-height: 1.2;

        -webkit-line-clamp: 3;
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-description {
        max-width: 54%;

        font-size: 11px;

        -webkit-line-clamp: 2;
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-image-wrap {
        position: absolute;

        width: 48%;
        height: 75%;

        right: 1%;
        top: 49%;
        bottom: auto;

        transform: translateY(-42%);
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-price-row {
        max-width: 57%;

        margin-top: auto;
        padding-top: 6px;
    }

    .home-mosaic-slot--center_featured
    .home-mosaic-card-action {
        margin-top: 7px;

        padding: 8px 13px;

        font-size: 11px;
    }


    /*
     * =========================================
     * Négy kisebb kártya
     * =========================================
     *
     * Fontos:
     *
     * Felül badge
     * Középen termékkép
     * Alatta cím és leírás
     * Legalul ár és gomb
     *
     * =========================================
     */

    .home-mosaic-slot--left_top,
    .home-mosaic-slot--left_bottom,
    .home-mosaic-slot--right_top,
    .home-mosaic-slot--right_bottom {
        display: flex;
        flex-direction: column;

        min-height: 345px;
        height: 345px;

        padding: 13px;

        /*
         * A desktopos 40/60-as
         * belső Gridet felülírjuk.
         */

        grid-template-columns: none;
    }


    /*
     * A képet a tartalom fölé helyezzük.
     *
     * A DOM-ban a content megelőzi
     * a képet, ezért flex ordert használunk.
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-image-wrap {
        position: absolute;

        top: 42px;
        left: 5%;
        right: 5%;
        bottom: auto;

        transform: none;

        width: 90%;
        height: 145px;

        display: flex;
        align-items: center;
        justify-content: center;

        z-index: 1;

        pointer-events: none;
    }


    /*
     * Termékképek
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-image,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-image,

    .home-mosaic-slot--right_top
    .home-mosaic-card-image,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-image {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }


    /*
     * Tartalom:
     * helyet foglalunk a képnek.
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-content,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-content,

    .home-mosaic-slot--right_top
    .home-mosaic-card-content,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-content {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;

        align-items: flex-start;
    }


    /*
     * Badge
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-badge,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-badge,

    .home-mosaic-slot--right_top
    .home-mosaic-card-badge,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-badge {
        font-size: 9px;

        padding: 5px 8px;
    }


    /*
     * Cím:
     * a kép alá toljuk.
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-title,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-title,

    .home-mosaic-slot--right_top
    .home-mosaic-card-title,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-title {
        max-width: 100%;

        margin-top: 160px;
        margin-bottom: 4px;

        font-size: 13px;
        line-height: 1.25;

        -webkit-line-clamp: 2;
    }


    /*
     * Leírás
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-description,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-description,

    .home-mosaic-slot--right_top
    .home-mosaic-card-description,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-description {
        max-width: 100%;

        font-size: 10px;
        line-height: 1.35;

        -webkit-line-clamp: 2;
    }


    /*
     * Ár
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-price-row,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-price-row,

    .home-mosaic-slot--right_top
    .home-mosaic-card-price-row,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-price-row {
        max-width: 100%;

        margin-top: auto;

        padding-top: 7px;
    }


    /*
     * CTA
     */

    .home-mosaic-slot--left_top
    .home-mosaic-card-action,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-action,

    .home-mosaic-slot--right_top
    .home-mosaic-card-action,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-action {
        margin-top: 7px;

        padding: 7px 11px;

        font-size: 10px;
    }

}


/*
 * =========================================================
 * Nagyon keskeny mobil
 * =========================================================
 *
 * 390 px alatt egyoszlopos Grid.
 *
 * Itt visszaállítjuk a képeket
 * a szöveg mellé, mert egy teljes
 * szélességű kártyán ez jobban mutat.
 *
 * =========================================================
 */

@media (max-width: 390px) {

    .home-mosaic-slot--left_top,
    .home-mosaic-slot--left_bottom,
    .home-mosaic-slot--right_top,
    .home-mosaic-slot--right_bottom {
        min-height: 220px;
        height: 220px;
    }

    .home-mosaic-slot--left_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_top
    .home-mosaic-card-image-wrap,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-image-wrap {
        top: 50%;
        left: auto;
        right: 2%;

        width: 44%;
        height: 80%;

        transform: translateY(-50%);
    }

    .home-mosaic-slot--left_top
    .home-mosaic-card-title,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-title,

    .home-mosaic-slot--right_top
    .home-mosaic-card-title,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-title {
        max-width: 55%;

        margin-top: 12px;
    }

    .home-mosaic-slot--left_top
    .home-mosaic-card-description,

    .home-mosaic-slot--left_bottom
    .home-mosaic-card-description,

    .home-mosaic-slot--right_top
    .home-mosaic-card-description,

    .home-mosaic-slot--right_bottom
    .home-mosaic-card-description {
        max-width: 55%;
    }
}

/*
 * =========================================================
 * Home Mosaic – publikus kártyalink
 * ========================================================= */

.home-mosaic-card-overlay-link {
    position: absolute;
    inset: 0;

    z-index: 4;

    border-radius: inherit;
}

.home-mosaic-card-overlay-link:focus-visible {
    outline: 3px solid #087f85;
    outline-offset: -3px;
}

/*
 * A CTA az overlay fölé kerül.
 */

.home-mosaic-card-action {
    position: relative;
    z-index: 5;
}

/*
 * =========================================================
 * Home Mosaic – Élénkebb pasztellszínek v2.6
 * =========================================================
 *
 * Finoman telítettebb háttérszínek.
 * Változatlan layout, tipográfia és képméretek.
 * =========================================================
 */


/* Rózsaszín */

.home-mosaic-card--pink {
    background:
        radial-gradient(
            circle at 90% 90%,
            rgba(255, 255, 255, 0.45),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #fbdfe9,
            #f5d0e0
        );
}


/* Barack */

.home-mosaic-card--peach {
    background:
        radial-gradient(
            circle at 90% 85%,
            rgba(255, 255, 255, 0.5),
            transparent 50%
        ),
        linear-gradient(
            135deg,
            #ffead5,
            #ffdac2
        );
}


/* Mentazöld */

.home-mosaic-card--mint {
    background:
        radial-gradient(
            circle at 83% 30%,
            rgba(255, 255, 255, 0.5),
            transparent 43%
        ),
        linear-gradient(
            135deg,
            #c9f1e4,
            #a7e4d1
        );
}


/* Kék */

.home-mosaic-card--blue {
    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(255, 255, 255, 0.55),
            transparent 48%
        ),
        linear-gradient(
            135deg,
            #d9edff,
            #bcdefa
        );
}


/* Világoskék */

.home-mosaic-card--sky {
    background:
        radial-gradient(
            circle at 90% 80%,
            rgba(255, 255, 255, 0.55),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #d8f2fc,
            #bfe5f4
        );
}


/* Zöld */

.home-mosaic-card--green {
    background:
        radial-gradient(
            circle at 90% 80%,
            rgba(255, 255, 255, 0.5),
            transparent 47%
        ),
        linear-gradient(
            135deg,
            #dcf3e0,
            #bde5c6
        );
}


/* Levendula */

.home-mosaic-card--lavender {
    background:
        linear-gradient(
            135deg,
            #eee3ff,
            #ddcbf9
        );
}


/* Krém */

.home-mosaic-card--cream {
    background:
        linear-gradient(
            135deg,
            #fff6e4,
            #f6e6bb
        );
}

@media (max-width: 767px) {

    .home-mosaic-grid {
        display: flex;
        flex-wrap: nowrap;

        gap: 12px;

        height: auto;

        overflow-x: auto;
        overscroll-behavior-x: contain;

        scroll-snap-type: x mandatory;
        scroll-padding-inline: 16px;

        padding: 8px 16px 16px;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .home-mosaic-grid::-webkit-scrollbar {
        display: none;
    }

    .home-mosaic-card {
        flex: 0 0 88%;

        height: 275px;
        min-height: 275px;

        scroll-snap-align: start;
    }

}