/* ==========================================================================
   amazon-boxes.css  —  will-mixen.de  (willmixen2026-child)
   --------------------------------------------------------------------------
   Globales Stylesheet fuer [amazon box] Produkt-Boxen (.wm-amz-*).
   Laedt ueberall, wo der Shortcode vorkommt (Posts UND Pages) — siehe
   enqueue-amazon-boxes.php. Single Source of Truth: dieser Block ersetzt
   den .wm-amz-* Block in recipe-template.css.

   Markup ist PHP-generiert (wm_amazon_shortcode) und fix:
     .wm-amz-container.wm-amz-grid.wm-amz-grid-N
       .wm-amz-box > a.wm-amz-link
         .wm-amz-image > img.wm-amz-img
         .wm-amz-info  > span.wm-amz-title + span.wm-amz-cta
       p.wm-amz-disclosure
   Alle Upgrades hier sind REIN CSS, keine Markup-Aenderung noetig.
   ========================================================================== */

/* Token-Fallbacks: nutzt die Theme-Tokens (willmixen2026-global) falls
   geladen, sonst die Hardcode-Werte. So funktionieren die Boxen auch auf
   Pages, die das schwere recipe-template.css NICHT laden. */
:root {
  --wm-cta:        var(--accent, #c2410c);   /* Button: terracotta */
  --wm-cta-hover:  #a8330a;
  --wm-rose:       #c4725a;
  --wm-rose-soft:  #e8c4b8;
  --wm-border:     var(--border, #e0d8d0);
  --wm-surface:    var(--surface, #ffffff);
  --wm-text:       var(--ink, #2c2825);
  --wm-muted:      var(--ink-3, #8a8076);
  --wm-bg:         var(--bg, #faf8f5);
  --wm-radius:     12px;
  --wm-shadow-sm:  0 2px 8px rgba(26,26,26,0.05);
  --wm-shadow-md:  0 8px 24px rgba(26,26,26,0.10);
  --wm-transition: all .18s ease;
}

/* ---- Container & Grid ---------------------------------------------------- */
.wm-amz-container { margin: 1.5rem 0; }

.wm-amz-grid { display: grid; gap: 1rem; }
.wm-amz-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wm-amz-grid-3 { grid-template-columns: repeat(3, 1fr); }
.wm-amz-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Tablet: 3-/4-Spalter auf 2 Spalten */
@media (max-width: 900px) {
  .wm-amz-grid-3,
  .wm-amz-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile: alles 1 Spalte */
@media (max-width: 600px) {
  .wm-amz-grid-2,
  .wm-amz-grid-3,
  .wm-amz-grid-4 { grid-template-columns: 1fr; }
}

/* ---- Card --------------------------------------------------------------- */
.wm-amz-box {
  border: 1px solid var(--wm-border);
  border-radius: var(--wm-radius);
  overflow: hidden;
  background: var(--wm-surface);
  box-shadow: var(--wm-shadow-sm);
  transition: var(--wm-transition);
}
.wm-amz-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--wm-shadow-md);
  border-color: var(--wm-rose-soft);
}

/* Default (Single-Box / Mobile): Bild links, Text rechts */
.wm-amz-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  text-decoration: none !important;
  color: var(--wm-text) !important;
}

.wm-amz-image {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wm-bg);
  border-radius: 8px;
  padding: 8px;
}
.wm-amz-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;   /* schluckt weisse Amazon-Bildraender */
}
.wm-amz-img-placeholder {
  width: 100%; height: 100%;
  background: var(--wm-bg);
  border-radius: 6px;
}

.wm-amz-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
}

.wm-amz-title {
  font-family: var(--font-sans, 'Gilroy', sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.35;
  color: var(--wm-text) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- CTA → vollbreiter Button  (groesster Hebel) ------------------------ */
.wm-amz-cta {
  display: block;
  margin-top: auto;
  background: var(--wm-cta);
  color: #fff !important;
  text-align: center;
  padding: 11px 14px;
  min-height: 44px;            /* fingerfreundlich */
  border-radius: 8px;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  transition: var(--wm-transition);
}
.wm-amz-box:hover .wm-amz-cta { background: var(--wm-cta-hover); color: #fff !important; }

/* ---- Grid-Mode (>=601px): Bild oben, Button unten, gleiche Hoehe -------- */
@media (min-width: 601px) {
  .wm-amz-grid .wm-amz-box { display: flex; flex-direction: column; }

  .wm-amz-grid .wm-amz-link {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.9rem 0.9rem 1rem;
    height: 100%;
  }
  .wm-amz-grid .wm-amz-image {
    width: 100%;
    height: auto;
    min-height: 150px;
    padding: 12px;
  }
  .wm-amz-grid .wm-amz-info { flex: 1 1 auto; justify-content: space-between; }
  .wm-amz-grid .wm-amz-title {
    font-size: 0.98rem !important;
    min-height: 2.65em;        /* 2 Zeilen → gleichmaessige Card-Hoehe */
  }
}

/* ---- Werbekennzeichnung (Pflicht, §5a UWG) ------------------------------ */
.wm-amz-disclosure {
  grid-column: 1 / -1;
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--wm-muted);
  text-align: left;
}
.wm-amz-disclosure-tag {
  display: inline-block;
  background: var(--wm-muted);
  color: #fff;
  padding: 0.05em 0.5em;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.4em;
  vertical-align: 0.05em;
}

/* ==========================================================================
   Optionales Badge (Phase 2 — braucht PHP-Erweiterung im Shortcode:
   <span class="wm-amz-badge">Bestseller</span> in .wm-amz-image).
   CSS steht hier schon bereit, schadet ohne Markup nicht.
   ========================================================================== */
.wm-amz-image { position: relative; }
.wm-amz-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: #f5c4b3;
  color: #712b13;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  z-index: 2;
}