/*
	Cameron's Rocks -- blog.css
	Styles specific to blog.html: the blog post grid/cards and a couple
	of small blog-only utility classes. Link this AFTER main.css/base.css
	on the blog page only.
*/

	.blog-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 20px;
		padding: 40px;
	  }
	  
	  .blog-card {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		transition: transform 0.3s ease;
		text-decoration: none;
	  }
	  
	  .blog-card img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s ease;
	  }
	  
	  .blog-card:hover img {
		transform: scale(1.05);
	  }
	  
	  .blog-card .overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 12px;
		font-size: 1.25rem;
		font-weight: bold;
		font-family: sans-serif;
		opacity: 0;
		transition: opacity 0.3s ease;
	  }
	  
	  .blog-card:hover .overlay {
		opacity: 1;
	  }

/*extra rule for when theres only one card to reduce size.*/

	  .blog-grid:only-child,
.blog-grid:has(> .blog-card:only-child) {
  justify-content: center; /* center the card */
}

.blog-grid:has(> .blog-card:only-child) .blog-card {
  max-width: 1000px; /* set a smaller max width */
  margin: 0 auto;   /* center horizontally */
}

	h3.fenics-header {
  text-align: center;
  font-size: 2rem; /* adjust as you like */
  font-weight: bold;
  font-family:monospace;
}

.highlight-link {
    color: #3700ff;       /* your desired color */
    text-decoration: none; /* optional */
}