/*
 * trainitnow-child — Course content sections
 *
 * Rendered by [tin_course_content] / [tin_course_section].
 * Styling follows the Train IT Now brand colours.
 */

.tin-course-section,
.tin-course-requirements {
    --tin-primary: #00A594;
    --tin-primary-dark: #008D7F;
    --tin-secondary: #00A594;
    --tin-foreground: #1F2342;
    --tin-muted-foreground: #667875;
    --tin-card: #FFFFFF;
    --tin-border: #DCEAE7;
    --tin-shadow-card: 0 2px 12px rgba(31,35,66,.07);
}

.tin-course-section {
    margin-block-end: 2rem;
}

.tin-course-section:last-child {
    margin-block-end: 0;
}

.tin-course-section__title {
    margin-block-end: 0.75rem;
    padding-block-end: 0.5rem;
    border-block-end: 1px solid var(--tin-border);
    color: var(--tin-foreground);
}


/* ------------------------------------------------------------------
 * Checklist
 * ------------------------------------------------------------------ */

.tin-course-section ul,
.tin-course-requirements {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

@media (max-width: 600px) {
    .tin-course-section ul,
    .tin-course-requirements {
        grid-template-columns: 1fr;
    }
}

.tin-course-section ul > li,
.tin-course-requirements > li {
    position: relative;
    margin: 0;
    padding: 0 0 0 28px;
    color: var(--tin-foreground);
    font-size: 14px;
    line-height: 1.5;
}

.tin-course-section ul > li::before,
.tin-course-requirements > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    background-color: #00A594 !important;

    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>") center / contain no-repeat;

    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>") center / contain no-repeat;
}


/* ------------------------------------------------------------------
 * Student profile / doelgroep
 * ------------------------------------------------------------------ */

.tin-course-section--student-profile.tin-course-section--paragraph-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 600px) {
    .tin-course-section--student-profile.tin-course-section--paragraph-list {
        grid-template-columns: 1fr;
    }
}

.tin-course-section--student-profile.tin-course-section--paragraph-list
> .tin-course-section__title {
    grid-column: 1 / -1;
}

.tin-course-section--student-profile ul {
    gap: 16px;
}

.tin-course-section--student-profile ul > li,
.tin-course-section--student-profile.tin-course-section--paragraph-list > p {
    position: relative;
    margin: 0;
    padding: 16px 16px 16px 48px;
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: 12px;
    box-shadow: var(--tin-shadow-card);
    color: var(--tin-foreground);
    font-size: 14px;
    line-height: 1.5;
}

.tin-course-section--student-profile ul > li::before,
.tin-course-section--student-profile.tin-course-section--paragraph-list > p::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 18px;
    width: 20px;
    height: 20px;
    background-color: #00A594 !important;

    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>") center / contain no-repeat;

    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>") center / contain no-repeat;
}


/* ------------------------------------------------------------------
 * Remaining content
 * ------------------------------------------------------------------ */

.tin-course-section ol {
    margin-block: 0 1rem;
    padding-inline-start: 1.25rem;
}

.tin-course-duration {
    margin-block: 0 1rem;
    color: var(--tin-muted-foreground);
}