/* General page styling (optional, adjust as needed) */
/* Global body styles like font-family, margin, color are expected to come from start.css */
/* The .page-container will have the specific background for the tips content area. */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 70px;
  background-color: #f4f4f4; /* Moved background color here */
}

.section-title {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 40px;
  color: #333;
}

/* Tips container for the grid layout */
.tips-container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
}

.tips-column {
  width: 48%;
}

/* Individual tip post styling */
.tip-post {
  background-color: #ffffff;
  /* Removed border: 1px solid #e0e0e0; */
  /* Removed display: flex and flex-direction: column to allow natural height */
  /* display: flex; */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 20px;
}

.tip-post:hover {
  transform: translateY(-5px);
  /* box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Removed hover shadow as well */
}

.tip-post img {
  width: 100%;
  max-height: 500px; /* Fixed height for landscape images */
  object-fit: cover; /* Ensures image covers the area, might crop */
  display: block; /* Removes extra space below image */
}

.tip-post h3 {
  font-size: 1.4em;
  color: #333;
  margin: 15px 15px 10px 15px;
  text-align: left;
}

.tip-post .date {
  font-size: 0.85em;
  color: #777;
  margin: 0 15px 10px 15px;
}

.tip-post .summary {
  font-size: 1em;
  color: #555;
  line-height: 1.6;
  margin: 0 15px 15px 15px;
  /* Removed flex-grow: 1 to allow natural height */
}

.tip-post .read-more {
  display: inline-block;
  background-color: #007bff; /* Example: Bootstrap primary blue */
  color: white;
  padding: 10px 15px;
  margin: 0 15px 15px 15px; /* Margin around the button */
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  /* align-self: flex-start; /* No longer needed without flex container */
}

.tip-post .read-more:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

/* Responsive adjustments for the grid */
/*
   The `grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));`
   already handles responsiveness quite well. It will show:
   - 3 columns if container width >= ~1050px (3*320 + 2*25 gaps)
   - 2 columns if container width is between ~690px and ~1050px
   - 1 column if container width < ~690px
   You can adjust the `320px` (min-width of a post) to change these breakpoints.
*/

/* Example of explicit breakpoints if needed for other elements or finer control */
@media (max-width: 768px) {
  /* Smaller tablets and mobile */
  .section-title {
    font-size: 2em;
  }
  .tips-column {
    width: 100%; /* Make columns stack on smaller screens */
  }
  .tip-post h3 {
    font-size: 1.2em;
  }
  .tip-post .summary {
    font-size: 0.95em;
  }
}

@media (max-width: 480px) {
  /* Small mobile devices */
  .page-container {
    padding-top: 70px;
  }
  .tips-container {
    gap: 15px;
  }
  .tip-post h3 {
    font-size: 1.1em;
  }
}

/* If you are using WOW.js for animations, ensure it's initialized */
/* The HTML already includes:
   <script src="scripts/wow.min.js"></script>
   <script>new WOW().init();</script>
   And posts have `wow fadeInUp` classes.
*/

/* Styles for article subpage layout (from effektives-aufwaermen.html) */
.article-header-image {
  width: 100%;
  max-height: 450px; /* Adjust as needed */
  object-fit: cover;
  margin-bottom: 25px;
}
.article-page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* Add some padding to the sides */
}
.article-layout {
  display: flex;
  flex-wrap: wrap; /* Allows sidebar to stack on smaller screens */
  gap: 30px; /* Space between main content and sidebar */
}
.article-main-content {
  flex: 3; /* Main content takes up more space */
  min-width: 0; /* Prevents flex item from overflowing */
}
.article-sidebar {
  flex: 1; /* Sidebar takes up less space */
  min-width: 280px; /* Minimum width for the sidebar */
  background-color: #f8f9fa; /* Light background for sidebar */
  padding: 20px;
  border-radius: 8px;
  height: fit-content; /* Sidebar height adjusts to its content */
}
.article-main-content h1 {
  color: #1a1241;
  font-size: 2.2em; /* Slightly smaller for subpage */
  margin-bottom: 8px;
}
.article-main-content .date {
  color: #777;
  margin-bottom: 20px;
  font-style: italic;
  font-size: 0.9em;
}
.article-main-content p,
.article-main-content ul,
.article-main-content ol {
  line-height: 1.7;
  color: #333;
  margin-bottom: 15px;
}
.article-main-content h2 {
  color: #1a1241;
  margin-top: 30px;
  margin-bottom: 15px;
  font-size: 1.8em;
}
.article-sidebar h3 {
  color: #1a1241;
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.4em;
}
.article-sidebar ul {
  list-style: none;
  padding: 0;
}
.article-sidebar ul li {
  margin-bottom: 10px;
}
.article-sidebar ul li a {
  text-decoration: none;
  color: var(--dark-pink);
}
.article-sidebar ul li a:hover {
  text-decoration: underline;
}
.back-to-tipps-link {
  display: inline-block;
  margin-bottom: 25px;
  color: var(--dark-pink);
  text-decoration: none;
  font-weight: bold;
}
.back-to-tipps-link:hover {
  text-decoration: underline;
}

/* Responsive adjustments for article layout */
@media (max-width: 768px) {
  .article-layout {
    flex-direction: column;
  }
  .article-sidebar {
    margin-top: 20px;
  }
}