/* Root color tokens adapted from mystyles.css: use muted red primary palette /
:root{
--gap:12px;
--bg:#fff; / base background from mystyles (light) /
--panel:#F1F1F1; / light panel like code background /
--accent:#9A0000; / primary red used in mystyles buttons (button-primary) /
--accent-strong:#C21010;
--text:#222; / main text color from mystyles */
}

/* Base reset and layout (skeleton-inspired) */
*{box-sizing:border-box}
html{font-size:62.5%;}
body{
margin:0;
font-family:"Raleway","HelveticaNeue","Helvetica Neue","Helvetica","Arial",system-ui,-apple-system,Segoe UI,Roboto;
font-size:1.5em;
line-height:1.6;
color:var(--text);
background:var(--bg);
min-height:100vh;
padding:24px;
display:flex;
align-items:flex-start;
justify-content:center;
}

/* Container grid (use skeleton container widths) */
.gallery-container{
position:relative;
width:100%;
max-width:960px;
margin:0 auto;
padding:0 20px;
}

/* Gallery grid */
.gallery-grid{
display:grid;
gap:var(--gap);
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* Thumbnail card (styled to match mystyles subtle surfaces) */
.thumb{
position:relative;
overflow:hidden;
border-radius:4px;
background-color:#fff;
border:1px solid #E1E1E1;
cursor:pointer;
transition:box-shadow .15s ease, transform .15s ease;
}
.thumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .35s ease;
}
.thumb:hover img,
.thumb:focus img{ transform:scale(1.06); }
.thumb:hover,
.thumb:focus{ box-shadow:0 6px 18px rgba(0,0,0,0.06); transform:translateY(-2px); }

.caption{
position:absolute;
left:0; right:0; bottom:0;
padding:8px 10px;
background:linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
color:#fff;
font-size:1.3rem; /* using rem-ish scale from mystyles */
margin:0;
}

/* Lightbox (clean, light surface matching mystyles form panels) */
.lightbox{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.6);
padding:20px;
gap:12px;
visibility:hidden;
opacity:0;
transition:opacity .15s ease;
z-index:1000;
}
.lightbox[aria-hidden="false"]{ visibility:visible; opacity:1; }

.lb-content{
width:100%;
max-width:95%;
max-height:85%;
background:var(--panel);
border-radius:4px;
padding:12px;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
.lb-content img{
max-width:100%;
max-height:70vh;
border-radius:4px;
display:block;
object-fit:contain;
}
.lb-caption{
color:#fff;
font-size:1.4rem;
margin:0;
text-align:center;
}

/* Lightbox buttons (follow mystyles button look) */
.lb-btn{
background-color:transparent;
color:var(--text);
border:1px solid #bbb;
font-size:2rem;
padding:10px;
cursor:pointer;
user-select:none;
border-radius:4px;
height:38px;
line-height:18px;
box-sizing:border-box;
}
.lb-btn:hover{ border-color:#888; color:#333; }
.lb-btn.primary{
color:#fff;
background-color:var(--accent);
border-color:var(--accent);
}
.lb-btn.primary:hover{ background-color:var(--accent-strong); border-color:var(--accent-strong); }

.lb-close{ position:absolute; top:18px; right:18px; font-size:2.2rem; }
.lb-prev{ position:fixed; left:10px; top:50%; transform:translateY(-50%); }
.lb-next{ position:fixed; right:10px; top:50%; transform:translateY(-50%); }

/* Accessibility focus states (match mystyles focus color for forms) */
.thumb:focus{ outline:3px solid rgba(154,0,0,0.14); }
.lb-btn:focus{ outline:2px solid var(--accent); }

/* Tables and code inherit mystyles spacing and appearance for any embedded content */
pre > code{ display:block; padding:1rem 1.5rem; white-space:pre; background:#F1F1F1; border:1px solid #E1E1E1; border-radius:4px; }
code{ padding:.2rem .5rem; background:#F1F1F1; border:1px solid #E1E1E1; border-radius:4px; }

/* Typography adjustments */
h1,h2,h3,h4,h5,h6{ margin-top:0; margin-bottom:2rem; font-weight:300; }
h1{ font-size:4.0rem; line-height:1.2; letter-spacing:-.1rem; }
p{ margin-top:0; margin-bottom:2.5rem; }

/* Utilities */
.u-full-width{ width:100%; box-sizing:border-box; }
.u-max-full-width{ max-width:100%; box-sizing:border-box; }

/* Small screen adjustments (keep similar behavior) */
@media (max-width:480px){
/*.gallery-grid{ grid-template-columns: repeat(2,1fr); gap:8px;}*/
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 12px; }
.gallery-grid img { width: 100%; height: auto; display: block; object-fit: cover; }
.gallery-container { max-width: 1200px; margin: 0 auto; padding: 16px; }
.gallery-grid .thumb { width:100%; height:160px; overflow:hidden; }
.gallery-grid .thumb img { width:100%; height:100%; object-fit:cover; }
.lb-prev, .lb-next{ display:none; }
*

/* Larger view adjustments to reflect mystyles container breakpoints /
@media (min-width:400px){
.gallery-container{ max-width:85%; padding:0; }
}
@media (min-width:550px){
.gallery-container{ max-width:80%; }
}