/* ─── Brand tokens ─────────────────────────────────────────────────────────── */

:root {
    --azm-pink: #d63384;        /* vibrant — CTAs, active states */
    --azm-pink-hover: #b02a6f;  /* darker — hover */
    --azm-pink-soft: #f5b5d2;   /* soft — accents, borders */
    --azm-pink-bg: #fce4ef;     /* very light — backgrounds, icon chips */
}

/* ─── Breadcrumbs ──────────────────────────────────────────────────────────── */

.azm-breadcrumbs {
    padding: 12px 0;
    margin-bottom: 16px;
    font-size: 14px;
    color: #666;
}

.azm-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

.azm-breadcrumbs li {
    display: inline-flex;
    align-items: center;
}

.azm-breadcrumbs a {
    color: var(--azm-pink-soft);
    text-decoration: none;
    transition: color 0.2s;
}

.azm-breadcrumbs a:hover {
    color: #d4899e;
    text-decoration: underline;
}

.azm-breadcrumbs__separator {
    margin: 0 6px;
    color: #ccc;
}

/* ─── "Alle Kurse" Button ────────────────────────────────────────────────── */

.azm-all-courses-btn-wrap {
    padding: 12px 16px;
}

.azm-all-courses-btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--azm-pink);
    color: #fff !important;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s;
}

.azm-all-courses-btn:hover {
    background: var(--azm-pink-hover);
    color: #fff !important;
    text-decoration: none;
}

/* ─── Course Sidebar Layout ───────────────────────────────────────────────── */

.azm-course-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.azm-course-layout__sidebar {
    flex: 0 0 280px;
    min-width: 0;
}

.azm-course-layout__content {
    flex: 1;
    min-width: 0;
}

/* Sidebar widgets */
.azm-sidebar-widget {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.azm-sidebar-widget__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--azm-pink-soft);
    color: #333;
}

/* Responsive: stack sidebar on small screens */
@media (max-width: 768px) {
    .azm-course-layout {
        flex-direction: column;
    }

    .azm-course-layout__sidebar {
        flex: none;
        width: 100%;
        order: -1;
    }
}

/* ─── Course Overview ────────────────────────────────────────────────────────
   Modern, editorial course grid with rich cards, soft pink brand accents,
   and elegant hover interactions.
   ────────────────────────────────────────────────────────────────────────── */

.azm-course-overview {
    --azm-card-radius: 16px;
    --azm-card-gap: 32px;
    --azm-card-shadow: 0 2px 12px rgba(31, 22, 38, .06);
    --azm-card-shadow-hover: 0 20px 40px -16px rgba(214, 51, 132, .25), 0 8px 16px -8px rgba(31, 22, 38, .08);
    --azm-text: #1a1a2e;
    --azm-text-soft: #6b6877;
    --azm-text-muted: #8e8a99;
    --azm-border: #ece9ef;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--azm-text);
}

.azm-courses-empty {
    padding: 40px;
    text-align: center;
    color: var(--azm-text-muted);
    font-style: italic;
    background: #faf8fb;
    border-radius: var(--azm-card-radius);
}

/* Grid layout */
.azm-course-grid {
    display: grid;
    gap: var(--azm-card-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.azm-course-grid--cols-1 { grid-template-columns: minmax(0, 640px); justify-content: center; }
.azm-course-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.azm-course-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.azm-course-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
    .azm-course-overview { --azm-card-gap: 24px; }
    .azm-course-grid--cols-3,
    .azm-course-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .azm-course-overview { --azm-card-gap: 20px; }
    .azm-course-grid--cols-2,
    .azm-course-grid--cols-3,
    .azm-course-grid--cols-4 { grid-template-columns: 1fr; }
}

/* ─── Course Card ──────────────────────────────────────────────────────── */

.azm-card--course {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--azm-border);
    border-radius: var(--azm-card-radius);
    overflow: hidden;
    box-shadow: var(--azm-card-shadow);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .25s ease;
    isolation: isolate;
}

.azm-card--course:hover {
    transform: translateY(-6px);
    box-shadow: var(--azm-card-shadow-hover);
    border-color: var(--azm-pink-soft);
}

.azm-card--enrolled {
    border-color: var(--azm-pink-soft);
    background: linear-gradient(180deg, #fff 0%, #fff8fc 100%);
}

/* Thumbnail */
.azm-card__thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--azm-pink-bg) 0%, var(--azm-pink-soft) 100%);
    text-decoration: none;
}

.azm-card__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.azm-card--course:hover .azm-card__thumb-img {
    transform: scale(1.06);
}

.azm-card__thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--azm-pink-bg) 0%, var(--azm-pink-soft) 100%);
}

.azm-card__thumb-icon {
    font-size: 64px;
    color: rgba(255, 255, 255, .85);
    line-height: 1;
}

/* Subtle gradient overlay for text legibility on badges */
.azm-card__thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(31, 22, 38, .18) 0%, rgba(31, 22, 38, 0) 35%);
    pointer-events: none;
}

/* Badge container */
.azm-card__badges {
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 2;
}

.azm-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .25px;
    line-height: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(31, 22, 38, .12);
}

.azm-card__badge--enrolled {
    background: var(--azm-pink);
    color: #fff;
}

.azm-card__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.azm-card__badge--free {
    background: rgba(255, 255, 255, .92);
    color: #1a7a3c;
}

.azm-card__badge--paid {
    background: rgba(255, 255, 255, .92);
    color: var(--azm-text);
}

/* Body */
.azm-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 24px 24px;
    gap: 12px;
}

.azm-card__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--azm-text);
    letter-spacing: -.01em;
}

.azm-card__title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--azm-pink), var(--azm-pink));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1.5px;
    transition: background-size .35s ease, color .25s ease;
    padding-bottom: 2px;
}

.azm-card__title a:hover {
    color: var(--azm-pink);
    background-size: 100% 1.5px;
}

.azm-card__excerpt {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--azm-text-soft);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta line (lesson count, etc.) */
.azm-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 2px;
}

.azm-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--azm-text-muted);
}

.azm-card__meta-icon {
    color: var(--azm-pink);
    flex-shrink: 0;
}

/* Footer with CTA */
.azm-card__footer {
    margin-top: auto;
    padding-top: 18px;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.azm-btn {
    --azm-btn-bg: var(--azm-pink);
    --azm-btn-color: #fff;
    --azm-btn-border: var(--azm-pink);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid var(--azm-btn-border);
    background: var(--azm-btn-bg);
    color: var(--azm-btn-color) !important;
    line-height: 1.2;
    letter-spacing: .01em;
    appearance: none;
    font-family: inherit;
    transition: transform .15s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
    box-shadow: 0 1px 2px rgba(214, 51, 132, .12);
}

.azm-btn--block {
    display: flex;
    width: 100%;
}

.azm-btn__arrow {
    display: inline-block;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
}

.azm-btn:hover .azm-btn__arrow {
    transform: translateX(4px);
}

/* Primary (filled pink) */
.azm-btn--primary {
    background: linear-gradient(135deg, var(--azm-pink) 0%, #c72a78 100%);
    border-color: var(--azm-pink);
    box-shadow: 0 4px 14px rgba(214, 51, 132, .25);
}

.azm-btn--primary:hover {
    background: linear-gradient(135deg, var(--azm-pink-hover) 0%, #9c2363 100%);
    border-color: var(--azm-pink-hover);
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(214, 51, 132, .35);
    transform: translateY(-1px);
}

.azm-btn--primary:active {
    transform: translateY(0);
}

/* Outline (transparent with pink border) */
.azm-btn--outline {
    background: #fff;
    color: var(--azm-pink) !important;
    border-color: var(--azm-pink-soft);
    box-shadow: none;
}

.azm-btn--outline:hover {
    background: var(--azm-pink);
    color: #fff !important;
    border-color: var(--azm-pink);
    box-shadow: 0 8px 20px rgba(214, 51, 132, .25);
    transform: translateY(-1px);
}

/* Enroll button states (it's also .azm-btn--primary) */
.azm-btn--enroll:disabled {
    opacity: .7;
    cursor: default;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(214, 51, 132, .12) !important;
}

.azm-btn--success,
.azm-btn--primary.azm-btn--success {
    background: linear-gradient(135deg, #1a7a3c 0%, #0f5c2a 100%);
    border-color: #1a7a3c;
    box-shadow: 0 4px 14px rgba(26, 122, 60, .25);
}

/* Focus styling for keyboard navigation */
.azm-btn:focus-visible {
    outline: 3px solid var(--azm-pink-soft);
    outline-offset: 2px;
}

.azm-card__title a:focus-visible {
    outline: 2px solid var(--azm-pink);
    outline-offset: 4px;
    border-radius: 4px;
}

/* ─── Tutor LMS Dashboard — brand pink overrides ──────────────────────────── */
/* Scoped to .tutor-dashboard so course / lesson / enrollment pages are untouched. */

.tutor-dashboard {
    /* Re-map Tutor's primary palette to brand pink for this subtree. */
    --tutor-color-primary: var(--azm-pink);
    --tutor-color-primary-hover: var(--azm-pink-hover);
    --tutor-color-primary-light: var(--azm-pink-bg);
    --tutor-color-brand: var(--azm-pink);
    --tutor-color-brand-hover: var(--azm-pink-hover);
}

/* Avatar circle (initials chip in the dashboard header) */
.tutor-dashboard .tutor-avatar,
.tutor-dashboard .tutor-avatar-circle,
.tutor-dashboard .tutor-dashboard-header .tutor-ratio-1-1 {
    background-color: var(--azm-pink) !important;
    color: #fff !important;
}

.tutor-dashboard .tutor-avatar *,
.tutor-dashboard .tutor-avatar-circle * {
    color: #fff !important;
}

/* "+ New Course" CTA and any primary button inside the dashboard */
.tutor-dashboard a.tutor-create-new-course,
.tutor-dashboard .tutor-create-new-course,
.tutor-dashboard .tutor-btn.tutor-btn-primary,
.tutor-dashboard a.tutor-btn-primary {
    background-color: var(--azm-pink) !important;
    border-color: var(--azm-pink) !important;
    color: #fff !important;
    transition: background-color 0.2s, border-color 0.2s;
}

.tutor-dashboard a.tutor-create-new-course:hover,
.tutor-dashboard .tutor-create-new-course:hover,
.tutor-dashboard .tutor-btn.tutor-btn-primary:hover,
.tutor-dashboard a.tutor-btn-primary:hover {
    background-color: var(--azm-pink-hover) !important;
    border-color: var(--azm-pink-hover) !important;
    color: #fff !important;
}

/* Stat card icon circles (Meine Kurse, Begonnene Kurse, etc.) */
.tutor-dashboard .tutor-icon-card,
.tutor-dashboard .tutor-dashboard-info-card .tutor-icon-card,
.tutor-dashboard .tutor-dashboard-info-card [class*="tutor-icon-"],
.tutor-dashboard .tutor-dashboard-inline-links .tutor-icon-card {
    background-color: var(--azm-pink-bg) !important;
    color: var(--azm-pink) !important;
}

.tutor-dashboard .tutor-dashboard-info-card svg,
.tutor-dashboard .tutor-dashboard-info-card i {
    color: var(--azm-pink) !important;
    fill: currentColor;
}