/* visit — this component's own styles, put in the head by the renderer where it is drawn.
   Colours and sizes only through var(--*), so the design drives these too. */

/* --- how to get here ----------------------------------------------------- */
.visit__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; align-items: stretch; }
/* No point on the map: the facts alone, no empty frame beside them. */
.visit__grid--solo { grid-template-columns: 1fr; }
.visit__route { display: inline-block; margin-top: .35rem; font-size: .9rem; color: var(--mark, var(--primary)); text-decoration: none; }
.visit__route:hover { text-decoration: underline; }


.visit__facts { display: grid; gap: 1.75rem; align-content: start; }


.visit__fact { display: flex; flex-direction: column; gap: .35rem; }


.visit__label { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; color: var(--muted); }


.visit__value { font-size: 1.05rem; color: var(--ink); }


.visit__value--link { color: var(--mark, var(--primary)); text-decoration: none; }


.visit__value--link:hover { text-decoration: underline; }


.visit__hint { font-size: .85rem; color: var(--muted); }


.visit__cta { margin-top: .75rem; align-self: start; }

.visit__week { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .9rem; max-width: 20rem; }


.visit__day, .visit__week__day { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }


.visit__day + .visit__day, .visit__week__day + .visit__week__day { border-top: 1px dotted var(--line); }


.visit__day.is-off, .visit__week__day.is-off { color: var(--muted); }

.visit__map { position: relative; min-height: 340px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }


/* The canvas fills the frame (visit.js puts it in); the map's ground until its tiles come. */
.visit__map { background: var(--surface); }
.visit__map .maplibregl-map { position: absolute; inset: 0; }
/* The map's own buttons and credits in the design's colours, not the library's white.
   `.visit` ahead: the library's stylesheet comes later, when the map does. */
.visit .visit__map .maplibregl-ctrl-group { background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.visit .visit__map .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.visit .visit__map .maplibregl-ctrl-attrib { font-size: .68rem; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--muted); }
.visit .visit__map .maplibregl-ctrl-attrib a { color: var(--muted); }
.visit .visit__map .maplibregl-ctrl-attrib-button { background-color: transparent; }
[data-scheme="dark"] .visit .visit__map .maplibregl-ctrl-icon,
[data-scheme="dark"] .visit .visit__map .maplibregl-ctrl-attrib-button { filter: invert(1); }


.visit__map-link {
    /* Top-aligned: the OpenStreetMap attribution sits along the bottom of the
       map and must not be covered — that is a licence condition, not taste. */
    position: absolute; right: .75rem; top: .75rem; z-index: 2;
    background: var(--surface); color: var(--ink); text-decoration: none;
    padding: .5rem .85rem; border-radius: var(--radius-small);
    font-size: .8rem; box-shadow: 0 6px 18px rgba(0,0,0,.14);
}

@media (max-width: 900px) {
    .visit__grid { grid-template-columns: 1fr; }
}