/* Sami Strategy Co. — phone swipe rows (2026-10-30, projects/website-seo).
   Loaded from _includes/head-common.html with media="(max-width: 720px)" and
   driven by /js/swipe.js. Nothing in this file applies above 720px, so the
   desktop layout is unchanged. Card grids that stack into long scrolls on a
   phone become one snap-scrolling row with a swipe hint, dots or a counter,
   edge fades and 44px arrows. */
@media (max-width: 720px) {
    .sw-wrap {
        position: relative;
        --sw-bg: #fafafa;
    }
    .sw-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding: 6px 16px 10px !important;
        width: auto !important;
        max-width: none !important;
    }
    .sw-track::-webkit-scrollbar { display: none; }
    .sw-track::before, .sw-track::after { content: none !important; }
    .sw-track > * {
        flex: 0 0 84% !important;
        width: 84% !important;
        max-width: 84% !important;
        min-width: 0 !important;
        margin: 0 !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        box-sizing: border-box;
    }
    .sw-track > *:last-child { margin-right: 16px !important; }
    /* scroll-reveal classes never fire for cards that start off-screen sideways */
    .sw-track.anim, .sw-track.anim-left, .sw-track.anim-right, .sw-track.anim-scale,
    .sw-track > .anim, .sw-track > .anim-left, .sw-track > .anim-right, .sw-track > .anim-scale,
    .sw-track .anim, .sw-track .anim-left, .sw-track .anim-right, .sw-track .anim-scale {
        opacity: 1 !important;
        transform: none !important;
    }
    .sw-track [style*="display: none"], .sw-track [style*="display:none"] { display: none !important; }
    /* owners corporations process steps: the numbered marker hangs 49px left of each step on desktop */
    .sw-track > .process-step { padding: 0 0 0 44px !important; }
    .sw-track .process-step-marker { left: 0; border-color: #f78f20; }
    .sw-track .process-step-marker span { color: #f78f20; }

    /* edge fades: show there is more to the right (and left once scrolled) */
    .sw-wrap::before, .sw-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 28px;
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .sw-wrap::before { left: -16px; background: linear-gradient(to right, var(--sw-bg), rgba(255, 255, 255, 0)); }
    .sw-wrap::after { right: -16px; background: linear-gradient(to left, var(--sw-bg), rgba(255, 255, 255, 0)); }
    .sw-wrap.sw-more-left::before, .sw-wrap.sw-more-right::after { opacity: 1; }

    /* swipe hint: label + animated chevrons, hidden after the first swipe */
    .sw-hint {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0 0 10px auto;
        font-family: 'Lato', sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #f78f20;
        transition: opacity 0.4s;
    }
    .sw-hint-row { display: flex; justify-content: flex-end; }
    .sw-hint svg { width: 18px; height: 18px; stroke: #f78f20; animation: swHintSlide 1.4s ease-in-out infinite; }
    .sw-hint.sw-hide { opacity: 0; pointer-events: none; }
    @keyframes swHintSlide {
        0%, 100% { transform: translateX(0); opacity: 1; }
        50% { transform: translateX(8px); opacity: 0.55; }
    }
    /* one-off nudge when the row first scrolls into view */
    .sw-nudge { animation: swNudge 1.2s cubic-bezier(0.4, 0, 0.2, 1) 1; }
    @keyframes swNudge {
        0%, 100% { transform: translateX(0); }
        35% { transform: translateX(-34px); }
        65% { transform: translateX(0); }
        82% { transform: translateX(-10px); }
    }

    /* controls under the row */
    .sw-ui {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        margin-top: 14px;
    }
    .sw-dots { display: flex; align-items: center; gap: 6px; }
    .sw-dot {
        width: 6px;
        height: 6px;
        border-radius: 3px !important;
        background: #d1d5db;
        transition: width 0.25s, background 0.25s;
    }
    .sw-dot.on { width: 20px; background: #f78f20; }
    .sw-count {
        font-family: 'Lato', sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.15em;
        color: #5a7f9a;
        min-width: 56px;
        text-align: center;
    }
    .sw-bar {
        position: relative;
        flex: 1;
        max-width: 110px;
        height: 2px;
        background: #e5e7eb;
        overflow: hidden;
    }
    .sw-bar i {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: var(--p, 10%);
        background: #f78f20;
        transition: width 0.25s;
    }
    .sw-arrow {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid #d1d5db;
        color: #1a3550;
        padding: 0;
        cursor: pointer;
        transition: opacity 0.25s, border-color 0.25s;
    }
    .sw-arrow svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
    .sw-arrow:active { border-color: #f78f20; }
    .sw-arrow[disabled] { opacity: 0.3; cursor: default; }

    @media (prefers-reduced-motion: reduce) {
        .sw-nudge, .sw-hint svg { animation: none; }
        .sw-track { scroll-behavior: auto; }
    }
}