/* start light mode styling */
:root {
    --text: #3a5a78; /* Darker slate blue for readable text */
    --border: #90adc6; /* Soft sky blue pulled from the dithered pattern */
    --accent: #E54F6D; /* Pastel golden yellow for links and highlights */
    --bg: #fdfaf6; /* Warm, soft off-white */
    --gradientTop: #f4e1d2; /* Peachy cloud cream */
    --gradientBottom: rgba(123, 158, 189, 0.8); /* Translucent sky blue */
}
/* end light mode styling */


/* start dark mode styling */
@media (prefers-color-scheme: dark) {
    :root {
        --text: #f4e3d7; /* Using the bright cloud cream for text */
        --border: #5c86a6; /* Darker blue from the dithered shadows */
        --accent: #E54F6D; /* Bright pastel peach so links stand out */
        --bg: rgba(20, 35, 50, 0.9); /* Deep twilight blue */
        --gradientTop: #2c4251; 
        --gradientBottom: #1a2a3a;
        a:link { color: #a1c5e4; } /* Soft light blue */
    }
}
/* end dark mode styling */





.photo-gallery {
  /* The new column layout */
  column-count: 3; /* Splits the gallery into 3 columns */
  column-gap: 1rem; /* The space between the columns */
  
  /* Keep your existing spacing */
  padding: 1rem;
  max-width: 100%;
  margin: 0 auto;
}

.frame {
  /* Keep all your existing frame styling (background, padding, shadows, etc.) */
  background-color: var(--text); /* The color of the frame/matting */
  padding: 12px; /* Creates the thickness of the frame around the photo */
  border: 1px solid var(--border); /* A subtle border to define the edge */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* A soft drop shadow to lift it off the page */
  border-radius: 4px; /* Optional: slightly softens the sharp outer corners */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  /* ADD THESE TWO LINES 👇 */
  break-inside: avoid; /* Prevents a photo from being sliced in half across two columns */
  margin-bottom: 1rem; /* Creates the vertical gap between photos in the same column */
}

/* Make it responsive so it shrinks to 2 columns, then 1 column on phones */
@media (max-width: 900px) {
  .photo-gallery { column-count: 2; }
}

@media (max-width: 600px) {
  .photo-gallery { column-count: 1; }
}

/* 3. Ensure the image fits inside the frame perfectly */
.frame img {
  width: 100%;
  height: auto;
  display: block; /* Removes the tiny gap below inline images */
  
}
/* 4. Optional: Add a hover effect so they pop out when you interact with them */
.frame:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}