/* Minimal CSS Rules - Adhering to Specification */

/* Commandment 7: Show album descriptions only on hover (index.html) */
/* Assumes description paragraph has class 'card-description' */
/* Note: JS adds 'd-none d-md-block' for initial hide/responsive; hover takes over */
.card:hover .card-description {
  /* Override Bootstrap display utility if needed, or rely on JS adding/removing d-none */
  /* A pure CSS approach might require removing d-none from HTML/JS */
  /* For simplicity, let's assume JS handles initial state and this enables on hover */
   display: block !important; /* Might be needed to override d-none */
   opacity: 1; 
   transition: opacity 0.2s ease-in-out; 
}

/* Commandment 6.3: Caption hover effect (album.html) */
.caption {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Changed from .card:hover to .col:hover */
.col:hover .caption {
  opacity: 1;
}

/* Commandment 10.2 & 10.3: Anti-download/interaction CSS */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
  /* Ensure images within cards don't overflow */
  max-width: 100%; 
  height: auto; /* Maintain aspect ratio */
}

body {
  user-select: none;
  /* Add padding to prevent content from touching fixed footer */
  padding-bottom: 70px; /* Adjust height based on footer */
}

body[oncontextmenu] {
  -webkit-touch-callout: none; 
  -webkit-user-select: none;   
  -khtml-user-select: none;    
  -moz-user-select: none;      
  -ms-user-select: none;       
  user-select: none;           
}

/* Carousel Controls: Hide by default, show on hover */
/* Targeting the controls within the specific modal carousel */
#photoModal .carousel-control-prev,
#photoModal .carousel-control-next { /* Removed .btn-close */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Show controls when hovering directly over their area */
#photoModal .carousel-control-prev:hover,
#photoModal .carousel-control-next:hover { /* Removed .btn-close:hover */
    opacity: 1; /* Fully visible on hover */
}

/* Commandment 8: Ensure card visual consistency */
/* Ensure cards fill height - relies on Bootstrap .h-100 class */
/* No extra custom styling needed if .h-100 is used correctly in HTML */

/* No other custom styles allowed per commandments 1 & 2 */ 

/* Increase modal backdrop opacity for better image focus */
.modal-backdrop {
    /* Default is 0.5 */
    --bs-backdrop-opacity: 0.9; /* Increased from 0.85 */
}

/* Ensure images inside .ratio containers fit and align bottom */
.ratio > img.img-fluid {
  object-fit: contain; /* Scale down to fit */
  object-position: bottom center; /* Align to bottom, center horizontally */
  height: 100%; /* Ensure img fills the ratio container height for alignment */
  width: 100%; /* Ensure img fills the ratio container width for alignment */
}

/* --- Specific Page Styling --- */ 

/* Modal Carousel Image Styling */
/* Let Bootstrap manage item display; set height for centering context */
#carouselPhotos .carousel-item {
  /* REMOVED: display: flex, align-items, justify-content */
  height: 90vh; /* Adjust height based on viewport, leaving space for controls/padding */
}

/* Center the image block within the item */
#carouselPhotos .carousel-item img {
  /* REMOVED: display: block, margin: auto - centering handled by wrapper div */
  max-height: 85vh; /* Limit image height */
  max-width: 100%; /* Limit image width */
  height: auto; /* Allow image to scale down height */
  width: auto; /* Allow image to scale down width */
  object-fit: contain; /* Ensure the whole image is visible */
}