/*
 * TIHONEAC.COM 1.1.0 Stable
 * Recovery R145 — Repertoriu individual cards: mobile visual polish
 * Scope: only individual composer/work pages marked by repertoire-entity-visual-r145.js.
 * No global typography, data, route, admin or database changes.
 */

html[data-r145-repertoire-entity] .r136-entity-hero-content {
    box-sizing: border-box !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

html[data-r145-repertoire-entity] .r145-entity-actions {
    min-width: 0;
}

html[data-r145-repertoire-entity] .r145-entity-actions > * {
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 760px) {
    /*
     * R136 deliberately drew the card behind the existing content without
     * changing the content flow. On narrow screens this left nested cards,
     * breadcrumbs and actions visually flush with the R136 card border.
     * R145 adds only an inner safe area to the existing R136 content wrapper.
     */
    html[data-r145-repertoire-entity] .r136-entity-hero-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    html[data-r145-repertoire-entity] .r145-entity-breadcrumb {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    html[data-r145-repertoire-entity] .r145-entity-breadcrumb,
    html[data-r145-repertoire-entity] .r145-entity-breadcrumb > * {
        box-sizing: border-box;
    }

    html[data-r145-repertoire-entity] .r145-entity-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }

    html[data-r145-repertoire-entity] .r145-entity-actions > * {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html[data-r145-repertoire-entity] .r145-entity-actions .r145-action-pdf-cell {
        grid-column: 1 / -1 !important;
    }

    /*
     * Preserve all R136 surface tokens. R145 changes only the radius at the
     * already documented mobile breakpoint and does not alter width/position.
     */
    html[data-r145-repertoire-entity] .r136-entity-hero-card-backdrop {
        border-radius: 12px;
    }
}

@media (max-width: 520px) {
    html[data-r145-repertoire-entity] .r136-entity-hero-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    html[data-r145-repertoire-entity] .r136-entity-hero-card-backdrop {
        border-radius: 10px;
    }
}

@media (max-width: 360px) {
    html[data-r145-repertoire-entity] .r145-entity-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html[data-r145-repertoire-entity] .r145-entity-actions .r145-action-pdf-cell {
        grid-column: auto !important;
    }
}