/* ============================================================================
   Eyas — 06 · Why Eyas / Trust  (premium trust signals)
   Four pillars, asymmetric editorial field: one heavy Local-first lead pillar
   (with the ice-lock visual) paired with three supporting pillars.
   Near-monochrome + steel signature. ONE tiny amber dose on pillar 4 (the human
   evening-review continuity). All custom classes prefixed `trust-`.

   Material note: the pillars sit as a row on the opaque canvas, so they use
   SOLID steel-slate fills (panel tint + hairline + inset highlight), not
   backdrop-filter glass. Blur in a row-list is wasted and breaks the "no glass
   on glass / no blur in rows" rule (DESIGN.md §3). The lead pillar lifts via a
   brighter fill + frostedge ring, the three supporters stay quieter.
   ========================================================================== */

.trust { overflow: hidden; }

/* soft steel bloom seated behind the lead pillar (decorative) */
.trust-bloom {
  position: absolute; z-index: 0; pointer-events: none;
  top: 42%; left: 2%; width: min(48vw, 640px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(175,200,228,0.12) 0%, transparent 68%);
  filter: blur(22px);
}

.trust-wrap { position: relative; z-index: 1; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.trust-head { max-width: 52ch; margin-bottom: clamp(2.75rem, 6vh, 5rem); }
.trust-title { margin-top: var(--sp-4); color: var(--text-hi); }
.trust-lead { margin-top: var(--sp-5); max-width: 46ch; }

/* ── Pillar field ───────────────────────────────────────────────────────── */
/* Lead pillar als flaches Querformat ueber die volle Breite (kein totes
   Hochformat mehr), die drei Supporter in einer Reihe darunter. */
.trust-field {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: stretch;
}
.trust-lead-pillar { grid-column: 1 / -1; }

/* ── Shared pillar surface (supporting + lead share hover language) ──────── */
/* SOLID steel-slate, no backdrop-filter. The fill is layered on an opaque
   panel base so the row of cards never relies on blur (DESIGN.md §3). Hairline
   border + inset spekular highlight give the same ice-at-night read the glass
   gave, but cheap and consistent in a row-list. */
.trust-pillar,
.trust-lead-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 0 var(--glass-highlight),
    inset 0 1px 22px -12px rgba(176,214,255,0.22),
    0 14px 44px -14px rgba(0,0,0,0.58);
  transition:
    transform var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease);
  will-change: transform;
}

/* supporting pillars: quieter solid panel, comfortable inner rhythm.
   Reserve a right gutter wider than the motif so the text keeps its own column
   and never runs under the glowing accent. */
.trust-pillar {
  padding: clamp(1.6rem, 2.4vw, 2.25rem);
  padding-right: clamp(7.5rem, 44%, 11.5rem);
  gap: var(--sp-3);
  /* solider Steel-Slate-Fill: opake Panel-Basis + leichter Steel-Stich oben,
     damit die Karten nicht im Canvas versinken (Marke: Eis bei Nacht, nicht
     alles aus) ohne Blur zu brauchen */
  background:
    linear-gradient(180deg, rgba(150,195,255,0.05) 0%, rgba(150,195,255,0.012) 46%, transparent 100%),
    var(--eyas-panel);
}

/* hover language: a touch brighter solid fill + soft steel bloom + gentle lift */
@media (hover: hover) {
  .trust-pillar:hover,
  .trust-lead-pillar:hover {
    transform: translateY(-4px);
    border-color: var(--glass-border-hi);
    box-shadow:
      inset 0 1px 0 0 var(--glass-highlight),
      inset 0 1px 22px -12px rgba(176,214,255,0.34),
      0 22px 60px -18px rgba(0,0,0,0.62),
      0 0 42px -8px var(--glow-steel);
  }
  .trust-pillar:hover {
    background:
      linear-gradient(180deg, rgba(150,195,255,0.07) 0%, rgba(150,195,255,0.02) 46%, transparent 100%),
      var(--eyas-glass-base);
  }
}

/* ── Lead pillar (Local-first) ──────────────────────────────────────────── */
/* The lead lifts above the three supporters: brighter steel fill + brighter
   border, plus the masked frostedge ring below. */
.trust-lead-pillar {
  overflow: hidden;
  border-color: rgba(186,216,250,0.16);
  background:
    linear-gradient(180deg, rgba(175,200,228,0.10) 0%, rgba(175,200,228,0.025) 46%, transparent 100%),
    var(--eyas-glass-base);
}
@media (hover: hover) {
  .trust-lead-pillar:hover {
    background:
      linear-gradient(180deg, rgba(175,200,228,0.12) 0%, rgba(175,200,228,0.035) 46%, transparent 100%),
      var(--eyas-glass-base);
  }
}

/* Masked frostedge ring on the lead pillar (replaces the shared .glass--frostedge
   that came with the now-removed glass class) — a thin ice rim, no side stripe. */
.trust-pillar--frostedge::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; padding: 1px;
  background: linear-gradient(135deg,
    rgba(234,246,255,0.85) 0%, rgba(186,212,240,0.45) 24%,
    rgba(130,162,200,0.12) 50%, rgba(180,218,255,0.40) 76%, rgba(234,246,255,0.70) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; z-index: 5;
}

.trust-lead-pillar__body {
  position: relative;
  flex: 1 1 auto;
  height: 100%;
  padding: clamp(1.8rem, 2.6vw, 2.6rem);
  padding-right: clamp(7.5rem, 44%, 11.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.trust-lead-pillar .trust-pillar__title { font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
.trust-lead-pillar .trust-pillar__text { font-size: var(--fs-lead); max-width: 40ch; }

/* Bottom-anchored signature line — hidden until desktop, where it fills the
   tall lead pillar with intent instead of leaving dead air. */
.trust-lead-pillar__sig { display: none; }

/* ── Subtle motif accents on the three supporting pillars ────────────────── */
/* A small glowing ice motif (eye / beacon / lantern) tucked into the top-right
   corner. Screen-blend drops the near-black ground; a radial mask dissolves the
   edges; z-index:-1 keeps it behind the text (the card is its own stacking
   context via will-change:transform). Quiet ambient richness, never loud. */
.trust-pillar__motif {
  position: absolute;
  top: clamp(0.7rem, 1.8vw, 1.15rem);
  right: clamp(0.6rem, 1.5vw, 1rem);
  width: clamp(120px, 38%, 172px);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
}
.trust-pillar__motif img {
  width: 100%; height: 100%;
  /* cover so the 3:2 lock fills the square exactly like the 1:1 motifs —
     keeps all four the same size and right-aligned (the lock's empty side
     margins are cropped away) */
  object-fit: cover;
  mix-blend-mode: screen;
  /* screen-blend frisst Helligkeit: ohne brightness-Anhebung lesen die Motive
     als dunkle Klumpen statt als Eis-Licht */
  filter: brightness(1.35) saturate(1.05);
  opacity: 0.62;
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 38%, transparent 82%);
          mask-image: radial-gradient(closest-side at 50% 50%, #000 38%, transparent 82%);
}
/* the lantern carries the section's one warm note — let it read a touch warmer */
.trust-pillar__motif--warm img { opacity: 0.56; }
/* lead reads a hair more present, but same size + position as the others so all
   four motifs sit on one line in the top-right corner */
.trust-pillar__motif--lead img { opacity: 0.58; }

/* ── Icon chip ──────────────────────────────────────────────────────────── */
.trust-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  color: var(--accent);
  flex: 0 0 auto;
}
.trust-ico--lead {
  width: 54px; height: 54px;
  color: var(--accent-bright);
  box-shadow: inset 0 0 18px -6px var(--glow-steel);
}
.trust-ico--warm { color: var(--warm); }

/* ── Pillar typography ──────────────────────────────────────────────────── */
.trust-pillar__kicker {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-lo);
}
.trust-pillar__kicker--warm { color: var(--warm); }

.trust-pillar__title {
  color: var(--text-hi);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.18;
}

.trust-pillar__text {
  color: var(--text-mid);
  font-size: var(--fs-body);
  line-height: 1.62;
  max-width: 44ch;
  margin-top: var(--sp-1);
}

/* ── Pillar 4 · the single tiny amber accent (warm continuity) ──────────── */
.trust-pillar--warm .trust-ico { border-color: rgba(227,165,84,0.26); }
@media (hover: hover) {
  .trust-pillar--warm:hover {
    box-shadow:
      inset 0 1px 0 0 var(--glass-highlight),
      inset 0 1px 22px -12px rgba(176,214,255,0.34),
      0 22px 60px -18px rgba(0,0,0,0.62),
      0 0 42px -10px var(--warm-glow);
  }
}

/* ── Desktop polish (>=1024px) ──────────────────────────────────────────────
   Balance the bento: the heavy Local-first pillar reads as a true anchor, its
   content distributed top-to-bottom (no dead air), the three supporters keep an
   even rhythm against it. Mobile/tablet rules below are untouched. */
@media (min-width: 1024px) {
  .trust-field {
    gap: clamp(1.5rem, 1.9vw, 2.25rem);
  }

  /* Flaches Querformat: Text links in einer kontrollierten Spalte, das
     Lock-Motiv steht gross und vertikal zentriert rechts. Keine Freiflaeche. */
  .trust-lead-pillar__body {
    padding: clamp(2.2rem, 2.8vw, 3rem);
    padding-right: clamp(16rem, 34%, 24rem);
  }
  .trust-lead-pillar .trust-pillar__title { font-size: clamp(1.85rem, 2.5vw, 2.35rem); }
  .trust-lead-pillar .trust-pillar__text { max-width: 52ch; }

  .trust-pillar__motif--lead {
    top: 50%;
    transform: translateY(-50%);
    right: clamp(1.5rem, 4vw, 4rem);
    width: clamp(190px, 24%, 280px);
  }
  .trust-pillar__motif--lead img { opacity: 0.66; }

  /* Bottom-anchored signature row — quiet mono caption with a steel tick. */
  .trust-lead-pillar__sig {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--glass-border);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tracking-snug);
    color: var(--text-faint);
  }
  .trust-lead-pillar__sig-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 9px var(--glow-steel);
    flex: 0 0 auto;
  }

  /* Drei Supporter in einer Reihe: schmalere Motiv-Reserve, damit der Text
     in der Drittel-Spalte eine gesunde Zeile behaelt. */
  .trust-pillar { padding: clamp(1.9rem, 2.3vw, 2.4rem); padding-right: clamp(5.5rem, 32%, 8.5rem); gap: var(--sp-4); }
}

/* Ultra-wide (>=1440px): cap the lead body measure and let the title scale a
   little further so the bento never feels stretched thin. */
@media (min-width: 1440px) {
  .trust-lead-pillar .trust-pillar__text { max-width: 38ch; }
  .trust-pillar__text { max-width: 42ch; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Tablet: lead pillar spans the top full-width, supporters in a row below. */
@media (max-width: 980px) {
  .trust-field {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .trust-lead-pillar {
    grid-row: auto;
    grid-column: 1 / -1;
    min-height: 0;
  }
}

/* Mobile: single column, emphasis preserved (lead stays first + tallest). */
@media (max-width: 620px) {
  .trust-field { grid-template-columns: 1fr; }
  .trust-lead-pillar { grid-column: auto; }
  .trust-pillar {
    padding: clamp(1.4rem, 5vw, 1.75rem);
    padding-right: clamp(6rem, 43%, 9.5rem);
  }
  /* Tighten the gap to the waitlist below — most of it is this section's
     bottom padding, not the waitlist's top padding. */
  .trust { padding-bottom: clamp(1.25rem, 3.5vh, 2.75rem); }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .trust-pillar,
  .trust-lead-pillar { transition: none; }
  .trust-pillar:hover,
  .trust-lead-pillar:hover { transform: none; }
}