/* Strategy Comparison SSR strip — Phase 2 AEO/SEO block + Phase 2.1 switcher.
 *
 * Visual contract:
 *   - 3 equal columns (Flip / Rental / BRRRR), thin dividers between them.
 *   - Exactly 3 visible lines per column: name, headline metric (large),
 *     rank chip.
 *   - Hard caps: max-height 120px desktop, 200px mobile (single column stack).
 *   - Winning column gets a subtle left-border accent + a "Best" badge.
 *   - Always rendered server-side; no JS required to display.
 *
 * Phase 2.1 — strip is also the strategy switcher:
 *   - Each column is role="tab"; the strip is role="tablist".
 *   - data-active="true" on the active column applies the highlight.
 *   - The active state uses border + inset accent + bold (NOT font-size)
 *     so column widths NEVER reflow when the user switches strategies.
 *   - "Best" (corner badge + green left-stripe) and "Active" (accent border
 *     + inset shadow) are independent visual signals; they can coexist.
 *
 * The hidden #strategyComparisonData div is hidden via the HTML `hidden`
 * attribute (handled by the browser); no extra CSS needed.
 */

#strategyComparison {
    margin: 12px 0 16px;
}

.strategy-comparison-strip {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    max-height: 120px;
}

.strategy-comparison-col {
    flex: 1 1 0;
    min-width: 0;
    padding: 12px 14px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    border-right: 1px solid #e2e8f0;
    text-align: left;
    /* Strip is also the switcher (Phase 2.1) — every column is a tab. */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.strategy-comparison-col:last-child {
    border-right: none;
}

.strategy-comparison-col:hover {
    background-color: #f8fafc;
}

.strategy-comparison-col:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    z-index: 1; /* let the focus ring sit above neighbouring borders */
}

/* Tap feedback (touch + mouse). Reserved for :active, NOT :hover, so
 * mobile doesn't get a "stuck" pressed look after a tap. */
.strategy-comparison-col:active {
    transform: scale(.985);
}

.strategy-comparison-col[data-best="true"] {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0) 100%);
    box-shadow: inset 3px 0 0 0 #10b981;
}

/* "You are analyzing this" highlight. Uses border + inset shadow + a
 * bolder headline value — NEVER font-size — so the active column is the
 * exact same width as the others (no layout shift on switch). */
.strategy-comparison-col[data-active="true"] {
    background-color: #eff6ff;
    box-shadow: inset 0 0 0 2px #2563eb;
}

.strategy-comparison-col[data-active="true"] .strategy-comparison-headline-value {
    color: #1d4ed8;
}

.strategy-comparison-col[data-active="true"] .strategy-comparison-name {
    color: #1d4ed8;
}

/* When a column is BOTH best AND active, layer the two cues without
 * letting either get drowned. The green left-stripe survives because
 * it's a separate inset edge from the blue active ring. */
.strategy-comparison-col[data-best="true"][data-active="true"] {
    box-shadow: inset 3px 0 0 0 #10b981, inset 0 0 0 2px #2563eb;
}

.strategy-comparison-name {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strategy-comparison-name i {
    margin-right: 4px;
    color: #64748b;
}

.strategy-comparison-headline {
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strategy-comparison-headline-value {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin-right: 4px;
}

.strategy-comparison-headline-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.strategy-comparison-empty {
    color: #cbd5e1;
    font-weight: 400;
}

.strategy-comparison-rank {
    font-size: 11px;
    color: #475569;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 999px;
    align-self: flex-start;
    line-height: 1.4;
    white-space: nowrap;
}

.strategy-comparison-rank.rank-r1 { background: #dcfce7; color: #166534; }
.strategy-comparison-rank.rank-r2 { background: #d1fae5; color: #065f46; }
.strategy-comparison-rank.rank-r3 { background: #fef3c7; color: #92400e; }
.strategy-comparison-rank.rank-r4 { background: #fed7aa; color: #9a3412; }
.strategy-comparison-rank.rank-r5 { background: #fee2e2; color: #991b1b; }
.strategy-comparison-rank.rank-none { background: #f1f5f9; color: #94a3b8; }

.strategy-comparison-best-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    background: #10b981;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
}

@media (max-width: 640px) {
    .strategy-comparison-strip {
        flex-direction: column;
        max-height: 200px;
    }
    .strategy-comparison-col {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        /* Touch target ≥44px (Apple HIG / WCAG 2.5.5). Three rows × 56px
         * fits comfortably under the 200px height cap. */
        min-height: 56px;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    .strategy-comparison-col:last-child {
        border-bottom: none;
    }
    .strategy-comparison-col[data-best="true"] {
        /* Switch left-stripe to bottom-stripe in the stacked layout. */
        box-shadow: inset 0 -3px 0 0 #10b981;
    }
    /* Active row: keep accent ring crisp without disturbing layout. */
    .strategy-comparison-col[data-active="true"] {
        box-shadow: inset 0 0 0 2px #2563eb;
    }
    .strategy-comparison-col[data-best="true"][data-active="true"] {
        box-shadow: inset 0 -3px 0 0 #10b981, inset 0 0 0 2px #2563eb;
    }
    /* No hover transform on touch; reserve transform for tap feedback. */
    .strategy-comparison-col:hover {
        background-color: transparent;
    }
    .strategy-comparison-col:active {
        transform: none;
        background-color: #f1f5f9;
    }
    .strategy-comparison-name {
        flex: 0 0 28%;
        white-space: nowrap;
        /* clamp scales the label between 360px and 640px viewports. */
        font-size: clamp(11px, 3.2vw, 13px);
    }
    .strategy-comparison-headline {
        flex: 1 1 auto;
        min-width: 0;
    }
    .strategy-comparison-headline-value {
        font-size: clamp(15px, 4.6vw, 18px);
    }
    .strategy-comparison-headline-label {
        font-size: clamp(9px, 2.6vw, 11px);
    }
    .strategy-comparison-rank {
        flex: 0 0 auto;
        margin-left: auto;
        font-size: clamp(10px, 2.8vw, 11px);
    }
    .strategy-comparison-best-badge {
        top: 4px;
        right: 4px;
        font-size: 9px;
        padding: 1px 4px;
    }
}

/* ---------------------------------------------------------------------------
 * Mobile sticky strip — keep the switcher + active strategy permanently
 * visible while the user scrolls past photos to the analysis section.
 *
 * Pinned just below the existing sticky header. The header height varies
 * with address wrap, so we use a CSS variable that property_details.html's
 * adjustForFixedHeader() JS keeps in sync (--sticky-header-height). If the
 * variable isn't set yet, fall back to a sensible default.
 * --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    #strategyComparison {
        position: sticky;
        top: var(--sticky-header-height, 56px);
        z-index: 5; /* below the sticky header (z-index 10+) */
        background: #ffffff;
        margin: 8px 0 12px;
    }
}