/* Posts styles */
.content {
    padding: 0;
    text-align: left;
}
.blog-post {
    padding: 20px;
    border-radius: 8px;
}

.post-hero {
    width: 100vw;
    height: 100vh;
    display: grid;
    position: absolute;
    top: 0;
    grid-template-columns: 1fr 1fr;
    background-color: #d0e6e7;
    overflow: hidden;
    padding: 0rem 0rem;
    align-items: center;
}
.hero-spacer {
    height: 100vh; /* Same as post-hero height */
}
  
.post-hero-content {
  text-align: right;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.post-hero-content:hover .badge {
  transform: translateY(0);
  opacity: 1;
}
.badge {
  color: #000000;
  transform: translateY(10px);
  opacity: 0.7;
  transition: all 0.3s ease;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.1em;
}
  
.post-hero h1 {
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 30px 0px 10px 0px;
}
.blog-meta {
  font-size: 0.9rem;
  color: #555;
}
.post-hero-image {
  clip-path: polygon(4% 0%, 100% 0, 100% 100%, 15% 80%);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.post-hero-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  mix-blend-mode: normal;
}
/* remove/ignore old .blog-container layout rules */
.content {
  display: grid;
  grid-template-columns: 1fr;         /* mobile: 1 col */
  gap: 2rem;
  padding: 0;                         /* you already had this */
}
.blog-post,
.post-sidebar { min-width: 0; }       /* prevent overflow in grid */

/* small widget cosmetics */
.post-widget .widget-title { font-weight: 700; margin: 0 0 0.75rem; }
.post-widget .widget-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.post-widget .date { opacity: .6; font-size: .85rem; margin-left: .5rem; }

@media (min-width: 768px) {
  .content {
    grid-template-columns: 1.2fr 0.8fr;        /* tablet: 2 cols */
  }
  .blog-post { grid-column: 1; }
  .post-sidebar { grid-column: 2; }
}

/*DESKTOP ONLY BREAKPOINT*/
@media (min-width: 1024px) {
  .post-hero-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  
    /* padding you want */
    padding-inline-start: clamp(26px, 14vw, 270px);
  
    /* make padding fit instead of being clamped by intrinsic size */
    box-sizing: border-box;
    min-width: 0;          /* ← key for grid items that are flex containers */
    width: 100%;
    /* optional cap: */
    max-width: 118ch;
  }
  .content {
    grid-template-columns: 1fr 1fr minmax(280px, 380px);  /* desktop: 3 cols */
    align-items: start;
  }
  .blog-post {
    grid-column: 1 / span 2;           /* spans first two columns */
  }
  .blog-post .blog-content {
    padding-inline: clamp(16px, 3vw, 32px);
  }
  .post-sidebar {
    grid-column: 3;
    position: sticky;
    top: 6rem;                          /* adjust to your header height */
    max-height: calc(100dvh - 8rem);
    overflow: auto;
  }
}

/*MOBILE BREAKPOINT*/ 
@media (max-width: 768px) {
  .post-hero {
    grid-template-columns: 1fr; /* Stack content & image vertically */
  }
  
  .post-hero-content {
    padding: 8rem 0rem 0rem 0rem;
    clip-path: none;
    text-align: center;
    background-color: transparent; /* optional */
  }
  
  .post-hero-image {
    clip-path: polygon(26% 0%, 80% 7%, 75% 38%, 75% 100%, 20% 100%, 20% 40%, 75% 40%, 20% 33%);
    height: auto;
  }
  
  .post-hero-image img {
    object-fit: cover;
    height: 100%;
  }
}