/* pages.css
   Page-specific overrides only.
   Keep base theme and modules untouched.
*/

/* =========================================
ART SLIDER CARD (Juxtapose)
========================================= */

.art-card{
border:1px dotted rgba(79,56,0,.55);
background:var(--bg);
border-radius:var(--radius);
padding:var(--card-pad);
width:100%;
}

.art-card .juxtapose{
width:100%;
height:auto;
margin:0;
}

/* Optional: add a little top separation if needed */
@media (max-width:699px){
.art-card{
margin-top:var(--gap-2);
}
}

/* important margin correction */
.art-frame{
box-sizing:border-box;
width:100%;
padding:0 0 0.5rem 0.2rem;
}
.art-frame .juxtapose{
width:100% !important;
max-width:100%;
padding:0.8rem 0 0 0.5rem;
}


/* Equal-height cards in the two-up layout */
.art-card{
width:100%;
height:100%;
display:flex;
flex-direction:column;
}

/* Juxtapose: force the widget to respect the card width */
.art-frame,.art-frame .juxtapose{ width:100% !important; max-width:100%; }
.juxtapose{ overflow:hidden; }


.showcase{
width:100%;
max-width:var(--max);
margin:0 auto;
padding:var(--section-pad-y) var(--gutter);
}

.showcase > h2,
.showcase > h4{
  margin:0 0 var(--gap-2) 0;
}



.gallery-container{
display:grid;
grid-template-columns:repeat(4,1fr);

/* control independently */
column-gap: var(--gap-1);   /* space between images */
row-gap: var(--gap-1);      /* bigger space between rows */

width:100%;
margin:0;
padding:var(--card-pad);
border:1px solid var(--color-medium);
background:var(--bg);
border-radius:var(--radius);
}





.gallery-img{
width: 100%;
height: auto;
cursor: zoom-in;
transition: transform 0.2s ease, opacity 0.2s ease;
border: 1px dotted var(--color-medium);
}
.gallery-img:hover{
opacity: 0.8;
}

#lightbox{
display: none;
position: fixed;
z-index: 3000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(4px);
}

#lightbox-img{
opacity: 0;
transition: opacity 0.4s ease-in-out;
margin: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw;
max-height: 90vh;
cursor: zoom-out;
}

#lightbox-img.loaded{
opacity: 1;
}

#close-btn, #prev-btn, #next-btn{
position: absolute;
color: var(--color-light);
font-size: 28px;

cursor: pointer;
user-select: none;
transition: color 0.2s ease;
padding: var(--gap-1);
z-index: 3001;
}

#close-btn{ top: 35%; right: 24px; font-size: 36px; }
#prev-btn, #next-btn{ top: 50%; transform: translateY(-50%); }
#prev-btn{ left: 10px; }
#next-btn{ right: 10px; }
#close-btn:hover, #prev-btn:hover, #next-btn:hover{
color: var(--color-medium);
}

#close-btn i,
#prev-btn i,
#next-btn i{
display: block;
}

@media (max-width: 800px){
.gallery-container{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px){
.gallery-container{ grid-template-columns: 1fr; }
}

.ticker-wrap{
width: 100%;
overflow: hidden;
background: transparent;
color: var(--color-light);
border: 1px dotted var(--bg);
padding: calc(var(--gap-1) * 0.9) 0;
margin-top: 24px;
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.ticker{
display: flex;
white-space: nowrap;
width: max-content;
animation: ticker-move 30s linear infinite;
}
.ticker-group{
display: flex;
flex-shrink: 0;
}
.ticker__item{
padding: 0 2rem;
font-family: var(--font-mono);
color: var(--color-light);
text-decoration: none;
cursor: pointer !important;
pointer-events: auto !important;
transition: color 0.3s;
display: inline-block;
}
.ticker__item::after{
content: none !important;
display: none !important;
}
.ticker__item:hover{
color: var(--color-medium);
}
.ticker-wrap:hover .ticker{
animation-play-state: paused;
}
@keyframes ticker-move{
0%{
transform: translateX(0);
}
100%{
transform: translateX(-50%);
}
}