/* All presentation changes are phone-only. Tablet/desktop remain byte-for-byte
   on their existing styles, including headings, navigation and attribution. */
@media (max-width: 767px) {
  .wc300-map-experience.has-mobile-route-header .wc300-mobile-nav-slot {
    position: relative; top: 0; z-index: 12; display: grid;
    grid-template-columns: minmax(0,1fr) 44px; align-items: center; gap: 2px;
    padding: 12px 8px calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 24px 24px 0 0;
    background: var(--wc300-forest); border-bottom: 1px solid #ffffff20;
  }
  .wc300-map-experience.has-mobile-route-header.is-sheet-collapsed .wc300-mobile-nav-slot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .wc300-map-experience.has-mobile-route-header .wc300-route-nav {
    display: grid; visibility: visible; grid-template-columns: 44px minmax(0,1fr) 44px;
    align-items: center; gap: 2px; margin: 0; border: 0; box-shadow: none;
  }
  .wc300-map-experience.has-mobile-route-header .wc300-route-nav > button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; }
  /* Existing inline paths are Lucide arrow-left / arrow-right. */
  .wc300-map-experience.has-mobile-route-header .wc300-route-nav > button svg { width: 22px; height: 22px; stroke-width: 2; }
  .wc300-map-experience.has-mobile-route-header .wc300-mobile-route-heading { display: flex; flex-direction: column; justify-content: center; min-height: 64px; margin: 0; padding: 2px 0 2px 6px; font: inherit; text-wrap: initial; }
  .wc300-map-experience.has-mobile-route-header .wc300-route-picker__trigger { width: 100%; min-height: 56px; padding: 4px 6px !important; background: transparent !important; border: 0 !important; }
  .wc300-map-experience.has-mobile-route-header .wc300-route-picker__eyebrow { display: block; margin: 0 0 2px; font: 500 12px/1.35 Roboto,Arial,sans-serif; letter-spacing: 0; text-transform: none; color: #d3dfd8; }
  .wc300-map-experience.has-mobile-route-header .wc300-route-picker__value { grid-template-columns: minmax(0,1fr); align-items: center; gap: 0; }
  .wc300-map-experience.has-mobile-route-header .wc300-route-picker__value strong { display: block; min-height: 0; font: 600 16px/1.25 'Roboto Serif',Georgia,serif; white-space: normal; overflow-wrap: anywhere; color: var(--wc300-sun); }
  .wc300-map-experience.has-mobile-route-header .wc300-mobile-route-heading[aria-label='Ardnamurchan → Corran Ferry'] strong {
    font-size: clamp(13.5px, calc(5vw - 5.25px), 16px);
    letter-spacing: -0.3px;
  }
  .wc300-map-experience.has-mobile-route-header .wc300-route-picker__value > svg,
  .wc300-map-experience.has-mobile-route-header [data-action='section-menu'],
  .wc300-map-experience.has-mobile-route-header .wc300-section-menu { display: none !important; }
  .wc300-map-experience.has-mobile-route-header .wc300-route-nav > button { background: #ffffff12 !important; color: #fffdf8 !important; }
  .wc300-map-experience.has-mobile-route-header .wc300-sheet-toggle,
  .wc300-map-experience.has-mobile-route-header.is-sheet-collapsed .wc300-sheet-toggle {
    width: 44px !important; min-width: 44px !important; min-height: 44px !important;
    height: 44px; margin: 0; padding: 0 !important; justify-content: center;
    border: 1px solid #ffffff50 !important; border-radius: 50%; background: transparent !important; color: #fffdf8 !important;
  }
  .wc300-map-experience.has-mobile-route-header .wc300-sheet-toggle > span:first-child,
  .wc300-map-experience.has-mobile-route-header .wc300-sheet-summary,
  .wc300-map-experience.has-mobile-route-header [data-role='sheet-affordance'] { display: none; }
  .wc300-map-experience.has-mobile-route-header .wc300-sheet-affordance { color: #fffdf8; }
  .wc300-map-experience.has-mobile-section [data-role='panel'] > h2,
  .wc300-map-experience.has-mobile-briefing [data-role='panel'] > .wc300-practical-card { display: none; }
  .wc300-map-experience.has-mobile-route-header [data-role='panel'] { padding: 16px 18px 28px; }
  .wc300-map-experience.has-mobile-route-header .wc300-panel-lead { margin: 0 0 18px; font-size: 16px; line-height: 1.5; }
  .wc300-map-experience .wc300-mobile-briefing { display: grid; gap: 14px; margin: 0; padding: 0; color: var(--wc300-ink); }
  .wc300-map-experience .wc300-mobile-briefing > div { padding-top: 12px; border-top: 1px solid #e0e5dc; }
  .wc300-map-experience .wc300-mobile-briefing dt { font: 600 15px/1.35 Roboto,Arial,sans-serif; margin: 0 0 4px; text-transform: none; letter-spacing: 0; }
  .wc300-map-experience .wc300-mobile-briefing dd { font: 400 16px/1.5 Roboto,Arial,sans-serif; margin: 0; color: #41564f; }
  .wc300-map-experience .wc300-mobile-actions [data-role='section-guide'] { background: var(--wc300-forest); color: #fffdf8; font-weight: 600; }
  .wc300-map-experience .wc300-mobile-actions .wc300-panel-actions { flex-wrap: wrap; }
  .wc300-map-experience .wc300-map-tools { top: 12px; right: max(12px,env(safe-area-inset-right,0px)); left: auto; }
  .wc300-map-experience .wc300-tool-button.wc300-tools-trigger { min-height: 44px; padding: 8px; gap: 5px; box-shadow: none; background: #fffdf8e8 !important; }
  .wc300-map-experience .wc300-tools-menu { right: 0; left: auto; }
  /* The actual provider control remains, in readable text rather than a large
     floating info button. Mapbox branding remains at the lower left. */
  .wc300-map-experience .mapboxgl-ctrl-bottom-right,
  .wc300-map-experience.is-sheet-collapsed .mapboxgl-ctrl-bottom-right,
  .wc300-map-experience.is-popover-open .mapboxgl-ctrl-bottom-right,
  .wc300-map-experience.is-cua-entry:not(.is-sheet-collapsed) .mapboxgl-ctrl-bottom-right {
    top: auto !important; bottom: 18px !important; right: 4px; max-width: calc(100% - 116px);
  }
  .wc300-map-experience .mapboxgl-ctrl-attrib { max-width: 100%; margin: 0 6px 0 0; background: #fffdf8e8; border-radius: 5px; }
  .wc300-map-experience .mapboxgl-ctrl-attrib-inner { padding: 2px 5px; font-size: 11px; line-height: 1.5; text-align: right; }
  .wc300-map-experience .mapboxgl-ctrl-attrib a { color: #344e46; text-decoration: underline; }
}

@media (max-width: 767px) {
  .wc300-map-experience.has-mobile-route-header .wc300-map-panel,
  .wc300-map-experience.has-mobile-route-header.is-sheet-collapsed .wc300-map-panel {
    height: var(--wc300-open-drawer-height, 52%) !important;
    transform: translateY(0); transition: transform 260ms cubic-bezier(.22,.75,.25,1);
  }
  .wc300-map-experience.has-mobile-route-header.is-sheet-collapsed .wc300-map-panel {
    transform: translateY(calc(100% - var(--wc300-drawer-header-height, 87px)));
  }
  .wc300-map-experience.has-mobile-route-header.is-sheet-collapsed .wc300-map-panel [data-role='panel'] {
    display: block; padding: 16px 18px 28px;
  }
  .wc300-map-experience.has-mobile-route-header.is-sheet-collapsed .wc300-mobile-actions:not(:empty) { display: block; }
  .wc300-map-experience.has-mobile-route-header [data-role='panel'],
  .wc300-map-experience.has-mobile-route-header [data-role='mobile-actions'] { visibility: visible; transition: visibility 0s; }
  .wc300-map-experience.has-mobile-route-header.is-sheet-collapsed [data-role='panel'],
  .wc300-map-experience.has-mobile-route-header.is-sheet-collapsed [data-role='mobile-actions'] { visibility: hidden; transition-delay: 260ms; }
  .wc300-map-experience.has-mobile-route-header.is-sheet-collapsed .wc300-mobile-nav-slot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .wc300-map-experience.has-mobile-route-header .wc300-map-panel { transition: none; }
  .wc300-map-experience.has-mobile-route-header.is-sheet-collapsed [data-role] { transition-delay: 0s; }
}

@media (max-width: 767px) {
  .wc300-map-experience .wc300-mode-switch {
    position: relative; display: grid; grid-template-columns: 34% 66%;
    width: min(248px, calc(100vw - 112px)); padding: 3px; border-radius: 999px;
    isolation: isolate;
  }
  .wc300-map-experience .wc300-mode-switch::before {
    content: ''; position: absolute; z-index: -1; top: 3px; bottom: 3px;
    left: 3px; width: calc((100% - 6px) * .34); border-radius: 999px;
    background: #fffdf8; transition: left 180ms ease, width 180ms ease;
  }
  .wc300-map-experience.is-ahead .wc300-mode-switch::before {
    left: calc(3px + (100% - 6px) * .34); width: calc((100% - 6px) * .66);
  }
  .wc300-map-experience .wc300-mode-switch button { border-radius: 999px; background: transparent !important; padding: 8px 4px; }
  .wc300-map-experience .mapboxgl-ctrl-group button {
    width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; padding: 0 !important;
  }
  .wc300-map-experience .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon { background-size: 22px 22px; }
  .wc300-map-experience .mapboxgl-ctrl-attrib.mapboxgl-compact {
    min-width: 32px; min-height: 32px; padding: 0 32px 0 0; border-radius: 16px;
  }
  .wc300-map-experience .mapboxgl-ctrl-attrib-button {
    width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important;
    background-size: 20px 20px !important; background-color: #fffdf8e8 !important;
  }
  .wc300-map-experience .mapboxgl-ctrl-attrib.mapboxgl-compact-show { padding: 32px 0 0; max-width: 190px; border-radius: 12px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .wc300-map-experience .wc300-mode-switch::before { transition: none; }
}

/* A stationary application shell; only the middle grid track can scroll.
   No map dimension depends on the drawer's position or content length. */
@media (max-width: 767px) {
  html.wc300-mobile-map-active,
  html.wc300-mobile-map-active body.wc300-map-page {
    overflow: hidden !important; overscroll-behavior: none;
  }
  html.wc300-mobile-map-active .wc300-map-experience {
    position: fixed; top: var(--wc300-app-top, 68px); left: 0; right: 0; bottom: auto;
    height: var(--wc300-mobile-height, calc(100dvh - 68px)) !important;
    min-height: 0; padding: 0 !important; overflow: hidden;
  }
  .wc300-map-experience .wc300-map-experience__map,
  .wc300-map-experience .wc300-map-experience__shade,
  .wc300-map-experience .wc300-map-endpoints { height: 100%; bottom: 0; }
  .wc300-map-experience .wc300-map-panel,
  .wc300-map-experience.is-popover-open .wc300-map-panel,
  .wc300-map-experience.is-ahead .wc300-map-panel,
  .wc300-map-experience.is-cua-entry .wc300-map-panel {
    position: absolute; inset: auto 0 0; margin: 0;
    height: var(--wc300-open-drawer-height, 52%) !important; max-height: 100%;
    min-height: 0; display: flex; flex-direction: column; overflow: visible;
  }
  .wc300-map-experience.is-sheet-collapsed .wc300-map-panel {
    height: auto !important;
  }
  .wc300-map-experience .wc300-mobile-nav-slot,
  .wc300-map-experience .wc300-sheet-toggle { flex: 0 0 auto; }
  .wc300-map-experience .wc300-map-panel [data-role='panel'] {
    flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
    scroll-padding-block: 16px; outline-offset: -3px !important;
  }
  .wc300-map-experience .wc300-mobile-actions:not(:empty) {
    position: relative; inset: auto; flex: 0 0 auto;
  }
  .wc300-map-experience .wc300-mobile-actions:empty { display: none; }
  .wc300-map-experience .mapboxgl-ctrl-bottom-left,
  .wc300-map-experience .mapboxgl-ctrl-bottom-right,
  .wc300-map-experience.is-sheet-collapsed .mapboxgl-ctrl-bottom-right,
  .wc300-map-experience.is-popover-open .mapboxgl-ctrl-bottom-right,
  .wc300-map-experience.is-cua-entry:not(.is-sheet-collapsed) .mapboxgl-ctrl-bottom-right {
    bottom: calc(var(--wc300-overlay-height, 112px) + 6px) !important;
  }
  .wc300-map-experience .wc300-section-menu,
  .wc300-map-experience .wc300-layer-popover,
  .wc300-map-experience .wc300-pack-popover,
  body.wc300-map-page .elementor-location-header .elementor-nav-menu--dropdown {
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
}