/* ==========================================================================
   MG BLOG — RECENZJE W 7 ZDANIACH — NATIVE 1.6.0

   Bazą jest dokładnie ten sam komponent co w Premierach:
   .mg-premieres-exact

   Dzięki temu:
   - desktop: plakat 150 × 219 po lewej, treść po prawej,
   - mobile: plakat po lewej, ocena po prawej,
   - odstępy, fonty i social są identyczne jak w Premierach.

   Jedyny dodatek:
   opcjonalny rząd Oscarów pod paskiem POLECAM / MOŻNA ZOBACZYĆ /
   NIE OGLĄDAĆ.
   ========================================================================== */


/* ==========================================================================
   1. OSCARY POD OCENĄ — DESKTOP / TABLET
   ========================================================================== */

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

    width: 100% !important;
    max-width: 150px !important;

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

    line-height: 1 !important;
}

.mg-seven-review-native
.mg-seven-review-oscars
.mg-oscars-native-stat-icons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;

    gap: 1px !important;

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

    line-height: 1 !important;
}

.mg-seven-review-native
.mg-seven-review-oscars
.mg-oscars-native-stat-icon {
    display: block !important;
    flex: 0 0 auto !important;

    /* identycznie jak w module Oscarów: naturalny rozmiar pliku 1:1 */
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;

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

.mg-seven-review-native
.mg-seven-review-oscars
.mg-oscars-native-stat-number {
    margin: 5px 0 0 0 !important;
    padding: 0 !important;

    color: inherit !important;
    background: transparent !important;

    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}


/* ==========================================================================
   2. MOBILE
   Premierowy grid:
   [ PLAKAT ] [ wolne miejsce ]
   [ PLAKAT ] [ OCENA         ]
   [ PLAKAT ] [ OSCARY        ]
   ========================================================================== */

@media (max-width: 767px) {

    .mg-seven-review-native
    .mg-premiere-exact-media
    .mg-seven-review-oscars {
        grid-column: 2 !important;
        grid-row: 3 !important;

        align-self: end !important;
        justify-self: stretch !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: var(--mg-premiere-poster-w) !important;

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

    .mg-seven-review-native
    .mg-seven-review-oscars
    .mg-oscars-native-stat-icons {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .mg-seven-review-native
    .mg-seven-review-oscars
    .mg-oscars-native-stat-number {
        margin-top: 4px !important;
    }
}


/* ==========================================================================
   3. WARIANT BEZ OSCARÓW
   Nic nie trzeba dodawać do HTML.
   Zostaje czysty układ Premier:
   plakat + pasek oceny.
   ========================================================================== */