/* Basic Reset & Setup */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}
body.main-view-active { padding-bottom: 50px; }
body.grid-view-active { padding-bottom: 0; }


/* Header & Toggle Button */
header { position: fixed; top: 0; right: 0; padding: 20px 25px; z-index: 1000; }
#toggle-view-btn {
    background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0,0,0,0.1);
    padding: 10px 12px; cursor: pointer; border-radius: 5px; font-size: 1.3em;
    color: #333; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
#toggle-view-btn:hover { background: rgba(0,0,0,0.7); color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

/* Main Content Area */
main { flex-grow: 1; width: 100%; display: flex; }
.view { display: none; width: 100%; }
.active-view { display: flex; }

/* Main View (Homepage) */
#main-view { height: 100%; align-items: stretch; }
.main-content-wrapper { display: flex; width: 100%; height: 100%; }
.name-section {
    flex-basis: 45%; display: flex; flex-direction: column; justify-content: center;
    align-items: flex-end; padding-right: 20px; padding-left: 5%; padding-top: 70px;
    height: 100%; box-sizing: border-box; position: relative;
}
.name-block { text-align: right; margin-top: 270px; }
#model-name-main {
    font-size: clamp(2.8em, 7vw, 4.8em); color: #22272F;
    font-weight: 500; line-height: 1.1; margin: 0;
}
.model-subtitle { font-size: clamp(1em, 2.2vw, 1.4em); color: #22272F; font-weight: 400; margin-top: 8px; }
.featured-image-container { flex-basis: 55%; height: 100%; position: relative; background-color: #f0f0f0; }
#featured-image { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.main-image-measurements {
    position: absolute; bottom: 20px; right: 20px; color: #505050;
    font-size: clamp(0.75em, 1.8vw, 0.9em); font-family: Arial, sans-serif;
    padding: 2px 5px; border-radius: 3px; z-index: 5; display: none;
}

/* Grid View */
#grid-view {
    flex-direction: column; padding: 80px 20px 0 20px; background-color: #fff;
}
.image-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    max-width: 100%; margin: 0 auto; background-color: #e0e0e0; border: 1px solid #e0e0e0;
}
.image-grid img {
    width: 100%; height: auto; object-fit: cover; aspect-ratio: 3 / 2;
    cursor: pointer; background-color: #f8f8f8;
}

/* Single Image View (Modal) */
.modal {
    display: none; position: fixed; z-index: 1001; left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.92);
    align-items: center; justify-content: center;
}
.modal-content {
    margin: auto; display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 20px; text-align: center;
    position: relative; max-width: 90vw; max-height: 90vh;
}
#modal-image {
    max-width: 100%; max-height: calc(90vh - 100px); display: block;
    margin-bottom: 10px; border-radius: 5px; object-fit: contain;
}
#modal-measurements { color: #f1f1f1; margin-bottom: 15px; font-size: 0.95em; }
#download-btn {
    background-color: #5cb85c; color: white; padding: 10px 20px;
    text-decoration: none; border-radius: 5px; transition: background-color 0.3s;
}
#download-btn:hover { background-color: #4cae4c; }
.close-modal-btn {
    position: absolute; top: 15px; right: 35px; color: #f1f1f1;
    font-size: 40px; font-weight: bold; cursor: pointer; transition: color 0.3s;
}
.nav-arrow { /* Desktop default styles */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255,255,255,0.2);
    color: white;
    border: none;
    font-size: 2em;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    user-select: none;
    transition: background-color 0.3s;
    z-index: 10; /* Ensure arrows are above the image content */
}
.nav-arrow:hover { background-color: rgba(255,255,255,0.4); }
.prev-arrow { left: 20px; } /* Desktop default */
.next-arrow { right: 20px; } /* Desktop default */


/* --- Footer Styling --- */
footer { color: #333; text-align: center; z-index: 999; }
body.main-view-active footer {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background-color: transparent; padding: 0;
}
body.main-view-active #toggle-info-btn {
    display: inline-block; background: #f8f8f8; border: 1px solid #ddd;
    border-bottom: none; padding: 8px 18px; cursor: pointer;
    border-radius: 6px 6px 0 0; font-size: 0.9em; color: #444;
    transition: background-color 0.3s;
}
body.main-view-active #toggle-info-btn:hover { background: #eee; }
body.main-view-active .bio-contact-container {
    display: flex; flex-direction: row; justify-content: space-around;
    align-items: flex-start; gap: 20px; max-width: 850px; margin: 0 auto;
    background-color: #f8f8f8; border: 1px solid #ddd; border-radius: 0 0 6px 6px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05); max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out, opacity 0.3s ease-out;
    opacity: 0; padding: 0 20px; text-align: left;
}
body.main-view-active footer.info-open .bio-contact-container {
    max-height: 400px; opacity: 1; padding: 20px;
}
body.main-view-active .bio { flex: 1; max-width: 55%; }
body.main-view-active .contact { flex: 1; max-width: 40%; }
body.main-view-active .contact-title-main-view { display: block; margin-bottom: 10px; font-size: 1.1em;}
body.main-view-active .contact-text-line { display: none; }

body.grid-view-active footer {
    position: static; padding: 50px 20px 40px; background-color: #fff;
    text-align: center; width: 100%;
}
body.grid-view-active #toggle-info-btn { display: none; }
body.grid-view-active .bio-contact-container {
    max-height: none; opacity: 1; padding: 0; display: block; text-align: center;
    max-width: 680px; margin: 0 auto; background-color: transparent; border: none; box-shadow: none;
}
body.grid-view-active .bio p {
    font-size: 0.9em; line-height: 1.7; color: #333; margin-bottom: 30px;
}
body.grid-view-active .bio p strong { color: #000; font-weight: 600;}
body.grid-view-active .contact { font-size: 0.85em; line-height: 1.8; color: #555; }
body.grid-view-active .contact-title-main-view { display: none; }
body.grid-view-active .contact a { color: #555; text-decoration: none; }
body.grid-view-active .contact a:hover { text-decoration: underline; }
body.grid-view-active .contact p { margin-bottom: 2px; }
body.grid-view-active .contact-text-line { display: block; margin-top: 5px; }

.bio p { font-size: 0.9em; }
.contact h3 { margin-bottom: 5px; font-size: 1.05em; }
.contact p { margin-bottom: 3px; font-size: 0.9em; }
.contact a { color: #0066cc; text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.contact p a[href*="instagram.com"] i { display: none; }


/* --- Mobile Specific Styles (max-width: 768px) --- */
@media (max-width: 768px) {
    body.main-view-active { padding-bottom: 45px; }
    #main-view { height: auto; min-height: calc(100vh - 60px - 45px); }
    .main-content-wrapper { flex-direction: column; align-items: center; }
    .name-section {
        flex-basis: auto; width: 100%; align-items: center;
        padding: 80px 20px 20px 20px; height: auto;
    }
    .name-block { text-align: center; margin-top: 0; }
    #model-name-main { font-size: 2.2em; } .model-subtitle { font-size: 1em; }
    .featured-image-container { flex-basis: auto; width: 100%; height: auto; max-height: 60vh; }
    .main-image-measurements {
        font-size: 0.7em; bottom: 10px; right: 10px; padding: 2px 5px;
        color: #fff; background-color: rgba(0,0,0,0.4);
    }

    #grid-view { padding: 70px 10px 0 10px; }
    .image-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }

    /* Modal Styles for Mobile */
    #modal-image { max-height: calc(90vh - 80px); }
    .close-modal-btn { top: 10px; right: 15px; font-size: 30px; }

    .nav-arrow { /* Mobile specific adjustments for nav arrows */
        font-size: 1.8em;   /* Slightly smaller font */
        padding: 8px 12px; /* Adjust padding */
        /* Position them further from the edges of the viewport, not the image itself */
        background-color: rgba(0,0,0,0.3); /* Slightly more solid background for visibility */
    }
    .prev-arrow {
        left: 5px; /* Further from left edge of viewport */
    }
    .next-arrow {
        right: 5px; /* Further from right edge of viewport */
    }
    /* If the arrows are still too close to a very wide image,
       you might need to adjust the .modal-content padding or image max-width slightly on mobile
       to give the arrows space *outside* the image, but within the modal overlay.
       The current setup positions arrows relative to the modal viewport.
    */


    body.main-view-active #toggle-info-btn { padding: 10px 15px; font-size: 0.95em; }
    body.main-view-active .bio-contact-container {
        flex-direction: column; align-items: center; text-align: center; gap: 15px;
    }
    body.main-view-active footer.info-open .bio-contact-container { padding: 15px; }
    body.main-view-active .bio, body.main-view-active .contact { max-width: 90%; text-align: center;}

    body.grid-view-active footer { padding: 30px 15px 25px; }
    body.grid-view-active .bio-contact-container { max-width: 100%; }
    body.grid-view-active .bio p { font-size: 0.85em; line-height: 1.6; margin-bottom: 20px;}
    body.grid-view-active .contact { font-size: 0.8em; line-height: 1.7; }
}

/* --- Desktop HOVER for Main View Footer --- */
@media (min-width: 769px) {
    body.main-view-active #toggle-info-btn:hover + .bio-contact-container,
    body.main-view-active .bio-contact-container:hover {
        max-height: 400px; opacity: 1; padding: 20px;
    }
    body.main-view-active #toggle-info-btn i { display: none !important; }
}