/* Shared layout for concept index pages (hub + per-project galleries).
   Relies on tokens from styles.css; fallbacks keep it usable standalone. */
body { background: var(--bg, #F5F5FA); }

.gallery { max-width: 1040px; margin: 0 auto; padding: 32px 24px 56px; }
.gallery .back { display: flex; width: fit-content; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--primary, #0067E6); text-decoration: none; margin-bottom: 20px; }
.gallery .back:hover { text-decoration: underline; }
.gallery .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--primary, #0067E6); background: var(--primary-08, rgba(0,103,230,.08)); padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; }
.gallery h1 { font-family: Inter, system-ui, sans-serif; font-size: 26px; font-weight: 800; color: var(--navy, #00004B); letter-spacing: -.5px; margin: 0 0 6px; }
.gallery .lead { max-width: 720px; font-size: 14px; color: var(--navy-60, rgba(0,0,75,.6)); margin: 0 0 24px; line-height: 1.55; }

.gallery .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; }

.card { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: #fff; border: 1px solid var(--navy-08, rgba(0,0,75,.08)); border-radius: 10px; color: inherit; text-decoration: none; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.card:hover { text-decoration: none; border-color: rgba(0,103,230,.35); box-shadow: 0 6px 18px rgba(0,0,75,.08); transform: translateY(-1px); }
.card:hover h3 { color: var(--primary, #0067E6); }
.card:focus-visible { outline: 2px solid var(--primary, #0067E6); outline-offset: 2px; }

.card-id { flex: none; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: #fff; font: 800 15px/1 Inter, system-ui, sans-serif; letter-spacing: -.3px; background: linear-gradient(135deg, var(--g1, #0E1438), var(--g2, #0067E6)); }
.card-body { min-width: 0; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--navy-60, rgba(0,0,75,.6)); }
.card h3 { font-size: 15px; font-weight: 700; color: var(--navy, #00004B); margin: 3px 0 4px; line-height: 1.3; transition: color .15s ease; }
.card p { font-size: 13px; color: var(--navy-60, rgba(0,0,75,.6)); margin: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.pill { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,75,.06); color: var(--navy-60, rgba(0,0,75,.6)); }
.pill--latest { background: var(--primary-08, rgba(0,103,230,.08)); color: var(--primary, #0067E6); }

.gallery .section { margin: 28px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--navy-60, rgba(0,0,75,.6)); }