/* ==========================================================================
   BLOG PAGE STYLES (drop-in)
   - Mobile-first, responsive cards
   - No navbar overrides (inherits from base.css)
   - Fixes "tiny" look by removing hard width/height locks
   ========================================================================== */

/* --- Page base --- */
html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: linear-gradient(to bottom, #8eb5e9, #2d3c57);
  color: #333;
}

/* Keep page text consistent with site defaults */
.blog-container {
  font-size: 1rem;
  line-height: 1.6;
  /* Optional max-width for nicer reading on desktop */
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Optional: dev toolbar (Post button) --- */
.blog-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0;
}
.post-btn {
  background-color: #4a90e2;
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease;
}
.post-btn:hover { background-color: #3b7dd8; }

/* ==========================================================================
   FEATURED BANNER (responsive)
   ========================================================================== */
.featured-banner {
  position: relative;
  width: 100%;
  height: min(70vh, 520px);
  overflow: hidden;
}
.featured-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(80%);
  display: block;
}

.featured-text {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(255,255,255,0.9);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  max-width: 520px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.featured-text h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.05rem, 3.5vw, 1.5rem);
  line-height: 1.25;
}
.featured-text p  {
  margin: 0;
  font-size: clamp(.95rem, 3.2vw, 1rem);
}

/* Empty featured fallback */
.empty-featured .featured-text {
  background: rgba(255,255,255,0.95);
}

/* ==========================================================================
   GRID & CARDS
   ========================================================================== */
.post-grid {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-content: center;
}

/* Make entire card clickable */
.post-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Card */
.post-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  overflow: hidden; /* clip image & paperclip overlap if needed */
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform, box-shadow;
}

/* Image on top, maintain aspect ratio consistently */
.post-thumb-img,
.post-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Card content */
.post-card h3,
.post-card p { margin: 0; }

.post-card h3 {
  padding: .75rem 1rem 0;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 700;
}

.post-card p {
  padding: .4rem 1rem 1rem;
  font-size: .95rem;
  line-height: 1.5;
  color: #444;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 3px 6px 20px rgba(0,0,0,.12);
  cursor: pointer;
}

/* Date badge (appears on hover for pointer devices) */
.post-date {
  position: absolute;
  bottom: .6rem;
  right: .8rem;
  background: rgba(255,255,255,.85);
  color: #000;
  font-size: .75rem;
  padding: .2rem .5rem;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.post-card:hover .post-date {
  opacity: 1;
  transform: translateY(0);
}

/* Paperclip (fun accent) */
@keyframes bob {
  0%, 100% { transform: rotate(-25deg) translateY(0); }
  50%      { transform: rotate(-25deg) translateY(-2px); }
}
.paperclip {
  position: absolute;
  top: -1rem;
  left: -.6rem;
  width: 60px;
  height: 60px;
  opacity: .85;
  pointer-events: none;
  z-index: 1;
  animation: bob 1.5s ease-in-out infinite;
}

/* ==========================================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .post-card,
  .post-date,
  .paperclip {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   MOBILE POLISH
   ========================================================================== */
@media (max-width: 768px) {
  .blog-container {
    font-size: 1rem;     /* keep consistent with base */
    line-height: 1.6;
    padding: 0 0.25rem;  /* a little breathing room at edges */
  }

  .featured-text { 
    max-width: 85%;
    padding: .6rem .8rem; 
    border-radius: 10px;
  }
  .featured-text h2 { font-size: 1.1rem; }
  .featured-text p  { font-size: .95rem; }

  .post-card h3 { font-size: 1rem; }
  .post-card p  { font-size: .95rem; }
}

/* ==========================================================================
   NOTES
   - This file intentionally does NOT style .navbar/.nav-* to avoid
     fighting global base.css. The blog page inherits the site navbar.
   - If you previously had fixed sizes like max-width:180px or height:140px
     on .post-card, those are removed to prevent “tiny” cards on mobile.
   ========================================================================== */