/* AGREX pattern icons + overview cards (content/icons.py,
   templates/icons/agrex_sprite.svg, templates/includes/card_pattern.html).

   ==========================================================================
   FARBWIRKUNG – hier zentral einstellen
   --agx-sat    Farbsättigung aller Verlaufsflächen (filter: saturate)
   --agx-glow   Deckkraft des Eck-Scheins auf den Karten bei Hover/Fokus
   --agx-shade  Schwarzanteil über dem Mineralverlauf
   --agx-card-link  Farbe des Links unten in der Karte (z. B. „Details“),
                in jedem Zustand gleich
   Die Mineralfarben selbst (--agx-g pro key, unten) bleiben unverändert.
   ========================================================================== */
:root {
  --agx-sat: 0.4;
  --agx-glow: 0.35;
  --agx-card-link: #1f2a30;
  --agx-shade: linear-gradient(to top right, rgba(14, 17, 19, 0.78) 0%, rgba(14, 17, 19, 0.45) 40%, rgba(14, 17, 19, 0.12) 75%, rgba(14, 17, 19, 0) 100%);
}

/* Gradient surface (icon tile fill + card glow): grain, shade, mineral. */
.agx-ico::before,
.agx-card::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background: url("../../img/agx-grain.2b14260ba79e.svg"), var(--agx-shade), var(--agx-g);
  background-size: 180px 180px, 100% 100%, 100% 100%;
  background-blend-mode: overlay, normal, normal;
  filter: saturate(var(--agx-sat));
  opacity: 0;
}

/* --- Icon tile: grey at rest, gradient on hover/focus of .agx-hover -------- */
.agx-ico {
  --agx-tile: 30px;
  --agx-pattern: 22px;
  --agx-radius: 8px;
  position: relative;
  isolation: isolate;
  flex: 0 0 var(--agx-tile);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--agx-tile);
  height: var(--agx-tile);
  border-radius: var(--agx-radius);
  overflow: hidden;
  background: #eef0f1;
  color: #1d2327;
  transition: color 0.3s ease;
}
.agx-ico::before {
  inset: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.agx-ico svg {
  width: var(--agx-pattern);
  height: var(--agx-pattern);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Size: menu 30/22/8 (the overview cards show no icon). */

.agx-hover:focus-visible .agx-ico,
.agx-hover:has(:focus-visible) .agx-ico { color: #fff; }
.agx-hover:focus-visible .agx-ico::before,
.agx-hover:has(:focus-visible) .agx-ico::before { opacity: 1; }
@media (hover: hover) {
  .agx-hover:hover .agx-ico { color: #fff; }
  .agx-hover:hover .agx-ico::before { opacity: 1; }
}

/* --- Overview cards (block option "Muster-Icons anzeigen") ---------------- */
.agx-card {
  overflow: hidden;
}
/* Soft glow in the top-left corner, fading out before the title. Cards
   without an icon have no --agx-g, so the glow stays empty. */
.agx-card::before {
  left: 0;
  top: 0;
  width: 260px;
  height: 124px;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0 0, rgba(0,0,0,.92) 0%, rgba(0,0,0,.88) 8%, rgba(0,0,0,.78) 16%, rgba(0,0,0,.64) 24%, rgba(0,0,0,.49) 32%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.23) 48%, rgba(0,0,0,.14) 56%, rgba(0,0,0,.075) 64%, rgba(0,0,0,.035) 72%, rgba(0,0,0,.012) 80%, transparent 88%);
  mask-image: radial-gradient(ellipse 100% 100% at 0 0, rgba(0,0,0,.92) 0%, rgba(0,0,0,.88) 8%, rgba(0,0,0,.78) 16%, rgba(0,0,0,.64) 24%, rgba(0,0,0,.49) 32%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.23) 48%, rgba(0,0,0,.14) 56%, rgba(0,0,0,.075) 64%, rgba(0,0,0,.035) 72%, rgba(0,0,0,.012) 80%, transparent 88%);
  transition: opacity 0.35s ease;
}
.agx-card__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 24px;
  color: inherit;
  text-decoration: none;
}
/* Global link colours/underline (a:hover, --bs-link-*) must not reach the card. */
.agx-card__body,
.agx-card__body:hover,
.agx-card__body:focus,
.agx-card__body:visited {
  color: inherit;
  text-decoration: none;
}
.agx-card__body:focus-visible { outline: none; }
.agx-card:has(.agx-card__body:focus-visible) {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
.agx-card__title {
  margin: 0 0 8px;
  font-size: var(--agx-fs-18);
  font-weight: 500;
  line-height: 1.35;
  color: #1e2022;
}
.agx-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin: 0;
  font-size: var(--agx-fs-14);
  line-height: 22px;
  color: #677788;
}
.agx-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 20px;
  font-size: var(--agx-fs-14);
  font-weight: 500;
  color: var(--agx-card-link);
}
.agx-card__cta .bi { transition: transform 0.35s ease; }

.agx-card:has(:focus-visible)::before { opacity: var(--agx-glow); }
.agx-card:has(:focus-visible) .agx-card__cta .bi { transform: translateX(4px); }
@media (hover: hover) {
  .agx-card:hover::before { opacity: var(--agx-glow); }
  .agx-card:hover .agx-card__cta .bi { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .agx-ico,
  .agx-ico::before,
  .agx-card::before,
  .agx-card__cta .bi { transition: none; }
}

/* --- Mineral gradient per key (colours from content/icons.py) ------------- */
.agx-ico--mikro, .agx-card--mikro { --agx-g: linear-gradient(to top right, #2463b0, #2e9467, #c9607f); }
.agx-ico--makro, .agx-card--makro { --agx-g: linear-gradient(to top right, #b3342a, #dd8b3a, #9a8670); }
.agx-ico--schwefel, .agx-card--schwefel { --agx-g: linear-gradient(to top right, #b97c06, #e7c200); }
.agx-ico--borate, .agx-card--borate { --agx-g: linear-gradient(to top right, #8a919a, #e2c47a); }
.agx-ico--sondermittel, .agx-card--sondermittel { --agx-g: linear-gradient(to top right, #3e2614, #b5762f); }
.agx-ico--formulierung, .agx-card--formulierung { --agx-g: linear-gradient(to top right, #c99a00, #c2452d, #2463b0); }
.agx-ico--mischer, .agx-card--mischer { --agx-g: linear-gradient(to top right, #b3342a, #6e7782); }
.agx-ico--produzent, .agx-card--produzent { --agx-g: linear-gradient(to top right, #c48a12, #4f6273); }
.agx-ico--landhandel, .agx-card--landhandel { --agx-g: linear-gradient(to top right, #c08a24, #5f6a76); }
.agx-ico--pflanzenbau, .agx-card--pflanzenbau { --agx-g: linear-gradient(to top right, #6e4325, #5b9a34); }
.agx-ico--biogas, .agx-card--biogas { --agx-g: linear-gradient(to top right, #5f8a2a, #2f6fd6); }