/* Bunkerlinge cards.css — SINGLE-HOME der children-Karten.
   DOM (gemessen): ul.card-container > li > article.card.card-popout
   Wegen des <li> greifen Relearns '.card-container > .card'-Regeln NICHT,
   seine '.card-container .card...'-Regeln aber schon. Jeder Selektor hier ist auf
   '> li > article.card' verankert und ueberbietet die Relearn-Entsprechung rechnerisch.
   Werte 1:1 aus woodmart-child/style.css (.product-category Z.1365-1383, :root Z.804).

   VARIANTE iii — GRID BEWUSST UEBERSCHRIEBEN (4/3/1 statt Relearn 3/2/1):
     Grund: bei 3 Spalten ist die Zelle ~392px. Eine 300er-Karte laesst dann 92px Luft
     stehen; eine Karte, die 392 fuellt, wird flach. Bei 4 Spalten ist die Zelle ~296 —
     die Karte fuellt sie UND bleibt quadratisch. Kein aspect-ratio noetig.
   KEIN aspect-ratio: erzwungenes Verhaeltnis + variabler Inhalt = 30-50% Totflaeche
     (gemessen). Hoehe kommt vom Inhalt; height:100% + align-items:stretch macht alle
     Karten EINER REIHE exakt gleich hoch. Bei ~296 Breite umbricht der Text auf ~7
     Zeilen -> die Karte wird von selbst fast quadratisch.
   Mobil 1 Spalte volle Breite: kein Seitenrand, Karte kompakt. */

:root{
  --card-green:rgb(131,183,53);
  --card-glow:rgba(130,183,53,.5);
  --card-glow-hover:rgba(130,183,53,.8);
  --card-glow-soft:rgba(131,183,53,.3);
}

/* Grid: 4 Spalten. Relearn-Breakpoints gespiegelt (59.999rem / 47.999rem). */
#R-body-inner .card-container{
  grid-template-columns:repeat(4,1fr);
  gap:30px 20px;
  align-items:stretch;
}
#R-body-inner .card-container > li{ position:relative; z-index:1; }
#R-body-inner .card-container > li:hover,
#R-body-inner .card-container > li:focus-within{ z-index:5; }

/* Relearns 3px-Hoverbalken: Pseudo entsteht gar nicht. (0,2,3)/(0,4,3) > (0,2,1)/(0,4,1). */
.card-container > li > article.card::before,
.card-container > li > article.card.card-popout:hover::before{ content:none; }

/* Relearns weisser Fokusring: '.card-container .card:focus-within:has(.card-title>a:focus)
   {outline:auto}' = (0,5,1) < hier (0,6,3). Das :has muss mit, sonst verliert die Regel. */
.card-container > li > article.card:focus-within:has(.card-title>a:focus),
.card-container > li > article.card.card-popout:focus-within:has(.card-title>a:focus){
  outline:none;
}

/* Geometrie: Relearns Zwangshoehe (min 300 / max 600) raus. Breite = Zelle, Hoehe = Inhalt,
   Gleichheit je Reihe via height:100% + stretch. */
.card-container > li > article.card{
  min-height:0; max-height:none; height:100%; width:100%;
  background:var(--bl-surface);
  border:1px solid var(--card-green);
  border-radius:var(--bl-box-radius);
  box-shadow:0 2px 8px rgba(0,0,0,.1), 0 0 8px var(--card-glow-soft);
  transition:all .3s ease;
  overflow:visible;
  position:relative;
}

/* Hover = .product-category:hover 1:1. border-color MUSS mit, sonst blasst
   Relearns color-mix-Rahmen (0,4,0) die Kante auf. Hier (0,4,2). */
.card-container > li > article.card.card-popout:hover,
.card-container > li > article.card.card-popout:focus-within{
  transform:translateY(-4px);
  outline:none; z-index:5;
  border-color:var(--card-green);
  box-shadow:0 8px 25px rgba(0,0,0,.15),
             0 0 20px var(--card-glow-hover),
             0 0 40px var(--card-glow),
             0 0 60px var(--card-glow);
}

.card-container > li > article.card .card-content{ margin:.9rem; padding:0; }
.card-container > li > article.card .card-title{
  color:var(--bl-title); font-size:1rem; font-weight:600; line-height:1.3;
  margin:0 0 .4rem 0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
.card-container > li > article.card .card-content-text{
  color:var(--bl-text-2); font-size:.875rem; line-height:1.45;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden;
}
.card-container > li > article.card a:focus,
.card-container > li > article.card a:focus-visible{ outline:none; }

/* Tablet: 3 Spalten (Relearn-Breakpoint). */
@media only screen and (max-width:59.999rem){
  #R-body-inner .card-container{ grid-template-columns:repeat(3,1fr); }
  .card-container > li > article.card .card-title{ font-size:.95rem; }
  .card-container > li > article.card .card-content-text{ font-size:.85rem; }
}

/* Handy: 1 Spalte, volle Breite, kompakt. Shop-Mobil-Hover 1:1. */
@media only screen and (max-width:47.999rem){
  #R-body-inner .card-container{ grid-template-columns:1fr; gap:20px 10px; }
  .card-container > li > article.card .card-content{ margin:.75rem; }
  .card-container > li > article.card .card-content-text{ -webkit-line-clamp:3; }
  .card-container > li > article.card.card-popout:hover,
  .card-container > li > article.card.card-popout:focus-within{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(0,0,0,.12),
               0 0 15px var(--card-glow-hover),
               0 0 30px var(--card-glow);
  }
}
/* cards-eof-marker-6 */