/* ===== Greeting page ===== */
.layout { display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: start; }

.side { position: sticky; top: 96px; }
.side button { display: block; width: 100%; text-align: left; border: 0; background: none; font-family: inherit; cursor: pointer; color: var(--grey); }
.side-all { padding: 10px 14px; margin-bottom: 16px; border-radius: 10px; background: var(--light) !important; font-weight: 700; color: var(--ink) !important; }
.side-all.active { background: var(--ink) !important; color: #fff !important; }
.side-group { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.side-group h3 { font-size: 20px; margin-bottom: 6px; }
.side-item { padding: 7px 10px; border-radius: 8px; font-size: 15px; }
.side-item:hover { background: var(--light) !important; }
.side-item.active { background: #fdf1f4 !important; color: var(--coral) !important; font-weight: 700; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.gcard { border: 1px solid var(--line); border-radius: 6px 16px 16px 6px; overflow: hidden; }
.gcard[hidden] { display: none; }
.gcard-art { height: 180px; display: grid; place-items: center; padding: 16px; text-align: center; color: #fff; }
.gcard-art b { font: 700 26px 'Fraunces', serif; }
.gcard-text { padding: 12px 14px 14px; display: grid; gap: 10px; }
.gcard-text p { margin: 0; font-size: 13px; color: var(--grey); }
.g1 .gcard-art { background: radial-gradient(circle at 30% 20%, #ff9a6b, #f0524f); }
.g2 .gcard-art { background: radial-gradient(circle at 70% 20%, #a26bff, #4a3fa8); }
.g3 .gcard-art { background: radial-gradient(circle at 30% 80%, #53c8a8, #0f6d70); }
.g4 .gcard-art { background: radial-gradient(circle at 70% 80%, #ecc47e, #b07a2a); }

@media (max-width: 800px) {
    .layout { grid-template-columns: 1fr; }
    .side { position: static; }
}