/* =============================================================
   SVIGRAD — "Razlika se vidi odmah"
   Premium before/after comparison slider + 3 benefits.
   White section; pairs with the termofasada page.
   ============================================================= */

.ba-section {
   background: #ffffff;
   color: #222222;
   padding: 110px 0 120px;
   border-top: 1px solid #ededed;
}

.ba-inner {
   max-width: 1120px;
   margin-inline: auto;
   padding-inline: 2rem;
}

/* ---------- Header ---------- */
.ba-head {
   max-width: 720px;
   margin: 0 auto 56px;
   text-align: center;
}

.ba-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
   font-size: 0.76rem;
   font-weight: 700;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: #1E6FA8;
   margin-bottom: 1.25rem;
}

.ba-eyebrow::before,
.ba-eyebrow::after {
   content: "";
   width: 26px;
   height: 1px;
   background: #cdd3d0;
}

.ba-title {
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.015em;
   color: #1a1a1a;
   margin-bottom: 1.4rem;
   text-wrap: balance;
}

.ba-intro {
   font-size: 1.15rem;
   line-height: 1.7;
   color: #5f6562;
   text-wrap: pretty;
}

/* ---------- Slider ---------- */
.ba-slider {
   --pos: 50%;
   position: relative;
   width: 100%;
   aspect-ratio: 16 / 10;
   border-radius: 0.9rem;
   overflow: hidden;
   box-shadow: 0 40px 80px -40px rgba(34, 34, 34, .5);
   user-select: none;
   touch-action: pan-y;
   background: #e9eae9;
}

.ba-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   pointer-events: none;
}

/* the "before" layer is clipped to the handle position */
.ba-img--before {
   clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* corner labels */
.ba-label {
   position: absolute;
   top: 18px;
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: #ffffff;
   background: rgba(34, 34, 34, .62);
   backdrop-filter: blur(3px);
   padding: 0.4rem 0.85rem;
   border-radius: 9999px;
   z-index: 3;
   pointer-events: none;
}

.ba-label--before {
   left: 18px;
}

.ba-label--after {
   right: 18px;
   background: rgba(30, 111, 168, .82);
}

/* divider line + handle */
.ba-line {
   position: absolute;
   top: 0;
   bottom: 0;
   left: var(--pos);
   width: 2px;
   background: #ffffff;
   transform: translateX(-50%);
   box-shadow: 0 0 0 1px rgba(34, 34, 34, .08);
   z-index: 4;
   pointer-events: none;
}

.ba-handle {
   position: absolute;
   top: 50%;
   left: var(--pos);
   width: 52px;
   height: 52px;
   border-radius: 9999px;
   background: #ffffff;
   transform: translate(-50%, -50%);
   box-shadow: 0 6px 18px -4px rgba(34, 34, 34, .45);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3px;
   z-index: 5;
   pointer-events: none;
   transition: box-shadow .2s ease;
}

.ba-slider:hover .ba-handle {
   box-shadow: 0 8px 22px -4px rgba(30, 111, 168, .55);
}

.ba-handle svg {
   width: 20px;
   height: 20px;
   stroke: #1E6FA8;
   stroke-width: 2;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* the range input drives --pos; invisible but covers the frame */
.ba-range {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   opacity: 0;
   cursor: ew-resize;
   z-index: 6;
}

.ba-range:focus-visible+.ba-focus {
   opacity: 1;
}

.ba-focus {
   position: absolute;
   inset: 0;
   border-radius: 0.9rem;
   box-shadow: inset 0 0 0 3px #1E6FA8;
   opacity: 0;
   pointer-events: none;
   z-index: 7;
}

.ba-hint {
   margin-top: 1rem;
   text-align: center;
   font-size: 0.88rem;
   color: #9aa19d;
}

/* ---------- Benefits ---------- */
.ba-benefits {
   margin-top: 64px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2rem;
}

.ba-benefit {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 1rem;
}

.ba-benefit__icon {
   width: 56px;
   height: 56px;
   border-radius: 0.7rem;
   background: #EDF4F9;
   color: #1E6FA8;
   display: flex;
   align-items: center;
   justify-content: center;
}

.ba-benefit__icon svg {
   width: 27px;
   height: 27px;
   stroke: currentColor;
   stroke-width: 1.7;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.ba-benefit__title {
   font-size: 1.15rem;
   font-weight: 600;
   color: #1a1a1a;
   letter-spacing: -0.01em;
}

.ba-benefit__desc {
   font-size: 0.98rem;
   line-height: 1.65;
   color: #5f6562;
   max-width: 28ch;
   text-wrap: pretty;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
   .ba-section {
      padding: 80px 0 90px;
   }

   .ba-slider {
      aspect-ratio: 4 / 3;
   }

   .ba-benefits {
      grid-template-columns: 1fr;
      gap: 2.5rem;
      margin-top: 48px;
   }
}