/*
 * Produkt-Kategorieübersichten (z. B. /produkte/buecher/, /produkte/dienstleistungen/)
 * Visuelle Referenz: lausitz-marktplatz.de/<kategorie> (gleiche com_lmdb-Struktur, dort Template „v2“).
 *
 * Geladen von templates/hyperworx/html/com_lmdb/products/tiles.php, nur wenn der Menüpunkt
 * unter einem Produkt-Menüpunkt liegt (Root-Klasse .hwx-lmdb-products-category).
 * Karte nur mit Bild, Preis, Titel und Kurzbeschreibung. Anbieter, Kontakt und Kaufoptionen werden auf
 * Kategorieseiten nicht gerendert (tiles.php, default_skeleton.php) und stehen auf der Produktdetailseite.
 *
 * Referenzwerte: Karte weiß, 1px #d9e2ec, Radius 6px, Schatten 0 5px 16px rgba(16,42,67,.05),
 * Hover-Schatten 0 14px 30px rgba(16,42,67,.14) und Bildzoom 1.06, Grid-Abstand 20px, Bild 298px hoch,
 * Preis weiß oben rechts (Radius unten links 8px, 8px 12px, 25px/600 #172b4d), Titel 18px/600 #303030.
 * Akzent statt Marktplatz-Orange: Portalfarbe „tiefe Tinte“ #0c3247 (DESIGN.md).
 */

#hwx-lmdb-products-list.hwx-lmdb-products-category {
  --hwx-pc-ink          : #0c3247;
  --hwx-pc-price        : #172b4d;
  --hwx-pc-text         : #303030;
  --hwx-pc-muted        : #4d5a66;
  --hwx-pc-line         : #d9e2ec;
  --hwx-pc-surface      : #fff;
  --hwx-pc-soft         : #f5f7fa;
  --hwx-pc-radius       : 6px;
  --hwx-pc-shadow       : 0 5px 16px rgba(16, 42, 67, 0.05);
  --hwx-pc-shadow-hover : 0 14px 30px rgba(16, 42, 67, 0.14);
  --hwx-pc-gap          : 20px;
  --hwx-pc-image        : 18.625rem; /* 298px wie Referenz */

  padding : calc(var(--basis-gap) * 2) 0;
}

/* Seitentitel wie /produkte/ (Bootstrap-h1 statt 2.9rem/900 aus .hwx-lmdb-list-basetiles) */
#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-page-title .hwx-lmdb-page-title-text {
  font-size   : calc(1.375rem + 1.5vw);
  font-weight : 500;
}

@media (min-width : 1200px) {
  #hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-page-title .hwx-lmdb-page-title-text {
    font-size : 2.5rem;
  }
}

/*
 * Grid über die volle Inhaltsbreite. Mindestbreite 280px ergibt bei der Portal-Inhaltsbreite
 * 1 Spalte (390px), 2 (768px), 3 (1024px) und 4 Spalten (ab 1280px).
 */
#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap                   : var(--hwx-pc-gap);
  width                 : 100%;
}

/* Karte: Produktteil füllt die Karte, Karten einer Zeile gleich hoch */
#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item {
  display          : flex;
  flex-direction   : column;
  min-width        : 0;
  overflow         : hidden;
  background-color : var(--hwx-pc-surface);
  border           : 1px solid var(--hwx-pc-line);
  border-radius    : var(--hwx-pc-radius);
  box-shadow       : var(--hwx-pc-shadow);
  transition       : border-color 0.2s ease, box-shadow 0.2s ease;
}

#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item:hover {
  border-color : var(--hwx-pc-ink);
  box-shadow   : var(--hwx-pc-shadow-hover);
}

/* Tastaturfokus: ganze Karte markieren (Produktlink ist .stretched-link über dem Produktteil) */
#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item:has(.stretched-link:focus-visible) {
  border-color   : var(--hwx-pc-ink);
  outline        : 3px solid var(--hwx-pc-ink);
  outline-offset : 2px;
}

#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item .stretched-link:focus-visible {
  outline : none;
}

#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item > .hwx-lmdb-list-item-content-wrapper {
  display        : flex;
  flex-direction : column;
  flex           : 1 1 auto;
}

/* Bild: einheitliche Fläche, cover wie Referenz, Zoom beim Hover */
#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item .hwx-lmdb-list-item-imageblock {
  flex             : 0 0 auto;
  height           : var(--hwx-pc-image);
  overflow         : hidden;
  background-color : var(--hwx-pc-soft);
}

#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item .hwx-lmdb-list-item-imageblock img {
  display    : block;
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  transition : transform 0.3s ease;
}

#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item:hover .hwx-lmdb-list-item-imageblock img {
  transform : scale(1.06);
}

@media (prefers-reduced-motion : reduce) {
  #hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item,
  #hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item .hwx-lmdb-list-item-imageblock img {
    transition : none;
  }

  #hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item:hover .hwx-lmdb-list-item-imageblock img {
    transform : none;
  }
}

/* Preis oben rechts im Bild */
#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item .hwx-lmdb-price-container {
  z-index              : 1;
  top                  : 0;
  right                : 0;
  padding              : 8px 12px;
  background-color     : var(--hwx-pc-surface);
  border-radius        : 0 0 0 8px;
  color                : var(--hwx-pc-price);
  font-weight          : 800;
  line-height          : 1.2;
  font-variant-numeric : tabular-nums;
}

#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item .hwx-lmdb-price-container .hwx-price {
  font-size   : 1.5rem;
  font-weight : 600;
}

#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item .hwx-lmdb-price-container .hwx-eu {
  font-size : 1.125rem;
}

/* Badges nur, wenn das Produkt welche hat (sonst bleibt eine leere 20px-Zeile) */
#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item:not(.is-new, .is-top, .is-tip) .hwx-badges-bar {
  display : none;
}

/* Inhalt: Titel 18px/600, Kurzbeschreibung ruhig darunter */
#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item .hwx-lmdb-list-item-content {
  display        : flex;
  flex-direction : column;
  gap            : 0.5rem;
  padding        : 1rem 1rem 1.125rem;
}

#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item .hwx-lmdb-list-item-content-title-text {
  display            : -webkit-box;
  -webkit-box-orient : vertical;
  -webkit-line-clamp : 2;
  overflow           : hidden;
  margin             : 0;
  font-size          : 1.125rem;
  font-weight        : 600;
  line-height        : 1.3;
  color              : var(--hwx-pc-text);
  text-wrap          : pretty;
}

#hwx-lmdb-products-list.hwx-lmdb-products-category .hwx-lmdb-list-items .hwx-lmdb-list-item .hwx-lmdb-list-item-content-description {
  display            : -webkit-box;
  -webkit-box-orient : vertical;
  -webkit-line-clamp : 2;
  overflow           : hidden;
  font-size          : 0.875rem;
  line-height        : 1.5;
  color              : var(--hwx-pc-muted);
}