/* YARDSNIPE FEATURED VEHICLES V1

   Compact classifieds / old AutoTrader-inspired layout */



.ys-featured-section {

  padding: 34px 0 38px;

  background:

    linear-gradient(

      180deg,

      rgba(11, 20, 16, 0.98),

      rgba(5, 11, 8, 0.98)

    );

  border-top: 1px solid rgba(75, 255, 145, 0.14);

  border-bottom: 1px solid rgba(75, 255, 145, 0.14);

}



.ys-featured-heading {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 22px;

  margin-bottom: 18px;

}



.ys-featured-heading h2 {

  margin: 4px 0 5px;

}



.ys-featured-heading p {

  margin-bottom: 0;

}



.ys-featured-view-all {

  flex: 0 0 auto;

  font-weight: 800;

  text-decoration: none;

}



.ys-featured-grid {

  display: grid;

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

  gap: 10px;

}



.ys-featured-card {

  min-width: 0;

  overflow: hidden;

  color: inherit;

  text-decoration: none;

  background: #101813;

  border: 1px solid rgba(255, 255, 255, 0.11);

  border-radius: 5px;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);

  transition:

    transform 120ms ease,

    border-color 120ms ease,

    box-shadow 120ms ease;

}



.ys-featured-card:hover,

.ys-featured-card:focus-visible {

  transform: translateY(-2px);

  border-color: rgba(75, 255, 145, 0.7);

  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.36);

}



.ys-featured-photo {

  position: relative;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  background: #080d0a;

}



.ys-featured-photo img {

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;

}



.ys-featured-photo-fallback {

  width: 100%;

  height: 100%;

  place-items: center;

  font-size: 1.6rem;

  font-weight: 900;

  letter-spacing: 0.08em;

  color: #54ff92;

  background:

    radial-gradient(

      circle at center,

      rgba(46, 132, 75, 0.25),

      #080d0a 72%

    );

}



.ys-featured-photo-fallback:not([hidden]) {

  display: grid;

}



.ys-featured-copy {

  padding: 9px 9px 10px;

}



.ys-featured-title {

  overflow: hidden;

  margin-bottom: 5px;

  color: #f4fff7;

  font-size: 0.93rem;

  font-weight: 900;

  line-height: 1.15;

  white-space: nowrap;

  text-overflow: ellipsis;

}



.ys-featured-yard {

  overflow: hidden;

  color: #c7d5cc;

  font-size: 0.75rem;

  font-weight: 700;

  line-height: 1.25;

  white-space: nowrap;

  text-overflow: ellipsis;

}



.ys-featured-location,

.ys-featured-arrival {

  margin-top: 2px;

  color: #91a399;

  font-size: 0.7rem;

  line-height: 1.25;

}



.ys-featured-arrival {

  color: #c2d6c8;

}



.ys-featured-trust {

  margin-top: 7px;

}



.ys-featured-status {

  display: inline-block;

  padding: 3px 6px;

  border-radius: 3px;

  font-size: 0.62rem;

  font-weight: 900;

  line-height: 1.1;

  letter-spacing: 0.035em;

  text-transform: uppercase;

}



.ys-featured-status-verified {

  color: #051108;

  background: #50f58c;

}



.ys-featured-status-unconfirmed {

  color: #e5e9e6;

  background: #343c37;

  border: 1px solid #59635d;

}



.ys-featured-warning {

  margin-top: 5px;

  color: #9ba9a0;

  font-size: 0.62rem;

  line-height: 1.25;

}



.ys-featured-empty {

  padding: 24px;

  text-align: center;

  background: #101813;

  border: 1px solid rgba(255, 255, 255, 0.1);

}



@media (max-width: 950px) {

  .ys-featured-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

  }

}



@media (max-width: 720px) {

  .ys-featured-heading {

    align-items: start;

    flex-direction: column;

  }



  .ys-featured-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 8px;

  }

}



@media (max-width: 520px) {

  .ys-featured-section {

    padding: 26px 0 30px;

  }



  .ys-featured-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .ys-featured-copy {

    padding: 8px;

  }



  .ys-featured-title {

    font-size: 0.82rem;

  }



  .ys-featured-yard {

    font-size: 0.68rem;

  }



  .ys-featured-warning {

    font-size: 0.58rem;

  }

}