/* ==========================================================================
   Site Map — strona z interaktywną mapą
   Wgraj do: wp-content/themes/generatepress_child/site-map.css
   Kolory marki: zielony #1E5B41, czerwony #A32D2D, tło #F7F5F0, tekst #2B2B28
   ========================================================================== */

.sm-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px 60px;
    font-family: "Raleway", sans-serif;
    color: #2B2B28;
}

.sm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- nagłówek ---------- */

.sm-breadcrumbs {
    padding: 24px 0 0;
    font-size: 13px;
    color: #6B6B66;
}

.sm-breadcrumbs a {
    color: #1E5B41;
    text-decoration: none;
}

.sm-breadcrumbs a:hover { text-decoration: underline; }
.sm-breadcrumbs span { margin: 0 4px; }

.sm-header { padding: 16px 0 8px; }

.sm-title {
    font-family: "Lora", serif;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: #2B2B28;
    margin: 0 0 12px;
}

.sm-intro {
    max-width: 760px;
    font-size: 16px;
    line-height: 1.8;
    color: #2B2B28;
}

.sm-intro p { margin: 0 0 12px; }

.sm-empty {
    padding: 24px 0;
    font-size: 15px;
    color: #6B6B66;
}

/* ---------- panel filtrów (typ miejsca) ---------- */

.sm-filters {
    margin: 22px 0 24px;
    padding: 18px 20px 20px;
    background: #F7F5F0;
    border: 1px solid #e8e4d8;
    border-radius: 12px;
}

.sm-block-title {
    margin: 0 0 10px;
    font-family: "Raleway", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6B6B66;
}

.sm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sm-chip {
    --c: #1E5B41;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #d8d4c6;
    border-radius: 999px;
    background: #fff;
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2B2B28;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}

.sm-chip:hover { border-color: var(--c); }

.sm-chip__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c);
}

.sm-chip__n {
    font-size: 12px;
    font-weight: 700;
    color: #6B6B66;
}

.sm-chip.is-active {
    background: var(--c);
    border-color: var(--c);
    color: #fff;
}

.sm-chip.is-active .sm-chip__n { color: rgba(255, 255, 255, .85); }
.sm-chip.is-active .sm-chip__dot { background: #fff; }

.sm-chips:not(.is-expanded) .sm-chip--extra { display: none; }

.sm-chip--more {
    border-style: dashed;
    color: #1E5B41;
}

.sm-chip--more:hover { background: #fff; border-color: #1E5B41; }

/* ---------- układ: lista | mapa ---------- */

.sm-layout {
    --sm-h: clamp(520px, calc(100vh - 120px), 780px);
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.sm-listcol {
    order: 1;
    display: flex;
    flex-direction: column;
    height: var(--sm-h);
    min-height: 0;
}

.sm-mapcol { order: 2; position: sticky; top: 16px; }

/* pasek nad mapą: Region Portugalii */
.sm-mapbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 44px;
    margin-bottom: 8px;
}

.sm-mapbar .sm-block-title { margin: 0; }

.sm-jump {
    display: inline-flex;
    border: 1px solid #d8d4c6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.sm-page .sm-jump__btn {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-left: 1px solid #d8d4c6;
    border-radius: 0;
    background: #fff;
    font-family: "Raleway", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1E5B41;
    cursor: pointer;
}

.sm-page .sm-jump__btn:first-child { border-left: 0; }
.sm-page .sm-jump__btn:hover { background: #1E5B41; color: #fff; }

.sm-mapwrap { position: relative; }

.sm-map {
    height: calc(var(--sm-h) - 52px);
    border-radius: 10px;
    border: 1px solid #e0ddd2;
    background: #eae7dc;
    isolation: isolate; /* panele Leaflet nie wchodzą na sticky header */
    z-index: 0;
}

.sm-maphint {
    margin: 8px 0 0;
    font-size: 12px;
    color: #6B6B66;
}

/* ---------- nagłówek listy: tytuł, licznik, wyszukiwarka ---------- */

.sm-listhead { flex-shrink: 0; margin-bottom: 12px; }

.sm-listhead__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sm-listhead__row .sm-block-title { margin: 0; }

.sm-status {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #6B6B66;
}

.sm-search__input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #d8d4c6;
    border-radius: 8px;
    background: #fff;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    color: #2B2B28;
}

.sm-search__input:focus {
    outline: 2px solid #1E5B41;
    outline-offset: 1px;
}

.sm-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
}

/* ---------- lista miejsc ---------- */

.sm-group { --c: #1E5B41; margin-bottom: 22px; }
.sm-group[hidden], .sm-item[hidden], .sm-noresults[hidden] { display: none; }

.sm-group__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--c);
}

.sm-group__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: "Lora", serif;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: #2B2B28;
}

.sm-group__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.sm-group__n { margin-left: auto; font-family: "Raleway", sans-serif; font-size: 12px; font-weight: 700; color: #6B6B66; }

.sm-group__list { list-style: none; margin: 0; padding: 0; }

.sm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    margin: 0 0 4px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .15s;
}

.sm-item[hidden], .sm-group[hidden], .sm-noresults[hidden] { display: none; }

.sm-item:hover { background: #F7F5F0; }

.sm-item.is-active {
    background: #F7F5F0;
    border-color: var(--c);
}

.sm-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.sm-item__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #2B2B28;
    text-decoration: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sm-item__title:hover { color: #1E5B41; text-decoration: underline; }

.sm-item__meta { font-size: 12px; color: #6B6B66; }

.sm-page .sm-item__pin {
    color: #1E5B41 !important;
    background: #fff !important;
    padding: 0;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d4c6;
    border-radius: 50%;
    background: #fff;
    color: #1E5B41;
    cursor: pointer;
}

.sm-item__pin svg { display: block; }
.sm-page .sm-item__pin:hover { background: #1E5B41 !important; color: #fff !important; border-color: #1E5B41; }

.sm-noresults { padding: 16px 4px; font-size: 14px; color: #6B6B66; }


/* ---------- markery ---------- */

.sm-marker { background: none; border: 0; }

.sm-pin {
    --c: #1E5B41;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--c);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.sm-pin svg { width: 58%; height: 58%; }

.sm-pin--p2 { box-shadow: 0 0 0 3px var(--c), 0 3px 8px rgba(0, 0, 0, .4); }

.leaflet-marker-icon:focus-visible .sm-pin { outline: 3px solid #2B2B28; outline-offset: 2px; }

/* ---------- klastry ---------- */

.sm-cluster {
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(30, 91, 65, .88);
    border: 3px solid rgba(255, 255, 255, .95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    color: #fff;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    font-weight: 700;
    box-sizing: border-box;
}

/* ---------- popup ---------- */

.sm-popup .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
}

.sm-popup .leaflet-popup-content { margin: 0; width: 260px !important; }

.sm-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: #eae7dc;
}

.sm-card__body { padding: 12px 14px 14px; font-family: "Raleway", sans-serif; }

.sm-card__type {
    --c: #1E5B41;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c);
}

.sm-card__title {
    margin: 4px 0 6px;
    font-family: "Lora", serif;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    color: #2B2B28;
}

.sm-card__excerpt {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
    color: #2B2B28;
}

.sm-popup .sm-card__link {
    font-size: 13px;
    font-weight: 700;
    color: #1E5B41;
    text-decoration: none;
}

.sm-popup .sm-card__link:hover { color: #A32D2D; text-decoration: underline; }


/* ---------- mobile ---------- */

@media (max-width: 900px) {
    .sm-title { font-size: 28px; }

    .sm-filters { padding: 16px 16px 18px; margin: 18px 0 20px; }

    .sm-layout { display: block; }
    .sm-mapcol { position: static; margin-bottom: 20px; }
    .sm-listcol { display: block; height: auto; }

    /* pasek nad mapą: etykieta nad przyciskami, przyciski na całą szerokość */
    .sm-mapbar { display: block; height: auto; margin-bottom: 10px; }
    .sm-mapbar .sm-block-title { margin-bottom: 8px; }
    .sm-jump { display: flex; width: 100%; }
    .sm-page .sm-jump__btn { flex: 1; }

    .sm-map { height: 62vh; min-height: 380px; }

    /* lista: stała wysokość z przewijaniem wewnątrz */
    .sm-list {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 4px;
    }
}