.iframe-container {
  width: 100%;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}

.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}


.blog-index {
  max-width: 1200px;
  margin: 2rem auto;       /* center + vertical gap */
  padding: 0 1.5rem;       /* horizontal gutter */
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}
.blog-header {
  text-align: center;
  margin: 2rem auto;
  max-width: 800px;
}
.blog-header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.blog-header p {
  font-size: 1.1rem;
  color: #666;
}


main {
  padding-top: 75px;
}
.sidebar {
  flex: 0 0 240px;
  font-size: 0.9rem;       /* slightly smaller base text */
  line-height: 1.3;        /* less vertical gap */
}
.sidebar details {
  margin-bottom: 1rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: .5rem;
}
.sidebar summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none;
  position: relative;
  font-size: 0.95rem;      /* smaller month labels */
  line-height: 1.3;
  padding: 0.25rem 0;
}
.sidebar summary::after {
  content: '▶';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.sidebar ul {
  margin: 0.5rem 0 0 1.25rem;
  padding: 0;
  list-style: disc;
}
.sidebar summary::-webkit-details-marker,
.sidebar summary::marker {
  display: none;
}
.sidebar summary::after {
  content: '▶';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}
.sidebar details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.sidebar h2 {
  font-size: 1rem;         /* scale down the “All Posts” heading */
  margin-bottom: 0.5rem;
}

.sidebar details {
  margin-bottom: 0.75rem;  /* a bit less space between months */
}

.sidebar ul li {
  font-size: 0.9rem;       /* smaller list item text */
  line-height: 1.3;
  margin-bottom: 0.25rem;  /* tighter spacing between items */
}


.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 240px);
  justify-content: center;  /* center the pack of cards in the container */
  gap: 1.5rem;
  margin: 0 auto;           /* ensure the grid itself is centered */
}

/* Each card is exactly the column width */
.grid-card {
  width: 220px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.grid-card img {
  width: 100%; display: block;
}
.grid-card h3 {
  margin: .75rem 1rem .25rem;
  font-size: 1.1rem;
  color: #00b0cc;
}
.grid-card time {
  display: block;
  margin: 0 1rem 1rem;
  font-size: .85rem;
  color: #666;
}

.post-grid h3 a { 
  color: #00b0cc; 
  text-decoration: none; 
}
.post-grid h3 a:hover { text-decoration: underline; }


@media (max-width: 1000px) {
  .post-grid { grid-template-columns: repeat(2, 240px);}
}

/* in assets/css/blog.css, inside your narrow‐screen media query */
@media (max-width: 800px) {
  .blog-index {
    flex-direction: column;
  }

  /* Force both panels to fill 100% width */
  .post-grid,
  .sidebar {
    flex: none;
    width: 100%;
    max-width: none;
    margin: 0 auto;        /* center if you have any max-width set elsewhere */
  }

  .sidebar {
    /* add a bit of bottom margin so it doesn’t butt right up to the timestamp */
    margin-bottom: 2rem;
  }

  /* Keep the ordering you already have */
  .post-grid { order: 1; }
  .sidebar   { order: 2; }
}