/* ==========================================================================
   My Learning — Page header
   ========================================================================== */

.learning-header-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
}

.learning-header-subtext {
    font-family: var(--font-family);
    color: var(--color-text-secondary);
}

/* ==========================================================================
   My Learning — Search bar
   ========================================================================== */

.learning-search-bar {
    margin-bottom: 1.75rem;
}

.learning-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

.learning-search-input-wrap {
    position: relative;
    flex: 1 1 260px;
    display: flex;
    align-items: center;
}

    .learning-search-input-wrap i {
        position: absolute;
        left: 0.9rem;
        color: var(--color-text-secondary);
        font-size: 0.95rem;
        pointer-events: none;
    }

.learning-search-input {
    width: 100%;
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .learning-search-input:focus {
        outline: none;
        /* Same teal focus ring as the Workbooks/Worksheets listing search
           bars (.workbook-listing/.worksheet-listing .form-control:focus)
           — orange is reserved for CTA buttons, not focus glow. */
        border-color: var(--color-primary);
        box-shadow: 0 0 0 0.2rem rgba(30, 67, 86, 0.12);
    }

.btn-learning-search {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.9rem;
    color: #FFFFFF;
    background-color: var(--color-accent-highlight);
    border: 1px solid var(--color-accent-highlight);
    border-radius: 999px;
    padding: 0.65rem 1.75rem;
    white-space: nowrap;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .btn-learning-search:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: #FFFFFF;
        box-shadow: 0 8px 18px rgba(30, 67, 86, 0.18);
        transform: translateY(-1px);
    }

@media (max-width: 575.98px) {
    .learning-search-form {
        flex-direction: column;
    }

    .btn-learning-search {
        width: 100%;
    }
}

/* ==========================================================================
   My Learning — No results / empty state
   ========================================================================== */

.learning-no-results {
    font-family: var(--font-family);
    color: var(--color-text-secondary);
    background-color: #FAFAFA;
    border: 1px dashed var(--color-border);
    border-radius: 1rem;
    padding: 1.5rem;
}

.learning-empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.learning-empty-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.learning-empty-text {
    font-family: var(--font-family);
    color: var(--color-text-secondary);
    margin-bottom: 1.25rem;
}

.btn-learning-cta {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.95rem;
    color: #FFFFFF;
    background-color: var(--color-accent-highlight);
    border: 1px solid var(--color-accent-highlight);
    text-decoration: none;
    border-radius: 999px;
    padding: 0.75rem 1.75rem;
    display: inline-block;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

    .btn-learning-cta:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: #FFFFFF;
        box-shadow: 0 8px 18px rgba(30, 67, 86, 0.18);
        transform: translateY(-1px);
    }

/* ==========================================================================
   My Learning — Resource cards
   ========================================================================== */

.learning-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(30, 67, 86, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .learning-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 26px rgba(30, 67, 86, 0.12);
    }

/* Colour-code by product type to match the listing pages: light purple
   tint for Workbooks (.product-card in workbooks.css), light sage tint
   for Worksheets (.worksheet-card in worksheets.css) — same tokens, same
   hover border accent, so a My Learning item reads as the same "kind" of
   resource as its listing-page card. */
.learning-card.is-workbook {
    background-color: var(--color-secondary-tint);
}

    .learning-card.is-workbook:hover {
        border-color: var(--color-secondary);
    }

.learning-card.is-worksheet {
    background-color: var(--color-sage-tint);
}

    .learning-card.is-worksheet:hover {
        border-color: var(--color-sage-dark);
    }

/* Companion Pack — deliberately a third, distinct identity (accent/orange
   tint) so a redeemed Companion Pack never visually reads as an owned
   Workbook (purple) or Worksheet (sage) card. */
.learning-card.is-companion {
    background-color: rgba(240, 177, 118, 0.18);
}

    .learning-card.is-companion:hover {
        border-color: var(--color-accent-highlight);
    }

.learning-card-badges {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
}

.badge-learning-workbook,
.badge-learning-worksheet,
.badge-learning-companion {
    border-radius: 999px;
    padding: 6px 10px;
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-weight: 700;
}

.badge-learning-workbook {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

.badge-learning-worksheet {
    /* Sage, not orange — orange is reserved for CTA/action buttons.
       Mirrors the worksheet card's own sage identity colour. */
    background-color: var(--color-sage-dark);
    color: #FFFFFF;
}

.badge-learning-companion {
    background-color: var(--color-accent-highlight);
    color: #FFFFFF;
}

.learning-card-preview {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

    .learning-card-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 8px;
        display: block;
    }

.learning-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-family);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.learning-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 14px 14px 6px;
    flex-grow: 1;
}

.learning-card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--color-primary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.learning-card-meta {
    font-family: var(--font-family);
    font-size: 0.86rem;
    color: var(--color-text-secondary);
    min-height: 1.25rem;
}

.learning-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 12px 14px 14px;
    margin-top: auto;
    /* Footer separator, matching .product-card-footer / .card-actions
       on the Workbooks/Worksheets listing cards. */
    border-top: 1px solid var(--color-border);
}

    .learning-card-actions .btn {
        border-radius: 999px;
        font-weight: 600;
        font-size: 0.88rem;
      /*  padding: 8px 12px;*/
        transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }

        .learning-card-actions .btn:hover {
            transform: translateY(-1px);
        }

.btn-learning-primary {
    background-color: var(--color-accent-highlight);
    color: #FFFFFF;
    border: 1px solid var(--color-accent-highlight);
}

    .btn-learning-primary:hover {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        color: #FFFFFF;
    }

.btn-learning-outline {
    /* Teal outline secondary action — matches .btn-preview (worksheets.css)
       and .product-card .btn-outline-primary (workbooks.css). */
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

    .btn-learning-outline:hover {
        background-color: var(--color-primary);
        color: #FFFFFF;
        border-color: var(--color-primary);
    }

.btn-learning-disabled {
    background-color: #FFFFFF;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}