/* ==================== RESPONSIVE SVG STYLES ==================== */
/* All SVG images must have responsive dimensions to ensure optimal display across devices */

/* Logo SVGs - Navigation & Footer */
/* Mobile (default) */
.navbar-brand img[src*=".svg"],
footer img[src*="setma-logo.svg"] {
    width: auto;
    height: 28px;
    max-width: 100%;
}

/* Tablet+ (769px+) */
@media (min-width: 769px) {
    .navbar-brand img[src*=".svg"],
    footer img[src*="setma-logo.svg"] {
        height: 32px;
    }
}

/* App Store Badge SVGs */
.store-badge[src*=".svg"] {
    width: 100%;
    max-width: 140px;
    height: auto;
    display: block;
}

footer .store-badge[src*=".svg"] {
    max-width: 110px;
}

/* Icon SVGs in Icon Grid */
/* Mobile (default) */
.icon-grid img[src*=".svg"] {
    width: 40px;
    height: 40px;
    max-width: 40px;
    flex-shrink: 0;
    object-fit: contain;
}

.store-badge[src*=".svg"] {
    max-width: 120px;
}

/* Tablet+ (769px+) */
@media (min-width: 769px) {
    .icon-grid img[src*=".svg"] {
        width: 48px;
        height: 48px;
        max-width: 48px;
    }

    .store-badge[src*=".svg"] {
        max-width: 140px;
    }
}

/* Placeholder & Feature SVGs */
img[src*="placeholder.svg"] {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}

/* Hero Background SVGs */
img[src*="hero-background.svg"] {
    width: 100%;
    height: auto;
    display: block;
}

/* Buy Me a Coffee Button SVG */
.bmc-btn svg {
    height: 20px;
    width: 20px;
    flex-shrink: 0;
}

/* Sticky Banner Icon SVG */
/* Mobile (default) */
.sticky-download-banner img[src*=".svg"] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 8px;
}

/* Tablet+ (769px+) */
@media (min-width: 769px) {
    .sticky-download-banner img[src*=".svg"] {
        width: 64px;
        height: 64px;
    }
}

/* General SVG Fallback - applies to any SVG not covered above */
img[src$=".svg"] {
    max-width: 100%;
    height: auto;
}
