/* Hide trending tags panel in Chirpy sidebar - Comprehensive selectors */
#sidebar #panel-wrapper #trending-tags,
#sidebar #panel-wrapper .trending-tags,
#sidebar .panel-wrapper #trending-tags,
#sidebar .panel-wrapper .trending-tags,
#sidebar [id*="trending-tags"],
#sidebar [id*="trending_tags"],
#sidebar [class*="trending-tags"],
#sidebar [class*="trending_tags"],
#sidebar [id*="trending"],
#sidebar [class*="trending"] {
  display: none !important;
}

/* Hide recently updated posts panel in Chirpy sidebar */
#sidebar #panel-wrapper #recent-posts,
#sidebar #panel-wrapper .recent-posts,
#sidebar .panel-wrapper #recent-posts,
#sidebar .panel-wrapper .recent-posts,
#sidebar [id*="recent-posts"],
#sidebar [id*="recent_posts"],
#sidebar [class*="recent-posts"],
#sidebar [class*="recent_posts"],
#sidebar [id*="recent"],
#sidebar [class*="recent"] {
  display: none !important;
}

/* Hide panels by data attributes */
#sidebar [data-panel="trending-tags"],
#sidebar [data-panel="recent-posts"] {
  display: none !important;
}

/* Post preview cards show the image on the left (theme default is right) */
@media (min-width: 768px) {
  #post-list .card .preview-img,
  #post-list .card .preview-img img {
    border-radius: 10px;
  }
}

/* Photo collage on the About page */
.photo-collage {
  column-count: 2;
  column-gap: 0.5rem;
  margin: 1.5rem 0;
}

@media (min-width: 768px) {
  .photo-collage {
    column-count: 3;
  }
}

.photo-collage img {
  width: 100%;
  display: block;
  margin-bottom: 0.5rem;
  border-radius: 10px;
  break-inside: avoid;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s ease;
}

.photo-collage img:hover {
  transform: scale(1.02);
}

/* Side-by-side images in a post. Set each item's flex-grow to its image's
   width / height ratio so the images share a common height. */
.image-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 0.5rem 0;
}

.image-row > div {
  flex-basis: 0;
  min-width: 0;
}

.image-row a.popup {
  display: block;
  width: 100%;
  margin: 0 !important;
}

.image-row img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.image-row-caption {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
}

/* One style for every caption: the post's header image, markdown image
   captions, .image-row captions, and embedded video captions. */
.content a.popup + em,
.content .embed-video + em,
.image-row-caption,
figcaption {
  font-size: 0.95rem !important;
  font-style: normal;
  font-weight: 500;
  color: var(--text-color) !important;
  line-height: 1.6;
}

@media (max-width: 575px) {
  .image-row {
    flex-direction: column;
  }

  .image-row > div {
    flex: none !important;
    width: 100%;
  }
}

/* Note shown after the sidebar email button copies the address */
.email-toast {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 1080;
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  background: var(--text-color);
  color: var(--main-bg);
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.email-toast.show {
  opacity: 1;
  transform: translateY(0);
}