/* ==========================================================================
   MG PREMIERY UNIFIER v1
   Jeden frontendowy komponent dla:
   - starych tabel przekonwertowanych przez plugin,
   - nowych wpisów Gutenberg (.mg-premieres-exact),
   - listy wpisów,
   - pojedynczego wpisu.
   ========================================================================== */

.mg-premieres-entry,
.mg-premieres-exact {
    --mg-premiere-poster-w: 150px;
    --mg-premiere-poster-h: 219px;

    --mg-premiere-desktop-gap: 25px;
    --mg-premiere-mobile-gap: 22px;
    --mg-premiere-side-gap: 12px;

    --mg-premiere-rating-h: 40px;
    --mg-premiere-rating-bubble-gap: 8px;

    --mg-premiere-card-bottom: 25px;
    --mg-premiere-card-padding-bottom: 20px;

    --mg-premiere-title-description-gap: 1em;
}


/* ==========================================================================
   1. SHELL WPISU — IDENTYCZNY NA LIŚCIE I PO OTWARCIU
   ========================================================================== */

/* Kategoria / taksonomia */
.mg-premieres-entry .entry-taxonomies {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
}

/* H2 na liście i H1 po otwarciu zachowują semantykę, ale wyglądają tak samo. */
.mg-premieres-entry .entry-title {
    margin-top: 0 !important;
    margin-bottom: 8px !important;

    font-size: 28px !important;
    line-height: 1.5 !important;
}

/* Autor / data */
.mg-premieres-entry .entry-meta {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Kadence może nadawać różny odstęp summary i single-content. */
.mg-premieres-entry .entry-header {
    margin-bottom: 0 !important;
}

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

/* AddToAny — dokładnie ten sam rytm w obu widokach. */
.mg-premieres-entry
.addtoany_share_save_container.addtoany_content.addtoany_content_top {
    margin-top: 12px !important;
    margin-bottom: 6px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Pierwszy komponent premier nie dokłada już własnego odstępu po AddToAny. */
.mg-premieres-entry .mg-premieres-exact {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
}


/* ==========================================================================
   2. RESET GUTENBERGA / KADENCE WEWNĄTRZ KOMPONENTU
   ========================================================================== */

.mg-premieres-exact {
    --wp--style--block-gap: 0px;
}

.mg-premieres-exact .mg-premiere-exact-card > .wp-block-group__inner-container,
.mg-premieres-exact .mg-premiere-exact-media > .wp-block-group__inner-container,
.mg-premieres-exact .mg-premiere-exact-content > .wp-block-group__inner-container,
.mg-premieres-exact .mg-premiere-exact-meta > .wp-block-group__inner-container,
.mg-premieres-exact .mg-premiere-exact-rating > .wp-block-group__inner-container {
    display: contents !important;
}

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

.mg-premieres-exact .mg-premiere-exact-card > *,
.mg-premieres-exact .mg-premiere-exact-media,
.mg-premieres-exact .mg-premiere-exact-content,
.mg-premieres-exact .mg-premiere-exact-meta {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ==========================================================================
   3. KARTA FILMU
   ========================================================================== */

.mg-premieres-exact .mg-premiere-exact-card {
    display: flex !important;
    flex-direction: column !important;

    gap: var(--mg-premiere-desktop-gap) !important;

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

    margin: 0 0 var(--mg-premiere-card-bottom) 0 !important;
    padding: 0 0 var(--mg-premiere-card-padding-bottom) 0 !important;

    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,.1) !important;

    background: transparent !important;
    box-sizing: border-box !important;
}

.mg-premieres-exact .mg-premiere-exact-card:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}


/* ==========================================================================
   4. DESKTOP
   ========================================================================== */

@media (min-width: 768px) {
    .mg-premieres-exact .mg-premiere-exact-card {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
}


/* ==========================================================================
   5. MEDIA: PLAKAT / OCENA / DYMEK
   ========================================================================== */

.mg-premieres-exact .mg-premiere-exact-media {
    display: block;

    flex: 0 0 var(--mg-premiere-poster-w) !important;

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

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

    border: none !important;
    box-sizing: border-box !important;
}

/* Plakat zawsze 150 × 219. */
.mg-premieres-exact .mg-premiere-exact-poster {
    display: block !important;

    width: var(--mg-premiere-poster-w) !important;
    height: var(--mg-premiere-poster-h) !important;

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

.mg-premieres-exact .mg-premiere-exact-poster img {
    display: block !important;

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

    height: var(--mg-premiere-poster-h) !important;
    min-height: var(--mg-premiere-poster-h) !important;
    max-height: var(--mg-premiere-poster-h) !important;

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

    object-fit: cover !important;
}

/* Pasek oceny. */
.mg-premieres-exact .mg-premiere-exact-rating {
    display: block !important;

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

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

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

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

.mg-premieres-exact .mg-premiere-rating--polecam {
    background-image: url("https://blog.marcingrzeszczak.eu/images/polecam.png");
}

.mg-premieres-exact .mg-premiere-rating--mozna {
    background-image: url("https://blog.marcingrzeszczak.eu/images/mozna_zobaczyc.png");
}

.mg-premieres-exact .mg-premiere-rating--nie {
    background-image: url("https://blog.marcingrzeszczak.eu/images/nie_ogladac.png");
}

.mg-premieres-exact .mg-premiere-rating--recenzja {
    background-image: url("https://blog.marcingrzeszczak.eu/images/recenzja.png");
}

/* Dymek. */
.mg-premieres-exact .mg-premiere-exact-bubble {
    position: relative;

    margin: 20px 0 0 0 !important;
    padding: 12px 15px !important;

    box-sizing: border-box !important;

    font-style: italic;
    font-size: .9em;
    font-weight: 400;
    line-height: normal;

    text-align: left !important;

    color: #444 !important;
    background-color: #f5f5f5 !important;

    border: 1px solid #dcdcdc !important;
    border-radius: 15px !important;
}

.mg-premieres-exact .mg-premiere-exact-bubble::before {
    content: "";
    position: absolute;

    top: -11px;
    left: 25px;

    border-width: 0 11px 11px 11px;
    border-style: solid;
    border-color: transparent transparent #dcdcdc transparent;
}

.mg-premieres-exact .mg-premiere-exact-bubble::after {
    content: "";
    position: absolute;

    top: -9px;
    left: 26px;

    border-width: 0 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #f5f5f5 transparent;
}


/* ==========================================================================
   6. TREŚĆ FILMU
   ========================================================================== */

.mg-premieres-exact .mg-premiere-exact-content {
    display: block !important;

    flex: 1 1 0% !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

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

    border: none !important;

    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;

    line-height: 1.6 !important;

    box-sizing: border-box !important;
}

.mg-premieres-exact .mg-premiere-exact-title {
    margin: 0 0 var(--mg-premiere-title-description-gap) 0 !important;
    padding: 0 !important;

    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;

    line-height: 1.6 !important;
    text-align: left !important;
}

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

.mg-premieres-exact .mg-premiere-exact-description {
    margin: 0 0 1em 0 !important;
    padding: 0 !important;

    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;

    line-height: 1.6 !important;

    text-align: justify !important;

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

.mg-premieres-exact .mg-premiere-exact-meta {
    display: block !important;

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

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

.mg-premieres-exact .mg-premiere-exact-meta-row {
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;

    line-height: 1.6 !important;
    text-align: left !important;
}


/* ==========================================================================
   7. ŹRÓDŁA
   ========================================================================== */

.mg-premieres-exact .mg-premiere-exact-source-wrap {
    display: block !important;

    width: 100% !important;

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

    border: none !important;
    background: transparent !important;
}

.mg-premieres-exact .mg-premiere-exact-source {
    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: .85em !important;
    font-style: italic;

    opacity: .7;
}


/* ==========================================================================
   8. MOBILE <= 767 px
   ========================================================================== */

@media (max-width: 767px) {

    .mg-premieres-exact .mg-premiere-exact-card {
        gap: var(--mg-premiere-mobile-gap) !important;
    }

    /*
       [ PLAKAT ] [ wolna przestrzeń ]
       [ PLAKAT ] [ OCENA            ]
       [ PLAKAT ] [ DYMEK            ]
    */
    .mg-premieres-exact .mg-premiere-exact-media {
        display: grid !important;

        grid-template-columns:
            var(--mg-premiere-poster-w)
            minmax(0, 1fr) !important;

        grid-template-rows:
            minmax(0, 1fr)
            var(--mg-premiere-rating-h)
            auto !important;

        column-gap: var(--mg-premiere-side-gap) !important;
        row-gap: 0 !important;

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

        height: var(--mg-premiere-poster-h) !important;
        min-height: var(--mg-premiere-poster-h) !important;
        max-height: var(--mg-premiere-poster-h) !important;

        flex: none !important;

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

        align-items: start !important;
        box-sizing: border-box !important;
    }

    .mg-premieres-exact
    .mg-premiere-exact-media .mg-premiere-exact-poster {
        grid-column: 1 !important;
        grid-row: 1 / 4 !important;

        align-self: start !important;
    }

    .mg-premieres-exact
    .mg-premiere-exact-media .mg-premiere-exact-rating {
        grid-column: 2 !important;
        grid-row: 2 !important;

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

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

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

        margin: 0 0 var(--mg-premiere-rating-bubble-gap) 0 !important;
        padding: 0 !important;
    }

    .mg-premieres-exact
    .mg-premiere-exact-media .mg-premiere-exact-bubble {
        grid-column: 2 !important;
        grid-row: 3 !important;

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

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 12px 15px !important;

        box-sizing: border-box !important;
    }

    /* Ocena bez dymka. */
    .mg-premieres-exact
    .mg-premiere-exact-media--rating-only {
        grid-template-rows:
            minmax(0, 1fr)
            var(--mg-premiere-rating-h) !important;
    }

    .mg-premieres-exact
    .mg-premiere-exact-media--rating-only
    .mg-premiere-exact-poster {
        grid-row: 1 / 3 !important;
    }

    .mg-premieres-exact
    .mg-premiere-exact-media--rating-only
    .mg-premiere-exact-rating {
        grid-row: 2 !important;
        margin-bottom: 0 !important;
    }

    /* Dymek bez oceny — rzadki przypadek, ale obsługiwany. */
    .mg-premieres-exact
    .mg-premiere-exact-media--bubble-only {
        grid-template-rows:
            minmax(0, 1fr)
            auto !important;
    }

    .mg-premieres-exact
    .mg-premiere-exact-media--bubble-only
    .mg-premiere-exact-poster {
        grid-row: 1 / 3 !important;
    }

    .mg-premieres-exact
    .mg-premiere-exact-media--bubble-only
    .mg-premiere-exact-bubble {
        grid-row: 2 !important;
    }

    /* Sam plakat. */
    .mg-premieres-exact
    .mg-premiere-exact-media--solo {
        display: block !important;

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

        height: var(--mg-premiere-poster-h) !important;
        min-height: var(--mg-premiere-poster-h) !important;
        max-height: var(--mg-premiere-poster-h) !important;
    }

    .mg-premieres-exact .mg-premiere-exact-content {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        flex: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }
}
/* ==========================================================================
   9. SHELL PREMIUM v1.1 — JEDEN RYTM DLA LISTY I SINGLE
   ==========================================================================

   Kadence generuje:
   - lista wpisów:    .entry-summary
   - pojedynczy wpis: .entry-content.single-content

   Sam komponent filmu jest już wspólny. Poniżej neutralizujemy różnice
   motywu WOKÓŁ komponentu.
   ========================================================================== */

/*
   Nie zmieniamy paddingu całej białej karty Kadence.
   Ujednolicamy wyłącznie pionowy rytm elementów wewnątrz wpisu.
*/
.mg-premieres-entry .entry-header {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

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

.mg-premieres-entry .entry-header .entry-title {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;

    /* H1 na single i H2 na liście pozostają semantycznie poprawne. */
    font-size: 28px !important;
    line-height: 1.35 !important;
}

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

/*
   Kadence ma osobne reguły dla summary/content.
   Zerujemy ich początek, ale nie szerokość ani boczny padding rodzica.
*/
.mg-premieres-entry .entry-summary,
.mg-premieres-entry .entry-content,
.mg-premieres-entry .entry-content.single-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/*
   AddToAny:
   12px po metadanych,
   8px do pierwszego filmu.
   Wysokość samego zestawu ikon nie wpływa już na line-height rodzica.
*/
.mg-premieres-entry
.addtoany_share_save_container.addtoany_content.addtoany_content_top {
    margin: 12px 0 8px 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

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

/*
   Pierwszy komponent nie dokłada własnego górnego odstępu.
*/
.mg-premieres-entry
.addtoany_share_save_container.addtoany_content.addtoany_content_top
+ .mg-premieres-exact,
.mg-premieres-entry .mg-premieres-exact:first-child {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
}

/*
   Pierwsza karta filmu także startuje bez dodatkowego marginesu.
*/
.mg-premieres-entry
.mg-premieres-exact
.mg-premiere-exact-card:first-child {
    margin-top: 0 !important;
}

/*
   Wszystkie zwykłe teksty komponentu korzystają z jednego rytmu.
   Wartości px są celowe: em wcześniej dawał minimalne różnice zależne
   od miejsca renderowania i obliczonego rozmiaru fontu.
*/
.mg-premieres-exact .mg-premiere-exact-title {
    margin-bottom: 16px !important;
}

.mg-premieres-exact .mg-premiere-exact-description {
    margin-bottom: 16px !important;
}

/*
   Mobile: ten sam shell; nie dokładamy innych marginesów tylko dlatego,
   że Kadence zmienia breakpoint.
*/
@media (max-width: 767px) {
    .mg-premieres-entry .entry-header .entry-title {
        font-size: 28px !important;
        line-height: 1.35 !important;
    }

    .mg-premieres-entry
    .addtoany_share_save_container.addtoany_content.addtoany_content_top {
        margin-top: 12px !important;
        margin-bottom: 8px !important;
    }
}
/* ==========================================================================
   10. CANONICAL COMPONENT v1.2
   Stary adapter i nowy Gutenberg mają od tego miejsca identyczne wartości.
   ========================================================================== */

.mg-premieres-exact {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: var(--global-palette4, #1f2937);
}

.mg-premieres-exact .mg-premiere-exact-content,
.mg-premieres-exact .mg-premiere-exact-title,
.mg-premieres-exact .mg-premiere-exact-description,
.mg-premieres-exact .mg-premiere-exact-meta-row {
    font-size: 17px !important;
    font-family: inherit !important;
}

.mg-premieres-exact .mg-premiere-exact-title {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    line-height: 1.6 !important;
}

.mg-premieres-exact .mg-premiere-exact-description {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    line-height: 1.6 !important;
}

.mg-premieres-exact .mg-premiere-exact-meta,
.mg-premieres-exact .mg-premiere-exact-meta-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.6 !important;
}
