/* Responsive Line Breaks CSS */
/* This file handles responsive behavior for line breaks across the site */

/* Desktop-only line break class */
.desktop-br {
    display: inline;
}

/* Hide desktop line breaks on mobile devices */
@media (max-width: 768px) {
    .desktop-br {
        display: none;
    }
}

/* Alternative approach using CSS content for semantic breaks */
.responsive-break::after {
    content: "";
    display: block;
}

@media (max-width: 768px) {
    .responsive-break::after {
        display: none;
    }
}

/* Wrapper for better text flow on mobile */
.responsive-text {
    white-space: normal;
}

@media (min-width: 769px) {
    .responsive-text br.desktop-only {
        display: inline;
    }
}

@media (max-width: 768px) {
    .responsive-text br.desktop-only {
        display: none;
    }
    
    /* Ensure proper text wrapping on mobile */
    .responsive-text {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
    }
}

/* Specific adjustments for hero sections */
@media (max-width: 768px) {
    /* Remove line breaks in hero titles on mobile */
    .hero-content br,
    h1 br,
    .text-6xl br,
    .text-7xl br,
    .text-8xl br {
        display: none;
    }
    
    /* Ensure proper spacing without breaks */
    .hero-content span,
    h1 span {
        display: inline-block;
        margin-right: 0.25em;
    }
}

/* Gallery notice responsive breaks */
@media (max-width: 768px) {
    .ugc-notice br {
        display: none;
    }
}

/* Blog post content responsive breaks */
@media (max-width: 768px) {
    .blog-content br,
    .chat-bubble br {
        display: none;
    }
}

/* Success message responsive breaks */
@media (max-width: 768px) {
    .success-submessage br {
        display: none;
    }
}