/* Phone presentation rhythm: taller screens gain space between ideas.
   Every pinned chapter remains one native reader when its content is longer
   than the viewport; footer placement never overlaps the current frame. */
@media screen and (max-width:760px) {
  #put,
  #lokalno,
  #aeo,
  #sadrzaj,
  #plan {
    --mobile-space:clamp(18px,calc(8dvh - 42px),44px);
    --mobile-space-small:clamp(12px,calc(4dvh - 18px),26px);
    --mobile-space-medium:clamp(20px,calc(5dvh - 20px),34px);
    --mobile-safe-bottom:max(20px,env(safe-area-inset-bottom));
  }

  #put.journey-flow .journey-pin,
  #lokalno.local-motion .local-pin,
  #aeo.aeo-motion .aeo-pin,
  #sadrzaj.content-process .content-pin,
  #plan .plan-pin {
    display:flex;
    flex-direction:column;
    padding-top:calc(var(--header,64px) + var(--mobile-space-small));
    padding-bottom:var(--mobile-safe-bottom);
    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  #put.journey-flow .journey-pin > *,
  #lokalno.local-motion .local-pin > *,
  #aeo.aeo-motion .aeo-pin > *,
  #sadrzaj.content-process .content-pin > *,
  #plan .plan-pin > * { flex-shrink:0; }

  #put.journey-flow .journey-pin > .section-label,
  #lokalno.local-motion .local-pin > .section-label,
  #sadrzaj.content-process .content-pin > .section-label,
  #plan .plan-pin > .section-label { margin-bottom:var(--mobile-space-medium); }

  /* Give the route, form and its takeaway separate beats. On a short phone
     the whole chapter scrolls naturally, including the evidence control. */
  #put.journey-flow .journey-stage {
    flex:1 0 auto;
    min-height:min-content;
    justify-content:center;
    gap:var(--mobile-space);
    padding:var(--mobile-space-small) 2px var(--mobile-space);
    overflow:visible;
  }
  #put.journey-flow .journey-tabs { min-height:74px; }
  #put.journey-flow .journey-tab { gap:10px; }
  #put.journey-flow .concept-screen {
    padding:var(--mobile-space-medium) 18px;
  }
  #put.journey-flow .screen-content { gap:var(--mobile-space-medium); }
  #put.journey-flow .concept-screen h4,
  #put.journey-flow .concept-screen[data-screen="2"] h4,
  #put.journey-flow .concept-screen[data-screen="3"] h4 {
    margin-bottom:var(--mobile-space-small);
  }
  #put.journey-flow .journey-panel p { margin-top:var(--mobile-space-small); }
  #put.journey-flow .scene-bottom {
    margin-top:auto;
    padding-top:var(--mobile-space-small);
  }

  /* A taller window reveals more geography without changing the map's
     projection, coordinates, north-to-south camera stops or pin positions. */
  #lokalno.local-motion .local-theater { gap:var(--mobile-space-medium); }
  #lokalno.local-motion .map-window {
    height:clamp(240px,38dvh,420px);
    margin:0 -20px;
  }
  #lokalno.local-motion .local-step { margin-bottom:var(--mobile-space-small); }
  #lokalno.local-motion .local-frame > p { margin-top:var(--mobile-space-small); }
  #lokalno.local-motion .local-query { margin-top:var(--mobile-space-small); }
  #lokalno.local-motion .story-bottom {
    margin-top:auto;
    padding-top:var(--mobile-space);
  }
  #lokalno.local-motion .story-bottom > .text-button { margin-top:var(--mobile-space-small); }

  /* The demonstration is a single clear vertical sequence. The closing
     note uses leftover height only; it follows the sequence on short phones. */
  #aeo.aeo-motion .aeo-theater {
    flex:1 0 auto;
    justify-content:center;
    gap:var(--mobile-space-medium);
    padding:var(--mobile-space) 0;
    overflow:visible;
  }
  #aeo.aeo-motion .aeo-process-scene { gap:var(--mobile-space-small); }
  #aeo.aeo-motion .aeo-question p { margin-top:var(--mobile-space-small); }
  #aeo.aeo-motion .aeo-example-card { padding:var(--mobile-space-medium) 20px; }
  #aeo.aeo-motion .aeo-card-label { margin-bottom:var(--mobile-space-small); }
  #aeo.aeo-motion .aeo-illustration-label { margin-top:var(--mobile-space-small); }
  #aeo.aeo-motion .aeo-step-copy { gap:var(--mobile-space-small) 10px; }
  #aeo.aeo-motion .aeo-bottom { margin-top:auto; }
  #aeo.aeo-motion .aeo-closing {
    padding-top:var(--mobile-space-small);
    gap:8px 14px;
  }

  /* Keep the overview, current month and calendar footer visibly distinct. */
  #sadrzaj.content-process .content-heading { gap:var(--mobile-space-small); }
  #sadrzaj.content-process .content-plan-subtitle { margin-top:var(--mobile-space-small); }
  #sadrzaj.content-process .month-tabs { margin-top:var(--mobile-space-medium); }
  #sadrzaj.content-process .editorial-stage {
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    padding:var(--mobile-space-medium) 0;
    overflow:visible;
  }
  #sadrzaj.content-process .month-caption { margin-bottom:var(--mobile-space-small); }
  #sadrzaj.content-process .month-panel h3 { margin-bottom:var(--mobile-space-small); }
  #sadrzaj.content-process .month-topics { margin-top:var(--mobile-space-small); }
  #sadrzaj.content-process .month-topics li { padding-top:12px;margin-top:12px; }
  #sadrzaj.content-process .cadence-row { margin-top:var(--mobile-space-small); }
  #sadrzaj.content-process .content-footnote {
    margin-top:auto;
    padding-top:var(--mobile-space-small);
  }
  #sadrzaj.content-process .content-footnote .text-button { margin-top:8px; }

  /* The active phase occupies the center; its assurance remains at the end. */
  #plan .plan-intro > span { margin-top:var(--mobile-space-small); }
  #plan .plan-theater {
    flex:1 0 auto;
    justify-content:center;
    gap:var(--mobile-space);
    padding:var(--mobile-space) 2px;
    overflow:visible;
  }
  #plan .phase-label { margin-bottom:var(--mobile-space-medium); }
  #plan .phase-content p { margin-top:var(--mobile-space-small); }
  #plan .phase-content > span:last-child { margin-top:var(--mobile-space-small); }
  #plan .scene-bottom {
    margin-top:auto;
    padding-top:var(--mobile-space-small);
  }
}

@media screen and (max-width:760px) and (max-height:700px) {
  #lokalno.local-motion .map-window { height:210px; }
  #put.journey-flow .journey-stage,
  #aeo.aeo-motion .aeo-theater,
  #sadrzaj.content-process .editorial-stage,
  #plan .plan-theater { justify-content:flex-start; }
  #put.journey-flow .concept-screen { padding:20px 16px; }
}