/* Style bloków treści — wspólne dla strony publicznej i podglądu w edytorze. */
:root { --gap: .5rem; --col: 800px; --wide: 1280px; }

.ph, .embed { margin: 1.75rem 0; }
.w-wide { margin-inline: calc(50% - min(var(--wide) / 2, 48vw)); }
.ph figure { margin: 0; }
.ph img { display: block; width: 100%; height: auto; }
.ph a, .ph figure > img { display: block; }

/* ikonka „powiększ" w prawym górnym rogu zdjęć otwieranych w lightboxie (jak w WordPressie) */
.ph a.glightbox { position: relative; }
.ph a.glightbox::after {
    content: ""; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
    background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    border-radius: 50%; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.ph a.glightbox:hover::after, .ph a.glightbox:focus-visible::after { opacity: 1; }
@media (hover: none) { .ph a.glightbox::after { opacity: .85; } }
.ph figcaption { font: .85rem/1.4 system-ui, sans-serif; color: #777; padding-top: .3rem; }

/* rząd zdjęć równej wysokości (bez kadrowania) */
.l-justified { display: flex; flex-wrap: wrap; gap: var(--gap); }
.l-justified figure { flex: calc(var(--r) * 100) 1 calc(var(--r) * 220px); min-width: 0; }

/* siatka N kolumn; "crop" = wszystkie 3:2 */
.l-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); }
.l-grid.crop img { aspect-ratio: 3 / 2; object-fit: cover; }
/* bez kadrowania: rzędy równej wysokości (szerokość zdjęcia ∝ jego proporcji), niezależnie od miksu pionów i poziomów */
.l-grid.rows { display: flex; flex-direction: column; gap: var(--gap); }
.g-row { display: flex; gap: var(--gap); align-items: flex-start; }
.g-row figure { flex: var(--r) 1 0; min-width: 0; }

/* mozaika: duże zdjęcie po jednej stronie, stos po drugiej. Szerokość kolumn (--k = r1 * Σ 1/ri,
   liczone w blade/edytorze) dobrana tak, by zdjęcie w swojej naturalnej proporcji miało wysokość stosu.
   Podpisy pod zdjęciami, więc różnica to najwyżej wysokość podpisów (jak w WordPressie). */
.l-mosaic { display: flex; align-items: flex-start; gap: var(--gap); }
.l-mosaic .m-big { flex: var(--k, 0.65) 1 0; min-width: 0; align-self: stretch; position: relative; }
/* małe oszustwo: zdjęcie dociągnięte (z lekkim kadrowaniem) do dokładnie dołu stosu; podpis wisi pod nim */
.l-mosaic .m-big figure { position: absolute; inset: 0; }
.l-mosaic .m-big a { height: 100%; }
.l-mosaic .m-big img { height: 100%; aspect-ratio: auto; }
.l-mosaic .m-big figcaption { position: absolute; top: 100%; left: 0; right: 0; }
.l-mosaic:has(.m-big figcaption) { padding-bottom: 3.2rem; }
.l-mosaic .m-stack { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.l-mosaic.flip .m-big { order: 2; }

/* tekst + zdjęcia obok */
/* proporcja tekst:zdjęcia = --sa:--sb (domyślnie 2:1), kolumny zdjęć = --ic */
.l-side { --sa: 2fr; --sb: 1fr; display: grid; grid-template-columns: var(--sa) var(--sb); gap: 1.5rem; align-items: start; }
.l-side.vc { align-items: center; }  /* kolumna ze zdjęciem wyśrodkowana pionowo względem tekstu (jak w WP) */
.l-side.sp-11 { --sa: 1fr; --sb: 1fr; }
.l-side.sp-12 { --sa: 1fr; --sb: 2fr; }
.l-side .side-imgs { display: grid; grid-template-columns: repeat(var(--ic, 1), 1fr); gap: var(--gap); }
.l-side .side-text > :first-child { margin-top: 0; }
.l-side .side-text > :last-child { margin-bottom: 0; }
.l-side .side-text p, .l-side .side-text ul, .l-side .side-text ol { margin: 0 0 24px; }   /* jak akapity w treści (.body > p) */
.l-side.flip .side-text { order: 2; }
.l-side.flip { grid-template-columns: var(--sb) var(--sa); }

.embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

@media (max-width: 720px) {
    .w-wide { margin-inline: 0; }
    .l-grid { grid-template-columns: repeat(min(var(--cols), 2), 1fr); }
    .l-side, .l-side.flip { grid-template-columns: 1fr; }
    .l-side.flip .side-text { order: 0; }
    .l-mosaic { flex-direction: column; align-items: stretch; }
    .l-mosaic .m-big, .l-mosaic .m-stack { flex: none; }
    .l-mosaic.flip .m-big { order: 0; }
    .l-mosaic .m-big figure, .l-mosaic .m-big figcaption { position: static; }
    .l-mosaic .m-big img { height: auto; aspect-ratio: var(--r); }
    .l-mosaic:has(.m-big figcaption) { padding-bottom: 0; }
}

/* proporcja zdjęcia = --r (przyciągnięta do standardu); drobna różnica jest przycinana niewidocznie */
.ph figure img { aspect-ratio: var(--r); object-fit: cover; }

/* dwa bloki zdjęć jeden pod drugim: odstęp jak między zdjęciami w galerii, bez marginesu akapitowego */
.ph + .ph { margin-top: calc(var(--gap) - 1.75rem); }

/* wspólny podpis galerii: ten sam krój, rozmiar, kolor i odstęp co podpis pod pojedynczym zdjęciem (.ph figcaption), tylko wyśrodkowany;
   ujemny margines kasuje dolny margines bloku .ph (1.75rem), zostaje .3rem jak w figcaption;
   selektor ".ph + …" musi być mocniejszy niż ".body > p { margin: 0 0 24px }" z site.css */
.ph + .ph-group-caption { font: .85rem/1.4 system-ui, sans-serif; color: #777; text-align: center; margin: calc(.3rem - 1.75rem) 0 1.75rem; }

/* linia pozioma: krótka, wyśrodkowana */
.sep { width: 15%; min-width: 60px; max-width: 160px; margin: 2.5rem auto; border: 0; border-top: 1px solid currentColor; opacity: .35; }

/* przypisy dolne */
sup.fn { font-size: .7em; line-height: 0; }
sup.fn a { text-decoration: none; padding: 0 .1em; }
.footnotes { margin: 2rem 0; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, .15); font-size: .85rem; line-height: 1.5; }
.footnotes ol { margin: 0; padding-left: 1.4rem; }
.footnotes li { margin: .3rem 0; }
.footnotes .fn-back { text-decoration: none; margin-left: .3em; }

/* cytat i infobox */
.quote { margin: 1.75rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--accent, #888); font-family: var(--serif, Georgia, serif); font-style: italic; font-size: 1.3em; line-height: 1.5; }
.quote p { margin: 0; }
.quote cite { display: block; margin-top: .4rem; font-style: normal; font-size: .85em; opacity: .7; }
.infobox { margin: 1.5rem 0; padding: .75rem 1rem; background: rgba(0, 0, 0, .045); border-radius: 4px; font-size: .92rem; line-height: 1.4; }
.infobox-title { display: block; margin-bottom: .25rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.infobox p { margin: 0 0 .25rem; }
.infobox ul { margin: 0 0 .25rem; padding-left: 1.2rem; }
.infobox li { margin: 0; }
.infobox > :last-child { margin-bottom: 0; }

/* popover przypisu */
.fn-pop { position: absolute; z-index: 50; max-width: min(22rem, calc(100vw - 16px)); padding: .65rem .85rem; background: #fff; color: #222; border: 1px solid rgba(0, 0, 0, .15); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); font-size: .85rem; line-height: 1.45; }
.fn-pop[hidden] { display: none; }
@media (prefers-color-scheme: dark) { .fn-pop { background: #26262a; color: #e8e8e8; border-color: rgba(255, 255, 255, .18); } }

/* tabela */
.tbl-block { margin: 1.5rem 0; overflow-x: auto; }
.tbl-block table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.4; }
.tbl-block th, .tbl-block td { padding: .45rem .75rem; border: 1px solid color-mix(in srgb, var(--line, currentColor) 35%, transparent); text-align: left; vertical-align: top; }
.tbl-block th { background: color-mix(in srgb, var(--line, currentColor) 8%, transparent); font-weight: 700; }
.tbl-block figcaption { margin-top: .4rem; font-size: .8rem; opacity: .7; }
.t-small { font-size: .75em; line-height: 1.5; color: var(--muted); }
small { font-size: .85em; color: var(--muted); }
.t-small .tbl-block table { font-size: .8rem; line-height: 1.35; }
.t-small .tbl-block { color: var(--muted); }
.t-small .quote { font-size: 1.05em; }
.t-small .infobox { font-size: .8rem; }

/* kolumny: 2–3 kolumny o stałych proporcjach, na telefonie jedna pod drugą */
.cols { display: grid; gap: 2rem; margin: 1.75rem 0; align-items: start; }
.cols-33-67 { grid-template-columns: 1fr 2fr; }
.cols-50-50 { grid-template-columns: 1fr 1fr; }
.cols-67-33 { grid-template-columns: 2fr 1fr; }
.cols-33-33-33 { grid-template-columns: repeat(3, 1fr); }
.cols .col { min-width: 0; }
.cols .col > :first-child { margin-top: 0; }
.cols .col > :last-child { margin-bottom: 0; }
.cols .col p, .cols .col ul, .cols .col ol { margin: 0 0 24px; }
.cols .col .ph, .cols .col .embed { margin: 0 0 1.75rem; }
.cols .w-wide { margin-inline: 0; }   /* zdjęcia „szerokie" wewnątrz kolumny nie wychodzą poza nią */
@media (max-width: 720px) {
    .cols, .cols-33-67, .cols-50-50, .cols-67-33, .cols-33-33-33 { grid-template-columns: 1fr; gap: 1rem; }
    .cols .w-wide { margin-inline: 0; }
}