/* ==========================================================================
   MG BLOG — RECENZJE FILMOWE — NATIVE 1.5.0

   Rozszerzenie układu .mg-review-native.
   Różnica względem recenzji książkowych:
   po plakacie znajduje się pasek oceny:
   POLECAM / MOŻNA ZOBACZYĆ / NIE OGLĄDAĆ.

   Cały stos [PLAKAT + OCENA] zachowuje się jak okładka książki:
   - desktop/tablet: pływa po lewej, tekst go oblewa,
   - mobile: jest wycentrowany i tekst zaczyna się pod nim.
   ========================================================================== */

.mg-film-review-native {
    --mg-film-review-poster-w: 320px;
    --mg-film-review-gap-x: 20px;

    --mg-film-review-rating-w: 150px;
    --mg-film-review-rating-h: 40px;
    --mg-film-review-rating-gap: 10px;

    --mg-film-review-mobile-gap-y: 16px;
}


/* ==========================================================================
   1. STOS: PLAKAT + OCENA
   ========================================================================== */

@media (min-width: 768px) {

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

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

        /*
         * 3 px = takie samo optyczne wyrównanie do początku pierwszego
         * akapitu jak przy recenzji książkowej.
         */
        margin: 3px var(--mg-film-review-gap-x) 0 0 !important;
        margin-block: 3px 0 !important;
        margin-inline: 0 var(--mg-film-review-gap-x) !important;

        padding: 0 !important;

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

    /*
     * W recenzjach książkowych floatem jest samo figure.
     * Tu floatem jest rodzic, więc plakat wewnątrz nie może już floatować.
     */
    .mg-film-review-native .mg-film-review-media .mg-review-cover {
        float: none !important;
        clear: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        margin-block: 0 !important;
        margin-inline: 0 !important;

        padding: 0 !important;
    }
}


/* ==========================================================================
   2. PLAKAT
   ========================================================================== */

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

.mg-film-review-native .mg-film-review-media .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;
}


/* ==========================================================================
   3. PASEK OCENY POD PLAKATEM
   ========================================================================== */

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

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

    height: var(--mg-film-review-rating-h) !important;

    margin: var(--mg-film-review-rating-gap) 0 0 0 !important;
    padding: 0 !important;

    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
}

.mg-film-review-native .mg-film-review-rating--polecam {
    background-image: url("https://blog.marcingrzeszczak.eu/images/polecam.png");
}

.mg-film-review-native .mg-film-review-rating--mozna {
    background-image: url("https://blog.marcingrzeszczak.eu/images/mozna_zobaczyc.png");
}

.mg-film-review-native .mg-film-review-rating--nie {
    background-image: url("https://blog.marcingrzeszczak.eu/images/nie_ogladac.png");
}


/* ==========================================================================
   4. MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .mg-film-review-native .mg-film-review-media {
        float: none !important;
        clear: both !important;
        display: block !important;

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

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

        padding: 0 !important;

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

    .mg-film-review-native .mg-film-review-media .mg-review-cover {
        float: none !important;
        clear: none !important;
        display: block !important;

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

        margin: 0 !important;
        margin-block: 0 !important;
        margin-inline: 0 !important;

        padding: 0 !important;
    }

    /*
     * Pasek pozostaje pod plakatem i jest wyrównany do jego lewej krawędzi,
     * tak jak w Premierach.
     */
    .mg-film-review-native .mg-film-review-rating {
        margin:
            var(--mg-film-review-rating-gap)
            0
            0
            0 !important;
    }

    /*
     * Bezwzględnie bez oblewania na telefonie.
     */
    .mg-film-review-native .mg-review-text {
        clear: both !important;
        float: none !important;
        width: 100% !important;
    }
}