/*
 * Independent single-post content islands, sticky sidebar containment and related-card layout.
 * The physical version in the filename avoids stale production caches.
 */

.single-post .site-content {
    margin-top: 0;
    padding-top: 0;
    background: transparent;
}

.single-post .site-content-inner {
    display: block;
}

.single-post .am-single-main-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0 0 20px;
    border-radius: 25px;
    background: #fff;
}

.single-post .am-single-main-row > .content-area {
    min-width: 0;
}

.single-post .article-card,
.single-post .am-single-island {
    box-sizing: border-box;
    border-radius: 25px;
    background: #fff;
}

.single-post .article-card {
    width: 100%;
    min-width: 0;
    padding: clamp(18px, 2.5vw, 30px);
}

.single-post .article-card > .entry-image:first-child {
    margin-top: 0;
}

.single-post .article-card > .entry-image--wide,
.single-post .article-card > .entry-image--full,
.single-post .article-card > .entry-image--fullscreen {
    flex: 0 1 auto;
    width: 100% !important;
    max-width: 100%;
    margin: 0 0 30px;
    overflow: hidden;
    border-radius: 18px;
    transform: none;
}

.single-post .am-single-island {
    width: 100%;
    max-width: 1190px;
    margin: 0 0 20px;
    padding: clamp(18px, 2.2vw, 26px);
}

.single-post .am-single-island:last-child {
    margin-bottom: 0;
}

/*
 * Sticky Kit uses .widget-area as the movement boundary. The parent must
 * therefore be as tall as the article/sidebar row on desktop.
 */
@media (min-width: 992px) {
    .single-post .am-single-main-row {
        align-items: stretch;
    }

    .single-post .am-single-main-row > .widget-area {
        align-self: stretch;
    }
}

/* Related posts become a full-width island below the article/sidebar row. */
.single-post .am-single-island--related #related-posts {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
}

.single-post .am-single-island--related .related-posts__header {
    margin: 0 0 18px;
}

.single-post .am-single-island--related .post-cards--vertical {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 16px;
    align-items: stretch;
    margin: 0;
}

.single-post .am-single-island--related .post-card.am-card--compact.post-card--related {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px 11px;
    align-content: start;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(53, 53, 53, .08);
}

.single-post .am-single-island--related .am-card--compact > .post-card__thumbnail {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 92px;
    aspect-ratio: 1;
    margin: 0 !important;
}

.single-post .am-single-island--related .am-card--compact > .am-card-facts,
.single-post .am-single-island--related .am-card--compact > .post-card__title {
    grid-column: 2;
    min-width: 0;
    margin: 0;
}

.single-post .am-single-island--related .am-card--compact .post-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 14px;
    line-height: 1.28;
}

.single-post .am-single-island--related .am-card--compact > .am-card-features,
.single-post .am-single-island--related .am-card--compact > .post-card__description,
.single-post .am-single-island--related .am-card--compact > .post-card__meta,
.single-post .am-single-island--related .am-card--compact > .post-card__rating {
    grid-column: 1 / -1;
}

.single-post .am-single-island--related .am-card--compact .am-card-features__list {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.single-post .am-single-island--related .am-card--compact .post-card__description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    margin-bottom: 0;
}

.single-post .am-single-island--related .am-card--compact.post-card--thumbnail-no {
    grid-template-columns: minmax(0, 1fr);
}

.single-post .am-single-island--related .am-card--compact.post-card--thumbnail-no > * {
    grid-column: 1;
}

/* The island is full width, while comment text stays comfortably readable. */
.single-post .am-single-island--comments #comments {
    width: 100%;
    max-width: 870px;
    margin: 0 auto;
    padding-top: 0;
}

.single-post .am-single-island--comments #comments > :first-child,
.single-post .am-single-island--comments #comments .comment-respond:first-child .comment-reply-title {
    margin-top: 0;
}

@media (max-width: 1023px) {
    .single-post .am-single-island--related .post-cards--vertical {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .single-post .am-single-main-row {
        margin-bottom: 14px;
    }

    .single-post .article-card,
    .single-post .am-single-main-row,
    .single-post .am-single-island {
        border-radius: 19px;
    }

    .single-post .article-card {
        padding: 16px;
    }

    .single-post .am-single-island {
        margin-bottom: 14px;
        padding: 15px;
    }

    .single-post .am-single-island--related .related-posts__header {
        margin-bottom: 14px;
    }

    .single-post .am-single-island--related .post-cards--vertical {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .single-post .am-single-island--related .post-card.am-card--compact.post-card--related {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 7px 10px;
        height: auto;
        padding: 11px;
        border-radius: 13px;
    }

    .single-post .am-single-island--related .am-card--compact > .post-card__thumbnail {
        width: 82px;
    }

    .single-post .am-single-island--related .am-card--compact .post-card__description {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

@media (max-width: 374px) {
    .single-post .am-single-island--related .post-card.am-card--compact.post-card--related {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .single-post .am-single-island--related .am-card--compact > .post-card__thumbnail {
        width: 72px;
    }
}