/* Page-owned styles for guide-des-niveaux */

.guide-intro__container,
.guide-beginner__container,
.guide-intermediate__container,
.guide-advanced__container,
.guide-general-tips__container,
.guide-boosters__container,
.guide-limited-moves__container,
.guide-high-score__container,
.guide-special-obstacles__container,
.guide-conclusion__container {
    max-width: var(--container-prose-max);
    margin-inline: auto;
}

.guide-intro__lead {
    font-size: var(--text-body-large-size);
    line-height: var(--text-body-large-line-height);
    color: var(--color-text-secondary);
    margin-block-end: var(--space-5);
}

.guide-intro__list {
    margin-block-end: var(--space-5);
}

.guide-beginner__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    margin-block-start: var(--space-5);
}

.guide-beginner__main,
.guide-beginner__callout {
    min-width: 0;
}

.guide-beginner__callout {
    margin-block-end: 0;
}

.guide-beginner__callout h4 {
    margin-block-end: var(--space-3);
}

.guide-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-block: var(--space-5);
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--color-surface);
    border: var(--border-width) var(--border-style) var(--color-border);
    border-radius: var(--radius-2);
    overflow: hidden;
    min-width: 480px;
}

.guide-table th,
.guide-table td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-block-end: var(--border-width) var(--border-style) var(--color-border);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-text-primary);
}

.guide-table th {
    background-color: var(--color-surface-raised);
    font-weight: 600;
    color: var(--color-text-primary);
}

.guide-table tr:last-child td {
    border-block-end: none;
}

.guide-advanced__callout {
    margin-block-start: var(--space-5);
    margin-block-end: 0;
}

.guide-advanced__callout h4 {
    margin-block-end: var(--space-3);
}

.guide-general-tips__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-block-start: var(--space-5);
}

.guide-general-tips__column {
    min-width: 0;
}

.guide-special-obstacles__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    margin-block-start: var(--space-5);
}

.guide-special-obstacles__column {
    min-width: 0;
}

.guide-conclusion__cta {
    display: flex;
    justify-content: center;
    margin-block-start: var(--space-6);
}

.guide-conclusion__cta .btn {
    min-width: 240px;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .guide-beginner__grid {
        grid-template-columns: 1fr;
    }

    .guide-general-tips__grid,
    .guide-special-obstacles__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .guide-beginner__grid,
    .guide-general-tips__grid,
    .guide-special-obstacles__grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .guide-conclusion__cta {
        justify-content: stretch;
    }

    .guide-conclusion__cta .btn {
        width: 100%;
        min-width: 0;
    }
}