/* karate.css — "Digitizing the Dojo" only.
   Loaded AFTER post.css (the post's front matter lists both), so post.css keeps
   its brightened --ink-dim for long-form reading and this file only adds.
   Every size comes from the type scale in theme.css. */

/* Two small tidies that belong here rather than inline in the template. */
.pillar-note { font-size: var(--fs-sm); }
.roles .split { margin-top: 16px; }

/* --- The wide layout -----------------------------------------------------
   Everything below is inside one min-width query on purpose. post.css's single
   820px column is *right* for a phone and a narrow window — a bento that
   collapses back to one column would land in exactly the same place, with more
   rules to maintain. So the narrow layout is simply left alone, and the desk
   gets a bento instead of a column of full-width cards with nothing beside them. */
@media (min-width: 900px) {
    .container { max-width: 1180px; }
    header.post-head { max-width: 900px; }

    /* post.css stacks the article as a flex column; here it is a 12-col bento. */
    article {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 18px;
    }

    /* The argument, with the download panel beside it rather than above it —
       the CTA stays in view at the top without spending a whole row on three
       small buttons. */
    .lead-section { grid-column: span 8; }
    .get-app {
        grid-column: span 4;
        display: flex; flex-direction: column; justify-content: center;
    }
    /* In a quarter-width card the buttons read better as a stacked list than as
       a wrapped row that breaks 2 + 1. */
    .get-app .cta-row { flex-direction: column; align-items: stretch; }
    .get-app .btn { justify-content: center; }

    /* Student | Sensei is already a two-column split — give it the full width so
       both pillars get a real column instead of a 380px one. */
    .roles { grid-column: 1 / -1; }

    /* The roadmap is three paragraphs and the stack is five tags, so they pair
       7/5 rather than 6/6. The tags centre in their card, which is what stops the
       shorter card reading as unfinished next to the taller one. */
    .roadmap { grid-column: span 7; }
    .tech {
        grid-column: span 5;
        display: flex; flex-direction: column; justify-content: center;
    }

    .outro { grid-column: 1 / -1; }
    .end-note { grid-column: 1 / -1; }   /* it lives inside <article> too */

    /* The hero stops being a scroller: at this width the three shots fit side by
       side, so they share the row equally (flex: 1 1 0, never wider than 300px)
       and the swipe hint — which would now be telling you to swipe a gallery that
       doesn't move — goes away. */
    .gallery { justify-content: center; }
    .gallery figure { flex: 1 1 0; min-width: 0; }
    .gallery img {
        width: 100%;
        max-width: 300px;
        height: auto;
        max-height: 70vh;
    }
    .swipe-hint { display: none; }
}