/* path: src/calc/static/calc/css/blocks/calculator_quote_cards.css */

/* =============================================================================
   Calculator Quote Cards
   ============================================================================= */

.CalcQuotes{
  margin-bottom:0;
}

.CalcQuotes__head{
  margin-bottom:var(--space-3);
}

.CalcQuotes__title{
  margin:0;
}

/* =============================================================================
   Grid
   ============================================================================= */

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

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

.QuoteCard{
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  padding:var(--space-3);
  border:1px solid var(--divider);
  border-radius:var(--r-m);
  background:var(--surface);
}

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

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

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

.QuoteCard:first-child .QuoteCard__img{
  object-position:center 58%;
  transform:scale(.765);
}

.QuoteCard:last-child .QuoteCard__img{
  object-position:center 56%;
  transform:scale(.765);
}

/* =============================================================================
   Body
   ============================================================================= */

.QuoteCard__bodyInner{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-width:0;
  padding-top:12px;
}

.QuoteCard__label{
  margin:0 0 4px;
  color: var(--accent);
  font-size:.93rem;
  line-height:1.2;
  letter-spacing:-.01em;
}

.QuoteCard__title{
  margin:0 0 8px;
  color:var(--text);
  font-size:1.25rem;
  line-height:1.08;
  letter-spacing:-.02em;
}

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

.QuoteCard__priceBlock{
  margin-top:12px;
}

.QuoteCard__price{
  margin:0;
  color:var(--accent);
  font-family:var(--font-head);
  font-size:1.55rem;
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.01em;
}

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

@media (min-width:768px){
  .CalcQuotes__head{
    margin-bottom:var(--space-4);
  }

  .CalcQuotes__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-4);
    align-items:stretch;
  }

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

  .QuoteCard__media{
    min-height:188px;
  }

  .QuoteCard__img{
    transform:scale(.765);
  }

  .QuoteCard:first-child .QuoteCard__img{
    object-position:center 58%;
    transform:scale(.755);
  }

  .QuoteCard:last-child .QuoteCard__img{
    object-position:center 56%;
    transform:scale(.755);
  }

  .QuoteCard__bodyInner{
    padding-top:14px;
  }

  .QuoteCard__label{
    margin-bottom:5px;
  }

  .QuoteCard__title{
    margin-bottom:9px;
    font-size:1.32rem;
  }

  .QuoteCard__priceBlock{
    margin-top:14px;
  }
}

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

@media (min-width:1024px){
  .QuoteCard__media{
    min-height:204px;
  }

  .QuoteCard__img{
    transform:scale(.775);
  }

  .QuoteCard:first-child .QuoteCard__img{
    object-position:center 58%;
    transform:scale(.765);
  }

  .QuoteCard:last-child .QuoteCard__img{
    object-position:center 56%;
    transform:scale(.765);
  }

  .QuoteCard__title{
    font-size:1.36rem;
  }

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