/* interface.css */
.ui-layer {
    position: absolute; 
    width: 100%;
    padding: 40px; 
    display: flex;
    justify-content: space-between;
    font-family: var(--sans);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    z-index: 100;
    pointer-events: none; 
}

.ui-layer * { pointer-events: auto; }

.top-nav { top: 0; align-items: flex-start; }

.bottom-nav { 
    bottom: 0; 
    align-items: flex-end; 
    z-index: 110; 
}

/* SVG Icon Controls */

.ui-icon.home {
    color: #888; /* Standard prestige gray */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

/* Ensure the icon follows the anchor's color and keeps your sizing */
.ui-icon.home svg {
    width: 22px;
    height: 22px;
    cursor: pointer;
    stroke: currentColor; /* Inherits the #888 from the parent */
}

/* Hover state for feedback */
.ui-icon.home:hover {
    color: #2c2c2c; /* Darker charcoal on hover */
}

/* Reset browser defaults for visited links */
.ui-icon.home:visited {
    color: #888;
}

.ui-lang a {
    text-decoration: none;
    color: #888888; /* Thin gray */
    transition: color 0.3s ease;
}

.ui-lang a.active-lang {
    color: #333333; /* Dark gray */
    font-weight: bold;
}

.ui-lang a:hover {
    color: #333333;
}

.nav-icons {
    display: flex;
    gap: 10px;
    //background-color: rgba(128, 0, 128, 0.05); /* Subtle Purple */
}

.author-name {
    /* Ensures no gaps between spans */
    display: flex;
    align-items: center;
    letter-spacing: 0.1em;
}

.author-name-link {
    text-decoration: none;
    color: inherit; /* Keeps your gray and charcoal colors */
    transition: opacity 0.3s ease;
}

.author-name-link:hover {
    opacity: 0.7; /* Subtle feedback since we already have the hover in child spans */
}

/* For LUBO and IVANKO */
.name-thin {
    font-weight: 200;    /* Thin weight */
    color: #888888;      /* Medium-light gray */
}

/* For WRAY */
.name-thick {
    font-weight: 800;    /* Extra bold weight */
    color: #333333;      /* Dark gray/charcoal */
}

button {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

button:hover {
    opacity: 0.6;
}

svg.icon {
    width: 24px;
    height: 24px;
    stroke: var(--text-main);
}





/* extra formating classes for title and description fetched form sql  */

/* 1. Italics: Subtle and atmospheric */
.italics {
    font-style: italic;
    opacity: 0.9;
}

/* 2. Strong: Dark, heavy, and authoritative */
.strong {
    font-weight: 800;
    color: #000000;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.1)); /* Extra "ink" weight */
}



/* --- MOBILE OVERRIDES (Screens < 1024px) --- */

@media (max-width: 1024px) {
    .content-stage {
        /* Ensure the main container doesn't add extra trailing space */
        padding-bottom: 0 !important;
    }

    .bottom-nav {
        position: relative; 
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
        box-sizing: border-box;
        
        /* 1. Increased vertical margin for more breathing room */
        margin-top: 60px; 
        
        /* 2. Tightened bottom padding so the page "finishes" right under the nav */
        padding: 40px 40px 15px 40px; /* Top, Right, Bottom, Left */
        
        z-index: 110;
    }
}




/* --- ULTRA-WIDE / 4K INTERFACE OVERRIDES (Screens >= 2560px) --- */
@media (min-width: 2560px) {

    /* Increase overall UI padding for better framing */
    .ui-layer {
        padding: 60px 80px; 
    }

    /* 1. Scale the Home Icon */
    .ui-icon.home svg {
        width: 32px;
        height: 32px;
        stroke-width: 1.8; /* Slightly thicker for high-density pixels */
    }

    /* 2. Scale the Language Switcher */
    .ui-lang {
        font-size: 1.2rem;
    }

    /* 3. Scale the Author Branding */
    .author-name {
        font-size: 1.3rem;
        letter-spacing: 0.15em;
    }

    /* 4. Scale Navigation Icons (Prev, Pause, Next) */
    .nav-icons {
        gap: 25px; /* Wider spacing for larger cursors/monitors */
    }

    .nav-icons svg.icon, 
    #pause-icon {
        width: 34px;
        height: 34px;
        stroke-width: 1.8;
    }

    /* 5. Tooltip/Hover adjustments */
    /* If you're using titles for microstock links, ensure they feel spaced */
    .PhotoBox {
        margin-bottom: 300px; /* Matching the previous logic */
    }
}