import re
import glob

css_to_add = """
/* Responsive classes for Mission Section Images */
.mission-church-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 58%;
    height: 90%;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.mission-priest-container {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

@media (max-width: 991px) {
    .mission-church-img {
        width: 100% !important;
        height: 100% !important;
    }
    .mission-priest-container {
        width: 70% !important;
    }
}
"""

# add css
with open('css/styles.css', 'a', encoding='utf-8') as f:
    f.write(css_to_add)

# update html
for file in glob.glob('*.html'):
    with open(file, 'r', encoding='utf-8') as f:
        content = f.read()
    
    # church image inline style replacement
    content = content.replace(
        'class="about-img-container" style="position: absolute; left: 0; top: 0; width: 58%; height: 90%; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.1);"',
        'class="about-img-container mission-church-img"'
    )
    
    # priest container inline style replacement
    content = content.replace(
        'style="position: absolute; right: 0; bottom: 0; width: 60%; height: 100%; display: flex; align-items: flex-end; justify-content: center;"',
        'class="mission-priest-container"'
    )
    
    with open(file, 'w', encoding='utf-8') as f:
        f.write(content)

print("Updated HTML and CSS for mission section images.")