/* path: core/static/ui/css/blocks/transport_formats.css */

/* =============================================================================
   Transport Formats
   ============================================================================= */

.TransportFormats__body{
  margin-bottom:0;
}

.TransportFormats__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
}

.TransportCard{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  padding:var(--space-4);
}

.TransportCard__media{
  position:relative;
  overflow:hidden;
  min-height:220px;
  border-radius:var(--r-m);
  background:var(--surface-2);
}

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

.TransportCard__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  object-position:center center;
  transform:scale(.86);
}

/* левая карточка */
.TransportCard:first-child .TransportCard__img{
  object-position:center 58%;
  transform:scale(.84);
}

/* правая карточка */
.TransportCard:last-child .TransportCard__img{
  object-position:center 56%;
  transform:scale(.84);
}

.TransportCard__mediaContent{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.TransportCard__badge{
  position:absolute;
  top:18px;
  left:18px;
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 var(--space-2);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent);
  font-size:.875rem;
  font-weight:700;
  line-height:1;
}

/* немного отдельно докручиваем правую карточку */
.TransportCard:last-child .TransportCard__badge{
  top:20px;
  left:20px;
}

.TransportCard__bodyInner{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-width:0;
  padding-top:var(--space-4);
}

.TransportCard__title{
  margin:0 0 var(--space-2);
  font-size:1.25rem;
  line-height:1.1;
}

.TransportCard__desc{
  margin:0;
  color:var(--text-2);
  line-height:1.45;
}

.TransportCard__priceBlock{
  margin-top:var(--space-4);
}

.TransportCard__price{
  margin:0 0 6px;
  color:var(--text);
  font-family:var(--font-head);
  font-size:1.5rem;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.01em;
}

.TransportCard__priceNote{
  margin:0;
  color:var(--text-3);
  font-size:.9375rem;
  line-height:1.45;
}

.TransportCard__list{
  display:grid;
  gap:var(--space-2);
  margin:var(--space-4) 0 0;
  padding:0;
  list-style:none;
}

.TransportCard__item{
  position:relative;
  min-width:0;
  padding-left:var(--space-4);
  color:var(--text-2);
  line-height:1.45;
}

.TransportCard__item::before{
  content:"";
  position:absolute;
  top:.62em;
  left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  transform:translateY(-50%);
}

.TransportCard__footer{
  margin-top:var(--space-4);
  padding-top:var(--space-4);
  border-top:1px solid var(--divider-2);
}

.TransportCard__button{
  width:100%;
}

@media (min-width:768px){
  .TransportFormats__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-4);
    align-items:stretch;
  }

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

  .TransportCard__media{
    min-height:240px;
  }

  .TransportCard:first-child .TransportCard__img{
    object-position:center 58%;
    transform:scale(.82);
  }

  .TransportCard:last-child .TransportCard__img{
    object-position:center 56%;
    transform:scale(.82);
  }

  .TransportCard__badge{
    top:18px;
    left:18px;
  }

  .TransportCard:last-child .TransportCard__badge{
    top:22px;
    left:20px;
  }

  .TransportCard__title{
    font-size:1.3rem;
  }
}

@media (min-width:1024px){
  .TransportCard__media{
    min-height:260px;
  }

  .TransportCard:first-child .TransportCard__img{
    object-position:center 58%;
    transform:scale(.84);
  }

  .TransportCard:last-child .TransportCard__img{
    object-position:center 56%;
    transform:scale(.84);
  }

  .TransportCard__badge{
    top:18px;
    left:18px;
  }

  .TransportCard:last-child .TransportCard__badge{
    top:24px;
    left:22px;
  }

  .TransportCard__price{
    font-size:1.625rem;
  }
}