/* Plan a Visit: Arrival Map. Restyle per theme from css/screen.css by changing the --cc-visit-map-* variables.
   The card keeps its own surface (white by default) on every section color: set --cc-visit-map-card-bg and
   --cc-visit-map-card-ink together. --cc-visit-map-filter tints the Google map (for example grayscale(1)). */
.cc-visit-map {
	--cc-visit-map-line: color-mix(in srgb, currentColor 18%, transparent);
	--cc-visit-map-muted: color-mix(in srgb, currentColor 76%, transparent);
	--cc-visit-map-label-font: var(--font-small-titles);
	--cc-visit-map-radius: var(--img-radius, 0);
	--cc-visit-map-card-bg: var(--color-white, #fff);
	--cc-visit-map-card-ink: var(--color-body, #111);
	--cc-visit-map-inset: 32px;
	--cc-visit-map-accent: var(--color-main);
	container-type: inline-size;
	min-width: 0;
}
.bg-main .cc-visit-map, .bg-black .cc-visit-map, .bg-image .cc-visit-map, .bg-video .cc-visit-map { --cc-visit-map-accent: currentColor; }
.cc-visit-map :is(a, [tabindex], iframe):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.cc-visit-map .cc-visit-map__stage { display: block; }
.cc-visit-map .cc-visit-map__map { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--cc-visit-map-radius); background: color-mix(in srgb, currentColor 8%, transparent); }
.cc-visit-map .cc-visit-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: var(--cc-visit-map-filter, none); }
.cc-visit-map .cc-visit-map__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.cc-visit-map .cc-visit-map__card {
	position: relative;
	margin: -48px 16px 0;
	padding: clamp(20px, 3cqw, 40px);
	border-radius: var(--cc-visit-map-radius);
	background: var(--cc-visit-map-card-bg);
	color: var(--cc-visit-map-card-ink);
	min-width: 0;
}
.cc-visit-map--no-map .cc-visit-map__card { margin: 0 auto; max-width: 640px; border: 1px solid var(--cc-visit-map-line); }
.cc-visit-map .cc-visit-map__card .ct2-head :is(.titles, .small-titles, .headline, .wysiwyg, p, h1, h2, h3, h4, li, span) { color: inherit !important; }
/* 3.6.10: the whole card keeps its own ink on a dark band, not only the heading (the steps title and links printed white on the white card, MAP-22). */
body:not(.cc-look-pre-3-6-10) .cc-visit-map .cc-visit-map__card :is(.titles, .small-titles, h1, h2, h3, h4, p, li, span, a:not(.button)) { color: inherit !important; }
.cc-visit-map .cc-visit-map__address { margin: 20px 0 0; font-style: normal; font-size: var(--fs-copy); line-height: 1.5; }
.cc-visit-map .cc-visit-map__times { margin: 20px 0 0; padding: 0; list-style: none; }
.cc-visit-map .cc-visit-map__slot { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--cc-visit-map-line); font-size: var(--fs-copy); }
.cc-visit-map .cc-visit-map__slot:last-child { border-bottom: 1px solid var(--cc-visit-map-line); }
.cc-visit-map .cc-visit-map__day { font-family: var(--cc-visit-map-label-font); font-size: var(--fs-small); }
.cc-visit-map .cc-visit-map__time { font-weight: 700; }
.cc-visit-map .cc-visit-map__label { font-size: var(--fs-small); color: var(--cc-visit-map-muted); }
.cc-visit-map .ccv-flag { display: none; font-weight: 700; color: var(--color-main); }
.cc-visit-map :is(.is-next, .is-now) .ccv-flag { display: inline; }
.cc-visit-map .cc-visit-map__dirs { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
.cc-visit-map .cc-visit-map__dir, .cc-visit-map .cc-visit-map__apple { font-size: var(--fs-buttons); font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cc-visit-map .cc-visit-map__steps-title { margin: 28px 0 8px; }
.cc-visit-map .cc-visit-map__steps { margin: 0; padding-left: 1.3em; }
.cc-visit-map .cc-visit-map__steps li { margin: 0 0 6px; font-size: var(--fs-copy); }
.cc-visit-map .cc-visit-map__note { margin: 0 0 16px; padding: 12px 16px; border: 1px dashed currentColor; font-size: 16px; }
@container (min-width: 900px) {
	.cc-visit-map .cc-visit-map__stage { display: grid; grid-template-areas: "stack"; }
	.cc-visit-map .cc-visit-map__map { grid-area: stack; aspect-ratio: 16 / 9; min-height: 560px; }
	.cc-visit-map .cc-visit-map__card { grid-area: stack; align-self: center; justify-self: start; width: min(440px, 42%); margin: var(--cc-visit-map-inset); }
	.cc-visit-map--right .cc-visit-map__card { justify-self: end; }
	.cc-visit-map--no-map .cc-visit-map__stage { display: block; }
	.cc-visit-map--no-map .cc-visit-map__card { width: auto; margin: 0 auto; }
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		@keyframes cc-visit-map-left { from { opacity: 0; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }
		@keyframes cc-visit-map-right { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
		.cc-visit-map:not(.cc-visit-map--no-map) .cc-visit-map__card { animation: cc-visit-map-left linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
		.cc-visit-map--right:not(.cc-visit-map--no-map) .cc-visit-map__card { animation-name: cc-visit-map-right; }
	}
}

/* 3.3.17: times line up in columns (day | time | label) across every row, via subgrid; the next service is marked by a secondary-color day and time (the Next word is for screen readers); phones put the label under the time. */
@supports (grid-template-columns: subgrid) {
	.cc-visit-map .cc-visit-map__times { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); column-gap: 16px; }
	.cc-visit-map .cc-visit-map__slot { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; row-gap: 2px; }
	.cc-visit-map .cc-visit-map__day { grid-column: 1; }
	.cc-visit-map .cc-visit-map__time { grid-column: 2; font-variant-numeric: tabular-nums; white-space: nowrap; }
	.cc-visit-map .cc-visit-map__label { grid-column: 3; }
	.cc-visit-map :is(.is-next, .is-now) :is(.cc-visit-map__day, .cc-visit-map__time) { color: var(--color-sec, currentColor); }
	.cc-visit-map .cc-visit-map__slot .ccv-flag, .cc-visit-map :is(.is-next, .is-now) .ccv-flag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	@media (max-width: 480px) {
		.cc-visit-map .cc-visit-map__times { grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; }
		.cc-visit-map .cc-visit-map__label { grid-column: 2; grid-row: 2; }
	}
}

.cc-visit-map__time-note { flex-basis: 100%; grid-column: 1 / -1; }