/* ============================================
   PHOTO ALBUM — Component Styles
   Version: 1.0

   100% REM-based — ZERO px values
   Dark mode DEFAULT
   Mobile-first responsive
   Uses design tokens from collections.css
   ============================================ */

/* ============================================
   1. PHOTO CARD
   ============================================ */
.photo-card {
  position: relative;
  background-color: var(--bg-secondary);
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all var(--transition-smooth);
}

.photo-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-0.125rem);
  border-color: var(--border-secondary);
}

/* ============================================
   2. PHOTO CARD IMAGE
   ============================================ */
.photo-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--bg-tertiary);
}

.photo-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.photo-card:hover .photo-card-image img {
  transform: scale(1.05);
}

/* ============================================
   3. PHOTO OVERLAY
   ============================================ */
.photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.55));
  opacity: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4);
  gap: var(--space-2);
  transition: opacity var(--transition-base);
  z-index: 1;
}

.photo-card:hover .photo-overlay {
  opacity: 1;
}

/* ============================================
   4. PHOTO ACTION BUTTONS
   ============================================ */
.photo-action-btn {
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--radius-full);
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  color: #FFFFFF;
  border: 0.0625rem solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.photo-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.1);
}

.photo-action-btn:focus-visible {
  outline: 0.125rem solid #FFFFFF;
  outline-offset: 0.125rem;
}

.photo-action-btn:active {
  transform: scale(0.95);
}

/* Favorited state */
.photo-action-btn.is-faved {
  color: var(--error-500);
}

.photo-action-btn.is-faved:hover {
  color: var(--error-600);
  background-color: rgba(239, 68, 68, 0.2);
}

/* ============================================
   5. DETAIL HERO — PHOTO_ALBUM TYPE
   ============================================ */
.detail-hero.type-PHOTO_ALBUM::before {
  background: linear-gradient(90deg, #8B5CF6, #EC4899);
}

/* ============================================
   6. PHOTO CARD CAPTION
   ============================================ */
.photo-card-caption {
  padding: var(--space-3) var(--space-4);
}

.photo-card-caption-title {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  line-height: var(--leading-snug);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-card-caption-meta {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ============================================
   7. PHOTO UPLOAD ZONE
   ============================================ */
.photo-upload-zone {
  position: relative;
  border: 0.125rem dashed var(--border-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  cursor: pointer;
  background-color: var(--bg-primary);
  transition: all var(--transition-smooth);
}

.photo-upload-zone:hover {
  border-color: var(--brand-500);
  background-color: rgba(59, 130, 246, 0.03);
}

.dark .photo-upload-zone:hover {
  background-color: rgba(59, 130, 246, 0.06);
}

.photo-upload-zone.drag-over {
  border-color: var(--brand-500);
  background-color: rgba(59, 130, 246, 0.08);
  transform: scale(1.01);
}

.dark .photo-upload-zone.drag-over {
  background-color: rgba(59, 130, 246, 0.12);
}

.photo-upload-zone-icon {
  font-size: var(--text-5xl);
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
  transition: all var(--transition-fast);
}

.photo-upload-zone:hover .photo-upload-zone-icon,
.photo-upload-zone.drag-over .photo-upload-zone-icon {
  color: var(--brand-500);
  transform: translateY(-0.125rem);
}

.photo-upload-zone-title {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.photo-upload-zone-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.photo-upload-zone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ============================================
   8. PHOTO LIGHTBOX IMAGE
   ============================================ */
.photo-lightbox-image {
  max-width: 100%;
  max-height: calc(85vh - 10rem);
  object-fit: contain;
  border-radius: var(--radius-lg);
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================
   9. PHOTO GRID TOOLBAR
   ============================================ */
.photo-grid-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  flex-wrap: wrap;
}

.photo-grid-toolbar-search {
  flex: 1;
  min-width: 12rem;
}

.photo-grid-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.photo-grid-toolbar-divider {
  width: 0.0625rem;
  height: 1.5rem;
  background-color: var(--border-primary);
  flex-shrink: 0;
}

@media (max-width: 39.9375rem) {
  .photo-grid-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .photo-grid-toolbar-search {
    width: 100%;
    min-width: auto;
  }

  .photo-grid-toolbar-actions {
    justify-content: flex-end;
  }
}

/* ============================================
   10. PHOTO STAT PILL
   ============================================ */
.photo-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2-5);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.photo-stat-pill i {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.photo-stat-pill.photo-stat-pill--photos {
  background-color: rgba(139, 92, 246, 0.1);
  color: #8B5CF6;
}

.dark .photo-stat-pill.photo-stat-pill--photos {
  background-color: rgba(139, 92, 246, 0.15);
  color: #A78BFA;
}

.photo-stat-pill.photo-stat-pill--favs {
  background-color: rgba(236, 72, 153, 0.1);
  color: #EC4899;
}

.dark .photo-stat-pill.photo-stat-pill--favs {
  background-color: rgba(236, 72, 153, 0.15);
  color: #F472B6;
}

.photo-stat-pill.photo-stat-pill--size {
  background-color: rgba(34, 197, 94, 0.1);
  color: var(--success-600);
}

.dark .photo-stat-pill.photo-stat-pill--size {
  background-color: rgba(34, 197, 94, 0.15);
  color: var(--success-500);
}

/* ============================================
   11. PHOTO FAVORITE COUNT BADGE
   ============================================ */
.photo-fav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 var(--space-1);
  font-size: 0.625rem;
  font-weight: var(--font-bold);
  line-height: 1;
  color: #FFFFFF;
  background-color: var(--error-500);
  border-radius: var(--radius-full);
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  z-index: 2;
  animation: scaleIn var(--transition-fast) ease forwards;
}

.photo-fav-count:empty {
  display: none;
}

/* ============================================
   12. MOBILE TOUCH FALLBACK
   Show overlay on touch devices since hover is unavailable
   ============================================ */
@media (hover: none) {
  .photo-overlay {
    opacity: 1;
    background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.6));
  }

  .photo-card:hover .photo-card-image img {
    transform: none;
  }

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

  .photo-action-btn {
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(0.25rem);
    -webkit-backdrop-filter: blur(0.25rem);
  }
}

/* ============================================
   13. RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet (640+) */
@media (min-width: 40rem) {
  .photo-card-caption {
    padding: var(--space-3-5) var(--space-4);
  }

  .photo-upload-zone {
    padding: var(--space-16) var(--space-8);
  }
}

/* Desktop (1024+) */
@media (min-width: 64rem) {
  .photo-upload-zone {
    padding: var(--space-20) var(--space-12);
  }
}

/* ============================================
   14. PHOTO-SPECIFIC ANIMATIONS
   ============================================ */
@keyframes photoFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% { transform: scale(1); }
  15% { transform: scale(1.25); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}

.photo-card.is-loading {
  animation: photoFadeIn var(--transition-slow) ease forwards;
}

.photo-action-btn.is-faved i {
  animation: heartBeat 0.8s ease;
}

/* ============================================
   15. UPLOAD PREVIEW GRID
   ============================================ */
.upload-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--space-3);
}

.upload-preview-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--bg-tertiary);
  border: 0.0625rem solid var(--border-primary);
  transition: all var(--transition-fast);
}

.upload-preview-item:hover {
  border-color: var(--border-secondary);
}

.upload-preview-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.upload-preview-info {
  padding: var(--space-1-5) var(--space-2);
}

.upload-preview-name {
  font-size: 0.625rem;
  font-weight: var(--font-medium);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-preview-size {
  font-size: 0.5625rem;
  color: var(--text-tertiary);
  margin-top: var(--space-0-5);
}

.upload-preview-compressed {
  font-size: 0.5625rem;
  color: var(--success-500);
  margin-top: var(--space-0-5);
}

.upload-preview-remove {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 2;
}

.upload-preview-item:hover .upload-preview-remove {
  opacity: 1;
}

@media (hover: none) {
  .upload-preview-remove {
    opacity: 1;
  }
}

/* ============================================
   16. UPLOAD PROGRESS ROWS
   ============================================ */
.upload-progress-list {
  margin-top: var(--space-4);
}

.upload-progress-header {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.upload-progress-header .spinner {
  width: 1rem;
  height: 1rem;
}

.upload-progress-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1-5) 0;
  border-bottom: 0.0625rem solid var(--border-primary);
}

.upload-progress-row:last-child {
  border-bottom: none;
}

.upload-progress-name {
  flex: 0 0 8rem;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-progress-bar-wrap {
  flex: 1;
  min-width: 0;
}

.upload-progress-bar-wrap .progress-bar {
  height: 0.375rem;
}

.upload-progress-status {
  flex: 0 0 2rem;
  text-align: center;
  font-size: var(--text-xs);
}

.upload-progress-status i.fa-check-circle {
  color: var(--success-500);
}

.upload-progress-status i.fa-times-circle {
  color: var(--error-500);
}

.upload-progress-status .spinner {
  width: 0.875rem;
  height: 0.875rem;
}

.upload-progress-row.is-complete .progress-fill {
  background-color: var(--success-500);
}

.upload-progress-row.is-error .progress-fill {
  background-color: var(--error-500);
}

/* ============================================
   17. UPLOAD QUOTA BAR
   ============================================ */
.upload-quota {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-lg);
}

.upload-quota-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.upload-quota-bar {
  height: 0.375rem;
  background-color: var(--bg-primary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.upload-quota-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-smooth), background-color var(--transition-fast);
}

.upload-quota-fill.is-low {
  background-color: var(--success-500);
}

.upload-quota-fill.is-medium {
  background-color: var(--warning-500);
}

.upload-quota-fill.is-high {
  background-color: var(--error-500);
}

/* ============================================
   18. UPLOAD ALBUM SELECTOR
   ============================================ */
.upload-album-selector {
  margin-bottom: var(--space-4);
}

.upload-album-selector label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-1-5);
}

.upload-album-selector select {
  width: 100%;
}

/* ============================================
   19. SHARE MODAL
   ============================================ */
.share-modal-tabs {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
  border-bottom: 0.0625rem solid var(--border-primary);
  padding-bottom: 0;
}

.share-tab-btn {
  flex: 1;
  padding: var(--space-2-5) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-bottom: 0.125rem solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.share-tab-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
}

.share-tab-btn.active {
  color: var(--brand-500);
  border-bottom-color: var(--brand-500);
}

.share-tab-content {
  animation: fadeIn var(--transition-fast) ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(0.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

.share-link-result {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.share-link-url {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--brand-500);
  word-break: break-all;
  font-family: monospace;
}

.share-whatsapp-btn {
  background-color: #25D366;
  color: #FFFFFF;
  border: none;
  font-weight: var(--font-semibold);
}

.share-whatsapp-btn:hover {
  background-color: #20BD5A;
}

.share-whatsapp-btn:active {
  background-color: #1DA851;
}

/* ============================================
   20. PRINT STYLES
   ============================================ */
@media print {
  .photo-overlay,
  .photo-action-btn,
  .photo-upload-zone,
  .photo-grid-toolbar {
    display: none !important;
  }

  .photo-card {
    break-inside: avoid;
    box-shadow: none;
    border: 0.0625rem solid #E5E7EB;
  }

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

  .photo-card:hover .photo-card-image img {
    transform: none;
  }
}

/* Keep image actions visible when navigating with the keyboard. */
.photo-card:focus-within .photo-overlay { opacity: 1; }
.photo-card-image:focus-visible, .item-list-row[role="button"]:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.upload-error-message { color: var(--error-500); font-size: var(--text-xs); flex-basis: 100%; overflow-wrap: anywhere; }
.upload-progress-row.is-error { flex-wrap: wrap; }
#sharePaginationButtons { display: flex; flex-wrap: wrap; gap: var(--space-1); }
#shareLbCaption, #lightboxCaption { overflow-wrap: anywhere; }