/* ==========================================================================
   MG BLOG — RECENZJE — NATIVE 1.4.0
   Czysta wersja bez historycznych patchy.

   DESKTOP / TABLET
   - okładka 320 px
   - tekst oblewa okładkę
   - 20 px pomiędzy okładką i tekstem z prawej
   - brak sztucznego dolnego marginesu floatu; pionowy odstęp tworzy
     naturalny line-height tekstu (wizualnie odpowiada ok. 20 px)

   MOBILE
   - brak oblewania
   - okładka wycentrowana
   - tekst zawsze pod okładką
   ========================================================================== */


/* ==========================================================================
   0. PARAMETRY
   ========================================================================== */

.mg-review-native {
    --mg-review-cover-w: 320px;
    --mg-review-cover-gap-x: 20px;
    --mg-review-mobile-gap-y: 16px;
    --mg-review-text-gap: 16px;

    display: flow-root;
    margin: 0 !important;
    padding: 0 !important;

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

    --wp--style--block-gap: 0px;
}


/* ==========================================================================
   1. RYTM WPISU / SOCIAL
   ========================================================================== */

.mg-review-entry .entry-header {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mg-review-entry .entry-header .entry-taxonomies {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}

.mg-review-entry .entry-header .entry-title {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    font-size: 28px !important;
    line-height: 1.35 !important;
}

.mg-review-entry .entry-header .entry-meta {
    margin: 0 !important;
    padding: 0 !important;
}

.mg-review-entry .entry-summary,
.mg-review-entry .entry-content,
.mg-review-entry .entry-content.single-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.mg-review-entry
.addtoany_share_save_container.addtoany_content.addtoany_content_top {
    margin: 12px 0 12px 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.mg-review-entry
.addtoany_share_save_container.addtoany_content.addtoany_content_top
.a2a_kit {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}


/* ==========================================================================
   2. RESET BLOKÓW
   ========================================================================== */

.mg-review-native .wp-block-group,
.mg-review-native .wp-block-image,
.mg-review-native p {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}


/* ==========================================================================
   3. TYTUŁ RECENZOWANEGO DZIEŁA
   ========================================================================== */

.mg-review-native .mg-review-work-title {
    display: block !important;
    clear: both !important;
    width: 100% !important;

    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    color: var(--global-palette4, #333) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    text-align: left !important;
}


/* ==========================================================================
   4. OKŁADKA — DESKTOP / TABLET
   ========================================================================== */

@media (min-width: 768px) {

    .mg-review-native .mg-review-cover {
        float: left !important;
        clear: none !important;

        width: var(--mg-review-cover-w) !important;
        min-width: var(--mg-review-cover-w) !important;
        max-width: var(--mg-review-cover-w) !important;

        /*
         * Poziomo dokładnie 20 px.
         * Dół = 0, ponieważ przy floacie line-height pierwszej pełnej
         * linii pod grafiką dodaje własną przestrzeń. Ustawienie tu 20 px
         * dawało wizualnie ok. 35–40 px.
         */
        margin: 0 var(--mg-review-cover-gap-x) 0 0 !important;
        margin-block: 0 !important;
        margin-inline: 0 var(--mg-review-cover-gap-x) !important;

        padding: 0 !important;

        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    .mg-review-native .mg-review-cover > a {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    .mg-review-native .mg-review-cover img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        border-radius: 3px;
    }
}


/* ==========================================================================
   5. TEKST RECENZJI
   ========================================================================== */

.mg-review-native .mg-review-text {
    margin: 0 0 var(--mg-review-text-gap) 0 !important;
    padding: 0 !important;

    font-size: 17px !important;
    line-height: 1.6 !important;

    text-align: justify !important;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}


/* ==========================================================================
   6. NOTA I METADANE
   ========================================================================== */

.mg-review-native .mg-review-note {
    clear: both !important;

    margin: 24px 0 16px 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1.5 !important;
    font-style: italic;
    opacity: .8;
}

.mg-review-native .mg-review-meta {
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mg-review-native .mg-review-meta-row {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 17px !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

.mg-review-native .mg-review-meta-row strong {
    color: var(--global-palette4, #333) !important;
    font-weight: 700 !important;
}


/* ==========================================================================
   7. MOBILE — BEZ OBLEWANIA, OKŁADKA NA ŚRODKU
   ========================================================================== */

@media (max-width: 767px) {

    .mg-review-native {
        display: block !important;
    }

    /*
     * Klucz:
     * - nie ma float
     * - nie ma alignleft (plugin usuwa tę klasę podczas renderowania)
     * - figure ma własną szerokość 320 px i automatyczne marginesy
     */
    .mg-review-native .mg-review-cover {
        float: none !important;
        clear: both !important;
        display: block !important;

        width: var(--mg-review-cover-w) !important;
        min-width: 0 !important;
        max-width: calc(100% - 24px) !important;

        margin: 0 auto var(--mg-review-mobile-gap-y) auto !important;
        margin-block: 0 var(--mg-review-mobile-gap-y) !important;
        margin-inline: auto !important;

        padding: 0 !important;

        position: static !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;

        text-align: center !important;
    }

    .mg-review-native .mg-review-cover > a {
        display: block !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    .mg-review-native .mg-review-cover img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 auto !important;
        padding: 0 !important;
    }

    /*
     * Każdy akapit ma zacząć się pod okładką.
     * Nie zostawiamy motywowi żadnej możliwości oblewania.
     */
    .mg-review-native .mg-review-text {
        clear: both !important;
        float: none !important;
        width: 100% !important;
    }

    .mg-review-native .mg-review-work-title,
    .mg-review-native .mg-review-text,
    .mg-review-native .mg-review-meta-row {
        font-size: 17px !important;
    }

    .mg-review-native .mg-review-note {
        margin-top: 20px !important;
    }
}
/* ==========================================================================
   8. DESKTOP OPTICAL TOP ALIGNMENT v1.4.1
   Górna krawędź okładki ma pokrywać się optycznie z górą liter
   pierwszego akapitu ("W Bydgoszczy...").
   Line-height akapitu zostawia kilka pikseli nad glifami, dlatego
   okładkę opuszczamy o 3 px.
   ========================================================================== */

@media (min-width: 768px) {
    .mg-review-native .mg-review-cover {
        margin-top: 3px !important;
        margin-block-start: 3px !important;
    }
}