/*
|--------------------------------------------------------------------------
| IndoSurgicals Blog — Mobile Polish v1.0 (Patch 20)
|--------------------------------------------------------------------------
| Public blog only. Mobile presentation adjustments for listing/category
| cards and article readability. Blog data, publishing and admin are untouched.
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {
    /* Reliable mobile page gutter without affecting the shared site chrome. */
    .blog-page {
        width: auto !important;
        max-width: none !important;
        margin: 14px 12px 36px !important;
        box-sizing: border-box;
    }

    /* Safety: never allow the legacy floating quote launcher to cover reading content. */
    .isqq-floating {
        display: none !important;
    }

    /* Blog home hero and filters. */
    .blog-hero {
        gap: 18px !important;
        padding: 24px 18px !important;
        border-radius: 14px !important;
    }

    .blog-kicker {
        margin-bottom: 7px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        letter-spacing: 1px !important;
    }

    .blog-hero h1 {
        margin-bottom: 9px !important;
        font-size: clamp(28px, 7vw, 32px) !important;
        line-height: 1.18 !important;
        letter-spacing: -.02em;
    }

    .blog-hero p {
        margin: 0 !important;
        font-size: 15.5px !important;
        line-height: 1.62 !important;
    }

    .blog-filter-form {
        gap: 8px !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }

    .blog-filter-form select,
    .blog-filter-form input {
        min-height: 48px !important;
        height: 48px !important;
        padding: 0 13px !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    .blog-filter-form button {
        min-height: 48px !important;
        height: 48px !important;
        font-size: 15px !important;
    }

    .blog-filter-reset {
        display: inline-flex !important;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        font-size: 13px !important;
    }

    /* Listing/category cards. */
    .blog-grid {
        gap: 15px !important;
        margin-top: 18px !important;
    }

    .blog-card {
        border-radius: 13px !important;
        box-shadow: 0 5px 18px rgba(35, 54, 70, .07) !important;
    }

    .blog-card:hover {
        transform: none !important;
    }

    .blog-card-image {
        border-radius: 12px 12px 0 0 !important;
    }

    .blog-card:hover .blog-card-image img {
        transform: none !important;
    }

    .blog-card-body {
        padding: 18px 18px 16px !important;
    }

    .blog-meta {
        gap: 8px !important;
        margin-bottom: 9px !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    .blog-meta a,
    .blog-meta span {
        overflow-wrap: anywhere;
    }

    .blog-card h2 {
        margin: 0 0 8px !important;
        font-size: 18px !important;
        line-height: 1.38 !important;
    }

    .blog-card h2 a {
        display: block;
        color: #293c4d;
        overflow-wrap: anywhere;
    }

    .blog-card p {
        margin-bottom: 10px !important;
        font-size: 14.5px !important;
        line-height: 1.65 !important;
    }

    .blog-read-more {
        display: inline-flex !important;
        min-height: 44px;
        align-items: center;
        gap: 7px;
        margin-top: 1px;
        font-size: 14px !important;
    }

    .blog-read-more span {
        font-size: 17px;
        line-height: 1;
    }

    .blog-pagination {
        gap: 8px !important;
        margin-top: 24px !important;
        flex-wrap: wrap;
    }

    .blog-pagination a {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
        border-radius: 9px !important;
        font-size: 14px;
    }

    .blog-empty {
        margin-top: 18px !important;
        padding: 26px 18px !important;
        font-size: 15px;
        line-height: 1.6;
    }

    /* Category landing header. */
    .blog-category-header {
        padding: 22px 18px !important;
        border-radius: 14px !important;
    }

    .blog-category-header > a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        font-size: 13px;
        font-weight: 700;
    }

    .blog-category-header h1 {
        margin: 2px 0 8px !important;
        font-size: clamp(27px, 7vw, 31px) !important;
        line-height: 1.22 !important;
        overflow-wrap: anywhere;
    }

    .blog-category-header p {
        margin: 0 !important;
        color: #657584;
        font-size: 15.5px !important;
        line-height: 1.65 !important;
    }

    /* Article shell and article header. */
    .blog-article {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 14px !important;
    }

    .blog-featured-image,
    .blog-featured-image-top {
        border-radius: 13px 13px 0 0 !important;
    }

    .blog-article-header,
    .blog-featured-image + .blog-article-header,
    .blog-featured-image-top + .blog-article-header {
        padding: 22px 18px 14px !important;
    }

    .blog-category-pill {
        min-height: 34px;
        padding: 6px 10px !important;
        box-sizing: border-box;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .blog-article h1 {
        margin: 11px 0 8px !important;
        font-size: clamp(26px, 7.2vw, 30px) !important;
        line-height: 1.27 !important;
        letter-spacing: -.02em;
        overflow-wrap: anywhere;
    }

    .blog-article-date {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    .blog-lead {
        margin-top: 13px !important;
        font-size: 16px !important;
        line-height: 1.68 !important;
    }

    /* Long-form article readability.
       Patch 13.6: authored Blog interiors remain creative; direct type/spacing
       normalization below targets only --standard content. */
    .blog-content-isolated--standard {
        padding: 12px 18px 20px !important;
        color: #374b5a !important;
        font-size: 16px !important;
        line-height: 1.76 !important;
        overflow-wrap: anywhere;
    }

    .blog-content-isolated--standard > *:first-child {
        margin-top: 0 !important;
    }

    .blog-content-isolated--standard p {
        margin-bottom: 18px !important;
        line-height: 1.76 !important;
    }

    .blog-content-isolated--standard h2 {
        margin: 28px 0 11px !important;
        font-size: 24px !important;
        line-height: 1.35 !important;
    }

    .blog-content-isolated--standard h3 {
        margin: 24px 0 9px !important;
        font-size: 20px !important;
        line-height: 1.42 !important;
    }

    .blog-content-isolated--standard h4 {
        margin: 22px 0 8px !important;
        font-size: 18px !important;
        line-height: 1.45 !important;
    }

    .blog-content-isolated--standard ul,
    .blog-content-isolated--standard ol {
        margin: 0 0 20px 18px !important;
        padding-left: 16px !important;
    }

    .blog-content-isolated--standard li {
        margin-bottom: 8px !important;
        padding-left: 2px !important;
        line-height: 1.68 !important;
    }

    .blog-content-isolated--standard blockquote {
        margin: 22px 0 !important;
        padding: 14px 15px !important;
        border-left-width: 4px !important;
        line-height: 1.65 !important;
    }

    .blog-content-isolated figure {
        width: 100%;
        max-width: 100% !important;
    }

    .blog-content-isolated--standard figure {
        margin: 22px auto !important;
    }

    .blog-content-isolated img {
        max-width: 100% !important;
        height: auto !important;
    }

    .blog-content-isolated--standard img {
        margin: 20px auto !important;
        border-radius: 8px;
    }

    .blog-content-isolated--standard figure img {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .blog-content-isolated--standard figcaption {
        margin-top: 7px !important;
        padding: 0 4px;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }

    /* Embedded media cannot overflow the article column. */
    .blog-content-isolated iframe,
    .blog-content-isolated video,
    .blog-content-isolated embed,
    .blog-content-isolated object {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .blog-content-isolated video {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    .blog-content-isolated--standard video {
        margin: 20px auto;
        border-radius: 10px;
    }

    .blog-content-isolated iframe[src*="youtube.com"],
    .blog-content-isolated iframe[src*="youtube-nocookie.com"],
    .blog-content-isolated iframe[src*="youtu.be"],
    .blog-content-isolated iframe[src*="vimeo.com"] {
        display: block;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        border: 0 !important;
    }

    .blog-content-isolated--standard iframe[src*="youtube.com"],
    .blog-content-isolated--standard iframe[src*="youtube-nocookie.com"],
    .blog-content-isolated--standard iframe[src*="youtu.be"],
    .blog-content-isolated--standard iframe[src*="vimeo.com"] {
        margin: 22px auto !important;
        border-radius: 10px;
        background: #111;
    }

    /* Tables remain intact but are safely scrollable on phones. */
    .blog-content-isolated table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border-collapse: collapse;
        scrollbar-width: thin;
    }

    .blog-content-isolated--standard table {
        margin: 22px 0 !important;
    }

    .blog-content-isolated--standard th,
    .blog-content-isolated--standard td {
        min-width: 110px;
        padding: 10px 11px !important;
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

    .blog-content-isolated pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px;
        border-radius: 9px;
        font-size: 13px;
        line-height: 1.55;
    }

    .blog-content-isolated--standard h2,
    .blog-content-isolated--standard h3,
    .blog-content-isolated--standard h4 {
        scroll-margin-top: 78px;
    }

    .blog-article-footer {
        padding: 0 18px 28px !important;
    }

    .blog-article-footer a {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        font-size: 14px;
        font-weight: 700;
    }

    /* Share buttons already have their own modern CSS; only align its gutter. */
    .blog-share.blog-share-modern {
        margin-left: 18px !important;
        margin-right: 18px !important;
    }
}

@media (max-width: 430px) {
    .blog-page {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }

    .blog-hero {
        padding: 21px 16px !important;
    }

    .blog-card-body {
        padding: 16px 16px 14px !important;
    }

    .blog-card h2 {
        font-size: 17px !important;
    }

    .blog-category-header {
        padding: 20px 16px !important;
    }

    .blog-article-header,
    .blog-featured-image + .blog-article-header,
    .blog-featured-image-top + .blog-article-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .blog-content-isolated--standard {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .blog-share.blog-share-modern {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }

    .blog-article-footer {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}