/* =========================================================
   Style domyślnych bloków WordPressa w identyfikacji JAC.

   Jeden plik dla frontu i edytora:
   - front: treść blokowa siedzi w kontenerze .jac-blocks
     (single-jac_promo.php, parts/content.php, templates/strona-tresc.php)
   - edytor: plik jest ładowany przez add_editor_style() (inc/enqueue.php)

   Każdy selektor zaczyna się od :is(.jac-blocks, .editor-styles-wrapper).
   WordPress przepisuje style edytora, dokładając prefiks .editor-styles-wrapper,
   ALE pomija selektory, które już go zawierają (wp-includes/js/dist/
   block-editor.js: „Don't transform selectors that already specify
   `.editor-styles-wrapper`"). Dzięki temu ta sama reguła trafia w oba miejsca.

   Kolory, promienie i fonty wyłącznie z tokenów z main.css :root.
   ========================================================= */


/* ── Baza typografii w edytorze (na froncie daje to .jac-prose) ───────── */

.editor-styles-wrapper {
    font-family: var(--font-primary, 'Montserrat', sans-serif);
    color: var(--gray-600, #6b7280);
    line-height: 1.7;
}

.editor-styles-wrapper p { margin-bottom: 1.2em; }
.editor-styles-wrapper a { color: var(--brand, #005d7d); text-decoration: underline; }

:is(.jac-blocks, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-primary, 'Montserrat', sans-serif);
    color: #1a1a1a;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.editor-styles-wrapper h2 { font-size: 1.5rem; margin: 2em 0 .6em; }
.editor-styles-wrapper h3 { font-size: 1.2rem; margin: 1.6em 0 .5em; }

/* .jac-prose nie ma h4 — uzupełniamy w obu miejscach */
:is(.jac-blocks, .editor-styles-wrapper) h4 {
    font-size: 1.05rem;
    margin: 1.4em 0 .4em;
}


/* ── Przyciski ──────────────────────────────────────────────────────────
   Wzorowane na EFEKTYWNYM .jac-btn z main.css (definicja jest zdublowana,
   wygrywa późniejsza: 10px 20px, radius 8px, .875rem, 500).
   :not(.has-*) — kolor wybrany z palety w edytorze ma pierwszeństwo. */

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1.5px solid var(--brand, #005d7d);
    font-family: var(--font-primary, 'Montserrat', sans-serif);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-button__link:not(.has-background) {
    background: var(--brand, #005d7d);
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-button__link:not(.has-text-color) {
    color: var(--white, #fff);
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-button__link:not(.has-background):hover {
    background: #007aa3;
    border-color: #007aa3;
}

/* Styl „Obrys" — jak .jac-btn--outline */
:is(.jac-blocks, .editor-styles-wrapper) .is-style-outline > .wp-block-button__link:not(.has-background) {
    background: var(--white, #fff);
    border-color: rgba(0, 0, 0, .12);
}

:is(.jac-blocks, .editor-styles-wrapper) .is-style-outline > .wp-block-button__link:not(.has-text-color) {
    color: var(--gray-900, #111827);
}

:is(.jac-blocks, .editor-styles-wrapper) .is-style-outline > .wp-block-button__link:not(.has-background):hover {
    background: var(--white, #fff);
    border-color: var(--brand, #005d7d);
    color: var(--brand, #005d7d);
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-buttons {
    gap: 12px;
    margin-block: 1.5em;
}


/* ── Cytaty ─────────────────────────────────────────────────────────── */

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-quote {
    margin-block: 1.8em;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--brand, #005d7d);
    color: #1a1a1a;
    font-size: 1.05rem;
    font-style: italic;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-quote cite,
:is(.jac-blocks, .editor-styles-wrapper) .wp-block-pullquote cite {
    display: block;
    margin-top: .6em;
    font-size: .8125rem;
    font-style: normal;
    font-weight: 600;
    color: var(--gray-600, #6b7280);
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-pullquote {
    margin-block: 2em;
    padding: 28px 24px;
    border-top: 3px solid var(--brand, #005d7d);
    border-bottom: 3px solid var(--brand, #005d7d);
    text-align: center;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-pullquote blockquote p {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.4;
    color: #1a1a1a;
}


/* ── Obrazy i galerie ───────────────────────────────────────────────── */

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-image {
    margin-block: 1.8em;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-image img,
:is(.jac-blocks, .editor-styles-wrapper) .wp-block-gallery img,
:is(.jac-blocks, .editor-styles-wrapper) .wp-block-media-text__media img {
    border-radius: var(--radius-card, 20px);
}

/* Styl „Zaokrąglony" z core daje koło — zostawiamy jego wybór w spokoju */
:is(.jac-blocks, .editor-styles-wrapper) .wp-block-image.is-style-rounded img {
    border-radius: 9999px;
}

:is(.jac-blocks, .editor-styles-wrapper) :is(.wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-video) figcaption,
:is(.jac-blocks, .editor-styles-wrapper) .wp-element-caption {
    margin-top: .6em;
    font-size: .8125rem;
    color: var(--gray-600, #6b7280);
    text-align: center;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-gallery {
    gap: 12px;
    margin-block: 1.8em;
}


/* ── Kolumny, media + tekst ─────────────────────────────────────────── */

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-columns {
    gap: 32px;
    margin-block: 1.8em;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-media-text {
    margin-block: 1.8em;
    gap: 32px;
}


/* ── Separator ──────────────────────────────────────────────────────── */

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-separator {
    margin: 2.4em auto;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
    opacity: 1;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
    width: 80px;
    border-top: 3px solid var(--brand, #005d7d);
}


/* ── Tabela ─────────────────────────────────────────────────────────── */

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-table {
    margin-block: 1.8em;
    overflow-x: auto;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-table :is(th, td) {
    border: 1px solid rgba(0, 0, 0, .1);
    padding: 10px 14px;
    text-align: left;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-table thead th {
    background: var(--brand, #005d7d);
    border-color: var(--brand, #005d7d);
    color: var(--white, #fff);
    font-weight: 600;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: var(--gray-100, #f5f5f5);
}

/* Core dokłada 3px szarą linię pod nagłówkiem i obramowanie pod paskami — nie
   pasują do nagłówka w kolorze marki. */
:is(.jac-blocks, .editor-styles-wrapper) .wp-block-table thead { border-bottom: 0; }
:is(.jac-blocks, .editor-styles-wrapper) .wp-block-table.is-style-stripes { border-bottom: 0; }


/* ── Grupa i okładka z tłem ─────────────────────────────────────────── */

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-group.has-background {
    padding: 32px;
    margin-block: 1.8em;
    border-radius: var(--radius-card, 20px);
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-cover {
    margin-block: 1.8em;
    border-radius: var(--radius-card, 20px);
    overflow: hidden;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-cover :is(h1, h2, h3, h4, p) {
    color: inherit;
}


/* ── Osadzenia i wideo ──────────────────────────────────────────────── */

:is(.jac-blocks, .editor-styles-wrapper) :is(.wp-block-embed, .wp-block-video) {
    margin-block: 1.8em;
}

:is(.jac-blocks, .editor-styles-wrapper) .wp-block-video video {
    width: 100%;
    border-radius: var(--radius-card, 20px);
}


/* ── Szerokości wide / full — tylko front ───────────────────────────────
   .jac-prose ma 860px. W edytorze szerokości daje theme.json (layout),
   więc tych reguł nie powielamy pod .editor-styles-wrapper. */

.jac-text-page__body:has(.jac-blocks) { overflow-x: clip; }

.jac-blocks .alignwide {
    width: min(calc(var(--max-w, 1344px) - 2 * var(--section-px, 48px)), calc(100vw - 2 * var(--section-px, 48px)));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.jac-blocks .alignfull {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* parts/content.php trzyma kolumnę 860px przy lewej krawędzi .wrap, nie na środku —
   centrowanie na kolumnie przesuwałoby tam bloki. Liczymy więc od krawędzi .wrap:
   jej lewa krawędź treści leży max(0, (100vw - max-w) / 2) + section-px od okna. */
.jac-blocks--start .alignwide {
    width: min(calc(var(--max-w, 1344px) - 2 * var(--section-px, 48px)), calc(100vw - 2 * var(--section-px, 48px)));
    margin-left: 0;
    transform: none;
}

.jac-blocks--start .alignfull {
    margin-left: calc(-1 * (max(0px, (100vw - var(--max-w, 1344px)) / 2) + var(--section-px, 48px)));
    transform: none;
}

.jac-blocks .alignfull.wp-block-cover,
.jac-blocks .alignfull.wp-block-group.has-background,
.jac-blocks .alignfull img {
    border-radius: 0;
}

@media (max-width: 768px) {
    .jac-blocks .alignwide {
        width: calc(100vw - 2 * var(--section-px, 20px));
    }
    :is(.jac-blocks, .editor-styles-wrapper) .wp-block-group.has-background {
        padding: 24px 20px;
    }
}