/* Mobile-first gallery UI modernizer */

:root {
  --ui-accent: #ba1d48;
  --ui-accent-2: #d42a5a;
  --ui-text: #1f2937;
  --ui-muted: #6b7280;
  --ui-border: rgba(0, 0, 0, 0.08);
  --ui-card: #ffffff;
  --ui-bg: #f3f4f6;
  --ui-radius: 16px;
}

html,
body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ui-accent);
  text-decoration: none;
}

a:hover {
  color: var(--ui-accent-2);
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  font-family: Montserrat, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* Gallery container padding (mobile) */
@media (max-width: 767.98px) {
  .body-content {
    margin-top: 74px !important;
    padding: 16px 0 40px 0 !important;
  }

  .detailSectionInner {
    padding: 14px !important;
  }
}

/* Gallery "list-item" cards (injected by Mustache/JS) */
.list-item {
  background: var(--ui-card);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  overflow: hidden;
  margin-bottom: 14px;
}

.list-item picture img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

.list-item .title a {
  font-weight: 700;
}

.list-item .description {
  padding: 10px 12px 14px;
}

/* "More..." links */
.morelink,
.morelink:visited {
  color: var(--ui-accent) !important;
  font-weight: 700;
}

.tabs ul.tab-links,
.tabs ul.tabs-mv {
  /* Keep legacy float-based layout; just remove markers */
  list-style: none;
}

@media (max-width: 767.98px) {
  .tabs ul.tab-links,
  .tabs ul.tabs-mv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
  }

  .tabs ul.tab-links li,
  .tabs ul.tabs-mv li {
    float: none !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Mustache-rendered gallery list */
#item-list {
  margin: 0;
  padding: 0;
}

/* Fallback for variable definitions (some tooling may leave an invalid ::root selector) */
:root {
  --ui-accent: #ba1d48;
  --ui-accent-2: #d42a5a;
  --ui-text: #1f2937;
  --ui-muted: #6b7280;
  --ui-border: rgba(0, 0, 0, 0.08);
  --ui-card: #ffffff;
  --ui-bg: #f3f4f6;
  --ui-radius: 16px;
}

