/* cards.css, puffy clay cards: feature grids, icon tiles, doc links, FAQ (shared) */

/* Feature grid */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: var(--card-shadow);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s;
}
.card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: var(--clay-shadow); }
.card h3 { font-size: 1.24rem; margin-bottom: .5rem; }
.card p { color: var(--text-2); font-size: .96rem; }
.card .tag {
  display: inline-block; font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 6px; padding: .15em .5em; margin-left: .5rem; vertical-align: middle;
}

/* Icon tiles, soft clay squares with an inset highlight */
.ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 26%, var(--card)), color-mix(in srgb, var(--accent) 12%, var(--card)));
  color: var(--accent-deep); box-shadow: inset 0 2px 4px rgba(255,255,255,.35), 0 6px 14px color-mix(in srgb, var(--accent) 22%, transparent);
  margin-bottom: 1.15rem; transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.card:hover .ico { transform: scale(1.12) rotate(-6deg); }
.ico svg { width: 23px; height: 23px; }
.ico.i-warm { background: linear-gradient(150deg, color-mix(in srgb, var(--warm) 32%, var(--card)), color-mix(in srgb, var(--warm) 14%, var(--card))); color: color-mix(in srgb, var(--warm-deep) 80%, var(--text)); box-shadow: inset 0 2px 4px rgba(255,255,255,.4), 0 6px 14px color-mix(in srgb, var(--warm) 26%, transparent); }
.ico.i-good { background: linear-gradient(150deg, color-mix(in srgb, var(--good) 30%, var(--card)), color-mix(in srgb, var(--good) 14%, var(--card))); color: color-mix(in srgb, var(--good-deep) 80%, var(--text)); box-shadow: inset 0 2px 4px rgba(255,255,255,.4), 0 6px 14px color-mix(in srgb, var(--good) 24%, transparent); }
.ico.i-rose { background: linear-gradient(150deg, color-mix(in srgb, var(--bad) 30%, var(--card)), color-mix(in srgb, var(--bad) 14%, var(--card))); color: color-mix(in srgb, var(--bad-deep) 80%, var(--text)); box-shadow: inset 0 2px 4px rgba(255,255,255,.4), 0 6px 14px color-mix(in srgb, var(--bad) 24%, transparent); }

/* Doc link cards */
.docs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.doc-card {
  display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.8rem; color: var(--text); box-shadow: var(--card-shadow);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s;
}
.doc-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--clay-shadow); }
.doc-card h3 { font-size: 1.22rem; display: flex; align-items: center; gap: .5rem; }
.doc-card p { color: var(--text-2); font-size: .95rem; margin-top: .5rem; }
.doc-card .arrow { color: var(--accent-deep); font-size: .9rem; font-weight: 600; margin-top: 1rem; display: inline-block; }

/* FAQ accordion (grid-rows animation) */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: .8rem; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--card-shadow); overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--text);
  font: 700 1.08rem var(--round); padding: 1.15rem 1.3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-q::after { content: "+"; font-weight: 400; font-size: 1.5rem; color: var(--accent-deep); line-height: 1; transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.4, 0, .2, 1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner p { margin: 0; padding: 0 1.3rem 1.2rem; color: var(--text-2); max-width: 62ch; }
.faq-a-inner code { font-size: .9em; }

@media (max-width: 900px) {
  .grid, .docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .grid, .grid.g2, .docs-grid { grid-template-columns: minmax(0, 1fr); }
}