/********************************** 
  1. WHITE CONTAINER FOR CARDS 
***********************************/
/*
  This container ensures a white background and a max width
  so content remains centered and doesn't sprawl when zooming out.
*/
.white-maxwidth-container {
  background-color: #fff;     /* White background */
  max-width: 1000px;          /* Adjust to desired max width */
  width: 100%;                /* Ensures it shrinks on smaller screens */
  margin: 0 auto;             /* Center it */
  padding: 1rem;              /* Optional padding inside the container */
  border-radius: 0.25rem;     /* Optional corner rounding */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional subtle shadow */
}

/********************************** 
2. CARD & LAYOUT STYLES 
***********************************/
/* 
This sets a maximum width for each card so that on very large screens,
the card itself does not become too large.
*/

/*
For the "selected item" card (the single-card view), you can also limit 
its width so it doesn't span the entire page on large screens.
*/
.selected-item-card {
  max-width: 600px; /* <- EDIT THIS to control the detail page card width */
}

/********************************** 
3. IMAGE STYLES (16:9 Ratio)
***********************************/
/*
This technique uses a container with a fixed aspect ratio (16:9).
- The "padding-top: 56.25%" => 16:9 ratio
- The image is absolutely positioned to fill the container.
*/
.image-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio = 9/16 => 56.25% */
  overflow: hidden;
  background: #f5f5f5; /* Placeholder background if no image */
  border-bottom: 1px solid #ddd;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintains aspect ratio within container */
}

/********************************** 
4. TYPOGRAPHY & TRUNCATION
***********************************/
/* 
"clamp-2-lines" ensures text does not exceed 2 lines. 
- `-webkit-line-clamp: 2;` truncates after 2 lines 
- `-webkit-box-orient: vertical;` is required
- `overflow: hidden;` & `text-overflow: ellipsis;` ensures text is cut off
*/
.clamp-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* <- EDIT THIS for how many lines before truncation */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 
You might want your card-title to have a specific font size:
*/
.card-title {
  font-size: 1.25rem; /* H2-like size. EDIT THIS if you want bigger/smaller */
  font-weight: bold;
  margin-bottom: 0.75rem; /* Space below the title */
}

/* 
The subtitle might be smaller:
*/
.card-subtitle {
  font-size: 1rem; /* EDIT THIS as desired */
  color: #666;     /* Example color for subtitles */
}

/********************************** 
5. CARD BODY STYLES
***********************************/
.card-body {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/********************************** 
6. BUTTON STYLES
***********************************/
.btn {
  /* Adjust the font size in the button if needed */
  font-size: 1rem; /* EDIT THIS for button text size */
}

/********************************** 
7. (Optional) RESPONSIVE OVERRIDES
***********************************/
/*
Because we used Bootstrap classes in index.php:
  - col-xl-3 => 4 columns on extra-large
  - col-lg-4 => 3 columns on large
  - col-md-6 => 2 columns on medium
  - col-sm-12 => 1 column on small
That handles your request for 4 -> 3 -> 2 -> 1 columns by default.
*/

/* 
Make the card layout horizontal below 768px, ensuring 
the card doesn’t grow taller than the image’s height.
*/
@media (max-width: 768px) {
.library-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important; /* keep content centered vertically */
  overflow: hidden; /* prevent text from expanding card height */
  min-height: unset !important;
}

.library-card .image-container {
  flex: 0 0 150px; /* or set this to whatever dimension you like */
  width: 150px;
  height: 150px;
  margin-right: 1rem;
  padding-top: 0 !important; /* disable the 16:9 ratio for mobile */
}

.library-card .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.library-card .card-body {
  flex: 1 1 auto;
  overflow: hidden; 
}

.library-card h2.card-title,
.library-card .card-subtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* ensures at most 2 lines */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Adjust button alignment if needed */
.library-card .card-body .btn {
  margin-top: 0;
}
}
