/* =========================================
   1. GLOBAL RESET & SAFETY 
   ========================================= */
* { box-sizing: border-box; }

html, body {
    width: 100%;
    overflow-x: hidden; /* Prevents horizontal scroll */
    margin: 0; 
    padding: 0;
}

img {
    max-width: 100%; /* Never let images overflow their container */
    height: auto;    /* Maintain aspect ratio */
    display: block;  /* Fix bottom gap issues */
}

/* =========================================
   2. GLOBAL TYPOGRAPHY & BUTTONS 
   ========================================= */

/* GROUP A: Block Elements (Headers & Labels) */
/* Keep these full width for proper text alignment */
h1, h2, h3, h4, h5, h6, 
.section-title, 
.form-label {
    white-space: nowrap; 
    width: 100%;         
    display: block;      
}

/* GROUP B: Buttons (CTA, Nav, Generic) */
/* Only be as wide as the text inside */
.cta-button, 
.back-btn, 
button {
    white-space: nowrap;
    width: auto;             /* CRITICAL FIX: Stops stretching */
    display: inline-block;   /* CRITICAL FIX: Sits naturally */
    min-width: 140px;        /* Optional: Ensures buttons aren't too tiny */
}

/* Standardized Nav Buttons (Overrides) */
.nav-controls .back-btn,
.nav-controls .lang-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 20px !important;
    font-size: 0.9rem !important;
    border-radius: 25px !important;
    font-weight: bold !important;
    min-width: auto !important;
    line-height: 1 !important;
}

/* =========================================
   3. GLOBAL VIDEO/IMAGE SHAPE (Scalable)
   ========================================= */
.center-image {
    display: block;
    overflow: hidden;
    object-fit: cover;
    
    /* Converted px to vw for consistent scaling */
    /* Approx ratio: 100px->8vw, 20px->1.5vw, 130px->10vw */
    border-radius: 8vw 1.5vw 10vw 1.5vw; 
}

/* =========================================
   4. MEDIA BREAKPOINTS (The Overrides)
   ========================================= */

/* Large Monitors */
@media (min-width: 1200px) { 
    .center-image {
        border-radius: 8vw 1.5vw 12vw 1.5vw; 
    }
}

/* Tablets */
@media (max-width: 1023px) { 
    .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
    /* Increase crop for Tablets */
    .center-image {
        border-radius: 8vw 1.5vw 14vw 1.5vw; 
    }
}

/* Large Phones */
@media (max-width: 767px)  { 
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    /* Fix Global Text Overflow */
    h1, h2, h3, h4, h5, h6, 
    .section-title, 
    .form-label,
    .cta-button, 
    .back-btn, 
    button { 
        white-space: normal !important; 
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* Small Phones (The "Shrink" Logic) */
@media (max-width: 480px)  { 
    
    /* 1. Shrink Headers to fit screen */
    h1 { font-size: 7.5vw; } 
    h2 { font-size: 6.5vw; }
    h3 { font-size: 5.5vw; }
    .section-title { font-size: 6vw; }
    
    /* 2. Shrink Buttons (General) */
    .cta-button { font-size: 4.5vw; } 
    
    /* 3. Mobile Container Padding */
    .container {
        padding-left: 15px !important; 
        padding-right: 15px !important;
    }

    /* 4. Increase Video Crop (Updated to 20vw per request) */
    .center-image {
        border-radius: 8vw 1.5vw 20vw 1.5vw;
    }
    
    /* 5. Text Safety */
    p, .bio-text { 
        font-size: 0.95rem;
        white-space: normal; 
        word-break: break-word;
    }

    /* 6. Utility: Manual Break */
    .manual-break {
        white-space: normal !important;
        font-size: 2rem !important; 
        line-height: 1.3 !important;
        word-wrap: break-word;
    }

    /* 7. Top Nav Buttons - Compact Size (~25% Smaller) */
    .nav-controls .back-btn,
    .nav-controls .lang-btn {
        height: 30px !important;       /* Reduced from 40px */
        padding: 0 10px !important;    /* Reduced from 20px */
        font-size: 0.7rem !important;  /* Reduced from 0.9rem */
        border-radius: 15px !important; /* Scaled radius */
    }
}