/* ==========================================================
   MG Blog — Oscary — NATIVE v1

   GŁÓWNA STRUKTURA:
   - Row            = układ statuetki + laureata
   - Media & Text   = plakat + statystyki
   - Columns        = główna kategoria + lista nominowanych

   NAJWAŻNIEJSZE PARAMETRY DO REGULACJI:
   ----------------------------------------------------------
   gap: 15px
       odstęp statuetka Oscara -> tekst LAUREAT

   .mg-oscars-native-stat-title
   margin: 0 0 .80rem
       odstęp tytuł filmu -> statuetki w statystykach

   .mg-oscars-native-stat-icons
   margin: 0
       odstęp bezpośrednio pod statuetkami

   .mg-oscars-native-stat-number
   margin: .7rem 0 0 0
       dodatkowy odstęp NAD wynikiem np. 4/16

   ========================================================== */


/* ==========================================================
   KOLORY I ZMIENNE
   ========================================================== */

.mg-oscars-native {

    /* Główny granat — nagłówki kategorii, akcenty */
    --mg-navy: #123f6b;

    /* Ciemniejszy granat — np. tytuły w statystykach */
    --mg-navy-dark: #0e3153;

    /* Złoty kolor — akcent laureata */
    --mg-gold: #b58a22;

    /* Jasna, półprzezroczysta linia obramowania */
    --mg-line: rgba(18,63,107,.14);

    /* Bardzo jasne granatowe tło */
    --mg-soft: rgba(18,63,107,.045);

    /* Bardzo jasne złote tło laureata */
    --mg-gold-soft: rgba(181,138,34,.07);
}


/* ==========================================================
   GÓRA WPISU
   ========================================================== */


/* Duża grafika/banner Oscarów na początku wpisu */
.mg-oscars-native .mg-oscars-native-hero {

    /* odstęp POD bannerem */
    margin: 0 0 1.4rem !important;
}


/* Sam obraz bannera */
.mg-oscars-native .mg-oscars-native-hero img {

    /* usuwa zachowanie inline obrazka */
    display: block;

    /* banner zajmuje całą szerokość */
    width: 100%;

    /* zachowanie proporcji */
    height: auto;
}


/* Tytuł gali:
   "98. gala rozdania Nagród..."
*/
.mg-oscars-native .mg-oscars-native-gala {

    /* odstęp POD tytułem gali */
    margin: 0 0 1rem !important;

    /* wysokość linii tekstu */
    line-height: 1.18;
}


/* Kontener z:
   DATA | MIEJSCE | PROWADZĄCY
*/
.mg-oscars-native .mg-oscars-native-meta {

    /* odstęp pomiędzy trzema kolumnami */
    gap: .8rem !important;

    /* 2.25rem = odstęp POD całym panelem informacji */
    margin: 0 0 2.25rem !important;
}


/* Pojedynczy kafelek:
   DATA
   noc z 15 na 16 marca
*/
.mg-oscars-native .mg-oscars-native-meta-card {

    /* wszystkie kafle mogą mieć równą wysokość */
    height: 100%;

    /* odstępy WEWNĄTRZ kafelka:
       góra/dół .8rem
       lewo/prawo .9rem
    */
    padding: .8rem .9rem;

    /* padding wliczany w szerokość */
    box-sizing: border-box;

    /* granatowa linia u góry kafelka */
    border-top: 3px solid var(--mg-navy);

    /* lekko zaokrąglone narożniki */
    border-radius: 4px;

    /* jasne tło kafelka */
    background: var(--mg-soft);
}


/* Napis DATA / MIEJSCE / PROWADZĄCY */
.mg-oscars-native .mg-oscars-native-meta-label {

    /* .55rem = odstęp od etykiety do tekstu poniżej */
    margin: 0 0 .55rem !important;

    color: var(--mg-navy);

    /* rozmiar napisów DATA/MIEJSCE */
    font-size: .72rem;

    /* pogrubienie */
    font-weight: 700;

    /* rozsunięcie liter */
    letter-spacing: .07em;
}


/* Właściwa wartość:
   np. "Conan O'Brien"
*/
.mg-oscars-native .mg-oscars-native-meta-value {

    /* bez dodatkowych marginesów */
    margin: 0 !important;

    /* wysokość linii */
    line-height: 1.38;
}


/* ==========================================================
   NAGŁÓWKI SEKCJI
   np. "Laureaci i nominowani", "Statystyki"
   ========================================================== */


/* Kontener nagłówka sekcji */
.mg-oscars-native .mg-oscars-native-section-head {

    /* odstęp POD nagłówkiem */
    margin: 0 0 1rem !important;
}


/* Mały złoty napis nad nagłówkiem.
   Obecnie usunęliśmy GŁÓWNE KATEGORIE i PODSUMOWANIE
   z kodu HTML, ale styl może zostać na przyszłość.
*/
.mg-oscars-native .mg-oscars-native-kicker {

    margin: 0 0 .12rem !important;

    color: var(--mg-gold);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .09em;
}


/* Duży tytuł sekcji */
.mg-oscars-native .mg-oscars-native-section-title {

    margin: 0 !important;

    color: var(--mg-navy-dark);

    line-height: 1.15;
}


/* ==========================================================
   KATEGORIE OSCAROWE
   np. NAJLEPSZY FILM
   ========================================================== */


/* Cała karta jednej kategorii */
.mg-oscars-native .mg-oscars-native-category-card {

    /* ukrywa elementy wychodzące poza zaokrąglenia */
    overflow: hidden;

    /* 1.25rem odstępu pomiędzy kolejnymi kategoriami */
    margin: 0 0 1.25rem !important;

    /* cienka ramka */
    border: 1px solid var(--mg-line);

    /* zaokrąglenia karty */
    border-radius: 6px;

    /* białe tło */
    background: #fff;
}


/* Granatowy pasek:
   NAJLEPSZY FILM
*/
.mg-oscars-native .mg-oscars-native-category-title {

    margin: 0 !important;

    /* wysokość granatowego paska */
    padding: .72rem 1rem;

    /* biały tekst */
    color: #fff;

    /* granatowe tło */
    background: var(--mg-navy);

    /* rozmiar napisu kategorii */
    font-size: 1.03rem;

    line-height: 1.2;
}


/* Główna część kategorii:
   PLAKAT | LAUREAT + NOMINOWANI
*/
.mg-oscars-native .mg-oscars-native-category-layout {

    /* brak dodatkowej szczeliny między głównymi kolumnami */
    gap: 0 !important;

    margin: 0 !important;

    /* odstęp góra/dół wewnątrz kategorii */
    padding: 1rem 0;

    /* zawartość zaczyna się u góry */
    align-items: flex-start !important;
}


/* ==========================================================
   PLAKAT W KATEGORII
   ZAWSZE 150 × 219 px
   ========================================================== */


/* Kolumna zawierająca plakat */
.mg-oscars-native .mg-oscars-native-poster-col {

    /* równy odstęp z lewej i prawej strony plakatu */
    padding: 0 1rem !important;

    box-sizing: border-box;
}


/* Wrapper plakatu */
.mg-oscars-native .mg-oscars-native-poster-wrap {

    margin: 0 !important;

    /* wyśrodkowanie plakatu */
    text-align: center;
}


/* Blok Gutenberg Image */
.mg-oscars-native .mg-oscars-native-poster {

    display: inline-block;

    /* wyśrodkowanie */
    margin: 0 auto !important;
}


/* Właściwy obraz plakatu */
.mg-oscars-native .mg-oscars-native-poster img {

    display: block !important;

    /* STAŁA SZEROKOŚĆ */
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;

    /* STAŁA WYSOKOŚĆ */
    height: 219px !important;
    min-height: 219px !important;
    max-height: 219px !important;

    /* wyśrodkowanie */
    margin: 0 auto !important;

    /* jeżeli źródłowy obraz ma inne proporcje,
       przytnie go zamiast rozciągać
    */
    object-fit: cover;

    border-radius: 3px;
}


/* Prawa kolumna:
   laureat + nominowani
*/
.mg-oscars-native .mg-oscars-native-content-col {

    /* prawa strona 1rem,
       lewa tylko .45rem — bliżej plakatu
    */
    padding: 0 1rem 0 .45rem !important;

    box-sizing: border-box;
}


/* ==========================================================
   LAUREAT — natywny Gutenberg Row
   ========================================================== */


/* Cały beżowy/złoty pasek laureata */
.mg-oscars-native .mg-oscars-native-winner-row {

    /* zawartość od lewej */
    justify-content: flex-start !important;

    /* statuetka i tekst wyśrodkowane pionowo względem siebie */
    align-items: center !important;


    /* ======================================================
       WAŻNE:
       ODSTĘP STATUETKA -> TEKST LAUREATA
       ====================================================== */

    gap: 15px !important;


    /* odstęp POD całym blokiem laureata */
    margin: 0 0 .95rem !important;

    /* wewnętrzne marginesy bloku laureata */
    padding: .55rem .75rem !important;

    /* złota linia po lewej */
    border-left: 4px solid var(--mg-gold);

    /* jasne złote tło */
    background: var(--mg-gold-soft);

    box-sizing: border-box;
}


/* Elementy wewnątrz Row */
.mg-oscars-native .mg-oscars-native-winner-row > * {

    /* nie pozwalamy motywowi ograniczać szerokości */
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* Blok statuetki */
.mg-oscars-native .mg-oscars-native-winner-oscar {

    /* statuetka zachowuje własny rozmiar */
    flex: 0 0 auto !important;

    width: auto !important;

    margin: 0 !important;
}


/* Sam obraz statuetki */
.mg-oscars-native .mg-oscars-native-winner-oscar img {

    display: block !important;

    /* NATYWNY ROZMIAR obrazka 1:1 */
    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
}


/* Kontener:
   LAUREAT
   „Tytuł filmu”
*/
.mg-oscars-native .mg-oscars-native-winner-copy {

    /* zajmuje całe pozostałe miejsce */
    flex: 1 1 auto !important;

    min-width: 0 !important;

    margin: 0 !important;
}


/* Mały napis LAUREAT
   oraz NOMINOWANI
*/
.mg-oscars-native .mg-oscars-native-label {

    /* odstęp między LAUREAT a tytułem filmu */
    margin: 0 0 .14rem !important;

    color: var(--mg-navy);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .08em;
}


/* Nazwa laureata */
.mg-oscars-native .mg-oscars-native-winner {

    margin: 0 !important;

    line-height: 1.4;
}


/* ==========================================================
   NOMINOWANI
   ========================================================== */


/* Napis NOMINOWANI */
.mg-oscars-native .mg-oscars-native-nominees-label {

    /* brak dodatkowego odstępu od góry */
    margin-top: 0 !important;
}


/* Kontener dwóch kolumn nominowanych */
.mg-oscars-native .mg-oscars-native-nominee-columns {

    /* odstęp między kolumną lewą i prawą */
    gap: 1.25rem !important;

    margin: 0 !important;
}


/* Pojedyncza kolumna nominowanych */
.mg-oscars-native .mg-oscars-native-nominee-col {

    /* pozwala prawidłowo zawijać długie teksty */
    min-width: 0 !important;
}


/* Pojedynczy nominowany */
.mg-oscars-native .mg-oscars-native-nominee {

    margin: 0 !important;

    /* odległość pomiędzy kolejnymi nominacjami */
    padding: .28rem 0;

    line-height: 1.35;

    /* kropkowana linia pod pozycją */
    border-bottom: 1px dotted var(--mg-line);
}


/* ==========================================================
   STATYSTYKI
   ========================================================== */


/* Odstęp nad sekcją STATYSTYKI */
.mg-oscars-native .mg-oscars-native-stats-head {

    margin-top: 2.4rem !important;
}


/* Jeden wiersz zawierający 2 karty statystyk */
.mg-oscars-native .mg-oscars-native-stat-pair {

    /* odstęp między kartą lewą i prawą */
    gap: 1rem !important;

    /* odstęp między kolejnymi rzędami */
    margin: 0 0 1rem !important;
}


/* ==========================================================
   KARTA STATYSTYKI
   Gutenberg Media & Text
   ========================================================== */


/* Cała karta filmu w statystykach */
.mg-oscars-native .mg-oscars-native-stat-card {

    /* minimalna wysokość karty */
    min-height: 133.5px;

    /* dwie karty w jednym rzędzie mają równą wysokość */
    height: 100%;

    /* odstęp WEWNĄTRZ karty */
    padding: .75rem !important;

    box-sizing: border-box;

    border: 1px solid var(--mg-line);

    border-radius: 5px;

    background: #fff;

    /* wyśrodkowanie plakatu i treści w pionie */
    align-items: center !important;
}


/* Kontener plakatu wewnątrz Media & Text */
.mg-oscars-native .mg-oscars-native-stat-card .wp-block-media-text__media {

    /* plakat wyśrodkowany pionowo */
    align-self: center !important;

    margin: 0 !important;
}


/* Plakat w statystykach */
.mg-oscars-native .mg-oscars-native-stat-card .wp-block-media-text__media img {

    display: block !important;


    /* ======================================================
       PLAKAT STATYSTYK = 50% głównego plakatu
       150 × 219 -> 75 × 109.5
       ====================================================== */

    width: 75px !important;
    min-width: 75px !important;
    max-width: 75px !important;

    height: 109.5px !important;
    min-height: 109.5px !important;
    max-height: 109.5px !important;


    margin: 0 auto !important;

    object-fit: cover;

    border-radius: 2px;
}


/* Cała prawa część statystyki:
   tytuł
   statuetki
   wynik
*/
.mg-oscars-native .mg-oscars-native-stat-card .wp-block-media-text__content {

    /* wyśrodkowanie całej treści względem plakatu */
    align-self: center !important;


    /* ======================================================
       ODSTĘP PLAKAT -> TEKST
       .8rem odpowiada za przestrzeń z lewej strony tekstu
       ====================================================== */

    padding: 0 0 0 .8rem !important;
}


/* Nie pozwalamy motywowi zwężać elementów w Media & Text */
.mg-oscars-native .mg-oscars-native-stat-card .wp-block-media-text__content > * {

    max-width: none !important;
}


/* ==========================================================
   TYTUŁ FILMU W STATYSTYKACH
   ========================================================== */

.mg-oscars-native .mg-oscars-native-stat-title {


    /* ======================================================
       WAŻNE:
       ODSTĘP TYTUŁ -> STATUETKI

       .80rem = wielkość odstępu pod tytułem
       ====================================================== */

    margin: 0 0 .80rem !important;


    color: var(--mg-navy-dark);

    font-size: .84rem;

    line-height: 1.2;
}


/* ==========================================================
   RZĄD ZŁOTYCH I SZARYCH STATUETEK
   ========================================================== */

.mg-oscars-native .mg-oscars-native-stat-icons {

    /* statuetki ułożone poziomo */
    display: flex !important;

    /* jeśli jest ich dużo, mogą przejść do następnego wiersza */
    flex-wrap: wrap !important;

    /* wyrównanie do dolnej części */
    align-items: flex-end !important;


    /* ======================================================
       ODSTĘP MIĘDZY SAMYMI STATUETKAMI

       możesz ustawić np.
       0px
       1px
       2px
       ====================================================== */

    gap: 1px !important;


    /* ======================================================
       ODSTĘP POD STATUETKAMI

       czyli statuetki -> wynik 4/16

       Aktualnie .18rem.
       UWAGA: dodatkowy odstęp daje jeszcze
       margin-top w .stat-number poniżej.
       ====================================================== */

    margin: 0 0 .18rem !important;


    line-height: 1;
}


/* Pojedyncza złota/szara statuetka */
.mg-oscars-native .mg-oscars-native-stat-icon {

    display: block !important;

    flex: 0 0 auto !important;


    /* NATYWNY ROZMIAR ORYGINALNEGO PLIKU 1:1 */
    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;


    margin: 0 !important;
}


/* ==========================================================
   WYNIK np. 4/16
   ========================================================== */

.mg-oscars-native .mg-oscars-native-stat-number {


    /* ======================================================
       WAŻNE:
       DODATKOWY ODSTĘP NAD 4/16

       zapis:
       góra prawa dół lewa

       czyli tutaj:
       0.7rem NAD wynikiem
       0 po pozostałych stronach

       Jeśli chcesz mniej:
       margin: .3rem 0 0 0 !important;

       Jeśli więcej:
       margin: 1rem 0 0 0 !important;
       ====================================================== */

    margin: 0.7rem 0 0 0 !important;


    padding: 0 !important;

    /* dziedziczy kolor tekstu motywu */
    color: inherit !important;

    /* bez niebieskiej kapsułki/tła */
    background: transparent !important;

    /* pogrubienie wyniku */
    font-weight: 700 !important;

    line-height: 1.2;
}


/* ==========================================================
   RESPONSYWNOŚĆ
   TELEFON / WĄSKI TABLET <= 720 px
   ========================================================== */

@media (max-width: 720px) {


    /* ------------------------------------------------------
       Główna kategoria:
       desktop:
       [plakat] [treść]

       telefon:
       [plakat]
       [treść]
       ------------------------------------------------------ */

    .mg-oscars-native .mg-oscars-native-category-layout {

        display: block !important;
    }


    /* Kolumna plakatu na telefonie */
    .mg-oscars-native .mg-oscars-native-poster-col {

        width: 100% !important;

        max-width: none !important;

        /* .9rem odstępu POD plakatem */
        padding: 0 1rem .9rem !important;
    }


    /* Treść pod plakatem */
    .mg-oscars-native .mg-oscars-native-content-col {

        width: 100% !important;

        max-width: none !important;

        padding: 0 1rem !important;
    }


    /* ------------------------------------------------------
       NOMINOWANI

       desktop = 2 kolumny
       telefon = 1 kolumna
       ------------------------------------------------------ */

    .mg-oscars-native .mg-oscars-native-nominee-columns {

        display: block !important;
    }


    .mg-oscars-native .mg-oscars-native-nominee-col {

        width: 100% !important;

        max-width: none !important;

        flex-basis: auto !important;
    }


    /* ------------------------------------------------------
       STATYSTYKI

       desktop = 2 karty obok siebie
       telefon = 1 karta w wierszu
       ------------------------------------------------------ */

    .mg-oscars-native .mg-oscars-native-stat-pair {

        display: block !important;
    }


    .mg-oscars-native .mg-oscars-native-stat-col {

        width: 100% !important;

        max-width: none !important;

        /* odstęp pomiędzy kartami */
        margin: 0 0 .75rem !important;
    }


    /* ukrywa pustą kolumnę, jeżeli liczba filmów jest nieparzysta */
    .mg-oscars-native .mg-oscars-native-stat-empty {

        display: none !important;
    }


    /* ------------------------------------------------------
       W samej karcie statystyk NADAL:

       [plakat] [tytuł + statuetki + wynik]

       czyli Media & Text nie przechodzi do jednej kolumny.
       ------------------------------------------------------ */

    .mg-oscars-native .mg-oscars-native-stat-card {

        display: grid !important;

        /* 24% szerokości plakat,
           reszta treść
        */
        grid-template-columns: 24% auto !important;
    }
}


/* ==========================================================
   BARDZO WĄSKI TELEFON <= 520 px
   ========================================================== */

@media (max-width: 520px) {


    /* DATA / MIEJSCE / PROWADZĄCY
       przechodzą jeden pod drugim
    */
    .mg-oscars-native .mg-oscars-native-meta {

        display: block !important;
    }


    /* odstęp między tymi kafelkami */
    .mg-oscars-native .mg-oscars-native-meta > .wp-block-column {

        margin-bottom: .65rem !important;
    }
}