/**
 * Responsive Collage System
 * 
 * Dynamic collage sizing using CSS custom properties and clamp() functions
 * Supports collage sizes from 300px (small mobile) to 600px (desktop)
 * Replaces hardcoded 400px/500px/600px system with fluid calculations
 */

:root {
  /* Base collage sizing - fluid from 300px to 600px */
  --collage-size: clamp(300px, 90vw, 600px);
  
  /* Dynamic gap sizing - smaller gaps for smaller screens */
  --collage-gap: clamp(2px, 0.5vw, 5px);
  
  /* Calculated dimensions for different layout sizes */
  --collage-half-size: calc((var(--collage-size) - var(--collage-gap)) / 2);
  --collage-large-width: var(--collage-size);
  --collage-large-height: var(--collage-size);
  
  /* Specific dimensions for different layouts */
  --collage-third-width: calc((var(--collage-size) - 2 * var(--collage-gap)) / 3);
  --collage-third-height: calc((var(--collage-size) - 2 * var(--collage-gap)) / 3);
  --collage-two-thirds-height: calc((var(--collage-size) - var(--collage-gap)) * 0.6);
  --collage-one-third-height: calc((var(--collage-size) - var(--collage-gap)) * 0.4);
  
  /* Single image layout dimensions - all centered in 600x600 container */
  --collage-single-square-width: var(--collage-size);
  --collage-single-square-height: var(--collage-size);
  
  --collage-single-portrait-width: calc(var(--collage-size) * 0.75); /* 3:4 ratio */
  --collage-single-portrait-height: var(--collage-size);
  
  --collage-single-landscape-16-9-width: var(--collage-size);
  --collage-single-landscape-16-9-height: calc(var(--collage-size) * 9 / 16); /* 337.5px at 600px */
  
  --collage-single-landscape-3-2-width: var(--collage-size);
  --collage-single-landscape-3-2-height: calc(var(--collage-size) * 2 / 3); /* 400px at 600px */
}

/* Base collage container - applies to all layouts */
.collage-container {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

/* One image layout - responsive square */
.addOneImage {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

.addOneImage .st-girdImage {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

.addOneImage .prompt__item {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

/* Single image layout variations */
.addOneImage[data-layout="square"] .prompt__item {
  width: var(--collage-single-square-width) !important;
  height: var(--collage-single-square-height) !important;
}

.addOneImage[data-layout="3:4"] .prompt__item {
  width: var(--collage-single-portrait-width) !important;
  height: var(--collage-single-portrait-height) !important;
  margin: 0 auto; /* Center horizontally */
}

.addOneImage[data-layout="16:9"] .prompt__item {
  width: var(--collage-single-landscape-16-9-width) !important;
  height: var(--collage-single-landscape-16-9-height) !important;
  margin: calc((var(--collage-size) - var(--collage-single-landscape-16-9-height)) / 2) 0; /* Center vertically */
}

.addOneImage[data-layout="3:2"] .prompt__item {
  width: var(--collage-single-landscape-3-2-width) !important;
  height: var(--collage-single-landscape-3-2-height) !important;
  margin: calc((var(--collage-size) - var(--collage-single-landscape-3-2-height)) / 2) 0; /* Center vertically */
}

/* Two image layouts - responsive side-by-side and stacked */
.addTwoImage {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

.addTwoImage .st-girdImage {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
  display: flex !important;
  flex-direction: row !important;
  gap: var(--collage-gap) !important;
}

.addTwoImage .prompt__item {
  width: var(--collage-half-size) !important;
  height: var(--collage-size) !important;
  flex: 0 0 var(--collage-half-size) !important;
}

/* Two image horizontal layout - stacked vertically */
.addTwoImage-horizontal .st-girdImage {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--collage-gap) !important;
}

.addTwoImage-horizontal .prompt__item {
  width: var(--collage-size) !important;
  height: var(--collage-half-size) !important;
  flex: 0 0 var(--collage-half-size) !important;
}

/* Three image layouts - responsive variations */
.addThreeImage,
.addThreeImage-left-large,
.addThreeImage-top-large,
.addThreeImage-bottom-large {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

.addThreeImage .st-girdImage,
.addThreeImage-left-large .st-girdImage,
.addThreeImage-top-large .st-girdImage,
.addThreeImage-bottom-large .st-girdImage {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

/* Three image right-large layout (default) */
.addThreeImage .st-girdImage > div[style*="flex"] {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
  display: flex !important;
  flex-direction: row !important;
  gap: var(--collage-gap) !important;
}

.addThreeImage .col-50 {
  width: var(--collage-half-size) !important;
  height: var(--collage-size) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--collage-gap) !important;
}

.addThreeImage .prompt__item.col-50 {
  width: var(--collage-half-size) !important;
  height: var(--collage-size) !important;
}

/* Small images inside the left column container (right-large layout) */
.addThreeImage .col-50 .prompt__item {
  width: var(--collage-half-size) !important;
  height: var(--collage-half-size) !important;
  flex: 0 0 var(--collage-half-size) !important;
}

/* Remove margin as gap is handled by flex container */

/* Three image left-large layout */
.addThreeImage-left-large .st-girdImage > div[style*="flex"] {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
  display: flex !important;
  flex-direction: row !important;
  gap: var(--collage-gap) !important;
}

.addThreeImage-left-large .col-50 {
  width: var(--collage-half-size) !important;
  height: var(--collage-size) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--collage-gap) !important;
}

.addThreeImage-left-large .prompt__item.col-50 {
  width: var(--collage-half-size) !important;
  height: var(--collage-size) !important;
}

/* Small images inside the right column container */
.addThreeImage-left-large .col-50 .prompt__item {
  width: var(--collage-half-size) !important;
  height: var(--collage-half-size) !important;
  flex: 0 0 var(--collage-half-size) !important;
}

/* Three image top-large and bottom-large layouts */
.addThreeImage-top-large .st-girdImage,
.addThreeImage-bottom-large .st-girdImage {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--collage-gap) !important;
}

.addThreeImage-top-large .st-girdImage > .prompt__item.col-100 {
  width: var(--collage-size) !important;
  height: var(--collage-half-size) !important;
  flex: 0 0 var(--collage-half-size) !important;
}

.addThreeImage-bottom-large .st-girdImage > .prompt__item.col-100 {
  width: var(--collage-size) !important;
  height: var(--collage-half-size) !important;
  flex: 0 0 var(--collage-half-size) !important;
}

.addThreeImage-top-large div[style*="flex"],
.addThreeImage-bottom-large div[style*="flex"] {
  width: var(--collage-size) !important;
  height: var(--collage-half-size) !important;
  display: flex !important;
  flex-direction: row !important;
  gap: var(--collage-gap) !important;
}

.addThreeImage-top-large .prompt__item.col-50,
.addThreeImage-bottom-large .prompt__item.col-50 {
  width: var(--collage-half-size) !important;
  height: var(--collage-half-size) !important;
  flex: 0 0 var(--collage-half-size) !important;
}

/* Four image layouts - responsive variations */
.addFourImage,
.addFourImage-left-large,
.addFourImage-top-large {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

.addFourImage .st-girdImage,
.addFourImage-left-large .st-girdImage,
.addFourImage-top-large .st-girdImage {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

/* Four image grid layout (2x2) */
.addFourImage .st-girdImage {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--collage-gap) !important;
}

.addFourImage .prompt__item {
  width: var(--collage-half-size) !important;
  height: var(--collage-half-size) !important;
}

/* Four image left-large layout */
.addFourImage-left-large .st-girdImage > div[style*="flex"] {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--collage-gap) !important;
}

.addFourImage-left-large .col-50 {
  width: var(--collage-half-size) !important;
  height: var(--collage-size) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--collage-gap) !important;
}

.addFourImage-left-large .prompt__item.col-50 {
  width: var(--collage-half-size) !important;
  height: var(--collage-size) !important;
}

/* Small images inside the right column (3 stacked images) */
.addFourImage-left-large .col-50 .prompt__item {
  width: var(--collage-half-size) !important;
  height: var(--collage-third-height) !important;
  flex: 0 0 var(--collage-third-height) !important;
}

/* Four image top-large layout */
.addFourImage-top-large .st-girdImage {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--collage-gap) !important;
}

.addFourImage-top-large .st-girdImage > .prompt__item.col-100 {
  width: var(--collage-size) !important;
  height: var(--collage-half-size) !important;
  flex: 0 0 var(--collage-half-size) !important;
}

.addFourImage-top-large .prompt__item.col-100 {
  width: var(--collage-size) !important;
  height: var(--collage-half-size) !important;
}

.addFourImage-top-large div[style*="flex"] {
  width: var(--collage-size) !important;
  height: var(--collage-half-size) !important;
  display: flex !important;
  flex-direction: row !important;
  gap: var(--collage-gap) !important;
}

.addFourImage-top-large .prompt__item.col-33 {
  width: var(--collage-third-width) !important;
  height: var(--collage-half-size) !important;
  flex: 0 0 var(--collage-third-width) !important;
}

/* Modal adjustments for responsive collages */
.modal-dialog {
  width: calc(var(--collage-size) + 60px) !important;
  max-width: 90vw !important;
  margin: 30px auto;
}

/* Mobile devices - auto width for better responsiveness */
@media screen and (max-width: 768px) {
  .modal-dialog {
    width: auto !important;
    max-width: 95vw !important;
    margin: 15px auto;
  }
  
  /* Mobile responsive cropper container - prevent overflow on small screens */
  .cropper-container {
    max-width: calc(100vw - 30px) !important; /* Account for modal padding */
    width: auto !important;
  }
  
  .cropper-container .cropper-wrap-box,
  .cropper-container .cropper-canvas,
  .cropper-container .cropper-crop-box {
    max-width: 100% !important;
  }
  
  /* Ensure modal content doesn't overflow */
  .modal-content {
    overflow-x: hidden;
  }
  
  .modal-body {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Responsive behavior for very small screens */
@media screen and (max-width: 350px) {
  :root {
    --collage-size: 300px;
    --collage-gap: 2px;
  }
  
  .modal-dialog {
    width: auto !important;
    max-width: 95vw !important;
    margin: 10px auto;
  }
}

/* Responsive behavior for medium screens */
@media screen and (min-width: 450px) and (max-width: 768px) {
  :root {
    --collage-size: clamp(350px, 85vw, 500px);
    --collage-gap: clamp(3px, 0.6vw, 4px);
  }
}

/* Responsive behavior for larger screens */
@media screen and (min-width: 769px) {
  :root {
    --collage-size: clamp(400px, 80vw, 600px);
    --collage-gap: 5px;
  }
}

/* Remove any hardcoded pixel values that might conflict */
.TimeGridImg {
  width: auto !important;
  height: auto !important;
}

/* Ensure images scale properly within responsive containers */
.prompt__item img.main-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* ===== COLLAGE IMAGE CONTROL BUTTONS ===== */
/* New dedicated classes for collage image controls to avoid conflicts */

.collage-btn {
  position: absolute;
  right: 8px;
  height: 32px;
  width: 32px;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.collage-btn:hover {
  transform: scale(1.1);
}

.collage-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.collage-btn img {
  width: 25px;
  height: 25px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.collage-btn:hover img {
  opacity: 1;
}

/* Edit/Crop button - positioned at top */
.collage-btn-edit {
  top: 8px;
}

/* Delete button - positioned below edit button */
.collage-btn-delete {
  top: 42px;
}

/* Replace button - positioned below delete button (modal only) */
.collage-btn-replace {
  top: 16px;
}

/* Adjust replace button position when edit button is visible as sibling */
.collage-btn-edit:not([style*="display: none"]):not([style*="display:none"]) ~ .collage-btn-replace {
  top: 44px !important;
}

.collage-btn-edit:has([style*="display: none"]):has([style*="display:none"]) ~ .collage-btn-replace {
  top: 12px !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
  .collage-btn {
    height: 28px;
    width: 28px;
    right: 16px;
  }
  
  .collage-btn img {
    width: 25px;
    height: 25px;
  }
  
  .collage-btn-edit {
    top: 6px;
  }
  
  .collage-btn-delete {
    top: 40px;
  }
  
  .collage-btn-replace {
    top: 12px;
  }
  
  /* Adjust replace button position when edit button is visible as sibling on mobile */
  .collage-btn-edit:not([style*="display: none"]):not([style*="display:none"]) ~ .collage-btn-replace {
    top: 44px !important;
  }

  .collage-btn-edit:has([style*="display: none"]):has([style*="display:none"]) ~ .collage-btn-replace {
    top: 12px !important;
  }
}

/* Low quality warning positioning */
.lowQuality {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 10;
}

/* ===== DRAG AND DROP STYLING ===== */

/* Drag and drop visual feedback */
.collage-dragging {
  opacity: 0.5 !important;
  transform: scale(0.95) !important;
  transition: all 0.2s ease !important;
  cursor: grabbing !important;
  z-index: 1000 !important;
}

.collage-drag-over {
  border: 2px dashed #007bff !important;
  background-color: rgba(0, 123, 255, 0.1) !important;
  transition: all 0.2s ease !important;
}

.collage-drop-zone {
  border: 1px solid rgba(0, 123, 255, 0.3) !important;
  background-color: rgba(0, 123, 255, 0.05) !important;
  transition: all 0.2s ease !important;
}

.collage-swapping {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: scale(1.02) !important;
}

.collage-touch-dragging {
  opacity: 0.7 !important;
  transform: scale(1.05) !important;
  z-index: 1000 !important;
  transition: all 0.2s ease !important;
}

/* Global drag state */
.collage-drag-active {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

.collage-drag-active .collage-btn {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

/* Make images draggable with proper cursor */
.main-image[draggable="true"] {
  cursor: grab !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

.main-image[draggable="true"]:active {
  cursor: grabbing !important;
}

/* Enhanced mobile touch targets */
@media (max-width: 768px) {
  .main-image[draggable="true"] {
    cursor: pointer !important;
  }
  
  .collage-touch-dragging {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
  }
  
  .collage-drop-zone {
    border-width: 3px !important;
  }
}

/* Drag feedback animation */
@keyframes dragPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.collage-drag-over {
  animation: dragPulse 1s infinite ease-in-out;
}

.TimeGridImg.videoMemory .prompt__item {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

/* ========================================
   PRINT & PDF OVERRIDES
   ======================================== */

/* Print/PDF base sizing - full page layout */
.page-print :root,
.page-print {
  /* Full page print sizing - 894x894px */
  --collage-size: 894px;
  
  /* Print gap sizing - minimal gaps for print */
  --collage-gap: 5px;
  
  /* Recalculated dimensions for print layouts */
  --collage-half-size: calc((var(--collage-size) - var(--collage-gap)) / 2);
  --collage-large-width: var(--collage-size);
  --collage-large-height: var(--collage-size);
  
  /* Print-specific thirds dimensions */
  --collage-third-width: calc((var(--collage-size) - 2 * var(--collage-gap)) / 3);
  --collage-third-height: calc((var(--collage-size) - 2 * var(--collage-gap)) / 3);
  --collage-two-thirds-height: calc((var(--collage-size) - var(--collage-gap)) * 0.6);
  --collage-one-third-height: calc((var(--collage-size) - var(--collage-gap)) * 0.4);
  
  /* Print single image layout dimensions */
  --collage-single-square-width: var(--collage-size);
  --collage-single-square-height: var(--collage-size);
  
  --collage-single-portrait-width: calc(var(--collage-size) * 0.75); /* 3:4 ratio */
  --collage-single-portrait-height: var(--collage-size);
  
  --collage-single-landscape-16-9-width: var(--collage-size);
  --collage-single-landscape-16-9-height: calc(var(--collage-size) * 9 / 16);
  
  --collage-single-landscape-3-2-width: var(--collage-size);
  --collage-single-landscape-3-2-height: calc(var(--collage-size) * 2 / 3);
}

/* Half-width print layout - when collage shares page space */
.page-print.twoImgR, 
.page-print .apFirst123,
.page-print .apSecond {
  /* Half page print sizing - 524x524px */
  --collage-size: 524px;
  
  /* Smaller gaps for half-width layouts */
  --collage-gap: 5px;
  
  /* Recalculated dimensions for half-width print layouts */
  --collage-half-size: calc((var(--collage-size) - var(--collage-gap)) / 2);
  --collage-large-width: var(--collage-size);
  --collage-large-height: var(--collage-size);
  
  /* Half-width thirds dimensions */
  --collage-third-width: calc((var(--collage-size) - 2 * var(--collage-gap)) / 3);
  --collage-third-height: calc((var(--collage-size) - 2 * var(--collage-gap)) / 3);
  --collage-two-thirds-height: calc((var(--collage-size) - var(--collage-gap)) * 0.6);
  --collage-one-third-height: calc((var(--collage-size) - var(--collage-gap)) * 0.4);
  
  /* Half-width single image layout dimensions */
  --collage-single-square-width: var(--collage-size);
  --collage-single-square-height: var(--collage-size);
  
  --collage-single-portrait-width: calc(var(--collage-size) * 0.75);
  --collage-single-portrait-height: var(--collage-size);
  
  --collage-single-landscape-16-9-width: var(--collage-size);
  --collage-single-landscape-16-9-height: calc(var(--collage-size) * 9 / 16);
  
  --collage-single-landscape-3-2-width: var(--collage-size);
  --collage-single-landscape-3-2-height: calc(var(--collage-size) * 2 / 3);
}

/* Apply fixed sizing to print collage containers */
.page-print .collage-container,
.page-print .addOneImage,
.page-print .addTwoImage,
.page-print .addThreeImage,
.page-print .addFourImage,
.page-print .TimeGridImg,
.page-print .st-girdImage {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

.page-print .addOneImage .st-girdImage {
  position: relative;
  overflow: hidden;
}

.page-print .addOneImage .st-girdImage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-url) center/cover no-repeat;
  filter: blur(20px);
  transform: scale(1.1);
  z-index: 0;
}

.page-print .addOneImage .st-girdImage .main-image {
  position: relative;
  z-index: 1;
}

/* ========================================
   TIMELINE-SPECIFIC OVERRIDES
   ======================================== */

/* Timeline page uses JavaScript-based responsive system via collage-core.js */
/* CSS variables are set dynamically by initializeResponsiveSystem() */

/* Override hardcoded TimeGridImg and st-girdImage sizing for timeline ONLY */
.st-timeLineOut .TimeGridImg {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}
/*
.st-timeLineOut .st-girdImage {
  grid-template-columns: repeat(auto-fit, minmax(var(--collage-third-width), 1fr)) !important;
  grid-auto-rows: var(--collage-third-height) !important;
}

/* Timeline collage containers using CSS variables */
.st-timeLineOut .collage-container,
.st-timeLineOut .addOneImage,
.st-timeLineOut .addTwoImage,
.st-timeLineOut .addThreeImage,
.st-timeLineOut .addFourImage {
  width: var(--collage-size) !important;
  height: var(--collage-size) !important;
}

/* Mobile timeline collage styling */
@media only screen and (max-width: 767px) {
  /* Mobile collage sizing - use aspect ratio for proper display */
  .st-timeLineOut .TimeGridImg.floatLft {
    width: 100% !important;
    aspect-ratio: 1/1 !important;
    height: auto !important;
    object-fit: cover;
  }
  
  .st-timeLineOut .collage-container,
  .st-timeLineOut .addOneImage,
  .st-timeLineOut .addTwoImage,
  .st-timeLineOut .addThreeImage,
  .st-timeLineOut .addFourImage {
    width: var(--collage-size) !important;
    height: var(--collage-size) !important;
    max-width: 100% !important; /* Don't exceed container width */
    aspect-ratio: 1 / 1; /* Maintain square aspect ratio */
  }
}