/* Keep one live story scene above the header while native page scrolling advances it. */
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  #zgodba :is(.hc-track:not(.hc-static), .rc-track:not(.rc-static), .hb-track, .mg-track) > :is(.hc-stage, .rc-stage, .hb-stage, .mg-stage) {
    position: sticky;
    top: var(--site-header-space, 110px);
    height: calc(100svh - var(--site-header-space, 110px));
    min-height: 0;
    max-height: none;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) minmax(0, 1fr);
    align-content: stretch;
    gap: 6px;
    padding: 12px 0 8px;
  }
  #zgodba :is(.hc-copy, .rc-copy, .hb-copy, .mg-copy) { min-height: 0; min-width: 0; align-self: start; }
  #zgodba :is(.hc-copy, .rc-copy) { display: grid; }
  #zgodba :is(.hc-copy, .rc-copy) article { grid-area: 1 / 1; margin: 0; }
  #zgodba :is(.hc-copy, .rc-copy) article[hidden] { display: none; }
  #zgodba :is(.hc-copy, .rc-copy, .hb-copy, .mg-copy) .eyebrow { margin: 0 0 6px; font-size: 10px; }
  #zgodba :is(.hc-copy, .rc-copy, .hb-copy, .mg-copy) h2 { font-size: 25px; line-height: 1.1; margin: 0 0 8px; }
  #zgodba :is(.hc-copy, .rc-copy, .hb-copy, .mg-copy) p:not(.eyebrow) { font-size: 13px; line-height: 1.4; margin: 0; }
  #zgodba :is(.hc-visual, .rc-visual, .hb-visual, .mg-visual) { grid-row: 2; min-height: 0; min-width: 0; height: 100%; max-height: none; align-self: stretch; }
  #home-cinema .hc-track:not(.hc-static) .hc-visual { overflow: hidden; justify-content: flex-start; }
  #home-cinema .hc-track:not(.hc-static) .hj-world {
    flex: 0 0 340px;
    margin: 0 auto;
  }
  #home-cinema .hc-track:not(.hc-static) .hc-house { width: 100%; max-height: 100%; }
  #home-cinema .hc-track:not(.hc-static) .bivo-home-interior { transform: translateY(-5%); }
  #home-cinema .hc-track:not(.hc-static) .hc-note { margin: -6px 0 0 10%; }
  #rental-cinema .rc-track:not(.rc-static) .rc-visual,
  #long-cinema .rc-track:not(.rc-static) .rc-visual { overflow: hidden; }
  #zgodba :is(.rc-track:not(.rc-static)) .rc-apartment { height: 100%; }
  #zgodba :is(.rc-track:not(.rc-static)) .rc-layers { inset: 0; }
  #zgodba :is(.rc-track:not(.rc-static)) :is(.rc-layer, .tc-layer):not([style*="visibility: visible"]) { pointer-events: none; }
  #hotel-experience .hb-track .hb-stage { padding-inline: 0; }
  #hotel-experience .hb-track .hb-visual { grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
  #hotel-experience .hb-track .hb-panel { max-height: 100%; overflow: auto; }
  #zgodba :is(.hc-bottom, .rc-nav, .hb-nav, .mg-nav) { display: none !important; }
  #home-cinema .hc-track:not(.hc-static) { height: 480svh; }
}
@media (max-width: 760px) and (max-height: 700px) and (prefers-reduced-motion: no-preference) {
  #zgodba :is(.hc-copy, .rc-copy, .hb-copy, .mg-copy) h2 { font-size: 22px; }
  #zgodba :is(.hc-copy, .rc-copy, .hb-copy, .mg-copy) p:not(.eyebrow) { font-size: 12px; line-height: 1.35; }
}

/* Manager story, phones: one authoritative flow layout.
   Stage = copy (with role triangle) + visual; visual = top panel / art frame / bottom panel.
   Only the active scene's callouts are displayed, so inactive ones never take space. */
@media (max-width: 760px) {
  #zgodba #management-experience .mg-track > .mg-stage {
    height: calc(100dvh - var(--site-header-space, 110px));
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    gap: 10px; padding: 10px 0 12px; align-content: stretch;
  }
  #zgodba #management-experience :is(.mg-stage, .mg-static-step) .mg-copy { grid-row: 1; grid-column: 1; align-self: start; }
  #zgodba #management-experience :is(.mg-stage, .mg-static-step) .mg-copy .eyebrow { margin: 0 0 5px; font-size: 10px; }
  #zgodba #management-experience :is(.mg-stage, .mg-static-step) .mg-copy h2 { margin: 0 0 6px; font-size: clamp(21px, 6.4vw, 26px); line-height: 1.1; }
  #zgodba #management-experience :is(.mg-stage, .mg-static-step) .mg-description { margin: 0; font-size: 13px; line-height: 1.38; }

  /* Role triangle: centred community, equal lower cards, an explicit middle band for the shared label. */
  #zgodba #management-experience .mg-role-loop {
    --mg-top-h: 44px; --mg-low-h: 70px; --mg-band: 38px;
    width: min(100%, 350px); height: calc(var(--mg-top-h) + var(--mg-band) + var(--mg-low-h));
    margin: 10px auto 0;
  }
  #zgodba #management-experience .mg-role { box-sizing: border-box; padding: 4px 6px; gap: 2px; }
  #zgodba #management-experience .mg-role--community { top: 0; width: 46%; height: var(--mg-top-h); min-height: 0; }
  #zgodba #management-experience :is(.mg-role--manager, .mg-role--bivo) { bottom: 0; width: 46%; height: var(--mg-low-h); min-height: 0; }
  #zgodba #management-experience .mg-role strong { font-size: 12px; line-height: 1.15; }
  #zgodba #management-experience .mg-role span { font-size: 11px; line-height: 1.2; margin: 0; }
  #zgodba #management-experience .mg-shared-info {
    top: calc(var(--mg-top-h) + (var(--mg-band) - 15px) / 2); font-size: 10.5px; line-height: 15px;
    padding: 0 4px; background: var(--brand-sky); border-radius: 4px;
  }

  /* Visual flow. */
  #zgodba #management-experience .mg-visual {
    --mg-art-ratio: .713; --mg-art-cap: calc((100vw - 72px) * var(--mg-art-ratio));
    position: relative; display: grid; width: 100%; height: 100%; min-height: 0; overflow: hidden;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, var(--mg-art-cap)) auto;
    align-content: center; column-gap: 6px; row-gap: 10px; padding: 0;
  }
  #zgodba #management-experience [data-mg-scene="3"] .mg-visual { --mg-art-ratio: .665; }
  #zgodba #management-experience :is([data-mg-scene="4"], [data-mg-scene="5"]) .mg-visual { --mg-art-ratio: .70; }
  #zgodba #management-experience .mg-visual .mg-overlays { display: contents; }
  #zgodba #management-experience .mg-visual .mg-art-stack {
    position: relative; inset: auto; transform: none; height: auto; min-height: 0;
    grid-row: 2; grid-column: 1 / -1; display: grid; container-type: size;
  }
  /* Each art group is a frame around the visible building (transparent padding cropped, never the building). */
  #zgodba #management-experience .mg-visual .mg-art-group {
    position: relative; inset: auto; grid-area: 1 / 1; place-self: center;
    display: none; overflow: hidden; opacity: 1; visibility: visible; transform: none;
    aspect-ratio: var(--mg-frame); width: min(100cqw, calc(100cqh * var(--mg-frame)));
  }
  #zgodba #management-experience .mg-visual .mg-art-a { --mg-frame: 1197 / 854; }
  #zgodba #management-experience .mg-visual .mg-art-b { --mg-frame: 1199 / 840; }
  #zgodba #management-experience .mg-visual .mg-art-overview { --mg-frame: 1434 / 953; }
  #zgodba #management-experience .mg-visual .mg-art-group img { position: absolute; max-width: none; height: auto; right: auto; bottom: auto; transform: none; }
  #zgodba #management-experience .mg-visual .mg-art-a img { width: 104.76%; left: -2.67%; top: -29.27%; }
  #zgodba #management-experience .mg-visual .mg-art-b img { width: 104.59%; left: -2.67%; top: -27.02%; }
  #zgodba #management-experience .mg-visual .mg-art-overview img { width: 100.98%; left: -.98%; top: -11.33%; }
  #zgodba #management-experience :is([data-mg-scene="0"], [data-mg-scene="1"], [data-mg-scene="2"]) .mg-art-a,
  #zgodba #management-experience [data-mg-scene="3"] .mg-art-overview,
  #zgodba #management-experience :is([data-mg-scene="4"], [data-mg-scene="5"]) .mg-art-b { display: block; }
  /* Markers pinned to the technical room of building A, inside the art frame. */
  #zgodba #management-experience .mg-visual .mg-locator-a { right: 7%; bottom: 13%; width: 30px; height: 36px; }
  #zgodba #management-experience .mg-visual .mg-leak { right: 9%; bottom: 5%; }
  #zgodba #management-experience .mg-visual .mg-building-badge { display: none; }
  #zgodba #management-experience [data-mg-scene="5"] .mg-visual .mg-building-badge {
    display: block; top: 0; left: 0; padding: 4px 9px; font-size: 11px; line-height: 1.3; letter-spacing: .1em; z-index: 2;
  }
  #zgodba #management-experience .mg-visual .mg-leader { display: none; }

  /* Callouts become flow items. */
  #zgodba #management-experience .mg-visual :is(.mg-bubble, .mg-approval-card, .mg-activity) {
    position: relative; inset: auto; display: none; width: auto; min-width: 0; max-width: none; margin: 0;
    grid-column: 1 / -1; opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    animation: mg-mobile-in .28s ease both;
  }
  #zgodba #management-experience [data-mg-scene="0"] .mg-visual :is(.mg-help, .mg-leak-card),
  #zgodba #management-experience [data-mg-scene="2"] .mg-visual .mg-complete,
  #zgodba #management-experience [data-mg-scene="3"] .mg-visual .mg-object-status,
  #zgodba #management-experience [data-mg-scene="4"] .mg-visual .mg-device,
  #zgodba #management-experience [data-mg-scene="5"] .mg-visual :is(.mg-service, .mg-coordinates) { display: flex; }
  #zgodba #management-experience [data-mg-scene="1"] .mg-visual .mg-approval-card,
  #zgodba #management-experience [data-mg-scene="2"] .mg-visual .mg-proof-group,
  #zgodba #management-experience [data-mg-scene="4"] .mg-visual .mg-library { display: grid; }
  #zgodba #management-experience [data-mg-scene="3"] .mg-visual .mg-activity { display: block; }
  #zgodba #management-experience .mg-visual :is(.mg-help, .mg-proof-group, .mg-library, .mg-service) { grid-row: 1; }
  #zgodba #management-experience .mg-visual :is(.mg-leak-card, .mg-approval-card, .mg-complete, .mg-activity, .mg-device, .mg-coordinates) { grid-row: 3; }
  #zgodba #management-experience .mg-visual .mg-bubble { gap: 10px; padding: 9px 12px; border-radius: 12px; }
  #zgodba #management-experience .mg-visual .mg-bubble strong { font-size: 14px; line-height: 1.18; }
  #zgodba #management-experience .mg-visual .mg-bubble span { font-size: 12px; line-height: 1.25; margin-top: 2px; }
  #zgodba #management-experience .mg-visual .mg-library { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 4px; }
  #zgodba #management-experience .mg-visual .mg-library-item { min-width: 0; padding: 0 4px; gap: 3px; }
  #zgodba #management-experience .mg-visual .mg-library-item strong { font-size: 12px; }
  #zgodba #management-experience .mg-visual .mg-proof-group { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 4px; }
  #zgodba #management-experience .mg-visual .mg-proof-item strong { font-size: 12px; }
  #zgodba #management-experience .mg-visual .mg-device > span { margin: 0; font-size: 12px; letter-spacing: .03em; }
  /* Scene 04: three aligned status cards, each above its label in the overview. */
  #zgodba #management-experience .mg-visual .mg-object-status {
    grid-row: 1; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 7px 4px; text-align: center;
  }
  #zgodba #management-experience .mg-visual .mg-status-a { grid-column: 1; }
  #zgodba #management-experience .mg-visual .mg-status-b { grid-column: 2; }
  #zgodba #management-experience .mg-visual .mg-status-c { grid-column: 3; }
  #zgodba #management-experience .mg-visual .mg-object-status > b { font-size: 15px; line-height: 1; }
  #zgodba #management-experience .mg-visual .mg-object-status > strong { font-size: 11.5px; line-height: 1.15; white-space: normal; }
  #zgodba #management-experience .mg-visual .mg-object-status .mg-bubble-icon,
  #zgodba #management-experience .mg-visual .mg-status-b i { width: 22px; height: 22px; }
  #zgodba #management-experience .mg-visual .mg-activity { border-radius: 12px; }
  /* Scene 02: compact approval with price beside the title. */
  #zgodba #management-experience .mg-visual .mg-approval-card {
    grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; row-gap: 2px; padding: 10px 12px; border-radius: 12px;
  }
  #zgodba #management-experience .mg-visual .mg-approval-top { grid-column: 1 / -1; }
  #zgodba #management-experience .mg-visual .mg-approval-top :is(small, span) { font-size: 10.5px; }
  #zgodba #management-experience .mg-visual .mg-approval-card > strong { font-size: 16px; }
  #zgodba #management-experience .mg-visual .mg-approval-card > b { font-size: 22px; }
  #zgodba #management-experience .mg-visual .mg-approval-card .mg-approve { grid-column: 1 / -1; min-height: 44px; margin-top: 6px; padding-block: 8px; font-size: 16px; }
  #zgodba #management-experience .mg-visual .mg-approval-card .mg-approval-feedback { grid-column: 1 / -1; font-size: 12px; margin: 2px 0 0; }

  /* Reduced motion: every scene is a natural-height card with the same flow. */
  #zgodba #management-experience .mg-static-step .mg-visual { height: auto; min-height: 0; --mg-art-cap: calc((100vw - 72px) * var(--mg-art-ratio)); grid-template-rows: auto var(--mg-art-cap) auto; }
  #zgodba #management-experience .mg-static-step .mg-visual :is(.mg-bubble, .mg-approval-card, .mg-activity) { animation: none; }
}
@keyframes mg-mobile-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) and (max-height: 700px) {
  #zgodba #management-experience .mg-track > .mg-stage { gap: 6px; padding-top: 8px; padding-bottom: 8px; }
  #zgodba #management-experience .mg-stage .mg-copy h2 { font-size: 21px; margin-bottom: 4px; }
  #zgodba #management-experience .mg-stage .mg-description { font-size: 12px; line-height: 1.3; }
  #zgodba #management-experience .mg-stage .mg-role-loop { --mg-top-h: 40px; --mg-low-h: 64px; --mg-band: 32px; margin-top: 6px; }
  #zgodba #management-experience .mg-stage .mg-visual { row-gap: 8px; }
  #zgodba #management-experience .mg-stage .mg-visual .mg-bubble { padding: 7px 10px; }
  #zgodba #management-experience .mg-stage .mg-visual .mg-activity-row { min-height: 33px; padding-block: 2px; }
  #zgodba #management-experience .mg-stage .mg-visual .mg-activity-head { padding: 7px 12px 6px; }
}
/* Very short landscape: copy + triangle left, the same visual flow right. */
@media (orientation: landscape) and (max-width: 760px) and (max-height: 500px) {
  #zgodba #management-experience .mg-track > .mg-stage { grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); grid-template-rows: minmax(0, 1fr); gap: 14px; padding: 6px 0; }
  #zgodba #management-experience .mg-stage .mg-visual { grid-row: 1; grid-column: 2; --mg-art-cap: 100%; row-gap: 6px; }
  #zgodba #management-experience .mg-stage .mg-copy h2 { font-size: 17px; }
  #zgodba #management-experience .mg-stage .mg-description { font-size: 11.5px; }
  #zgodba #management-experience .mg-stage .mg-role-loop { --mg-top-h: 34px; --mg-low-h: 82px; --mg-band: 26px; width: 100%; margin-top: 4px; }
  #zgodba #management-experience .mg-stage .mg-role { padding: 3px 5px; }
  #zgodba #management-experience .mg-stage .mg-role strong { font-size: 11px; }
  #zgodba #management-experience .mg-stage .mg-role span { font-size: 10.5px; line-height: 1.12; }
  #zgodba #management-experience .mg-stage .mg-visual .mg-object-status { flex-direction: row; gap: 5px; padding: 4px 6px; }
  #zgodba #management-experience .mg-stage .mg-visual .mg-object-status > strong { font-size: 10.5px; text-align: left; }
  #zgodba #management-experience .mg-stage .mg-visual .mg-object-status .mg-bubble-icon,
  #zgodba #management-experience .mg-stage .mg-visual .mg-status-b i { width: 16px; height: 16px; flex: none; }
  #zgodba #management-experience .mg-stage .mg-visual .mg-activity-head { padding: 4px 10px; }
  #zgodba #management-experience .mg-stage .mg-visual .mg-activity-head > strong { font-size: 13px; }
  #zgodba #management-experience .mg-stage .mg-visual .mg-activity-row { min-height: 26px; font-size: 10.5px; }
  #zgodba #management-experience .mg-stage .mg-visual .mg-activity-rows { margin-top: 2px; }
  /* Stage 04: copy + activity summary left, A/B/C statuses + overview right. */
  #zgodba #management-experience .mg-track > .mg-stage[data-mg-scene="3"] .mg-copy { position: relative; z-index: 2; }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual {
    grid-row: 1; grid-column: 1 / -1; column-gap: 6px; row-gap: 6px; align-content: stretch;
    grid-template-columns: minmax(0, 44fr) repeat(3, minmax(0, 18fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual .mg-art-stack { grid-column: 2 / -1; grid-row: 2 / 4; }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual .mg-status-a { grid-column: 2; }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual .mg-status-b { grid-column: 3; }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual .mg-status-c { grid-column: 4; }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual .mg-activity { grid-column: 1; grid-row: 3; margin-right: 8px; align-self: end; }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual .mg-activity-row { grid-template-columns: 16px 16px minmax(0, 1fr) auto; gap: 4px; padding: 2px 6px; font-size: 10.5px; }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual .mg-activity-row > b { width: 16px; height: 16px; font-size: 10px; }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual .mg-activity-state { font-size: 10.5px; gap: 3px; }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual :is(.mg-activity-icon, .mg-activity-state) svg,
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual .mg-activity-wait i { width: 14px; height: 14px; }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual .mg-object-status { flex-direction: column; gap: 2px; padding: 4px 3px; }
  #zgodba #management-experience .mg-stage[data-mg-scene="3"] .mg-visual .mg-object-status > strong { text-align: center; font-size: 10.5px; }
}