/* Responsive Design for Compact Business Card Layout */
/* Mobile-first approach with media queries */

/* Base mobile styles - already compact in main CSS */

/* Tablet Layout - slightly larger */
@media (max-width: 768px) {
    .card-content {
        padding: 1rem;
        max-width: 90%;
    }

    .main-logo {
        max-width: 140px;
    }

    .company-logo {
        max-width: 220px;
    }

    .contact-info h1 {
        font-size: 1.4rem;
    }

    .address {
        font-size: 1rem;
    }

    .phone, .fax, .email, .mobile, .website {
        font-size: 0.95rem;
    }
}

/* Small mobile devices - most compact */
@media (max-width: 480px) {
    .card-content {
        padding: 0.8rem;
    }

    .business-card {
        padding: 0.5rem;
    }

    .main-logo {
        max-width: 120px;
    }

    .company-logo {
        max-width: 200px;
    }

    .contact-info h1 {
        font-size: 1.2rem;
    }

    .address {
        font-size: 0.95rem;
    }

    .phone, .fax, .email, .mobile, .website {
        font-size: 0.9rem;
    }
}

/* Large Desktop - keep card size reasonable */
@media (min-width: 1200px) {
    .card-content {
        max-width: 550px;
    }
}

/* Print Styles - make it look like a real business card */
@media print {
    body {
        background-color: white;
        color: black;
    }

    .business-card {
        min-height: auto;
        padding: 0;
    }

    .card-content {
        box-shadow: none;
        border: none;
        padding: 0.5rem;
        page-break-inside: avoid;
        max-width: 100%;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    .no-print {
        display: none;
    }
}