/* =========================================================
   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;
    }
}

/* ---------- Desktop and tablet: same corners as phones (asked 2026-10-22) ---------- */
/* 10px corners on every call-to-action; main buttons 44px tall like "Let's connect".
   The compact "View on Behance" in the case study sidebar stays 40px tall. */
@media (min-width: 761px) {
    :root .btn-filled,
    :root .rw-btn,
    :root .lt-btn,
    :root .ai-more,
    :root .tl-link,
    :root .csx-toc-cta,
    :root .askme-banner-btn,
    :root .csx-read-cta,
    :root .csx-more-go {
        border-radius: 10px !important;
    }

    :root .btn-filled,
    :root .rw-btn,
    :root .lt-btn,
    :root .ai-more,
    :root .askme-banner-btn {
        min-height: 44px;
        box-sizing: border-box;
    }
}

/* ---------- Phones: one side margin everywhere (asked 2026-10-22) ---------- */
/* Content used to start anywhere from 8px to 33px from the screen edge depending on the
   section. Now everything (text, cards, images, buttons) sits 20px in from both edges.
   Cards keep their own inner padding; the card edge is what lines up. */
@media (max-width: 640px) {
    :root {
        --page-gutter: 20px;
    }

    /* header and footer */
    .nh .nh-inner,
    .nh.is-scrolled .nh-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    html body footer#footer.footer-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* home and work: sections without a white card add no padding of their own
       (html body ... raises specificity above older phone rules that also use !important) */
    html body[data-page="home"] main > section.bw-panel,
    html body[data-page="home"] main > section#about,
    html body[data-page="home"] main > section#testimonials,
    html body #contact.lt-section.bw-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* about: intro, film and timeline */
    .about-page .ab-hero,
    .about-page .af-head {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .about-page .tl-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .about-page .tl-section .ab-head,
    .about-page .ab-head {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* case studies */
    .csx-layout {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .csx-more {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }
}

/* styles.css gives #about 32px of padding above and below on phones (!important, by ID);
   the even section gap already spaces it, so that padding goes */
@media (max-width: 640px) {
    html body[data-page="home"] main > section#about {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Home hero: availability pill above the heading (asked 2026-10-24) */
.hero-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    padding: 6px 14px 6px 10px;
    border: 1px solid #DAD5CA;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    font-family: var(--font-ui, 'Figtree', system-ui, sans-serif);
    font-size: 13px; /* small kicker (asked 2026-10-24) */
    font-weight: 500;
    line-height: 1.2;
    color: #4A4A45;
    white-space: nowrap;
}

/* green dot inside a soft ring, with a slow pulse */
.hero-status-dot {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3DBE7A;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #8FDDB2;
}
.hero-status-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid #3DBE7A;
    opacity: 0;
    animation: hero-status-pulse 2.4s ease-out infinite;
}
@keyframes hero-status-pulse {
    0% { transform: scale(0.6); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-status-dot::after { animation: none; }
}

@media (max-width: 900px) {
    .hero-status {
        align-self: center;
        margin-bottom: 14px;
        font-size: 12px;
        padding: 5px 12px 5px 9px;
    }
}