/* Fix for the Hero Image */
.event-hero {
width: 100%;
margin-bottom: 20px;
}
.hero-img {
width: 100% !important; /* Forces it to fill the col-sm-8 width */
height: auto;
border-radius: 8px;
display: block;
}
/* Fix for the Related Grid */
.related-grid {
display: flex;
gap: 15px;
flex-wrap: wrap; /* Allows them to wrap on mobile */
}
.event-card {
flex: 1;
min-width: 200px; /* Ensures they don't get too skinny */
text-decoration: none;
color: inherit;
}
.card-thumb {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 4px;
}
.separator {
border: 0;
border-top: 1px solid #ddd;
margin: 30px 0;
}
/* Ensure the event container takes up the full width of its parent column */
.event-container {
width: 100%;
clear: both; /* Prevents floated elements from messing with the layout */
text-align: left; /* Forces left alignment for everything inside */
}
/* Fix the separator position */
.separator {
width: 100%;
border: 0;
border-top: 1px solid #ddd;
margin: 40px 0 20px 0;
clear: both;
display: block;
}
/* Force "Fler evenemang i" to be left-aligned */
.related-title {
text-align: left !important;
display: block;
width: 100%;
margin-bottom: 20px;
clear: both;
}
/* Keep the related grid left-aligned on large screens */
.related-grid {
display: flex;
justify-content: flex-start; /* Ensures items start from the left */
gap: 20px;
flex-wrap: wrap;
}
/* Container for the whole result set */
.event-results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
padding: 20px 0;
}
/* Individual Card Styling */
.event-list-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.2s ease-in-out;
display: flex;
flex-direction: column;
border: 1px solid #eee;
}
.event-list-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.card-image-box {
width: 100%;
height: 180px;
overflow: hidden;
}
.card-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-body-box {
padding: 15px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.card-heading {
margin: 0 0 10px 0;
font-size: 1.2rem;
color: #007bff;
font-weight: bold;
height: 2.4em; /* Ensures titles align even if one is longer */
overflow: hidden;
}
.card-meta {
font-size: 0.9rem;
color: #666;
margin-bottom: 15px;
}
.card-actions {
display: flex;
justify-content: space-between;
margin-top: auto;
gap: 10px;
}
.btn-primary, .btn-secondary, .btn-next-prev {
padding: 8px 12px;
border-radius: 6px;
text-decoration: none;
font-size: 0.85rem;
text-align: center;
flex: 1;
}
.btn-next-prev {
padding: 8px 12px;
border-radius: 6px;
text-decoration: none;
font-size: 1.2rem;
text-align: center;
flex: 1;
}
.btn-primary, .btn-next-prev, .btn-next-prev { background: #007bff; color: white; }
.btn-secondary { background: #f8f9fa; color: #333; border: 1px solid #ddd; }
/* This ensures the image box stays the same size for every card */
.card-image-box {
width: 100%;
height: 180px; /* Adjust height to your preference */
overflow: hidden;
background-color: #f0f0f0; /* Gray fallback if image fails to load */
}
/* This forces the image to fill the box without stretching */
.card-img {
width: 100% !important;
height: 100% !important;
object-fit: cover; /* Crops the image to fit perfectly */
display: block;
}
.page-header .btn-primary, .btn-next-prev {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
margin-bottom: 10px;
}
.page-header .btn-primary:hover {
background-color: #0056b3;
}
/* --- UPDATED HERO SECTION: LEFT ALIGNED & ROUNDED --- */
.event-hero-container {
width: 100%;
padding: 20px 0;
display: flex;
justify-content: flex-start; /* Aligns content to the left */
background-color: transparent;
}
.hero-full-img {
/* Fixed width: set to 400px (bigger) but responsive on small screens */
width: 400px !important;
height: 250px !important; /* Fixed height for uniformity */
border-radius: 25px; /* Pronounced rounded corners */
object-fit: cover; /* Ensures image fills the 400x250 area without stretching */
display: block;
margin-left: 0; /* Ensures no auto-centering */
/* Adds a modern shadow to make the rounded edges pop */
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.hero-full-img:hover {
transform: scale(1.02); /* Slight lift on hover */
}
/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
.event-hero-container {
justify-content: center; /* Center on mobile for better balance */
}
.hero-full-img {
width: 90% !important; /* Take up most of the screen on phones */
height: auto !important;
}
}
.btn-reset {
margin-top: 5px;
margin-bottom: 0x; /* Optional: adds space below it too */
}