/* Basic reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: system-ui, sans-serif; line-height: 1.4; background: #fafafa; height: 100%}

html: {height: 100%}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  /* give every cell a *max* height that matches its own content */
  grid-auto-rows: minmax(250px, auto);
}

nav#album-menu {
  background: white;
  color: #636363;
  text-transform: uppercase;
  padding: 0.5rem;
  text-align: center;
}
nav#album-menu button {
  background: transparent;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
nav#album-menu button.active,
nav#album-menu button:hover { background: white; }
main#gallery {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}                                                             
                                                              
/* Responsive grid columns */                                                                                               
@media (min-width: 600px)  { main#gallery { grid-template-columns: repeat(1, 1fr); } }
@media (min-width: 900px)  { main#gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { main#gallery { grid-template-columns: repeat(3, 1fr); } }
	
/* Painting card */ 

/*
.modal-image { 
  width: 100%; 
  height: auto; 
  display: block;
  align-self: center;
}*/

.card .info p { 
  margin: 0.3rem 0;
}

/* Card container – vertical flex layout */
.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background:#fff;
  border-radius:.4rem;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  overflow:hidden;
}

/* Description block – push to the bottom */
.card .info {             /* or whatever you called the description div */
  margin-top: auto;       /* pushes it to the bottom of the flex column */
  font-size: 0.9rem;      /* optional: tweak size */
  color: #444;            /* optional: tweak color */
  padding: 0.5rem;        /* optional: space around text */
}

.thumb-wrapper {
  display:flex;                 /* enable flex centering */
  align-items:center;           /* vertical centering */
  height:auto;                  /* don’t force it to fill the card */
  overflow:hidden;              /* crop any part that spills */
  align-self: center;
}

/* 2️ ⃣ The image itself – keep its real ratio and stay centered */
.card img {
  width: 100%;          /* stretch horizontally if needed */
  height:auto;          /* keep natural height for short images */
  max-height:100%;      /* never exceed the wrapper height */
  align-self: center;
}

/* Modal */
#modal.hidden { display: none; }
#modal {                  
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}                  

#modal-content {
  background: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex; 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;

  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
/*
#modal-body {
  display: flex;
  flex-direction: row;
  padding-left: 10%;   /* small gap on left side 
  max-width: 100vw;
  max-height: 100vh;
  align-items: center;
}
*/

#modal-image { 
  display: block;
  width: 60%;
  max-width: 50%;   /* ensures it won’t exceed container */
  max-height: 80%;
  object-fit: contain;  /* scale without stretching */
  height: auto;
  width: auto;
}
/*
.meta {
  display: flex;
  flex-direction: column;
  width: 20%;
  align-items: flex-start;    
  justify-content: flex-start;
}
*/
#modal-body {
  display: flex;
  flex-direction: row;
  align-items: center;       /* vertical centering with image */
  justify-content: flex-start; /* items start at left edge */
  padding-left: 5%;         /* reserve left gap for future scroll buttons */
  gap: 2rem;                 /* spacing between text and image */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.meta {
  display: flex;
  flex-direction: column;
  width: 40%;               /* ~30% text block */
  align-items: flex-start;  /* left-align flex items */
  justify-content: flex-start; /* align to top */
  text-align: left;         /* text inside aligns left */
}

#modal-content .description-title { 
  font-size: 1rem; 
  font-family: 'Barlow', Sans-Serif;
  font-weight: 200;
  color: #010101;
  font-size: 2.1rem;
  line-height: 2.35rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0;                  /* start hidden */
  transition: opacity 0.5s ease-in-out; /* fade-in over 0.5s */
}

#modal-content .description-text {
  padding-top: 20px;
  font-family: 'Barlow', Sans-Serif;
  font-weight: 200;
  color: #585858;
  font-size: 1.05rem;
  line-height: 3.1rem;
}