/**
 * Pine Masonry Portfolio — widget-specific layer on top of bb-brave-portfolio-scoped.
 * Core Webflow + masonry rules remain in bb-brave-portfolio.css.
 */

.bb-pine-masonry-portfolio.bb-portfolio--brave {
  /* Reserved for theme-safe overrides scoped to this widget only. */
}

/*
 * Some themes or Webflow bundles strip `display:grid` from `.w-layout-grid`. Pin a real grid here.
 *
 * ≤1024px (tablet / phone): content-sized rows (no 1px + span trick). Avoids WebKit overlap and
 * resize glitches when crossing breakpoints; matches Elementor's default tablet max-width.
 * ≥1025px: dense 1px implicit rows for JS `grid-row-end: span N` masonry / metro packing.
 */
.elementor-widget-bb--pine-masonry-portfolio
  .bb-pine-masonry-portfolio.bb-portfolio--brave[data-bb-masonry='yes']
  .projects-grid,
.bb-pine-masonry-portfolio.bb-portfolio--brave[data-bb-masonry='yes'] .projects-grid {
  display: grid !important;
  grid-template-rows: none !important;
}

@media (min-width: 1025px) {
  .elementor-widget-bb--pine-masonry-portfolio
    .bb-pine-masonry-portfolio.bb-portfolio--brave[data-bb-masonry='yes']
    .projects-grid,
  .bb-pine-masonry-portfolio.bb-portfolio--brave[data-bb-masonry='yes'] .projects-grid {
    grid-auto-rows: 1px !important;
    grid-auto-flow: dense !important;
  }
}

@media (max-width: 1024px) {
  .elementor-widget-bb--pine-masonry-portfolio
    .bb-pine-masonry-portfolio.bb-portfolio--brave[data-bb-masonry='yes']
    .projects-grid,
  .bb-pine-masonry-portfolio.bb-portfolio--brave[data-bb-masonry='yes'] .projects-grid {
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
  }

  .elementor-widget-bb--pine-masonry-portfolio
    .bb-pine-masonry-portfolio.bb-portfolio--brave[data-bb-masonry='yes']
    .projects-grid
    > .bb-grid-item,
  .bb-pine-masonry-portfolio.bb-portfolio--brave[data-bb-masonry='yes']
    .projects-grid
    > .bb-grid-item {
    grid-row: auto !important;
    grid-column: auto !important;
  }
}