/**
 * Responsive Media Queries for All Sections
 */

@media (max-width: 1200px) {
    .alternatives-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .single-hero {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .single-hero-main {
        order: 1;
    }

    .single-hero-sidebar {
        order: 2;
    }

    .single-content-layout {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .single-content-sidebar {
        display: none;
    }

    .sticky-cta-widget {
        position: static;
    }

    .review-summary-card {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .summary-rating {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-4);
        flex-wrap: wrap;
    }

    .big-rating {
        margin-bottom: 0;
    }

    .toc-desktop {
        display: none;
    }

    #similar-tools-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

    /* Mobile Hero Layout */
    .single-hero-header {
        gap: var(--space-4);
    }

    .single-tool-logo {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }

    .single-tool-name {
        font-size: 1.5rem;
        margin-bottom: var(--space-2);
    }

    .single-tool-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .single-rating {
        order: 1;
        gap: 6px;
    }

    .rating-number {
        font-size: 13px;
    }

    .rating-reviews {
        font-size: 11px;
    }

    .single-tool-description {
        font-size: 0.9375rem;
        line-height: 1.5;
        margin-top: 4px;
    }

    .single-badges {
        order: 2;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        width: 100%;
        margin-top: 4px;
    }

    .single-badge,
    .single-save-btn {
        justify-content: center;
        padding: 6px 4px !important;
        font-size: 10px !important;
        height: 32px;
        border-radius: 8px !important;
        width: 100%;
    }

    .single-badge svg,
    .single-save-btn svg {
        width: 12px;
        height: 12px;
    }

    .single-feature-image img {
        max-height: 200px;
    }

    /* Content & Grids */
    .single-tab {
        padding: var(--space-3) var(--space-4);
    }

    .use-cases-grid,
    .pros-cons-layout,
    .alternatives-grid,
    #similar-tools-grid {
        grid-template-columns: 1fr;
    }

    /* Professional Mobile Accordions */
    .content-accordion {
        border-radius: 10px;
        margin-bottom: 8px;
    }

    .accordion-header {
        padding: 12px 14px;
    }

    .accordion-header h2 {
        font-size: 0.95rem;
        /* ~15px - Extremely Clean */
        gap: 10px;
    }

    .accordion-header .section-icon svg {
        width: 16px;
        height: 16px;
    }

    .accordion-body {
        padding: 0 14px 16px;
        font-size: 0.875rem;
    }

    .pricing-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .category-tag {
        font-size: 12px;
        opacity: 0.8;
    }

    .pricing-pill {
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 8px;
    }

    /* Share & Promotion */
    .promote-section {
        padding: 20px 16px;
        margin: var(--space-8) 0;
    }

    .promote-header {
        margin-bottom: var(--space-4);
    }

    .promote-header h3 {
        font-size: 1.1rem;
    }

    .promote-description {
        font-size: 0.875rem;
        margin-bottom: 16px;
    }

    .promote-share-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .share-btn {
        padding: 10px 12px;
        font-size: 0.8125rem;
        justify-content: center;
        gap: 8px;
        border-radius: 10px;
    }

    .share-btn svg {
        width: 18px;
        height: 18px;
    }

    .share-btn span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .share-btn:last-child:nth-child(odd) {
        grid-column: span 2;
    }

    .section-heading {
        font-size: var(--text-h3);
    }

    /* Floating CTA */
    .floating-cta-bar {
        max-width: none;
        width: calc(100% - 24px);
        left: 12px;
        transform: none;
        padding: 10px 14px;
    }

    .floating-cta-bar.visible {
        bottom: 12px;
    }

    .floating-name {
        display: block !important;
        font-size: 13px;
        max-width: 120px;
    }

    .floating-cta-btn {
        padding: 8px 14px;
        font-size: 12px;
    }

    /* Trending Mobile */
    .trending-mobile-section {
        display: block;
    }

    .single-content-sidebar .trending-widget {
        display: none;
    }

    /* Feedback & TOC */
    .feedback-actions {
        flex-direction: column;
    }

    .feedback-btn {
        width: 100%;
        justify-content: center;
    }

    /* Premium Alt Card Mobile */
    .premium-alt-card {
        display: grid;
        grid-template-columns: 60px 1fr;
        grid-template-areas:
            "logo toolname"
            "badges badges"
            "tagline tagline"
            "footer footer";
        padding: 20px;
        gap: 12px 16px;
        align-items: center;
    }

    .alt-content-body,
    .alt-header-top {
        display: contents;
    }

    .alt-logo-container {
        grid-area: logo;
    }

    .alt-logo-box {
        width: 60px;
        height: 60px;
        padding: 8px;
    }

    .alt-tool-name {
        grid-area: toolname;
        font-size: 1.15rem;
    }

    .alt-status-badges {
        grid-area: badges;
        margin: 4px 0 0 0;
    }

    .alt-tagline-text {
        grid-area: tagline;
        font-size: 0.9rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .alt-action-footer {
        grid-area: footer;
    }

    .badge-label {
        display: none;
    }

    .alt-status-badge {
        padding: 4px;
        aspect-ratio: 1 / 1;
        justify-content: center;
    }

    .badge-pricing-pill {
        aspect-ratio: auto;
        padding: 3px 8px;
    }

    .premium-visit-btn {
        width: 100%;
        justify-content: center;
    }

    /* SaaS-App Typography Polish */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h2 {
        letter-spacing: -0.01em;
    }

    p {
        letter-spacing: -0.005em;
    }
}

@media (max-width: 480px) {
    .single-tool-logo {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .single-tool-name {
        font-size: 1.25rem;
    }

    .promote-url-box {
        flex-direction: row;
        gap: 8px;
    }

    .promote-url-box input {
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    .copy-url-btn {
        width: auto;
        padding: 8px 16px;
        font-size: 0.8rem;
        justify-content: center;
    }

    .rating-bar-row {
        grid-template-columns: 50px 1fr 40px;
    }

    .floating-name {
        max-width: 80px;
    }
}

/* ============================================
   ITERATION 4 FIX: VERIFIED BADGE CONTAINMENT
   ============================================ */

.verified-badge {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: var(--weight-semibold);
    color: #10b981;
    white-space: nowrap;
    flex-shrink: 0;
    position: static !important;
    float: none !important;
    margin-left: var(--space-2);
}

.review-rating {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    position: relative;
    overflow: visible;
}

.review-header {
    position: relative;
    overflow: hidden;
}

.review-card {
    position: relative;
    overflow: hidden;
    contain: layout;
}

@media (max-width: 768px) {
    .sponsored-tool-card {
        width: 100%;
        max-width: none;
        margin: var(--space-6) 0;
        padding: var(--space-4);
    }
}