/* ADAS horizontal gallery: one-row browsing with an inline video state. */
.safety-section {
  overflow:hidden;
  padding:92px 0 70px;
  background:#f7fafb;
}
.safety-head {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.72fr);
  align-items:end;
  gap:56px;
  margin-bottom:34px;
}
.safety-kicker {
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:20px;
  color:#06a9dc;
  font-size:14px;
  font-weight:800;
  letter-spacing:.13em;
}
.safety-kicker i {
  position:relative;
  display:block;
  width:96px;
  height:1px;
  background:linear-gradient(90deg,#06a9dc,rgba(6,169,220,.12));
}
.safety-kicker i::before,.safety-kicker i::after {
  position:absolute;
  top:-3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#65ddf5;
  content:"";
}
.safety-kicker i::before { left:0; }
.safety-kicker i::after { right:0; }
.safety-head h2 {
  max-width:730px;
  margin:0;
  color:#071016;
  font-size:clamp(48px,5.2vw,76px);
  line-height:.92;
  letter-spacing:-.055em;
}
.safety-head>p {
  max-width:430px;
  margin:0 0 2px;
  padding-left:20px;
  border-left:1px solid #20c9e8;
  color:#5d6d74;
  font-size:15px;
  line-height:1.65;
}
.safety-swipe {
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:20px;
  color:#078ed0;
  font-size:12px;
  font-weight:800;
}
.safety-swipe::before { content:"↔"; font-size:20px; font-weight:400; }
.gallery-security { display:block; }
.gallery-security .gallery-group-label { display:none; }
.gallery-security .adas-grid {
  display:flex !important;
  flex-wrap:nowrap;
  gap:18px;
  width:100%;
  margin:0;
  padding:0 3px 18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  touch-action:pan-x pan-y;
}
.gallery-security .adas-grid::-webkit-scrollbar { display:none; }
.gallery-security .adas-secondary { display:none !important; }
.gallery-security .adas-card,
.gallery-security .tip-card {
  position:relative;
  flex:0 0 calc((100% - 54px) / 4);
  min-width:0;
  min-height:390px;
  aspect-ratio:auto;
  overflow:hidden;
  border:1px solid rgba(7,16,22,.1);
  border-radius:22px;
  background:linear-gradient(145deg,#fff 0%,#f4f9fb 100%);
  box-shadow:0 12px 28px rgba(7,16,22,.08);
  scroll-snap-align:start;
  transition:box-shadow .35s var(--ease),transform .35s var(--ease);
}
.gallery-security .safety-card { display:block !important; }
.gallery-security .adas-card:hover,
.gallery-security .tip-card:hover { box-shadow:0 18px 34px rgba(7,16,22,.13); transform:translateY(-4px); }
.safety-card-face { position:absolute; inset:0; overflow:hidden; transition:transform .65s var(--ease); }
.safety-card-front {
  display:flex;
  flex-direction:column;
  padding:23px 22px 20px;
  background:
    radial-gradient(circle at 76% 24%,rgba(56,207,238,.2) 0 1px,transparent 2px 100px),
    linear-gradient(145deg,#fff 0%,#f4f9fb 100%);
}
.safety-card-front::after {
  position:absolute;
  right:-35px;
  bottom:-35px;
  width:175px;
  height:175px;
  border:1px solid rgba(47,190,230,.18);
  border-radius:50%;
  box-shadow:0 0 0 18px rgba(47,190,230,.04),0 0 0 38px rgba(47,190,230,.03);
  content:"";
  pointer-events:none;
}
.safety-card-front .adas-icon,
.safety-card-front .tip-icon {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:92px;
  height:92px;
  margin:0 0 25px;
  border:1px solid rgba(12,172,224,.15);
  border-radius:50%;
  background:radial-gradient(circle,#fff 35%,#edf8fc 36%,#fff 68%);
}
.safety-card-front .adas-icon::before,
.safety-card-front .tip-icon::before {
  position:absolute;
  inset:9px;
  border:1px dashed rgba(12,172,224,.4);
  border-radius:50%;
  content:"";
}
.safety-card-front .adas-icon img,
.safety-card-front .tip-icon img { position:relative; z-index:1; width:54px; height:54px; }
.safety-card-front .adas-copy { display:flex; flex:1; flex-direction:column; min-height:0; padding:0; }
.safety-card-front h3 { position:relative; z-index:1; max-width:250px; margin:0; padding:0; color:#071016; font-size:clamp(21px,1.75vw,28px); line-height:.98; letter-spacing:-.045em; }
.safety-card-front p { position:relative; z-index:1; max-width:245px; margin:17px 0 0; color:#5b6b72; font-size:12px; line-height:1.5; }
.safety-card-front p b { color:#071016; font-weight:800; }
.gallery-security .watch-link,
.gallery-security .tip-link,
.gallery-amenities .tip-link { display:none !important; }
.safety-view-button,
.safety-back-button {
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-width:118px;
  min-height:44px;
  margin-top:auto;
  padding:0 15px 0 18px;
  border:1px solid rgba(7,16,22,.1);
  border-radius:999px;
  color:#071016;
  background:rgba(255,255,255,.84);
  box-shadow:0 7px 14px rgba(7,16,22,.07);
  font-size:12px;
  font-weight:800;
  transition:background .2s ease,color .2s ease,transform .25s var(--ease),border-color .2s ease;
}
.safety-view-button { align-self:flex-end; }
.safety-view-button span,
.safety-back-button span { font-size:18px; font-weight:400; }
.safety-view-button:hover,.safety-view-button:focus-visible,
.safety-back-button:hover,.safety-back-button:focus-visible { border-color:#08b2e5; color:#fff; background:#071016; transform:translateY(-2px); }
.safety-card-video {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  padding:0;
  background:#071016;
  transform:translateX(100%);
}
.safety-card.is-video .safety-card-front { transform:translateX(-100%); }
.safety-card.is-video .safety-card-video { transform:translateX(0); }
.safety-back-button { position:absolute; top:14px; left:14px; align-self:flex-start; margin:0; border-color:rgba(255,255,255,.4); color:#fff; background:rgba(7,16,22,.72); box-shadow:0 6px 16px rgba(0,0,0,.2); backdrop-filter:blur(8px); }
.safety-video-label { display:none; }
.safety-video-frame { position:absolute; inset:0; overflow:hidden; border-radius:0; background:#000; }
.safety-video-frame iframe { display:block; width:100%; height:100%; border:0; }
.safety-video-empty { display:grid; place-items:center; height:100%; padding:25px; color:rgba(255,255,255,.7); font-size:13px; line-height:1.5; text-align:center; }
.safety-track-controls { display:flex; align-items:center; justify-content:center; gap:18px; margin:0 0 22px; }
.safety-track-progress { display:flex; align-items:center; justify-content:center; gap:7px; }
.safety-track-progress-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; }
.safety-track-progress-button span { display:block; width:32px; height:3px; border-radius:4px; background:#b9c3c7; transition:width .3s var(--ease),height .3s ease,background .3s ease,box-shadow .3s ease; }
.safety-track-progress-button.is-active span,.safety-track-progress-button:hover span,.safety-track-progress-button:focus-visible span { width:42px; height:4px; background:#079ee0; box-shadow:0 0 12px rgba(7,158,224,.22); }
.safety-track-progress-button:focus-visible { outline:2px solid #079ee0; outline-offset:2px; border-radius:8px; }
.safety-track-button { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(7,16,22,.12); border-radius:50%; color:#071016; background:#fff; box-shadow:0 7px 16px rgba(7,16,22,.08); font-size:24px; transition:background .2s ease,color .2s ease,transform .25s var(--ease); }
.safety-track-button:hover,.safety-track-button:focus-visible { color:#fff; background:#079ee0; transform:translateY(-2px); }
.safety-track-button:disabled { opacity:.35; pointer-events:none; }
.gallery-amenities { overflow:hidden; }
.gallery-amenities .tips-grid {
  display:flex;
  flex-wrap:nowrap;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:0 3px 18px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  touch-action:pan-x pan-y;
}
.gallery-amenities .safety-card { position:relative; display:block !important; overflow:hidden; }
.gallery-amenities .tips-grid::-webkit-scrollbar { display:none; }
.gallery-amenities .tip-card { flex:0 0 calc((100% - 54px) / 4); min-width:0; min-height:330px; }
@media (max-width:1100px) {
  .safety-head { grid-template-columns:1fr .75fr; gap:34px; }
  .gallery-security .adas-card,.gallery-security .tip-card,.gallery-amenities .tip-card { flex-basis:calc((100% - 36px) / 3); }
}
@media (max-width:900px) {
  .safety-section { padding:70px 0 54px; }
  .safety-head { grid-template-columns:1fr; gap:24px; margin-bottom:28px; }
  .safety-head>p { max-width:510px; }
  .gallery-security .adas-card,.gallery-security .tip-card,.gallery-amenities .tip-card { flex-basis:calc((100% - 18px) / 2); }
}
@media (max-width:560px) {
  .safety-section { padding:57px 0 44px; }
  .safety-kicker { margin-bottom:15px; font-size:11px; }
  .safety-kicker i { width:70px; }
  .safety-head h2 { font-size:clamp(43px,12vw,59px); }
  .safety-head>p { padding-left:16px; font-size:14px; }
  .gallery-security .adas-grid,.gallery-amenities .tips-grid { gap:12px; }
  .gallery-security .adas-card,.gallery-security .tip-card,.gallery-amenities .tip-card { flex-basis:88vw; min-height:350px; }
  .safety-card-front { padding:20px 18px 18px; }
  .safety-card-front .adas-icon,.safety-card-front .tip-icon { width:82px; height:82px; margin-bottom:21px; }
  .safety-card-front .adas-icon img,.safety-card-front .tip-icon img { width:48px; height:48px; }
  .safety-card-front h3 { font-size:26px; }
  .safety-card-front p { font-size:13px; }
  .safety-track-progress-button { width:44px; height:44px; }
  .safety-track-progress-button span { width:23px; }
  .safety-track-progress-button.is-active span,.safety-track-progress-button:hover span,.safety-track-progress-button:focus-visible span { width:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .safety-card-face { transition:none; }
  .gallery-security .adas-grid,.gallery-amenities .tips-grid { scroll-behavior:auto; }
  .safety-card:hover,.gallery-security .adas-card:hover,.gallery-security .tip-card:hover { transform:none; }
}

/* Mobile card rail: show the next card and give the progress bars a centered, deliberate rhythm. */
@media (max-width:560px) {
  .safety-track-controls,
  .gallery-amenities .safety-track-controls {
    display:flex;
    width:100%;
    margin:0 auto 18px;
    padding:0 8px;
    justify-content:center;
  }
  .safety-track-progress {
    display:flex;
    width:min(100%,320px);
    justify-content:center;
    gap:5px;
  }
  .safety-track-progress-button {
    flex:1 1 0;
    width:auto;
    min-width:25px;
    height:34px;
  }
  .safety-track-progress-button span {
    width:min(100%,24px);
    height:3px;
    background:#aebbc0;
  }
  .safety-track-progress-button.is-active span,
  .safety-track-progress-button:hover span,
  .safety-track-progress-button:focus-visible span {
    width:min(100%,34px);
    height:4px;
    background:#08b2e5;
  }
  .gallery-security .adas-grid,
  .gallery-security .safety-tip-grid,
  .gallery-amenities .tips-grid {
    gap:12px;
    padding:0 2px 17px;
  }
  .gallery-security .adas-card,
  .gallery-security .tip-card,
  .gallery-amenities .tip-card {
    flex:0 0 calc((100% - 18px) / 2.35);
    min-height:310px;
    border-radius:16px;
  }
  .safety-card-front {
    padding:15px 11px 13px;
  }
  .safety-card-front .adas-icon,
  .safety-card-front .tip-icon {
    width:58px;
    height:58px;
    margin-bottom:14px;
  }
  .safety-card-front .adas-icon img,
  .safety-card-front .tip-icon img {
    width:36px;
    height:36px;
  }
  .safety-card-front h3 {
    max-width:none;
    font-size:18px;
    line-height:.98;
  }
  .safety-card-front p {
    max-width:none;
    margin-top:10px;
    font-size:10px;
    line-height:1.35;
  }
  .safety-view-button {
    min-width:76px;
    min-height:38px;
    padding:0 10px 0 12px;
    font-size:10px;
  }
  .safety-view-button span { font-size:16px; }
}

/* Section hierarchy: ADAS, assistances and technology/confort get their own readable row. */
.gallery-security .adas-secondary { display:block !important; margin-top:62px; }
.gallery-security .gallery-subgroup-label { display:none; }
.safety-subsection-heading { margin:0 0 25px; }
.safety-subsection-heading > span { display:block; margin-bottom:13px; color:#06a9dc; font-size:12px; font-weight:800; letter-spacing:.14em; }
.safety-subsection-heading h3 { max-width:690px; margin:0; color:#071016; font-family:"Kia Signature",Arial,sans-serif; font-size:clamp(36px,4vw,58px); line-height:.94; letter-spacing:-.05em; }
.safety-subsection-heading p { max-width:460px; margin:14px 0 0; color:#5d6d74; font-size:14px; line-height:1.55; }
.gallery-security .safety-tip-grid { display:flex !important; flex-wrap:nowrap; gap:18px; width:100%; margin:0; padding:0 3px 18px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; touch-action:pan-x pan-y; }
.gallery-security .safety-tip-grid::-webkit-scrollbar { display:none; }
.gallery-security .safety-tip-grid > .tip-card { flex:0 0 calc((100% - 54px) / 4); min-height:390px; }
.gallery-amenities::before { display:none !important; }
.gallery-amenities .safety-subsection-heading { margin-bottom:28px; }
.gallery-amenities .safety-subsection-heading .safety-track-controls { justify-content:center; margin:16px 0 0; }
.safety-section .safety-card-front h3 { font-size:clamp(24px,2vw,31px); line-height:1; }
.safety-section .safety-card-front p { max-width:260px; margin-top:18px; font-size:14px; line-height:1.55; }
.safety-section .safety-card-front p b { font-size:14px; }
@media (max-width:1100px) {
  .gallery-security .safety-tip-grid > .tip-card { flex-basis:calc((100% - 36px) / 3); }
}
@media (max-width:900px) {
  .gallery-security .adas-secondary { margin-top:50px; }
  .gallery-security .safety-tip-grid > .tip-card { flex-basis:calc((100% - 18px) / 2); }
}
@media (max-width:560px) {
  .gallery-security .adas-secondary { margin-top:40px; }
  .safety-subsection-heading h3 { font-size:clamp(34px,10vw,48px); }
  .safety-subsection-heading p { font-size:13px; }
  .gallery-security .safety-tip-grid { gap:12px; }
  .gallery-security .safety-tip-grid > .tip-card { flex-basis:88vw; min-height:350px; }
  .safety-section .safety-card-front h3 { font-size:26px; }
  .safety-section .safety-card-front p,.safety-section .safety-card-front p b { font-size:13px; }
}