/* Post-deployment compatibility and media fixes */

/* Preserve original Ghost feature images, including animated GIFs and external images. */
.sr-post-feature {
    width: min(1120px, calc(100% - 48px));
}
.sr-post-feature img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    background: var(--panel-soft);
}
.sr-page-feature img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}

/* Editorial writing rows keep imagery without reverting to generic card grids. */
.sr-post-row.has-image {
    grid-template-columns: 155px minmax(0, 1fr) 92px 124px;
}
.sr-post-row-thumb {
    width: 124px;
    height: 82px;
    justify-self: end;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel-soft);
}
.sr-post-row-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The About portrait is promoted into the hero; avoid immediately repeating it in body content. */
.sr-about-has-feature-image .sr-about-content .gh-content > .kg-image-card:first-child {
    display: none;
}

/* Make external project cards unambiguously interactive. */
.sr-project-card {
    cursor: pointer;
}
.sr-project-card:focus-visible,
.sr-featured-story:focus-visible,
.sr-post-row-thumb:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* Ensure long page/post images never overflow their content shell. */
.gh-content img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .sr-post-row.has-image {
        grid-template-columns: 130px minmax(0, 1fr) 78px 108px;
        gap: 18px;
    }
    .sr-post-row-thumb {
        width: 108px;
        height: 72px;
    }
}

@media (max-width: 640px) {
    .sr-post-feature {
        width: calc(100% - 24px);
    }
    .sr-post-row.has-image {
        grid-template-columns: minmax(0, 1fr) 96px;
        gap: 8px 14px;
    }
    .sr-post-row.has-image .sr-post-row-meta {
        grid-column: 1;
        grid-row: 1;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: wrap;
    }
    .sr-post-row.has-image .sr-post-row-main {
        grid-column: 1;
        grid-row: 2;
    }
    .sr-post-row.has-image .sr-post-row-time {
        display: none;
    }
    .sr-post-row.has-image .sr-post-row-thumb {
        grid-column: 2;
        grid-row: 1 / 3;
        width: 96px;
        height: 72px;
        align-self: start;
    }
}