/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
    --background-primary: #FFFFFF;
    --background-secondary: #F4F5F9;
}

html {
    font-size: 100%;
}

.fs16Size,
.fs18Size,
.fs20Size,
.fs24Size,
.fs28Size,
.fs35Size,
.fs38Size,
.fs45Size,
.fs55Size{
  font-size: clamp(var(--min), var(--val), var(--max));
}

/* 16px */
.fs16Size{
  --min: 0.85rem;  /* 13.6px */
  --val: 0.83vw;   /* ~16px przy 1920 */
  --max: 1rem;     /* 16px */
}

/* 18px */
.fs18Size{
  --min: 0.95rem;  /* 15.2px */
  --val: 0.94vw;   /* ~18px przy 1920 */
  --max: 1.125rem; /* 18px */
}

/* 20px */
.fs20Size{
  --min: 1rem;     /* 16px */
  --val: 1.04vw;   /* ~20px przy 1920 */
  --max: 1.25rem;  /* 20px */
}

/* 24px */
.fs24Size{
  --min: 1.125rem; /* 18px */
  --val: 1.25vw;   /* ~24px przy 1920 */
  --max: 1.5rem;   /* 24px */
}

/* 28px */
.fs28Size{
  --min: 1.25rem;  /* 20px */
  --val: 1.46vw;   /* ~28px przy 1920 */
  --max: 1.75rem;  /* 28px */
}

/* 35px */
.fs35Size{
  --min: 1.5rem;   /* 24px */
  --val: 1.82vw;   /* ~35px przy 1920 */
  --max: 2.1875rem;/* 35px */
}

/* 38px */
.fs38Size{
  --min: 1.625rem; /* 26px */
  --val: 1.98vw;   /* ~38px przy 1920 */
  --max: 2.375rem; /* 38px */
}

/* 45px */
.fs45Size{
  --min: 1.875rem; /* 30px */
  --val: 2.34vw;   /* ~45px przy 1920 */
  --max: 2.8125rem;/* 45px */
}

/* 55px */
.fs55Size{
  --min: 2.25rem;  /* 36px */
  --val: 2.86vw;   /* ~55px przy 1920 */
  --max: 3.4375rem;/* 55px */
}



.fsWhite {
    color: white;
}

.gradient-text{
  background: linear-gradient(189.68deg, #0F172A 7.06%, #334F90 70.38%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vehicles-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 64px 80px;
  align-items: start;
}

@media (max-width: 991px){
  .vehicles-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}
@media (max-width: 575px){
  .vehicles-grid{ grid-template-columns: 1fr; gap: 28px; }
}

.vehicle-tile{
  text-align: center;
}

.vehicle-index{
  line-height: 1;
  margin-bottom: 10px;
  color: #3E2DD2; 
  font-weight: 500;
}

.vehicle-label{
  line-height: 1.35;
  color: #0F172A;
  font-weight: 500;
}

.benefits-wrap{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.benefits-grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-height: 360px;
}

/* linie jak na screenie */
.benefits-grid::before,
.benefits-grid::after{
  content: "";
  position: absolute;
  background: rgba(15, 23, 42, 0.2);
  pointer-events: none;
}
.benefits-grid::before{
  width: 1px;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-0.5px);
}
.benefits-grid::after{
  height: 1px;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-0.5px);
}

.benefits-right {
    display: flex;
    justify-content: flex-end;
}

.benefit-item{
  display: grid;
  place-items: center;
  text-align: center;
  padding: 48px 24px;
}

.benefit-icon{
  font-size: 22px;
  line-height: 1;
  margin-bottom: 14px;
}

.benefit-text{
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  color: #0f172a;
}

/* zdjęcie */
.benefits-image img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* RESPONSYWNOŚĆ */
@media (max-width: 991px){
  .benefits-wrap{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .benefits-grid{
    min-height: 320px;
  }
}

@media (max-width: 575px){
  .benefits-grid{
    grid-template-columns: 1fr;
    min-height: unset;
  }

  /* na mobile listujemy zamiast krzyża */
  .benefits-grid::before,
  .benefits-grid::after{
    display: none;
  }

  .benefit-item{
    padding: 22px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  }
  .benefit-item:last-child{
    border-bottom: 0;
  }
}






.ref-slider .splide {
  position: relative;
  padding-bottom: 56px; /* miejsce na nawigację na dole */
}

.ref-slider .splide__arrow {
  position: static;
  transform: none;
  top: auto;
  left: auto;
  right: auto;
  margin: 0;
}

.ref-slider .splide__arrows {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
  display: flex;
  align-items: center;
  gap: 3rem;
  z-index: 5;
  /* width: 300px; */
}

.ref-slider .splide__pagination {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
  margin: 0;
  z-index: 5;
}

.ref-slider .splide__pagination__page {
  width: 8px;
  height: 8px;
  margin: 0;
  opacity: 1;
}

.ref-slider .splide__pagination__page.is-active {
  transform: none;
}

.slider-outside {
  position: relative;
  padding-bottom: 56px;
}

.ref-slider .splide__arrow {
  position: static;
  transform: none;
  margin: 0;
}

.splide__arrows.custom {
  display: block !important;
}

.splide__arrows.custom > * {
  display: inline-flex;
}

.ref-slider .splide__arrow--next {
  border-radius: 50%;
  min-width: 70px;
  min-height: 70px;
  color: #ffffff !important;
  width: 70px !important;
  height: 70px !important;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
  border: 2px solid #FFFFFF;
}

.ref-slider .splide__arrow--prev {
  border-radius: 50%;
  min-width: 70px;
  min-height: 70px;
  color: #ffffff !important;
  width: 70px !important;
  height: 70px !important;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
}

/* ===== Footer layout ===== */
.roc-footer{
  padding: clamp(40px, 6vw, 90px) 0;
}

.roc-footer__grid{
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(24px, 4vw, 80px);
  align-items: start;
}

/* Kolumny */
.roc-footer__brand{
  display: flex;
  align-items: flex-start;
}

.roc-footer__logo{
  max-width: 260px;
  width: 100%;
  height: auto;
}

.roc-footer__title{
  margin: 0 0 16px 0;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.2;
}

.roc-footer__text{
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
}

.roc-footer__text + .roc-footer__text{
  margin-top: 18px;
}

/* Kontakt: wyrównanie do prawej jak na screenie */
.roc-footer__col--right{
  justify-self: end;
  text-align: left; /* na screenie tekst jest lewostronnie w kolumnie, tylko kolumna siedzi po prawej */
  min-width: min(320px, 100%);
}

/* Link + ikonka */
.roc-footer__social{
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.roc-footer__link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 16px;
}

.roc-footer__icon{
  font-size: 18px;
  line-height: 1;
}

/* ===== Responsywność ===== */
@media (max-width: 1024px){
  .roc-footer__grid{
    grid-template-columns: 1fr 1fr;
  }

  .roc-footer__brand{
    grid-column: 1 / -1;
  }

  .roc-footer__col--right{
    justify-self: start;
    min-width: 0;
  }
}

@media (max-width: 640px){
  .roc-footer__grid{
    grid-template-columns: 1fr;
  }

  .roc-footer__brand{
    grid-column: auto;
  }

  .roc-footer__logo{
    max-width: 220px;
  }
}