/* New App Header (rebuilt) */
.app-header { position:relative; margin:1rem 16px; background:none; border:none; padding:0; z-index:20; }
.app-header.liquidGlass-wrapper { border-radius:10px; }
.app-header.liquidGlass-wrapper .liquidGlass-effect { backdrop-filter:blur(2px); filter:none; border-radius:10px; }
.app-header.liquidGlass-wrapper .liquidGlass-tint { background:#aebbaa; border-radius:10px; }
.app-header.liquidGlass-wrapper .liquidGlass-shine { box-shadow: inset 2px 2px 2px rgba(255,255,255,0.4), inset -1px -1px 1px rgba(0,0,0,0.12), 0 3px 10px rgba(0,0,0,0.08); border-radius:10px; }
.app-header__inner { display:flex; align-items:center; gap:0; padding:10px 10px 10px 10px; width:100%; }
.app-header__back { display:inline-flex; align-items:center; gap:6px; font-weight:700; text-decoration:none; background:rgba(255,255,255,0.22); padding:8px 12px 8px 10px; border-radius:8px; color:#213526; backdrop-filter:blur(3px); box-shadow:0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.28) inset; transition:.2s; }
.app-header__back:hover { background:rgba(255,255,255,0.35); }
.app-header__backIcon { transform:translateY(-1px); }
.app-header__nav { display:flex; align-items:center; gap: clamp(12px,2.3vw,34px); margin-left:24px; flex:1; }
.app-header__link { position:relative; font-size:0.95rem; font-weight:600; padding:10px 14px; text-decoration:none; color:#7B2429; border-radius:10px; transition:.25s; }
.app-header__link:hover { background:rgba(145,174,126,0.12); }
.app-header__link:hover::after { transform:scaleX(1); }
.app-header__link::after { content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; background:linear-gradient(90deg,#91AE7E,#B1BBAC); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:.25s cubic-bezier(.4,0,.2,1); }
.app-header__map { margin-left:auto; display:inline-flex; align-items:center; font-weight:700; padding:8px 12px 8px 10px; border-radius:8px; text-decoration:none; color:#213526; background:rgba(255,255,255,0.22); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); box-shadow:0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.28) inset; transition:.2s; }
.app-header__map:hover { background:rgba(255,255,255,0.35); }
.app-header__mapIcon { width:18px; height:18px; display:inline-block; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25)); }
.app-header__mapLabel { line-height:1; display:inline-block; }
.app-header__map { gap:6px; }
.app-header__map:focus-visible, .app-header__back:focus-visible, .app-header__link:focus-visible { outline:2px solid #7B2429; outline-offset:2px; }
@media (max-width:960px){ .app-header__nav { display:none; } }
@media (max-width:600px){ .app-header { margin:0.75rem 10px; } .app-header__inner { padding:8px 8px 8px 10px; } .app-header__backLabel { display:none; } .app-header__back { padding:8px 10px; } }

/* Base button style for header actions */
.back-link, .map-button, .header-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 8px 14px 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #213526;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.25) inset;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

.back-link:hover, .map-button:hover, .header-link:hover { background: rgba(255,255,255,0.35); color: #152118; }
.back-link .back-icon { font-size: 1rem; line-height: 1; transform: translateY(-1px); opacity: .85; }
.back-link .back-text { font-weight: 700; }

.map-button { font-weight: 700; background: linear-gradient(135deg, rgba(145,174,126,0.35), rgba(174,187,170,0.25)); box-shadow: 0 2px 4px rgba(0,0,0,0.12), 0 0 0 1px rgba(255,255,255,0.35) inset; }
.map-button:hover { background: linear-gradient(135deg, rgba(145,174,126,0.5), rgba(174,187,170,0.35)); }

/* old flush rule removed in rebuild */

/* Spacing when map button sits next to back link */
/* Right aligned map button container */
/* old header-right removed */

.back-link:focus-visible, .map-button:focus-visible, .header-link:focus-visible { outline: 2px solid #7B2429; outline-offset: 2px; }

@media (max-width:560px){
  .header-nav { display:none; }
  .map-button { padding: 8px 12px; }
  .back-link .back-text { display:none; }
  .back-link { padding:8px 10px; }
}

.header-link {
  position: relative;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #7B2429;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-link::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: linear-gradient(90deg, #91AE7E, #B1BBAC);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-link:hover {
  background: rgba(145, 174, 126, 0.12);
}

.header-link:hover::after {
  transform: scaleX(1);
}

@media (max-width: 1024px) {
  .header-nav {
    display: none; /* Mobile menu would go here in full implementation */
  }
}

/* old header mobile rule removed */

/* Edge-align map button */
/* old edge-align rule removed */

body { padding-top: 0; }
/* Reserved header height via spacer */
:root {
  --header-margin-top: 1.4vh;
  --header-side-margin: 1.4vh;
  --header-height: 8.2vh;
  --block-gap: 1.6vh;
  --content-offset: calc(var(--header-margin-top) + var(--header-height));
  --block-radius: var(--border-radius, 0.6vw);
}
main { margin-top: var(--content-offset); }


/* Custom bullet with shadow for event-label lists */
.event-label li {
  position: relative;
  list-style: none;
}
.event-label li::before {
  content: "▶";
  position: absolute;
  left: -2em;
  top: 50%;
  transform: translateY(-50%);
  color: #4a5568 !important; /* Changed color and added !important */
  font-size: 0.5em;
}

.event-info-box .liquidGlass-tint,
.event-info-box .liquidGlass-shine {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
}
.event-info-box > *:not(.liquidGlass-tint):not(.liquidGlass-shine):not(.liquidGlass-effect):not(.liquidGlass-overlay) {
  position: relative;
  z-index: 2;
}
/* Remove old conflicting event-info-box rule */
/* Consolidated event label and time/location row styles */
.event-label {
  display: block;
  width: 100%;
  margin: 0 0 0.2em 0;
  padding: 0;
  font-weight: 600 !important;  /* Changed from 500 to 600 !important */
  position: relative;
  z-index: 2;
}
.event-info-box .event-label {
  font-weight: 600 !important;  /* Added !important */
  color: #4a5568 !important;
  margin-right: 6px;
  min-width: 0;
  max-width: 100%;
  flex-shrink: 1;
}

/* Event details flex layout: info wide, image narrow */
.event-details-flex {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.event-details-info {
  flex: 0 0 58%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
  align-items: flex-start; /* Add this line */
  align-self: stretch; /* Ensure it stretches to full height */
}




/* Force all text in event-info-box and its descendants to #4a5568 with maximum specificity */

/* Force all text in event-info-box and its descendants to #4a5568 and font-weight 600 with maximum specificity */
/* Force all text in event-info-box and its descendants to #4a5568 and font-weight 600 with maximum specificity */
.event-info-box, .event-info-box *, .event-info-box *:before, .event-info-box *:after,
.event-info-box span, .event-info-box p, .event-info-box div, .event-info-box li, .event-info-box strong, .event-info-box em, .event-info-box b, .event-info-box i,
.event-info-box h1, .event-info-box h2, .event-info-box h3, .event-info-box h4, .event-info-box h5, .event-info-box h6,
.event-info-box a, .event-info-box label, .event-info-box small, .event-info-box sup, .event-info-box sub {
  color: #4a5568 !important;
  -webkit-text-fill-color: #4a5568 !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

.event-info-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.7em 1em 0.7em 1em;
  font-size: 1.04em;
  background: transparent;
  border-radius: var(--block-radius);
  box-shadow: 0 6px 6px #00000033, 0 0 20px #0000001a;
  overflow: hidden;
}



/* Override for liquidGlass-wrapper event-info-box to ensure transparency */
.event-info-box.liquidGlass-wrapper {
  background: transparent !important;
  position: relative;
  display: flex;
  font-weight: 600;
  overflow: hidden;
  color: inherit;
  box-shadow: 0 6px 6px #00000033, 0 0 20px #0000001a;
  transition: none;
}

/* Apply liquid glass effect - same as nav buttons with higher specificity */
.event-info-box.liquidGlass-wrapper .liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  filter: url(#glass-distortion) !important;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--block-radius);
  background: transparent !important;
}

.event-info-box .liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(10px);
  filter: url(#glass-distortion);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--block-radius);
  background: transparent !important;
}

.event-info-box .liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  /* Lighten tint for better contrast on busy backgrounds */
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: var(--block-radius);
}

.event-info-box .liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: inset 2px 2px 1px 0 #ffffff80,
              inset -1px -1px 1px 1px #ffffff80;
  border-radius: var(--block-radius);
}

/* Update text z-index */
.event-info-box .liquidGlass-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  z-index: 3;
  position: relative;
  color: inherit;
  width: 100%;
}

/* Special styling for event-info-box with liquidGlass-text (new structure) */
.event-info-box .liquidGlass-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  z-index: 3;
  position: relative;
  color: inherit;
  width: 100%;
}

/* Event info content wrapper for old structure */
.event-info-content {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  width: 100%;
  position: relative;
  z-index: 2;
}
/* Event location style */
.event-location {
  display: block;
  font-size: 0.98em;
  color: #769666 !important;
  font-weight: 600 !important;  /* Added !important */
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}

/* Event organiser styling */
.event-organiser {
  position: absolute;
  bottom: 0;
  right: 0;
  font-weight: 600;
  color: #4a5568;
  text-align: right;
  font-size: 0.6em;
  padding: 0.5em;
  display: block;
  font-style: normal;
  background: transparent !important;
  border-radius: var(--block-radius);
  box-shadow: 0 6px 6px #00000033, 0 0 20px #0000001a;
  overflow: hidden;
  z-index: 10; /* Ensure it's above other elements */
}

/* Liquid glass wrapper styling for event organiser */
.event-organiser.liquidGlass-wrapper {
  background: transparent !important;
  display: block;
  font-weight: 600;
  overflow: hidden;
  color: inherit;
  box-shadow: 0 6px 6px #00000033, 0 0 20px #0000001a;
  transition: none;
  z-index: 1; /* Add explicit z-index */
}

.event-organiser .liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  filter: url(#glass-distortion) !important;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--block-radius);
  background: transparent !important;
}

.event-organiser .liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: #ffffff0d !important;
  border-radius: var(--block-radius);
}

.event-organiser .liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: inset 2px 2px 1px 0 #ffffff80,
              inset -1px -1px 1px 1px #ffffff80;
  border-radius: var(--block-radius);
}

/* Frosted Glass Overlay for Event Organiser */
.event-organiser .liquidGlass-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #dce5da33;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: none;
  border-radius: var(--block-radius);
  pointer-events: none;
  scale: 1;
}

/* Update z-index for organiser text to be above overlay */
.event-organiser .liquidGlass-text {
  position: relative;
  z-index: 5 !important;
  color: #4a5568 !important;
  text-align: right;
  display: block;
}

/* Ensure all content within event organiser is above overlay */
.event-organiser > *:not(.liquidGlass-tint):not(.liquidGlass-shine):not(.liquidGlass-effect):not(.liquidGlass-overlay) {
  position: relative;
  z-index: 5;
}

/* Event register button styling - matching header buttons */
.event-register-btn {
  background: transparent;
  color: #4a5568 !important;
  z-index: 3;
  border: none;
  border-radius: var(--block-radius);
  padding: 0.5em;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-end;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  letter-spacing: 0.02em;
  display: inline-flex;
  width: auto;
  text-decoration: none;
}

/* Add liquidGlass-wrapper styling for register button */
.event-register-btn.liquidGlass-wrapper {
  position: relative;
  display: inline-flex;
  font-weight: 600;
  overflow: hidden;
  color: inherit;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
  transition: none;
}

.event-register-btn .liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  filter: url(#glass-distortion) !important;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--block-radius);
  background: transparent !important;
}

.event-register-btn .liquidGlass-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #76966631 !important;
  border-radius: var(--block-radius);
}

.event-register-btn .liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
              inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
  border-radius: var(--block-radius);
}

/* Update z-index for event-info-box content to be above overlay */
.event-info-box .liquidGlass-text,
.event-info-box .event-info-content,
.event-info-box > *:not(.liquidGlass-tint):not(.liquidGlass-shine):not(.liquidGlass-effect):not(.liquidGlass-overlay) {
  position: relative;
  z-index: 5;
}

/* Update z-index for register button text to be above overlay */
.event-register-btn .liquidGlass-text {
  position: relative;
  z-index: 5 !important;
  color: #4a5568 !important;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.02em;
}

/* Reset and Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Red Hat Display', 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
main { margin-top: var(--content-offset); }
    background: #DCE5DA;
    color: #2d3748;
    line-height: 1.6;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* Unified Button Styles */
.btn-base {
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    color: #4a5568;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.btn-base.selected,
.btn-base.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

/* Header */
.sketch-header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    position: relative;
}

.sketch-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('media/backgrounds/web-josta.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    border-radius: 8px;
}



/* Consolidated event-details-img style */
.event-details-img {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.sketch-header .liquidGlass-tint {
  background: rgba(255, 255, 255, 0.15);
}

.sketch-header .liquidGlass-tint,
.sketch-header .liquidGlass-shine,
.sketch-header .liquidGlass-effect {
  border-radius: 8px;
}

.sketch-header .liquidGlass-text {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.sketch-header-social {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

.sketch-header-nav {
  display: flex;
  gap: 8px;
}

/* Desktop: nav fills header; JS will scale button widths proportionally */
@media (min-width: 768px) {
  .sketch-header-nav { flex: 1 1 auto; }
  .sketch-header-nav .nav-button { flex: 0 0 auto; /* width set via JS for scaling */ }
}

/* Navigation Button Styles */
.nav-button {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  transition: none;
  text-decoration: none;
  color: #4a5568 !important;
  font-size: 1rem !important;
  font-weight: 850 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.1;
}

.nav-button .liquidGlass-tint,
.nav-button .liquidGlass-shine,
.nav-button .liquidGlass-effect {
  border-radius: 8px;
}

.nav-button .liquidGlass-text {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5 !important;
}

/* Split nav button into two glassy segments: icon and label */
.nav-button .nav-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nav-button .nav-segment .liquidGlass-shine {
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.45),
              inset -1px -1px 0 rgba(0,0,0,0.06);
}
.nav-button .nav-segment .liquidGlass-text {
  position: relative;
  inset: auto;
}
.nav-button .nav-segment-icon {
  border-radius: 50%;
}
.nav-button .nav-segment-label {
  border-radius: 0.5rem;
}

/* Frosted glass segments instead of border */
.nav-segment-icon,
.nav-segment-label {
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.55),
              inset -1px -1px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.nav-segment-icon {
  padding: 0; /* default: no padding for non-map icons */
}
.nav-segment-label {
  padding: 0.5rem;
}

/* Only the Map button's icon segment gets padding */
.sketch-header-nav a.nav-button[href*="map"] .nav-segment-icon {
  padding: 0.35rem;
}

.nav-segment-label {
  background: #91AE7E;
}

/* Social Button Styles */
.social-button {
  padding: 0.4rem;
  border-radius: 50%;
  transition: none;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.social-button .liquidGlass-tint,
.social-button .liquidGlass-shine,
.social-button .liquidGlass-effect {
  border-radius: 50% !important;
}

/* Icon Sizing - Navigation and Social */
.nav-button img,
.sketch-header-nav img {
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  transition: none;
  aspect-ratio: 1 / 1 !important;
}

.social-button img,
.sketch-header-social img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  transition: none;
}

/* Unified liquid glass system */
.liquidGlass-wrapper {
  position: relative;
  display: flex;
  font-weight: 600;
  overflow: hidden;
  color: inherit;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
}

.liquidGlass-effect,.liquidGlass-tint,.liquidGlass-shine,.liquidGlass-text {
  position: absolute;
  inset: 0;
}

.liquidGlass-effect{
  z-index: 0;
  backdrop-filter: blur(3px);
  filter: url(#glass-distortion);
  overflow: hidden;
  isolation: isolate;
}
.liquidGlass-tint {
  z-index: 1;
  background: rgba(255, 255, 255, 0.25);
}

.liquidGlass-shine {
  z-index: 2;
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.liquidGlass-text {
  z-index: 3;
  position: relative; /* allow flex layouts to override */
}

/* Header Liquid Glass Styles */
.sketch-header {
  border-radius: 8px;
  padding: 10px;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.sketch-header .liquidGlass-effect {
  backdrop-filter: blur(1px);
  filter: none;
}

.sketch-header .liquidGlass-tint,
.sketch-header .liquidGlass-shine,
.sketch-header .liquidGlass-effect {
  border-radius: 8px;
}

.sketch-header .liquidGlass-text {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

/* Override any other header icon rules */
.sketch-header-nav img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

.sketch-header-social img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
}

/* Clear Glass Button Effects - Override duplicates */
.nav-button .liquidGlass-effect {
  filter: url(#glass-distortion);
  background: transparent !important;
}

.nav-button .liquidGlass-tint {
  background: rgba(255, 255, 255, 0.1) !important;
}

.social-button .liquidGlass-effect {
  filter: url(#glass-distortion);
  background: transparent !important;
}

.social-button .liquidGlass-tint {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Frosted Glass Overlay for Buttons */
.nav-button .liquidGlass-overlay,
.social-button .liquidGlass-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(220, 229, 218, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: none;
}

.nav-button .liquidGlass-overlay {
  border-radius: 8px;
  scale: 1;
  /*mask: radial-gradient(ellipse 88% 88% at center, rgba(0,0,0,1) 58%, rgba(0,0,0,0.7) 75%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask: radial-gradient(ellipse 88% 88% at center, rgba(0,0,0,1) 58%, rgba(0,0,0,0.7) 75%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0) 100%);*/
}

.social-button .liquidGlass-overlay {
  border-radius: 50%;
  scale: 1;
  mask: radial-gradient(circle at center, rgba(0,0,0,1) 58%, rgba(0,0,0,0.7) 75%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask: radial-gradient(circle at center, rgba(0,0,0,1) 58%, rgba(0,0,0,0.7) 75%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0) 100%);
}

/* Update text z-index to be above overlay */
.nav-button .liquidGlass-text,
.social-button .liquidGlass-text {
  z-index: 5 !important;
}

/* Button Content Centering */
.nav-button .liquidGlass-text {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5 !important;
}

/* Gallery button specific - move icon to the left */
.nav-button[href*="gallery"] .liquidGlass-text {
  gap: 8px;
  padding-left: 4px;
  padding-right: 11px;
}

/* Map button - align like gallery/info with icon left and text right */
.nav-button[href*="map"] .liquidGlass-text {
  gap: 8px;
  padding-left: 4px;
  padding-right: 11px;
}

/* Desktop: icon left, label centered within remaining space */
@media (min-width: 768px) {
  .sketch-header-nav .nav-button .liquidGlass-text {
    display: flex;
    align-items: center;
    gap: 8px; /* keep existing gap */
  }
  .sketch-header-nav .nav-button .nav-label {
  flex: 1 1 auto; /* occupy remaining space so centering works */
  display: block;
  text-align: center;
  white-space: nowrap; /* prevent wrapping */
  }
  /* Override per-button spacing for desktop centering */
  .sketch-header-nav .nav-button[href*="gallery"] .liquidGlass-text,
  .sketch-header-nav .nav-button[href*="map"] .liquidGlass-text {
    padding-left: 0;
    padding-right: 0;
  }
}

.social-button .liquidGlass-text {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5 !important;
}

/* Main Layout */
/* Offset for fixed premium header */
main {
  padding: calc(var(--block-gap) * 0.6) var(--header-side-margin) var(--block-gap);
  flex: 1;
  display: flex;
  gap: var(--block-gap);
  overflow: hidden;
  box-sizing: border-box;
  min-height: 0;
}

/* Adjust offset on smaller screens (header is slightly shorter) */
/* Removed top offset media adjustment since header is in-flow */

/* Left Column - Header + Gallery */
.left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  gap: var(--block-gap);
}

/* Right Section - Region Icons + Event Calendar */
.right-section {
    display: flex;
    flex-direction: row;
    height: 100%;
    min-height: 0;
  gap: var(--block-gap);
}

/* ================================
   GALLERY STYLES (from fixed-files)
   ================================ */

.gallery-modal-description p {
  margin: 0 0 1em 0;
  line-height: 1.7;
  white-space: normal;
  color: #4a5568;
}

.gallery-modal-description {
  white-space: normal;
}

/* Gallery Section */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto; /* let rows size naturally based on content */
    gap: 8px;
    overflow: visible; /* no scrolling on grid itself */
    flex: none; /* don't constrain height - let content determine size */
    min-height: 0;
    height: auto; /* allow natural expansion */
    padding: 0;
    align-content: start;
}

/* Unified placeholder message style for gallery and events-calendar */
/* Make placeholder-message fill parent and center content */
.placeholder-message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 2rem;
  color: #718096;
  font-size: 1.1rem;
  font-weight: 500;
  background: none;
  border-radius: 8px;
  text-align: center;
}

@media (min-width: 768px) {
  .gallery-grid.is-placeholder,
  .gallery-grid.is-empty,
  .calendar-events.is-placeholder,
  .calendar-events.is-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column;
    gap: 0;
  }
  .placeholder-message {
    text-align: center;
    margin: 0 auto;
  }
}

/* Desktop placeholder / empty states centering */
@media (min-width: 768px) {
  .gallery-grid.is-placeholder,
  .gallery-grid.is-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column;
    gap: 0;
  }
  .gallery-placeholder-message {
    text-align: center;
    padding: 2rem;
    color: #4a5568;
    font-style: italic;
    width: 100%;
    max-width: 100%;
  }
}

/* Center region icons horizontally when they don't overflow */
#region-icons.no-overflow .liquidGlass-text {
  justify-content: center !important;
}

.gallery-grid::-webkit-scrollbar {
    width: 4px;
}

.gallery-grid::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}

.gallery-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

/* Apply same custom scrollbar to the new scrolling container */
#gallery .liquidGlass-text::-webkit-scrollbar {
    width: 6px;
}

#gallery .liquidGlass-text::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

#gallery .liquidGlass-text::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.gallery-card {
    background: transparent;
    border: none;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 160px;
    min-height: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
  border-radius: var(--block-radius);
    cursor: pointer;
}

.gallery-card-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
}

.gallery-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.15s;
}

@media (min-width: 768px) {
.gallery-card:hover .gallery-card-image img {
    filter: blur(6px);
}
}

.gallery-card-preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
    color: white;
    padding: 12px;
    display: flex;
    flex-direction: column;
  justify-content: center;
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 768px) {
.gallery-card:hover .gallery-card-preview {
    opacity: 1;
}
}

.gallery-card-preview-text {
    font-size: 11px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: normal; /* don't break words unless necessary */
    overflow-wrap: break-word; /* only break if word exceeds container */
    hyphens: none; /* disable hyphenation */
}

/* Hide gallery card content (title/text) by default, show only on hover */
.gallery-card-content {
    padding: 12px 16px 8px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    letter-spacing: 0.1rem !important;
}

@media (min-width: 768px) {
.gallery-card:hover .gallery-card-content {
    opacity: 1;
    pointer-events: auto;
}
}

.gallery-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
    text-align: center;
    word-break: normal; /* don't break words unless necessary */
    overflow-wrap: break-word; /* only break if word exceeds container */
    hyphens: none; /* disable hyphenation */
    letter-spacing: 0.1rem !important;
    text-shadow: -1px -1px 0 #7B2429,
                  0px -1px 0 #7B2429,
                  1px -1px 0 #7B2429,
                 -1px  0px 0 #7B2429,
                  1px  0px 0 #7B2429,
                 -1px  1px 0 #7B2429,
                  0px  1px 0 #7B2429,
                  1px  1px 0 #7B2429 !important;
}

/* Desktop hard reset for gallery card layout to avoid mobile split styles leaking */
@media (min-width: 768px) {
  .gallery-card {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }
  .gallery-card .gallery-card-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    order: 0 !important;
    z-index: 1 !important;
  }
  .gallery-card .gallery-card-image img,
  .gallery-card .gallery-card-image video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  .gallery-card .gallery-card-preview {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) !important;
    z-index: 2 !important;
  }
  .gallery-card:hover .gallery-card-preview {
    opacity: 1 !important;
  }
}

/* Gallery Modal */
.gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.gallery-modal.active {
    display: flex;
}

.gallery-modal-content {
  background: #DEE5DB;
  border-radius: 8px;
  width: 100%;
  /* Flexible height: prefer 80vh but cap at design max */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Outer shell hides overflow, inner areas scroll */
  position: relative;
  box-shadow: 0 8px 32px rgba(120, 150, 102, 0.18), 0 2px 8px rgba(0,0,0,0.08);
  border: 1.5px solid #b7cdb0;
  padding: 0;
}

/* Ensure internal flex region can actually shrink and allow scrolling children */
.gallery-modal-main-row { min-height: 0; }
.gallery-modal-left { min-height: 0; }
.gallery-modal-text { min-height: 0; }

/* Fix disappearing text: enforce proper flex distribution and remove clipping margins */
.gallery-modal-main-row {
  display: flex;
  gap: 1.25rem;
  padding: 0 1.25rem 0.75rem 1.25rem;
  overflow: hidden; /* keep backdrop feel */
}
.gallery-modal-left {
  margin-left: 0 !important; /* was 1rem causing potential wrap/clipping */
  flex: 0 0 48%;
  position: relative;
}
.gallery-modal-text {
  flex: 1 1 0;
  position: relative;
  z-index: 1;
  overflow-y: auto;
}

/* Allow thumbnails column to scroll independently if vertical space is tight */
.gallery-modal-thumbnails {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  max-height: 95%;
}

/* Make image area adapt to reduced heights while preserving aspect */
.gallery-modal-image {
  max-height: 100% !important;
}
.gallery-modal-image img {
  max-height: 100%;
  width: 100%;
  object-fit: contain;
}

/* On very small heights, stack vertically to avoid squishing */
/* Stack only on very short viewports (lowered from 520px to 460px) and make content scrollable */
@media (max-height: 460px) {
  .gallery-modal-main-row {
    flex-direction: column;
  }
  .gallery-modal-left, .gallery-modal-text {
    width: 100% !important;
  }
  .gallery-modal-left {
    flex: 0 0 auto;
  }
  .gallery-modal-text {
    flex: 1 1 auto;
    min-height: 0;
  }
  .gallery-modal-thumbnails {
    flex-direction: row !important;
    width: 100% !important;
    max-height: 110px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .gallery-modal-thumbnail {
    width: 80px !important;
    height: 60px !important;
  }
  .gallery-modal-image {
    height: 40vh !important;
  }
}

/* Ensure text column always shows and can scroll */
.gallery-modal-text {
  display: flex;
  flex-direction: column;
}
.gallery-modal-description {
  flex: 1 1 auto;
  display: block;
  overflow-y: auto;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-modal-description::-webkit-scrollbar {
  display: none;
}

/* Custom scrollbar for gallery modal description */
.gallery-modal-description-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background: transparent;
  border-radius: 6px;
  z-index: 20;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  scrollbar-width: none;
}

.gallery-modal-description-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.gallery-modal-description-scrollbar .scrollbar-track {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.05);
  border-radius: 6px;
}

.gallery-modal-description-scrollbar .scrollbar-thumb {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  min-height: 24px;
  touch-action: none;
  will-change: transform, height;
  transition: background 0.15s;
}

.gallery-modal-description-scrollbar .scrollbar-thumb:hover,
.gallery-modal-description-scrollbar .scrollbar-thumb:active {
  background: rgba(0,0,0,0.5);
}


.gallery-modal-header-box {
  width: 100%;
  padding: 24px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border-bottom: 1px solid #0000001a;
  background-color: #91AE7E;
}

.gallery-modal-title {
  font-size: 1.9rem;
  font-weight: 850;
  color: #4a5568;
  text-align: center;
  margin-bottom: 0.6rem;
  margin-top: -1rem;
  letter-spacing: 0.01em;
}

.gallery-modal-main-row {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.gallery-modal-left {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  width: 50% !important;
  min-width: unset !important;
  max-width: unset !important;
  height: 100% !important;
  padding: 0 !important;
  box-sizing: border-box;
  gap: 12px;
  margin-left: 1rem;
  background: transparent !important;
}

.gallery-modal-thumbnails {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 90px !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 18px !important;
  padding-right: 8px; /* add right padding to avoid content under custom scrollbar */
  margin-top: 1rem !important;
  background: transparent !important;
  order: 0 !important;
  align-self: flex-start !important; /* Keep thumbnails at the top */
  /* Hide native vertical scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-modal-thumbnails::-webkit-scrollbar { display: none; }

/* Custom vertical scrollbar for thumbnails (placed between thumbs and image) */
.gallery-modal-thumbnails-scrollbar {
  position: absolute;
  width: 8px;
  height: 100%;
  right: auto; /* we'll position with left via JS */
  top: 0;
  background: transparent;
  border-radius: 6px;
  z-index: 10;
  pointer-events: auto;
}
.gallery-modal-thumbnails-scrollbar .scrollbar-track {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.05);
  border-radius: 6px;
}
.gallery-modal-thumbnails-scrollbar .scrollbar-thumb {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  min-height: 24px;
  touch-action: none;
  will-change: transform, height;
  transition: background 0.15s;
}
.gallery-modal-thumbnails-scrollbar .scrollbar-thumb:hover,
.gallery-modal-thumbnails-scrollbar .scrollbar-thumb:active {
  background: rgba(0,0,0,0.5);
}

.gallery-modal-image {
  margin-top: 0 !important;
  order: 1 !important;
  width: 100% !important;
  max-width: 600px !important;
  height: 100% !important;
  max-height: 600px !important;
  min-width: unset !important;
  min-height: unset !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important; /* Center the image container vertically */
}

/* For wider screens, allow the image to take more space and center better */
@media (min-width: 1750px) {
  .gallery-modal-image {
    max-width: 800px !important;
    margin: 0 auto !important; /* Center horizontally within the available space */
  }
  
  .gallery-modal-left {
    justify-content: center !important; /* Center the content horizontally */
  }
}

/* Ensure gallery-modal-img is properly centered within gallery-modal-left */
.gallery-modal-img {
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  margin: auto !important;
}

.gallery-modal-thumbnail {
  width: 90px !important;
  height: 65px !important;
  border-radius: 8px !important;
  cursor: pointer;
  object-fit: cover;
  transition: opacity 0.2s;
}

.gallery-modal-thumbnail:hover {
  opacity: 0.8;
}

.gallery-modal-thumbnail.selected {
  border: 2px solid #91AE7E;
}

/* Dark overlay on deselected thumbnails */
.gallery-modal-thumbnails .gallery-modal-thumbnail {
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.gallery-modal-thumbnails .gallery-modal-thumbnail:not(.selected) {
  filter: brightness(0.55) saturate(0.95) !important;
}
.gallery-modal-thumbnails .gallery-modal-thumbnail.selected {
  filter: none !important;
}

/* Visual play indicator on desktop modal video thumbnails */
.gallery-modal-thumbnail.is-video {
  position: relative;
}
.gallery-modal-thumbnail.is-video .thumb-play-icon {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* keep clicks on the thumbnail */
}
.gallery-modal-thumbnail.is-video .thumb-play-icon::before {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
  display: inline-block;
}
.gallery-modal-thumbnail.is-video .thumb-play-icon::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-left: 10px solid rgba(255, 255, 255, 0.95);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  /* center slightly to the right for play triangle */
  transform: translate(2px, 0);
}

.gallery-modal-text {
  width: 50%;
  padding: 1rem 1rem 0 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.gallery-modal-date {
  padding: 1rem 2rem;
  font-size: 0.9rem;
  color: #666;
  border-top: 1px solid rgba(0,0,0,0.1);
  background: rgba(255,255,255,0.3);
}

/* ================================
   END GALLERY STYLES
   ================================ */

/* Final desktop overrides to ensure non-split gallery cards with overlay title */
@media (min-width: 768px) {
  .gallery-grid .gallery-card {
    position: relative !important;
    display: block !important;
    height: 160px !important;
    overflow: hidden !important;
  }
  .gallery-grid .gallery-card .gallery-card-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    order: 0 !important;
    z-index: 1 !important;
  }
  .gallery-grid .gallery-card .gallery-card-image img,
  .gallery-grid .gallery-card .gallery-card-image video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  .gallery-grid .gallery-card .gallery-card-preview {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) !important;
    z-index: 2 !important;
  }
  .gallery-grid .gallery-card:hover .gallery-card-preview {
    opacity: 1 !important;
  }
}

.sort-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    border-radius: 8px;
    z-index: 0 !important;
  }

.sort-btn[data-region="Visi"]::before {
    background-image: url('media/icons/Latvia.webp');
}

.sort-btn[data-region="Vidzeme"]::before {
    background-image: url('media/icons/Vidzeme.webp');
}

.sort-btn[data-region="Zemgale"]::before {
    background-image: url('media/icons/Zemgale.webp');
}

.sort-btn[data-region="Latgale"]::before {
    background-image: url('media/icons/Latgale.webp');
}

.sort-btn[data-region="Kurzeme"]::before {
    background-image: url('media/icons/Kurzeme.webp');
}

.sort-btn:hover::before,
.sort-btn.selected::before {
    opacity: 1;
    filter: brightness(1.1) saturate(1.1);
}

/* Remove the old ::after pseudo-element */


/* Text overlay styling - Style the button text directly */
.sort-btn {
    padding: 0;
    border: none;
    background: transparent;
    color: transparent !important; /* Hide the original button text */
    text-shadow: none !important;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    overflow: visible;
    z-index: 1;
}


.sort-btn.selected {
    transform: scale(1.15);
    color: transparent !important; /* Hide original text */
}

.sort-btn.selected::after {
  color: #4a5568 !important;
}

/* Region Icons Block - Separate from Event Calendar */
#region-icons {
  width: 12vh;
  display: flex;
  flex-direction: column;
  padding: 1.4vh; /* match event-calendar padding using vh */
  height: 100%;
  flex-shrink: 0;
  border-radius: var(--block-radius);
  overflow: visible; /* mirror event-calendar */
  margin-left: 0; /* parity */
}

/* (Use shared liquidGlass-effect base; removed duplicate #region-icons specific effect block) */

/* (Removed invalid display: transparent; rely on shared tint color override if needed) */
#region-icons .liquidGlass-tint { background: #aebbaa; }

/* (Removed duplicate shine definition if already covered globally; keep only if unique) */
#region-icons .liquidGlass-shine { box-shadow: inset 2px 2px 1px 0 rgba(255,255,255,0.3), inset -1px -1px 1px 1px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06); }
/* (Border-radius handled by wrapper; individual layers inherit clipping) */

#region-icons .liquidGlass-tint,
#region-icons .liquidGlass-shine,
#region-icons .liquidGlass-effect {
  border-radius: var(--block-radius);
}

#region-icons .liquidGlass-text {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  min-height: 0;
  overflow: visible; /* mirror event-calendar */
  justify-content: center; /* vertically center region icons within column */
}

/* Desktop layout for region icons list wrapper */
#region-icons .region-icons-row {
  display: flex;
  flex-direction: column;
  gap: 8vh;
}

/* Region item container with separate visible label box */
#region-icons .region-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vh;
  position: relative;
}

#region-icons .region-item .sort-btn {
  width: 100%;
  height: 15vh;
  border: 1px solid transparent;
  box-sizing: border-box;
}

/* (Pseudo label automatically excluded from #region-icons via scoped selector above) */

#region-icons .region-label {
  width: 80%;
  background: #7eb172;
  box-shadow: 0 1px 0 0 #515e6a !important;
  padding: 0.5vh 0.7vh 0.45vh;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  color: #515e6a;
  border-radius: 6px; /* align with icon button corner */
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
  font-weight: 800;
}

#region-icons .region-item .sort-btn.selected + .region-label {
  filter: brightness(1.06) saturate(1.05);
  font-weight: 700;
}

#region-icons .region-item .sort-btn {
  height: 10vh;
  width: 100%;
  border-radius: var(--block-radius);
}

.event-dropdown-box summary { height: auto; }

@media (min-height: 1061px) {
  #region-icons .region-icons-row { row-gap: 8rem; }
  .sketch-header { height: 7rem; }
  .sketch-header-nav { height: 5.8rem; }
  .sketch-header-nav .liquidGlass-text { font-size: 1.9rem; }
  .event-date-header { font-size: 1.2rem; }
  .nav-button img, .sketch-header-nav img { height: 2.3rem !important; width: 2.3rem !important; }
  /* Make Info icon match Map icon height + vertical padding (0.35rem total) */
  .sketch-header-nav img[alt="Info"],
  .sketch-header-nav img[src*="info.svg"] { height: 3rem !important; width: 3rem !important; }
  .gallery-modal { padding: 7rem 10rem !important; }
  #modal-title { font-size: 2.7rem; }
  #modal-description { font-size: 1.7rem; }
  #modal-date { font-size: 1.3rem; }
  .event-title { font-size: 1.7rem !important; }
  .event-date-header { font-size: 1.4rem !important; }
  .event-label { font-size: 1.4rem !important; }
}

@media (min-height: 1001px) and (max-height: 1060px) {
  #region-icons .region-icons-row { row-gap: 7.5rem; }
  .sketch-header { height: 6rem; }
  .sketch-header-nav { height: 4.8rem; }
  .sketch-header-nav .liquidGlass-text { font-size: 1.8rem; }
  .event-date-header { font-size: 1rem; }
  .nav-button img, .sketch-header-nav img { height: 2.2rem !important; width: 2.2rem !important; }
  /* Info icon = 2.2rem (map) + 0.35rem padding */
  .sketch-header-nav img[alt="Info"],
  .sketch-header-nav img[src*="info.svg"] { height: 2.9rem !important; width: 2.9rem !important; }
  .gallery-modal { padding: 7rem !important; }
  #modal-title { font-size: 2.7rem; }
  #modal-description { font-size: 1.7rem; }
  #modal-date { font-size: 1.3rem; }
  .event-title { font-size: 1.6rem !important; }
  .event-date-header { font-size: 1.3rem !important; }
  .event-label { font-size: 1.4rem !important; }
}

@media (min-height: 901px) and (max-height: 1000px) {
  #region-icons .region-icons-row { row-gap: 6rem; }
  .sketch-header { height: 6rem; }
  .sketch-header-nav { height: 4.8rem; }
  .sketch-header-nav .liquidGlass-text { font-size: 1.8rem; }
  .event-date-header { font-size: 1rem; }
  .nav-button img, .sketch-header-nav img { height: 2.2rem !important; width: 2.2rem !important; }
  .sketch-header-nav img[alt="Info"],
  .sketch-header-nav img[src*="info.svg"] { height: 2.9rem !important; width: 2.9rem !important; }
  .gallery-modal { padding: 5rem !important; }
  #modal-title { font-size: 2.6rem; }
  #modal-description { font-size: 1.6rem; }
  #modal-date { font-size: 1.2rem; }
  .event-title { font-size: 1.6rem !important; }
  .event-date-header { font-size: 1.3rem !important; }
  .event-label { font-size: 1.3rem !important; }
}

@media (min-height: 821px) and (max-height: 900px) {
  #region-icons .region-icons-row { row-gap: 5rem; }
  .sketch-header { height: 5rem; }
  .sketch-header-nav { height: 3.8rem; }
  .sketch-header-nav .liquidGlass-text { font-size: 1.6rem; }
  .event-date-header { font-size: 1rem; }
  .nav-button img, .sketch-header-nav img { height: 2rem !important; width: 2rem !important; }
  .sketch-header-nav img[alt="Info"],
  .sketch-header-nav img[src*="info.svg"] { height: 2.7rem !important; width: 2.7rem !important; }
  .gallery-modal { padding: 5rem !important; }
  #modal-title { font-size: 2.3rem; }
  #modal-description { font-size: 1.3rem; }
  #modal-date { font-size: 1rem; }
  .event-title { font-size: 1.5rem !important; }
  .event-date-header { font-size: 1.2rem !important; }
  .event-label { font-size: 1.2rem !important; }
}

@media (min-height: 701px) and (max-height: 820px) {
  #region-icons .region-icons-row { row-gap: 3rem; }
  .sketch-header-nav .liquidGlass-text { font-size: 1.5rem; }
  .sketch-header { height: 5rem; }
  .sketch-header-nav { height: 3.8rem; }
  .event-date-header { font-size: 0.9rem; }
  .nav-button img, .sketch-header-nav img { height: 1.9rem !important; width: 1.9rem !important; }
  /* Example target from request: 2.25rem */
  .sketch-header-nav img[alt="Info"],
  .sketch-header-nav img[src*="info.svg"] { height: 2.6rem !important; width: 2.6rem !important; }
  .gallery-modal { padding: 3rem !important; }
  #modal-title { font-size: 2.2rem; }
  #modal-description { font-size: 1.2rem; }
  #modal-date { font-size: 0.9rem; }
  .event-title { font-size: 1.4rem !important; }
  .event-date-header { font-size: 1.1rem !important; }
  .event-label { font-size: 1.1rem !important; }
}

@media (min-height: 641px) and (max-height: 700px) {
  #region-icons .region-icons-row { row-gap: 2rem; }
  .sketch-header { height: 4rem; }
  .sketch-header-nav { height: 2.8rem; }
  .sketch-header-nav .liquidGlass-text { font-size: 1.3rem; }
  .event-date-header { font-size: 0.7rem; }
  .nav-button img, .sketch-header-nav img { height: 1.7rem !important; width: 1.7rem !important; }
  .sketch-header-nav img[alt="Info"],
  .sketch-header-nav img[src*="info.svg"] { height: 2.4rem !important; width: 2.4rem !important; }
  .gallery-modal { padding: 3rem !important; }
  #modal-title { font-size: 2.1rem; }
  #modal-description { font-size: 1.1rem; }
  #modal-date { font-size: 0.8rem; }
  .event-title { font-size: 1.1rem !important; }
  .event-date-header { font-size: 0.8rem !important; }
  .event-label { font-size: 0.9rem !important; }
}

@media (min-height: 581px) and (max-height: 640px) {
  #region-icons .region-icons-row { row-gap: 2rem; }
  .sketch-header { height: 3.8rem; }
  .sketch-header-nav .liquidGlass-text { font-size: 1.3rem; }
  .event-date-header { font-size: 0.7rem; }
  .nav-button img, .sketch-header-nav img { height: 1.7rem !important; width: 1.7rem !important; }
  .sketch-header-nav img[alt="Info"],
  .sketch-header-nav img[src*="info.svg"] { height: 2.4rem !important; width: 2.4rem !important; }
  .gallery-modal { padding: 3rem !important; }
  #modal-title { font-size: 2rem; }
  #modal-description { font-size: 1rem; }
  #modal-date { font-size: 0.8rem; }
  .event-title { font-size: 1.2rem !important; }
  .event-date-header { font-size: 0.9rem !important; }
  .event-label { font-size: 0.9rem !important; }
}

@media (max-height: 580px) {
  #region-icons .region-icons-row { row-gap: 0.5rem; }
  /* Base small-height default: header icons ~1.5rem, so 1.5 + 0.35 = 1.85rem */
  .sketch-header-nav img[alt="Info"],
  .sketch-header-nav img[src*="info.svg"] { height: 2.2rem !important; width: 2.2rem !important; }
  .gallery-modal { padding: 3rem !important; }
  #modal-title { font-size: 1.8rem; }
  #modal-description { font-size: 1rem; }
  #modal-date { font-size: 0.8rem; }
  .event-date-header { font-size: 0.8rem !important; }
  .event-title { font-size: 1.2rem !important; }
  .event-label { font-size: 0.9rem !important; }
}

/* Calendar Events */
.calendar-events {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    width: 100%; /* Take full width of the remaining space */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.calendar-events::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.calendar-events::-webkit-scrollbar {
    width: 4px;
}

.calendar-events::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 2px;
}

.calendar-events::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.event-dropdown-box {
    background: rgba(0, 0, 0, 0.04);
  border-radius: var(--block-radius);
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
    flex-shrink: 0;
    min-height: fit-content;
}

.event-dropdown-box details {
    width: 100%;
}

.event-dropdown-box summary {
    padding: 8px;
    cursor: pointer;
    font-weight: 800;
    color: #4a5568 !important;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background-color: #91AE7E;
}

.event-dropdown-box summary .event-title {
    flex: 1;
    font-weight: 850;
    margin-left: 1rem;
    letter-spacing: 0.05rem;
}

/* Event date header styling */
.event-date-header {
    color: #4a5568 !important;
    font-weight: 600 !important;
    opacity: 0.9;
    margin-left: auto;
    flex-shrink: 0;
}

.event-dropdown-box summary::-webkit-details-marker {
    display: none;
}

.event-dropdown-box summary::after {
content: '';
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-left: 0.5em;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.35em;
    border-color: transparent transparent transparent #4a5568 !important;
    vertical-align: middle;
    transform: rotate(0deg);
    transition: transform 0.2s;
    transform-origin: 20% 50%;
}

.event-dropdown-box[open] summary::after {
    content: '';
    transform: rotate(90deg);
    border-color: transparent transparent transparent #4a5568 !important;
}
.event-dropdown-box details[open] summary::after {
    content: '';
    transform: rotate(90deg);
    border-color: transparent transparent transparent #4a5568 !important;
}

.event-content {
    padding: 8px;
    color: #4a5568;
    line-height: 1.5;
    /* Show a solid color immediately; actual image is applied via --event-bg-url when decoded */
    background-color: #dce5da;
  /* Use the decoded image when available; otherwise show a tiny, fast fallback texture */
  background-image: var(--event-bg-url, url('media/backgrounds/web-josta.webp'));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden; /* prevent bleed while overlay still fully covers content */
    min-height: 60px;
  }

/* Provide a fallback background image only for browsers that do not support CSS variables */
@supports not (background: var(--dummy)) {
  .event-content {
    background-image: url('media/backgrounds/event-bg2.JPG');
  }
}

.event-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: -1px; /* flush top; extend 1px beyond bottom */
    z-index: 0;
  /* Light frosted overlay to lift background and improve dark text readability */
    background: rgb(145, 174, 126, 0.6);
    /* Removed backdrop-filter to speed up paint on open */
    pointer-events: none;
}

.event-content > * {
    position: relative;
    z-index: 1;
}

/* Make text visible on all backgrounds */
.event-content * {
    font-weight: 600 !important;
}

/* Keep green color for event labels */
.event-content .event-label {
    color: #769666 !important;
}

/* Keep existing time and location colors */
.event-content .event-time {
    color: #769666 !important;
}

.event-content .event-location {
    color: #769666 !important;
}

.event-content img {
  width: 200px !important;
  height: auto !important;
    border-radius: 8px;
    display: block;
}

/* Allow event poster image to ignore the generic 200px image width */
.event-content .event-poster-img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

.event-poster-img-wrapper {
  padding: 0.5em;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
  width: 100%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  /* Liquid glass shadow and background */
  box-shadow: 0 6px 6px #00000033, 0 0 20px #0000001a;
  background: transparent;
  aspect-ratio: unset !important;
  height: auto !important;
  /* Let the wrapper stretch to the width of its parent */
  /* width is set to 100% above; avoid forcing auto with !important */
}

/* Liquid glass effect for event poster image */
.event-poster-img-wrapper .liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  filter: url(#glass-distortion);
  overflow: hidden;
  isolation: isolate;
  border-radius: 8px;
  background: transparent !important;
}

.event-poster-img-wrapper .liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: #ffffff0d !important;
  border-radius: 8px;
}

.event-poster-img-wrapper .liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: inset 2px 2px 1px 0 #ffffff80,
              inset -1px -1px 1px 1px #ffffff80;
  border-radius: 8px;
}

/* Ensure poster image is above glass layers */
.event-poster-img-wrapper > *:not(.liquidGlass-tint):not(.liquidGlass-shine):not(.liquidGlass-effect):not(.liquidGlass-overlay) {
  position: relative;
  z-index: 4;
}

.event-poster-img {
  width: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  max-width: 100%;
  /* Allow height to follow aspect ratio instead of capping by viewport width */
  max-height: none;
  margin: 0;
  transition: width 0.2s, height 0.2s;
  z-index: 1;
  aspect-ratio: unset !important;
  height: auto;
}

/* On large screens, let the poster fill its wrapper and keep the natural aspect ratio */
@media (min-width: 900px) {
  .event-details-img,
  .event-poster-img-wrapper {
    width: 100%;
    max-width: 100%;
  }
  .event-poster-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }
}

/* On smaller screens, image fills container but keeps 1/1 aspect */
@media (max-width: 899px) {
  .event-details-img,
  .event-poster-img-wrapper {
    max-width: 100%;
  }
  .event-poster-img {
    max-width: 100vw;
    max-height: 100vw;
  }
}

/* Modal for expanded event poster */
#event-poster-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: center;
  justify-content: center;
}
#event-poster-modal.active {
  display: flex;
}
#event-poster-modal img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  background: #fff;
}
#event-poster-modal .close-modal {
  display: none;
}

/* Gallery liquid glass (restored to mirror event-calendar styling) */
#gallery {
  border-radius: var(--block-radius);
  padding: 10px; /* match event-calendar */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* prevent section from scrolling */
  min-height: 0;
  flex: 1; /* take available space */
  margin-left: 0; /* parity (even if not needed) */
}
#gallery .liquidGlass-effect {
  backdrop-filter: blur(1px);
  filter: none;
  background: transparent;
}
#gallery .liquidGlass-tint {
  background: #aebbaa;
}
#gallery .liquidGlass-shine {
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.3),
              inset -1px -1px 1px 1px rgba(0, 0, 0, 0.1),
              0 2px 8px rgba(0, 0, 0, 0.06);
}
#gallery .liquidGlass-tint,
#gallery .liquidGlass-shine,
#gallery .liquidGlass-effect {
  border-radius: var(--block-radius);
}
#gallery .liquidGlass-text {
  display: flex;
  flex-direction: column;
  height: 100%; /* fill available space */
  flex: 1;
  min-height: 0;
  overflow-y: auto; /* this container handles the scrolling */
  overflow-x: hidden;
  padding-right: 8px; /* add space between content and scrollbar, matching gallery section padding */
}

/* === Viewport-proportional desktop layout === */
@media (min-width: 768px) {
  body {
    font-size: clamp(1.2vh, calc(0.8vh + 0.24vw), 2vh);
  }

  main {
    min-height: calc(100vh - var(--content-offset));
    align-items: stretch;
  }

  .left-column {
    gap: var(--block-gap);
  }

  #gallery,
  #event-calendar,
  #region-icons {
    border-radius: var(--block-radius);
    padding: 1.6vh;
    gap: 1.4vh;
  }

  #gallery {
    max-height: calc(100vh - var(--content-offset) - 2.4vh);
  }

  #gallery .liquidGlass-text {
    gap: 1.2vh;
    padding-right: 1vh;
  }

  .gallery-grid {
    gap: 1.2vh;
  }

  .gallery-card {
    border-radius: var(--block-radius);
    aspect-ratio: 3 / 4;
    height: auto;
  }

  .gallery-card-content {
    padding: 1.1vh 1.5vh 0.9vh;
    gap: 0.7vh;
  }

  .gallery-card-title {
    font-size: calc(0.95vh + 0.2vw);
  }

  .gallery-card-preview-text {
    font-size: calc(0.78vh + 0.16vw);
  }

  .calendar-events {
    gap: 1.2vh;
    padding-right: 0.4vh;
  }

  .event-dropdown-box {
    border-radius: var(--block-radius);
  }

  .event-dropdown-box summary {
    padding: 1.2vh;
    gap: 1.2vh;
  }

  .event-dropdown-box summary .event-title {
    margin-left: 1.4vh;
    font-size: calc(1vh + 0.22vw);
  }

  .event-date-header {
    font-size: calc(0.9vh + 0.18vw);
  }

  .event-info-box {
    padding: 1.4vh 1.6vh;
    border-radius: var(--block-radius);
    gap: 1vh;
  }

  .event-info-box .event-label {
    font-size: calc(0.92vh + 0.16vw);
  }

  .event-info-box .event-location {
    font-size: calc(0.82vh + 0.14vw);
  }

  .event-register-btn {
    padding: 0.8vh 1.2vh;
    border-radius: 1.1vh;
    font-size: calc(0.85vh + 0.16vw);
  }

  #event-calendar {
    max-height: calc(100vh - var(--content-offset) - 2.4vh);
  }

  #region-icons {
    width: 18vh;
  }

  #region-icons .region-icons-row {
    gap: 1.8vh;
  }

  #region-icons .region-item .sort-btn {
    height: 5.6vh;
    border-radius: 1.1vh;
  }

  #region-icons .region-label {
    padding: 0.6vh 0.8vh 0.5vh;
    border-radius: 0.9vh;
    font-size: calc(0.85vh + 0.14vw);
  }

  .placeholder-message {
    padding: 2vh;
    font-size: calc(0.9vh + 0.22vw);
  }

  .gallery-modal {
    padding: 4vh 3vh;
  }

  .gallery-modal-content {
    border-radius: 1.4vh;
  }

  .gallery-modal-main-row {
    gap: 1.6vh;
    padding: 0 1.8vh 1.2vh;
  }

  .gallery-modal-thumbnails {
    gap: 1.2vh;
  }

  .gallery-modal-thumbnail {
    border-radius: 1vh;
    width: 9vh !important;
    height: 6.2vh !important;
  }

  .gallery-modal-thumbnail.selected {
    border-width: 0.32vh;
  }

  .gallery-modal-description {
    font-size: calc(0.9vh + 0.18vw);
  }
}

/* Event Calendar Liquid Glass Styles */
#event-calendar {
  border-radius: var(--block-radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  overflow: visible; /* Override the liquidGlass-wrapper overflow: hidden */
  min-height: 0;
  flex: 1;
  margin-left: 0rem; /* Reset margin since we're moving the whole layout */
}



#event-calendar .liquidGlass-effect {
  backdrop-filter: blur(1px);
  filter: none;
  background: transparent;
}

#event-calendar .liquidGlass-tint {
  background: #aebbaa;
}

#event-calendar .liquidGlass-shine {
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.3),
              inset -1px -1px 1px 1px rgba(0, 0, 0, 0.1),
              0 2px 8px rgba(0, 0, 0, 0.06);
}

#event-calendar .liquidGlass-tint,
#event-calendar .liquidGlass-shine,
#event-calendar .liquidGlass-effect {
  border-radius: var(--block-radius);
}

#event-calendar .liquidGlass-text {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  min-height: 0;
  overflow: visible; /* Ensure the text container also doesn't clip */
  position: relative; /* Add relative positioning for absolute children */
}

@media (min-width: 768px) and (max-width: 1725px) {
    .gallery-card {
        height: auto !important;
        aspect-ratio: unset !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    .gallery-card-image {
        position: relative !important;
        height: auto !important;
        width: 100% !important;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        bottom: unset !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .gallery-card-image img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: unset !important;
        object-fit: contain !important;
        border-radius: 8px !important;
        display: block !important;
    }
    
    .gallery-card-preview {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }
    
    @media (min-width: 768px) {
    .gallery-card:hover .gallery-card-preview {
        opacity: 1 !important;
    }
    }
    
    .gallery-card-content {
        display: none !important;
    }
}

/* Universal gallery card fixes for all screen sizes */
@media screen {
    .gallery-card {
        height: auto !important;
    }
    
    .gallery-card-content {
        flex: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
}

/* Compact gallery for short viewport heights to avoid large white gaps below images */
@media (max-height: 560px) {
  .gallery-card { height: 130px !important; }
  .gallery-card-image { position: relative !important; height: 100% !important; }
  .gallery-card-image img { height: 100% !important; width: 100% !important; object-fit: cover !important; object-position: center center !important; }
}

@media (max-height: 500px) {
  .gallery-card { height: 110px !important; }
}

.event-details-info .event-label {
    font-weight: 600;
    color: #4a5568;
    margin-right: 4px;
    min-width: 0;
    flex-shrink: 0;
    z-index: 3;
    position: relative;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.event-details-info .event-value {
    font-weight: 600 !important;  /* Changed from 400 to 600 with !important */
    color: #2d3748;
}

/* List styling for event requirements */
.event-info-box ul.event-label {
    margin: -1em 0 -1em 0;
    padding-left: 1.2em;
    line-height: 1.2;
}

.event-info-box ul.event-label li {
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: 1.2;
}

/* Alternative: If SVG filter is not available, use CSS-only distortion effect */
@supports not (filter: url(#glass-distortion)) {
    .event-info-box .liquidGlass-effect,
    .event-register-btn .liquidGlass-effect {
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        background: transparent;
    }
}

/* Frosted Glass Overlay for Event Info Box */
.event-info-box .liquidGlass-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #dce5da33;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: none;
  border-radius: 8px;
  pointer-events: none;
  scale: 1;
}

/* Frosted Glass Overlay for Event Register Button */
.event-register-btn .liquidGlass-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(220, 229, 218, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: none;
  border-radius: 8px;
  pointer-events: none;
  scale: 1;
}

/* Final override to ensure font-weight 600 on all event-info-box elements */
.event-info-box,
.event-info-box *,
.event-info-box .event-label,
.event-info-box .event-value,
.event-info-box .event-time,
.event-info-box .event-location,
.event-info-box .event-organiser,
.event-info-box .liquidGlass-text,
.event-info-box .liquidGlass-text *,
.event-info-box .event-info-content,
.event-info-box .event-info-content *,
.event-organiser,
.event-organiser *,
.event-organiser .liquidGlass-text,
.event-organiser .liquidGlass-text * {
  font-weight: 600 !important;
}

/* Additional aggressive override for event-info-box using attribute selector and descendant combinator */
[class*="event-info-box"] *,
[class*="event-info-box"] *::before,
[class*="event-info-box"] *::after,
div.event-info-box *,
div.event-info-box.liquidGlass-wrapper *,
.liquidGlass-wrapper.event-info-box *,
[class*="event-organiser"] *,
[class*="event-organiser"] *::before,
[class*="event-organiser"] *::after,
div.event-organiser *,
div.event-organiser.liquidGlass-wrapper *,
.liquidGlass-wrapper.event-organiser * {
  font-weight: 600 !important;
  -webkit-font-weight: 600 !important;
  -moz-font-weight: 600 !important;
  -ms-font-weight: 600 !important;
  -o-font-weight: 600 !important;
}

/* Target specific text elements within event-info-box with higher specificity */
.event-info-box .event-info-content span,
.event-info-box .event-info-content div,
.event-info-box .event-info-content p,
.event-info-box .liquidGlass-text span,
.event-info-box .liquidGlass-text div,
.event-info-box .liquidGlass-text p,
.event-info-box .event-details-info * {
  font-weight: 600 !important;
}

/* Ensure inline styles don't override */
.event-info-box [style*="font-weight"] {
  font-weight: 600 !important;
}

/* DEBUG: Force font-weight with different font-family fallbacks */
.event-info-box,
.event-info-box * {
  font-weight: 600 !important;
  font-weight: bold !important; /* Fallback for browsers that don't recognize numeric weights */
}

/* Alternative approach using font-variation-settings for variable fonts */
@supports (font-variation-settings: normal) {
  .event-info-box,
  .event-info-box * {
    font-variation-settings: "wght" 600 !important;
  }
}

/* Force bold for specific elements as a test */
.event-info-box .event-label,
.event-info-box .event-time,
.event-info-box .event-location {
  font-weight: bold !important;
  font-weight: 700 !important;
  font-weight: 800 !important;
  font-weight: 900 !important;
  text-rendering: optimizeLegibility !important;
}

/* ULTIMATE OVERRIDE - Override any inline styles or JavaScript modifications */
.event-info-box[style],
.event-info-box *[style] {
  font-weight: 600 !important;
}

/* Use CSS custom property to force inheritance */
.event-info-box {
  --forced-font-weight: 600;
}

.event-info-box *:not(img) {
  font-weight: var(--forced-font-weight) !important;
  font-weight: 600 !important;
}

/* Override with inline style attribute selector - maximum specificity */
div[class~="event-info-box"] * {
  font-weight: 600 !important;
}

/* If elements are being dynamically created, force style on any child */
.event-info-box > * > * > * > * > * {
  font-weight: 600 !important;
}

/* Test with different selector approach */
body main .event-content .event-info-box * {
  font-weight: 600 !important;
}

/* Fix: Ensure no conflicting border-radius or box-shadow overrides for glass boxes */
.event-details-img > .liquidGlass-wrapper {
  padding: 0;
  margin: 0 0 8px 0;
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-shadow: 0 6px 6px #00000033, 0 0 20px #0000001a;
}

/* CLEANUP: Only one rule for .event-details-img > .liquidGlass-wrapper, and only one for .event-details-img */
/* Remove all duplicate/conflicting rules for these selectors below this point in your file. */

/* Final, minimal, and correct: */
.event-details-img {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.event-details-img > .liquidGlass-wrapper {
  padding: 0;
  margin: 0 0 8px 0;
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-shadow: 0 6px 6px #00000033, 0 0 20px #0000001a;
}

/* Fix: Ensure .liquidGlass-overlay is always inset and matches border-radius and shadow of parent */
.event-info-box .liquidGlass-overlay,
.event-organiser .liquidGlass-overlay,
.event-register-btn .liquidGlass-overlay,
.event-details-img > .liquidGlass-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #dce5da33;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: none;
  border-radius: 8px;
  pointer-events: none;
  scale: 0.99;
  /* Remove any margin, padding, or transform here */
}

.event-poster-img-wrapper .liquidGlass-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: 8px;
  pointer-events: none;
  scale: 1; /* Consistent scale across all overlays */
  background: #dce5da33;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: none;
  /* Remove any margin, padding, or transform here */
}

/* Force the button to never stretch */
.event-details-info > .event-register-btn,
.event-details-info > .event-register-btn.liquidGlass-wrapper {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  display: inline-flex !important;
  box-sizing: border-box !important;
}

/* If the button is inside a wrapper div, also target that: */
.event-details-info > div:has(> .event-register-btn),
.event-details-info > div:has(> .event-register-btn.liquidGlass-wrapper) {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  display: inline-flex !important;
  box-sizing: border-box !important;
}

/* Prevent register button text from stretching */
.event-register-btn .liquidGlass-text {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ULTIMATE OVERRIDE: Prevent .event-register-btn and any parent from stretching */
.event-details-info *:has(> .event-register-btn),
.event-details-info *:has(> .event-register-btn.liquidGlass-wrapper) {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  display: inline-flex !important;
  box-sizing: border-box !important;
}
.event-register-btn,
.event-register-btn.liquidGlass-wrapper {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  display: inline-flex !important;
  box-sizing: border-box !important;
  padding: 0.5em !important;
}
.event-register-btn .liquidGlass-text {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
}

/* Minimal and necessary overrides to prevent .event-organiser from stretching */
.event-organiser,
.event-organiser.liquidGlass-wrapper {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 0.5em !important;
  margin: 0 !important;
}

/* Prevent organiser text from stretching */
.event-organiser .liquidGlass-text {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  padding: 0 !important;
}

/* If inside a wrapper div, center the wrapper as well */
.event-details-info > div:has(> .event-register-btn),
.event-details_info > div:has(> .event-register-btn.liquidGlass-wrapper) {
  align-items: center !important;
}

/* Keep event-register-btn centered */
.event-register-btn,
.event-register-btn.liquidGlass-wrapper {
  align-self: center !important;
  margin-top: 8px;
  margin-bottom: 0 !important;
}

.event-details-img {
  /* Make it match the height of event-details-info */
  flex: 1; /* Take remaining space in flex container */
  position: relative; /* Add positioning context for event organiser */
  align-self: stretch; /* Stretch to match the flex container height */
  display: flex;
  flex-direction: column;
  overflow: visible; /* Ensure absolute positioned children aren't clipped */
}
.event-details-img-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ================================
   GALLERY: Force 1:1 square tiles
   ================================ */
/* These overrides enforce perfect squares for gallery cards across viewports,
   overriding earlier rules that unset aspect-ratio or force heights. */
.gallery-grid .gallery-card {
  position: relative !important;
  width: 100% !important;
  height: auto !important; /* allow aspect-ratio to define height */
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  /* Ensure the card respects grid cell boundaries */
  min-height: 0 !important;
  box-sizing: border-box !important;
}
.gallery-grid .gallery-card .gallery-card-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.gallery-grid .gallery-card .gallery-card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* cover to fill square nicely */
  object-position: center center !important;
  display: block !important;
}
/* Keep hover preview overlay behavior on larger screens; position overlay to fill */
.gallery-grid .gallery-card .gallery-card-preview {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px !important;
  pointer-events: none; /* clickable through */
}
@media (min-width: 768px) {
  .gallery-grid .gallery-card:hover .gallery-card-preview { opacity: 1 !important; }
}
/* On narrow heights where earlier rules forced fixed pixel heights, keep squares */
@media (max-height: 560px) {
  .gallery-grid .gallery-card { aspect-ratio: 1 / 1 !important; height: auto !important; }
}

/* ======================================
   MAP ICON: restore icon-segment padding
   Ensure consistent padding for the Map button icon segment at all sizes.
   Placed late in the file and uses !important to avoid being overridden.
   ====================================== */
.sketch-header-nav a.nav-button[href*="map"] .nav-segment-icon {
  padding: 0.35rem !important;
}

/* Also target current Map link by domain and an alt-based fallback */
.sketch-header-nav a.nav-button[href*="karte"] .nav-segment-icon,
.sketch-header-nav a.nav-button:has(img[alt="Map"]) .nav-segment-icon {
  padding: 0.35rem !important;
}

/* Map icon padding scales with viewport height */
@media (min-height: 1061px) {
  .sketch-header-nav a.nav-button[href*="map"] .nav-segment-icon,
  .sketch-header-nav a.nav-button[href*="karte"] .nav-segment-icon,
  .sketch-header-nav a.nav-button:has(img[alt="Map"]) .nav-segment-icon {
    padding: 0.5rem !important;
  }
}

@media (min-height: 901px) and (max-height: 1060px) {
  .sketch-header-nav a.nav-button[href*="map"] .nav-segment-icon,
  .sketch-header-nav a.nav-button[href*="karte"] .nav-segment-icon,
  .sketch-header-nav a.nav-button:has(img[alt="Map"]) .nav-segment-icon {
    padding: 0.45rem !important;
  }
}

@media (min-height: 701px) and (max-height: 900px) {
  .sketch-header-nav a.nav-button[href*="map"] .nav-segment-icon,
  .sketch-header-nav a.nav-button[href*="karte"] .nav-segment-icon,
  .sketch-header-nav a.nav-button:has(img[alt="Map"]) .nav-segment-icon {
    padding: 0.4rem !important;
  }
}

@media (min-height: 581px) and (max-height: 700px) {
  .sketch-header-nav a.nav-button[href*="map"] .nav-segment-icon,
  .sketch-header-nav a.nav-button[href*="karte"] .nav-segment-icon,
  .sketch-header-nav a.nav-button:has(img[alt="Map"]) .nav-segment-icon {
    padding: 0.35rem !important;
  }
}

@media (max-height: 580px) {
  .sketch-header-nav a.nav-button[href*="map"] .nav-segment-icon,
  .sketch-header-nav a.nav-button[href*="karte"] .nav-segment-icon,
  .sketch-header-nav a.nav-button:has(img[alt="Map"]) .nav-segment-icon {
    padding: 0.3rem !important;
  }
}