/* Public lesson page. Uses the landing tokens: buttons come from fc-primary-btn and
   fc-secondary-btn, the preview sits in an fc-card. The like and dislike rules are
   copied from classroom/static/classroom/pages/layout.css so the buttons match the
   lesson rating in the classroom. */

.learn-page {
    box-sizing: border-box;
    display: grid;
    gap: 24px;
    width: min(960px, 100%);
    margin: 0 auto;
    padding: 40px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px));
}

.learn-hero {
    display: grid;
    gap: 8px;
}

.learn-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--fc-color-text);
    text-wrap: balance;
}

.learn-meta {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--fc-color-text-muted);
}

.learn-error {
    margin: 0;
    font-size: 14px;
    color: var(--fc-color-danger-text);
}

/* Preview */

.learn-preview {
    position: relative;
    overflow: hidden;
}

.learn-preview__expand {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--fc-color-border);
    border-radius: 12px;
    background: var(--fc-color-surface);
    color: var(--fc-color-text);
    box-shadow: 0 6px 16px rgba(var(--fc-color-shadow-rgb), 0.12);
    cursor: pointer;
}

.learn-preview__expand i {
    font-size: 1.1rem;
    line-height: 1;
}

/* After the inline preview has been visible for five seconds, point at the
   full-size control with the same pulse the classroom invite button uses. */
.learn-preview__expand--pulse {
    animation-name: learnPreviewExpandPulse;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-delay: 5s;
    animation-iteration-count: 5;
}

@keyframes learnPreviewExpandPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--fc-color-shadow-info-rgb), 0);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(var(--fc-color-shadow-info-rgb), 0.28), 0 0 18px rgba(var(--fc-color-shadow-info-rgb), 0.22);
        transform: translateY(-1px);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(var(--fc-color-shadow-info-rgb), 0);
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .learn-preview__expand--pulse {
        animation: none;
    }
}

.learn-preview__cover {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 420px;
    padding: 32px 24px;
    background: var(--fc-color-surface-soft);
}

.learn-preview__cover[hidden],
.learn-preview__frame[hidden] {
    display: none;
}

.fc-secondary-btn.is-loading,
.fc-secondary-btn:disabled {
    cursor: wait;
    opacity: .8;
}

.fc-secondary-btn.is-loading .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: .15em;
}

.learn-preview__frame {
    display: block;
    width: 100%;
    height: 680px;
    border: 0;
    background: var(--fc-color-surface);
}

.learn-preview.is-expanded {
    position: fixed;
    inset: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--fc-color-surface);
}

.learn-preview.is-expanded .learn-preview__expand {
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
}

.learn-preview.is-expanded .learn-preview__frame,
.learn-preview.is-expanded .learn-preview__cover {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.learn-no-scroll {
    overflow: hidden;
}

/* Actions share one height so the row reads as a set. Desktop: one row, the
   similar-lessons button pushed to the right. Tablet and phone: two full-width
   rows, the first holding "use" plus the rating, the second "similar lessons". */

.learn-actions {
    --learn-action-height: 44px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.learn-actions .fc-primary-btn,
.learn-actions .fc-secondary-btn {
    min-height: var(--learn-action-height);
    padding: 0 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
}

.learn-use {
    margin: 0;
}

.learn-use .fc-secondary-btn,
.learn-add {
    white-space: nowrap;
}

/* "Добавить себе" is the primary action of the shared page: the link exists so
   the recipient can take the lesson, not only look at it. */
.learn-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.learn-add i {
    font-size: 1.05rem;
    line-height: 1;
}

.learn-others {
    width: auto;
    margin-left: auto;
    background: var(--fc-color-surface);
}

.learn-others:hover {
    background: var(--fc-color-surface-soft);
}

.learn-sentiment {
    display: flex;
    gap: 6px;
}

@media (max-width: 991px) {
    .learn-add,
    .learn-use {
        flex: 1 1 auto;
    }

    .learn-add,
    .learn-use .fc-secondary-btn {
        width: 100%;
        justify-content: center;
    }

    .learn-sentiment {
        flex: 0 0 auto;
    }

    .learn-others {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
    }
}

/* Copied from classroom/static/classroom/pages/layout.css (lesson rating). */

.lesson-quality-sentiment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--fc-color-palette-d8e3f4);
    background: var(--fc-color-surface);
    color: var(--fc-color-palette-516486);
    border-radius: 10px;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.lesson-quality-sentiment-btn i {
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}
.lesson-quality-sentiment-btn:hover {
    transform: translateY(-1px);
}
.lesson-quality-sentiment-btn--like:hover,
.lesson-quality-sentiment-btn--like:focus-visible {
    border-color: var(--bs-success);
    outline: none;
}
.lesson-quality-sentiment-btn--like:hover i,
.lesson-quality-sentiment-btn--like:focus-visible i {
    color: var(--bs-success);
    transform: rotate(-10deg) scale(1.2);
}
.lesson-quality-sentiment-btn--dislike:hover,
.lesson-quality-sentiment-btn--dislike:focus-visible {
    border-color: var(--fc-color-danger);
    outline: none;
}
.lesson-quality-sentiment-btn--dislike:hover i,
.lesson-quality-sentiment-btn--dislike:focus-visible i {
    color: var(--fc-color-danger);
    transform: rotate(-10deg) scale(1.2);
}
.lesson-quality-sentiment-btn--like.is-selected {
    border-color: var(--bs-success);
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
}
.lesson-quality-sentiment-btn--dislike.is-selected {
    border-color: var(--fc-color-danger);
    background: var(--fc-color-palette-fdecec);
    color: var(--fc-color-danger);
}

.learn-actions .lesson-quality-sentiment-btn {
    width: var(--learn-action-height);
    height: var(--learn-action-height);
    border-radius: 12px;
}

@media (max-width: 559px) {
    .learn-preview__frame {
        height: 560px;
    }
}

/* Class picker opened from the "use" button. The shared modal is written for
   /home/, which loads the full Bootstrap utilities and base.css; this page does
   not, so the few classes it relies on are spelled out here. */

#learnChooseClassModal [data-choose-class-list] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#learnChooseClassModal [data-choose-class-id] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--fc-color-border);
    border-radius: 12px;
    background: var(--fc-color-surface);
    color: var(--fc-color-text);
    text-align: left;
    font: inherit;
}

#learnChooseClassModal [data-choose-class-id]:hover,
#learnChooseClassModal [data-choose-class-id]:focus-visible {
    border-color: var(--fc-color-primary);
    outline: none;
}

#learnChooseClassModal .fc-class-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#learnChooseClassModal [data-choose-class-id] .flex-grow-1 {
    flex: 1 1 auto;
    min-width: 0;
}

#learnChooseClassModal .fw-semibold {
    font-weight: 600;
}

#learnChooseClassModal .small {
    font-size: 0.85rem;
}

#learnChooseClassModal .text-muted {
    color: var(--fc-color-text-muted);
}

#learnChooseClassModal [data-choose-class-id] .bi-chevron-right {
    flex-shrink: 0;
    color: var(--fc-color-text-muted);
}

#learnChooseClassModal .fc-create-class-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    padding: 0.7rem 1rem;
    border: 1px solid var(--fc-color-primary);
    border-radius: 12px;
    background: var(--fc-color-primary);
    color: var(--fc-color-on-primary);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    box-shadow: 0 7px 16px rgba(var(--fc-color-shadow-brand-rgb), 0.16);
}

#learnChooseClassModal .fc-create-class-button:hover,
#learnChooseClassModal .fc-create-class-button:focus-visible {
    border-color: var(--fc-color-primary-hover);
    background: var(--fc-color-primary-hover);
    color: var(--fc-color-on-primary);
}

#learnChooseClassModal .fc-create-class-button i {
    font-size: 1.15rem;
    line-height: 1;
}

/* Subscribe card: one calm row under the actions; it stacks on a phone. */

.learn-community {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
}

.learn-community[hidden] {
    display: none;
}

.learn-community__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--fc-color-surface-soft);
}

.learn-community__body {
    flex: 1 1 auto;
    min-width: 0;
}

.learn-community__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--fc-color-text);
}

.learn-community__text {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--fc-color-text-muted);
}

.learn-community__text a {
    color: var(--fc-color-text-muted);
    text-underline-offset: 0.16em;
}

.learn-community__text a:hover,
.learn-community__text a:focus-visible {
    color: var(--fc-color-primary-hover);
}

.learn-community__cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    /* The shared .fc-secondary-btn fills the row below 768px; inside this
       compact card a full-width button squeezes the text to one letter per
       line and pushes the close button out of the card, so keep it sized to
       its label. The phone layout below makes it full width on purpose. */
    width: auto;
    min-height: 44px;
    padding: 0 1rem;
    text-decoration: none;
}

.learn-community__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fc-color-text-muted);
    cursor: pointer;
}

.learn-community__close:hover,
.learn-community__close:focus-visible {
    background: var(--fc-color-surface-soft);
    color: var(--fc-color-text);
}

@media (max-width: 575.98px) {
    .learn-community {
        flex-wrap: wrap;
        padding: 16px;
    }

    .learn-community__body {
        flex-basis: calc(100% - 120px);
    }

    .learn-community__cta {
        flex: 1 1 100%;
    }

    .learn-community__close {
        position: absolute;
        top: 8px;
        right: 8px;
    }

    .learn-community {
        position: relative;
    }
}