/* =============================
   File: /opt/triluma/public/triluma-selection.css

   Version: 1.2.0
   Last Updated: 2026-04-15
============================= */

/* Nur selection-spezifische Cards.
   KEINE globalen .tri-btn- oder Menü-Regeln.
   KEINE Overrides für Header/Nav.
*/

/* ================= GRID ================= */

.tri-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--tri-space-md);
  align-items:stretch;
}

.tri-card-grid-1{
  grid-template-columns:1fr;
}

.tri-card-grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.tri-card-grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.tri-span-3,
.tri-card-full{
  grid-column:1 / -1;
}

@media (max-width:1024px){
  .tri-card-grid,
  .tri-card-grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .tri-card-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:720px){
  .tri-card-grid,
  .tri-card-grid-1,
  .tri-card-grid-2,
  .tri-card-grid-3{
    grid-template-columns:1fr;
  }

  .tri-span-3,
  .tri-card-full{
    grid-column:auto;
  }
}

/* ================= CARD BASE ================= */

.tri-usecase-card,
.tri-choice-card,
.tri-coach-card,
.tri-gpt-card{
  background:var(--tri-white);
  border-radius:var(--tri-radius);
  border:1px solid var(--tri-border);
  border-left:6px solid var(--tri-blue);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  padding:var(--tri-space-md);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  height:100%;
  font-family:'Roboto', system-ui, sans-serif;
}

/* ================= TYPO ================= */

.tri-choice-card h3,
.tri-usecase-card h3,
.tri-coach-card h3,
.tri-gpt-card h3{
  font-family:'Merriweather', serif;
  font-weight:400;
  font-size:22px;
  line-height:1.2;
  color:var(--tri-blue);
  margin:0 0 var(--tri-space-sm) 0;
}

.tri-choice-card p,
.tri-usecase-card p,
.tri-coach-card p,
.tri-gpt-card p{
  font-size:16px;
  line-height:1.6;
  color:var(--tri-text);
  margin:10px 0;
}

/* ================= LIST ================= */

.tri-list{
  list-style:none;
  padding:0;
  margin:10px 0 16px 0;
}

.tri-list li{
  position:relative;
  padding-left:16px;
  margin-bottom:6px;
  line-height:1.4;
  color:var(--tri-text);
}

.tri-list li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--tri-muted);
}

/* ================= ACTIONS ================= */

.tri-actions,
.tri-coach-actions{
  display:flex;
  gap:12px;
  margin-top:auto;
}

.tri-actions button,
.tri-coach-actions button{
  flex:1;
  height:40px;
  padding:0 16px;
  border-radius:999px;
  font-size:14px;
  cursor:pointer;
  transition:all 0.15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Roboto', system-ui, sans-serif;
}

/* Primary */
.tri-actions .primary,
.tri-coach-actions .primary{
  background:var(--tri-blue);
  color:var(--tri-white);
  border:none;
}

.tri-actions .primary:hover,
.tri-coach-actions .primary:hover{
  background:var(--tri-blue-dark);
}

/* Secondary */
.tri-actions .secondary,
.tri-coach-actions .secondary{
  background:var(--tri-white);
  color:var(--tri-blue);
  border:1px solid var(--tri-blue);
}

.tri-actions .secondary:hover,
.tri-coach-actions .secondary:hover{
  background:var(--tri-blue);
  color:var(--tri-white);
}

/* ================= GPT ================= */

.tri-gpt-card textarea{
  width:100%;
  height:110px;
  padding:10px;
  margin:10px 0;
  border:1px solid var(--tri-border);
  border-radius:8px;
  font-family:'Roboto', system-ui, sans-serif;
  font-size:14px;
  line-height:1.5;
  color:var(--tri-text);
  background:var(--tri-white);
}