/* Triluma Header CTA – token-aligned
   Use with the HTML snippet 'header-buttons.html' you already have.
   Drop this file AFTER triluma-style.css (or merge into it).
*/

/* Grid layout */
.tri-cta-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin: 28px 0;
}
@media (max-width: 1024px){ .tri-cta-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px){  .tri-cta-grid { grid-template-columns: 1fr; } }

/* Card */
.tri-card {
  --_pad: 18px;
  display: block;
  background: var(--tri-surface, #fff);
  color: var(--tri-fg, #222);
  border-radius: var(--tri-radius, 12px);
  padding: var(--_pad);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--tri-fg, #222) 8%, transparent);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  position: relative;
  isolation: isolate;
}

/* Accent ribbon */
.tri-card::before{
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 6px;
  background: var(--tri-accent, #3BA2C4);
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

/* Titles & text */
.tri-card h4{
  margin: .2rem 0 .35rem 10px;
  font-family: var(--tri-font-serif, "Merriweather", Georgia, serif);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tri-fg, #222);
}
.tri-card p{
  margin: 0 0 0 10px;
  color: var(--tri-muted, #666);
  font-size: .98rem;
}

/* Hover / focus */
.tri-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  border-color: color-mix(in srgb, var(--tri-accent, #3BA2C4) 30%, transparent);
}
.tri-card:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--tri-accent, #3BA2C4) 60%, white);
  outline-offset: 2px;
  border-color: var(--tri-accent, #3BA2C4);
}

/* Variant: danger for SOFORTCHAT (if desired) */
.tri-card[data-variant="emerg"]::before{
  background: var(--tri-emerg, #D7263D);
}
.tri-card[data-variant="emerg"] h4{ color: var(--tri-fg, #222); }
.tri-card[data-variant="emerg"]:hover{ border-color: color-mix(in srgb, var(--tri-emerg, #D7263D) 30%, transparent); }