/* =========================
   DATE LABEL (TOP RIGHT)
   ========================= */
.date2 {
  position: absolute;        /* Positioned relative to parent container */
  top: 0;                    /* Align to top edge */
  right: 0;                  /* Align to right edge */
  font-size: 1.5em;          /* Larger text size */
  padding: 1em;              /* Inner spacing */
  line-height: 1em;          /* Tight line spacing */
  opacity: 0.8;              /* Slight transparency */
}

/* =========================
   DATE BADGE (TOP LEFT)
   ========================= */
.date {
  position: absolute;        /* Positioned inside parent */
  top: 0;                    /* Top-left corner */
  left: 0;
  background-color: #009fe3; /* Blue background */
  color: #fff;               /* White text */
  padding: 0.8em;            /* Inner spacing */
}

/* Each part of the date (day/month/year) stacked vertically */
.date span {
  display: block;            /* Forces each element to new line */
  text-align: center;        /* Center text horizontally */
}

/* Day styling (prominent number) */
.date .day {
  font-weight: 700;          /* Bold */
  font-size: 24px;           /* Larger size */
  text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18); /* Subtle shadow */
}

/* Month in uppercase */
.date .month {
  text-transform: uppercase;
}

/* Month + Year smaller text */
.date .month,
.date .year {
  font-size: 12px;
}

/* =========================
   BLOG CARD CONTAINER
   ========================= */
.blog-card {
  float: left;               /* Allows cards to align side-by-side */
  display: block;
  position: relative;        /* Needed for absolute children */
  width: 358px;
  height: 358px;
  margin: 14px;              /* Spacing between cards */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); /* Initial shadow */
  transition: all 450ms ease-out 0s; /* Smooth hover animation */
  overflow: hidden;          /* Prevent overflow content */
}

/* =========================
   IMAGE HANDLING
   ========================= */
.blog-card .blog-img {
  position: absolute;

  /* Trick to center image both vertically and horizontally */
  min-width: 100%;
  min-height: 100%;
  height: 100%;

  top: -9999px;
  left: -9999px;
  right: -9999px;
  bottom: -9999px;

  margin: auto;              /* Centers image */
  overflow: hidden;
}

/* =========================
   HOVER EFFECTS (CARD)
   ========================= */
.blog-card:hover {
  box-shadow: 0 2px 35px rgba(0, 0, 0, 0.85); /* Stronger shadow */
}

/* Expand text overlay on hover */
.blog-card:hover .text-overlay {
  background: rgba(255, 255, 255, 0.92); /* More opaque */
  height: 60%;            /* Expand overlay height */
  top: 40%;               /* Move overlay upward */
  transition: all 450ms ease-in-out 0s;
}

/* Expand paragraph area */
.blog-card:hover p {
  height: 200px;          /* Reveal more text */
  transition: all 350ms ease-in-out 0s;
}

/* Show link only on hover */
.blog-card:hover p a {
  visibility: visible;
}

/* =========================
   TEXT OVERLAY (BOTTOM PANEL)
   ========================= */
.text-overlay {
  position: relative;
  background: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
  width: 100%;
  height: 30%;          /* Initially small */
  top: 70%;             /* Positioned near bottom */
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3); /* Top shadow */
  padding: 10px 12px;
  overflow: hidden;     /* Hide overflowing text */
  transition: all 450ms ease-in-out 0s;
}

/* Title inside overlay */
.text-overlay h2 {
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0.0225em;
  margin: 0;
  font-size: 1.2em;
  font-weight: bold;
}

/* Description text */
.text-overlay p {
  color: #555;
  width: 300px;
  height: 80px;              /* Limits visible text */
  margin: 0;
  line-height: 1.25;
  text-overflow: ellipsis;   /* Adds "..." when cut */
  overflow: hidden;
}

/* Link styling (hidden initially) */
.text-overlay a {
  color: #378AEE;
  text-decoration: none;
  transition: all 350ms linear;
  visibility: hidden;        /* Only visible on hover */
}

/* Link hover effect */
.text-overlay a:hover {
  color: #449CC5;
  border-bottom: 1px dotted #47A8F2;
}