/* Add Ionic Font Declaration */
@font-face {
    font-family: 'Ionic';
    src: url('../fonts/ionic_regular.woff2') format('woff2'),
         url('../fonts/ionic_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Add this to improve font loading */
}

@font-face {
    font-family: 'Ionic';
    src: url('../fonts/ionic_italic.woff2') format('woff2'),
         url('../fonts/ionic_italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap; /* Add this to improve font loading */
}

/* Keep the Brown font declarations for the footer */
@font-face {
    font-family: 'Brown-Bold';
    src: url('../fonts/Brown-Bold.woff2') format('woff2'),
         url('../fonts/Brown-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Brown-Regular';
    src: url('../fonts/Brown-Regular.woff2') format('woff2'),
         url('../fonts/Brown-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* General Page Layout */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100vw;
    box-sizing: border-box;
    background-image: url('../img/brf.png');
    background-repeat: no-repeat;
    background-position: left 20px bottom 20px; /* Add margin from edges */
    background-size: 220px auto; /* Desktop/tablet size */
    background-attachment: fixed; /* Stick to viewport corner */
}

.foundation-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    font-family: 'Ionic', serif;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-right: 20px;
    padding-left: 20px;
}


/* Main Gallery Section */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 250px); /* Fixed columns so grid can center */
    padding: 20px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    gap: 10px;
}

/* Individual Entry Styling */
.entry {
    height: 80px;
    width: 150px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: flex-start; /* Keep content at top/left */
    align-items: flex-start;     /* Keep content at top/left */
    text-align: left;
    font-family: 'Ionic', serif;
    margin: 0;                   /* Avoid centering the grid item */
    justify-self: start;         /* Align grid item to the left */
}

/* Entry Link Styling */
.entry a {
    text-decoration: none; /* Remove default underline */
    color: black; /* Set the default text color */
    padding: 10px;
    transition: font-style 0.2s ease; /* Change transition to font-style */
    text-align: left; /* Keep left alignment */
}

.entry a:hover {
    text-decoration: none; /* Remove underline effect */
    font-style: italic; /* Add italic style on hover */
    background: none; /* Remove background on hover */
}

/* Description Styling */
.entry p {
    font-size: 1.5rem;
    margin: 0;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    font-family: 'Ionic', serif;
    line-height: 1.2;
}

/* Footer Navigation */
footer {
    display: flex;
    justify-content: space-between; /* Space between left and right items */
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    position: fixed;
    bottom: 0;
    right: 0;
    font-family: 'Brown-Regular', sans-serif; /* Revert to Brown font */
    background: transparent; /* Make footer transparent */
    background-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 2;
}

footer a {
    text-decoration: none;
    color: inherit;
    font-family: 'Brown-Regular', sans-serif; /* Revert to Brown font */
}

/* Specific styling for About link */
footer a:last-child {
    margin-left: auto; /* Push About link to the right */
}

/* Mobile Responsive Layout */
@media (max-width: 768px) {
    body {
        overflow: auto;
        width: 100%;
        height: auto;
        touch-action: pan-y; /* Changed from none to pan-y for better scrolling */
        -webkit-overflow-scrolling: touch; /* Added for smooth iOS scrolling */
        /* Use a fixed pseudo-element for sticky image on iOS */
        background-image: none; /* Avoid duplicate with pseudo-element */
    }

    body::after {
        content: "";
        position: fixed;
        top: 20px;
        left: 20px;
        width: 140px;
        height: 200px; /* ample to show full image height */
        background-image: url('../img/brf.png');
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 140px auto; /* Mobile size */
        pointer-events: none; /* Don’t block taps */
        z-index: 5; /* Above gallery, below fixed header/footer */
    }

    .foundation-container {
        overflow: auto;
        height: auto;
        touch-action: pan-y;
        padding-top: 80px; /* Add padding for header */
        -webkit-overflow-scrolling: touch;
    }

    .gallery {
        grid-template-columns: 1fr;
        margin-bottom: 20px; /* Reduced from 120px */
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        position: relative;
        z-index: 1;
        padding: 20px;
        gap: 5px; /* Reduced gap between entries */
    }

    .entry {
        width: 80%;
        height: auto;
        touch-action: pan-y;
        min-height: 120px;
        display: flex;
        flex-direction: column;
        position: relative;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
    }

    .entry h2 {
        font-size: 1.2rem;
        text-align: center !important; /* Added !important to override any other styles */
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .entry a {
        text-align: center;
        padding: 10px 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Override any existing h2 styles for mobile */
    .entry a:hover h2 {
        text-align: center !important;
        text-transform: none;
        font-style: italic;
    }

    /* Keep exhibition title and date centered */
    .group-section h2,
    .exhibition-date {
        text-align: center;
    }

    /* Transform footer into header on mobile */
    footer {
        top: 0;
        bottom: auto;
        padding: 20px;
        background: white;
        z-index: 10;
        position: fixed;
    }
}

/* Center Group Title */
.group-section h2 {
    text-align: center; /* Center the title */
    margin: 20px 0;    /* Add some margin for spacing */
    font-family: 'Ionic', serif;
    font-weight: normal; /* Ensure it's not bold */
    font-size: 0.9rem; /* Smaller font size for group title */
}
/* Individual Entry Styling */
.entry h2 {
    font-size: 1.2rem;
    margin: 0 0 5px 0;
    font-weight: normal;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    font-family: 'Ionic', serif;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: left;
    transition: text-transform 0.2s ease, font-style 0s; /* Remove transition delay for font-style */
}

/* Entry Link Styling */
.entry a {
    text-decoration: none;
    color: black;
    padding: 10px;
    transition: font-style 0s; /* Remove transition delay for font-style */
    text-align: left;
}

.entry a:hover h2 {
    text-transform: none;
    font-style: italic;
}

.exhibition-date {
    font-size: 0.9rem; /* Smaller than the title */
    margin: 5px 0 20px 0; /* Add margin bottom to space from gallery */
    font-family: 'Ionic', serif;
    text-transform: none;
    line-height: 1.2;
    text-align: center; /* Center align the text */
    width: 100%; /* Ensure the element takes full width */
    display: block; /* Make it a block element */
}

.exhibition-bio {
    font-size: 0.9rem; /* Same size as exhibition date */
    margin: -15px 0 20px 0; /* Negative top margin to reduce space after date */
    font-family: 'Ionic', serif;
    text-transform: none;
    line-height: 1.2;
    text-align: left; /* Change to left alignment */
    width: 100%; /* Ensure the element takes full width */
    display: block; /* Make it a block element */
    max-width: 600px; /* Limit width for better readability */
    margin-left: auto;
    margin-right: auto;
    padding: 0 10px; /* Add some padding to align with other content */
}

/* Update hover effect to include the date */
.entry a:hover .exhibition-date {
    font-style: italic;
}