/* -------------------------------------------------------------------------
 * Kavelkaart voor de catalogus (modules/auction_catalog.php) en de voorpagina
 * (modules/auction_index.php). De markup staat in modules/partials/lot_card.php.
 *
 * Waarom een eigen bestand en niet custom.php: dat wordt een week gecachet
 * (Cache-Control: max-age=604800), dus nieuwe regels daarin zijn onzichtbaar
 * voor terugkerende bezoekers. Daarom stonden kleuren tot nu toe inline in de
 * modules. Dit bestand wordt gelinkt met ?v=<filemtime>, dus elke wijziging
 * komt meteen door en de kleuren kunnen hier gewoon staan.
 * ------------------------------------------------------------------------- */

.lot-card {
  /* De kaart reageert op zijn eigen breedte, niet op die van het scherm. Op een
     iPad staat hij in een kolom van ~230px terwijl het scherm "groot" is; met
     een media query zou hij daar de brede indeling houden en knijpt het
     prijsblok dood. */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  overflow: clip;
  transition: box-shadow .2s ease, transform .2s ease;
}

.lot-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  transform: translateY(-2px);
}

/* De knoppen hieronder krijgen een eigen display, en die wint van de
   display:none die de browser aan [hidden] geeft. Daarom expliciet. */
.lot-card [hidden] {
  display: none !important;
}

/* Beeldbox met vaste hoogte. Reserveert de ruimte voordat de foto binnen is
   (geen layout shift) en houdt het tekstblok van alle kaarten in een rij op
   dezelfde hoogte. */
.lot-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 200px;
  padding: 12px;
}

.lot-card__media a {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  inline-size: 100%;
  text-decoration: none; /* anders krijgt de "geen foto"-tekst een linkstreep */
}

.lot-card__media img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain; /* staande en liggende foto's worden nooit afgeknipt */
}

.lot-card__noimg {
  color: #b0b0b0;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lot-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 16px 16px;
}

/* --- metaregel: kavelnummer links, hart rechts --- */

.lot-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-block-end: 6px;
}

.lot-card__lot {
  color: #666;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lot-card__lotnr {
  margin-inline-start: 6px;
  color: #000666;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* Het hart was 2rem en zwart, over de foto. Hier staat het op de metaregel en
   mag het niet de luidste vorm op de kaart zijn. De hogere specificiteit is
   nodig omdat custom.php .fav-icon op 2rem zet. */
.lot-card .fav-btn {
  padding: 0;
  line-height: 1;
  border: none;
  background: none;
}

.lot-card .fav-icon {
  font-size: 1.35rem;
  color: #444;
}

.lot-card .fav-icon.fav-red {
  color: #FF6600;
}

/* --- titel --- */

.lot-card__titlelink {
  display: block;
  color: inherit;
  text-decoration: none;
}

.lot-card__titlelink:hover .lot-card__title {
  text-decoration: underline;
}

.lot-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* genegeerd waar nog niet ondersteund */
  overflow: clip;
  /* Drie regels worden altijd gereserveerd, ook bij een titel van één regel.
     Isotope zet de kolommen absoluut neer, waardoor block-size:100% op de kaart
     niets heeft om zich aan te meten en de kaarten anders per titel verschillen
     in hoogte. Alle andere onderdelen hebben een vaste hoogte, dus hiermee zijn
     de kaarten in een rij gelijk. Dit vervangt de oude min-height:480px. */
  min-block-size: calc(1.3em * 3);
  margin: 0 0 12px;
  color: #000666;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

/* --- prijsblok: margin-block-start:auto duwt het tegen de bodem, zodat
       kaarten met een korte en een lange titel even hoog blijven --- */

/* Basis is de gestapelde indeling: bedrag boven, knop eronder over de volle
   breedte. Die past altijd. Een kaart met genoeg ruimte krijgt onderaan dit
   bestand de rij-indeling terug via een @container-regel. */
.lot-card__prices {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-block-start: auto;
}

.lot-card__guide {
  color: #666;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lot-card__amount {
  color: #000666;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}

.lot-card__amountlabel {
  color: #666;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Open knop met oranje rand en blauwe letters, op verzoek van de klant. De rand
   is 2px waar de wacht-knop hieronder er 1px heeft: dat is het enige verschil in
   vorm tussen "je kunt nu bieden" en "nog niet open", nu beide open zijn.
   De padding vangt het randverschil op, zodat ze even hoog blijven. */
.lot-card__bid {
  flex: 0 0 auto;
  display: inline-block;
  padding: 9px 22px;
  border: 2px solid #FF6600;
  border-radius: 999px;
  background: transparent;
  color: #0b3873;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* Bij aanwijzen loopt hij wel vol: dat geeft de knop zijn bevestiging terug
   zonder de rust van de rusttoestand aan te tasten. */
.lot-card__bid:hover,
.lot-card__bid:focus {
  border-color: #FF6600;
  background: #FF6600;
  color: #fff;
}

/* Kavel staat nog in de wachtrij: wel doorklikbaar, maar geen oranje. */
.lot-card__bid--wacht {
  padding: 10px 22px;
  border-width: 1px;
  border-color: #c9c9c9;
  background: transparent;
  color: #555;
  font-weight: 600;
}

.lot-card__bid--wacht:hover,
.lot-card__bid--wacht:focus {
  border-color: #b5b5b5;
  background: #f3f3f3;
  color: #333;
}

/* --- onderregel: sluitingszin links, klok-pill rechts --- */

.lot-card__footer {
  display: flex;
  flex-wrap: wrap; /* op een krappe kaart valt de pill onder de sluitzin */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block-start: 12px;
}

.lot-card__closes {
  color: #666;
  font-size: .78rem;
  line-height: 1.3;
}

.lot-card__clockpill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #000666;
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}

.lot-card__clockpill--gesloten {
  background: #6b6b6b;
}

/* Is de kaart zelf breed genoeg, dan gaan bedrag en knop naast elkaar. De grens
   ligt bij de breedte waarop "€ 12.500,00" en de knop nog naast elkaar passen;
   daaronder blijft de gestapelde basis staan. */
@container (min-width: 250px) {
  .lot-card__prices {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .lot-card__pricecol {
    min-inline-size: 0;
  }

  /* Genoeg ruimte: sluitzin links, pill rechts, zoals bedoeld. De zin breekt
     zelf af in plaats van de pill naar de volgende regel te duwen. */
  .lot-card__footer {
    flex-wrap: nowrap;
  }

  .lot-card__closes {
    min-inline-size: 0;
  }
}