/*
 * Front punktów sprzedaży — własny arkusz, bez frameworka i bez Elementora.
 *
 * Kolory wzięte z obecnej strony, żeby nowa prezentacja nie odstawała:
 * zieleń #00995d to kolor marki (występuje w treści 1119 razy), tekst #404040.
 *
 * Cały arkusz ma ~7 KB. Dla porównania: obecna strona miejscowości wysyła
 * 26,8 KB samego CSS-a Elementora w treści dokumentu.
 */

/* Paleta i szerokość treści są WSPÓLNE z motywem (`css/magnesyturysty.css`).
   Odkąd pasek i stopka przychodzą z motywu, dwie różne zielenie i dwie różne
   szerokości byłyby widoczne na styku: nagłówek w jednym odcieniu, treść
   w drugim, a krawędź paska przesunięta o 20 px względem krawędzi treści.
   Wartości muszą się tu zgadzać z tymi w motywie. */
:root {
    --mt-green: #14945c;        /* zieleń marki, ta sama co w motywie */
    --mt-green-dark: #0f7a4b;
    --mt-green-alt: #00995d;    /* zieleń z treści — odnośniki miejscowości */
    --mt-text: #404040;
    --mt-muted: #6b7280;
    --mt-line: #e2e5e4;
    --mt-bg: #f7f8f8;
    --mt-wrap: 1140px;
}

* { box-sizing: border-box; }

body.mt {
    margin: 0;
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--mt-text);
    background: #fff;
}

/* Odnośniki w TREŚCI, nie w całym dokumencie.
 *
 * `.mt a` sięgało też do paska i stopki, które przychodzą z motywu i mają
 * własne reguły — menu podkreśla się krawędzią (`border-bottom`), a stąd
 * dostawało jeszcze `text-decoration: underline`. Efekt: dwie kreski pod
 * odnośnikiem menu na stronach wtyczki, po jednej z każdego arkusza.
 *
 * `.mt-head` i `.mt-foot` to awaryjny pasek wtyczki (gdy motywu nie ma),
 * `.mt-preview` to belka podglądu — one nadal są nasze. */
.mt-main a, .mt-head a, .mt-foot a, .mt-preview a {
    color: var(--mt-green); text-decoration: none;
}
.mt-main a:hover, .mt-head a:hover, .mt-foot a:hover, .mt-preview a:hover {
    text-decoration: underline;
}
.mt-wrap { max-width: var(--mt-wrap); margin: 0 auto; padding: 0 1.2rem; }
.mt-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- pasek podglądu ---------- */
.mt-preview {
    padding: .6rem 1.2rem; background: #fff8e1; border-bottom: 1px solid #f0d98c;
    font-size: .9rem; text-align: center;
}
.mt-preview code { background: #fff; padding: 0 .25em; }

/* ---------- nagłówek ---------- */
.mt-head { border-bottom: 1px solid var(--mt-line); background: #fff; }
.mt-head-in {
    display: flex; align-items: center; gap: 1.5rem;
    padding-top: .9rem; padding-bottom: .9rem; flex-wrap: wrap;
}
.mt-logo img { display: block; height: auto; max-width: 190px; }
.mt-nav a { font-weight: 600; }

.mt-search { display: flex; flex: 1 1 18rem; min-width: 0; }
.mt-search input {
    flex: 1 1 auto; min-width: 0; padding: .5rem .7rem;
    border: 1px solid #c9cfcd; border-right: 0; border-radius: 3px 0 0 3px;
    font-size: 1rem;
}
.mt-search input:focus { outline: 2px solid var(--mt-green); outline-offset: -2px; }
.mt-search button {
    padding: .5rem 1.1rem; border: 0; border-radius: 0 3px 3px 0;
    background: var(--mt-green); color: #fff; font-size: 1rem; cursor: pointer;
}
.mt-search button:hover { background: var(--mt-green-dark); }
.mt-search-big { max-width: 26rem; margin: 1rem 0; }

/* ---------- układ strony ---------- */
.mt-main { padding: 1.8rem 1.2rem 3rem; }
.mt-crumbs { font-size: .88rem; color: var(--mt-muted); margin-bottom: 1rem; }
.mt-crumbs a { color: var(--mt-muted); }

.mt-page-head { margin-bottom: 1.6rem; }
.mt-page-head h1 { margin: 0 0 .4rem; font-size: 2rem; line-height: 1.2; }
.mt-page-head h1 .mt-sub { color: var(--mt-muted); font-weight: 400; font-size: .62em; }
.mt-lead { margin: 0; color: var(--mt-muted); font-size: 1.05rem; }
.mt-intro { margin: .8rem 0 1rem; max-width: 42rem; }
.mt-intro p { margin: 0 0 .7rem; }
.mt-intro p:last-child { margin-bottom: 0; }
.mt-lead-small { margin: 0 0 .8rem; color: var(--mt-muted); font-size: .94rem; }

.mt-section { margin: 2.2rem 0; }
.mt-section > h2 {
    margin: 0 0 .9rem; padding-bottom: .35rem;
    font-size: 1.25rem; border-bottom: 2px solid var(--mt-green);
    display: inline-block;
}

.mt-star { color: var(--mt-green); font-weight: 700; cursor: help; }
.mt-note { color: var(--mt-muted); font-size: .9rem; }

/* ---------- mapa Polski ---------- */
.mt-map-fig { margin: 0 0 1.6rem; }
.mt-map {
    display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto;
}
/* Wypełnienia i kreski to OSOBNE elementy — patrz `Front\Map`. Wypełnienie
   nie ma obrysu, żeby żadne nie zasłaniało cudzej granicy; wszystkie kreski
   idą na wierzch jednym przebiegiem i mają jednakową grubość. */
.mt-map-f { stroke: none; transition: fill .12s; }

/* Kreski: granice województw, linia brzegowa, brzegi zatok.
 *
 * Obrys jest CIEMNY, nie biały, i to nie kwestia gustu. Mierzeja Helska ma
 * w najwęższym miejscu ~300 m, a przy szerokości mapy 620 px jeden piksel to
 * ~1100 m terenu — cypel jest więc węższy od piksela i rysuje go kreska, nie
 * wypełnienie. Biały obrys zamalowywał mierzeję w całości i Hel znikał.
 *
 * `vector-effect: non-scaling-stroke` sprawia, że grubość liczy się
 * w pikselach ekranu, nie w jednostkach mapy — dzięki temu ta sama reguła
 * daje ostrą kreskę i na dużej mapie, i na miniaturze przy nagłówku. */
.mt-map-l {
    fill: none; stroke: #2f6b53; stroke-width: 1; stroke-linejoin: round;
    vector-effect: non-scaling-stroke; pointer-events: none;
}
/* Pięć stopni natężenia — kwantyle liczby punktów, nie zakres wartości. */
.mt-map-q0 { fill: #eceeed; }
.mt-map-q1 { fill: #dcece4; }
.mt-map-q2 { fill: #b3dbc9; }
.mt-map-q3 { fill: #7cc4a7; }
.mt-map-q4 { fill: #3ba980; }
.mt-map-q5 { fill: var(--mt-green); }

/* Morskie wody wewnętrzne — Zatoka Pucka i Gdańska, Zalew Szczeciński
   i Wiślany. Granice województw je obejmują, więc bez zamalowania ich kolorem
   tła Mierzeja Helska tonie w jednolitej plamie. `pointer-events: none`, żeby
   kliknięcie w zatokę nadal trafiało w województwo pod spodem. */
/* Biel dostaje jeszcze biały obrys, żeby wychodziła ~280 m za swoją krawędź.
   Bez tego zieleń województwa i biel zatoki kończą się dokładnie na linii
   domykającej Zatokę Gdańską, a antyaliasing zostawia tam półprzezroczysty
   rządek — czyli ślad tej samej kreski, którą właśnie usunęliśmy z obrysu.
   Wypełnienia wolno tak nadgryzać, bo wszystkie kreski idą na wierzch. */
.mt-map-w { fill: #fff; stroke: #fff; stroke-width: .8; pointer-events: none; }

.mt-map a { cursor: pointer; }
.mt-map a:hover .mt-map-f,
.mt-map a:focus-visible .mt-map-f { fill: #007346; }
.mt-map a:focus-visible { outline: 2px solid var(--mt-text); outline-offset: 2px; }
.mt-map-here { fill: var(--mt-green); }

/* mapka orientacyjna na stronie województwa — sam kształt, bez liczb */
.mt-map-loc { max-width: 240px; margin: 0; }
/* Klikalna: prowadzi wprost do innego województwa, bez wracania do katalogu.
   Bieżące województwo nie jest odnośnikiem, więc kursor nad nim się nie zmienia
   — i słusznie, bo nie ma tam czego kliknąć. */
.mt-map-clickable a { cursor: pointer; }
.mt-map-clickable a:hover .mt-map-f,
.mt-map-clickable a:focus-visible .mt-map-f { fill: var(--mt-green); }
.mt-map-clickable a:focus-visible { outline: 2px solid var(--mt-text); outline-offset: 2px; }
/* Nagłówek województwa ma dwa wiersze tekstu, a mapka obok ~240 px wysokości.
   Przy wyrównaniu do góry zostawało pod tytułem pół ekranu pustki — dlatego
   tekst stoi na środku wysokości mapki. */
.mt-head-row { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.mt-head-row > .mt-page-head { flex: 1 1 20rem; min-width: 0; }
.mt-head-row > .mt-map-fig { flex: 0 0 auto; margin-bottom: 1rem; }

.mt-map-n {
    font-size: 26px;                /* w jednostkach SVG, więc skaluje się z mapą */
    font-weight: 700; text-anchor: middle; dominant-baseline: middle;
    fill: #14563c; pointer-events: none;
}
/* na ciemniejszych obszarach czarny numer przestaje być czytelny */
.mt-map-q4 + .mt-map-n, .mt-map-q5 + .mt-map-n { fill: #fff; }
.mt-map a:hover .mt-map-n, .mt-map a:focus-visible .mt-map-n { fill: #fff; }

.mt-map-cap { margin: .5rem 0 0; font-size: .85rem; color: var(--mt-muted); text-align: center; }
.mt-map-src { display: block; font-size: .8rem; }

/* ---------- kafle województw ---------- */
.mt-tiles {
    display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.mt-tile {
    display: block; padding: .9rem 1rem; height: 100%;
    background: var(--mt-bg); border: 1px solid var(--mt-line);
    border-left: 4px solid var(--mt-green); border-radius: 3px;
    color: var(--mt-text) !important; text-decoration: none !important;
}
.mt-tile:hover { background: #eef4f1; border-left-color: var(--mt-green-dark); }
.mt-tile-name { display: block; font-weight: 600; margin-bottom: .2rem; }
.mt-tile-n { display: block; font-size: 1.35rem; font-weight: 700; color: var(--mt-green); line-height: 1.2; }
.mt-tile-sub { display: block; font-size: .85rem; color: var(--mt-muted); }

/* ---------- chipy rodzajów ---------- */
.mt-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mt-chip {
    display: inline-block; padding: .35rem .8rem;
    background: #fff; border: 1px solid var(--mt-line); border-radius: 2em;
    color: var(--mt-text) !important; text-decoration: none !important; font-size: .92rem;
}
.mt-chip:hover { border-color: var(--mt-green); background: var(--mt-bg); }
.mt-chip b { color: var(--mt-green); margin-left: .35em; }

/* ---------- listy ---------- */
.mt-locations {
    display: grid; gap: .35rem .9rem; margin: 0; padding: 0; list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.mt-locations li { display: flex; align-items: baseline; gap: .4rem; }
.mt-count {
    font-size: .78rem; color: #fff; background: var(--mt-green);
    border-radius: 1em; padding: 0 .45em; min-width: 1.35em; text-align: center;
}
.mt-count-none { background: #c9cfcd; }
.mt-legend { margin-top: 1rem; font-size: .85rem; color: var(--mt-muted); }

.mt-grouped { margin: 0; padding: 0; list-style: none; }
.mt-grouped > li { margin-bottom: .9rem; }
.mt-grouped-loc { font-weight: 600; }
.mt-grouped ul { margin: .2rem 0 0 1.1rem; padding: 0; list-style: none; }
.mt-grouped ul li { margin: .15rem 0; }
.mt-grouped ul .mt-note { margin-left: .5em; }

.mt-results { margin: 0; padding: 0; list-style: none; }
.mt-results li { padding: .6rem 0; border-bottom: 1px solid var(--mt-line); }
.mt-result-name { font-size: 1.1rem; font-weight: 600; }
.mt-result-meta { display: block; font-size: .88rem; color: var(--mt-muted); }

/* ---------- magnesy ---------- */
/* Magnes jest tu bohaterem strony, nie miniaturką w katalogu — dlatego duży
   i bez ramki. Grafika ma własne białe tło i cień w kadrze, więc obwódka
   dokładała drugą krawędź obok tej, którą magnes już ma. */
.mt-magnets { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin: 0 0 2rem; }
.mt-magnets figure { margin: 0; }
.mt-magnets img {
    display: block; width: 100%; max-width: 420px; height: auto;
}

/* ---------- punkty na stronie miejscowości ---------- */
.mt-outlets {
    display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
}

/* ---------- strona miejscowości: treść na środku ----------
   Układ z makiety `dokumenty/miejscowosc.jpg`: nazwa, zdanie „Magnes kupisz
   w…", magnes i karty punktów stoją na osi strony. Ścieżka (okruszki) zostaje
   przy lewej krawędzi — ona mówi, gdzie jesteśmy, a nie co tu jest.

   Kolumny NIE rozciągają się na całą szerokość (`minmax(21rem, 24rem)`),
   dzięki temu dwie karty stoją na środku, a nie przy lewej krawędzi z dziurą
   po prawej. Przy większej liczbie punktów siatka wypełnia rzędy i wyśrodkowuje
   ostatni. */
.mt-page-miejscowosc .mt-page-head { text-align: center; }
.mt-page-miejscowosc .mt-intro { margin-inline: auto; text-align: left; }
.mt-page-miejscowosc .mt-outlets {
    grid-template-columns: repeat(auto-fill, minmax(21rem, 24rem));
    justify-content: center;
}
.mt-page-miejscowosc .mt-seeking { max-width: 44rem; margin-inline: auto; }
.mt-page-miejscowosc .mt-more { text-align: center; }
.mt-outlet {
    padding: 1rem 1.1rem; background: #fff;
    border: 1px solid var(--mt-line); border-top: 3px solid var(--mt-green); border-radius: 3px;
}
.mt-outlet-name { margin: 0 0 .2rem; font-size: 1.12rem; }
.mt-outlet-type { margin: 0 0 .6rem; font-size: .85rem; }
.mt-outlet-type a { color: var(--mt-muted); }

.mt-details { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0; font-size: .94rem; }
.mt-details dt { color: var(--mt-muted); font-size: .84rem; padding-top: .1rem; }
.mt-details dd { margin: 0; }
.mt-hours { display: block; }
.mt-hours-season { color: var(--mt-green-dark); }

.mt-status {
    margin: .3rem 0 .6rem; padding: .25rem .6rem;
    background: #fdf3e7; border-left: 3px solid #d98324; font-size: .9rem;
}
.mt-status-big { font-size: 1rem; padding: .6rem 1rem; }
.mt-seeking {
    padding: .8rem 1rem; background: var(--mt-bg);
    border-left: 4px solid var(--mt-green); margin-bottom: 1.6rem;
}
/* ---------- „Pokaż na mapie" ---------- */
.mt-map-link { margin: .7rem 0 0; font-size: .9rem; }

/*
 * Odnośnik wygląda jak przycisk, bo nim w praktyce jest — to najczęstsza
 * rzecz, jakiej turysta chce od strony punktu. Kontur zamiast wypełnienia:
 * ma być widoczny, ale nie przekrzykiwać nazwy punktu.
 */
.mt-map-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .8rem;
    border: 1px solid var(--mt-green); border-radius: 2rem;
    font-weight: 600; line-height: 1.3;
    background: #fff; color: var(--mt-green);
    transition: background .12s, color .12s;
}
.mt .mt-map-btn:hover, .mt .mt-map-btn:focus-visible {
    background: var(--mt-green); color: #fff; text-decoration: none;
}
.mt-pin { flex: 0 0 auto; }

/* ---------- okienko z mapą ---------- */
body.mt-modal-open { overflow: hidden; }

.mt-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(20, 30, 26, .6);
}
.mt-modal[hidden] { display: none; }

.mt-modal-box {
    display: flex; flex-direction: column;
    width: min(52rem, 100%); max-height: 100%;
    background: #fff; border-radius: 6px; overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.mt-modal-head {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: .8rem 1rem; border-bottom: 1px solid var(--mt-line);
}
.mt-modal-title { margin: 0; font-size: 1rem; line-height: 1.35; }
.mt-modal-x {
    margin-left: auto; padding: 0 .3rem;
    font-size: 1.6rem; line-height: 1; cursor: pointer;
    background: none; border: 0; color: var(--mt-muted);
}
.mt-modal-x:hover { color: var(--mt-text); }

/* Ramka mapy dostaje wysokość z proporcji, więc nic nie skacze przy wczytaniu. */
.mt-modal-frame { flex: 1 1 auto; min-height: 0; aspect-ratio: 4 / 3; background: var(--mt-bg); }
.mt-modal-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* komunikat, gdy mapa nie przyszła — np. ucięta przez wtyczkę prywatnościową */
.mt-modal-fail {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem; height: 100%; padding: 1.6rem; text-align: center;
}
.mt-modal-fail p { margin: 0; max-width: 26rem; color: var(--mt-muted); }
.mt-modal-coords code { font-size: .95rem; color: var(--mt-text); }
.mt-modal-fail > a { margin-top: .6rem; font-weight: 600; }

.mt-modal-foot {
    display: flex; flex-wrap: wrap; gap: .5rem;
    padding: .8rem 1rem; border-top: 1px solid var(--mt-line);
}
.mt-btn {
    padding: .45rem 1rem; border-radius: 3px;
    border: 1px solid var(--mt-line); font-weight: 600; font-size: .92rem;
    background: #fff;
}
.mt .mt-btn:hover, .mt .mt-btn:focus-visible {
    border-color: var(--mt-green); text-decoration: none;
}
.mt .mt-btn-main {
    background: var(--mt-green); border-color: var(--mt-green); color: #fff;
}
.mt .mt-btn-main:hover, .mt .mt-btn-main:focus-visible { background: var(--mt-green-dark); }

@media (max-width: 640px) {
    .mt-modal { padding: 0; }
    .mt-modal-box { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    /* na telefonie liczy się pole mapy, nie proporcja */
    .mt-modal-frame { aspect-ratio: auto; }
    .mt-modal-foot > .mt-btn { flex: 1 1 auto; text-align: center; }
}
.mt-more { margin-top: 2.4rem; font-weight: 600; }

/* ---------- strona punktu ---------- */
.mt-cols { display: flex; gap: 2.4rem; flex-wrap: wrap; }
.mt-col { flex: 1 1 20rem; min-width: 0; }
.mt-col h2 { margin: 0 0 .8rem; font-size: 1.2rem; }
.mt-hours-head { margin: 1rem 0 .3rem; font-size: .95rem; color: var(--mt-muted); }
.mt-hours-table { border-collapse: collapse; width: 100%; max-width: 22rem; font-size: .94rem; }
.mt-hours-table th, .mt-hours-table td { padding: .28rem .6rem; border-bottom: 1px solid var(--mt-line); text-align: left; }
.mt-hours-table th { font-weight: 400; color: var(--mt-muted); }
.mt-hours-table tr.mt-weekend th { color: #b3261e; }
.mt-hours-note { margin-top: 1rem; }

/* ---------- stopka ---------- */
.mt-foot {
    margin-top: 3rem; padding: 1.6rem 0; border-top: 1px solid var(--mt-line);
    background: var(--mt-bg); font-size: .92rem;
}
.mt-foot p { margin: .2rem 0; }
.mt-foot-small { color: var(--mt-muted); font-size: .85rem; }

@media (max-width: 640px) {
    .mt-head-in { gap: .8rem; }
    .mt-page-head h1 { font-size: 1.55rem; }
    .mt-cols { gap: 1.4rem; }
}