/* 1. Grid Container */
.oa-post-grid {
  display: grid;
  /* 3 columns on desktop, max width 300px each */
  grid-template-columns: repeat(3, minmax(0, 300px));
  /* Added a 25px gap between cards */
  gap: 25px;
  justify-content: center;
  padding: 20px 0;
}

/* 2. Card Styling */
.oa-post-grid article {
  background: #fff;
  border: 1px solid #e1e1e1; /* Subtle border */
  border-radius: 8px; /* Rounded corners */
  overflow: hidden; /* Keeps image corners rounded */
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Soft shadow */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.oa-post-grid article .head-line {
    display: none !important;
}

/* Hover Effect for Interactivity */
.oa-post-grid article:hover {
  transform: translateY(-5px); /* Slight lift on hover */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 3. Image Styling */
.post-thumbnail img {
  width: 100%;
  height: 200px; /* Fixed height for consistency */
  object-fit: cover; /* Prevents image stretching */
  display: block;
}

/* 4. Text Content Padding */
.entry-header, .entry-summary {
  padding: 15px 20px;
}

.entry-header h2 {
  margin-top: 0;
  font-size: 1.25rem;
}

/* 5. Responsive Adjustments */
@media (max-width: 992px) {
  .oa-post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .oa-post-grid { grid-template-columns: 1fr; }
}

/* Container for the whole card */
.clickable-card {
    position: relative; /* Essential for the stretched link */
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    height: 100%;
}

/* Card Hover Effect */
.clickable-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Button Styling */
.read-more-btn {
    display: inline-block;
    background-color: #0073aa; /* WordPress Blue */
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    transition: background 0.3s ease;
}

/* Magic: This stretches the link to cover the entire article */
.read-more-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Ensure the card content is padded */
.card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Align button to bottom of card */
.card-footer {
    margin-top: auto;
    padding-top: 15px;
}

/* Visual feedback for the button when the card is hovered */
.clickable-card:hover .read-more-btn {
    background-color: #005177;
}

.card-footer {
    margin-top: auto;
    padding-top: 15px;
    display: flex;
    justify-content: center; /* Centers the button horizontally */
}

/* Button specific adjustments */
.read-more-btn {
    display: inline-block;
    background-color: #0073aa;
    color: #fff !important;
    padding: 10px 25px; /* Wider padding for better balance */
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    position: relative; /* Keeps it above the flow */
    z-index: 2; /* Ensures it stays visually on top */
}

/* The invisible overlay still covers the whole card */
.read-more-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    /* This calculation stretches the invisible hit area to the card boundaries */
    width: 300px; /* Max card width */
    height: 1000px; /* Large enough to cover card height */
    transform: translate(-50%, -50%); /* Centers the hit area expansion */
    top: 50%;
    left: 50%;
    z-index: -1;
}