/**
 * Bikez guide blocks — editor and front-end components
 */

/* Quick answer */
.bikez-quick-answer,
.quick-answer-shell .bikez-quick-answer {
    margin: 0 0 var(--space-5, 2rem);
    padding: var(--space-4, 1.5rem);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-rule, rgba(26, 29, 33, 0.14));
    border-top: 3px solid var(--color-brand, #6fc2b3);
}

.bikez-quick-answer > h2,
.quick-answer-shell .bikez-quick-answer > h2 {
    font-family: var(--font-workshop, monospace);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3, 1rem);
    color: var(--color-muted, #4a5259);
}

.bikez-quick-answer__avoid {
    margin: var(--space-3, 1rem) 0 0;
    padding-top: var(--space-3, 1rem);
    border-top: 1px dashed var(--color-rule, rgba(26, 29, 33, 0.14));
    font-size: 0.975rem;
}

/* Decision row / best-for cards */
.bikez-decision-row {
    display: grid;
    gap: var(--space-3, 1rem);
    margin: 0 !important;
}

@media (min-width: 40rem) {
    .bikez-decision-row {
        grid-template-columns: 1fr 1fr;
    }
}

.bikez-best-for {
    margin: 0 !important;
    padding: var(--space-3, 1rem) !important;
    background: var(--color-canvas, #f6f6f5);
    border: 1px solid var(--color-rule, rgba(26, 29, 33, 0.14));
}

.bikez-best-for--gravel {
    border-top: 3px solid var(--color-accent, #2d8f82);
}

.bikez-best-for--racer {
    border-top: 3px solid var(--color-ink, #1a1d21);
}

.bikez-best-for p {
    margin: 0;
    font-size: 0.975rem;
}

/* Comparison table */
.bikez-compare-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.bikez-compare-table th,
.bikez-compare-table td {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-rule, rgba(26, 29, 33, 0.14));
    text-align: left;
    vertical-align: top;
}

.bikez-compare-table thead th {
    font-family: var(--font-workshop, monospace);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--color-ink, #1a1d21);
    color: #fff;
    border-color: var(--color-ink, #1a1d21);
}

.bikez-compare-table tbody th {
    font-weight: 600;
    background: var(--color-canvas, #f6f6f5);
}

.bikez-compare-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.6);
}

/* Pros / cons */
.bikez-pros-cons {
    display: grid;
    gap: var(--space-3, 1rem);
    margin: var(--space-5, 2rem) 0 !important;
}

@media (min-width: 40rem) {
    .bikez-pros-cons {
        grid-template-columns: 1fr 1fr;
    }
}

.bikez-pros,
.bikez-cons {
    margin: 0 !important;
    padding: var(--space-3, 1rem) !important;
    border: 1px solid var(--color-rule, rgba(26, 29, 33, 0.14));
}

.bikez-pros {
    border-top: 3px solid var(--color-accent, #2d8f82);
}

.bikez-cons {
    border-top: 3px solid var(--color-workshop, #9a4d2e);
}

.bikez-pros h3,
.bikez-cons h3 {
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-2, 0.75rem);
}

/* Checklist */
.bikez-checklist {
    margin: var(--space-5, 2rem) 0;
    padding: var(--space-4, 1.5rem);
    border: 1px solid var(--color-rule, rgba(26, 29, 33, 0.14));
    background: repeating-linear-gradient(
        180deg,
        transparent,
        transparent 1.55rem,
        rgba(26, 29, 33, 0.05) 1.55rem,
        rgba(26, 29, 33, 0.05) calc(1.55rem + 1px)
    );
}

.bikez-checklist h3 {
    font-family: var(--font-workshop, monospace);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3, 1rem);
    color: var(--color-workshop, #9a4d2e);
}

.bikez-checklist ul {
    margin: 0;
    padding-left: 1.1rem;
}

.bikez-checklist li::marker {
    font-family: var(--font-workshop, monospace);
    color: var(--color-workshop, #9a4d2e);
}

/* Recommendation */
.bikez-recommendation {
    margin: var(--space-5, 2rem) 0;
    padding: var(--space-4, 1.5rem);
    background: var(--color-ink, #1a1d21);
    color: #fff;
}

.bikez-recommendation p {
    margin: 0;
    font-size: 1.05rem;
}

.bikez-recommendation strong {
    color: var(--color-brand, #6fc2b3);
}

/* Warning */
.bikez-warning {
    margin: var(--space-5, 2rem) 0;
    padding: var(--space-4, 1.5rem);
    border: 1px solid var(--color-workshop, #9a4d2e);
    background: #faf6f3;
}

.bikez-warning h3 {
    font-family: var(--font-workshop, monospace);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-workshop, #9a4d2e);
    margin: 0 0 var(--space-2, 0.75rem);
}

/* Link cluster */
.bikez-link-cluster {
    margin: var(--space-5, 2rem) 0;
    padding: var(--space-4, 1.5rem) 0;
    border-block: 1px solid var(--color-rule, rgba(26, 29, 33, 0.14));
}

.bikez-link-cluster h3 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-3, 1rem);
    color: var(--color-muted, #4a5259);
}

.bikez-link-cluster ul {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 1;
}

@media (min-width: 40rem) {
    .bikez-link-cluster ul {
        columns: 2;
        column-gap: var(--space-5, 2rem);
    }
}

.bikez-link-cluster li {
    break-inside: avoid;
    margin-bottom: var(--space-2, 0.75rem);
}

.bikez-link-cluster a {
    font-weight: 600;
    color: var(--color-ink, #1a1d21);
    text-decoration: none;
}

.bikez-link-cluster a:hover {
    color: var(--color-accent, #2d8f82);
    text-decoration: underline;
}