/* Ported from the prototype's layout/comparison.css (the .matrix/.matrix-panel grid rules
   only) and components/matrix-cards.css (the card rules), combined into one file matching
   this block's own name. The prototype's .comparison { padding: 96px 0; background: green }
   is exactly tt360/section's own default background/padding, so this block is meant to sit
   inside a tt360/section instead of carrying that background/padding itself — same pattern
   as tt360/testimonial, tt360/video-player, and tt360/lifecycle-stages. Every selector below
   also drops the prototype's own ".comparison" ancestor prefix for the same reason: this
   block's own top-level class is ".matrix", not ".comparison .matrix". */

/* On large screens the two panels are display: contents, so their cells share one grid. */
.matrix {
    display: grid;
    grid-template-columns: 120px 240px 240px;
    grid-template-rows: 28px 1fr 1fr;
    gap: 20px;
    max-width: 720px;
    margin: 76px auto 0;
    padding: 40px;
    background-color: rgba(var(--cream), 0.12);
    border-radius: 10px;
}

/* Editor-only, scoped under .editor-styles-wrapper so this can never reach the front end —
   see the full comment on .wp-block-tt360-section in components/section.css. tt360/comparison-
   matrix is nested inside tt360/section's own InnerBlocks, same situation as
   tt360/lifecycle-stages and tt360/card-grid (only GeneratePress's own
   `body .wp-block { max-width: var(--content-width) }` rule reaches it), but like
   tt360/testimonial this one needs restating the real 720px value, not "none": .matrix
   IS this block's own top-level wrapper class (get_block_wrapper_attributes() puts
   wp-block-tt360-comparison-matrix on the same element), and a single-class selector
   (.matrix) loses the cascade tie against GP's rule the same way .testimonial did.
   Placed here, before the @media block below, on purpose: its own editor-only override
   inside that block has the exact same (0,3,0) specificity as this one, so when both are
   active at once (a narrow emulated editor width), the cascade falls back to source order,
   not specificity — this one has to come FIRST so the narrower one, later in the file,
   wins. Confirmed live: with this rule placed after the @media block instead, the
   breakpoint override never actually took effect, since the unconditional rule's later
   source position kept winning regardless of which media query matched. */
.editor-styles-wrapper .block-editor-block-list__layout .wp-block-tt360-comparison-matrix {
    max-width: 720px;
}

.matrix .matrix-panel {
    display: contents;
}

.matrix .matrix-heading,
.matrix .matrix-label {
    display: flex;
    align-items: center;
    margin: 0;
    font-family: var(--font-eyebrow);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(var(--cream), 1);
    border: 1px solid transparent;
}

.matrix .matrix-heading {
    grid-row: 1;
    justify-content: center;
}

.matrix .matrix-label {
    grid-column: 1;
}

.matrix .matrix-row-modern {
    grid-row: 2;
}

.matrix .matrix-row-legacy {
    grid-row: 3;
}

.matrix .matrix-panel-type-generic .matrix-heading,
.matrix .matrix-panel-type-generic .matrix-card {
    grid-column: 2;
}

.matrix .matrix-panel-type-purpose .matrix-heading,
.matrix .matrix-panel-type-purpose .matrix-card {
    grid-column: 3;
}

/* The row labels only show once on large screens. */
.matrix .matrix-panel-type-purpose .matrix-label {
    display: none;
}

/* md */
@media (max-width: 767.98px) {
    .matrix {
        display: block;
        max-width: none;
        padding: 0;
        background: none;
        border-radius: 0;
    }

    /* Editor-only: the real rule above drops .matrix to max-width: none at this width, but a
       plain media-query-scoped `.matrix { max-width: none }` (0,1,0 specificity) still loses
       the cascade tie against GeneratePress's unconditional `body .wp-block {...}` rule
       (0,1,1) the same way the unconditional desktop case does. Needed here specifically
       because this block, unlike tt360/testimonial, actually changes its real max-width at a
       breakpoint. This rule and the unconditional one above it share the exact same (0,3,0)
       specificity, so source order decides which wins when both are active (a narrow
       emulated editor width) — this one has to come LATER in the file than the unconditional
       rule, or it never actually takes effect; see that rule's own comment. */
    .editor-styles-wrapper .block-editor-block-list__layout .wp-block-tt360-comparison-matrix {
        max-width: none;
    }

    .matrix .matrix-panel {
        display: grid;
        grid-template-columns: 84.4px minmax(0, 1fr);
        grid-template-rows: 28px auto auto;
        gap: 20px;
        max-width: 720px;
        padding: 40px;
        background-color: rgba(var(--cream), 0.12);
        border-radius: 10px;
    }

    .matrix .matrix-panel + .matrix-panel {
        margin-top: 42px;
    }

    .matrix .matrix-panel-type-generic .matrix-heading,
    .matrix .matrix-panel-type-generic .matrix-card,
    .matrix .matrix-panel-type-purpose .matrix-heading,
    .matrix .matrix-panel-type-purpose .matrix-card {
        grid-column: 2;
    }

    .matrix .matrix-panel-type-purpose .matrix-label {
        display: flex;
    }
}

.matrix-card {
    padding: 30px 20px;
    border: 1px dashed rgba(var(--white), 0.3);
    border-radius: 6px;
    transition: filter 0.2s ease;
}

.matrix-card:hover {
    filter: brightness(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .matrix-card {
        transition: none;
    }
}

.matrix-card .title {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(var(--cream), 1);
}

.matrix-card .description {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(var(--cream), 0.85);
}

.matrix-card.matrix-card-type-featured {
    background-color: rgba(var(--gold), 1);
    border-style: solid;
    border-color: rgba(var(--warm-gray), 1);
}

.matrix-card.matrix-card-type-featured .title {
    font-size: 17px;
    font-weight: 500;
    color: rgba(var(--white), 1);
}

.matrix-card.matrix-card-type-featured .description {
    color: rgba(var(--white), 1);
}