/* Minomog Auto Blog — storefront post styling.
   Loaded via the cms_page_view layout so it always applies (no dependency on
   the head meta block). The hero rules only bite when .minomog-blog-hero is
   present, i.e. on AutoBlog posts. */

/* Smaller, fluid page title with tidy wrapping. */
.page-main h1,
.page-title-wrapper h1,
h1.page-title {
    font-size: clamp(1.25rem, 4vw, 1.85rem);
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Hero image floated to one side so text wraps beside it (saves vertical space). */
.cms-content .minomog-blog-hero {
    float: right;
    width: min(40%, 300px);
    margin: 0.25rem 0 1rem 1.5rem;
}

.cms-content .minomog-blog-hero img {
    width: 100%;
    height: auto;
    display: block;
    /* Use Hyvä design tokens with safe fallbacks so it matches the theme. */
    border-radius: var(--radius-lg, 0.5rem);
}

.cms-content .minomog-blog-hero figcaption {
    margin-top: 0.4rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-fg-secondary, #64748b);
}

/* Stack full-width on phones (no cramped float). */
@media (max-width: 640px) {
    .cms-content .minomog-blog-hero {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 1rem 0;
    }
}

/* Related posts: wrap into a row on desktop... */
.cms-content .minomog-blog-related {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}
.cms-content .minomog-blog-related__item {
    flex: 1 1 200px;
    max-width: 260px;
}
/* ...horizontal swipe carousel on phones / small screens. */
@media (max-width: 640px) {
    .cms-content .minomog-blog-related {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .5rem;
    }
    .cms-content .minomog-blog-related__item {
        flex: 0 0 72%;
        max-width: 72%;
        scroll-snap-align: start;
    }
}