/*
 * GranRoc Blocks — cursus-styling (port van de trainitnow-childthema-partials
 * tokens.css / course-content.css / sessions.css / reviews.css + kaart-badge).
 *
 * Klassen houden het tin-prefix: contract met de geporte PHP en identiek aan
 * het childthema, zodat content en styling 1-op-1 uitwisselbaar blijven.
 *
 * Merkkleuren zijn hue-gestuurd: de drie knoppen bovenaan :root bepalen alle
 * afgeleide tinten. Per site overschrijfbaar via de optie granroc_brand_hues
 * (inline emissie in granroc-courses.php) — defaults hieronder zijn het
 * TrainItNow-paars/teal. Op Divi-sites winnen aanwezige --gcid-*-variabelen;
 * elders vallen die terug op de tokens.
 */

:root {
    /* -- Merk-hue-knoppen (0-360) -- */
    --tin-hue-primary:          245;
    --tin-hue-primary-2:        280;
    --tin-hue-secondary:        165;

    /* -- Vlakken -- */
    --tin-background:           hsl(220 20% 97%);
    --tin-foreground:           hsl(230 25% 15%);
    --tin-card:                 hsl(0 0% 100%);
    --tin-card-foreground:      hsl(230 25% 15%);

    /* -- Merk (afgeleid van de hue-knoppen) -- */
    --tin-primary:              hsl(var(--tin-hue-primary) 50% 48%);
    --tin-primary-foreground:   hsl(0 0% 100%);
    --tin-secondary:            hsl(var(--tin-hue-secondary) 60% 40%);
    --tin-secondary-foreground: hsl(0 0% 100%);
    --tin-accent:               hsl(var(--tin-hue-primary) 40% 95%);

    /* -- Status / utility -- */
    --tin-muted:                hsl(220 15% 93%);
    --tin-muted-foreground:     hsl(220 10% 46%);
    --tin-success:              hsl(142 60% 40%);
    --tin-focus-ring:           0 0 0 3px hsl(var(--tin-hue-primary) 50% 48% / 0.15);

    /* -- Randen / radius / schaduw -- */
    --tin-border:               hsl(220 15% 90%);
    --tin-radius:               0.75rem;
    --tin-radius-lg:            var(--tin-radius);
    --tin-shadow-card:
        0 1px 3px hsl(230 25% 15% / 0.06),
        0 4px 12px hsl(230 25% 15% / 0.04);
    --tin-shadow-card-hover:
        0 4px 16px hsl(230 25% 15% / 0.10),
        0 8px 32px hsl(230 25% 15% / 0.06);

    /* -- Gradiënten -- */
    --tin-gradient-primary: linear-gradient(135deg, hsl(var(--tin-hue-primary) 50% 48%), hsl(var(--tin-hue-primary-2) 60% 55%));
}

/* ============================================================================
 * Cursussecties — [tin_course_content] / [tin_course_section]
 * ========================================================================= */

.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: twee kolommen, 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 {
    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;
}

/* -- Doelgroep: twee kolommen kaarten, shield-check-marker. Content die als
 * gelabelde alinea's binnenkomt (AI CERTs) krijgt --paragraph-list en dezelfde
 * layout — zie granroc_content_is_paragraph_list(). -- */
.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; /* 16 kaartpadding + 20 icoon + 12 */
    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: 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;
}

/* -- Overig -- */
.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);
}

/* ============================================================================
 * Categorie-badge op de productkaart (granroc_render_card_category_badge)
 * ========================================================================= */

ul.products li.product,
ul.wc-block-product-template li.product {
    position: relative;
}
ul.products li.product .tin-card-badge,
ul.wc-block-product-template li.product .tin-card-badge {
    display: inline-block;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--gcid-primary-color, var(--tin-primary));
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================================================
 * Sessiegrid — [tin_upcoming_sessions]
 * ========================================================================= */

.tin-sessions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 980px) { .tin-sessions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tin-sessions-grid { grid-template-columns: 1fr; } }

.tin-session-card {
    display: flex;
    flex-direction: column;
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: var(--tin-radius);
    box-shadow: var(--tin-shadow-card);
    padding: 20px;
    text-decoration: none;
    color: var(--tin-foreground);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tin-session-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tin-shadow-card-hover);
}
.tin-session-card__title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--tin-foreground);
}
.tin-session-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--tin-muted-foreground);
}
.tin-session-card__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tin-session-ico {
    flex: 0 0 auto;
    color: var(--gcid-primary-color, var(--tin-primary));
}
.tin-session-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}
.tin-session-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gcid-secondary-color, var(--tin-secondary));
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.tin-session-card__price {
    margin-left: auto;
    font-weight: 700;
    color: var(--tin-foreground);
}
.tin-session-card__price del { color: var(--tin-muted-foreground); font-weight: 400; margin-right: 6px; }
.tin-sessions-empty {
    color: var(--tin-muted-foreground);
}

/* ----------------------------------------------------------------------------
 * Datum/locatie-kaarten op de productpagina (sessions-control.js). De native
 * variatie-<select> blijft in de DOM (verborgen) zodat WooCommerce blijft
 * werken.
 * ------------------------------------------------------------------------- */
.tin-native-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* Divi wikkelt de <select> in een chrome-<span> (pijl via ::after) NA ons
   script; die wrapper hier alsnog verbergen. Op blockthema's matcht dit niets
   en is het een no-op. */
td.value:has(> .tin-datecards) > span {
    display: none !important;
}
.tin-datecards span::after {
    content: none !important;
    display: none !important;
}

.tin-datecards__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tin-datecard {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--tin-card);
    border: 1px solid var(--tin-border);
    border-radius: var(--tin-radius);
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.tin-datecard:hover {
    border-color: var(--gcid-primary-color, var(--tin-primary));
    background: var(--tin-muted);
}
.tin-datecard.is-selected {
    border-color: var(--gcid-primary-color, var(--tin-primary));
    box-shadow: var(--tin-focus-ring);
}
.tin-datecard.is-hidden { display: none; }

.tin-datecard__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.tin-datecard__date {
    font-size: 14px;
    font-weight: 600;
    color: var(--tin-foreground);
}
.tin-datecard__check {
    flex: 0 0 auto;
    margin-top: 1px;
    opacity: 0;
    color: var(--tin-success);
    transition: opacity 0.15s ease;
}
.tin-datecard__check svg { display: block; width: 18px; height: 18px; }
.tin-datecard.is-selected .tin-datecard__check { opacity: 1; }
.tin-datecard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--tin-muted-foreground);
}
.tin-datecard__meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.tin-datecard__meta .tin-ico { flex: 0 0 auto; color: var(--gcid-primary-color, var(--tin-primary)); }
.tin-datecard__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--gcid-secondary-color, var(--tin-secondary));
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}
.tin-datecards__more {
    margin-top: 8px;
    padding: 6px 0;
    background: none;
    border: 0;
    color: var(--gcid-primary-color, var(--tin-primary));
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.tin-datecards__more:hover { text-decoration: underline; }

/* ============================================================================
 * Springest-reviews — [springest_reviews]
 * ========================================================================= */

.tin-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.tin-review-card {
    background: var(--tin-card);
    border-radius: var(--tin-radius-lg);
    box-shadow: var(--tin-shadow-card);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tin-review-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.tin-review-card__course {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tin-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 1;
}
.tin-review-card__score {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--tin-foreground);
    white-space: nowrap;
    flex-shrink: 0;
}
.tin-review-card__star {
    color: var(--tin-primary);
}
.tin-review-card__quote {
    margin: 0;
    font-style: italic;
    color: var(--tin-muted-foreground);
    flex: 1; /* duwt meta naar onderen zodat kaarten in een rij uitlijnen */
    line-height: 1.6;
}
.tin-review-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tin-review-avatar {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--tin-gradient-primary);
    color: var(--tin-primary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.tin-review-card__name {
    margin: 0;
    font-weight: 700;
    color: var(--tin-foreground);
}
.tin-reviews-attribution {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: 0.875rem;
}
.tin-reviews-attribution a {
    color: var(--tin-muted-foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tin-reviews-attribution a:hover {
    color: var(--tin-primary);
}

/* Aanvraagroute in plaats van een koopvorm, voor cursussen waarvan de
   beheermodule nog geen prijs of startdata levert. De sjabloon-JS verplaatst
   dit blok naar de boekingskaart, dus het erft daar de kaartbreedte. */
.oc-prijs-aanvragen {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: stretch;
}
.oc-prijs-aanvragen p {
    margin: 0;
    color: var(--tin-muted-foreground, #52607a);
    font-size: 0.95rem;
    line-height: 1.5;
}
.oc-prijs-aanvragen .btn {
    text-align: center;
}

/* Nieuwsoverzicht op /nieuws/ (lijst wordt door de plugin gerenderd). */
.oc-nieuws { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.oc-nieuws__link {
    display: grid; gap: 0.3rem; padding: 1.15rem 1.35rem; text-decoration: none;
    background: #fff; border: 1px solid var(--tin-border, #e3e8ef); border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: border-color .15s, box-shadow .15s;
}
.oc-nieuws__link:hover { border-color: var(--tin-primary, #0476BD); box-shadow: 0 4px 14px rgba(16, 24, 40, .08); }
.oc-nieuws__datum { font-size: .8rem; color: var(--tin-muted-foreground, #52607a); }
.oc-nieuws__titel { font-weight: 700; color: var(--tin-foreground, #0f172a); font-size: 1.05rem; line-height: 1.35; }
.oc-nieuws__lead { color: var(--tin-muted-foreground, #52607a); font-size: .93rem; line-height: 1.5; }

/* Telefoonnummers nooit midden in het nummer afbreken: bij een containerbreedte
   rond 420px viel "030" op de ene regel en "7370799" op de volgende. */
a[href^="tel:"] {
    white-space: nowrap;
}

/* Situatiekeuze op de catalogus: drie situaties plus een teamkaart. Staat in de
   donkere shop-hero, dus lichte tekst op een half-transparante ondergrond. */
.oc-situaties { margin-top: 22px; }
.oc-situaties-kop {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}
.oc-situaties-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.oc-situatie {
    display: inline-flex;
    align-items: center;
    padding: 11px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .07);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease;
}
.oc-situatie:hover,
.oc-situatie:focus-visible {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}
/* De teamkaart is geen filter maar een route naar een gesprek: eigen accent,
   en op een eigen regel zodat hij niet als vierde filter leest. */
.oc-situatie-team {
    background: #fff;
    color: #0A4C79;
    border-color: #fff;
    flex-basis: 100%;
    justify-content: center;
    margin-top: 4px;
}
.oc-situatie-team:hover,
.oc-situatie-team:focus-visible {
    background: #E1F0F9;
    color: #0A4C79;
    border-color: #E1F0F9;
}
@media (min-width: 900px) {
    .oc-situatie-team { flex-basis: auto; margin-top: 0; }
}