/* =========================================================
   UI fixes (asked 2026-10-20). Loaded after rhythm.css on every page.
   Kept in its own file so other edits to rhythm.css do not drop it.
   ========================================================= */

/* ---------- Home: Selected work cards ---------- */
/* Headlines in black at every size; the kicker above them already carries the accent colour */
body[data-page="home"] .sw-v2 .sw-headline,
body[data-page="home"] .sw-v2 .sw-headline a {
    color: var(--text-pencil, #1A1A18) !important;
}

body[data-page="home"] .sw-v2 .sw-headline a:hover {
    color: var(--color-highlight-dark, #1B4A4F) !important;
}

/* "Read case study": an outline (secondary) button, full width, like LinkedIn in "Let's connect" */
.sw-v2 .sw-card .sw-read {
    display: flex;
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 0 24px;
    border: 1px solid #266268;
    background: transparent;
    color: #1B4A4F;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.sw-v2 .sw-card .sw-line {
    margin-bottom: 20px;
}

.sw-v2 .sw-card .sw-read:hover,
.sw-v2 .sw-card .sw-read:active {
    background: rgba(38, 98, 104, 0.08);
}

/* Desktop with a mouse: no button, the hover cursor already says "Read case study" */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
    .sw-v2 .sw-card .sw-read {
        display: none;
    }
}

/* Phones: the kicker stays on one line (about 10.7px on a 375px phone, 9px at 320px) */
@media (max-width: 760px) {
    .sw-v2 .sw-card .sw-kicker {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: clamp(9px, 2.85vw, 11px) !important;
        letter-spacing: 0.04em !important;
    }
}

/* ---------- Phones: one button style everywhere ---------- */
/* 14px text, 40px tall, 24px side padding, 20px icons, 10px corners.
   Cards, the floating "On this page" pill and small in-page controls keep their own shapes. */
@media (max-width: 760px) {
    :root .btn-filled,
    :root .rw-btn,
    :root .lt-btn,
    :root .ai-more,
    :root .sw-v2 .sw-card .sw-read,
    :root .tl-link,
    :root .csx-toc-cta,
    :root .askme-banner-btn,
    :root .csx-read-cta,
    :root .csx-more-go {
        box-sizing: border-box;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 24px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    :root :is(.btn-filled, .rw-btn, .lt-btn, .ai-more, .sw-read, .tl-link, .csx-toc-cta,
              .askme-banner-btn, .csx-read-cta, .csx-more-go) svg {
        width: 20px !important;
        height: 20px !important;
        flex: none;
        margin-left: 0 !important;
    }
}