/**
 * Rehab media overrides — loaded last.
 * Rem/px caps only (no svh in the same declaration) so older iPad Safari
 * never drops max-height when an unsupported unit invalidates the whole rule.
 *
 * Rules:
 * - Stimulus (single cue) image: left-aligned, capped size
 * - Multiple option pictures: sit in a row/grid (first left, next to its right)
 * - Action buttons: wrap in a row (first left, others to the right)
 * - Home module thumbs: fixed small box — never inherit stimulus sizes
 */

/* —— Home stage/module thumbs (must win over stimulus rules) —— */
.fb-rehab .fb-practice-media--thumb,
.fb-rehab .fb-module-list__icon.fb-practice-media,
.fb-rehab .fb-module-list__icon {
    width: 2.75rem !important;
    height: 2.75rem !important;
    max-width: 2.75rem !important;
    max-height: 2.75rem !important;
    flex: 0 0 2.75rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.fb-rehab .fb-achieve-list__thumb.fb-practice-media,
.fb-rehab .fb-achieve-list__thumb {
    width: 2rem !important;
    height: 2rem !important;
    max-width: 2rem !important;
    max-height: 2rem !important;
    flex: 0 0 2rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.fb-rehab .fb-practice-media--thumb .fb-practice-media__img,
.fb-rehab .fb-practice-media--thumb .fb-rehab-media__img,
.fb-rehab .fb-module-list__icon img,
.fb-rehab .fb-module-list__icon .fb-rehab-media__img,
.fb-rehab .fb-achieve-list__thumb img,
.fb-rehab .fb-achieve-list__thumb .fb-rehab-media__img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* —— Practice stimulus only (single cue) —— */
.vds-page--practice .fb-practice-media--stimulus,
.vds-page--practice .fb-practice__image {
    justify-content: flex-start !important;
    text-align: left !important;
}

.vds-page--practice .fb-practice-media--stimulus .fb-practice-media__img,
.vds-page--practice .fb-practice__image img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 12rem) !important;
    max-height: 7rem !important;
    margin-inline: 0 !important;
    margin-right: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* Option pictures: fixed practical columns — do not stretch across ultra-wide rails */
.vds-page--practice .fb-practice__options--pictures {
    display: grid !important;
    width: 100% !important;
    max-width: var(--practice-options-max, 28rem) !important;
    grid-template-columns: repeat(2, minmax(0, var(--practice-option-col-max, 13rem))) !important;
    gap: var(--space-2) !important;
    justify-content: start !important;
    justify-items: stretch !important;
}

.vds-page--practice .fb-practice__options--choice,
.vds-page--practice .fb-practice__options--two-col {
    display: grid !important;
    width: 100% !important;
    max-width: var(--fb-practice-choice-max-w, var(--practice-options-max, 28rem)) !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-2) !important;
    justify-content: start !important;
    justify-items: stretch !important;
}

.vds-page--practice .fb-practice__options--single {
    display: grid !important;
    width: 100% !important;
    max-width: var(--fb-practice-choice-max-w, var(--practice-options-max, 28rem)) !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
    justify-content: start !important;
    justify-items: stretch !important;
}

.vds-page--practice .fb-practice-media--option,
.vds-page--practice .fb-practice-media--option .fb-practice-media__img,
.vds-page--practice .fb-practice__option-btn img {
    margin-inline: auto !important;
    object-position: center !important;
}

.vds-page--practice .fb-practice-media--option .fb-practice-media__img,
.vds-page--practice .fb-practice__option-btn img {
    max-width: 100% !important;
    max-height: 5rem !important;
}

.vds-page--practice .fb-practice__option-btn {
    align-items: center !important;
    text-align: center !important;
}

/* Action / nav buttons: row wrap — first left, next to the right */
.vds-page--practice .fb-practice__actions,
.vds-page--practice .fb-practice__utility,
.vds-page--practice .fb-practice__nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--space-2) !important;
}

.vds-page--practice .fb-practice__actions .vds-btn,
.vds-page--practice .fb-practice__utility .vds-btn,
.vds-page--practice .fb-practice__nav .vds-btn,
.vds-page--practice .fb-practice__actions form,
.vds-page--practice .fb-practice__utility form,
.vds-page--practice .fb-practice__nav form {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100%;
}

/* Phones */
@media (max-width: 767.98px) {
    .vds-page--practice .fb-practice-media--stimulus .fb-practice-media__img,
    .vds-page--practice .fb-practice__image img {
        max-width: min(100%, 11rem) !important;
        max-height: 6rem !important;
    }

    .vds-page--practice .fb-practice-media--option .fb-practice-media__img,
    .vds-page--practice .fb-practice__option-btn img {
        max-height: 4.5rem !important;
    }
}

@media (max-width: 359.98px) {
    .vds-page--practice .fb-practice:not(.fb-practice--yesno) .fb-practice__options--choice {
        grid-template-columns: 1fr !important;
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .vds-page--practice .fb-practice-media--stimulus .fb-practice-media__img,
    .vds-page--practice .fb-practice__image img {
        max-width: min(100%, 10.5rem) !important;
        max-height: 6.25rem !important;
    }

    .vds-page--practice .fb-practice-media--option .fb-practice-media__img,
    .vds-page--practice .fb-practice__option-btn img {
        max-height: 4.75rem !important;
    }

    .vds-page--practice .fb-practice__option-btn {
        min-height: 3rem !important;
        font-size: 1.05rem !important;
        padding: 0.55rem 0.75rem !important;
    }
}

/* Short landscape */
@media (max-height: 640px) and (orientation: landscape) {
    .vds-page--practice .fb-practice-media--stimulus .fb-practice-media__img,
    .vds-page--practice .fb-practice__image img {
        max-height: 5rem !important;
        max-width: min(100%, 9rem) !important;
    }

    .vds-page--practice .fb-practice-media--option .fb-practice-media__img,
    .vds-page--practice .fb-practice__option-btn img {
        max-height: 3.75rem !important;
    }
}

/* Answer / action button polish */
.vds-page--practice .fb-practice__option-btn {
    min-height: 3.15rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.85rem;
    border: 2px solid var(--primary);
    background: var(--surface);
    color: var(--primary);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.vds-page--practice .fb-practice__option-btn:hover,
.vds-page--practice .fb-practice__option-btn:focus-visible {
    background: var(--primary-soft, #f3eefc);
}

.vds-page--practice .fb-practice__actions .vds-btn,
.vds-page--practice .fb-practice__nav .vds-btn {
    min-height: 2.75rem;
    border-radius: 0.65rem;
    font-weight: 600;
}

.vds-page--practice .fb-practice__actions .vds-btn--lg {
    min-height: 3rem;
    padding: 0.55rem 1.1rem;
    font-size: 1.05rem;
}

.vds-page--practice .fb-practice__text-input {
    min-height: 3rem;
    font-size: 1.15rem;
    border-radius: 0.65rem;
}

.vds-page--practice .fb-practice__check {
    min-height: 3rem;
    min-width: 6.5rem;
}

/* Sentence → picture Yes/No: sentence first, then hear, picture, question */
.vds-page--practice .fb-practice--sentence-yesno .fb-practice__sentence {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text, #1e293b);
}

.vds-page--practice .fb-practice--sentence-yesno .fb-practice__task--after-stimulus,
.vds-page--practice .fb-practice--sentence-yesno .fb-practice__prompt--after-picture {
    margin: 0.75rem 0 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
}