/* Story content owns the full stage; progress lives in the page gutter. */
#zgodba .hc-bottom,
#zgodba .story-step-nav { display: none !important; }

.bivo-story-progress {
  position: fixed;
  z-index: 20;
  right: max(4px, calc((100vw - 1360px) / 2));
  top: calc((100svh + var(--site-header-space, 80px)) / 2);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 44px;
  padding: 0;
}
.bivo-story-progress[hidden] { display: none; }
.bivo-story-progress button {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 44px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
}
.bivo-story-progress button::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b2c4d9;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.bivo-story-progress button[aria-current="step"]::after {
  background: var(--blue);
  transform: scale(1.4);
  box-shadow: 0 0 0 4px #225ecf14;
}
.bivo-story-progress button:hover::after { background: var(--blue); }
.bivo-story-progress button:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }

@media (min-width: 761px) {
  .bivo-story-progress {
    right: max(4px, calc((100vw - 1528px) / 2));
    top: calc(var(--site-header-space, 80px) + min(calc(100svh - var(--site-header-space, 80px)), 880px) / 2);
  }
  #zgodba {
    --desktop-story-stage: min(calc(100svh - var(--site-header-space, 80px)), 880px);
    padding-inline: clamp(28px, 5vw, 92px);
  }
  #zgodba .story-inner { width: 100%; max-width: 1440px; }
  #home-cinema .hc-track:not(.hc-static) > .hc-stage,
  #rental-cinema .rc-track:not(.rc-static) > .rc-stage,
  #long-cinema .rc-track:not(.rc-static) > .rc-stage,
  #hotel-experience .hb-track > .hb-stage,
  #management-experience .mg-track > .mg-stage {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    align-items: center;
    width: 100%;
    max-width: none;
    height: var(--desktop-story-stage);
    padding-top: 24px;
    padding-bottom: 24px;
    row-gap: 0;
    overflow: visible;
  }
  #rental-cinema .rc-track:not(.rc-static) .rc-visual,
  #long-cinema .rc-track:not(.rc-static) .rc-visual,
  #hotel-experience .hb-track .hb-visual {
    height: 100%;
    max-height: 600px;
    min-height: 0;
    align-self: center;
    overflow: visible;
  }
  #hotel-experience .hb-track .hb-visual { max-height: 540px; grid-template-rows: minmax(0, 1fr) auto; }
  #home-cinema .hc-track:not(.hc-static) { height: calc(var(--desktop-story-stage) * 5); }
  #rental-cinema .rc-track:not(.rc-static) { height: calc(var(--desktop-story-stage) * 5.7); }
  #long-cinema .rc-track:not(.rc-static) { height: calc(var(--desktop-story-stage) * 5.5); }
  #hotel-experience .hb-track { height: calc(var(--desktop-story-stage) * 5.7); }
  #management-experience .mg-track { height: calc(var(--desktop-story-stage) * 6); }
}

/* Hidden animation layers must not impose their intrinsic height on the stage. */
#rental-cinema .rc-layers,
#long-cinema .rc-layers { inset: 16px 0; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
#rental-cinema .rc-layer,
#long-cinema .tc-layer { min-width: 0; max-width: 100%; }
#long-cinema .claim-attachment > div { min-width: 0; overflow-wrap: anywhere; }
#long-cinema .tc-owner-notification { bottom: 0; }
#rental-cinema .rc-plan-layer { margin-bottom: 0; }
#rental-cinema .rc-record,
#long-cinema :is(.tc-plan, .tc-report, .tc-owner-notification, .tc-history, .claim-document) { max-width: 100%; }
#rental-cinema .rc-guest-entry {
  height: min(460px, calc(100svh - var(--site-header-space, 90px) - 160px));
  min-height: 0;
}
#rental-cinema .rc-guest-entry .rc-phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
}
#rental-cinema .rc-sent .rc-guest-entry .rc-phone { transform: translate(-50%, -50%) scale(.93); }
#rental-cinema .rc-static-example .rc-guest-entry { height: auto; }
#rental-cinema .rc-static-example .rc-guest-entry .rc-phone {
  position: relative;
  inset: auto;
  transform: none;
  margin: auto;
  opacity: 1;
}

/* Scope card headings so the old hotel section heading rule cannot enlarge them. */
#hotel-experience .ha-plan-card > h3,
#hotel-experience .ha-incident-card > h3 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 0 0 20px;
}
#hotel-experience .ha-incident-card > h3 { margin-top: 14px; }
#hotel-experience .ha-plan-card > div { padding-block: 13px; }
#hotel-experience .ha-plan-card > div strong,
#hotel-experience .ha-plan-card > div .ha-plan-date { font-size: 13px; }
#hotel-experience .ha-plan-card > p { font-size: 12px; }
#hotel-experience .ha-plan-card > small,
#hotel-experience .ha-incident-card > small { font-size: 11px; }
#hotel-experience .hb-visual { grid-template-rows: minmax(0, 1fr) max-content; }
#hotel-experience .hb-panel { width: 100%; max-width: 350px; justify-self: center; align-self: end; }
#hotel-experience .hb-stage[data-hb-chapter="2"] .hb-panel { display: none; }

/* Small scene annotations use the same white surface as the larger cards. */
#home-cinema .repair-caption,
#rental-cinema .rc-work-label,
#hotel-experience :is(.ha-service, .ha-repair-caption) {
  background: #fff;
  border: 1px solid #dce5ed;
  border-radius: 14px;
  box-shadow: 0 12px 32px #00315309;
}
#rental-cinema .rc-work-label {
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  padding: 12px 18px;
}
#hotel-experience .ha-repair-caption { padding: 16px 20px; }
#hotel-experience .ha-unit-context {
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #dce5ed;
  border-radius: 8px;
  box-shadow: 0 5px 16px #00315306;
}

/* On short or narrow screens, each complete scene has its own natural height. */
#zgodba :is(.hc-static, .rc-static) article,
#zgodba :is(.hb-welcome-static, .hb-static-stage, .mg-static-step) {
  scroll-margin-top: calc(var(--site-header-space, 80px) + 24px);
}
#hotel-experience .hb-static-stage {
  position: relative;
  top: auto;
  height: auto;
  min-height: 0;
  padding-block: 48px;
  gap: 40px;
}
#hotel-experience .hb-static-stage .hb-visual { height: 540px; min-height: 0; }

@media (max-width: 760px) {
  #zgodba { padding-left: 20px; padding-right: 52px; }
  #zgodba .story-inner { width: 100%; max-width: none; }
  #zgodba .story-ending-shell { left: -20px; width: calc(100% + 72px); transform: none; }
  #hotel-experience .hb-static-stage,
  #hotel-experience .hb-welcome-static { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  #hotel-experience .hb-static-stage .hb-visual { height: 500px; }
  #hotel-experience .hb-copy h2 { font-size: 30px; }
  #hotel-experience .ha-plan-card { padding: 18px; }
  #hotel-experience .ha-plan-card > h3,
  #hotel-experience .ha-incident-card > h3 { font-size: 22px; }
  #hotel-experience .ha-plan-card > div { gap: 12px; }
  #hotel-experience .ha-plan-card > div strong { min-width: 0; }
  #rental-cinema .rc-static-example,
  #long-cinema .rc-static-example { height: 560px; overflow: visible; }
  #long-cinema .rc-static .tc-phone-wrap { max-width: 100%; }
  #long-cinema .tc-history > div { flex-wrap: wrap; gap: 8px; }
  #long-cinema .tc-owner-notification { padding: 16px; }
  #long-cinema .tc-owner-notification strong { line-height: 1.4; }
  #long-cinema .tc-report > div { flex-wrap: wrap; }
  .bivo-story-progress { right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .bivo-story-progress button::after { transition: none; }
}