/* ===== Body & Global Styles ===== */
:root {
    --header-height: 80px; /* fallback until js/artwork-page.js measures the real header */
}

body {
    background-color: #1d2025;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #b7a96a;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
	text-transform:uppercase;
	 color: #b7a96a;
}

h2{
	font-size: 2.8em;
	font-weight: bold;
}

a{
	color:#b7a96a;
	text-decoration: none;
}

/* Center horizontal band */
.center-band {
    position: fixed;
	margin: 0 32px;
    top: calc(50% + 40px); /* half of header height (80px / 2) */
    left: 0;
    width: 100%;
    height: 66%;
    background-color: #25252a;
    transform: translateY(-50%);
	box-shadow: inset 0 0 0 8px #1d2025;
    z-index: -1; /* keeps it behind your content */
}
.inner-band {
    position: fixed;
    top: calc(50% + 40px); /* half of header height (80px / 2) */
    left: 0;
    width: 100%;
    height: 33%;
    background-color: #2c2930;
    transform: translateY(-50%);
    z-index: -1; /* keeps it behind your content */
}
.divider-band {
    position: fixed;
    top: calc(50% + 40px); /* half of header height (80px / 2) */
    left: 0;
    width: 100%;
    height: 32px;
    background-color: #1d2025;
    transform: translateY(-50%);
    z-index: -1; /* keeps it behind your content */
}

/* ===== Header Styles ===== */

#header-container{
	position: sticky;
    top: 0;
    z-index: 1000;
}

div#header-container{
	background-color: #342e35;
}

/* ===== Navbar Styles ===== */
.navbar {
    margin-bottom: 2rem;
}

/* Optional: make nav links a bit more spaced */
.site-title, .footer-text, .navbar-nav .nav-link {
    margin-left: 1rem;
	 color: #b7a96a;
}
.site-title{
	font-size:2em;
}

i{
font-size:1.6em;
}

/* ===== Footer Styles ===== */
footer {
    background-color: #342e35;
    color: #b7a96a;
    padding: 2rem 0;
    text-align: center;
    font-size: 0.9rem;
}

/* ===== Mobile Footer Stack ===== */
@media (max-width: 768px) {

    .site-footer .row {
        flex-direction: column;
        align-items: flex-start; /* left align everything */
        text-align: left;
    }

    .site-footer .col-md-6 {
        width: 100%;
        text-align: left !important;
    }

    .social-list {
        margin-left: 32px;
    }

    /* Each link becomes a flex row */
    .footer-link {
        display: flex;
        align-items: center;
        gap: 10px;              /* consistent spacing between icon and text */
        margin: 0.4rem 0;
    }

    /* Force all icons to occupy same width */
    .footer-link i {
        width: 20px;            /* aligns all text */
        text-align: center;
        flex-shrink: 0;
    }

    .footer-text {
        margin-bottom: 0.8rem;
    }
}

/* ===== Gallery Masonry Layout ===== */
#gallery {
    column-count: 4;          /* number of columns for desktop */
    column-gap: 1rem;         /* spacing between columns */
    max-width: 1200px;        /* limit gallery width */
    margin: 0 auto;           /* center gallery horizontally */
}

.gallery-item {
    display: inline-block;    /* needed for CSS masonry */
    width: 100%;
    margin-bottom: 1rem;
    text-align: center;       /* center images inside item */
    transition: transform 0.3s ease;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;       /* rounded corners */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Optional hover effect */
.gallery-item img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* ===== Gallery Entrance Animation ===== */
/* Each item is assigned one of these classes at random (in the inline
   script in index.html) so images slide in from random directions on
   every load/refresh. The cubic-bezier front-loads the motion (fast
   start) and eases off toward the end (settles), all within 0.5s. */
.gallery-item.slide-up,
.gallery-item.slide-down,
.gallery-item.slide-left,
.gallery-item.slide-right {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
}

.gallery-item.slide-up    { animation-name: galleryFromUp; }
.gallery-item.slide-down  { animation-name: galleryFromDown; }
.gallery-item.slide-left  { animation-name: galleryFromLeft; }
.gallery-item.slide-right { animation-name: galleryFromRight; }

@keyframes galleryFromUp {
    from { opacity: 0; transform: translateY(-120px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes galleryFromDown {
    from { opacity: 0; transform: translateY(120px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes galleryFromLeft {
    from { opacity: 0; transform: translateX(-120px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes galleryFromRight {
    from { opacity: 0; transform: translateX(120px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item.slide-up,
    .gallery-item.slide-down,
    .gallery-item.slide-left,
    .gallery-item.slide-right {
        animation: none;
    }
}

/* ===== Responsive Breakpoints ===== */
@media (max-width: 1200px) {
    #gallery {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    #gallery {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    #gallery {
        column-count: 2;
    }
}

/*===== Listing Styles =====*/
.title-copy-module{
	background-color: #342e35;
	padding: 32px;
    border-radius: 8px;
}

button#btnOriginal {
    background-color: #d94f4f;
    border: 0;
    color: #1d2025;
}
button#btnPrint {
    background-color: #4a90a4;
    border: 0;
    color: #1d2025;
}
button#btnOriginal:hover, button#btnPrint:hover{
	background-color: #b7a96a;
}
h4.price-original{
	color:#d94f4f;
}
h4.price-print{
	color:#4a90a4;
}	

img#mainArtwork {
    border: solid 16px #342e35;
}

/* ===== Artwork Detail Image Sizing ===== */
/* On md+ screens the image and copy columns sit side by side, so the
   artwork row is sized to fill the space between the header and the
   bottom of the viewport. The row's own py-5 padding gives an equal gap
   above and below (Bootstrap's row/col flex stretch makes each column
   fill that full height automatically), and the image (border included,
   since box-sizing is border-box) is capped to fit inside its column so
   it never pushes the bottom gap out of the viewport. */
@media (min-width: 768px) {
    .artwork-row {
        height: calc(100vh - var(--header-height, 80px));
    }

    .artwork-img-col {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%; /* explicit (not just flex-stretch) so max-height:100% below has a definite value to resolve against */
        min-height: 0; /* let the flex item shrink below the image's natural size */
    }

    .artwork-img-col img#mainArtwork {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        min-height: 0;
        object-fit: contain;
    }
}

/* ===== Back-link (Return to gallery) ===== */
/* On mobile/tablet the artwork copy column sits below the image, which
   pushed this link out of view until scrolling past the price/buttons.
   Below the lg breakpoint it becomes a fixed button pinned near the top
   of the screen (i.e. over the top of the artwork image), so it's
   reachable immediately. --header-height is set by js/artwork-page.js
   once the header include has loaded, since header height differs
   between the single-row desktop layout and the stacked mobile layout. */
@media (max-width: 991.98px) {
    .back-link {
        position: fixed;
        top: calc(var(--header-height, 80px) + 12px);
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 50px;
        margin: 0;
        padding: 0;
        background-color: #342e35;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999; /* below the header's 1000, above the artwork image */
        color: #b7a96a;
    }

    .back-link:hover {
        background-color: #3f3842;
    }
}