/* Responsive Content Styles - Ensures all content areas are mobile-friendly */

/* Base responsive container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Responsive typography */
h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.4;
}

p {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.6;
}

/* Responsive grids */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

/* Responsive cards */
.card-responsive {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive tables */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table thead {
        display: none;
    }
    
    table tbody,
    table tr,
    table td {
        display: block;
        width: 100%;
    }
    
    table tr {
        margin-bottom: 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 12px;
    }
    
    table td {
        border: none;
        padding: 8px 0;
        text-align: left;
    }
    
    table td::before {
        content: attr(data-label) ": ";
        font-weight: 700;
        display: inline-block;
        width: 120px;
    }
}

/* Responsive forms */
@media (max-width: 768px) {
    form {
        width: 100%;
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    textarea,
    select {
        width: 100%;
        box-sizing: border-box;
        /* COTGI px→rem original: font-size: 16px; */
font-size: 1rem; /* Prevents zoom on iOS */
    }
    
    button[type="submit"],
    .btn {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Responsive buttons */
@media (max-width: 480px) {
    .btn {
        padding: 14px 20px;
        /* COTGI px→rem original: font-size: 16px; */
font-size: 1rem;
    }
}

/* Responsive spacing */
@media (max-width: 768px) {
    .section {
        padding: 40px 0;
    }
    
    .section-header {
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .section {
        padding: 32px 0;
    }
    
    .section-header {
        margin-bottom: 32px;
    }
}

/* Prevent horizontal scroll */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Responsive video/iframe */
iframe,
video {
    max-width: 100%;
    height: auto;
}

/* Responsive charts and visual components */
@media (max-width: 768px) {
    #metricsShowcase,
    #companyMetricsShowcase,
    #contactMetricsShowcase,
    #comparisonMetricsShowcase,
    #scanMetricsShowcase,
    #dashboardMetricsShowcase,
    #reviewBuilderMetricsShowcase,
    #privacyMetricsShowcase,
    #termsMetricsShowcase {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    #metricsShowcase,
    #companyMetricsShowcase,
    #contactMetricsShowcase,
    #comparisonMetricsShowcase,
    #scanMetricsShowcase,
    #dashboardMetricsShowcase,
    #reviewBuilderMetricsShowcase,
    #privacyMetricsShowcase,
    #termsMetricsShowcase {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Touch-friendly targets */
@media (max-width: 768px) {
    a, button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Responsive modals */
@media (max-width: 768px) {
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 20px auto !important;
        padding: 24px !important;
    }
}

/* Responsive tables in comparison page */
@media (max-width: 768px) {
    .comparison-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 800px;
    }
}

/* Responsive feature grids */
@media (max-width: 768px) {
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Responsive pricing grids */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Responsive contact cards */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Responsive stats grids */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Responsive advantages grid */
@media (max-width: 768px) {
    .advantages-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* Ensure text doesn't overflow */
* {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Responsive hero sections */
@media (max-width: 768px) {
    .hero {
        padding: 80px 20px 60px !important;
    }
    
    .hero h1 {
        font-size: clamp(2rem, 8vw, 2.5rem) !important;
    }
    
    .hero p {
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
    }
}

/* Responsive CTA sections */
@media (max-width: 768px) {
    .cta-section {
        padding: 32px 20px !important;
    }
    
    .cta-section h2 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
    }
}

/* Responsive wizard cards */
@media (max-width: 768px) {
    .wizard-card {
        padding: 24px 20px !important;
    }
}

@media (max-width: 480px) {
    .wizard-card {
        padding: 20px 16px !important;
    }
}

/* Responsive form containers */
@media (max-width: 768px) {
    .form-container {
        padding: 32px 20px !important;
    }
}

@media (max-width: 480px) {
    .form-container {
        padding: 24px 16px !important;
    }
}

/* Responsive scan form */
@media (max-width: 768px) {
    .scan-form {
        padding: 24px 20px !important;
    }
}

@media (max-width: 480px) {
    .scan-form {
        padding: 20px 16px !important;
    }
}

/* Responsive dashboard */
@media (max-width: 768px) {
    .dashboard-container {
        padding: 24px 16px !important;
    }
    
    .scan-results-container {
        padding: 24px 20px !important;
    }
}

/* Responsive review builder */
@media (max-width: 768px) {
    .platform-item {
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .platform-item input {
        width: 100% !important;
    }
}

/* Ensure all content is accessible on mobile */
@media (max-width: 768px) {
    body {
        /* COTGI px→rem original: font-size: 16px; */
font-size: 1rem; /* Prevents zoom on iOS */
    }
    
    /* Ensure proper spacing */
    * + * {
        margin-top: 0;
    }
}