/* Wygląd strony publicznej — wg projektu "Redesign foto i podróże".
   Kolory: --bg i --accent ustawia layout z config/sites.php. */
:root {
    --fg: #1a1a1a; --muted: #5a5650; --text: #2a2825; --line: #1a1a1a;
    --thumb-ratio: 4 / 3;                 /* proporcja miniatur na listach */
    --sans: 'Inter Tight', system-ui, sans-serif;
    --serif: 'EB Garamond', Georgia, serif;
}
body.site-foto { --thumb-ratio: 3 / 2; }  /* foto: miniatury w proporcji zdjęć (3:2) */
* { box-sizing: border-box; }
body { overflow-x: clip; margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--sans); }
a { color: var(--accent); }
img { max-width: 100%; height: auto; }

.page { max-width: calc(var(--wide) + 48px); margin: 0 auto; padding: 0 24px 48px; display: flex; flex-direction: column; gap: 32px; }

/* nagłówek i stopka */
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.brand { color: inherit; text-decoration: none; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.brand .b-sub { color: var(--accent); }
.brand .b-tld { color: #9a9a9a; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { width: 36px; height: 36px; display: block; margin-right: 10px; }
.foot-logo { height: 36px; width: auto; max-width: 100%; object-fit: contain; }
.top nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.top nav a { color: inherit; text-decoration: none; }
.top nav a:hover { text-decoration: underline; }
.top nav a:has(.nav-ico) { display: inline-flex; align-items: center; gap: 6px; }
.nav-ico { width: 22px; height: 22px; flex: none; fill: currentColor; stroke: currentColor; stroke-width: .6; stroke-linejoin: round; stroke-linecap: round; }
.nav-ico .thin { fill: none; stroke-width: 1; }
.top nav a.cross { color: var(--accent); }
.top nav a.on { color: var(--accent); font-weight: 600; }  /* bieżąca pozycja menu */
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 20px; font-size: 14px; color: var(--muted); }
.foot a { color: inherit; text-decoration: none; }

/* tytuły stron */
.page-title { margin: 0; font-size: clamp(40px, 7vw, 64px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.page-title span, .post h1 span { color: var(--accent); }
/* podtytuł strony głównej (Podróże) i hasło w stopce: kursywa EB Garamond */
.page-sub { margin: -18px 0 0; font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: clamp(20px, 2.6vw, 26px); color: var(--muted); }
.foot-top { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.foot-links { display: flex; gap: 0 20px; margin-left: auto; }
.foot-links a { color: var(--accent); }
.foot-links a:hover { text-decoration: underline; }
.foot-links a + a::before { content: "◆"; display: inline-block; margin-right: 20px; font-size: 7px; vertical-align: 2px; color: var(--muted); text-decoration: none; }
.foot-tagline {font-family: 'EB Garamond', Georgia, serif; font-size: 18px; color: var(--muted); }
.title-ico { display: inline-block; width: 1em; height: 1em; margin: -.25em .2em -.25em 0; vertical-align: .06em; fill: var(--accent); stroke: var(--accent); stroke-width: .6; stroke-linejoin: round; stroke-linecap: round; }
.title-ico .thin { fill: none; stroke-width: 1; }
/* filtry: cienka linia nad rzędem (tylko na szerokość filtrów, nie całej strony) */
.filters { display: flex; flex-wrap: wrap; gap: 8px 20px; width: fit-content; max-width: 100%; margin-top: -4px; padding-top: 16px; padding-right: 56px; border-top: 1px solid #c9c4ba; font-size: 15px; font-weight: 500; }
.filters a { color: inherit; text-decoration: none; position: relative; }
/* separator: mały obrócony kwadracik (romb) w kolorze akcentu, w połowie odstępu między linkami */
.filters a:not(:last-child)::after { content: ''; position: absolute; right: -13px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--accent); opacity: .55; transform: rotate(45deg); pointer-events: none; }
.filters a.on { color: var(--accent); font-weight: 600; }  /* jak aktywna pozycja menu u góry */
/* drugi rząd (podkategorie): bez linii, wcięty i poprzedzony strzałką „↳" */
.filters.sub { margin-top: -26px; padding-top: 0; padding-right: 0; border-top: 0; padding-left: 4px; font-size: 14px; font-weight: 400; opacity: .85; }
.filters.sub::before { content: '↳'; color: var(--muted); opacity: .8; margin-right: -8px; }

/* lista: Foto — karty z miniaturą 4:3 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr)); gap: 40px 24px; }
.card { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 12px; }
.thumb { display: block; aspect-ratio: var(--thumb-ratio); overflow: hidden; background: linear-gradient(135deg, #cfc6b8, #8f8573); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.card:hover .thumb img { transform: scale(1.03); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.card-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.card-date { font-size: 14px; color: var(--muted); white-space: nowrap; }
.card-teaser { color: #3b3b38; }

/* lista: Podróże — "polaroidy" z taśmą i pieczątką kraju */
.polaroids { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 390px)); justify-content: center; gap: 48px 32px; padding: 16px 8px 0; }
.polaroid { color: inherit; text-decoration: none; display: block; background: #fff; padding: 14px 14px 20px; box-shadow: 0 12px 24px rgba(40, 30, 10, .14); transform: rotate(var(--rot, 0deg)); transition: transform .2s, box-shadow .2s; }
.polaroid:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 18px 30px rgba(40, 30, 10, .2); }
.polaroid .pic { position: relative; aspect-ratio: var(--thumb-ratio); background: linear-gradient(135deg, #9fc3b9, #4d7d72); }
.polaroid .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tape { position: absolute; width: 84px; height: 24px; background: rgba(236, 222, 170, .85);
    clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%); }
.tape.tl { top: -10px; left: -24px; transform: rotate(-38deg); }
.tape.tr { top: -10px; right: -24px; transform: rotate(38deg); }
.tape.tc { top: -14px; left: calc(50% - 45px); width: 90px; transform: rotate(-3deg); }
.stamp { position: absolute; right: -6px; bottom: -22px; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--accent);
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px var(--accent); background: rgba(255, 255, 255, .85);
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; line-height: 1.1;
    font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); transform: rotate(-14deg); }
.stamp svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; stroke-width: .6; stroke-linejoin: round; stroke-linecap: round; }
.stamp svg .thin { fill: none; stroke-width: 1; }
.polaroid .meta { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; }
.kicker { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.polaroid .t { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.polaroid .teaser { color: #4a4742; }
.polaroid .more { font-weight: 500; color: var(--accent); }

/* wpis ("rozdział") */
.post { display: flex; flex-direction: column; gap: 40px; }
.post-head { display: flex; flex-direction: column; gap: 12px; }  /* pełna szerokość strony: tytuł zawija się dopiero przy krawędzi */
.post h1 { margin: 0; font-size: clamp(36px, 6vw, 56px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; }
.lead { margin: 0; max-width: 56rem; font-size: 22px; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; color: var(--muted); }  /* bezszeryfowy; szeryfowa kursywa zostaje dla cytatów */
.cover { margin: 0; }
.cover img { width: 100%; max-height: 640px; object-fit: cover; aspect-ratio: 3 / 2; display: block; }

/* hero: okładka jako tło o ograniczonej wysokości, tytuł na dolnym gradiencie (stały kontrast niezależnie od zdjęcia) */
.post-hero { position: relative; overflow: hidden; width: 100vw; margin: -32px calc(50% - 50vw) 0; display: flex; flex-direction: column; justify-content: flex-end; height: clamp(320px, 56vh, 540px); background: #1a1a1a; }
body:has(.post-hero) .top { border-bottom: 0; }  /* linię menu przejmuje hero (border-top na całą szerokość ekranu) */
.post-hero { border-top: 1px solid var(--line); }
.post-hero .cover { position: absolute; inset: -12% 0; will-change: transform; }  /* zapas 12% góra/dół na parallax (parallax.js) */
.post-hero .cover img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: center 56%; }
.post-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, 0) 70%); }
.post-hero .post-head { position: relative; z-index: 1; padding: 0 max(24px, calc((100vw - var(--wide)) / 2)) 28px; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.post-hero h1 { color: #fff; font-size: clamp(44px, 9vw, 104px); line-height: .98; }
.post-hero h1 span { color: var(--accent); text-shadow: none; }
.post-hero .kicker { color: rgba(255, 255, 255, .85); }
.post-hero .lead { color: rgba(255, 255, 255, .9); }
.prose { max-width: var(--col); margin-inline: auto; }
.body { font-size: 18px; line-height: 1.8; color: var(--text); }
.body > p, .body > ul, .body > ol { margin: 0 0 24px; }
.body h2 { margin: 40px 0 16px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg); }
.body h3 { margin: 32px 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.body a { color: var(--accent); }
.post > .sep { margin: 0 auto; }  /* odstęp daje już gap kolumny wpisu */
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 14px; }
.tags a { text-decoration: none; color: var(--muted); padding: 5px 14px; border: 1px solid rgba(0, 0, 0, .18); border-radius: 999px; line-height: 1.3; transition: color .15s, border-color .15s, background .15s; }
.tags a.when { background: rgba(0, 0, 0, .04); }
/* pory roku: delikatne kolory — wiosna zieleń, lato słoneczny żółty, jesień pomarańcz/ruda, zima lodowy błękit */
.tags a.s-wiosna { color: #3c6e2f; background: #e3f1da; border-color: #b6d8a4; }
.tags a.s-lato   { color: #8a6200; background: #fdf0c2; border-color: #ecd47e; }
.tags a.s-jesien { color: #9a4a12; background: #fbe3cf; border-color: #e6b48a; }
.tags a.s-zima   { color: #2f5f86; background: #e0eef8; border-color: #aecde6; }
.tags a.s-wiosna:hover, .tags a.s-lato:hover, .tags a.s-jesien:hover, .tags a.s-zima:hover { filter: brightness(.96) saturate(1.2); border-color: currentColor; }  /* rok / pora roku: jak tag, z lekkim tłem (bez #) */
.tags a:hover { color: var(--accent); border-color: var(--accent); background: rgba(0, 0, 0, .03); }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.pager > a { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 4px; }
.pager > a span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pager .prev { grid-column: 1; }
.pager .tags { grid-column: 2; max-width: 420px; }
.pager .next { grid-column: 3; text-align: right; }
@media (max-width: 720px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager .tags { grid-column: 1 / -1; grid-row: 1; max-width: none; margin-bottom: 8px; }
  .pager .prev { grid-column: 1; grid-row: 2; }
  .pager .next { grid-column: 2; grid-row: 2; }
}
.pager small { font-size: 13px; color: var(--muted); }
.pager > a > span { font-size: 20px; font-weight: 500; }  /* tytuł poprzedniego/następnego (nie dotyczy znaczników w .tags) */
.pager a:hover span { color: var(--accent); }

/* mapa: SVG + pinezki, lista regionów z wpisami */
.mapbar { display: flex; flex-wrap: wrap; gap: 8px; }
.mapbar button { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-size: 15px; font-weight: 500; padding: 6px 22px 6px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--fg); }
.mapbar .ico { width: 32px; height: 32px; flex: none; fill: currentColor; stroke: currentColor; stroke-width: .6; stroke-linejoin: round; stroke-linecap: round; }
.mapbar .ico .thin { fill: none; stroke-width: 1; }  /* Półwysep Helski: osobna, cienka kreska (reszta ikony ma obrys .6) */
.mapbar button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mapgrid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.mapgrid[hidden] { display: none; }
.mapframe { flex: 2 1 480px; min-width: 0; border: 1px solid var(--line); padding: 16px; background-color: #E3EAE7;
    background-image: linear-gradient(#cdd9d4 1px, transparent 1px), linear-gradient(90deg, #cdd9d4 1px, transparent 1px); background-size: 60px 60px; }
.mapframe svg { display: block; width: 100%; height: auto; max-height: 76vh; margin: 0 auto; }
.mapframe .rg { fill: #fbfaf6; stroke: #9db0a8; stroke-width: .8; }
.mapframe .rg.has { fill: color-mix(in srgb, var(--accent) 14%, #fbfaf6); }
.mapframe .isle { font: italic 400 24px var(--serif); letter-spacing: .18em; fill: #5d6a64; pointer-events: none; }
.mapframe .mesh { fill: none; stroke: #b9c6c0; stroke-width: .5; pointer-events: none; }
.mapframe .rg.has { cursor: pointer; }
.mapframe .rg.sel { fill: color-mix(in srgb, var(--accent) 32%, #fbfaf6); }
.mapframe .rg:hover { fill: color-mix(in srgb, var(--accent) 22%, #fbfaf6); }
.mapframe .inset { fill: none; stroke: #9db0a8; stroke-width: 1.5; stroke-dasharray: 8 5; }
.mapframe .inset-label { font: italic 400 24px var(--serif); letter-spacing: .18em; fill: #5d6a64; pointer-events: none; }  /* ten sam krój co nazwy wysp */
.mapframe .pin { fill: var(--accent); stroke: var(--bg); stroke-width: 3; cursor: pointer; transition: r .15s; }
.mapframe a:hover .pin { r: 12; }
.mapframe .pin-leader { stroke: var(--accent); stroke-width: 1.5; pointer-events: none; }
.mapframe .pin-origin { fill: var(--accent); pointer-events: none; }
.maplist { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.maplist .listhead { padding-bottom: 12px; }
.maplist .listhead strong { font-size: 20px; font-weight: 600; }
.maplist details { border-top: 1px solid #c9c4ba; }
.maplist details:last-of-type { border-bottom: 1px solid #c9c4ba; }
.maplist summary { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-weight: 500; cursor: pointer; list-style: none; }
.maplist summary::-webkit-details-marker { display: none; }
.maplist .nm { display: inline-flex; align-items: center; gap: 8px; }
.maplist .chev { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }  /* strzałka rozwijania */
.maplist details[open] > summary .chev { transform: rotate(180deg); }
.maplist summary:hover .nm { color: var(--accent); }
.maplist summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.maplist .n { color: var(--muted); font-weight: 400; font-size: 15px; }
.maplist ul { margin: 0 0 12px; padding-left: 18px; font-size: 15px; }
.maplist li a { color: inherit; }
.maplist li a:hover { color: var(--accent); }
.legend { display: flex; gap: 24px; padding-top: 16px; font-size: 14px; color: #3b3b38; }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

/* paginacja list */
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: 15px; }
.pagination a, .pagination span { padding: 6px 12px; border: 1px solid var(--line); color: inherit; text-decoration: none; }
.pagination .on { background: var(--fg); color: var(--bg); }
.pagination .off { opacity: .4; }

@media (max-width: 720px) {
    .page { padding: 0 16px 32px; gap: 24px; }
    .body { font-size: 17px; }
    .lead { font-size: 18px; }
    .post-hero { height: clamp(300px, 62vh, 460px); margin-top: -24px; }  /* = gap .page na mobile */
    .post-hero .post-head { padding: 0 16px 20px; }  /* nadpisuje max() z góry */
    .polaroids { padding-inline: 4px; }
}
.foot-see a, .foot-ig a { color: var(--accent); }
.foot-ig a { display: inline-flex; align-items: center; gap: 5px; vertical-align: -3px; }
.foot-see a:hover, .foot-ig a:hover { text-decoration: underline; }

/* 404 */
.err { display: flex; flex-direction: column; gap: 16px; padding: 32px 0; }
.err-quote { margin: 8px 0 0; padding-left: 16px; border-left: 3px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 1.2em; max-width: 60ch; }
.err-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: .9em; opacity: .7; }
.err-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0 0; font-weight: 600; }
.err-links a { color: var(--accent); text-decoration: none; }
.err-links a:hover { text-decoration: underline; }

/* lightbox: podpis jako półprzezroczysty gradient na dole zdjęcia (bez białego pasa), licznik w rogu */
.glightbox-container .ginner-container { position: relative; width: fit-content; max-width: 100%; margin: auto; }
.glightbox-container .gslide-image img { max-height: 100vh !important; max-height: 100dvh !important; }
.glightbox-container .gslide-description {
    position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .35) 60%, transparent) !important;
    pointer-events: none;
}
.glightbox-container .gdesc-inner { padding: 1.6rem .9rem .6rem; }
.glightbox-container .gslide-desc { color: #fff; font: .9rem/1.35 system-ui, sans-serif; margin: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.glb-counter {
    position: absolute; top: 12px; left: 14px; z-index: 99999; padding: .15rem .55rem; border-radius: 99px;
    background: rgba(0, 0, 0, .45); color: #fff; font: .8rem/1.4 system-ui, sans-serif; pointer-events: none;
}
.mapframe .zoom-bg { fill: var(--bg); }
.mapframe .zoom * { vector-effect: non-scaling-stroke; }
.mapframe .zoom .pin { stroke-width: 2; }
.maplist .listhead { display: flex; align-items: center; justify-content: space-between; }
.maplist .toggle-all { background: none; border: 0; padding: .25rem; cursor: pointer; color: inherit; line-height: 0; border-radius: 4px; }
.maplist .toggle-all:hover { background: rgba(0,0,0,.06); }
.maplist .toggle-all svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.maplist .toggle-all[aria-pressed="true"] svg { transform: rotate(180deg); }

/* Powrót na górę */
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); opacity: .85; display: grid; place-items: center; }
.to-top[hidden] { display: none; }
.to-top:hover, .to-top:focus-visible { opacity: 1; }
.to-top svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* hamburger: menu górne zwija się na telefonie */
.nav-toggle { display: none; width: 40px; height: 40px; padding: 10px 8px; background: none; border: 0; cursor: pointer; flex-direction: column; justify-content: space-between; }
.nav-toggle span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .2s, opacity .2s; }
/* poniżej 1200px linia pod nagłówkiem sięga krawędzi ekranu (treść zostaje w marginesach strony) */
@media (max-width: 1200px) {
    .top { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 720px) {
    .top { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 720px) {
    .top { flex-wrap: wrap; }
    .nav-toggle { display: flex; }
    /* rozwinięte menu = panel na całą szerokość ekranu, nakładany na stronę (nie wypycha treści w dół) */
    .top { position: relative; }
    .top nav { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 50; flex-direction: column; gap: 0; padding: 0; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 14px 24px rgba(0, 0, 0, .12); font-size: 17px; }
    .top.open nav { display: flex; }
    .top.open { border-bottom-color: #d6d1c6; }
    /* jasne kreski tylko MIĘDZY pozycjami (od krawędzi do krawędzi); ciemna linia zamyka panel na dole */
    .top nav a, .top nav a:has(.nav-ico) { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid #d6d1c6; }
    .top nav a:first-child { border-top: 0; }
    .top nav a:not(:has(.nav-ico))::before { content: ''; width: 22px; flex: none; }  /* pusty slot, żeby napisy stały w jednej kolumnie z ikonkami */
    .top.open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .top.open .nav-toggle span:nth-child(2) { opacity: 0; }
    .top.open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

/* lista: Foto — jak polaroid z Podróży, ale tylko zdjęcie jest ramką (obrócone, taśma na górze); tytuł i opis pod spodem, proste, bez tła */
.card .frame { position: relative; display: block; background: #fff; padding: 14px; box-shadow: 0 12px 24px rgba(40, 30, 10, .14); transform: rotate(var(--rot, 0deg)); transition: transform .2s, box-shadow .2s; }
.card:hover .frame { transform: rotate(0deg) translateY(-4px); box-shadow: 0 18px 30px rgba(40, 30, 10, .2); }
.card .frame .thumb { background: linear-gradient(135deg, #cfc6b8, #8f8573); }
.card .frame .tape { position: absolute; }
.cards { padding-top: 16px; }
.card { gap: 22px; }

/* foto, strona główna: ten sam hero co we wpisach (pełna szerokość, przy menu, parallax.js), z podpisem pośrodku zamiast tytułu */
.home-hero { justify-content: center; align-items: center; gap: 14px; }
.home-hero::after { display: none; }
.home-hero .cover img { object-position: center 100%; }
.home-hero .signature { position: relative; z-index: 1; width: min(560px, 80%); height: auto; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-hero .hero-tag { position: relative; z-index: 1; margin: 0; color: #fff; font-size: clamp(13px, 1.8vw, 18px); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-align: center; text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.brand .b-tag { margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(0, 0, 0, .25); font-size: 15px; font-weight: 400; letter-spacing: .02em; color: var(--muted); }
@media (max-width: 900px) { .brand .b-tag { display: none; } }  /* na wąskich ekranach tylko marka; pełny napis jest w tytule strony i hero */

/* odznaka „+N” na Polsce (mapa Europy) */
.mapframe .plbadge { cursor: pointer; }
.mapframe .plbadge rect { fill: var(--accent); stroke: var(--bg); stroke-width: 3; transition: opacity .15s; }
.mapframe .plbadge text { fill: #fff; font-weight: 700; font-size: 16px; pointer-events: none; }
.mapframe .plbadge:hover rect { opacity: .85; }

/* wyszukiwarka: lupa w nagłówku + wysuwany panel z wynikami (search.js) */
.top { position: relative; }
.search-toggle { display: grid; place-items: center; height: 26px; margin-left: -10px; padding: 0 0 0 14px; background: none; border: 0; border-left: 1px solid rgba(0, 0, 0, .25); color: inherit; cursor: pointer; }  /* pionowa kreska jak za logo */
.search-toggle:hover, .search-toggle[aria-expanded="true"] { color: var(--accent); }
.search-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; padding: 16px 24px 20px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 14px 24px rgba(0, 0, 0, .12); }
.search-panel[hidden] { display: none; }
.search-panel input { width: 100%; max-width: 640px; display: block; margin: 0 auto; padding: 12px 16px; font: inherit; font-size: 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.search-results { max-width: 640px; margin: 0 auto; max-height: 60vh; overflow-y: auto; }
.search-results:not(:empty) { margin-top: 12px; }
.sr-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 10px; font-size: 15px; }
.sr-post { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-top: 1px solid #d6d1c6; color: inherit; text-decoration: none; }
.sr-post:hover b { color: var(--accent); }
.sr-post img, .sr-noimg { width: 64px; height: 48px; flex: none; object-fit: cover; background: #cfc6b8; }
.sr-post b { display: block; font-weight: 600; line-height: 1.25; }
.sr-post small { color: var(--muted); font-size: 13px; }
.sr-empty { margin: 4px 0; color: var(--muted); }
@media (max-width: 720px) {
    .search-toggle { margin-left: auto; order: 2; width: 40px; height: 40px; padding: 0; border-left: 0; }
    .nav-toggle { order: 3; }
    .search-panel { padding: 12px 16px 16px; }
}

/* wyszukiwarka: w trakcie ładowania stare wyniki są wyszarzone, a pod polem biegnie pasek postępu */
.search-panel .search-results { transition: opacity .15s; }
.search-panel.loading .search-results { opacity: .35; pointer-events: none; }
.search-panel.loading input { background: linear-gradient(90deg, transparent 0 30%, rgba(0,0,0,.08) 50%, transparent 70% 100%) 0 0 / 200% 100% #fff; animation: sr-bar 1s linear infinite; }
@keyframes sr-bar { to { background-position: -200% 0; } }
.top nav { margin-left: auto; }  /* menu przy prawej krawędzi, razem z lupą */
@media (max-width: 720px) { .top nav { margin-left: 0; } }