/* /MainPage/Modules/HealthAndWellBeing/Training/Training.css */

.TrainingContentArea {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 100%;
    padding: 20px;
    color: var(--textColor);
    background-color: var(--mainPageBodyBgColor);
    box-sizing: border-box;
    min-width: 0;

    .TrainingContentHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 8px;
        background-color: var(--mainPageCardBgColor);

        h3 {
            margin: 0;
            font-size: 1.4rem;
        }

        p {
            margin: 6px 0 0;
            color: var(--textColor);
            opacity: 0.8;
        }
    }

    .TrainingContentTabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 8px;
        background-color: var(--mainPageModuleBarBgColor);

        button {
            padding: 10px 14px;
            border: 1px solid transparent;
            border-radius: 8px;
            color: var(--textColor);
            background-color: var(--mainPageButtonBgColor);
            cursor: pointer;

            &:hover {
                background-color: var(--activeElementHoverColor);
            }

            &.Active {
                border-color: var(--mainPageBorderColor);
                background-color: var(--activeElementBgColor);
            }
        }
    }

    .TrainingContentBody {
        flex: 1;
        min-width: 0;
        min-height: 260px;
        padding: 18px;
        border: 1px solid var(--mainPageBorderColor);
        border-radius: 8px;
        background-color: var(--mainPageCardBgColor);
    }
}

/* Smartphones */
@media (max-width: 767px) {
    .TrainingContentArea {
        gap: 10px;
        padding: 8px;

        .TrainingContentHeader {
            padding: 14px;

            h3 { font-size: 1.2rem; }
            p { font-size: .9rem; line-height: 1.4; }
        }

        .TrainingContentTabs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 6px;
            padding: 6px;

            button {
                min-width: 0;
                min-height: 44px;
                padding: 9px 8px;
                overflow-wrap: anywhere;
            }
        }

        .TrainingContentBody { padding: 10px; }
    }
}

@media (max-width: 420px) {
    .TrainingContentArea .TrainingContentTabs { grid-template-columns: 1fr; }
}

/* Tablettes */
@media (min-width: 768px) and (max-width: 1024px) {
    .TrainingContentArea { padding: 14px; }
    .TrainingContentArea .TrainingContentTabs button { flex: 1 1 150px; }
    .TrainingContentArea .TrainingContentBody { padding: 14px; }
}

/* Petits laptops */
@media (min-width: 1025px) and (max-width: 1919px) { }

/* Desktop */
@media (min-width: 1920px) { }