/* DrSlon Blog — 05-single.css */

/* === single: hero image + post nav cards + related posts === */

.drslon-single-hero .wp-block-post-featured-image {
        width: 100%;
        max-width: 680px;
        margin: 0.35rem auto 0;
        padding: 10px;
        overflow: hidden;
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 10px;
        background: var(--wp--preset--color--surface-light);
        aspect-ratio: auto !important;
        height: auto !important;
}

.drslon-single-hero .wp-block-post-featured-image picture {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: unset;
}

.drslon-single-hero .wp-block-post-featured-image img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 300px;
        margin: 0 auto;
        object-fit: contain;
        object-position: center;
}

.drslon-single-nav .wp-block-shortcode,
.drslon-single-related .wp-block-shortcode {
        margin: 0;
}

.drslon-post-nav-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
}

.drslon-post-nav-card {
        --drslon-post-nav-thumb: 120px;
        display: grid;
        grid-template-columns: var(--drslon-post-nav-thumb) minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        min-width: 0;
        padding: 14px;
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 14px;
        background: var(--wp--preset--color--surface);
        box-shadow: 0 10px 24px rgba(23, 33, 51, 0.05);
        color: inherit;
        text-decoration: none;
        overflow: hidden;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.drslon-post-nav-card:hover {
        border-color: var(--wp--preset--color--accent);
        box-shadow: 0 14px 30px rgba(23, 33, 51, 0.08);
        transform: translateY(-1px);
}

.drslon-post-nav-card__media {
        display: block;
        width: var(--drslon-post-nav-thumb);
        max-width: var(--drslon-post-nav-thumb);
        aspect-ratio: 4 / 3;
        overflow: hidden;
        border-radius: 10px;
        background: var(--wp--preset--color--surface-light);
        flex-shrink: 0;
}

.drslon-post-nav-card__image,
.drslon-post-nav-card__placeholder {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: inherit;
        background: var(--wp--preset--color--surface-light);
}

.drslon-post-nav-card__image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
}

.drslon-post-nav-card__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.35rem;
        min-width: 0;
}

.drslon-post-nav-card--next {
        grid-template-columns: minmax(0, 1fr) var(--drslon-post-nav-thumb);
}

.drslon-post-nav-card--next .drslon-post-nav-card__media {
        order: 2;
}

.drslon-post-nav-card--next .drslon-post-nav-card__content {
        order: 1;
        text-align: right;
        align-items: flex-end;
}

.drslon-post-nav-card__eyebrow {
        display: block;
        margin-bottom: 0.45rem;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--wp--preset--color--muted);
}

.drslon-post-nav-card__title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font-size: 0.98rem;
        line-height: 1.35;
        font-weight: 700;
        color: var(--wp--preset--color--foreground);
        overflow-wrap: anywhere;
}

.drslon-single-related > .wp-block-heading {
        margin-top: 0;
        margin-bottom: 1rem;
}

.drslon-related-posts__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
}

.drslon-related-post {
        display: flex;
        flex-direction: column;
        min-width: 0;
        height: 100%;
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 14px;
        background: var(--wp--preset--color--surface);
        box-shadow: 0 10px 24px rgba(23, 33, 51, 0.05);
        overflow: hidden;
}

.drslon-related-post__media {
        display: block;
        aspect-ratio: 16 / 9;
        background: var(--wp--preset--color--surface-light);
}

.drslon-related-post__image,
.drslon-related-post__placeholder {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background: var(--wp--preset--color--surface-light);
}

.drslon-related-post__content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0.7rem;
        padding: 18px;
        min-width: 0;
}

.drslon-related-post__meta {
        margin: 0;
        font-size: 0.82rem;
        color: var(--wp--preset--color--muted);
}

.drslon-related-post__dot {
        margin: 0 0.35rem;
}

.drslon-related-post__title {
        margin: 0;
        font-size: 1.02rem;
        line-height: 1.35;
}

.drslon-related-post__title a {
        color: inherit;
        text-decoration: none;
}

.drslon-related-post__excerpt {
        margin: 0;
        color: var(--wp--preset--color--muted);
        line-height: 1.65;
}

.drslon-related-post__footer {
        margin: auto 0 0;
        padding-top: 0.2rem;
}

.drslon-related-post__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0.52rem 0.9rem;
        border: 1px solid var(--wp--preset--color--border);
        border-radius: 999px;
        background: var(--wp--preset--color--surface-light);
        color: inherit;
        text-decoration: none;
        font-weight: 700;
}

.drslon-related-post__link:hover {
        border-color: var(--wp--preset--color--accent);
}

@media (max-width: 1099px) {
        .drslon-related-posts__grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

@media (max-width: 781px) {
        .drslon-single-hero .wp-block-post-featured-image {
                max-width: 100%;
                padding: 8px;
        }

        .drslon-single-hero .wp-block-post-featured-image img {
                max-height: 220px;
        }

        .drslon-post-nav-cards,
        .drslon-related-posts__grid {
                grid-template-columns: 1fr;
        }

        .drslon-post-nav-card,
        .drslon-post-nav-card--next {
                --drslon-post-nav-thumb: 88px;
                grid-template-columns: var(--drslon-post-nav-thumb) minmax(0, 1fr);
        }

        .drslon-post-nav-card--next .drslon-post-nav-card__media,
        .drslon-post-nav-card--next .drslon-post-nav-card__content {
                order: initial;
        }

        .drslon-post-nav-card--next .drslon-post-nav-card__content {
                text-align: left;
                align-items: flex-start;
        }

        .drslon-post-nav-card__title {
                -webkit-line-clamp: 2;
                font-size: 0.92rem;
        }
}