/**
 * Matcla Courses — Utbildningar page (design translation)
 * Mirrors the Claude Design "Utbildningar" layout, re-skinned onto the
 * Helix Academy theme.json tokens. Hardcoded fallbacks keep it portable.
 */

.mcp {
    --mcp-primary:      var(--wp--preset--color--primary, #20413A);
    --mcp-primary-deep: var(--wp--preset--color--primary-deep, #163029);
    --mcp-accent:       var(--wp--preset--color--accent, #C97B57);
    --mcp-accent-deep:  var(--wp--preset--color--accent-deep, #B0623F);
    --mcp-accent-soft:  var(--wp--preset--color--accent-soft, #EBD0BE);
    --mcp-cream:        var(--wp--preset--color--cream, #F6F1E8);
    --mcp-sand:         var(--wp--preset--color--sand, #EFE7D8);
    --mcp-sage:         var(--wp--preset--color--sage, #DDE6DD);
    --mcp-ink:          var(--wp--preset--color--ink, #1E2420);
    --mcp-muted:        var(--wp--preset--color--muted, #5E675F);
    --mcp-line:         var(--wp--preset--color--line, #E4DACB);
    --mcp-serif:        var(--wp--preset--font-family--heading, 'Newsreader', Georgia, serif);
    --mcp-sans:         var(--wp--preset--font-family--body, 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif);

    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 32px);
    color: var(--mcp-ink);
    font-family: var(--mcp-sans);
    line-height: 1.55;
}

.mcp * { box-sizing: border-box; }

/* ---- Tabs ---- */
.mcp__tabs {
    display: flex; gap: 6px; flex-wrap: wrap;
    border-bottom: 1px solid var(--mcp-line);
}
.mcp__tab {
    appearance: none; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 15.5px; font-weight: 600;
    padding: 14px 18px; margin-bottom: -1px;
    border-bottom: 2.5px solid transparent; color: var(--mcp-muted);
    transition: color 0.15s, border-color 0.15s;
}
.mcp__tab:hover { color: var(--mcp-ink); }
.mcp__tab[aria-selected="true"] {
    color: var(--mcp-ink); border-bottom-color: var(--mcp-accent);
}
.mcp__tab-count {
    display: inline-block; margin-left: 5px; font-size: 12.5px; font-weight: 600;
    color: var(--mcp-muted); background: var(--mcp-sage);
    border-radius: 999px; padding: 1px 8px;
}
.mcp__tab[aria-selected="true"] .mcp__tab-count {
    color: var(--mcp-accent-deep); background: var(--mcp-accent-soft);
}

/* ---- Result bar ---- */
.mcp__resultbar {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 24px 0 8px;
}
.mcp__result { font-size: 14px; color: var(--mcp-muted); }

/* ---- List + card ---- */
.mcp__list { display: flex; flex-direction: column; gap: 16px; padding: 20px 0 40px; }
.mcp__card {
    background: #fff; border: 1px solid var(--mcp-line); border-radius: 18px;
    padding: 26px 28px; display: grid; grid-template-columns: 1fr auto;
    gap: 28px; align-items: center;
    transition: box-shadow 0.2s, transform 0.2s;
}
.mcp__card:hover {
    box-shadow: 0 22px 40px -28px rgba(22, 48, 41, 0.35);
    transform: translateY(-1px);
}
.mcp__card[hidden] { display: none; }

.mcp__badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.mcp__badge {
    padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--mcp-sage); color: var(--mcp-primary); white-space: nowrap;
}
.mcp__badge--workshop          { background: var(--mcp-accent-soft); color: var(--mcp-accent-deep); }
.mcp__badge--fordjupningskurs  { background: var(--mcp-accent-soft); color: var(--mcp-accent-deep); }
.mcp__badge--handledning       { background: var(--mcp-sand); color: var(--mcp-primary); }
.mcp__badge--grundkurs         { background: var(--mcp-sage); color: var(--mcp-primary); }
.mcp__badge--utbildning        { background: var(--mcp-sage); color: var(--mcp-primary); }

.mcp__card-title {
    font-family: var(--mcp-serif); font-size: 24px; font-weight: 600;
    margin: 0 0 8px; line-height: 1.18;
}
.mcp__card-title a { color: inherit; text-decoration: none; }
.mcp__card-title a:hover { color: var(--mcp-accent-deep); }
.mcp__card-desc {
    font-size: 15px; color: var(--mcp-muted); margin: 0 0 18px; max-width: 620px;
}

.mcp__meta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.mcp__meta-item {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14px; color: var(--mcp-ink); font-weight: 500;
}
.mcp__meta-item svg { flex: none; }

/* ---- Price + CTA ---- */
.mcp__aside {
    text-align: right; display: flex; flex-direction: column;
    align-items: flex-end; gap: 14px; min-width: 150px;
}
.mcp__price-label { font-size: 12.5px; color: var(--mcp-muted); margin-bottom: 2px; }
.mcp__price {
    font-family: var(--mcp-serif); font-size: 28px; font-weight: 600;
    color: var(--mcp-primary); line-height: 1;
}
.mcp__cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; background: var(--mcp-primary); color: #fff;
    text-decoration: none; border-radius: 999px; font-size: 14.5px;
    font-weight: 600; white-space: nowrap; transition: background 0.15s;
}
.mcp__cta:hover { background: var(--mcp-primary-deep); color: #fff; }
.mcp__cta--secondary {
    background: transparent; color: var(--mcp-primary);
    border: 1.5px solid var(--mcp-primary);
}
.mcp__cta--secondary:hover { background: var(--mcp-primary); color: #fff; }

/* ---- Empty state ---- */
.mcp__empty { text-align: center; padding: 64px 20px; color: var(--mcp-muted); }
.mcp__empty p { font-size: 17px; margin: 0; }

/* ---- CTA banner ---- */
.mcp__banner { padding: 0 0 88px; }
.mcp__banner-inner {
    background: var(--mcp-primary); border-radius: 24px; padding: 52px 48px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; flex-wrap: wrap; position: relative; overflow: hidden;
}
.mcp__banner-mark {
    position: absolute; right: -50px; top: -50px;
    width: 240px; height: 240px; opacity: 0.12; pointer-events: none;
}
.mcp__banner-text { position: relative; z-index: 1; max-width: 560px; }
.mcp__banner-title {
    font-family: var(--mcp-serif); font-weight: 500; font-size: 32px;
    letter-spacing: -0.02em; color: #fff; margin: 0 0 10px; line-height: 1.15;
}
.mcp__banner-sub { font-size: 16px; color: rgba(255, 255, 255, 0.78); margin: 0; }
.mcp__banner-cta {
    position: relative; z-index: 1; display: inline-flex; align-items: center;
    gap: 9px; padding: 15px 28px; background: var(--mcp-accent); color: #fff;
    text-decoration: none; border-radius: 999px; font-size: 16px;
    font-weight: 600; white-space: nowrap; transition: background 0.15s;
}
.mcp__banner-cta:hover { background: var(--mcp-accent-deep); color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 720px) {
    .mcp__card { grid-template-columns: 1fr; gap: 20px; }
    .mcp__aside { text-align: left; align-items: flex-start; }
    .mcp__banner-inner { padding: 40px 28px; }
    .mcp__meta { gap: 14px; }
}