/* ==========================================================================
   MG BLOG — STRONY SERIALI — NATIVE 1.7.0

   To jest moduł dla WordPress Pages, np.:
   /agents-of-s-h-i-e-l-d/

   Układ:
   - grafika serialu,
   - belka: "Wpisy na temat serialu" + ocena,
   - Fabuła,
   - szczegóły / twórcy / obsada,
   - responsywny spis sezonów,
   - linki zewnętrzne.

   Brak tabel. Wszystko jest zbudowane z natywnych bloków Gutenberga.
   ========================================================================== */


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

.mg-series-native {
    --mg-series-navy: #123f6b;
    --mg-series-navy-dark: #0e3153;
    --mg-series-gold: #b58a22;

    --mg-series-line: rgba(18,63,107,.14);
    --mg-series-soft: rgba(18,63,107,.045);

    /* Ta sama szarość, której używamy w boxach Oscarów. */
    --mg-series-panel-gray: #d1d4d6;

    --mg-series-gap: 18px;
    --mg-series-section-gap: 30px;

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

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

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


/* ==========================================================================
   1. SHELL STRONY KADENCE
   ========================================================================== */

.mg-series-entry .entry-header {
    margin-bottom: 14px !important;
    padding-bottom: 0 !important;
}

.mg-series-entry .entry-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;

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

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

.mg-series-entry
.addtoany_share_save_container.addtoany_content.addtoany_content_top {
    margin: 10px 0 14px 0 !important;
    padding: 0 !important;
}


/* ==========================================================================
   2. RESET GUTENBERGA / KADENCE
   ========================================================================== */

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

.mg-series-native .mg-series-info-grid > .wp-block-group__inner-container,
.mg-series-native .mg-series-seasons-grid > .wp-block-group__inner-container,
.mg-series-native .mg-series-toolbar > .wp-block-group__inner-container,
.mg-series-native .mg-series-links > .wp-block-group__inner-container {
    display: contents !important;
}


/* ==========================================================================
   3. GRAFIKA GŁÓWNA
   ========================================================================== */

.mg-series-native .mg-series-hero {
    display: block !important;

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

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

.mg-series-native .mg-series-hero img {
    display: block !important;

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

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


/* ==========================================================================
   4. BELKA POD GRAFIKĄ
   ========================================================================== */

.mg-series-native .mg-series-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    gap: 10px !important;

    width: 100% !important;

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

.mg-series-native .mg-series-toolbar-item {
    display: block !important;
    flex: 0 0 auto !important;

    width: auto !important;

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

.mg-series-native .mg-series-toolbar-item a {
    display: block !important;
    line-height: 0 !important;
}

.mg-series-native .mg-series-toolbar-item img {
    display: block !important;

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

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


/* ==========================================================================
   5. NAGŁÓWKI SEKCJI
   ========================================================================== */

.mg-series-native .mg-series-section-title {
    clear: both !important;

    margin: var(--mg-series-section-gap) 0 14px 0 !important;
    padding: 0 0 7px 0 !important;

    color: var(--mg-series-navy-dark) !important;

    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;

    border-bottom: 2px solid var(--mg-series-line);
}

.mg-series-native .mg-series-section-title:first-of-type {
    margin-top: 0 !important;
}


/* ==========================================================================
   6. FABUŁA
   ========================================================================== */

.mg-series-native .mg-series-text {
    margin: 0 0 16px 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;
}

.mg-series-native .mg-series-text:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================================
   7. SZCZEGÓŁY / TWÓRCY / OBSADA
   ========================================================================== */

.mg-series-native .mg-series-info-grid {
    display: grid !important;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;

    gap: var(--mg-series-gap) !important;

    width: 100% !important;

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

    align-items: start !important;
}

.mg-series-native .mg-series-info-card {
    min-width: 0 !important;

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

    border: 1px solid var(--mg-series-line);
    border-top: 3px solid var(--mg-series-panel-gray);
    border-radius: 5px;

    background: var(--mg-series-soft);

    box-sizing: border-box !important;
}

.mg-series-native .mg-series-card-title {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;

    color: var(--mg-series-navy-dark) !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: .06em !important;

    text-transform: uppercase;
}

.mg-series-native .mg-series-card-title--sub {
    margin-top: 18px !important;
}

.mg-series-native .mg-series-meta-row {
    margin: 0 0 4px 0 !important;
    padding: 0 !important;

    line-height: 1.5 !important;
}

.mg-series-native .mg-series-meta-row:last-child {
    margin-bottom: 0 !important;
}

.mg-series-native .mg-series-meta-row strong {
    color: inherit !important;
    font-weight: 700 !important;
}

.mg-series-native .mg-series-cast-list {
    list-style: none !important;

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

.mg-series-native .mg-series-cast-list li {
    margin: 0 !important;
    padding: 2px 0 !important;

    line-height: 1.45 !important;
}

.mg-series-native .mg-series-cast-list strong {
    color: inherit !important;
    font-weight: 700 !important;
}


/* ==========================================================================
   8. SPIS EPIZODÓW
   ========================================================================== */

.mg-series-native .mg-series-seasons-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    gap: var(--mg-series-gap) !important;

    width: 100% !important;

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

    align-items: start !important;
}

.mg-series-native .mg-series-season {
    min-width: 0 !important;

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

    overflow: hidden;

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

    background: #fff;

    box-sizing: border-box !important;
}

.mg-series-native .mg-series-season-title {
    margin: 0 !important;
    padding: 9px 12px !important;

    color: #1f1f1f !important;
    background: var(--mg-series-panel-gray) !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .04em !important;
}

.mg-series-native .mg-series-episode-list {
    list-style: none !important;

    margin: 0 !important;
    padding: 8px 12px 10px 12px !important;
}

.mg-series-native .mg-series-episode-list li {
    margin: 0 !important;
    padding: 4px 0 !important;

    font-size: 15px !important;
    line-height: 1.4 !important;

    border-bottom: 1px dotted var(--mg-series-line);
}

.mg-series-native .mg-series-episode-list li:last-child {
    border-bottom: none !important;
}

.mg-series-native .mg-series-episode-list strong {
    color: inherit !important;
    font-weight: 700 !important;
}


/* ==========================================================================
   9. LINKI ZEWNĘTRZNE
   ========================================================================== */

.mg-series-native .mg-series-links {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    gap: 10px !important;

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

.mg-series-native .mg-series-link-image {
    display: block !important;
    flex: 0 0 auto !important;

    width: auto !important;

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

.mg-series-native .mg-series-link-image a {
    display: block !important;
    line-height: 0 !important;
}

.mg-series-native .mg-series-link-image img {
    display: block !important;

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

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


/* ==========================================================================
   10. MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .mg-series-native .mg-series-hero {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .mg-series-native .mg-series-toolbar {
        justify-content: center !important;
        margin-bottom: 22px !important;
    }

    .mg-series-native .mg-series-section-title {
        margin-top: 26px !important;
        font-size: 20px !important;
    }

    .mg-series-native .mg-series-text {
        text-align: left !important;
    }

    .mg-series-native .mg-series-info-grid,
    .mg-series-native .mg-series-seasons-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .mg-series-native .mg-series-info-card {
        padding: 13px 14px !important;
    }

    .mg-series-native .mg-series-episode-list li {
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    .mg-series-native .mg-series-links {
        justify-content: center !important;
    }
}
/* ==========================================================================
   11. PAGE HEADER + FULL-WIDTH HERO v1.7.1

   Strony seriali są WordPress Pages, ale wizualnie mają zachowywać się
   jak Premiery / Recenzje:
   TYTUŁ
   autor • data
   sociale
   grafika serialu na pełną szerokość
   ========================================================================== */


/* --------------------------------------------------------------------------
   A. Ukrycie standardowego dużego hero/tytułu Kadence TYLKO dla stron seriali
   -------------------------------------------------------------------------- */

body.mg-series-page .entry-hero.page-hero-section,
body.mg-series-page .page-hero-section,
body.mg-series-page .entry-hero-container-inner {
    display: none !important;
}

/* Gdy Kadence renderuje tytuł bez osobnego hero. */
body.mg-series-page .mg-series-entry > .entry-header {
    display: none !important;
}


/* --------------------------------------------------------------------------
   B. Automatyczne sociale AddToAny
   Ukrywamy tylko automatyczny blok "content_top", ponieważ wewnątrz
   .mg-series-native używamy shortcode [addtoany] dokładnie tam,
   gdzie chcemy mieć ikony.
   -------------------------------------------------------------------------- */

body.mg-series-page
.addtoany_share_save_container.addtoany_content.addtoany_content_top {
    display: none !important;
}


/* --------------------------------------------------------------------------
   C. Własny nagłówek strony serialu
   -------------------------------------------------------------------------- */

.mg-series-native .mg-series-custom-header {
    display: block !important;

    width: 100% !important;

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

.mg-series-native .mg-series-custom-title {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;

    color: var(--global-palette3, #111827) !important;

    font-family: var(--global-heading-font-family, inherit) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;

    text-align: left !important;
}

.mg-series-native .mg-series-custom-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;

    gap: 7px !important;

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

    color: var(--global-palette4, #333) !important;

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

.mg-series-native .mg-series-custom-meta a {
    color: inherit !important;
    text-decoration: none !important;
}

.mg-series-native .mg-series-custom-meta a:hover {
    text-decoration: underline !important;
}

.mg-series-native .mg-series-meta-dot {
    display: inline-block !important;
}


/* --------------------------------------------------------------------------
   D. Shortcode AddToAny pod metą
   -------------------------------------------------------------------------- */

.mg-series-native .addtoany_shortcode {
    margin: 10px 0 14px 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.mg-series-native .addtoany_shortcode .addtoany_list {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;

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


/* --------------------------------------------------------------------------
   E. Grafika serialu — pełna szerokość obszaru wpisu
   -------------------------------------------------------------------------- */

.mg-series-native .mg-series-hero {
    display: block !important;

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

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

.mg-series-native .mg-series-hero img {
    display: block !important;

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

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

    object-fit: cover !important;
}


/* --------------------------------------------------------------------------
   F. Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .mg-series-native .mg-series-custom-title {
        font-size: 28px !important;
        line-height: 1.35 !important;
    }

    .mg-series-native .mg-series-custom-meta {
        font-size: 13px !important;
    }

    .mg-series-native .mg-series-hero,
    .mg-series-native .mg-series-hero img {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/* ==========================================================================
   12. INFO GRID REFINEMENT v1.7.2

   Desktop / tablet:
   LEWA KOLUMNA:
   [ SZCZEGÓŁY PRODUKCJI ]
   [ TWÓRCY              ]

   PRAWA KOLUMNA:
   [ OBSADA               ]

   Mobile:
   wszystkie panele jeden pod drugim.
   ========================================================================== */

.mg-series-native .mg-series-info-left {
    display: flex !important;
    flex-direction: column !important;

    gap: var(--mg-series-gap) !important;

    min-width: 0 !important;

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

.mg-series-native .mg-series-info-left > .wp-block-group__inner-container {
    display: contents !important;
}

.mg-series-native .mg-series-info-card--cast {
    height: 100% !important;
}

@media (max-width: 767px) {
    .mg-series-native .mg-series-info-left {
        gap: var(--mg-series-gap) !important;
    }

    .mg-series-native .mg-series-info-card--cast {
        height: auto !important;
    }
}
