/* Safety — Figma 670:5894. Hodnoty v calc(N * var(--u)) = design px pri 1920. */

/* Hero: fotka 715:3231 (1920x1281 od y=-91) -> vyrez 0–746 */
.sf-main .cs-phero__media img { object-position: 50% 17%; }

.sf-wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: calc(95 * var(--u)); }
.sf-h { font-weight: 700; font-size: max(28px, calc(45 * var(--u))); line-height: calc(58.8 / 45); letter-spacing: -.67px; }

/* ---------------------------------------------------------------- CEDULE (zluta #fbe909, 1175) */
.sf-signs { background: #fbe909; padding: 0 calc(95 * var(--u)) calc(67 * var(--u)) calc(92 * var(--u)); overflow: hidden; }
.sf-signs__row { display: flex; gap: calc(16 * var(--u)); max-width: calc(1723 * var(--u)); margin-inline: auto; }
.sf-signs__col { margin: 0; flex: none; width: calc(852 * var(--u)); position: relative; }
.sf-signs__col--code { height: calc(1100 * var(--u)); padding-top: calc(23 * var(--u)); overflow: hidden; border-radius: 16px; }
.sf-signs__code { display: block; width: 100%; height: calc(1103 * var(--u)); object-fit: cover; }
.sf-signs__col--notice { padding-top: calc(47 * var(--u)); }
.sf-signs__aware { display: block; width: calc(281 * var(--u)); height: auto; margin-left: calc(288 * var(--u)); }
.sf-signs__notice { display: block; width: calc(875 * var(--u)); max-width: none; height: auto; }

/* ---------------------------------------------------------------- HIGHLIGHTS (#021675, 520) */
.sf-hl { background: var(--c-navy-2); color: #fff; padding: calc(96 * var(--u)) 0; }
.sf-hl__grid { display: grid; grid-template-columns: repeat(4, calc(411 * var(--u))); gap: calc(26.74 * var(--u)) calc(26.74 * var(--u)); margin-top: calc(64 * var(--u)); }
.sf-hl__card { display: flex; align-items: center; gap: calc(21.39 * var(--u)); height: calc(91 * var(--u)); padding: 0 calc(32 * var(--u)); background: #fff; border: 1.34px solid rgba(255, 255, 255, .15); box-shadow: 0 0 26.7px rgba(0, 0, 0, .03); color: var(--c-navy-2); }
.sf-hl__check { flex: none; display: grid; place-items: center; width: max(28px, calc(37 * var(--u))); height: max(28px, calc(37 * var(--u))); border-radius: 50%; background: #cc994a; color: var(--c-navy-2); }
.sf-hl__check .cs-ico { width: 70%; height: 70%; }
.sf-hl__t { font-weight: 600; font-size: max(17px, calc(24 * var(--u))); line-height: calc(28 / 24); }

/* ---------------------------------------------------------------- OBTIZNOST TRAS (bila, 584) */
.sf-diff { background: #fff; color: var(--c-navy-2); padding: calc(96 * var(--u)) 0 calc(126 * var(--u)); }
.sf-diff__h { text-align: center; text-transform: uppercase; }
.sf-diff__grid { display: flex; justify-content: center; gap: calc(85 * var(--u)); margin-top: calc(76 * var(--u)); }
.sf-diff__col { flex: none; width: calc(418 * var(--u)); min-height: calc(228 * var(--u)); padding: calc(32 * var(--u)); display: flex; flex-direction: column; align-items: center; text-align: center; }
.sf-diff__col--green { background: #f0fdf4; }
.sf-diff__col--blue { background: #eff6ff; }
.sf-diff__col--black { background: rgba(0, 0, 0, .15); }
.sf-diff__sym { display: block; width: max(30px, calc(43 * var(--u))); height: max(30px, calc(43 * var(--u))); margin-bottom: calc(20 * var(--u)); }
.sf-diff__col--green .sf-diff__sym { border-radius: 50%; background: #46cc7c; }
.sf-diff__col--blue .sf-diff__sym { width: max(28px, calc(40 * var(--u))); height: max(28px, calc(40 * var(--u))); margin-bottom: calc(22 * var(--u)); background: #009fe3; }
.sf-diff__col--black .sf-diff__sym { width: max(28px, calc(40 * var(--u))); height: max(34px, calc(48 * var(--u))); margin: calc(8 * var(--u)) 0 calc(6 * var(--u)); background: #000; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sf-diff__title { font-weight: 700; font-size: max(11px, calc(16 * var(--u))); line-height: 1.22; letter-spacing: 1.34px; text-transform: uppercase; }
.sf-diff__col--green .sf-diff__title { color: #46cc7c; }
.sf-diff__col--blue .sf-diff__title { color: #009fe3; }
.sf-diff__col--black .sf-diff__title { color: #000; }
.sf-diff__name { margin-top: calc(8 * var(--u)); font-weight: 600; font-size: max(20px, calc(28 * var(--u))); line-height: calc(34.8 / 28); }
.sf-diff__desc { margin-top: calc(8 * var(--u)); font-weight: 400; font-size: max(13px, calc(16 * var(--u))); line-height: calc(29.4 / 16); }

/* ---------------------------------------------------------------- KNOW BEFORE YOU GO (#021675, 891) */
.sf-kbyg { background: var(--c-navy-2); color: #fff; padding: calc(96 * var(--u)) 0 calc(71 * var(--u)); }
.sf-kbyg__row { display: flex; gap: calc(85.56 * var(--u)); align-items: flex-start; }
.sf-kbyg__media { flex: none; width: calc(1018 * var(--u)); height: calc(694 * var(--u)); margin-top: calc(15 * var(--u)); box-shadow: 0 0 40px rgba(2, 22, 117, .05); overflow: hidden; }
.sf-kbyg__media img { width: 100%; height: 100%; object-fit: cover; }
.sf-kbyg__info { flex: none; width: calc(608 * var(--u)); }
.sf-kbyg__list { display: flex; flex-direction: column; gap: calc(26.74 * var(--u)); margin-top: calc(43 * var(--u)); }
.sf-kbyg__item { display: flex; gap: calc(21.39 * var(--u)); }
.sf-kbyg__item:nth-child(2) { min-height: calc(129 * var(--u)); }
.sf-kbyg__ico { flex: none; width: max(36px, calc(53 * var(--u))); height: max(36px, calc(53 * var(--u))); display: grid; place-items: center; }
.sf-kbyg__ico .cs-ico { width: 85%; height: 85%; }
.sf-kbyg__txt { display: flex; flex-direction: column; gap: calc(5.35 * var(--u)); }
.sf-kbyg__t { font-weight: 600; font-size: max(18px, calc(24 * var(--u))); line-height: calc(34.8 / 24); }
.sf-kbyg__d { font-weight: 400; font-size: max(15px, calc(20 * var(--u))); line-height: calc(29.4 / 20); color: rgba(255, 255, 255, .8); }
.sf-kbyg__btn { display: flex; align-items: center; justify-content: center; margin-top: calc(43 * var(--u)); height: max(52px, calc(71 * var(--u))); padding: 0 24px; background: #fff; color: var(--c-navy-2); font-weight: 600; font-size: max(16px, calc(25 * var(--u))); letter-spacing: .67px; transition: background-color .2s, color .2s; }
.sf-kbyg__btn:hover { background: var(--c-gold); color: #fff; }

/* ---------------------------------------------------------------- EMERGENCY (#7f0305, 455) */
.sf-emerg { background: #7f0305; color: #fff; padding: calc(142 * var(--u)) 0; }
.sf-emerg__row { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.sf-emerg__ico { flex: none; width: calc(170 * var(--u)); height: calc(171 * var(--u)); display: grid; place-items: center; }
.sf-emerg__ico .cs-ico { width: calc(138 * var(--u)); height: calc(138 * var(--u)); min-width: 56px; min-height: 56px; }
.sf-emerg__txt { flex: none; width: calc(995 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.sf-emerg__p { font-weight: 400; font-size: max(16px, calc(24 * var(--u))); line-height: calc(37.4 / 24); color: rgba(255, 255, 255, .8); }
.sf-emerg__btn { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: calc(26 * var(--u)); width: max(240px, calc(316 * var(--u))); height: max(48px, calc(56 * var(--u))); background: #dc2626; color: #fff; font-weight: 600; font-size: max(16px, calc(20 * var(--u))); letter-spacing: .67px; transition: background-color .2s, color .2s; }
.sf-emerg__btn .cs-ico { width: max(18px, calc(21 * var(--u))); height: max(18px, calc(21 * var(--u))); }
.sf-emerg__btn:hover { background: #fff; color: #7f0305; }

/* ---------------------------------------------------------------- RESPONZIVITA */
@media (max-width: 1279px) {
  .sf-wrap { padding-inline: var(--gut); }
  .sf-signs { padding-inline: var(--gut); }
  .sf-signs__col { flex: 1 1 0; width: auto; min-width: 0; }
  .sf-signs__col--code { height: auto; }
  .sf-signs__code { height: auto; }
  .sf-signs__aware { width: 33%; margin-left: 34%; }
  .sf-signs__notice { width: 100%; }
  .sf-br { display: none; }
  .sf-hl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-diff__grid { gap: 24px; }
  .sf-kbyg__row { gap: 40px; }
  .sf-kbyg__media { flex: 1 1 50%; width: auto; height: auto; aspect-ratio: 1018 / 694; }
  .sf-kbyg__info { flex: 1 1 50%; width: auto; }
  .sf-emerg__txt { flex: 1 1 auto; width: auto; }
}
@media (max-width: 1023px) {
  .sf-signs { padding: 24px var(--gut) 40px; }
  .sf-signs__row { flex-direction: column; align-items: center; gap: 32px; }
  .sf-signs__col { width: 100%; max-width: 640px; }
  .sf-signs__col--code { height: auto; padding-top: 0; }
  .sf-signs__code { height: auto; }
  .sf-signs__col--notice { padding-top: 0; }
  .sf-signs__aware { width: 45%; margin: 0 auto 16px; }
  .sf-signs__notice { width: 100%; }
  .sf-hl, .sf-diff, .sf-kbyg { padding-block: 64px; }
  .sf-hl__grid, .sf-diff__grid, .sf-kbyg__list { margin-top: 32px; }
  .sf-diff__grid { flex-wrap: wrap; }
  .sf-diff__col { width: calc(50% - 12px); min-width: 240px; padding: 24px; }
  .sf-kbyg__row { flex-direction: column; }
  .sf-kbyg__media, .sf-kbyg__info { width: 100%; flex: none; }
  .sf-kbyg__media { margin-top: 0; }
  .sf-emerg { padding-block: 56px; }
  .sf-emerg__row { flex-wrap: wrap; gap: 20px; }
  .sf-emerg__ico { width: auto; height: auto; }
  .sf-emerg__txt { flex-basis: calc(100% - 80px); }
  .sf-emerg__btn { margin-left: 0; }
}
@media (max-width: 767px) {
  .sf-hl__grid { grid-template-columns: 1fr; gap: 12px; }
  .sf-hl__card { padding: 18px 20px; min-height: 0; }
  .sf-diff__col { width: 100%; }
  .sf-emerg__ico { display: none; }
  .sf-emerg__txt { flex-basis: 100%; }
  .sf-emerg__btn { width: 100%; }
}
.sf-hl__card:nth-child(n+5) { height: calc(87 * var(--u)); }
@media (min-width: 1280px) { .sf-diff__desc { white-space: nowrap; } }
@media (max-width: 1279px) { .sf-hl__card, .sf-hl__card:nth-child(n+5) { height: auto; min-height: 72px; padding-block: 14px; } }