/* =========================================================
   Standorte index page — search + city grid alignment to DS
   Scoped under .cities-app / .cities-priority-block which
   exist only on the Standorte index page (use_citylist=1).
   Uses --pa-* tokens from design-system.css. Visual only:
   no content, SEO, schema, route or markup changes.
   ========================================================= */

/* ── Priority block heading ───────────────────────────── */
.cities-priority-block h2 {
    color:          var(--pa-primary);
    font-weight:    700;
    letter-spacing: -.01em;
    margin:         0 0 18px;
}

/* ── Wrapper rhythm: breathing room before the search ── */
.cities-app {
    margin-top: 36px;
}

/* ── Search field block ───────────────────────────────── */
.cities-app .city-search-layout {
    max-width: 720px;
    margin:    0 auto 36px;
}
.cities-app .city-search-form {
    margin: 0;
}
.cities-app .cs-form-group {
    position: relative;
}
.cities-app .city-search-input {
    width:          100%;
    height:         58px;
    padding:        0 20px 0 54px;
    background:     linear-gradient(135deg, #1f2937 0%, #2c3a4e 100%);
    color:          #ffffff;
    border:         1.5px solid rgba(201, 166, 102, .55);
    border-radius:  50px;
    font-size:      17px;
    font-family:    'Dax', 'Fira Sans', Arial, Helvetica, sans-serif;
    box-shadow:     0 4px 14px rgba(23, 34, 50, .14);
    outline:        none;
    appearance:         none;
    -webkit-appearance: none;
    transition:     border-color .2s ease, box-shadow .2s ease,
                    background-color .2s ease;
}
.cities-app .city-search-input::placeholder {
    color:   rgba(255, 255, 255, .62);
    opacity: 1;
}
.cities-app .city-search-input:hover {
    border-color: rgba(201, 166, 102, .85);
}
.cities-app .city-search-input:focus,
.cities-app .city-search-input:focus-visible {
    border-color: var(--pa-accent);
    box-shadow:   0 0 0 4px rgba(201, 166, 102, .22),
                  0 4px 14px rgba(23, 34, 50, .18);
}
/* Neutralise Chrome autofill yellow on this dark field */
.cities-app .city-search-input:-webkit-autofill {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow:      0 0 0 1000px #243140 inset;
    caret-color:             #ffffff;
}

/* ── Magnifier icon ───────────────────────────────────── */
.cities-app .search-icon {
    position:       absolute;
    top:            50%;
    left:           20px;
    transform:      translateY(-50%);
    font-size:      18px;
    color:          var(--pa-accent);
    pointer-events: none;
}

/* ── City link grid: priority block + dynamic block ───── */
.cities-app .cities-layout {
    padding: 0;
}
.cities-priority-block .cities-list,
.cities-app .cities-list {
    column-gap: 16px;
}
.cities-priority-block .cities-list li,
.cities-app .cities-list li {
    background:                 transparent;
    margin:                     0 0 8px;
    padding:                    0;
    list-style:                 none;
    break-inside:               avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside:           avoid;
}
/* Kill the old #eee zebra */
.cities-priority-block .cities-list li:nth-child(odd),
.cities-app .cities-list li:nth-child(odd) {
    background: transparent;
}

.cities-priority-block .cities-list li a,
.cities-app .cities-list li a {
    display:         block;
    padding:         8px 14px;
    background:      var(--pa-bg-alt);
    color:           var(--pa-text);
    border:          1px solid var(--pa-border);
    border-left:     3px solid transparent;
    border-radius:   6px;
    font-size:       15px;
    line-height:     1.35;
    text-decoration: none;
    transition:      background-color .15s ease, color .15s ease,
                     border-color .15s ease, transform .12s ease,
                     box-shadow .15s ease;
}
.cities-priority-block .cities-list li a:visited,
.cities-app .cities-list li a:visited {
    color: var(--pa-text);
}
.cities-priority-block .cities-list li a:hover,
.cities-priority-block .cities-list li a:focus,
.cities-priority-block .cities-list li a:focus-visible,
.cities-app .cities-list li a:hover,
.cities-app .cities-list li a:focus,
.cities-app .cities-list li a:focus-visible {
    background:        var(--pa-primary);
    color:             #ffffff;
    border-color:      var(--pa-primary);
    border-left-color: var(--pa-accent);
    outline:           none;
    transform:         translateY(-1px);
    box-shadow:        0 4px 12px rgba(23, 34, 50, .14);
}
.cities-priority-block .cities-list li a:hover .city,
.cities-priority-block .cities-list li a:focus .city,
.cities-app .cities-list li a:hover .city,
.cities-app .cities-list li a:focus .city {
    color: var(--pa-accent);
}
.cities-priority-block .cities-list li a:active,
.cities-app .cities-list li a:active {
    background: var(--pa-primary-dark);
    transform:  translateY(0);
    box-shadow: 0 2px 6px rgba(23, 34, 50, .14);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .cities-app {
        margin-top: 24px;
    }
    .cities-app .city-search-layout {
        margin: 0 auto 24px;
    }
    .cities-app .city-search-input {
        height:    52px;
        font-size: 16px;
        padding:   0 18px 0 48px;
    }
    .cities-app .search-icon {
        left:      16px;
        font-size: 17px;
    }
    .cities-priority-block .cities-list li a,
    .cities-app .cities-list li a {
        padding:   7px 12px;
        font-size: 14.5px;
    }
}
@media (max-width: 480px) {
    .cities-app {
        margin-top: 20px;
    }
    .cities-app .city-search-layout {
        margin: 0 auto 20px;
    }
    .cities-app .city-search-input {
        height:    48px;
        font-size: 15.5px;
    }
}