/* FK Solutions — stand-alone pages (404.html, ochrana-osobnich-udaju.html).
   Loaded after styles.css, which provides the fonts, tokens, .tile, .label,
   .tag, .chip, .btn-cta, .pager and the focus rings. These pages scroll like a
   normal document: no .app shell and no main.js. Every class here is "sub-". */

/* ── Page ──────────────────────────────────────────────────────────────── */

body.sub {
  /* .tile takes its opacity/offset from the panel state in index.html: always shown here */
  --o: 1;
  --d: 0;
  --m: 1;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 12px;
  display: grid;
  gap: var(--gap);
  color: var(--navy);
  font-family: var(--font-body);
}
.sub .tile { will-change: auto; }

/* Same staggered rise as the panels on index (keyframes in styles.css). */
@media (prefers-reduced-motion: no-preference) {
  .sub .tile {
    animation:
      tile-fade 600ms var(--ease-fade) var(--delay) backwards,
      tile-rise 900ms var(--ease-out) var(--delay) backwards;
  }
}

/* Controls sitting directly on cream tiles get the inverse ring. */
.sub .tile--cream a:not(.pager__back):focus-visible {
  outline-color: var(--navy);
  box-shadow: 0 0 0 4px var(--cream);
}

/* Chips on navy tiles: cream outline (the cream fill is kept for the CTA); cream ring again. */
.sub .tile--navy .chip { border-color: var(--line-on-navy); color: var(--cream); }
@media (hover: hover) {
  .sub .tile--navy .chip:hover { border-color: var(--cream); background: var(--cream); color: var(--navy); }
}
.sub .tile--navy .chip:focus-visible { outline-color: var(--cream); box-shadow: 0 0 0 4px var(--navy); }

.sub-chips {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sub-chips .chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px; /* tap target */
  padding: 10px 14px;
  white-space: nowrap;
}

/* Keeps "e-mailové" from breaking at its hyphen (neither font has U+2011). */
.sub-nw { white-space: nowrap; }

/* Home icon inside the cream CTA, like the "Zpět na úvod" pager buttons */
.sub-cta { gap: 12px; padding: 0 26px 0 22px; }

/* Plain text link on navy tiles */
.sub-link-light {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--cream);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-on-navy);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .25s;
}
.sub-link-light:hover { color: #fff; text-decoration-color: currentColor; }

/* ── 404 ───────────────────────────────────────────────────────────────── */

.sub--404 {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .5fr);
  grid-template-rows: auto minmax(0, 1fr);
}

/* Wordmark tile: the whole tile is the home link; the text fills its width. */
.sub-mark { grid-column: 1; grid-row: 1; min-width: 0; }
.sub-mark__link {
  --delay: 100ms;
  container-type: inline-size;
  display: block;
  padding: clamp(16px, 1.5vw, 22px) clamp(18px, 1.7vw, 26px) clamp(12px, 1.1vw, 16px);
  overflow: hidden;
  color: var(--navy);
}
.sub-mark__link:hover { color: var(--navy); }
.sub-mark__text {
  display: block;
  font-family: var(--font-display);
  font-size: 14.5vw; /* fallback without container units */
  font-size: calc(100cqi / 7.75); /* "FK SOLUTIONS" is 7.73em wide */
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .8;
  text-transform: uppercase;
  white-space: nowrap;
}

.sub-lost {
  --delay: 160ms;
  grid-column: 1;
  grid-row: 2;
  container-type: inline-size;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 38px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 12px;
}
.sub-lost__num {
  align-self: end;
  margin: 0 0 clamp(14px, 2.8vh, 30px) -.026em; /* optical: the 4's side bearing */
  font-size: min(30vw, 52vh); /* fallback without container units */
  font-size: min(100cqi / 1.9, 52vh); /* "404" is 1.86em wide: fill the tile */
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .8;
  color: var(--navy);
}
.sub-lost__title {
  font-size: clamp(30px, min(3.6vw, 6.6vh), 66px);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--navy);
}
.sub-lost__lead {
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--navy-2);
}

/* Navy "where next" tile; it is the page footer. Tag on top, the rest
   bottom-aligned like the booking tile on index. */
.sub-next {
  --delay: 220ms;
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  gap: 18px;
}
.sub-next__lead {
  grid-row: 3;
  max-width: 420px;
  font-size: clamp(17px, min(1.6vw, 2.9vh), 26px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
}
.sub-next .btn-cta { grid-row: 4; margin-bottom: 6px; }
.sub-next__nav { grid-row: 5; }
.sub-next__mail {
  grid-row: 6;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(248, 243, 224, .16);
  display: grid;
  justify-items: start;
  gap: 2px;
  font-size: clamp(16px, 1.25vw, 19px);
}
.sub-next__mail .label { font-size: 10.5px; color: var(--slate); }

/* ── Privacy policy ────────────────────────────────────────────────────── */

.sub--doc {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
html:has(.sub--doc) { scroll-padding-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.sub--doc) { scroll-behavior: smooth; }
}

/* Header bar: wordmark home link + the site's "back" pager control */
.sub-bar {
  --delay: 100ms;
  padding: 10px 10px 10px clamp(18px, 2vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 24px;
}
.sub-bar__mark {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .8;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
}
.sub-bar__mark:hover { color: var(--navy-2); }
.sub-bar .pager { align-self: center; }

.sub-doc {
  display: grid;
  grid-template-columns: clamp(260px, 22vw, 330px) minmax(0, 1fr);
  align-items: start;
  gap: var(--gap);
}

/* Title tile, in the style of the section heads on index */
.sub-hero {
  --delay: 160ms;
  grid-column: 1 / -1;
  min-height: clamp(220px, 34vh, 330px);
  padding: clamp(22px, 2.4vw, 38px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px 24px;
}
.sub-hero .tag { justify-self: end; align-self: start; }
.sub-hero__title {
  grid-column: 1 / -1;
  align-self: end;
  font-size: clamp(34px, min(4.4vw, 8vh), 80px);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--navy);
}
.sub-hero__lead {
  grid-column: 1 / -1;
  max-width: 680px;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.45;
  font-weight: 500;
  text-wrap: pretty;
  color: var(--navy-2);
}

/* Table of contents: sticky navy side tile on desktop */
.sub-toc {
  --delay: 220ms;
  position: sticky;
  top: 12px;
  padding: clamp(18px, 1.8vw, 26px);
  display: grid;
  gap: 14px;
  color: var(--slate);
}
.sub-toc__label { font-size: 11px; color: var(--slate); }
.sub-toc__list {
  margin: 0 -10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
.sub-toc__list a {
  min-height: 40px;
  padding: 7px 10px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--cream);
  transition: background-color .25s;
}
@media (hover: hover) {
  .sub-toc__list a:hover { background: var(--navy-3); color: #fff; }
}
.sub-toc__n { flex: none; width: 20px; font-size: 10.5px; color: var(--slate); }
.sub-toc__contact {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(248, 243, 224, .16);
  display: grid;
  justify-items: start;
  gap: 2px;
  font-size: 14px;
}
.sub-toc__contact .label { font-size: 10.5px; }

/* Reading tile */
.sub-read {
  --delay: 280ms;
  min-width: 0;
  padding: clamp(24px, 3.6vw, 60px) clamp(22px, 3.6vw, 60px) clamp(32px, 4.4vw, 72px);
}
.sub-prose {
  max-width: 740px;
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 450;
  text-wrap: pretty;
  color: var(--navy-2);
}
/* Zero-specificity reset, so the flow spacing below always wins. */
:where(.sub-prose) :where(p, ul, dl, dd) { margin: 0; }
.sub-prose > * + *, .sub-sec > * + * { margin-top: 16px; }
.sub-prose strong { font-weight: 700; color: var(--navy); }
.sub-prose a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.sub-prose a:hover { text-decoration-thickness: 2px; }
.sub-prose ul { padding-left: 1.25em; }
.sub-prose li + li { margin-top: 8px; }
.sub-prose li::marker { color: var(--navy); }

.sub-intro {
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.55;
  font-weight: 500;
  color: var(--navy);
}

.sub-sec { scroll-margin-top: 12px; }
.sub-prose > .sub-sec {
  margin-top: clamp(40px, 4.4vw, 60px);
  padding-top: clamp(32px, 3.6vw, 48px);
  border-top: 1px solid rgba(10, 17, 40, .14);
}
.sub-h2 {
  display: grid;
  justify-items: start;
  gap: 12px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--navy);
}
.sub-h2__n { font-size: 11px; letter-spacing: .07em; color: var(--navy-2); }
.sub-sec > .sub-h2 + * { margin-top: 20px; }

/* Processing cases (2a–2e) and other boxed facts */
.sub-case {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(10, 17, 40, .12);
  border-radius: 16px;
  background: var(--cream-hi);
}
.sub-sec > .sub-case + .sub-case { margin-top: 10px; }
.sub-case__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--navy);
}
.sub-case__key {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--cream);
  font-size: 11px;
  letter-spacing: 0;
}
.sub-case > * + * { margin-top: 14px; }
.sub-case__note { font-size: 15px; line-height: 1.55; }

.sub-dl { display: grid; gap: 10px; }
.sub-dl > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 4px 18px;
}
.sub-dl dt { padding-top: 5px; font-size: 10.5px; color: var(--navy-2); }

/* Desktop: section numbers hang in a gutter left of the ~760px text column. */
@media (min-width: 1024px) {
  .sub-prose { --gutter: clamp(44px, 5vw, 72px); max-width: 860px; font-size: 17px; }
  .sub-intro { max-width: 780px; }
  .sub-sec {
    display: grid;
    grid-template-columns: var(--gutter) minmax(0, 1fr);
    column-gap: 24px;
  }
  .sub-sec > * { grid-column: 2; }
  .sub-sec > .sub-h2 {
    grid-column: 1 / -1;
    grid-template-columns: var(--gutter) minmax(0, 1fr);
    align-items: baseline;
    gap: 0 24px;
  }
}

/* Footer with the business identification (§ 435 of the Civil Code) */
.sub-foot {
  --delay: 340ms;
  padding: clamp(22px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 32px;
  color: var(--slate);
}
.sub-foot__id { display: grid; gap: 8px; align-content: start; }
.sub-foot__brand {
  font-size: clamp(17px, 1.5vw, 24px);
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--cream);
}
.sub-foot__legal { font-size: 13.5px; line-height: 1.6; font-weight: 500; }
.sub-foot__links { display: grid; justify-items: end; align-content: start; }
.sub-foot__copy { grid-column: 1 / -1; font-size: 10.5px; color: var(--slate); }

/* ── Stacked layout (< 1024px) ───────────────────────────────────────── */

@media (max-width: 1023.98px) {
  body.sub { padding: 10px; }

  .sub--404 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .sub-mark, .sub-lost, .sub-next { grid-column: 1; grid-row: auto; }
  .sub-lost { padding: 22px; gap: 14px; grid-template-rows: none; }
  .sub-lost__num {
    margin-top: clamp(28px, 6vw, 56px);
    font-size: min(100cqi / 1.9, 46vh, 400px);
  }
  .sub-next { padding: 22px; grid-template-rows: none; gap: 18px; }
  .sub-next > *, .sub-next > .btn-cta { grid-row: auto; }
  .sub-next__lead { margin-top: 6px; max-width: 560px; font-size: clamp(18px, 3.4vw, 24px); }

  .sub-doc { grid-template-columns: minmax(0, 1fr); }
  .sub-hero { min-height: 0; padding: 22px; gap: 18px 24px; }
  .sub-hero__title { font-size: clamp(32px, 7vw, 60px); padding-top: 28px; line-height: 1.1; } /* wraps here: room for Czech accents */
  .sub-toc { position: static; padding: 22px; }
  .sub-read { padding: 26px 22px 40px; }
  .sub-foot { padding: 22px; }
}

/* Tablet: the full-width tiles have room for wider rows. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .sub-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sub-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

@media (max-width: 639.98px) {
  .sub-next .btn-cta { justify-self: stretch; justify-content: center; }

  /* Wordmark fills the bar like the stacked wordmark on index; pager goes below. */
  .sub-bar {
    container-type: inline-size;
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 10px 10px;
  }
  .sub-bar__mark {
    justify-self: stretch;
    padding: 0 8px;
    font-size: 12.5vw; /* fallback without container units */
    font-size: calc((100cqi - 16px) / 7.75);
  }
  .sub-bar .pager {
    grid-column: auto;
    grid-row: auto;
    justify-self: stretch;
    border-radius: 30px;
  }
  .sub-bar .pager__back { flex: 1; justify-content: center; }
  .sub-hero { grid-template-columns: minmax(0, 1fr); }
  .sub-hero .tag { justify-self: start; }
  .sub-hero__title { padding-top: 8px; }
  .sub-prose { font-size: 16px; }
  .sub-case { padding: 18px 16px; }
  .sub-dl { gap: 14px; }
  .sub-dl > div { grid-template-columns: minmax(0, 1fr); }
  .sub-dl dt { padding-top: 0; }
  .sub-foot { grid-template-columns: minmax(0, 1fr); }
  .sub-foot__links { justify-items: start; }
}