/* The founder belt's shadow must finish before the section ends; otherwise
   overflow:hidden cuts it into the hard horizontal line seen on light ground. */
@media (min-width: 1025px) {
  #zakladatel { padding-bottom: clamp(76px, 10vh, 112px); }
  #zakladatel .founder-belt { box-shadow: 0 18px 38px rgba(20, 22, 26, .15); }
}

/* Homepage O mne: one joined colour ramp spans the two section backgrounds.
   In the dark story the founder fades from the shared white ground to this
   exact midpoint; About continues from that midpoint into its dark canvas.
   Matching endpoints also keeps the boundary invisible during cross-fades. */
#zakladatel::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: clamp(92px, 13vh, 148px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 252, 251, 0) 0%, #c8cacc 54%, #747779 100%);
  opacity: 0;
  transition: opacity 480ms cubic-bezier(.22, 1, .36, 1);
}
#zakladatel:has(+ #o-mne.is-dark)::after { opacity: 1; }

#o-mne {
  background-color: #FBFCFB;
  color: #111214;
  transition: color 480ms ease;
}
#o-mne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #747779 0, #37393b 48px, #111214 112px, #111214 100%);
  opacity: 0;
  transition: opacity 480ms cubic-bezier(.22, 1, .36, 1);
}
#o-mne.is-dark { background-color: #FBFCFB; color: #f8f9f8; }
#o-mne.is-dark::before { opacity: 1; }
#o-mne .giant-heading { transition: color 480ms ease; }
#o-mne.is-dark .giant-heading { color: #f8f9f8; }

@media (prefers-reduced-motion: reduce) {
  #zakladatel::after, #o-mne::before { transition: none; }
}

/* The service handoff inherits the last About colour. A white-to-black
   gradient here would flash after the third, dark About story. */
#o-mne.is-dark + #sluzby #svcHandoff { background: #111214; }

#o-mne .about-grid { position: relative; }
#o-mne .about-gallery { position: relative; z-index: 2; }
#o-mne .about-copy { position: relative; z-index: 1; min-width: 0; width: 100%; overflow: visible; }
#o-mne .about-story-stage {
  display: grid;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 6px;
  margin: -6px;
  isolation: isolate;
}
#o-mne .about-story {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
#o-mne .about-story.is-active,
#o-mne .about-story.is-transitioning { visibility: visible; }
#o-mne .about-story.is-active { pointer-events: auto; }
#o-mne .about-story-index {
  margin: 0 0 clamp(9px, 1.5vh, 18px);
  color: var(--accent);
  font-size: clamp(11px, .85vw, 14px);
  font-weight: 900;
  letter-spacing: .15em;
}
#o-mne [data-about-story="2"] .about-story-index { color: var(--accent); }
#o-mne .about-story-title {
  max-width: 15ch;
  margin: 0 0 clamp(12px, 2.1vh, 24px);
  color: #111214;
  font-size: clamp(28px, min(3.3vw, 5.7vh), 58px);
  font-weight: 900;
  line-height: .99;
  letter-spacing: -.057em;
  overflow-wrap: normal;
}
#o-mne [data-about-story="2"] .about-story-title { color: #f8f9f8; }
#o-mne .about-story-green { color: #00ff00; }
#o-mne .about-story-subtitle,
#o-mne .about-story-highlight {
  margin: 0 0 clamp(8px, 1.2vh, 15px);
  font-size: clamp(12px, min(1.08vw, 2.15vh), 18px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -.015em;
}
#o-mne .about-story-intro,
#o-mne .about-story-extra p {
  max-width: 59ch;
  margin: 0;
  color: #4a4d50;
  font-size: clamp(13px, min(1.12vw, 2.25vh), 18px);
  font-weight: 600;
  line-height: 1.48;
}
#o-mne [data-about-story="2"] .about-story-intro,
#o-mne [data-about-story="2"] .about-story-extra p { color: #d5d8d7; }
#o-mne .about-story-tags {
  margin: clamp(9px, 1.5vh, 17px) 0 0;
  color: #008f00;
  font-size: clamp(10px, .85vw, 13px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .055em;
}
#o-mne .about-story-stat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(9px, 1.5vh, 17px) 0 0;
  color: #f8f9f8;
  font-size: clamp(11px, .95vw, 15px);
  font-weight: 900;
  letter-spacing: .09em;
}
#o-mne .about-story-stat strong {
  color: #00ff00;
  font-size: clamp(25px, min(3vw, 5vh), 44px);
  letter-spacing: -.05em;
  line-height: 1;
}
#o-mne .about-story-extra {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  opacity: 0;
  transition: grid-template-rows 400ms cubic-bezier(.22, 1, .36, 1), opacity 260ms ease;
}
#o-mne .about-story-extra-inner { min-height: 0; overflow: hidden; }
#o-mne .about-story-extra-inner > :first-child { padding-top: clamp(12px, 2vh, 24px); }
#o-mne .about-story-extra-inner > p + p { margin-top: clamp(9px, 1.5vh, 16px); }
#o-mne .about-story-extra .about-story-highlight { color: #111214; }
#o-mne [data-about-story="2"] .about-story-extra .about-story-highlight { color: #00ff00; }
#o-mne .about-story-extra .about-story-subtitle { color: #111214; }
#o-mne .about-story-extra .about-story-tags { color: #008f00; }
#o-mne.is-story-expanded .about-story-extra { grid-template-rows: 1fr; opacity: 1; }
#o-mne .about-story-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  margin-top: clamp(15px, 2.4vh, 28px);
  width: 100%;
}
#o-mne .about-story-cta {
  max-width: 100%;
  min-height: 44px;
  padding: 11px clamp(15px, 1.6vw, 25px);
  font-size: clamp(10px, .9vw, 14px);
  line-height: 1.22;
  text-align: center;
  white-space: normal;
  text-decoration: none;
}
#o-mne .about-story-cta span { flex: none; font-size: 1.25em; line-height: .8; }
#o-mne .about-story-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 12px 2px;
  background: transparent;
  color: #111214;
  font: 900 clamp(10px, .8vw, 13px)/1.2 Montserrat, sans-serif;
  letter-spacing: .07em;
  cursor: pointer;
}
#o-mne [data-about-story="2"] .about-story-toggle { color: #f8f9f8; }
#o-mne .about-story-toggle > :last-child { color: #00c800; font-size: 17px; transition: transform 250ms ease; }
#o-mne.is-story-expanded .about-story-toggle > :last-child { transform: rotate(180deg); }
#o-mne .about-story-toggle:focus-visible,
#o-mne .about-story-cta:focus-visible { outline: 3px solid #00b900; outline-offset: 4px; }

@media (min-width: 1025px) {
  /* The copy mask extends under the left photo column. Outgoing copy can
     physically travel behind the photo; incoming copy emerges from there. */
  #o-mne .about-story-stage {
    --about-left-reach: calc(100% + clamp(22px, 3.5vw, 64px));
    width: calc(100% + var(--about-left-reach));
    margin-left: calc(0px - var(--about-left-reach));
    padding-left: calc(var(--about-left-reach) + 6px);
  }
  #o-mne .about-copy { max-height: none; }
  /* Expanded copy may become taller than one viewport; the photo stack keeps
     the same measured dimensions while the text/section gain natural height. */
  #o-mne.is-story-expanded {
    height: auto;
    min-height: var(--viewport-h);
    overflow: visible;
  }
  #o-mne.is-story-expanded .section-inner {
    height: auto;
    min-height: calc(var(--viewport-h) - var(--stage-pad-top) - var(--fit-bottom));
    grid-template-rows: auto auto;
  }
  #o-mne.is-story-expanded .about-grid {
    height: auto;
    min-height: var(--about-gallery-h, 400px);
    align-items: center;
  }
  #o-mne.is-story-expanded .about-gallery { height: var(--about-gallery-h, 400px); }
}

@media (min-width: 1025px) and (max-height: 480px) {
  /* At an unusually short desktop height, readable copy takes precedence
     over an impossible one-viewport composition. Keep the whole section in
     normal flow so neither its actions nor the Services boundary are cut. */
  #o-mne:not(.is-story-expanded) { height: auto; min-height: var(--viewport-h); overflow: visible; }
  #o-mne:not(.is-story-expanded) .section-inner { height: auto; grid-template-rows: auto auto; }
  #o-mne:not(.is-story-expanded) .about-grid { height: auto; min-height: 330px; align-items: center; }
  #o-mne:not(.is-story-expanded) .about-gallery { height: 330px; }
}

@media (max-width: 1024px) {
  #o-mne .about-copy { max-width: 680px; margin-inline: auto; }
  #o-mne .about-story-title { font-size: clamp(29px, 6vw, 52px); }
  #o-mne .about-story-intro,
  #o-mne .about-story-extra p { font-size: clamp(14px, 2.2vw, 17px); }
  #o-mne .about-story-actions { align-items: flex-start; }
  /* Na homepage mobile už dlhý príbeh nerozbaľujeme. Desktopové tlačidlá
     a text zostávajú nedotknuté. */
  #o-mne .about-story-toggle,
  #o-mne .about-story-extra { display: none !important; }
}
@media (max-width: 600px) {
  #o-mne { padding-bottom: clamp(28px, 5svh, 48px); }
  #o-mne .about-story-stage { padding: 4px; margin: -4px; }
  /* Neaktívne príbehy už neurčujú výšku sekcie. Doteraz najdlhší text
     nechával pod krátkym štvrtým príbehom veľký prázdny pás. */
  #o-mne .about-story-stage { position: relative; }
  #o-mne .about-story {
    position: absolute;
    inset: 0 auto auto 0;
  }
  #o-mne .about-story.is-active,
  #o-mne .about-story.is-transitioning {
    position: relative;
    inset: auto;
  }
  #o-mne .about-story-title { font-size: clamp(28px, 8.1vw, 42px); }
  #o-mne .about-story-cta { width: 100%; justify-content: center; }
  #o-mne .about-story-toggle { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #o-mne, #o-mne .giant-heading, #o-mne .about-story-extra,
  #o-mne .about-story-toggle > :last-child { transition: none; }
}