/* Dropdown Animation Effects */

.dropdown-animation {
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top right;
}

.dropdown-animation.show {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.dropdown-animation.hide {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    pointer-events: none;
}


/* --------------------------------------------- * 
 *  CARD PROPERTIES                              *
 * --------------------------------------------- */

.card-image-container img {
    transition: transform 0.3s ease;
}

.card-image-container:hover img {
    transform: scale(1.2);
}

/* Ensure card content area has a consistent min-height
   so cards align uniformly regardless of title wrapping */
.card-body {
    min-height: 6rem; /* ~96px; tune if needed */
}

/* !!! WARNING !!! THE FOLLOWING NEEDS TO GO LAST
   ----------------------------------------------
   Responsive Card Grid Utilities
   Staircase Grid: 4→2→1 with proportional scaling 
   ---------------------------------------------- */

.grid-staircase { 
    display: grid; 
    gap: 2rem; 
    
    /* Responsive, no horizontal overflow */
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    align-items: stretch;           /* equal height per row */
    overflow-x: hidden;             /* prevent accidental horizontal scroll */
}

/* Allow items to shrink inside their grid cells (prevents overflow) */
.grid-staircase > * { min-width: 0; }

/* Ensure cards fill the grid row height even if content is shorter */
.grid-staircase .card { height: 100%; }

@media (max-width: 1024px) { 
    .grid-staircase { 
        grid-template-columns: repeat(3, 1fr); 
    } 
}

@media (max-width: 768px) { 
    .grid-staircase { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}

@media (max-width: 512px) { 
    .grid-staircase { 
        grid-template-columns: repeat(1, 1fr); 
    } 
}

/* ----------------------------------------------
   Minimising Screen
   ---------------------------------------------- */

/* Need to not displat before 768px*/
.show-below-768 { display: none !important; }

/* Utility: hide sidebar below 1104px (704 + 2*200) */
@media (max-width: 1104px) {
    .show-below-768 { display: flex !important; }
    .hide-below-768 { display: none !important; }
}

/* Utility: hide sidebar below 1104px (704 + 2*200) */
@media (max-width: 480px) {
    .hide-below-480 { display: none !important; }
}

/* ----------------------------------------------
   Search icon spinner toggle + animation
   ---------------------------------------------- */
.search-icon-wrap .spinner { display: none; }
.search-icon-wrap.htmx-request .idle { display: none; }
.search-icon-wrap.htmx-request .spinner { display: inline-flex; }


/* ----------------------------------------------
   Search icon toggle NavBar
   ---------------------------------------------- */

/* src/webapp/assets/styles-custom.css */
.show-below-600{ display: none; }
.show-above-600 { display: inline-flex; }

@media (max-width: 600px) {
  .show-below-600 { display: inline-flex; }
  .show-above-600 { display: none; }
}


/* ----------------------------------------------
   Search input layout fixes TODO: Need to review
   ---------------------------------------------- */

/* Search input layout fixes */
.search-input {
    /* .basic-div is display:flex already; override alignment */
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
  }
  
.search-input input {
/* Allow the text field to shrink so it doesn't push the icon */
min-width: 0;
flex: 1 1 auto;
box-sizing: border-box;
}
  
.search-input .search-icon-wrap {
/* Keep the icon from shrinking or wrapping */
flex: 0 0 auto;
display: inline-flex;
align-items: center;
}