/* ---------- Home — phone layout: Platforms (design 20b "wallet passes", tap a pass to pull it open) ----------
 * Markup: components/home/mobile/platforms-m.php · Script: home-mobile-platforms.js
 * Shared .hm primitives live in home-mobile.css; full-screen sizing in home-mobile-fullscreen.css.
 * Every colour is a --hmw-* token on .hmw: dark is the default, the light theme only reassigns them (bottom of the block).
 */
@media (max-width: 767px) {
    /* Swap: the phone block replaces the desktop card grid */
    #platforms > :not(.hmw) { display: none !important; }
    #platforms { padding: 0 !important; }

    .hmw {
        --hmw-r: 22px; --hmw-head: 56px;
        --hmw-fg: #fff; --hmw-eyebrow: rgba(255, 255, 255, 0.42); --hmw-dim: rgba(255, 255, 255, 0.5); --hmw-ask: rgba(255, 255, 255, 0.6);
        --hmw-glow: rgba(255, 255, 255, 0.12);
        /* collapsed pass — dark ribbed metal */
        --hmw-pass-bg: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px), linear-gradient(180deg, #2b2b2f 0%, #141416 100%);
        --hmw-pass-line: rgba(255, 255, 255, 0.2); --hmw-pass-fg: #fff; --hmw-pass-muted: rgba(255, 255, 255, 0.55); --hmw-pass-dash: rgba(255, 255, 255, 0.2);
        --hmw-pass-shadow: 0 -10px 22px -8px rgba(0, 0, 0, 0.55);
        /* open pass — brushed silver */
        --hmw-open-bg: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.025) 0 1px, transparent 1px 3px), linear-gradient(135deg, #ececf0 0%, #b9b9bf 36%, #dcdce0 62%, #a6a6ad 100%);
        --hmw-open-line: rgba(255, 255, 255, 0.6); --hmw-open-fg: #0a0a0a; --hmw-open-muted: rgba(10, 10, 10, 0.55); --hmw-open-dash: rgba(10, 10, 10, 0.28);
        --hmw-cta-bg: #0a0a0a; --hmw-cta-fg: #fff; --hmw-cta-ico-bg: #fff; --hmw-cta-ico-fg: #0a0a0a;
        --hmw-focus: #fff;
        display: flex; flex-direction: column; color: var(--hmw-fg);
    }
    .hmw .hm__glow { background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--hmw-glow) 0%, transparent 70%); }

    /* Heading */
    .hmw__eyebrow { position: relative; display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--hm-mono); font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--hmw-eyebrow); }
    .hmw__rule { width: 28px; height: 1px; background: currentColor; opacity: .6; }
    .hmw__titlebar { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; }
    .hmw__title { margin: 0; font-family: var(--hm-display); font-size: clamp(28px, 8vw, 34px); line-height: 1.02; letter-spacing: -0.05em; font-weight: 700; color: var(--hmw-fg); text-wrap: balance; }
    .hmw__title span { display: block; }
    .hmw__title-dim { color: var(--hmw-dim); }
    .hmw__hint { flex-shrink: 0; padding-bottom: 5px; font-family: var(--hm-mono); font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--hmw-eyebrow); text-align: end; }
    /* tracked-out caps break Arabic joining */
    html[dir="rtl"] .hmw__eyebrow, html[dir="rtl"] .hmw__hint { font-family: inherit; font-size: 12px; letter-spacing: 0; }
    html[dir="rtl"] .hmw__title { letter-spacing: 0; line-height: 1.25; }

    /* Pass stack — each pass overlaps the one above by its corner radius, later passes on top */
    .hmw__stack { position: relative; isolation: isolate; display: flex; flex-direction: column; margin-top: 26px; }
    .hmw__pass {
        position: relative; z-index: calc(var(--i) + 1); overflow: hidden; margin-top: calc(var(--hmw-r) * -1); padding-bottom: var(--hmw-r);
        border: 1px solid var(--hmw-pass-line); border-radius: var(--hmw-r); background: var(--hmw-pass-bg); color: var(--hmw-pass-fg); box-shadow: var(--hmw-pass-shadow);
        transition: border-color .5s ease, color .4s ease, padding-bottom .6s var(--hm-ease);
    }
    .hmw__pass:first-child { margin-top: 0; }
    /* the open material fades in over the collapsed one (gradients can't transition) */
    .hmw__pass::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--hmw-open-bg); opacity: 0; transition: opacity .55s ease; pointer-events: none; }
    .hmw__pass.is-open { --hmw-focus: var(--hmw-open-fg); color: var(--hmw-open-fg); border-color: var(--hmw-open-line); }
    .hmw__pass.is-open::before { opacity: 1; }
    .hmw__pass:last-child.is-open { padding-bottom: 0; }

    .hmw__head {
        position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: 100%; height: var(--hmw-head); margin: 0; padding: 0 18px;
        border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent;
    }
    .hmw__ico { flex: none; display: flex; justify-content: center; width: 22px; font-size: 20px; line-height: 1; }
    .hmw__name { flex: 1; min-width: 0; font-family: var(--hm-display); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hmw__pass.is-open .hmw__name { font-weight: 600; }
    .hmw__price { flex: none; display: flex; align-items: baseline; gap: 8px; font-family: var(--hm-display); }
    .hmw__from { font-size: 13px; text-transform: lowercase; color: var(--hmw-pass-muted); transition: color .4s ease; }
    .hmw__pass.is-open .hmw__from { color: var(--hmw-open-muted); }
    .hmw__price b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
    /* last pass, collapsed: a dashed hint that its body continues under the fold */
    .hmw__pass:last-child:not(.is-open) .hmw__head::after { content: ""; position: absolute; inset-inline: 18px; bottom: 0; border-top: 1px dashed var(--hmw-pass-dash); }

    /* Body — height animates 0fr → 1fr; hidden (and inert, see JS) until its pass is open */
    .hmw__body { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .6s var(--hm-ease), visibility 0s linear .6s; }
    .hmw__pass.is-open .hmw__body { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
    .hmw__clip { min-height: 0; overflow: hidden; }
    .hmw__pad { margin-inline: 18px; padding: 16px 0 28px; border-top: 1px dashed var(--hmw-open-dash); }
    .hmw__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; margin: 0 0 18px; }
    .hmw__meta > div { min-width: 0; }
    .hmw__meta dt { margin: 0; font-family: var(--hm-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--hmw-open-muted); }
    html[dir="rtl"] .hmw__meta dt { font-family: inherit; font-size: 11.5px; letter-spacing: 0; }
    .hmw__meta dd { margin: 6px 0 0; font-size: 14.5px; line-height: 1.35; font-weight: 500; color: var(--hmw-open-fg); }
    .hmw__cta {
        display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 50px; margin: 0; padding: 0 5px 0 22px;
        border: 0; border-radius: 999px; background: var(--hmw-cta-bg); color: var(--hmw-cta-fg); font: inherit; font-family: var(--hm-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
        text-align: start; text-decoration: none; cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; transition: transform .2s ease;
    }
    .hmw__cta:active { transform: scale(.985); }
    .hmw__cta-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hmw-cta-ico-bg); color: var(--hmw-cta-ico-fg); font-size: 13px; }
    /* faint platform glyph bleeding off the open pass's corner */
    .hmw__mark { position: absolute; z-index: 0; inset-inline-end: -22px; bottom: -26px; font-size: 168px; line-height: 1; color: var(--hmw-open-fg); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
    .hmw__pass.is-open .hmw__mark { opacity: .09; }

    /* Footer link */
    .hmw__ask { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px; font-size: 14px; color: var(--hmw-ask); text-decoration: none; }
    .hmw__ask > i { flex: none; font-size: 16px; }
    .hmw__ask u { color: var(--hmw-fg); font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: 4px; }

    body.home-bw-theme .hmw__head:focus-visible, body.home-bw-theme .hmw__cta:focus-visible { outline: 2px solid var(--hmw-focus) !important; outline-offset: -4px; }
    body.home-bw-theme .hmw__ask:focus-visible { outline: 2px solid var(--hmw-fg) !important; outline-offset: 3px; border-radius: 8px; }

    /* Light theme — cool paper, navy ink, royal blue (tokens from theme-light.css). The open pass flips to deep navy. */
    html[data-theme="light"] .hmw {
        --hmw-fg: var(--theme-ink); --hmw-eyebrow: var(--theme-muted); --hmw-dim: oklch(66% 0 0); --hmw-ask: var(--theme-muted);
        --hmw-glow: color-mix(in oklch, var(--theme-blue) 10%, transparent);
        --hmw-pass-bg: repeating-linear-gradient(90deg, color-mix(in oklch, var(--theme-ink) 3.5%, transparent) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--theme-surface) 0%, var(--theme-surface-2) 100%);
        --hmw-pass-line: var(--theme-line); --hmw-pass-fg: var(--theme-ink); --hmw-pass-muted: var(--theme-muted); --hmw-pass-dash: var(--theme-line-strong);
        --hmw-pass-shadow: 0 -10px 22px -10px rgba(0, 0, 0, 0.2);
        --hmw-open-bg: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px), linear-gradient(135deg, oklch(34% 0 0) 0%, oklch(24% 0 0) 46%, oklch(32% 0 0) 100%);
        --hmw-open-line: color-mix(in oklch, var(--theme-blue) 45%, oklch(24% 0 0)); --hmw-open-fg: #fff; --hmw-open-muted: rgba(255, 255, 255, 0.62); --hmw-open-dash: rgba(255, 255, 255, 0.28);
        --hmw-cta-bg: var(--theme-blue); --hmw-cta-fg: #fff; --hmw-cta-ico-bg: #fff; --hmw-cta-ico-fg: var(--theme-blue-dark);
        --hmw-focus: var(--theme-blue);
        background: var(--theme-paper);
    }
}
@media (max-width: 360px) {
    .hmw__head { gap: 10px; padding-inline: 14px; }
    .hmw__name { font-size: 16.5px; }
    .hmw__pad { margin-inline: 14px; }
    .hmw__meta { column-gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .hmw__pass, .hmw__pass::before, .hmw__body, .hmw__from, .hmw__mark, .hmw__cta { transition: none !important; }
}