/* CV Generator - Mobile Responsive Styles */

@media (max-width: 768px) {
    /* Mobile responsive fixes for CV templates */
    .cv-preview {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    .cv-preview .cv-page {
        min-height: 141.4vw !important; /* A4 ratio - preserve on mobile */
        height: auto !important; /* Override fixed height on mobile */
        max-height: none !important;
    }
    
    /* Fix wrapper positioning on mobile - prevent stretching */
    .cv-preview .cv-page > div[style*="position: absolute"] {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
    }

    .preview-section {
        background: #e5e7eb;
        padding: 1rem !important;
    }

    /* SIMPLE TEMPLATE - MOBILE */
    .cv-preview.simple {
        padding: 0 !important;
    }

    .cv-preview.simple .cv-page {
        padding: 1.5rem 1rem !important;
    }

    /* PROFESSIONAL TEMPLATE - MOBILE */
    .cv-preview.professional {
        padding: 0 !important;
    }

    .cv-preview.professional .cv-header {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 1.5rem 1rem !important;
        gap: 1rem !important;
        border-left-width: 3px !important;
    }

    .cv-preview.professional .cv-photo {
        width: 80px !important;
        height: 80px !important;
        border-width: 2px !important;
    }

    .cv-preview.professional .cv-name {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
    }

    .cv-preview.professional .cv-title {
        font-size: 0.875rem !important;
        margin-bottom: 0.75rem !important;
    }

    .cv-preview.professional .cv-contact {
        grid-template-columns: 1fr !important;
        gap: 0.375rem !important;
        font-size: 0.75rem !important;
    }

    .cv-preview.professional .cv-body {
        padding: 1.5rem 1rem !important;
    }

    .cv-preview.professional .cv-section-title {
        font-size: 1rem !important;
        margin: 1.5rem 0 0.75rem 0 !important;
        padding-bottom: 0.375rem !important;
    }

    .cv-preview.professional .cv-item-title {
        font-size: 0.875rem !important;
    }

    .cv-preview.professional .cv-item-description,
    .cv-preview.professional .cv-item-subtitle {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }

    /* CREATIVE TEMPLATE - MOBILE */
    .cv-preview.creative {
        padding: 0 !important;
    }

    .cv-preview.creative .cv-page {
        grid-template-columns: 110px 1fr !important;
    }

    .cv-preview.creative .cv-sidebar {
        padding: 1.25rem 0.75rem !important;
    }

    .cv-preview.creative .cv-photo {
        width: 70px !important;
        height: 70px !important;
        border-width: 3px !important;
        margin-bottom: 1rem !important;
    }

    .cv-preview.creative .cv-main {
        padding: 1.25rem 0.875rem !important;
    }

    .cv-preview.creative .cv-name {
        font-size: 0.8125rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.375rem !important;
    }

    .cv-preview.creative .cv-title {
        font-size: 0.5625rem !important;
        margin-bottom: 0.875rem !important;
        letter-spacing: 0.03em !important;
    }

    .cv-preview.creative .cv-section-title {
        font-size: 0.9375rem !important;
        margin: 1.25rem 0 0.625rem 0 !important;
        padding-bottom: 0.375rem !important;
    }

    .cv-preview.creative .cv-sidebar-title {
        font-size: 0.5625rem !important;
        margin-bottom: 0.625rem !important;
        letter-spacing: 0.03em !important;
    }

    .cv-preview.creative .cv-contact {
        font-size: 0.5625rem !important;
        gap: 0.375rem !important;
        line-height: 1.3 !important;
    }

    .cv-preview.creative .cv-item-title {
        font-size: 0.8125rem !important;
    }

    .cv-preview.creative .cv-item-description,
    .cv-preview.creative .cv-item-subtitle {
        font-size: 0.6875rem !important;
        line-height: 1.4 !important;
    }

    .cv-preview.creative .cv-item {
        margin-bottom: 1rem !important;
    }

    /* BUSINESS TEMPLATE - MOBILE */
    .cv-preview.business {
        padding: 0 !important;
        background: white !important;
    }

    .cv-preview.business .cv-page {
        padding: 1.5rem 1rem !important;
    }

    .cv-preview.business .cv-header {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid #d1d5db !important;
        margin-bottom: 1rem !important;
    }

    .cv-preview.business .cv-photo {
        width: 60px !important;
        height: 78px !important;
        flex-shrink: 0 !important;
    }

    .cv-preview.business .cv-header-text {
        flex: 1 !important;
    }

    .cv-preview.business .cv-name {
        font-size: 1.125rem !important;
        text-align: left !important;
    }

    .cv-preview.business .cv-contact {
        font-size: 0.6875rem !important;
        gap: 0.25rem !important;
        text-align: left !important;
    }

    .cv-preview.business .cv-section-title {
        font-size: 0.75rem !important;
        margin: 1rem 0 0.5rem 0 !important;
    }

    .cv-preview.business .cv-item {
        margin-bottom: 1rem !important;
    }

    .cv-preview.business .cv-item-title {
        font-size: 0.75rem !important;
    }

    .cv-preview.business .cv-item-subtitle,
    .cv-preview.business .cv-item-period,
    .cv-preview.business .cv-item-description {
        font-size: 0.6875rem !important;
    }

    .cv-preview.business table {
        font-size: 0.6875rem !important;
    }

    .cv-preview.business table td {
        padding: 0.25rem 0.5rem !important;
    }
}