/*
 Theme Name:   Photogrid Block
 Description:  Block theme learning project
 Version:      1.0
 Requires at least: 6.5
 Tested up to: 7.0
*/

/* Each grid tile: positioning anchor for the overlay, and no stray margin
   (some WordPress core styles add margin-bottom to grid items by default,
   which otherwise stacks on top of the grid gap and unbalances row spacing) */
.photo-grid > .wp-block-post {
  position: relative !important;
  margin: 0 !important;
}

/* Equal spacing between rows and columns */
.photo-grid {
  row-gap: 4px !important;
  column-gap: 4px !important;
}

/* Hover overlay: title + category, hidden until hover.
   position: absolute + !important is required here — without it, WordPress's
   own "is-layout-flex" class (auto-added to every Group block) can win the
   cascade and leave this in normal flow instead of overlaying the image,
   which is what was making some tiles taller than others. */
.photo-grid .photo-caption {
  position: absolute !important;
  inset: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.photo-grid > .wp-block-post:hover .photo-caption,
.photo-grid > .wp-block-post:focus-within .photo-caption {
  opacity: 1;
}

.photo-grid .photo-caption,
.photo-grid .photo-caption a {
  color: #fff;
  text-decoration: none;
}

/* Make the whole tile clickable, not just the title text. */
.photo-grid .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.photo-grid .wp-block-post-terms {
  position: relative;
  z-index: 2;
}

/* Mobile: caption below the photo, always visible, no darkening. */
@media (max-width: 600px) {
  .photo-grid .photo-caption {
    position: static !important;
    opacity: 1;
    background: none;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    text-align: left;
    padding: 8px 4px;
  }

  .photo-grid .photo-caption,
  .photo-grid .photo-caption a {
    color: inherit;
  }
}

/* Nav menu links turn blue on hover, matching the original GeneratePress site */
.wp-block-navigation-item__content:hover {
  color: #1e73be !important;
}

/* Single post: tighten the gap between title and the date/author line,
   and force 15px on all its children. As with the photo-caption issue earlier,
   inline block styles alone weren't enough — WordPress's own core block CSS
   (default margins on post-title, and default sizing on post-date/paragraph/
   post-author-name) was winning the cascade, so this needs !important. */
.wp-block-post-title {
  margin-bottom: 0 !important;
}

.single-post-meta {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.single-post-meta,
.single-post-meta * {
  font-size: 15px !important;
}

.wp-block-post-terms {
  margin-top: 0 !important;
}