/***** RESEARCH CATEGORIES *****/ /* Styling for the Research Subcategory Grid */ .research-subcategory-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; text-align: center; } .research-subcategory-item img { max-width: 100%; height: auto; } .research-subcategory-title { font-size: 1.1em; margin: 0; } .research-subcategory-title a { text-decoration: none; color: inherit; } /* Styling for the Research Category Grid */ .research-subcategory-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; } /* Shifted text box up to meet image */ /* Using flexbox to ensure there's no gap between the image and title box */ .research-subcategory-item { display: flex; flex-direction: column; text-decoration: none; border: 1px solid #eee; overflow: hidden; } /* Image aspect ratio - no changes */ .research-subcategory-item img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; } /* Dark blue title box - no changes */ .research-subcategory-title-box { background-color: #0c2340; padding: 20px 20px 30px; /* Added flex-grow to handle cases where text wraps to multiple lines */ flex-grow: 1; } /* Subcategory title styling - no changes */ .research-subcategory-title { color: #ffffff; margin: 0; padding: 0; } /* New hover underline animation */ .research-subcategory-title.lead { position: relative; display: inline-block; text-decoration: none; } /* NOTE: The rule to change text color to gold on hover has been REMOVED. */ .research-subcategory-title.lead::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: -4px; left: 0; background-color: #ae9142; /* Initial state: transparent and shifted down */ opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease-out, transform 0.3s ease-out; } .research-subcategory-item:hover .research-subcategory-title.lead::after { /* Final state on hover: opaque and in its final position */ opacity: 1; transform: translateY(0); } /* Spacing for parent category sections - no changes */ .research-parent-category-section { margin-bottom: 60px; } .research-parent-category-title { margin-bottom: 30px; }