/* view-nav.css — Shared View Navigation Styles */
/* SPI-558 P1b: THE FILE DECLARES ITS OWN LAYER.
   It is loaded by a <link>, and a <link> carries no layer attribute, so an
   unlayered sheet here would outrank every layer in the builder. Two modules
   used to load it and they disagreed: catalogue-module.js appended a plain
   <link> (unlayered) and view-nav-module.js a <style> holding
   @import ... layer(decoration). Both used the same element id, so whichever
   module rendered first decided the precedence of this whole file. One
   loader now, in the template, and the layer is declared here.

   A stray "å" (bytes c3 a5) sat on line 2 of this file and is removed. */
@layer decoration {

    /* Gallery Header */
    .gallery-header {
      text-align: center;
      padding: 20px 16px 10px;
    }

    .gallery-title {
      font-size: 2rem;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 4px;
      text-align:center;
    }

    .gallery-subtitle {
      font-size: 1.1rem;
      color: #666;
      margin-bottom: 6px;
    }

    .gallery-tags {
      font-size: 14px;
      color: #999;
    }

    .gallery-tags span {
      display: inline-block;
      background: #e9ecef;
      padding: 2px 10px;
      border-radius: 12px;
      margin: 2px 3px;
      font-size: 12px;
    }

    /* View navigation */




.view-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 20px;
    flex-wrap: wrap;
}

.view-nav a {
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    background: #e9ecef;
    transition: all 0.2s;
}

.view-nav a:hover {
    background: #dee2e6;
    color: #333;
}

.view-nav a.active {
    background: #333;
    color: #fff;
}

.view-nav a.edit-link {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.view-nav a.edit-link:hover {
    background: rgba(99, 102, 241, 0.2);
}

/* Country Map Footer */
.cmf {
    margin: 60px auto 40px;
    max-width: 900px;
    padding: 24px;
    background: rgba(20, 20, 30, 0.95);
    border-radius: 16px;
    border: 1px solid rgba(100, 150, 255, 0.15);
}

.cmf-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.cmf-icon { font-size: 20px; }

.cmf-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.cmf-count {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

.cmf-link {
    margin-left: auto;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(100,150,255,0.15);
    color: rgba(100,150,255,0.9);
    text-decoration: none;
    font-weight: 600;
}
.cmf-link:hover { background: rgba(100,150,255,0.25); }

.cmf-map-wrap {
    position: relative;
    margin-bottom: 12px;
    min-height: 200px;
}

/* Dots on map */
.cmf-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: 2px solid rgba(255,255,255,0.5);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
}

.cmf-dot-active {
    background: rgba(100, 150, 255, 0.7);
    border-color: rgba(100, 150, 255, 1);
    box-shadow: 0 0 10px rgba(100, 150, 255, 0.5);
}

.cmf-dot:hover {
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 16px rgba(100, 150, 255, 0.8);
}

.cmf-dot-selected {
    transform: translate(-50%, -50%) scale(1.6);
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

.cmf-dot-label {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    background: rgba(0,0,0,0.6);
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.cmf-dot:hover .cmf-dot-label,
.cmf-dot-selected .cmf-dot-label { opacity: 1; }

.cmf-dot-unmapped {
    border-style: dashed;
    opacity: 0.7;
}

/* Photo reveal area */
.cmf-photo-reveal {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.cmf-reveal-open {
    max-height: 500px;
    overflow-y: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.cmf-reveal-label {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.cmf-reveal-count {
    font-weight: 400;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-left: 6px;
}

.cmf-reveal-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.cmf-reveal-card {
    flex-shrink: 0;
    width: 120px;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.15s;
    background: rgba(255,255,255,0.05);
}

.cmf-reveal-card:hover {
    border-color: rgba(100, 150, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.cmf-reveal-card img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}

.cmf-reveal-caption {
    padding: 4px 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lightbox */
.cmf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cmf-lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
}

.cmf-lb-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    text-align: center;
}

.cmf-lb-content img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

.cmf-lb-title {
    color: #fff;
    font-size: 14px;
    margin-top: 10px;
    opacity: 0.8;
}

.cmf-lb-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cmf-lb-close:hover { background: rgba(255,255,255,0.3); }
}