/* Illustrated card (image 16:9 + title + text) — canonical format for
   "A solução" / "O problema" (home), "Princípios" (sobre), and "Artigos" (gl-card) grids.
   Any new section using this card format must reuse these selectors (or add its
   class name to the groups below) instead of redefining the card CSS from scratch.
   Standalone copy for pages not using base.css (index.html, sobre.html also link this file). */

.sol-card, .prob-card, .belief-card, .gl-card {
  display: flex; flex-direction: column;
  background: var(--bg-white); border: 1px solid var(--border);
  border-radius: 1.125rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(12,11,30,.04), 0 18px 40px -22px rgba(12,11,30,.18);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease;
}
.sol-card:hover, .prob-card:hover, .belief-card:hover, .gl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(12,11,30,.05), 0 28px 54px -24px rgba(139,82,255,.28);
  border-color: rgba(139,82,255,.22);
}
.sol-stage, .prob-stage, .belief-stage, .gl-card-stage { aspect-ratio: 16/9; overflow: hidden; }
.sol-stage img, .belief-stage img, .gl-card-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* .prob-stage holds a small centered icon (not a full-bleed scene), so it must stay contained, not cropped */
.prob-stage { display: flex; align-items: center; justify-content: center; background: var(--bg-white); }
.prob-stage img { width: 179px; height: 179px; object-fit: contain; display: block; }
.prob-stage img.prob-img-sm { width: 152px; height: 152px; }
.sol-body, .prob-body, .belief-body, .gl-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.75rem 1.75rem; }
.sol-card h3, .prob-card h3, .belief-card h3, .gl-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.3; letter-spacing: -.01em; }
.sol-card p, .prob-card p, .belief-card p, .gl-card p { font-size: .9rem; color: var(--muted); line-height: 1.6; flex: 1; }

/* Grids: default 3-up, max-width 1100px (Princípios/Artigos/Problema reference size) */
.prob-grid, .beliefs-grid, .gl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1100px; margin: 0 auto;
}
@media (max-width: 900px) { .prob-grid, .beliefs-grid, .gl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .prob-grid, .beliefs-grid, .gl-grid { grid-template-columns: 1fr; } }

/* 4-up variant ("A solução"): matches Portfolio's reflow, needs the wider 1460px wrap */
@media (min-width: 1540px) { #solution .wrap { max-width: 1460px; } }
.sol-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1180px) { .sol-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sol-grid { grid-template-columns: 1fr; } }