/* === THEME: THE FORMAL EXHIBITION === */

/* The background texture for the whole page */
body {
    font-family: 'Lora', Georgia, 'Times New Roman', Times, serif; 
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #FBF8F1; /* Fallback color */
    background-image: url('https://www.transparenttextures.com/patterns/paper-fibers.png');
    background-attachment: fixed;
}

/* --- The Main 'Gallery Wall' Frame --- */
main {
    max-width: 800px;
    margin: 40px auto; /* Increased margin to let it 'breathe' */
    padding: 40px; /* Space inside the frame */
    
    background-color: #5D1A2A; /* A rich, deep burgundy */
    border: 3px solid #C5A578; /* A warm, gold-toned border */
    box-shadow: 5px 5px 20px rgba(0,0,0,0.3); /* A more pronounced shadow */
    
    color: #DCDCDC; /* The text inside this dark panel needs to be light */
}

/* The header now sits above the main panel */
header {
    max-width: 800px;
    margin: 40px auto 20px auto;
    padding: 0 20px;
    text-align: center;
}

header h1, header h2, header h3 {
    font-family: 'Playfair Display', serif;
    color: #5D1A2A; /* Match the main panel color for consistency */
}

/* --- Styling INSIDE the burgundy panel --- */
main h2, main h3 {
    font-family: 'Playfair Display', serif;
    color: #C5A578; /* Use the gold accent for headlines inside the panel */
    text-align: center;
}

/* --- Section Separators --- */
main div {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid rgba(197, 165, 120, 0.4); /* A subtle version of our gold color */
}

/* First div doesn't need a separator above it */
main div:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}


/* Images still have their own frame */
img {
    max-width: 100%;
    display: block;
    margin: 20px auto;
    border: 1px solid #ddd;
    padding: 5px;
    background-color: white; 
}

/* The footer sits below the main panel */
footer {
    max-width: 800px;
    margin: 20px auto 40px auto;
    padding: 0 20px;
    text-align: center;
    color: #666; /* A soft grey for the footer text */
}

/* === STYLES FOR PHOTO DETAIL PAGES === */

/* Style for the 'Back to Gallery' link */
.back-link {
    display: inline-block;
    margin: 20px 0;
    padding: 10px 20px;
    background-color: #C5A578; /* Gold accent color */
    color: #5D1A2A; /* Burgundy text color */
    text-decoration: none;
    font-family: 'Playfair Display', serif;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.back-link:hover {
    background-color: #DCDCDC; /* Light color on hover */
}

/* A more elegant separator */
.detail-separator {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(197, 165, 120, 0), rgba(197, 165, 120, 0.75), rgba(197, 165, 120, 0));
    margin: 40px 0;
}

/* Styling for the details list */
.details-list {
    list-style: none;
    padding-left: 0;
}
.details-list li {
    padding: 5px 0;
    border-bottom: 1px solid rgba(197, 165, 120, 0.2); /* Faint gold line */
}
.details-list li strong {
    color: #C5A578; /* Gold accent for the labels */
}

/* Styling for the 'Related Photos' section */
.related-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.related-photo-item {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(197, 165, 120, 0.4);
    padding: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-photo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.related-photo-item a {
    text-decoration: none;
    color: #DCDCDC;
    font-family: 'Lora', serif;
}

.related-photo-item img {
    max-width: 100%;
    height: auto;
    border: none;
    padding: 0;
    background-color: transparent;
}

.related-photo-item p {
    margin: 10px 0 0 0;
    font-size: 0.9em;
}

/* === FIX FOR CLICKABLE GALLERY LINKS === */

/* This removes the default link underline and color for the whole block */
.gallery-item-link {
    text-decoration: none;
    color: inherit;
}

/* This specifically targets the H3 inside our new link */
.gallery-item-link h3 {
    color: #C5A578; /* Use the existing gold accent color */
    transition: color 0.3s ease;
}

/* When you hover over the link block, the H3 title changes color */
.gallery-item-link:hover h3 {
    color: #ffffff; /* Make it brighter on hover */
}