/*
 * Single Post Mobile Responsive CSS
 * MediCare Pro v3.0
 */

/* ========================================
   MOBILE RESPONSIVE - SINGLE POST
======================================== */
@media screen and (max-width: 768px) {

    /* Article Header */
    .single-post-header {
        padding: 30px 20px;
    }

    .entry-title {
        font-size: 26px;
        line-height: 1.3;
    }

    .entry-meta {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .meta-item {
        font-size: 13px;
        padding: 6px 14px;
    }

    /* Featured Image */
    .post-thumbnail {
        margin: 20px 0;
        border-radius: 12px;
    }

    .post-thumbnail::before {
        font-size: 40px;
    }

    /* Article Content */
    .entry-content {
        padding: 25px 20px;
        font-size: 16px;
        line-height: 1.7;
    }

    .entry-content h2 {
        font-size: 22px;
        margin-top: 30px;
    }

    .entry-content h3 {
        font-size: 20px;
        margin-top: 25px;
    }

    .entry-content h4 {
        font-size: 18px;
    }

    .entry-content p {
        margin-bottom: 18px;
    }

    /* Medical Info Boxes */
    .medical-note,
    .medical-warning,
    .medical-tip {
        padding: 18px;
        margin: 20px 0;
        border-radius: 12px;
    }

    .medical-note::before,
    .medical-warning::before,
    .medical-tip::before {
        font-size: 20px;
        width: 35px;
        height: 35px;
    }

    /* Lists */
    .entry-content ul,
    .entry-content ol {
        padding-right: 25px;
    }

    .entry-content li {
        padding-right: 30px;
        margin-bottom: 10px;
    }

    /* Blockquotes */
    .entry-content blockquote {
        padding: 20px 18px;
        margin: 20px 0;
        font-size: 16px;
    }

    .entry-content blockquote::before {
        font-size: 35px;
        top: 15px;
        right: 15px;
    }

    /* Author Bio */
    .author-bio {
        flex-direction: column;
        padding: 25px 20px;
        margin: 30px 0;
        text-align: center;
    }

    .author-avatar {
        margin: 0 auto 15px;
    }

    .author-avatar img {
        width: 80px;
        height: 80px;
    }

    .author-info h3 {
        font-size: 20px;
    }

    .author-info p {
        font-size: 14px;
    }

    /* Tags & Categories */
    .entry-footer {
        padding: 20px;
        flex-direction: column;
        gap: 15px;
    }

    .post-tags,
    .post-categories {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .post-tags a,
    .post-categories a {
        padding: 8px 16px;
        font-size: 13px;
    }

    /* Related Posts */
    .related-posts {
        padding: 30px 20px;
        margin: 30px 0;
    }

    .related-posts h3 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .related-post-card {
        padding: 15px;
    }

    .related-post-thumbnail {
        height: 180px;
    }

    .related-post-title {
        font-size: 16px;
    }

    .related-post-meta {
        font-size: 12px;
    }
}

@media screen and (max-width: 480px) {
    .single-post-header {
        padding: 25px 15px;
    }

    .entry-title {
        font-size: 22px;
    }

    .entry-content {
        padding: 20px 15px;
        font-size: 15px;
    }

    .entry-content h2 {
        font-size: 20px;
    }

    .entry-content h3 {
        font-size: 18px;
    }

    .medical-note,
    .medical-warning,
    .medical-tip {
        padding: 15px;
    }

    .author-bio {
        padding: 20px 15px;
    }

    .author-avatar img {
        width: 70px;
        height: 70px;
    }

    .entry-footer {
        padding: 15px;
    }

    .related-posts {
        padding: 25px 15px;
    }

    .related-posts h3 {
        font-size: 20px;
    }

    .related-post-thumbnail {
        height: 160px;
    }
}

/* ========================================
   CONTENT WRAPPER MOBILE
======================================== */
@media screen and (max-width: 768px) {
    .content-wrapper {
        padding: 0;
    }

    .main-content {
        padding: 0;
    }

    .site-container {
        padding: 0 15px;
    }

    /* Remove sidebar spacing on mobile */
    .single-post .content-wrapper {
        display: block;
    }

    .single-post .main-content {
        width: 100%;
        max-width: 100%;
    }
}

/* ========================================
   IMAGES & MEDIA MOBILE
======================================== */
@media screen and (max-width: 768px) {
    .entry-content img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .entry-content figure {
        margin: 20px 0;
    }

    .entry-content figcaption {
        font-size: 13px;
        padding: 10px;
    }

    /* Tables */
    .entry-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .entry-content th,
    .entry-content td {
        padding: 10px;
        font-size: 13px;
    }
}