/* HB Project Gallery — paginated mosaic on desktop/tablet, swipe carousel on mobile.
 * Applies to any core Gallery block with the class .hb-project-gallery.
 * JS adds data-page-num / data-page-pos / data-partial attributes to children.
 */

/* ---------- Base mosaic grid (desktop & tablet) ---------- */
.hb-project-gallery.wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 380px;
  gap: 15px;
  margin: 0;
}

.hb-project-gallery.wp-block-gallery.has-nested-images > .wp-block-image {
  width: auto;
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.hb-project-gallery > .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Mosaic spans (positions within a page of 6) ---------- */
@media (min-width: 481px) {
  .hb-project-gallery > [data-page-pos="1"],
  .hb-project-gallery > [data-page-pos="4"] {
    grid-column: span 2;
  }

  .hb-project-gallery > [data-page-pos="3"] {
    grid-row: span 2;
  }

  /* Partial last-page tiles fall back to single-cell layout */
  .hb-project-gallery > [data-partial="true"] {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}

/* ---------- Pagination visibility (desktop & tablet only) ---------- */
@media (min-width: 481px) {
  .hb-project-gallery[data-pages] > .wp-block-image:not(.is-active-page) {
    display: none;
  }

  .hb-project-gallery[data-pages] > .is-active-page {
    animation: hb-page-fadein 0.5s ease forwards;
  }

  /* Stagger fade-in across the 6 mosaic positions for a smooth cascade */
  .hb-project-gallery > .is-active-page[data-page-pos="1"] { animation-delay: 0s; }
  .hb-project-gallery > .is-active-page[data-page-pos="2"] { animation-delay: 0.04s; }
  .hb-project-gallery > .is-active-page[data-page-pos="3"] { animation-delay: 0.08s; }
  .hb-project-gallery > .is-active-page[data-page-pos="4"] { animation-delay: 0.12s; }
  .hb-project-gallery > .is-active-page[data-page-pos="5"] { animation-delay: 0.16s; }
  .hb-project-gallery > .is-active-page[data-page-pos="6"] { animation-delay: 0.20s; }

  /* Outgoing page fades out before display:none kicks in (JS-driven via .is-leaving) */
  .hb-project-gallery > .is-leaving {
    animation: hb-page-fadeout 0.22s ease forwards;
  }

  @keyframes hb-page-fadein {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes hb-page-fadeout {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateY(-6px); }
  }
}

@media (min-width: 481px) and (prefers-reduced-motion: reduce) {
  .hb-project-gallery[data-pages] > .is-active-page,
  .hb-project-gallery > .is-leaving {
    animation: none;
  }
}

/* ---------- Tablet sizing ---------- */
@media (min-width: 481px) and (max-width: 768px) {
  .hb-project-gallery.wp-block-gallery.has-nested-images {
    grid-auto-rows: 220px;
    gap: 10px;
  }
}

/* ---------- Mobile: horizontal scroll-snap carousel ----------
 * !important is required throughout because Sadie's Customizer CSS
 * declares `figure.hb-project-gallery { display: grid !important }` and
 * `grid-template-columns: 1fr !important` at this breakpoint, which would
 * otherwise stack all images vertically and defeat the swipe carousel.
 */
@media (max-width: 480px) {
  .hb-project-gallery.wp-block-gallery.has-nested-images {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    grid-auto-rows: auto !important;
    gap: 12px;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }
  .hb-project-gallery.wp-block-gallery.has-nested-images::-webkit-scrollbar {
    display: none;
  }

  .hb-project-gallery > .wp-block-image {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
    grid-column: auto !important;
    grid-row: auto !important;
    display: block !important; /* override desktop pagination hide */
    margin: 0 !important;
  }
}

/* ---------- Dots ----------
 * Specificity bumped + targeted !important to defeat Astra's default
 * .entry-content button styling on .single-portfolio templates.
 */
ul.hb-gallery-dots {
  list-style: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 0 !important;
  margin: 24px 0 0 0 !important;
}

ul.hb-gallery-dots li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
}

ul.hb-gallery-dots li::before {
  content: none !important;
}

ul.hb-gallery-dots > li > button.hb-gallery-dots__btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #c2bfb5 !important; /* inactive */
  border: none !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

ul.hb-gallery-dots > li > button.hb-gallery-dots__btn:hover {
  background: #9a978d !important;
}

ul.hb-gallery-dots > li > button.hb-gallery-dots__btn:focus-visible {
  outline: 2px solid #7a786f !important;
  outline-offset: 3px;
}

ul.hb-gallery-dots > li > button.hb-gallery-dots__btn.is-active {
  background: #7a786f !important; /* darker, active */
  transform: scale(1.1);
}

/* Show desktop or mobile dot set per breakpoint */
ul.hb-gallery-dots--desktop { display: flex; }
ul.hb-gallery-dots--mobile  { display: none; }

@media (max-width: 480px) {
  ul.hb-gallery-dots--desktop { display: none; }
  ul.hb-gallery-dots--mobile  { display: flex; flex-wrap: wrap; }
  ul.hb-gallery-dots--mobile > li > button.hb-gallery-dots__btn {
    width: 8px !important;
    height: 8px !important;
  }
}