/* path: src/core/static/ui/css/blocks/business_full_autopark.css */


/* =============================================================================
   Business full autopark
   ============================================================================= */

.BusinessFullAutopark{
  padding-top:0;
}

.BusinessFullAutopark__list{
  display:grid;
  gap:16px;
}

.BusinessFullAutopark__empty{
  margin:0;
  color:var(--text-2);
}


/* =============================================================================
   Card
   ============================================================================= */

.BusinessFleetCard{
  overflow:hidden;
}

.BusinessFleetCard__media{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  min-height:220px;

  margin:12px 12px 0;
  padding:10px 12px 0;

  border-radius:var(--r-s);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025) 0%,
      rgba(255,255,255,.01) 40%,
      rgba(0,0,0,.10) 100%
    ),
    var(--surface-2);

  overflow:hidden;
}

.BusinessFleetCard__media::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      80% 60% at 50% 0%,
      rgba(255,255,255,.05) 0%,
      rgba(255,255,255,.018) 40%,
      transparent 75%
    );

  pointer-events:none;
}

.BusinessFleetCard__media::after{
  content:"";

  position:absolute;
  inset:auto 0 0 0;

  height:42%;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.05) 50%,
      rgba(0,0,0,.13) 100%
    );

  pointer-events:none;
}

.BusinessFleetCard__img{
  position:relative;
  z-index:1;

  display:block;

  width:100%;
  height:100%;

  max-width:100%;
  max-height:100%;

  object-fit:contain;
  object-position:center;

  transform:scale(.88);

  filter:
    contrast(1.04)
    brightness(1.02);
}


/* =============================================================================
   Card content
   ============================================================================= */

.BusinessFleetCard__body{
  display:flex;
  flex-direction:column;

  gap:var(--space-3);

  padding:var(--space-4);
}

.BusinessFleetCard__head{
  min-width:0;
}

.BusinessFleetCard__title{
  margin:0;

  color:var(--text);

  font-size:1.34rem;
  line-height:1.1;

  letter-spacing:-.02em;

  font-weight:700;

  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;

  text-wrap:pretty;
}


/* =============================================================================
   Specs
   ============================================================================= */

.BusinessFleetCard__specs{
  display:grid;

  gap:var(--space-1);

  margin:0;
  padding:0;

  list-style:none;
}

.BusinessFleetCard__spec{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:var(--space-3);

  min-height:40px;

  padding:0 14px;

  border-radius:var(--r-s);

  background:rgba(255,255,255,.02);
}

.BusinessFleetCard__spec span{
  color:var(--text-2);

  font-size:1rem;
  line-height:1.2;
}

.BusinessFleetCard__spec strong{
  color:var(--text);

  font-size:1rem;
  line-height:1.2;

  font-weight:500;

  text-align:right;
  white-space:nowrap;
}


/* =============================================================================
   Action
   ============================================================================= */

.BusinessFleetCard__btn{
  width:100%;

  margin-top:auto;
}


/* =============================================================================
   Lead
   ============================================================================= */

.BusinessFleetLead{
  margin-top:var(--space-6);
}

.BusinessFleetLead__inner{
  padding:var(--space-4);
}

.BusinessFleetLead__head{
  margin-bottom:var(--space-4);
}

.BusinessFleetLead__title{
  margin:0 0 8px;

  color:var(--text);

  font-size:1.56rem;
  line-height:1.06;

  letter-spacing:-.02em;

  text-wrap:balance;
}

.BusinessFleetLead__text{
  max-width:52ch;

  margin:0;

  color:var(--text-2);
}

.BusinessFleetLead__form{
  display:grid;
  gap:var(--space-3);
}

.BusinessFleetLead__grid{
  display:grid;
  gap:var(--space-3);
}

.BusinessFleetLead__field{
  display:grid;

  min-width:0;
}

.BusinessFleetLead__input,
.BusinessFleetLead__select{
  width:100%;
  min-height:var(--h-input);

  padding:0 14px;

  border:1px solid var(--divider-2);
  border-radius:var(--r-s);

  background:var(--surface-2);
  color:var(--text);

  font:inherit;

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.BusinessFleetLead__input::placeholder{
  color:var(--text-3);
}

.BusinessFleetLead__input:focus,
.BusinessFleetLead__select:focus{
  outline:none;

  border-color:var(--divider-3);
}

.BusinessFleetLead__select{
  appearance:none;
  -webkit-appearance:none;

  padding-right:40px;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      var(--text-2) 50%
    ),
    linear-gradient(
      135deg,
      var(--text-2) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 20px) calc(50% - 3px),
    calc(100% - 14px) calc(50% - 3px);

  background-size:
    6px 6px,
    6px 6px;

  background-repeat:no-repeat;
}

.BusinessFleetLead__submit{
  width:100%;
}


/* =============================================================================
   Consent
   ============================================================================= */

.BusinessFleetLead__bottom{
  margin-top:var(--space-1);
}

.BusinessFleetLead__check{
  display:grid;

  grid-template-columns:20px 1fr;

  column-gap:10px;

  align-items:start;

  cursor:pointer;
}

.BusinessFleetLead__checkInput{
  position:absolute;

  opacity:0;

  pointer-events:none;
}

.BusinessFleetLead__checkBox{
  position:relative;

  width:20px;
  height:20px;

  border:1px solid var(--divider-2);
  border-radius:5px;

  background:var(--surface-2);

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.BusinessFleetLead__checkText{
  margin-top:1px;

  color:var(--text-2);

  font-size:.92rem;
  line-height:1.4;
}

.BusinessFleetLead__checkLink{
  color:var(--text-2);

  text-decoration:underline;
  text-underline-offset:2px;
}

.BusinessFleetLead__checkLink:hover{
  color:var(--accent);
}

.BusinessFleetLead__checkInput:checked +
.BusinessFleetLead__checkBox{
  border-color:rgba(207,133,36,.45);

  background:rgba(207,133,36,.18);
}

.BusinessFleetLead__checkInput:checked +
.BusinessFleetLead__checkBox::after{
  content:"";

  position:absolute;

  left:6px;
  top:2px;

  width:5px;
  height:10px;

  border-right:2px solid #fff;
  border-bottom:2px solid #fff;

  transform:rotate(45deg);
}

.BusinessFleetLead__checkInput:focus-visible +
.BusinessFleetLead__checkBox{
  box-shadow:
    0 0 0 2px rgba(207,133,36,.18);
}


/* =============================================================================
   Tablet
   ============================================================================= */

@media (min-width:768px){

  .BusinessFullAutopark__list{
    gap:18px;
  }

  .BusinessFleetCard__media{
    min-height:260px;

    margin:14px 14px 0;
    padding:14px;
  }

  .BusinessFleetCard__title{
    font-size:1.42rem;
  }

  .BusinessFleetLead{
    margin-top:var(--space-7);
  }

  .BusinessFleetLead__inner{
    padding:var(--space-5);
  }

  .BusinessFleetLead__grid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* =============================================================================
   Desktop
   ============================================================================= */

@media (min-width:1100px){

  .BusinessFullAutopark__list{
    gap:24px;
  }

  .BusinessFleetCard{
    display:grid;

    grid-template-columns:
      minmax(0, .92fr)
      minmax(520px, 1.08fr);

    align-items:stretch;
  }

  .BusinessFleetCard__media{
    min-height:300px;

    margin:14px 0 14px 14px;

    padding:18px 20px;
  }

  .BusinessFleetCard__img{
    transform:scale(.82);
  }

  .BusinessFleetCard__body{
    justify-content:center;

    gap:var(--space-3);

    padding:20px 22px;
  }

  .BusinessFleetCard__title{
    font-size:1.54rem;
    line-height:1.06;

    text-wrap:nowrap;
    white-space:nowrap;
  }

  .BusinessFleetLead__form{
    gap:var(--space-4);
  }

  .BusinessFleetLead__grid{
    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    align-items:stretch;
  }
}


/* =============================================================================
   Wide desktop
   ============================================================================= */

@media (min-width:1360px){

  .BusinessFullAutopark__list{
    gap:28px;
  }

  .BusinessFleetCard{
    grid-template-columns:
      minmax(0, .88fr)
      minmax(620px, 1.12fr);
  }

  .BusinessFleetCard__media{
    min-height:320px;

    margin:16px 0 16px 16px;

    padding:20px 22px;
  }

  .BusinessFleetCard__img{
    transform:scale(.80);
  }

  .BusinessFleetCard__body{
    padding:22px 24px;
  }

  .BusinessFleetCard__title{
    font-size:1.62rem;
  }
}