/* Alpine passes hub: the map band. Big pins (halo + dot + a wide invisible hit ring), the name
   beside each, and the mini card (.ap-pop) alpine-hub-map.js places over the pin. */

.ap-mapbox {
    position: relative; padding: 8px;
    background: rgba(255, 255, 255, .6); border: 1px solid rgba(17, 18, 20, .1); border-radius: 6px;
}
.ap-map { display: block; width: 100%; height: auto; border-radius: 4px; overflow: hidden; }
.ap-map__sea { fill: var(--ap-sea); }
.ap-map__land { fill: var(--ap-land); stroke: var(--ap-border); stroke-width: .8; stroke-linejoin: round; }
.ap-map__land--alp { fill: #fff; }
.ap-map__cname { display: none; font-size: 11px; font-weight: 700; letter-spacing: .22em; fill: rgba(17, 18, 20, .28); text-anchor: middle; }

.ap-map__pin { cursor: pointer; outline: none; }
.ap-map__hit { fill: transparent; }
.ap-map__halo { fill: var(--ap-ink); opacity: .16; transform-box: fill-box; transform-origin: center; transition: transform .2s ease, opacity .2s; }
.ap-map__pin--gravel .ap-map__halo { fill: var(--ap-or); opacity: .22; }
.ap-map__dot { fill: var(--ap-ink); stroke: #fff; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
.ap-map__pin--gravel .ap-map__dot { fill: var(--ap-or); }
.ap-map__pin text {
    font-size: 22px; font-weight: 700; fill: var(--ap-ink);
    paint-order: stroke; stroke: #fbf8f2; stroke-width: 5px; stroke-linejoin: round; pointer-events: none;
}
.ap-map__pin:hover .ap-map__dot, .ap-map__pin:focus-visible .ap-map__dot, .ap-map__pin.is-active .ap-map__dot { transform: scale(1.25); }
.ap-map__pin:hover .ap-map__halo, .ap-map__pin:focus-visible .ap-map__halo, .ap-map__pin.is-active .ap-map__halo { transform: scale(1.5); opacity: .3; }
.ap-map__pin:focus-visible .ap-map__dot { stroke: var(--ap-or); stroke-width: 3.5; }

.ap-map__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 8px 6px 2px; font-size: 12px; font-weight: 500; color: var(--ap-text); }
.ap-map__legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; border-radius: 50%; background: var(--ap-ink); }
.ap-map__legend i.is-gravel { background: var(--ap-or); }

/* ── Mini card ── */
.ap-pop {
    position: absolute; z-index: 10; width: 248px;
    overflow: hidden; background: #fff; border: 1px solid var(--ap-line); border-radius: 6px;
    box-shadow: 0 14px 34px rgba(17, 18, 20, .22);
    opacity: 0; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease;
}
.ap-pop[hidden] { display: none; }
.ap-pop.is-on { opacity: 1; transform: none; }
.ap-pop__media { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--ap-closed); }
.ap-pop__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-pop__tour {
    position: absolute; left: 10px; bottom: 10px; padding: 4px 7px; border-radius: 2px;
    font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--ap-or);
}
.ap-pop__body { padding: 12px 14px 14px; }
.ap-pop__meta { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ap-muted); }
.ap-pop__name { display: block; margin: 4px 0 10px; font-size: 18px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--ap-ink); }
.ap-pop .ap-strip { margin-bottom: 10px; }
.ap-pop .ap-strip__c { height: 18px; font-size: 8.5px; }
.ap-pop__chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.ap-pop__chips .ap-chip { padding: 3px 6px; font-size: 10.5px; }
.ap-page .ap-pop__cta {
    display: inline-flex; align-items: center; min-height: 40px;
    font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ap-ink); border-bottom: 2px solid var(--ap-or);
}

/* The month strip is drawn by alpine-hub-catalog.css; the map comes before the catalog, so the
   mini card carries the few rules it needs itself. */
.ap-pop .ap-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; padding: 0; list-style: none; }
.ap-pop .ap-strip__c { display: flex; align-items: center; justify-content: center; border-radius: 2px; font-weight: 700; }
.ap-pop .ap-strip__c--open { background: var(--ap-open); color: #fff; }
.ap-pop .ap-strip__c--weather { background: var(--ap-weather); color: rgba(17, 18, 20, .7); }
.ap-pop .ap-strip__c--closed { background: var(--ap-closed); color: rgba(17, 18, 20, .45); }
.ap-pop .ap-strip__c.is-now { outline: 2px solid var(--ap-or); outline-offset: 1px; }
.ap-pop .ap-chip { display: inline-block; border: 1px solid var(--ap-line); border-radius: 2px; font-weight: 600; color: var(--ap-text); }

@media (min-width: 600px) {
    .ap-mapbox { padding: 10px; }
    .ap-map__pin text { font-size: 17px; stroke-width: 4.5px; }
}

@media (min-width: 900px) {
    .ap-map__cname { display: inline; }
    .ap-map__pin text { font-size: 13px; stroke-width: 4px; }
    .ap-pop { width: 264px; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-map__dot, .ap-map__halo, .ap-pop { transition: none; }
}