/* ==========================================================================
   Ideas & Roadmap Page — Page-Specific Styles
   Builds on top of hub.css (shared parent stylesheet)
   ========================================================================== */

/* ---------- Page Layout ---------- */
.ideas-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 60px;
}

/* ---------- Intro ---------- */
.ideas-intro {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 40px;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.65;
}

[data-theme="dark"] .ideas-intro {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

/* ---------- Tier Section ---------- */
.ideas-tier {
    margin-bottom: 48px;
}

.ideas-tier-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e2e8f0;
}

[data-theme="dark"] .ideas-tier-header {
    border-bottom-color: #334155;
}

.ideas-tier-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}

[data-theme="dark"] .ideas-tier-label {
    color: #e2e8f0;
}

.ideas-tier-range {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

[data-theme="dark"] .ideas-tier-range {
    color: #94a3b8;
}

/* ---------- Ideas Grid ---------- */
.ideas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

@media (max-width: 900px) {
    .ideas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .ideas-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Idea Card ---------- */
.ideas-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.18s, transform 0.18s;
    position: relative;
}

.ideas-card[href]:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.09);
    transform: translateY(-2px);
}

[data-theme="dark"] .ideas-card {
    background: #1e293b;
    border-color: #334155;
}

/* Colour accent on left edge */
.ideas-card[data-color="blue"]   { border-left: 4px solid #3b82f6; }
.ideas-card[data-color="green"]  { border-left: 4px solid #22c55e; }
.ideas-card[data-color="amber"]  { border-left: 4px solid #f59e0b; }
.ideas-card[data-color="purple"] { border-left: 4px solid #8b5cf6; }
.ideas-card[data-color="rose"]   { border-left: 4px solid #f43f5e; }
.ideas-card[data-color="teal"]   { border-left: 4px solid #14b8a6; }

.ideas-card-title {
    font-size: 0.97rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
}

[data-theme="dark"] .ideas-card-title {
    color: #e2e8f0;
}

.ideas-card-desc {
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.55;
    flex: 1;
}

[data-theme="dark"] .ideas-card-desc {
    color: #94a3b8;
}

/* ---------- Card Meta (badges + tags) ---------- */
.ideas-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.ideas-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
}

.ideas-badge-green  { background: #dcfce7; color: #166534; }
.ideas-badge-amber  { background: #fef3c7; color: #92400e; }
.ideas-badge-blue   { background: #dbeafe; color: #1e40af; }
.ideas-badge-grey   { background: #f1f5f9; color: #475569; }
.ideas-badge-purple { background: #ede9fe; color: #5b21b6; }

[data-theme="dark"] .ideas-badge-green  { background: #14532d; color: #86efac; }
[data-theme="dark"] .ideas-badge-amber  { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .ideas-badge-blue   { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .ideas-badge-grey   { background: #1e293b; color: #94a3b8; }
[data-theme="dark"] .ideas-badge-purple { background: #2e1065; color: #c4b5fd; }

.ideas-tag {
    font-size: 0.72rem;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 6px;
}

[data-theme="dark"] .ideas-tag {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

/* ---------- "Link" indicator for clickable cards ---------- */
.ideas-card[href]::after {
    content: '\2197';
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 0.8rem;
    color: #94a3b8;
    opacity: 0;
    transition: opacity 0.18s;
}

.ideas-card[href]:hover::after {
    opacity: 1;
}