/* Main page photos, map, and music styles. */
.photo-masonry { column-count: 3; column-gap: 3px; }
.photo-masonry.is-empty { column-count: 1 !important; }
.photo-item {
  break-inside: avoid; margin-bottom: 3px;
  position: relative; cursor: pointer; overflow: hidden;
}
.photo-item img { width: 100%; height: auto; display: block; }
.photo-item .photo-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff; font-family: 'Lora', 'Inter', 'Noto Serif SC', serif;
  font-size: 11px; letter-spacing: 0.02em;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.photo-item:hover .photo-info { opacity: 1; transform: translateY(0); }
.photo-item:hover .photo-date { opacity: 1; }
.photo-info .gps-link { pointer-events: auto; }
.photo-batch { display: contents; }
.load-more-btn {
  background: none !important; border: none !important;
  font-family: 'Lora', 'Noto Serif SC', serif !important;
  font-style: italic; font-size: 13px; letter-spacing: 0.1em;
  color: #999; padding: 12px 0; cursor: pointer;
  transition: color .3s ease, transform .3s ease;
}
.load-more-btn:hover { color: var(--fg); transform: translateY(3px); }
.photo-item .photo-date {
position: absolute; top: 8px; right: 10px;
font-family: 'Lora', 'Inter', 'Noto Serif SC', serif;
font-size: 10px; color: #fff;
background: rgba(0,0,0,0.45); padding: 2px 8px; border-radius: 3px;
letter-spacing: 0.03em; pointer-events: none; z-index: 2;
opacity: 0; transition: opacity .3s ease;
}

/* Grid/Map toggle */
.section-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 48px;
}
.section-header .section-tag { margin-bottom: 0; }
.view-toggle {
  font-family: 'Lora', 'Inter', 'Noto Serif SC', serif;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; user-select: none;
}
.view-toggle span { transition: color .2s; }
.view-toggle .active { color: var(--c2); }
.view-toggle .inactive { color: #ccc; }
html.dark .view-toggle .inactive { color: #555; }

/* Map container in photography */
#photo-map-container {
  display: none; width: 100%; height: 55vh;
  scroll-margin-top: 80px;
  border-radius: 12px; overflow: hidden;
  border: 2px solid var(--c2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* Custom marker (matching map.html) */
.custom-marker { background: none !important; border: none !important; }
.custom-marker .marker-dot {
  width: 12px; height: 12px;
  background-color: #0066ff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: transform 0.2s;
}
.custom-marker:hover .marker-dot { transform: scale(1.5); }

/* Dark mode leaflet */
html.dark .leaflet-layer,
html.dark .leaflet-control-zoom-in,
html.dark .leaflet-control-zoom-out,
html.dark .leaflet-control-attribution {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
html.dark .leaflet-marker-icon,
html.dark .leaflet-marker-shadow,
html.dark .leaflet-popup { filter: none; }
.leaflet-popup-content-wrapper {
  padding: 4px;
  overflow: hidden;
}
.leaflet-popup-content {
  font-family: 'Lora', 'Inter', 'Noto Serif SC', serif;
  margin: 8px;
  font-size: 12px; line-height: 1.3; min-width: 0;
}
.leaflet-popup-content img {
  display: block;
  width: auto; height: auto;
  max-width: 100%; max-height: 180px;
  object-fit: contain;
  border-radius: 4px;
  margin: 0 auto 4px;
  cursor: zoom-in;
}
.leaflet-popup-content b {
  display: block; margin: 0;
}
.leaflet-popup-tip-container {
  width: 20px; height: 10px;
}
.leaflet-popup-close-button {
  padding: 4px 4px 0 0;
  z-index: 10;
  position: relative;
}
@media (max-width: 480px) {
  .leaflet-popup-content img {
    max-width: 160px; max-height: 130px;
  }
}
.leaflet-popup-content .popup-exif { color: #888; font-size: 10px; }
.music-list { display: flex; flex-direction: column; }
.music-row {
  display: grid; grid-template-columns: 50px 1fr auto; gap: 20px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid var(--line); cursor: pointer;
  position: relative; transition: padding-left .3s;
  --progress: 0%;
}
.music-row { --theme: rgba(255,184,0,0.10); --idx-color: #ffb800; } /* fallback */
.music-row:hover { padding-left: 24px; background: rgba(255,255,255,0.5); }
.music-row.playing { background: linear-gradient(to right, var(--theme) var(--progress), transparent var(--progress)); }
.music-row.playing:hover { background: linear-gradient(to right, var(--theme) var(--progress), transparent var(--progress)); }
.music-row .idx { font-family: 'Lora', 'Inter', 'Noto Serif SC', serif; font-size: 13px; font-weight: 700; color: #ddd; transition: color .3s, transform .3s; display: inline-block; min-width: 28px; text-align: center; }
.music-row.playing .idx { color: var(--idx-color); animation: pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.music-row.paused .idx { animation-play-state: paused !important; }
.music-row .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.music-row .title { font-family: 'Lora', 'Inter', 'Noto Serif SC', serif; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-row .artist { font-family: 'Lora', 'Inter', 'Noto Serif SC', serif; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-row .time { font-family: 'Inter', 'Noto Sans SC', sans-serif; font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 85px; text-align: right; font-variant-numeric: tabular-nums; }
.stars { font-size: 11px; color: #ccc; }
.stars::before { content: '· '; }