.ax-loc-times { position: relative; background: var(--ax-ink); }
.ax-loc-times__stage { position: relative; }
.ax-loc-times__intro { display: none; }
.ax-loc-times__map {
  position: relative;
  height: min(88svh, 820px);
  min-height: 520px;
  overflow: hidden;
}
.ax-loc-times__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.ax-loc-times__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: clamp(26px, 4vw, 56px) var(--ax-gutter);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,24,51,.8), rgba(20,24,51,.28) 46%, transparent 78%);
  width: min(760px, 72%);
  z-index: 2;
}
.ax-loc-times__eyebrow { display: block; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ax-steel); margin-bottom: var(--ax-label-gap); }
.ax-loc-times__eyebrow-mark { display: inline-flex; align-items: center; gap: 9px; vertical-align: -1px; margin-right: 9px; }
.ax-loc-times__eyebrow-mark svg { width: 9px; height: 7.2px; fill: currentColor; }
.ax-loc-times__heading { font-weight: 300; margin: 0; color: var(--ax-paper); font-size: clamp(30px, 3.4vw, 58px); line-height: .98; letter-spacing: -.03em; max-width: 20ch; }
.ax-loc-times__panel {
  position: absolute;
  left: var(--ax-gutter);
  right: var(--ax-gutter);
  bottom: clamp(22px, 3vw, 44px);
  z-index: 2;
  color: var(--ax-paper);
  border-radius: 16px;
  background: rgba(20,26,58,.66);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(244,241,235,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px);
  transition: padding .56s cubic-bezier(.16, 1, .3, 1);
}

/*
 * Pasek czasów leży na mapie i zabiera jej dolną trzecią część - a mapa jest
 * tu treścią, nie tłem. Panel składa się więc do własnego nagłówka: wiersz
 * „Czas dojścia od budynku · 0-10 min" zostaje jako uchwyt, reszta znika.
 *
 * Wysokość bierze się z treści, dlatego wystarczy animować wiersz siatki
 * z 1fr do 0fr - bez mierzenia pikseli w skrypcie i bez skoku na końcu.
 */
.ax-loc-times__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; font-size: 9px; font-weight: 500; letter-spacing: .19em; text-transform: uppercase; color: rgba(244,241,235,.45); transition: margin-bottom .56s cubic-bezier(.16, 1, .3, 1); }
.ax-loc-times__panel-aside { display: flex; align-items: center; gap: 14px; }
.ax-loc-times__tog {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(244,241,235,.24);
  background: rgba(244,241,235,.07);
  color: var(--ax-paper);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.ax-loc-times__tog svg { width: 15px; height: 15px; display: block; transition: transform .56s cubic-bezier(.16, 1, .3, 1); }
.ax-loc-times__tog:hover { background: var(--ax-paper); border-color: var(--ax-paper); color: var(--ax-ink); }
.ax-loc-times__collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .56s cubic-bezier(.16, 1, .3, 1); }
.ax-loc-times__body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; opacity: 1; transition: opacity .34s ease .12s; }

.ax-loc-times__panel.is-collapsed { padding-top: 15px; padding-bottom: 15px; }
.ax-loc-times__panel.is-collapsed .ax-loc-times__panel-head { margin-bottom: 0; cursor: pointer; }
.ax-loc-times__panel.is-collapsed .ax-loc-times__collapse { grid-template-rows: 0fr; }
.ax-loc-times__panel.is-collapsed .ax-loc-times__body { opacity: 0; transition: opacity .18s ease; }
.ax-loc-times__panel.is-collapsed .ax-loc-times__tog svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .ax-loc-times__panel,
  .ax-loc-times__panel-head,
  .ax-loc-times__collapse,
  .ax-loc-times__body,
  .ax-loc-times__tog svg { transition: none; }
}
.ax-loc-times__ruler { position: relative; height: 1px; background: rgba(244,241,235,.2); margin-bottom: 16px; }
.ax-loc-times__ruler span { position: absolute; top: -4px; width: 1px; height: 9px; background: rgba(244,241,235,.3); display: block; }
.ax-loc-times__ruler span:nth-child(1) { left: 0; }
.ax-loc-times__ruler span:nth-child(2) { left: 20%; }
.ax-loc-times__ruler span:nth-child(3) { left: 50%; }
.ax-loc-times__ruler span:nth-child(4) { left: 60%; }
.ax-loc-times__ruler span:nth-child(5) { left: auto; right: 0; }
.ax-loc-times__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: clamp(14px, 2vw, 30px); align-items: start; }
.ax-loc-times__item { display: flex; flex-direction: column; gap: 9px; }
.ax-loc-times__num { display: flex; align-items: baseline; gap: 8px; }
.ax-loc-times__num-val { font-weight: 300; font-size: clamp(38px, 3.8vw, 62px); line-height: .82; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ax-steel-light); }
.ax-loc-times__num-unit { font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,241,235,.45); }
.ax-loc-times__label { font-size: 10.5px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; }
/* Pozycja bez minut trzyma miejsce po liczbie - podpisy całego paska stoją w jednej linii. */
.ax-loc-times__item--plain::before { content: ""; display: block; height: calc(clamp(38px, 3.8vw, 62px) * .82); }
.ax-loc-times__desc { font-size: 12.5px; line-height: 1.6; color: rgba(244,241,235,.5); }
.ax-loc-times__toolbar,
.ax-loc-times__fs {
  display: none !important;
}

/* Desktop: panel overlays map stage */
@media (min-width: 901px) {
  .ax-loc-times__stage {
    position: relative;
    height: min(88svh, 820px);
    min-height: 520px;
  }
  .ax-loc-times__map {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
  }
  .ax-loc-times__panel {
    position: absolute;
  }
}

@media (max-width: 900px) {
  /* Heading above map — frees the full frame for interaction */
  .ax-loc-times__intro {
    display: block;
    padding: var(--ax-sec-pad-s) var(--ax-gutter) clamp(16px, 3vw, 28px);
  }

  .ax-loc-times__intro .ax-loc-times__heading {
    max-width: none;
    font-size: clamp(30px, 8vw, 44px);
  }

  .ax-loc-times__head {
    display: none;
  }

  .ax-loc-times__map {
    height: var(--ax-map-vh, 70svh);
    min-height: 320px;
    max-height: 640px;
  }

  .ax-loc-times__iframe {
    pointer-events: auto;
  }

  .ax-loc-times__panel {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 18px var(--ax-gutter) 0;
    /* Bottom keeps +6 over top: last ruler tick sits on the corner radius and
     * read as flush at 28px. Top matches it optically, not numerically. */
    padding: 34px 20px 40px;
  }

  .ax-loc-times__panel.is-collapsed {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .ax-loc-times__tog {
    width: 34px;
    height: 34px;
  }

  /* S not M — divider owns the next band (--ax-div-pad-top); M stacked as a void. */
  .ax-loc-times__stage {
    padding-bottom: var(--ax-sec-pad-s);
  }

  /* Stack items; vertical time axis beside the list */
  .ax-loc-times__body {
    flex-direction: row;
    align-items: stretch;
    gap: 16px;
  }

  .ax-loc-times__ruler {
    flex: 0 0 1px;
    width: 1px;
    height: auto;
    min-height: 100%;
    margin: 4px 0 0;
    background: rgba(244, 241, 235, 0.2);
  }

  .ax-loc-times__ruler span {
    left: -4px;
    top: auto;
    width: 9px;
    height: 1px;
  }

  .ax-loc-times__ruler span:nth-child(1) { top: 0; left: -4px; right: auto; }
  .ax-loc-times__ruler span:nth-child(2) { top: 20%; left: -4px; right: auto; }
  .ax-loc-times__ruler span:nth-child(3) { top: 50%; left: -4px; right: auto; }
  .ax-loc-times__ruler span:nth-child(4) { top: 60%; left: -4px; right: auto; }
  .ax-loc-times__ruler span:nth-child(5) { top: auto; bottom: 0; left: -4px; right: auto; }

  .ax-loc-times__grid {
    flex: 1 1 auto;
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 22px;
  }
}