/* ══════════════════════════════════════════════════════════
   CORE Umgebung — interactive ÖPNV+POI list + map, numbered
   map<->list identity (2026-09-16, revised same day for the V2
   category + numbering pass)

   Reuses core-style.css's own token layer (--core-text/-muted/
   -border/-surface/-radius/-font) throughout, PLUS four new
   --core-umgebung-<category> tokens (declared alongside --core-accent
   in core-style.css's own .core-object token block, not redeclared
   here) — the one deliberate exception to "no new colors," because
   category is now a real, repeated, semantic signal (list number
   badge + map marker + pinned ring), not decoration. ÖPNV keeps
   --core-accent itself as its category color; Einkaufen/Familie/
   Freizeit get their own restrained hues. Category color is spent on
   the number badge/mode chip and the map marker ONLY — never on
   column headings or body text, so the page stays as restrained as it
   was before categories had colors at all.

   The number badge (.core-object__umgebung-number) is the actual
   map<->list identity now, present on every row including ÖPNV, and
   printed on its marker too. ÖPNV's existing circle/square+letter mode
   chip (B/S/U/R) stays LIST-ONLY by explicit product decision — see
   render_umgebung_items()'s own docblock in
   class-core-frontend-renderer.php — so the map marker's only job is
   "which numbered item, which category color," never a second
   B/S/U/R decoding step at marker size.

   Pinned state is a ring/halo + modest scale in the row's own category
   color, not a solid fill — a solid fill would erase category identity
   at exactly the moment a visitor has shown the most interest in a
   destination.
   ══════════════════════════════════════════════════════════ */

.core-object__umgebung-intro {
    margin: 4px 0 0;
    font-size: 1rem;
    color: var(--core-text);
}

.core-object__umgebung-caption {
    margin: 2px 0 18px;
    font-size: .78rem;
    color: var(--core-text-muted);
}

.core-object__umgebung-category {
    margin: 0 0 10px;
    font-size: .85rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .05em;
    /* --core-text, not -muted (2026-09-16 refinement) -- same size/
       weight/case/letter-spacing as before, just enough authority that
       this reads as the category heading it is rather than metadata. */
    color: var(--core-text);
}

/* Full-width map + responsive category grid (2026-09-16 architecture
   revision -- replaces the earlier side-by-side list+map). Superseded
   for a real, measured reason, not aesthetic preference: the 2026-09-16
   Umgebung V2 investigation measured a real 4-category list (ÖPNV +
   Einkaufen + Familie + Freizeit, ~12 curated destinations) at 852px
   tall against the map's fixed 361px in the old layout -- ~490px of
   list continuing below the map with an empty gutter beside it.
   Rejected fixes: internal scrolling or a "show 2, expand for more"
   pattern, both of which would hide genuinely curated information just
   to force it to fit beside a map. The actual structural fix: the map
   no longer competes for width with the list at all -- it runs the
   section's full width above a grid of compact category columns below,
   so growing the number of categories adds columns/rows in that grid,
   never height fighting the map.
   .core-object__umgebung-item/-chip/-body/-name/-line/-meta below are
   unchanged and category-agnostic -- the SAME row markup renders inside
   any column, chip present or (per the new POI categories) absent. */
.core-object__umgebung-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 28px;
    margin-top: 22px;
}

.core-object__umgebung-column {
    min-width: 0;
}

.core-object__umgebung-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.core-object__umgebung-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* Vertical only, ~22% down from 9px (2026-09-16 refinement pass) --
       horizontal padding, gap, and the row's own structure are
       unchanged; still tall enough to stay an obvious tap/click target. */
    padding: 7px 6px;
    border-bottom: 1px solid var(--core-border);
    cursor: pointer;
    transition: background-color .18s ease;
}

.core-object__umgebung-item:last-child {
    border-bottom: none;
}

.core-object__umgebung-item:hover,
.core-object__umgebung-item:focus-visible,
/* Set by JS when this item's MARKER (not the row itself) is hovered --
   same visual as native :hover, so "hover the row" and "hover the
   marker" read as the identical gesture regardless of which one a
   visitor actually pointed at. */
.core-object__umgebung-item.is-marker-hovered {
    background: var(--core-surface);
    outline: none;
}

/* Selected state (2026-09-18 single-select redesign, replacing the old
   multi-pin model) — deliberately more than the hover treatment: a
   category tint fill, not just --core-surface, so "selected" reads as a
   genuinely different, stickier state than "your mouse happens to be
   here" even before you look at the border. Left border replaces 3px of
   the normal left padding so the row never visibly shifts when a
   visitor selects/deselects it. */
.core-object__umgebung-item.is-selected {
    background: var(--item-umgebung-tint, var(--core-surface));
    border-left: 3px solid var(--item-umgebung-color, var(--core-accent));
    padding-left: 3px;
}

/* Per-row category color + tint, read by the selected-state rule above
   and by the number badge below -- driven off data-umgebung-category
   (already present on every <li> for JS's own use) rather than a second
   PHP-side class, so the color and the row's real category can never
   drift apart. 2026-09-16 map/list numbering + category-color pass. */
.core-object__umgebung-item[data-umgebung-category="oepnv"] { --item-umgebung-color: var(--core-umgebung-oepnv); --item-umgebung-tint: var(--core-umgebung-oepnv-tint); }
.core-object__umgebung-item[data-umgebung-category="einkaufen"] { --item-umgebung-color: var(--core-umgebung-einkaufen); --item-umgebung-tint: var(--core-umgebung-einkaufen-tint); }
.core-object__umgebung-item[data-umgebung-category="familie"] { --item-umgebung-color: var(--core-umgebung-familie); --item-umgebung-tint: var(--core-umgebung-familie-tint); }
.core-object__umgebung-item[data-umgebung-category="freizeit"] { --item-umgebung-color: var(--core-umgebung-freizeit); --item-umgebung-tint: var(--core-umgebung-freizeit-tint); }

/* Modest scale bump (2026-09-16, secondary to the geometry fix above)
   -- 22px -> 24px, matching the name/meta text bumps below, so the
   feature reads with a bit more weight relative to the rest of the
   property page without changing the typography hierarchy or tokens. */
.core-object__umgebung-chip {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border: 1px solid var(--core-border);
    background: var(--core-surface);
    color: var(--core-accent);
    font-family: var(--core-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.core-object__umgebung-chip--circle {
    border-radius: 50%;
}

/* Number badge -- present on EVERY item, ÖPNV included (2026-09-16
   map/list correlation pass). This, not the mode chip above, is the
   primary map<->list identity: the same number is printed on this
   row's marker (core-umgebung-map.js). Deliberately smaller than the
   24px mode chip so an ÖPNV row's number+chip pair reads as "one small
   index + one identification chip," not two competing same-weight
   badges -- for POI rows, which have no mode chip, this is the only
   leading element, at the mode chip's old visual weight via its own
   border/radius/font recipe rather than trying to look identical to a
   letter chip it is not. Colored per category via the row's own
   --item-umgebung-color (see the [data-umgebung-category] rules above)
   -- the one place list rows get category color at all, per the
   explicit "category color belongs to the map/identifier system, not
   the list columns" product decision. */
.core-object__umgebung-number {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 1.5px solid var(--item-umgebung-color, var(--core-border));
    border-radius: 50%;
    background: var(--core-surface);
    color: var(--item-umgebung-color, var(--core-accent));
    font-family: var(--core-font);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Same visual weight as the existing transit-line span -- a different
   fact (place TYPE, not transport lines), so a separate class, not a
   reused one, but no reason for it to look different today. */
.core-object__umgebung-subtype {
    font-weight: 500;
    color: var(--core-text-muted);
}

/* Not var(--core-radius) directly — at 22px that value reads almost as
   round as the circle chip, which defeats the point of having two
   distinct shapes. This is a smaller, still-clearly-related corner
   softening, not a literal token reuse. */
.core-object__umgebung-chip--square {
    border-radius: 4px;
}

.core-object__umgebung-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.core-object__umgebung-name {
    font-family: var(--core-font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--core-text);
}

.core-object__umgebung-line {
    font-weight: 500;
    color: var(--core-text-muted);
}

.core-object__umgebung-meta {
    font-family: var(--core-font);
    font-size: .9rem;
    color: var(--core-text-muted);
}

/* Explanatory metadata, not another piece of useful property information
   -- smaller and tighter than the .85rem meta text above it (2026-09-16
   refinement), but still real, legible muted-vocabulary text, not
   fine-print opacity. Wording unchanged. Left-aligned like every other
   text block in this section (2026-09-18: the old right-alignment
   existed solely to pair this with the now-removed multi-pin reset
   button that used to sit directly below it -- see the single-select
   redesign; no dead markup left behind for a pairing that no longer
   exists). */
.core-object__umgebung-note {
    margin: 8px 0 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--core-text-muted);
}

/* ── Map card — same 12px radius / soft-shadow language as every other
   image or embed on this page. Full-width, above the category grid
   (2026-09-16 architecture revision -- see .core-object__umgebung-grid's
   own comment for the measured reason the old side-by-side layout was
   replaced). Height is still deliberately bounded and independent of
   the grid below it -- that principle didn't change, only the map's own
   width did. 420px (up from the old column-width layout's 360px) --
   a map spanning the full ~1152px content width reads as too flat/wide
   at the old column-era height; a starting value, not exhaustively
   tuned, revisit against real content if it looks off live. ── */
.core-object__umgebung-map {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: var(--core-radius);
    overflow: hidden;
    border: 1px solid var(--core-border);
    background: var(--core-surface);
    box-shadow: 0 8px 24px rgba(17, 24, 39, .06);
}

.core-object__umgebung-map .leaflet-container {
    width: 100%;
    height: 100%;
    font-family: var(--core-font);
}

.core-object__umgebung-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    text-align: center;
}

.core-object__umgebung-map-placeholder p {
    margin: 0;
    font-family: var(--core-font);
    font-size: .88rem;
    color: var(--core-text-muted);
}

/* !important throughout -- same Elementor default-<button>-styling
   bleed-through confirmed on .core-object__umgebung-reset above (border,
   background, and text color all get overridden by the theme, not just
   color), fixed the same comprehensive way here rather than waiting to
   find each affected property one at a time. */
.core-object__umgebung-map-consent-btn {
    padding: 8px 18px !important;
    border: 1px solid var(--core-border) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--core-accent) !important;
    font-family: var(--core-font) !important;
    font-size: .82rem !important;
    font-weight: 650 !important;
    cursor: pointer !important;
    transition: border-color .18s ease, color .18s ease !important;
}

.core-object__umgebung-map-consent-btn:hover,
.core-object__umgebung-map-consent-btn:focus {
    border-color: var(--core-accent) !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--core-text) !important;
}

/* ── Map markers (Leaflet divIcon content) — the destination marker's
   job is now "which numbered item is this" first (2026-09-16 map/list
   correlation pass): every marker shows its row's own number, in that
   row's category color, and is always circular -- the earlier circle/
   square shape split existed only to distinguish ÖPNV modes at a
   glance, and B/S/U/R is deliberately NOT drawn on the marker anymore
   (kept list-only, where there's room to show it properly alongside
   the number -- see render_umgebung_items()'s own docblock), so a
   second shape system on the marker would carry no information a
   visitor could actually use. Color, not shape, now carries category. ── */
.core-object__umgebung-marker-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--marker-umgebung-color, var(--core-border));
    background: #fff;
    color: var(--marker-umgebung-color, var(--core-accent));
    font-family: var(--core-font);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(17, 24, 39, .14);
    transition: transform .18s ease, box-shadow .18s ease;
}

.core-object__umgebung-marker-chip--oepnv { --marker-umgebung-color: var(--core-umgebung-oepnv); --marker-umgebung-ring: var(--core-umgebung-oepnv-ring); }
.core-object__umgebung-marker-chip--einkaufen { --marker-umgebung-color: var(--core-umgebung-einkaufen); --marker-umgebung-ring: var(--core-umgebung-einkaufen-ring); }
.core-object__umgebung-marker-chip--familie { --marker-umgebung-color: var(--core-umgebung-familie); --marker-umgebung-ring: var(--core-umgebung-familie-ring); }
.core-object__umgebung-marker-chip--freizeit { --marker-umgebung-color: var(--core-umgebung-freizeit); --marker-umgebung-ring: var(--core-umgebung-freizeit-ring); }

.core-object__umgebung-marker-chip.is-hovered {
    transform: scale(1.18);
}

/* Selected = ring/halo + modest enlargement, NOT a solid fill -- once
   category color is meaningful, a solid fill would erase it exactly
   when a visitor has most clearly expressed interest in this
   destination. Stays white/bordered/colored-text like the unselected
   state; only the ring and the scale change. */
.core-object__umgebung-marker-chip.is-selected {
    transform: scale(1.12);
    box-shadow: 0 0 0 4px var(--marker-umgebung-ring, rgba(71, 85, 105, .35)), 0 2px 6px rgba(17, 24, 39, .14);
}

.core-object__umgebung-marker-chip.is-selected.is-hovered {
    transform: scale(1.24);
}

/* The permanent property marker — a standard map-pin silhouette (see
   core-umgebung-map.js), always larger than any destination marker,
   never interactive (no hover/pinned states apply to it; it's an
   anchor, not a result). Shape, not a second color, is what keeps it
   from ever being confused with a PINNED destination marker, which also
   fills solid --core-accent -- still one accent hue, no new token. */
.core-object__umgebung-marker-property-pin {
    fill: var(--core-accent);
    stroke: #fff;
    stroke-width: 1.5px;
    filter: drop-shadow(0 2px 4px rgba(17, 24, 39, .35));
}

.core-object__umgebung-marker-property-pin-dot {
    fill: #fff;
}

/* Selection-detail popup (2026-09-18) -- overrides Leaflet's default
   white-box-with-shadow chrome so it reads as part of this component,
   not a foreign library widget. `className: 'core-umgebung-popup'` is
   set on the marker's bindPopup() call in core-umgebung-map.js; this
   scopes every override to only ever affect that one popup type, never
   any other Leaflet popup a future feature might add elsewhere. Card
   sizing/spacing/typography live on the inner .core-umgebung-popup__*
   elements below, not on Leaflet's own wrapper, so the actual content
   box stays deliberately small and quiet -- no large controls, no close
   button (deselecting is re-clicking the row/marker, not popup chrome;
   see selectDestination() in the JS). */
.core-umgebung-popup .leaflet-popup-content-wrapper {
    background: var(--core-surface);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, .16);
    padding: 0;
}

.core-umgebung-popup .leaflet-popup-content {
    margin: 0;
}

.core-umgebung-popup .leaflet-popup-tip {
    background: var(--core-surface);
    box-shadow: 0 8px 24px rgba(17, 24, 39, .16);
}

.core-umgebung-popup__card {
    padding: 10px 12px;
    border-left: 3px solid var(--popup-umgebung-color, var(--core-accent));
    font-family: var(--core-font);
}

.core-umgebung-popup__card--oepnv { --popup-umgebung-color: var(--core-umgebung-oepnv); }
.core-umgebung-popup__card--einkaufen { --popup-umgebung-color: var(--core-umgebung-einkaufen); }
.core-umgebung-popup__card--familie { --popup-umgebung-color: var(--core-umgebung-familie); }
.core-umgebung-popup__card--freizeit { --popup-umgebung-color: var(--core-umgebung-freizeit); }

.core-umgebung-popup__name {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--core-text);
}

.core-umgebung-popup__subtype {
    margin-top: 2px;
    font-size: .78rem;
    color: var(--core-text-muted);
}

.core-umgebung-popup__fact {
    margin-top: 4px;
    font-size: .8rem;
    color: var(--core-text-muted);
}

.core-umgebung-popup__fact:first-of-type {
    margin-top: 6px;
}

/* The old tablet breakpoint here existed to make the side-by-side
   list+map wrap into a stack once they no longer fit next to each other
   (see this theme's own undocumented ~800px content-width jump, still
   real and still worth knowing about if this component's markup changes
   again -- but no longer relevant to this rule: the map is unconditionally
   full-width now, nothing to wrap). Only the responsive HEIGHT step and
   the category grid's own natural column-count reduction remain. */
@media (max-width: 767px) {
    /* True mobile gets its own shorter height -- a full-width map at
       767px-and-below's much narrower content width doesn't need (or
       suit) the same 420px the wider layout above uses. */
    .core-object__umgebung-map {
        height: 280px;
    }

    /* One column on true mobile -- auto-fit's own minmax(200px, 1fr)
       would already produce this on most phone widths, but pinning it
       explicitly avoids depending on exactly where 200px stops fitting
       across different phone widths/zoom levels. */
    .core-object__umgebung-grid {
        grid-template-columns: 1fr;
    }
}