/* Course content sections
 *
 * Rendered by [tin_course_content] / [tin_course_section] from the cb_* meta that
 * CursusBeheer exports. The export sends content only, so every heading, rule and
 * list marker below is a theme decision and can change without republishing.
 *
 * The look reproduces the .tan-checklist / .tan-audience-grid design in
 * woocommerce.css [8]. Those classes used to be injected into the content by the
 * export template; now that the export sends plain content they are keyed off the
 * section instead. The tan- rules stay where they are, for content that is still
 * hand-authored in a Divi module.
 *
 * The icons are painted with mask-image over a token colour rather than the
 * hardcoded data-URI stroke the tan- rules use, so a Customizer hue change
 * recolours them - which the baked-in strokes never did. The audience shield is an
 * exact match: --tin-primary resolves to #473DB8, the colour the design used. The
 * checklist mark is off by 4 degrees of hue: the design used #29A37C, which is
 * hsl(161 60% 40%), against --tin-secondary at hsl(165 60% 40%). That is the brand
 * teal knob and the nearest token; --tin-success is a purer green (#29A356) and
 * visibly wrong here.
 */

.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: two columns, circle-check marker ------------------------- */

.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 {
    /* Block-level item with the icon absolutely positioned, so inline content
       flows naturally instead of being split into separate flex items. */
    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: var(--tin-secondary);
    -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;
}

/* ---- Audience: two columns of cards, shield-check marker ----------------- */

/* Content imported from AI CERTs arrives as a run of labelled paragraphs rather
 * than a list - see tin_content_is_paragraph_list(). It only ever gets a class
 * added, never rewritten, and is laid out here exactly like the list version so
 * both kinds of course look the same on the page. */
.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 {
    /* Left padding makes room for the icon: 16 (card padding) + 20 (icon) + 12. */
    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; /* card padding 16 + the marker's own 2px offset */
    width: 20px;
    height: 20px;
    background-color: var(--tin-primary);
    -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);
}