/* Tutorials index (/tutorials) — curriculum browser. Mobile-first.
   Visual language matches Tutorial v0 + Quant Sprint. */

.tx-container {
    max-width: 880px;
    margin: 60px auto 80px;
    padding: 0 18px;
    font-family: 'Inter', system-ui, sans-serif;
    color: #1F2933;
}

.tx-header { margin-bottom: 28px; }
.tx-header h1 { margin: 0 0 8px; font-size: 1.85em; }
.tx-subtitle {
    margin: 0 0 6px;
    color: #4B5563;
    font-size: 0.98em;
    line-height: 1.5;
}
.tx-meta {
    margin: 0;
    /* WCAG fix: #6B7280 on #F2F2F2 bg = 4.32:1, fails 4.5. Use #4B5563 = 5.76:1. */
    color: #4B5563;
    font-size: 0.88em;
    letter-spacing: 0.02em;
}

.tx-section { margin: 28px 0; }
.tx-section-title {
    margin: 0 0 6px;
    font-size: 1.45em;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.01em;
    padding: 6px 0 6px 14px;
    border-left: 4px solid #2563EB;
}
.tx-section-note {
    margin: 0 0 14px;
    color: #6B7280;
    font-size: 0.88em;
}

.tx-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.tx-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px 18px;
    transition: border-color 0.15s, transform 0.05s;
}

.tx-card-available { border-color: #DBEAFE; }
.tx-card-available:hover { border-color: #2563EB; transform: translateY(-1px); }

.tx-card-pending { background: #F9FAFB; opacity: 0.78; }

.tx-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.tx-card-tag {
    font-size: 1.05em;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: -0.01em;
}

.tx-card-teaser {
    margin-top: 6px;
    color: #1F2933;
    font-size: 0.93em;
    line-height: 1.45;
}

.tx-card-count {
    margin-top: 6px;
    color: #6B7280;
    font-size: 0.84em;
}
/* Card backgrounds stay white in dark mode (per the existing pattern in this
   template), so text colors do NOT flip — keeping teaser/count dark on white. */

.tx-card-cta {
    margin-top: 10px;
    color: #2563EB;
    font-size: 0.9em;
    font-weight: 600;
}
.tx-card-cta-pending {
    color: #9CA3AF;
    font-weight: 500;
}

.tx-footer {
    margin-top: 36px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
}
.tx-link {
    color: #2563EB;
    text-decoration: none;
    font-weight: 600;
}
.tx-link:hover { text-decoration: underline; }

@media (min-width: 640px) {
    .tx-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
    .tx-container { padding: 0 24px; }
    .tx-header h1 { font-size: 2em; }
}

@media (min-width: 960px) {
    /* Cap at 3 columns with a hard minimum card width so body copy stays legible
       at any viewport width up to the container max (880px). */
    .tx-grid { grid-template-columns: repeat(3, minmax(280px, 1fr)); }
}

@media (prefers-color-scheme: dark) {
    .tx-container { color: #F1F5F9; }
    .tx-section-title { color: #F1F5F9; border-left-color: #60a5fa; }
    .tx-subtitle { color: #94a3b8; }
    .tx-meta { color: #94a3b8; }
    .tx-footer { border-top-color: #1e293b; }
}

/* ── Difficulty + firm-tag chips ──────────────────────────────────── */
.tx-card-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.tx-card-difficulty {
    display: inline-block;
    font-size: 0.70em;
    font-weight: 700;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: uppercase;
}

.tx-difficulty-easy  { background: #D1FAE5; color: #065F46; }
.tx-difficulty-med   { background: #FEF3C7; color: #92400E; }
.tx-difficulty-hard  { background: #FEE2E2; color: #991B1B; }

@media (prefers-color-scheme: dark) {
    .tx-difficulty-easy  { background: #064E3B; color: #6EE7B7; }
    .tx-difficulty-med   { background: #78350F; color: #FCD34D; }
    .tx-difficulty-hard  { background: #7F1D1D; color: #FCA5A5; }
}