/* ==========================================
   R60 Galerie – Stylesheet
   Rakovnická 60 Trail Event Photo Gallery
   ========================================== */

:root {
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-text: #111111;
    --color-text-light: #666666;
    --color-primary: #c2572a;
    --color-primary-hover: #a84920;
    --color-primary-light: #fef2ee;
    --color-accent: #3a7d44;
    --color-accent-light: #e8f3ea;
    --color-border: #e5e5e5;
    --color-danger: #c0392b;
    --color-heart: #e74c3c;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
    --radius: 10px;
    --radius-sm: 6px;
    --font: 'Inter', -apple-system, sans-serif;
    --max-width: 1440px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    font-family: var(--font);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ---- Header ---- */
.header {
    background: #1a1a1a;
    color: #fff;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    gap: 1rem;
}

.logo {
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.logo span { font-weight: 300; opacity: 0.7; }

.header-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.user-badge {
    font-size: 0.85rem;
    background: rgba(255,255,255,0.12);
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    white-space: nowrap;
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.55rem 1.2rem;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    background: var(--color-surface);
    color: var(--color-text);
}

.btn:hover { box-shadow: var(--shadow-sm); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.82rem; }
.btn-full { width: 100%; justify-content: center; padding: 0.75rem; font-size: 1rem; }
.btn-ghost { background: transparent; color: var(--color-text-light); }
.btn-ghost:hover { background: rgba(0,0,0,0.05); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }
.btn-share { background: #1877F2; color: #fff; display: inline-flex; align-items: center; }
.btn-share:hover { background: #166FE5; color: #fff; }

.btn-tiny {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-text-light);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

.btn-tiny:hover { background: rgba(192,57,43,0.1); color: var(--color-danger); }
.inline-form { display: inline; }

/* ---- Main ---- */
.main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

/* ---- Alerts ---- */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error { background: #fdecea; color: var(--color-danger); }
.alert-success { background: var(--color-accent-light); color: var(--color-accent); }
.alert-info { background: #e8f0fe; color: #1a5fb4; }

/* ---- Activity Banner ---- */
.activity-banner {
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 0;
    margin-bottom: 1rem;
    overflow: hidden;
    animation: activitySlideIn 0.4s ease-out;
}

@keyframes activitySlideIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.activity-banner-summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
}

.activity-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.activity-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-text);
}

.activity-toggle {
    font-size: 0.8rem;
    white-space: nowrap;
}

.activity-dismiss {
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    opacity: 0.6;
}
.activity-dismiss:hover { opacity: 1; }

.activity-detail {
    border-top: 1px solid rgba(194, 87, 42, 0.15);
    padding: 0.5rem 0;
}

.activity-detail.hidden { display: none; }

.activity-photo-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.15s;
}

.activity-photo-row:hover {
    background: rgba(194, 87, 42, 0.08);
}

.activity-thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.activity-photo-info {
    flex: 1;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-photo-stats {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-primary);
}

/* Responsive: stack on mobile */
@media (max-width: 480px) {
    .activity-banner-summary { gap: 0.4rem; }
    .activity-text { font-size: 0.82rem; }
    .activity-thumb { width: 40px; height: 40px; }
}

/* ---- Stats Bar ---- */
.stats-bar {
    display: flex;
    gap: 2rem;
    padding: 0.75rem 0;
    margin-bottom: 0;
}

.stat { font-size: 0.9rem; color: var(--color-text-light); }
.stat strong { color: var(--color-text); font-size: 1.1rem; }

/* ======== Feature 1: Hero — Fotka dne ======== */

.hero-photo {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-lg);
    background: #1a1a1a;
}

.hero-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    font-size: 0.88rem;
    font-weight: 600;
    z-index: 2;
}

.hero-image-link {
    display: block;
    position: relative;
    max-height: 420px;
    overflow: hidden;
    cursor: pointer;
}

.hero-image-link img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.4s, object-position 0.6s ease;
}

.hero-photo:hover .hero-image-link img { transform: scale(1.02); }

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.75));
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
}

.hero-info {
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.hero-author {
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.hero-author .author-number { background: rgba(255,255,255,0.2); color: #fff; }
.hero-caption { font-size: 1.05rem; font-weight: 500; opacity: 0.95; }
.hero-hearts { font-size: 0.9rem; opacity: 0.85; }

/* ======== Feature 3: Author Profile & My Photos ======== */

.author-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.author-profile-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
}

.author-profile-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.88rem;
    color: var(--color-text-light);
}

.author-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.15s;
}

.author-link:hover { color: var(--color-primary); }

/* ---- Filters ---- */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    margin-bottom: 1.25rem;
    border-top: none;
    border-bottom: none;
}

.filter-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.filter-tag {
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--color-text-light);
    background: #f5f5f5;
    border: 1px solid transparent;
    transition: all 0.15s;
}

.filter-tag:hover { background: #ebebeb; color: var(--color-text); }
.filter-tag.active { background: var(--color-text); color: #fff; border-color: transparent; }

.filter-tag-mine { border-color: var(--color-accent); color: var(--color-accent); }
.filter-tag-mine:hover { background: var(--color-accent-light); border-color: var(--color-accent); color: var(--color-accent); }
.filter-tag-mine.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

.filter-sort { display: flex; gap: 0.75rem; }

.sort-link {
    font-size: 0.82rem;
    text-decoration: none;
    color: var(--color-text-light);
    padding-bottom: 2px;
}

.sort-link:hover { color: var(--color-text); }
.sort-link.active { color: var(--color-text); border-bottom: 2px solid var(--color-text); }

/* ---- Photo Grid (JS masonry — row-first ordering) ---- */
.photo-grid {
    position: relative;
    /* height set dynamically by JS masonry */
}

.photo-card {
    position: absolute;
    /* top/left/width set by JS masonry */
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    transition: none;
}

.photo-card:hover {
    transform: none;
    box-shadow: none;
}

/* Image wrapper — positioning context for hover overlay */
.photo-image-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f0f0f0;
}

.photo-image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s;
    pointer-events: none;
}

.photo-card:hover .photo-image-wrap::after {
    background: rgba(0, 0, 0, 0.12);
}

.photo-link {
    display: block;
    overflow: hidden;
}

.photo-link img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Blurhash placeholder: image starts transparent, fades in over the blurry background */
.photo-link img[data-blurhash] {
    opacity: 0;
    transition: opacity 0.4s ease-in;
    min-height: 120px;  /* reserve space so masonry layout works before image loads */
}
.photo-link img[data-blurhash].loaded {
    opacity: 1;
    min-height: 0;
}

/* Hover overlay — anchored to bottom of image */
.photo-hover-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.photo-card:hover .photo-hover-actions,
.photo-hover-actions:focus-within {
    opacity: 1;
    pointer-events: auto;
}

/* Touch devices: always show overlay so hearts are tappable */
@media (hover: none) {
    .photo-hover-actions {
        opacity: 1;
        pointer-events: auto;
    }
}

.photo-hover-actions .heart-btn {
    color: rgba(255,255,255,0.9);
}
.photo-hover-actions .heart-btn.hearted {
    color: var(--color-heart);
}
.photo-hover-actions .comment-link {
    color: rgba(255,255,255,0.9);
}
.photo-hover-actions .photo-category {
    color: rgba(255,255,255,0.75);
    font-size: 0.72rem;
    margin-left: auto;
}

.photo-meta {
    padding: 0.5rem 0.25rem 0;
}

.photo-meta .author-number { display: none; }

.photo-author {
    font-size: 0.82rem;
    color: var(--color-text-light);
    margin-bottom: 0.15rem;
}

.author-number {
    display: inline-block;
    background: #f0f0f0;
    color: var(--color-text-light);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    margin-right: 0.2rem;
}

.photo-caption {
    font-size: 0.82rem;
    color: var(--color-text);
    margin-bottom: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.heart-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
    font-family: var(--font);
    color: var(--color-text-light);
}

.heart-btn:hover { background: rgba(231, 76, 60, 0.08); }
.heart-btn.hearted { color: var(--color-heart); }
.heart-btn-large { font-size: 1.2rem; padding: 0.4rem 0.6rem; }
.heart-count { font-weight: 500; }

/* Heart burst particle animation */
.heart-burst {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
}

.heart-burst span {
    position: absolute;
    font-size: 0.75rem;
    opacity: 0;
    animation: heartBurstFloat 0.65s ease-out forwards;
}

@keyframes heartBurstFloat {
    0% { opacity: 1; transform: translate(0,0) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx, 20px), var(--ty, -30px)) scale(0.3); }
}

.comment-link {
    font-size: 0.85rem;
    color: var(--color-text-light);
    text-decoration: none;
}

.comment-link:hover { color: var(--color-primary); }
.photo-category { font-size: 0.78rem; margin-left: auto; }

/* ---- Infinite Scroll Sentinel ---- */
.scroll-sentinel {
    display: flex;
    justify-content: center;
    padding: 2rem 0 3rem;
}

.scroll-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-text-light);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
    animation: scrollSpin 0.7s linear infinite;
}

.scroll-sentinel.loading .scroll-spinner {
    opacity: 1;
}

@keyframes scrollSpin {
    to { transform: rotate(360deg); }
}

/* ---- Empty State ---- */
.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--color-text-light);
}

.empty-state p { margin-bottom: 1rem; font-size: 1.1rem; }

/* ---- Pagination ---- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0;
}

.page-info { font-size: 0.9rem; color: var(--color-text-light); }

/* ======== Feature 2: Lightbox ======== */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;

    pointer-events: none;        /* ✅ DŮLEŽITÉ */
}

.lightbox-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 1;
}


/* Extra safety: if hidden attribute is present, force it off-screen */
.lightbox[hidden] {
    display: none !important;
}

.lightbox.lightbox-open {
    opacity: 1;
    pointer-events: auto;        /* ✅ kliky povol až po otevření */
}

.lightbox-image-wrap { position: relative; }

.lightbox-close{
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 5;
}


.lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* Dark backdrop behind the enlarged photo */
.lightbox-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.82); /* ← adjust darkness here */
    z-index: 1;
  }
  

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    line-height: 1;
}

.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

.lightbox-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-image-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.lightbox-img {
    max-width: 88vw;
    max-height: 72vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    transition: opacity 0.3s;
}

.lightbox-spinner {
    position: absolute;
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lbSpin 0.8s linear infinite;
}

@keyframes lbSpin {
    to { transform: rotate(360deg); }
}

.lightbox-info {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    margin-top: 0.75rem;
    color: #fff;
    min-width: 300px;
    max-width: 600px;
    text-align: center;
}

.lightbox-author {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.lightbox-author .author-number {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.lightbox-caption {
    font-size: 0.88rem;
    opacity: 0.85;
    margin-bottom: 0.4rem;
}

.lightbox-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.3rem;
}

.lightbox-actions .heart-btn { color: rgba(255,255,255,0.8); }
.lightbox-actions .heart-btn.hearted { color: var(--color-heart); }
.lightbox-actions .heart-btn:hover { background: rgba(255,255,255,0.1); }

.lightbox-category { font-size: 0.8rem; opacity: 0.7; }

.lightbox-detail-link {
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 0.8rem;
}

.lightbox-detail-link:hover { background: rgba(255,255,255,0.22); }

/* ---- Photo Detail ---- */
.photo-detail-main { max-width: 900px; }

.photo-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.photo-detail {
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
}

.photo-detail-image {
    background: #1a1a1a;
    display: flex;
    justify-content: center;
}

.photo-detail-image img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
}

.photo-detail-info { padding: 1.25rem; }

.photo-detail-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.photo-date { font-size: 0.82rem; color: var(--color-text-light); }
.photo-detail-caption { font-size: 1rem; margin-bottom: 1rem; }

.photo-detail-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---- Comments ---- */
.comments-section {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.comments-section h3 { margin-bottom: 1rem; font-size: 1.1rem; }

.comments-empty {
    color: var(--color-text-light);
    font-size: 0.9rem;
    padding: 0.5rem 0 1rem;
}

.comment {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}

.comment:last-of-type { border-bottom: none; }

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.comment-date { font-size: 0.78rem; color: var(--color-text-light); }
.comment-text { font-size: 0.9rem; line-height: 1.5; }

.comment-form {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.comment-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.9rem;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s;
}

.comment-form textarea:focus { outline: none; border-color: var(--color-primary); }

/* Login prompt for non-logged users */
.login-prompt {
    margin-top: 1.25rem;
    padding: 1rem;
    text-align: center;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.login-prompt .btn {
    margin-right: 0.5rem;
}

/* Heart display for non-logged users (non-clickable) */
.heart-display {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
    color: var(--color-text-light);
    cursor: default;
}

.heart-display.heart-btn-large {
    font-size: 1.2rem;
    padding: 0.4rem 0.6rem;
}

/* Anonymous user badge in comments */
.anonymous-author {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-light);
}

.visitor-badge {
    font-size: 0.9rem;
}

/* ---- Login Page ---- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d6a35 50%, #c2572a 100%);
}

.login-container {
    background: var(--color-surface);
    padding: 2.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 380px;
    margin: 1rem;
}

.login-brand { text-align: center; margin-bottom: 2rem; }
.login-brand h1 { font-size: 1.8rem; font-weight: 700; color: var(--color-primary); }
.login-subtitle { font-size: 1.1rem; color: var(--color-text-light); margin-top: 0.25rem; }
.login-form { margin-bottom: 1rem; }
.login-hint { font-size: 0.82rem; color: var(--color-text-light); text-align: center; }

/* ---- Forms ---- */
.form-group { margin-bottom: 1rem; }

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
    color: var(--color-text);
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.95rem;
    transition: border-color 0.2s;
    background: #fff;
}

.form-group input:focus,
.form-group select:focus { outline: none; border-color: var(--color-primary); }

/* ======== Feature 4: Upload Queue ======== */

.upload-main { max-width: 700px; }

.upload-container h2 { margin-bottom: 0.5rem; }

.upload-info {
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.file-drop {
    position: relative;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.file-drop:hover, .file-drop.drag-over {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-drop-icon { font-size: 2rem; }
.file-drop-text p { margin: 0.3rem 0; font-size: 0.95rem; }
.file-drop-hint { font-size: 0.82rem; color: var(--color-text-light); }

/* Upload queue cards */
.upload-queue {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.upload-card {
    display: flex;
    gap: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    transition: all 0.3s;
}

.upload-card-done {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.upload-card-error {
    border-color: var(--color-danger);
    background: #fdecea;
}

.upload-card-preview {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color-bg);
}

.upload-card-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-card-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.upload-card:hover .upload-card-remove { opacity: 1; }

.upload-card-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.upload-card-caption {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.85rem;
    transition: border-color 0.2s;
}

.upload-card-caption:focus { outline: none; border-color: var(--color-primary); }

.upload-card-category {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.82rem;
    background: #fff;
    width: fit-content;
}

.upload-card-name {
    font-size: 0.75rem;
    color: var(--color-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-card-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background: var(--color-border);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width 0.3s;
}

.upload-card-done .progress-fill { background: var(--color-accent); width: 100%; }
.upload-card-error .progress-fill { background: var(--color-danger); width: 100%; }

.progress-status {
    font-size: 0.75rem;
    color: var(--color-text-light);
    white-space: nowrap;
}

.progress-text {
    font-size: 0.85rem;
    color: var(--color-text-light);
    font-weight: 500;
}

/* Upload bulk bar */
.upload-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.upload-bulk-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.upload-bulk-left select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.82rem;
}

.upload-overall-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.upload-overall-progress .progress-bar {
    height: 8px;
}

.upload-action-bar {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.upload-action-bar .btn-full { flex: 1; }

/* Upload done state */
.upload-done {
    text-align: center;
    padding: 2rem 1rem;
}

.upload-done-icon { font-size: 3rem; margin-bottom: 0.5rem; }
.upload-done h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.upload-done p { color: var(--color-text-light); margin-bottom: 1.5rem; }

.upload-done-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Old preview styles kept for compatibility */
.file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    justify-content: center;
}

.preview-thumb {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Admin ---- */
.admin-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--color-border);
}

.admin-tab {
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    color: var(--color-text-light);
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}

.admin-tab:hover { color: var(--color-primary); }
.admin-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.admin-photo-card {
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.admin-photo-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.admin-photo-info {
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    color: var(--color-text-light);
}

.admin-photo-info strong { display: block; color: var(--color-text); }

.admin-photo-actions {
    display: flex;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--color-border);
}

.admin-section { margin-bottom: 2rem; }
.admin-section h3 { margin-bottom: 1rem; font-size: 1.1rem; }

.admin-section textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    resize: vertical;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.admin-table th, .admin-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--color-border);
}

.admin-table th { background: var(--color-bg); font-weight: 500; }

.admin-thumb {
    width: 60px;
    height: 45px;
    object-fit: cover;
    border-radius: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .header-inner { height: auto; padding: 0.5rem 0; flex-wrap: wrap; gap: 0.4rem; }
    .header-nav { gap: 0.3rem; }
    .logo { white-space: normal; font-size: 1rem; min-width: 0; }
    .logo span, .logo-subtitle { font-size: 0.85rem; }
    .stats-bar { gap: 1rem; }
    .filters { flex-direction: column; align-items: flex-start; }
    .photo-grid { /* JS masonry handles responsive columns */ }
    .photo-card { margin-bottom: 0.5rem; border-radius: 12px; }
    .photo-link { border-radius: 12px; }
    .photo-link::after { border-radius: 12px; }
    .photo-card .photo-hover-actions { border-radius: 0 0 12px 12px; opacity: 1; pointer-events: auto; }
    .photo-meta { padding: 0.5rem 0.75rem; }
    .photo-actions { gap: 0.5rem; }
    .photo-category { display: none; }
    .login-container { padding: 1.5rem; margin: 0.5rem; }
    .admin-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

    /* Hero responsive */
    .hero-image-link, .hero-image-link img { max-height: 260px; height: 260px; }
    .hero-overlay { padding: 1rem; }
    .hero-caption { font-size: 0.9rem; }

    /* Lightbox responsive */
    .lightbox-nav { width: 40px; height: 40px; font-size: 1.5rem; }
    .lightbox-prev { left: 0.5rem; }
    .lightbox-next { right: 0.5rem; }
    .lightbox-img { max-width: 96vw; max-height: 65vh; }
    .lightbox-info { min-width: 0; max-width: 90vw; padding: 0.6rem 0.75rem; }

    /* Upload responsive */
    .upload-card { flex-direction: column; }
    .upload-card-preview { width: 100%; height: 150px; }
    .upload-card-remove { opacity: 1; }
    .upload-bulk-bar { flex-direction: column; align-items: flex-start; }
    .upload-action-bar { flex-direction: column; }

    /* Author profile responsive */
    .author-profile { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

    /* Edition tiles responsive */
    .editions-grid { grid-template-columns: 1fr; }
    .edition-tile-cover { height: 220px; }
}

/* ==========================================
   Edition Landing Page
   ========================================== */

.editions-intro {
    text-align: center;
    padding: 2rem 0 1.5rem;
}

.editions-intro h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.editions-intro p {
    color: var(--color-text-light);
    font-size: 1rem;
}

.editions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.edition-tile {
    display: block;
    background: var(--color-surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.2s, box-shadow 0.2s;
}

.edition-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.edition-tile-cover {
    position: relative;
    height: 280px;
    overflow: hidden;
    background-color: #3a5a3a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-size 0.3s;
}

.edition-tile-cover:not(.has-cover) {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d6a35 50%, #c2572a 100%);
}

.edition-tile:hover .edition-tile-cover.has-cover {
    background-size: 110%;
}

.edition-tile-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 4rem;
    background: linear-gradient(135deg, #f7f7f7 0%, #e5e5e5 100%);
}

.edition-tile-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1.25rem 1rem;
    background: linear-gradient(transparent 0%, rgba(0,0,0,0.7) 100%);
    color: #fff;
}

.edition-tile-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.edition-tile-subtitle {
    font-size: 0.95rem;
    opacity: 0.85;
    font-weight: 300;
}

.edition-tile-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
}

.edition-tile-stats {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.9rem 1.25rem;
    font-size: 0.88rem;
    color: var(--color-text-light);
    border-top: 1px solid var(--color-border);
}

.edition-tile-stats .btn-share {
    margin-left: auto;
}

/* Logo subtitle (edition name in header) */
.logo-subtitle {
    font-weight: 300;
    opacity: 0.7;
    font-size: 0.9em;
}

/* ---- Admin: Editions Tab ---- */
.admin-edition-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
    flex-wrap: wrap;
}

.admin-edition-badge {
    display: inline-block;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    margin-top: 0.2rem;
}

.admin-form-inline .form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.admin-form-inline .form-group {
    margin-bottom: 0;
}

.admin-form-inline .form-group input,
.admin-form-inline .form-group select {
    width: auto;
    min-width: 100px;
}

.admin-table input[type="text"],
.admin-table input[type="number"],
.admin-table select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.82rem;
    background: #fff;
}