/* ========================================
   CalProgs Prism Website Template System
   Copyright (c) 2025 CalProgs
   Template Version: 1.26.01060829
   File: portal/modules/gallery/common/styles.css
   ========================================
   Gallery Module-specific CSS classes
   Extracted from modules/common/styles.css for modular architecture
   ======================================== */

/* ========================================
   GALLERY MODULE STYLES
   ======================================== */

/* Gallery grid classes - ensure they're always included for dynamic content */
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Gallery widget specific styles */
.prism-gallery-container {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.prism-gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease;
  background-color: #ffffff;
  border: 2px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.prism-gallery-item:hover {
  transform: scale(1.02);
  border-color: #3b82f6;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.prism-gallery-image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.prism-gallery-date {
  padding: 0.5rem 0;
  text-align: center;
}

.prism-gallery-date-text {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

/* Gallery photo badges */
.prism-gallery-badge {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.prism-gallery-badge-left {
  top: 0.25rem;
  left: 0.25rem;
}

.prism-gallery-badge-right {
  top: 0.25rem;
  right: 0.25rem;
}

.prism-gallery-badge-red {
  background-color: #dc2626;
}

.prism-gallery-badge-blue {
  background-color: #2563eb;
}

.prism-gallery-badge-green {
  background-color: #16a34a;
}

.prism-gallery-badge-yellow {
  background-color: #d97706;
}

/* Gallery grid layouts */
.prism-gallery-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.prism-gallery-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.prism-gallery-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.prism-gallery-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.prism-gallery-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

/* Gallery grid layouts */
.prism-gallery-grid {
  display: grid;
  gap: 1rem;
}

/* Gallery column-specific classes (for widget compatibility) */
.prism-gallery-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.prism-gallery-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prism-gallery-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prism-gallery-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.prism-gallery-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.prism-gallery-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Auto-fit columns - dynamically calculates optimal columns based on container width */
.prism-gallery-cols-auto {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Responsive breakpoints for auto-fit to ensure good thumbnail sizes */
@media (min-width: 640px) {
  .prism-gallery-cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (min-width: 1024px) {
  .prism-gallery-cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (min-width: 1280px) {
  .prism-gallery-cols-auto {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* ========================================
   GALLERY-SPECIFIC COMPONENTS
   ======================================== */

/* Container classes */
.prism-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Card variants for gallery */
.prism-card-transparent {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.prism-card-glass {
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(156, 163, 175, 0.3);
}

.prism-hover-card-light:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Aspect ratios */
.prism-aspect-square {
  aspect-ratio: 1 / 1;
}

.prism-aspect-video {
  aspect-ratio: 16 / 9;
}

/* Transform utilities */
.prism-group-hover-scale-105 {
  transition: transform 0.15s ease-in-out;
}

.prism-group:hover .prism-group-hover-scale-105 {
  transform: scale(1.05);
}

/* Shadow utilities */
.prism-shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.prism-group-hover-shadow-xl {
  transition: box-shadow 0.15s ease-in-out;
}

.prism-group:hover .prism-group-hover-shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Background gradients */
.prism-bg-gradient-blue-purple {
  background: linear-gradient(to bottom right, #60a5fa, #a855f7);
}

/* Line clamping */
.prism-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive grid extensions */
@media (min-width: 768px) {
  .prism-md-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .prism-md-gap-6 {
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .prism-lg-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .prism-lg-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Fractional padding */
.prism-p-1-5 {
  padding: 0.375rem;
}

/* ========================================
   PHOTO MANAGEMENT GRID STYLES
   ======================================== */

/* Management grid - responsive photo cards */
.prism-gallery-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem 0;
}

@media (min-width: 640px) {
  .prism-gallery-management-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .prism-gallery-management-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .prism-gallery-management-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Photo card wrapper */
.prism-photo-edit-wrapper {
  background-color: rgba(31, 41, 55, 0.8);
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgb(75, 85, 99);
  transition: all 0.2s ease;
}

.prism-photo-edit-wrapper:hover {
  border-color: rgb(99, 102, 241);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
  transform: translateY(-2px);
}

/* Photo container with image */
.prism-photo-edit-container {
  position: relative;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Photo image */
.prism-photo-edit-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.prism-photo-edit-container:hover .prism-photo-edit-image {
  transform: scale(1.05);
}

/* Visibility badge */
.prism-photo-visibility-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.prism-photo-visibility-red {
  background-color: #dc2626;
}

.prism-photo-visibility-blue {
  background-color: #2563eb;
}

.prism-photo-visibility-green {
  background-color: #16a34a;
}

.prism-photo-visibility-gray {
  background-color: #6b7280;
}

/* Edit overlay on hover */
.prism-photo-edit-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.prism-photo-edit-container:hover .prism-photo-edit-overlay {
  opacity: 1;
}

.prism-photo-edit-overlay-content {
  text-align: center;
  color: white;
}

.prism-photo-edit-overlay-icon {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

.prism-photo-edit-overlay-text {
  font-size: 0.875rem;
  font-weight: 500;
}

/* Photo info below image */
.prism-photo-info {
  padding: 0.75rem;
}

.prism-photo-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(229, 231, 235);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.prism-photo-album {
  font-size: 0.75rem;
  color: rgb(156, 163, 175);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.prism-photo-date {
  font-size: 0.75rem;
  color: rgb(107, 114, 128);
}

/* Gallery admin header styles */
.prism-gallery-admin-container {
  padding: 0;
}

.prism-gallery-admin-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.prism-gallery-admin-icon {
  font-size: 1.75rem;
  color: rgb(168, 85, 247);
}

.prism-gallery-admin-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: rgb(229, 231, 235);
  margin: 0;
}

.prism-gallery-description {
  margin-bottom: 1rem;
}

.prism-gallery-description-text {
  color: rgb(156, 163, 175);
  font-size: 0.875rem;
  margin: 0;
}

.prism-gallery-photo-count {
  margin-bottom: 0.5rem;
}

.prism-gallery-photo-count-text {
  color: rgb(107, 114, 128);
  font-size: 0.875rem;
  margin: 0;
}

/* Empty state */
.prism-gallery-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  background-color: rgba(31, 41, 55, 0.5);
  border-radius: 0.75rem;
  border: 1px dashed rgb(75, 85, 99);
}

.prism-gallery-empty-icon {
  font-size: 4rem;
  color: rgb(107, 114, 128);
  margin-bottom: 1rem;
}

.prism-gallery-empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: rgb(156, 163, 175);
  margin: 0 0 0.5rem 0;
}

.prism-gallery-empty-description {
  color: rgb(107, 114, 128);
  font-size: 0.875rem;
  margin: 0;
}

/* Pagination notice */
.prism-gallery-pagination {
  margin-top: 1rem;
  padding: 0.75rem;
  background-color: rgba(31, 41, 55, 0.5);
  border-radius: 0.5rem;
  text-align: center;
}

.prism-gallery-pagination-text {
  color: rgb(156, 163, 175);
  font-size: 0.875rem;
}

/* ========================================
   UPLOAD SECTION STYLES
   ======================================== */

.prism-gallery-upload-section {
  max-width: 400px;
}

/* Success/Error Messages */
.prism-gallery-upload-message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.prism-gallery-upload-success {
  background-color: rgba(34, 197, 94, 0.15);
  color: rgb(134, 239, 172);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.prism-gallery-upload-error {
  background-color: rgba(239, 68, 68, 0.15);
  color: rgb(252, 165, 165);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Upload Form */
.prism-gallery-upload-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.prism-gallery-upload-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.prism-gallery-upload-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(156, 163, 175);
}

/* File Input Wrapper */
.prism-gallery-file-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prism-gallery-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.prism-gallery-file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background-color: rgb(55, 65, 81);
  color: rgb(229, 231, 235);
  border: 1px solid rgb(75, 85, 99);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.prism-gallery-file-button:hover {
  background-color: rgb(75, 85, 99);
  border-color: rgb(99, 102, 241);
}

.prism-gallery-file-chosen {
  font-size: 0.8125rem;
  color: rgb(107, 114, 128);
}

/* Upload Submit Button */
.prism-gallery-upload-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: rgb(37, 99, 235);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.5rem;
}

.prism-gallery-upload-submit:hover {
  background-color: rgb(29, 78, 216);
}

.prism-gallery-upload-submit:disabled {
  background-color: rgb(75, 85, 99);
  cursor: not-allowed;
}

/* Collapsible Workflow Info */
.prism-gallery-upload-details {
  margin-top: 1.5rem;
  border-top: 1px solid rgb(55, 65, 81);
  padding-top: 1rem;
}

.prism-gallery-upload-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgb(156, 163, 175);
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.prism-gallery-upload-summary::-webkit-details-marker {
  display: none;
}

.prism-gallery-upload-summary .material-symbols-outlined {
  font-size: 1.125rem;
  transition: transform 0.2s;
}

.prism-gallery-upload-details[open] .prism-gallery-upload-summary .material-symbols-outlined {
  transform: rotate(90deg);
}

.prism-gallery-upload-info {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background-color: rgba(31, 41, 55, 0.5);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: rgb(156, 163, 175);
  line-height: 1.5;
}

.prism-gallery-upload-info p {
  margin: 0 0 0.375rem 0;
}

.prism-gallery-upload-info p:last-child {
  margin-bottom: 0;
}

.prism-gallery-upload-info strong {
  color: rgb(209, 213, 219);
}

/* ========================================
   VIDEO OVERLAY STYLES
   ======================================== */

/* Video play button overlay for gallery thumbnails */
.prism-gallery-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%);
  pointer-events: none;
}

.prism-gallery-play-icon {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, color 0.2s ease;
}

.prism-gallery-item:hover .prism-gallery-play-icon {
  transform: scale(1.1);
  color: #fff;
}

.prism-gallery-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Smaller play icon on mobile */
@media (max-width: 640px) {
  .prism-gallery-play-icon {
    font-size: 2.5rem;
  }
}

/* ========================================
   TITLE CAPTION STYLES
   ======================================== */

/* Title caption below gallery thumbnails */
.prism-gallery-title-caption {
  text-align: center;
  padding: 0.5rem 0.25rem 0;
  max-width: 100%;
  overflow: hidden;
}

.prism-gallery-title-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Reduce title size on mobile */
@media (max-width: 640px) {
  .prism-gallery-title-text {
    font-size: 0.75rem;
    -webkit-line-clamp: 1;
  }
}