/* css/blocket-jensbilar.css */

/* ================================
   Desktop-layout (radvis)
   ================================ */

.blocket-jensbilar-grid {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.blocket-jensbilar-item {
  display: flex;
  position: relative; /* för datum-overlay */
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: inherit;
  transition: background .2s;
}

.blocket-jensbilar-item:hover {
  background: #fafafa;
}

.blocket-jensbilar-item img {
  flex: 0 0 230px;
  width: 230px;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}

.blocket-jensbilar-item .details {
  flex: 1;
  margin: 0 4rem 0 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blocket-jensbilar-item .details strong {
  font-size: 1.1rem;
  line-height: 1.0;
  margin-bottom: 0.25rem;
  display: block;
}

.blocket-jensbilar-item .details .summary {
  font-size: .95rem;
  color: #555;
  margin: .35rem 0;
}

.blocket-jensbilar-item .details .price {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0066aa;
  margin-top: 2rem;
}

.blocket-jensbilar-item .details .date {
  position: absolute;
  top: 2.2rem;
  right: 0.3rem;
  font-size: .875rem;
  color: #666;
}

/* ================================
   Mobil-layout (< 768px)
   ================================ */
@media screen and (max-width: 767px) {
  .blocket-jensbilar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0 1rem 0;
    position: relative; /* viktig: referens för absolute .date */
  }

  /* Bild överst, begränsad max-bredd */
  .blocket-jensbilar-item img {
    width: 100%;
    max-width: 240px;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
    margin-bottom: 0;

  }

  .blocket-jensbilar-item .details {
    width: 100%;
    margin: 0;
    padding: 0;
    /* ta bort position: relative här */
  }

  /* Datum som overlay ovanför bilden */
  .blocket-jensbilar-item .date {
    position: absolute;       /* nu relativt till .blocket-jensbilar-item */
    top: .5rem;               /* justera så det hamnar precis över bilden */
    right: .3rem;
    background: rgba(255,255,255,0.8);
    padding: 0 .5rem;
    border-radius: 4px;
    font-size: .875rem;
    color: #666;
    z-index: 10;              /* ovanpå bilden */
  }

  /* Titel under datum */
  .blocket-jensbilar-item .details strong {
    font-size: 1rem;
    margin: 0.5rem 0 .5rem 0;
    text-align: center;
  }

  /* Summary centrerad */
  .blocket-jensbilar-item .details .summary {
    margin: .25rem 0;
    text-align: center;
    font-size: smaller;
  }

  /* Pris längst ner */
  .blocket-jensbilar-item .details .price {
    margin-top: .5rem;
    text-align: center;
    font-size: 1.3em;
  }
}