/* SRMY – Unified Theme (shared across all pages) */
:root{
  --srmy-accent:#ffb90c;
  --srmy-accent-2:#ffcf4a;
  --srmy-ink:#101418;
  --srmy-card-bg: rgba(245,245,245,.92);
  --srmy-card-border: rgba(0,0,0,.10);
  --srmy-shadow: 0 10px 30px rgba(0,0,0,.18);
  --srmy-radius: 16px;
  --srmy-maxw: 1080px;
}

html, body{
  height:100%;
}

body{
  background-image:
    radial-gradient(ellipse at center, rgba(255,255,255,.78) 0%, rgba(255,255,255,.30) 38%, rgba(0,0,0,.18) 100%),
    url("../gallery/srmy-bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--srmy-ink);
}

/* Layout breathing room */
.wb_page, .wb-page{
  min-height: 100vh;
}

/* Consistent page width (without breaking builder layouts) */
.srmy-page, .srmy-wrap{
  max-width: var(--srmy-maxw);
  margin: 0 auto;
  padding: 22px 16px 34px;
}

/* Cards */
.srmy-card, .srmy-event, .srmy-box, .srmy-aboutbox, .srmy-contactbox{
  background: var(--srmy-card-bg);
  border: 1px solid var(--srmy-card-border);
  border-left: 6px solid var(--srmy-accent);
  border-radius: var(--srmy-radius);
  box-shadow: var(--srmy-shadow);
  overflow: hidden;
}

/* Card inner spacing */
.srmy-card .inner, .srmy-event .inner, .srmy-box .inner{
  padding: 18px 18px;
}

/* Headings */
.srmy-title, .srmy-event h2, .srmy-box h2, .srmy-box h3{
  font-weight: 800;
  letter-spacing: .2px;
}
.srmy-accent-title, .srmy-event .srmy-headline, .srmy-box .srmy-headline{
  color: var(--srmy-accent);
  font-weight: 900;
  text-transform: none;
}

/* Typography */
.srmy-event, .srmy-card, .srmy-box, .srmy-aboutbox{
  font-size: 17px;
  line-height: 1.55;
}
.srmy-event p, .srmy-card p, .srmy-box p, .srmy-aboutbox p{
  margin: 0 0 14px;
}

/* Buttons */
.srmy-btn, a.srmy-btn, .srmy-cta a{
  display: inline-block;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,185,12,.95);
  color: #111;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid rgba(0,0,0,.12);
}
.srmy-btn:hover, a.srmy-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* Thumbs / gallery like Muistoja */
.srmy-gallery{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 14px 16px 18px;
}
@media (max-width: 900px){
  .srmy-gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .srmy-gallery{ grid-template-columns: 1fr; }
}

a.srmy-thumb{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
  background: rgba(255,255,255,.55);
}
a.srmy-thumb img{
  width:100%;
  height: 170px;
  object-fit: cover;
  display:block;
}
@media (max-width: 520px){
  a.srmy-thumb img{ height: 200px; }
}
a.srmy-thumb:hover{
  transform: translateY(-2px);
}

/* Header & footer polish (builder ids) */
div[id^="wb_header_"]{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(10,14,18,.55);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
div[id^="wb_header_"] a{
  color: rgba(255,255,255,.92) !important;
}
div[id^="wb_header_"] a:hover{
  color: #fff !important;
}

div[id^="wb_footer_"]{
  margin-top: 26px;
  background: rgba(10,14,18,.72);
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}
div[id^="wb_footer_"] a{ color: rgba(255,255,255,.92) !important; }
div[id^="wb_footer_"] a:hover{ color: #fff !important; }

/* Make footer content feel like a real footer */
div[id^="wb_footer_"] .wb_content{
  max-width: var(--srmy-maxw);
  margin: 0 auto;
  padding: 16px 16px 20px;
}

/* Avoid odd left-floating layout surprises */
.wb_content{ max-width: 100%; }