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

/* =============================================================================
   Full Autopark
   ============================================================================= */

.FullAutopark{
  padding-top:0;
}

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

/* =============================================================================
   Filters
   ============================================================================= */

.FullAutopark__filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:28px;
}

.FullAutopark__filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border:1px solid var(--divider-2);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  color:var(--text);
  font:inherit;
  font-size:.94rem;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    transform .08s ease;
}

.FullAutopark__filter:hover{
  border-color:var(--divider-3);
  background:rgba(255,255,255,.04);
}

.FullAutopark__filter:active{
  transform:translateY(1px);
}

.FullAutopark__filter:focus-visible{
  outline:none;
  border-color:rgba(255,255,255,.18);
  box-shadow:0 0 0 2px rgba(207,133,36,.18);
}

.FullAutopark__filter.is-active{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  color:#fff;
  font-weight:700;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}

/* =============================================================================
   Groups
   ============================================================================= */

.FullAutoparkGroup__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

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

.FullAutoparkCard{
  overflow:hidden;
}

.FullAutoparkCard--featured{
  border-color:rgba(207,133,36,.34);
  box-shadow:0 0 0 1px rgba(207,133,36,.08) inset;
}

.FullAutoparkCard__media{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16 / 8.8;
  margin:12px 12px 0;
  padding:10px 12px 0;
  border:1px solid var(--divider-2);
  border-radius:var(--r-m);
  background:var(--surface-2);
  overflow:hidden;
}

.FullAutoparkCard__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.22) 0%,
    rgba(0,0,0,.08) 24%,
    rgba(0,0,0,0) 52%
  );
  pointer-events:none;
  z-index:1;
}

.FullAutoparkCard__img{
  position:relative;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center 58%;
  transform:scale(.84);
}

.FullAutoparkCard__badge{
  position:absolute;
  top:10px;
  left:9px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(207,133,36,.24);
  border-radius:999px;
  background:rgba(207,133,36,.14);
  color:rgba(255,255,255,.94);
  font-size:.72rem;
  line-height:1;
  font-weight:700;
  letter-spacing:0;
}

.FullAutoparkCard__body{
  display:grid;
  gap:13px;
  padding:14px;
}

.FullAutoparkCard__title{
  margin:0;
  color:var(--text);
  font-size:1.34rem;
  line-height:1.1;
  letter-spacing:-.02em;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-wrap:pretty;
}

.FullAutoparkCard__hint{
  margin:0;
  color:var(--text-2);
  font-size:.96rem;
  line-height:1.34;
  font-weight:500;
}

/* =============================================================================
   Recommendation block
   ============================================================================= */

.FullAutoparkCard__extra{
  position:relative;
  display:grid;
  gap:6px;
  padding:12px 14px;
  border-radius:var(--r-m);
  background:rgba(255,255,255,.018);
}

.FullAutoparkCard__extraBracket{
  position:absolute;
  width:16px;
  height:16px;
  pointer-events:none;
  z-index:1;
}

.FullAutoparkCard__extraBracket--tl{
  top:0;
  left:0;
  border-top:1.5px solid rgba(207,133,36,.40);
  border-left:1.5px solid rgba(207,133,36,.40);
  border-top-left-radius:9px;
}

.FullAutoparkCard__extraBracket--tr{
  top:0;
  right:0;
  border-top:1.5px solid rgba(207,133,36,.40);
  border-right:1.5px solid rgba(207,133,36,.40);
  border-top-right-radius:9px;
}

.FullAutoparkCard__extraBracket--bl{
  bottom:0;
  left:0;
  border-bottom:1.5px solid rgba(207,133,36,.40);
  border-left:1.5px solid rgba(207,133,36,.40);
  border-bottom-left-radius:9px;
}

.FullAutoparkCard__extraBracket--br{
  bottom:0;
  right:0;
  border-bottom:1.5px solid rgba(207,133,36,.40);
  border-right:1.5px solid rgba(207,133,36,.40);
  border-bottom-right-radius:9px;
}

.FullAutoparkCard__extraTitle,
.FullAutoparkCard__extraText{
  position:relative;
  z-index:2;
  margin:0;
}

.FullAutoparkCard__extraTitle{
  color:var(--text);
  font-size:.88rem;
  line-height:1.18;
  font-weight:600;
}

.FullAutoparkCard__extraText{
  max-width:34ch;
  color:var(--text-2);
  font-size:.90rem;
  line-height:1.36;
}

/* =============================================================================
   Footer inside card
   ============================================================================= */

.FullAutoparkCard__footer{
  display:grid;
  gap:10px;
}

/* =============================================================================
   Details
   ============================================================================= */

.FullAutoparkCard__details{
  overflow:hidden;
  border:1px solid var(--divider);
  border-radius:var(--r-m);
  background:rgba(255,255,255,.024);
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.FullAutoparkCard__details:hover{
  border-color:var(--divider-2);
  background:rgba(255,255,255,.03);
}

.FullAutoparkCard__summary{
  position:relative;
  display:block;
  padding:13px 44px 13px 14px;
  cursor:pointer;
  color:var(--text);
  font-size:.96rem;
  line-height:1.2;
  font-weight:600;
  list-style:none;
  border-bottom:1px solid transparent;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.FullAutoparkCard__summary::-webkit-details-marker{
  display:none;
}

.FullAutoparkCard__summary::after{
  content:"+";
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%);
  color:var(--accent);
  font-size:1.08rem;
  font-weight:700;
  line-height:1;
  transition:
    opacity .18s ease,
    color .18s ease,
    transform .18s ease;
}

.FullAutoparkCard__details[open]{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.028);
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}

.FullAutoparkCard__details[open] .FullAutoparkCard__summary{
  background:rgba(255,255,255,.03);
  border-bottom-color:rgba(255,255,255,.07);
}

.FullAutoparkCard__details[open] .FullAutoparkCard__summary::after{
  content:"−";
  color:var(--accent);
  opacity:1;
}

/* =============================================================================
   Specs inside details
   ============================================================================= */

.FullAutoparkCard__specs{
  list-style:none;
  margin:0;
  padding:10px 14px 12px;
  display:grid;
  gap:0;
}

.FullAutoparkCard__spec{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.FullAutoparkCard__spec:last-child{
  border-bottom:0;
}

.FullAutoparkCard__spec span{
  color:var(--text-2);
  font-size:.93rem;
  line-height:1.2;
}

.FullAutoparkCard__spec strong{
  color:#fff;
  font-size:.96rem;
  line-height:1.2;
  font-weight:700;
  text-align:right;
}

/* =============================================================================
   Details text body
   ============================================================================= */

.FullAutoparkCard__detailsBody{
  display:grid;
  gap:8px;
  padding:12px 14px 14px;
}

.FullAutoparkCard__detailsBody p{
  margin:0;
  color:var(--text-2);
  font-size:.92rem;
  line-height:1.44;
}

/* =============================================================================
   Actions
   ============================================================================= */

.FullAutoparkCard__btn{
  width:100%;
  margin-top:6px;
}

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

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

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

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

.FullAutoparkLead__title{
  margin:0 0 8px;
  color:var(--text);
  font-size:1.56rem;
  line-height:1.06;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.FullAutoparkLead__text{
  margin:0;
  max-width:52ch;
  color:var(--text-2);
}

.FullAutoparkLead__form,
.FullAutoparkLead__grid,
.FullAutoparkLead__field{
  display:grid;
  gap:var(--space-3);
}

.FullAutoparkLead__field{
  min-width:0;
}

.FullAutoparkLead__input,
.FullAutoparkLead__select{
  width:100%;
  min-height:var(--h-input);
  padding:0 14px;
  border:1px solid var(--divider-2);
  border-radius:var(--r-m);
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

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

.FullAutoparkLead__input:focus,
.FullAutoparkLead__select:focus{
  outline:none;
  border-color: var(--divider-2)
}

.FullAutoparkLead__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;
}

.FullAutoparkLead__check{
  display:grid;
  grid-template-columns:20px 1fr;
  column-gap:10px;
  align-items:start;
  cursor:pointer;
}

.FullAutoparkLead__checkInput{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.FullAutoparkLead__checkBox{
  position:relative;
  width:20px;
  height:20px;
  border:1px solid var(--divider-2);
  border-radius:6px;
  background:var(--surface-2);
  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.FullAutoparkLead__checkText{
  margin-top:1px;
  color:var(--text-2);
  font-size:.92rem;
  line-height:1.4;
}

.FullAutoparkLead__checkInput:checked + .FullAutoparkLead__checkBox{
  border-color:rgba(207,133,36,.45);
  background:rgba(207,133,36,.18);
}

.FullAutoparkLead__checkInput:checked + .FullAutoparkLead__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);
}

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

.FullAutoparkLead__submit{
  width:100%;
}

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

@media (min-width:768px){
  .FullAutopark__body{
    gap:18px;
  }

  .FullAutopark__filters{
    margin-bottom:30px;
  }

  .FullAutopark__filter{
    min-height:44px;
    padding:0 17px;
    font-size:.95rem;
  }

  .FullAutoparkGroup__grid{
    gap:18px;
  }

  .FullAutoparkCard__media{
    margin:14px 14px 0;
    padding:12px 14px 0;
    aspect-ratio:16 / 8.6;
  }

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

  .FullAutoparkCard__body{
    gap:14px;
    padding:16px;
  }

  .FullAutoparkCard__title{
    font-size:1.42rem;
  }

  .FullAutoparkCard__hint{
    font-size:1rem;
  }

  .FullAutoparkCard__extra{
    padding:12px 13px 12px 15px;
  }

  .FullAutoparkCard__summary{
    padding:14px 46px 14px 14px;
    font-size:.97rem;
  }

  .FullAutoparkCard__summary::after{
    font-size:1.12rem;
  }

  .FullAutoparkCard__specs{
    padding:12px 14px;
  }

  .FullAutoparkCard__spec{
    padding:13px 0;
  }

  .FullAutoparkCard__detailsBody{
    padding:13px 14px 14px;
  }

  .FullAutoparkCard__btn{
    margin-top:8px;
  }

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

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

  .FullAutoparkLead__grid{
    grid-template-columns:1fr 1fr;
  }
}

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

@media (min-width:1100px){
  .FullAutopark__body{
    gap:24px;
  }

  .FullAutopark__filters{
    gap:12px;
    margin-bottom:30px;
  }

  .FullAutoparkGroup__grid{
    gap:24px;
  }

  .FullAutoparkCard{
    display:grid;
    grid-template-columns:minmax(0, .92fr) minmax(560px, 1.08fr);
    align-items:stretch;
  }

  .FullAutoparkCard--featured{
    border-color:rgba(207,133,36,.22);
    box-shadow:0 0 0 1px rgba(207,133,36,.04) inset;
  }

  .FullAutoparkCard__media{
    min-height:320px;
    margin:14px 0 14px 14px;
    padding:18px 20px 0;
    aspect-ratio:auto;
  }

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

  .FullAutoparkCard__badge{
    top:12px;
    left:12px;
  }

  .FullAutoparkCard__body{
    align-content:start;
    gap:9px;
    padding:18px 20px 18px 22px;
  }

  .FullAutoparkCard__title{
    font-size:1.54rem;
    line-height:1.06;
    text-wrap:nowrap;
    white-space:nowrap;
  }

  .FullAutoparkCard__hint{
    font-size:1rem;
    line-height:1.28;
    margin-bottom:4px;
  }

  .FullAutoparkCard__extra{
    gap:5px;
    padding:10px 13px 10px 14px;
    margin-bottom:2px;
  }

  .FullAutoparkCard__extraTitle{
    font-size:.86rem;
  }

  .FullAutoparkCard__extraText{
    max-width:42ch;
    font-size:.88rem;
    line-height:1.34;
  }

  .FullAutoparkCard__footer{
    gap:9px;
    margin-top:4px;
  }

  .FullAutoparkCard__details{
    background:rgba(255,255,255,.022);
  }

  .FullAutoparkCard__summary{
    padding:12px 44px 12px 14px;
    font-size:.95rem;
    line-height:1.18;
  }

  .FullAutoparkCard__summary::after{
    right:15px;
    font-size:1.02rem;
  }

  .FullAutoparkCard__specs{
    padding:10px 14px 12px;
  }

  .FullAutoparkCard__spec{
    padding:11px 0;
  }

  .FullAutoparkCard__spec span{
    font-size:.91rem;
  }

  .FullAutoparkCard__spec strong{
    font-size:.94rem;
  }

  .FullAutoparkCard__detailsBody{
    gap:7px;
    padding:11px 14px 13px;
  }

  .FullAutoparkCard__detailsBody p{
    font-size:.90rem;
    line-height:1.4;
  }

  .FullAutoparkCard__btn{
    margin-top:8px;
  }

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

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

  .FullAutoparkLead__grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    align-items:stretch;
  }

  .FullAutoparkLead__check{
    min-height:100%;
    align-content:start;
  }
}

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

@media (min-width:1360px){
  .FullAutopark__filters{
    margin-bottom:32px;
  }

  .FullAutoparkGroup__grid{
    gap:28px;
  }

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

  .FullAutoparkCard__media{
    min-height:340px;
    margin:16px 0 16px 16px;
    padding:20px 22px 0;
  }

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

  .FullAutoparkCard__body{
    gap:10px;
    padding:20px 22px 20px 24px;
  }

  .FullAutoparkCard__title{
    font-size:1.62rem;
  }

  .FullAutoparkCard__hint{
    margin-bottom:4px;
  }

  .FullAutoparkCard__extra{
    padding:11px 14px 11px 15px;
  }

  .FullAutoparkCard__extraText{
    max-width:44ch;
  }

  .FullAutoparkCard__footer{
    gap:10px;
    margin-top:4px;
  }

  .FullAutoparkCard__summary{
    padding:13px 46px 13px 15px;
  }

  .FullAutoparkCard__summary::after{
    right:16px;
  }

  .FullAutoparkCard__detailsBody{
    padding:12px 15px 14px;
  }

  .FullAutoparkCard__specs{
    padding:11px 15px 13px;
  }

  .FullAutoparkCard__btn{
    margin-top:10px;
  }

  .FullAutoparkLead__inner{
    padding:28px;
  }
}