/*
 * Data Recovery - scenariusze awarii i ikony SVG strony HDD
 *
 * Wyniesione z bloku Gutenberga strony hard-drive-data-recovery dnia 14.08.2026.
 * Tresc bajtowo taka sama jak inline, ktory zastepuje - jedyne zmiany
 * opisane sa w naglowku pliku. Kolejnosc ladowania pilnuje
 * includes/core/dr-cluster-assets.php.
 */

    /* =============================================
       v4 alignment — Data Recovery cluster, 13.08.2026
       "From Any Failure Type" is reference content: four failure classes
       ordered by severity, each with a definition and five concrete
       symptoms the reader scans to find their own case. So the job here is
       scannability, not drama. The diagonal cascade (60px row offset +
       slide-in keyframes) fought both: it broke column alignment and added
       a second keyframe system. Replaced by an ordered, aligned grid with
       an 01-04 index that carries the escalation reading.
    ============================================= */
    #ff-dr .fixfactor-scenario-row:nth-child(2) { margin-left: 0; }
    #ff-dr .fixfactor-scenario-row { animation: none; }
    #ff-dr .fixfactor-scenarios-cards { counter-reset: ff-scenario; }
    #ff-dr .fixfactor-scenario-card { counter-increment: ff-scenario; }
    #ff-dr .fixfactor-scenario-card h3 {
        display: flex;
        align-items: baseline;
        gap: 0.75rem;
    }
    #ff-dr .fixfactor-scenario-card h3::before {
        content: counter(ff-scenario, decimal-leading-zero);
        flex: 0 0 auto;
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: var(--action, #007a92);
        font-variant-numeric: tabular-nums;
    }
    #ff-dr .fixfactor-scenario-list li { color: var(--content-body, #1a1a1a); }
    @media (max-width: 768px) {
        #ff-dr .fixfactor-scenario-row { flex-direction: column; }
    }

    /* =============================================
       ff-diag-map: Common HDD Failure Scenarios, 14.08.2026
       Four failures, four different places inside the drive. Every card
       draws the same drive and inks only the failing part, so the cards
       are told apart by picture before a word is read — and the customer
       learns where their fault sits. The symptom list becomes chips in
       the customer's own words; the explanation is one line, not a
       paragraph. Subject-derived motif, per the signature doctrine.
    ============================================= */
    #ff-dr .fixfactor-scenarios-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        max-width: 1100px;
        margin: var(--space-7) auto 0;
    }
    #ff-dr .fixfactor-scenario-row { display: contents; }
    #ff-dr .fixfactor-scenario-card {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        column-gap: 1.6rem;
        align-items: start;
        background: var(--surface);
        border: 1px solid var(--border-interactive);
        border-radius: 12px;
        padding: 1.75rem 1.85rem;
        min-height: 0;
        box-shadow: none;
        transform: none;
        transition: border-color 0.25s ease;
    }
    /* Hover does one job: the diagram asserts itself. The failing part
       thickens, the intact anatomy recedes — so pointing at a card
       answers "where is my fault" harder. The card's own border comes up
       in dr-cluster.css; nothing lifts, tilts or grows. */
    #ff-dr .fixfactor-scenario-card .ffd-svg .ffd-off,
    #ff-dr .fixfactor-scenario-card .ffd-svg .ffd-on { transition: stroke-width .25s ease, opacity .25s ease; }
    #ff-dr .fixfactor-scenario-card:hover .ffd-svg .ffd-off { opacity: .45; }
    #ff-dr .fixfactor-scenario-card:hover .ffd-svg .ffd-on { stroke-width: 3.4; }

    #ff-dr .fixfactor-scenario-card > .fixfactor-scenario-icon {
        position: static;
        bottom: auto;
        right: auto;
        height: auto;
        transform: none;
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        order: 0;
        display: block;
        width: 96px;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
        color: inherit;
        font-size: 0;
    }
    #ff-dr .ffd-svg { width: 96px; height: 96px; display: block; }
    #ff-dr .ffd-svg .ffd-off { stroke: var(--border-neutral); stroke-width: 1.4; }
    #ff-dr .ffd-svg .ffd-on  { stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; }
    #ff-dr .ffd-svg .ffd-tick { stroke-width: 2; }
    #ff-dr .ffd-part {
        display: block;
        margin-top: 0.75rem;
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        line-height: 1.35;
        color: var(--action);
    }

    #ff-dr .fixfactor-scenario-card > .fixfactor-scenario-content {
        grid-column: 2;
        grid-row: 1;
        order: 1;
        display: block;
        grid-template-columns: none;
        transform: none;
        min-width: 0;
    }
    #ff-dr .fixfactor-scenario-title {
        margin: 0 0 0.4rem;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1.3;
        letter-spacing: normal;
        text-transform: none;
        color: var(--content);
    }
    #ff-dr .fixfactor-scenario-text {
        margin: 0 0 1.15rem;
        font-size: 0.9375rem;
        line-height: 1.55;
        color: var(--content-body);
    }
    #ff-dr .fixfactor-scenario-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    #ff-dr .fixfactor-scenario-list li {
        margin: 0;
        padding: 0.4rem 0.75rem;
        font-size: 0.8125rem;
        line-height: 1.3;
        color: var(--content-body);
        background: var(--teal-tint-faint, #f2fafb);
        border: 1px solid var(--border-subtle);
        border-radius: 6px;
    }
    #ff-dr .fixfactor-scenario-list li::before { content: none; }

    @media (max-width: 900px) {
        #ff-dr .fixfactor-scenarios-cards { grid-template-columns: 1fr; }
    }
    @media (max-width: 460px) {
        #ff-dr .fixfactor-scenario-card { grid-template-columns: 1fr; row-gap: 1rem; }
        #ff-dr .fixfactor-scenario-icon { width: 76px; }
        #ff-dr .ffd-svg { width: 76px; height: 76px; }
    }

    /* Symptoms are a list to read, not chips to click. Every other page in the
       cluster renders them as an em-dash list; this page turned them into
       bordered pills during the diagram pass, which both invited a click that
       does nothing and cost about a third of the card's height in padding. */
    #ff-dr .fixfactor-scenario-list {
        display: block;
        margin: 0.9rem 0 0;
        padding: 0;
    }
    #ff-dr .fixfactor-scenario-list li {
        display: list-item;
        position: relative;
        margin: 0;
        padding: 0.3rem 0 0.3rem 1.45rem;
        background: none;
        border: 0;
        border-radius: 0;
        color: var(--content-body);
        font-size: 0.875rem;
        line-height: 1.5;
    }
    #ff-dr .fixfactor-scenario-list li::before {
        content: "\2014";
        position: absolute;
        left: 0;
        color: var(--action);
        font-weight: 700;
    }

    /* 10px was below the 11px floor the type scale sets for micro labels. */
    #ff-dr .ffd-part {
        font-size: 0.6875rem;
        margin-top: 0.65rem;
        /* The column is 96px wide, so a three-word part name wraps. Balanced
           wrapping keeps the last line from being a single orphan word. */
        text-wrap: balance;
    }

    /* --accent is 2.78:1 on white, under the 3:1 WCAG 1.4.11 asks of a
       graphic that carries meaning. --accent-art is 5.6:1 and the same hue. */
    #ff-dr .ffd-svg .ffd-on {
        stroke: var(--accent-art);
    }

    #ff-dr .fixfactor-scenario-card {
        padding: 1.75rem;
    }