/**
 * Canvas Query Builder Widget Styles
 * 
 * Replicates all blog styles for the Elementor Query Builder widget
 * 
 * @package Canvas
 * @since 1.0.0
 */

/* Widget Container */
.Canvas-query-builder-widget {
  width: 100%;
  min-width: 0;
}

/* Grid Layout */
.Canvas-query-builder-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .Canvas-query-builder-grid.md\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .Canvas-query-builder-grid.md\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .Canvas-query-builder-grid.lg\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .Canvas-query-builder-grid.lg\:grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .Canvas-query-builder-grid.lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .Canvas-query-builder-grid.lg\:grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .Canvas-query-builder-grid.lg\:grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Masonry Layout */
.Canvas-query-builder-widget.masonry-grid {
  column-gap: 1.5rem;
  columns: 1;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-grid.md\:columns-2 {
    columns: 2;
  }
  
  .Canvas-query-builder-widget.masonry-grid.md\:columns-3 {
    columns: 3;
  }
  
  .Canvas-query-builder-widget.masonry-grid.md\:columns-4 {
    columns: 4;
  }
}

@media (min-width: 1024px) {
  .Canvas-query-builder-widget.masonry-grid.lg\:columns-2 {
    columns: 2;
  }
  
  .Canvas-query-builder-widget.masonry-grid.lg\:columns-3 {
    columns: 3;
  }
  
  .Canvas-query-builder-widget.masonry-grid.lg\:columns-4 {
    columns: 4;
  }
  
  .Canvas-query-builder-widget.masonry-grid.lg\:columns-5 {
    columns: 5;
  }
  
  .Canvas-query-builder-widget.masonry-grid.lg\:columns-6 {
    columns: 6;
  }
}

/* Layout Templates for Masonry */

/* Remove overlay radius in Template 01 */

.Canvas-query-builder-widget.masonry-predefined-layout {
  display: block;
}

/* Template 01 (Hero Alternating) */
.Canvas-query-builder-widget.masonry-template-template_01 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Group container for each set of posts (5 for 4-cols, 3 for 3-cols) */
.Canvas-query-builder-widget.masonry-template-template_01 .masonry-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 1.5rem;
    align-items: stretch;
  }

  /* 3 Columns variant: grid becomes 3 cols (overrides default 4 cols) */
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-3 .masonry-group {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }
}

@media (min-width: 1024px) {
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group {
    align-items: stretch;
  }
}

/* Hero item (featured) */
.Canvas-query-builder-widget.masonry-template-template_01 .masonry-hero-item {
  grid-column: 1;
  grid-row: 1;
}

@media (min-width: 768px) {
  /* Default (4 cols): hero spans first two columns */
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group:not(.masonry-group-inverted) .masonry-hero-item {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group.masonry-group-inverted .masonry-hero-item {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
  }

  /* 3 cols: hero takes 2/3 left or right */
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-hero-item {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-hero-item {
    grid-column: 2 / 4;
    grid-row: 1 / 3;
  }
}

/* Small items base */
.Canvas-query-builder-widget.masonry-template-template_01 .masonry-small-item {
  grid-column: 1;
}

/* Remove default H2 margin on small item titles */
.Canvas-query-builder-widget.masonry-template-template_01 .masonry-small-item .entry-title {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  /* 4 cols: positions 2–5 on the side opposite the hero */
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-2 {
    grid-column: 3;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-3 {
    grid-column: 4;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-4 {
    grid-column: 3;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-5 {
    grid-column: 4;
    grid-row: 2;
  }

  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-2 {
    grid-column: 1;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-3 {
    grid-column: 2;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-4 {
    grid-column: 1;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-5 {
    grid-column: 2;
    grid-row: 2;
  }

  /* 3 cols: only two smalls in the free column */
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-2 {
    grid-column: 3;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-3 {
    grid-column: 3;
    grid-row: 2;
  }

  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-2 {
    grid-column: 1;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-3 {
    grid-column: 1;
    grid-row: 2;
  }

  /* Remove bottom padding from last row items in 4-col layout */
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-small-item.masonry-position-4 .post-content,
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-small-item.masonry-position-5 .post-content {
    padding-bottom: 0;
  }
}

/* Fix hero and small image aspect ratios on container for consistent grid */
.Canvas-query-builder-widget.masonry-template-template_01 .masonry-hero-item {
  height: auto;
}

.Canvas-query-builder-widget.masonry-template-template_01 .masonry-hero-item .post-thumbnail {
  height: 100%;
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-hero-item .post-thumbnail {
    aspect-ratio: 4/3;
  }
}

.Canvas-query-builder-widget.masonry-template-template_01 .masonry-hero-item .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Canvas-query-builder-widget.masonry-template-template_01 .masonry-small-item .post-thumbnail {
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_01 .masonry-small-item .post-thumbnail {
    aspect-ratio: 4/3;
  }
}

/* Template 01 — 2 Columns variant (hero + two stacked smalls) */
@media (min-width: 768px) {
  /* Group container grid: 2 cols, 2 rows */
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-2 .masonry-group {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
  }

  /* Hero placement */
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-2 .masonry-group:not(.masonry-group-inverted) .masonry-hero-item {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-2 .masonry-group.masonry-group-inverted .masonry-hero-item {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  /* Small items placement */
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-2 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-2 {
    grid-column: 2;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-2 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-3 {
    grid-column: 2;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-2 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-2 {
    grid-column: 1;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-2 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-3 {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Overlay height fix for small items in Template 01 — 2 Columns */
.Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-2.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card {
  aspect-ratio: 16/9;
}
@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-2.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card {
    aspect-ratio: 4/3;
  }
}

/* Template 02 (Hero with two stacked smalls) */
.Canvas-query-builder-widget.masonry-template-template_02 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Group container for each set of posts (5 for 4-cols, 3 for 3-cols) */
.Canvas-query-builder-widget.masonry-template-template_02 .masonry-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 1.5rem;
    align-items: stretch;
  }

  /* 3 Columns variant: grid becomes 3 cols (overrides default 4 cols) */
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto; /* 3 rows for 7-post cycle */
  }
}

@media (min-width: 1024px) {
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group {
    align-items: stretch;
  }
}

/* Hero item (featured) */
.Canvas-query-builder-widget.masonry-template-template_02 .masonry-hero-item {
  grid-column: 1;
  grid-row: 1;
}

@media (min-width: 768px) {
  /* 3 cols: hero spans two columns without spanning rows */
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-hero-item.masonry-position-1 {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-hero-item.masonry-position-7 {
    grid-column: 2 / 4;
    grid-row: 3;
  }

  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-1 {
    grid-column: 2 / 4;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-7 {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  /* 4 cols: hero ocupa 2 colunas por linha (sem spanning de 2 linhas) */
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group:not(.masonry-group-inverted) .masonry-hero-item.masonry-position-1 {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group:not(.masonry-group-inverted) .masonry-hero-item.masonry-position-6 {
    grid-column: 3 / 5;
    grid-row: 2;
  }

  /* 4 cols: hero invertido ocupa 2 colunas */
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-1 {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-2 {
    grid-column: 3 / 5;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-3 {
    grid-column: 3 / 5;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-4 {
    grid-column: 1 / 3;
    grid-row: 2;
  }

}

/* Small items base */
.Canvas-query-builder-widget.masonry-template-template_02 .masonry-small-item {
  grid-column: 1;
}

/* Remove default H2 margin on small item titles */
.Canvas-query-builder-widget.masonry-template-template_02 .masonry-small-item .entry-title {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  /* 4 cols: 3 posts por linha (normal) */
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-2 {
    grid-column: 3;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-3 {
    grid-column: 4;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-4 {
    grid-column: 1;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-5 {
    grid-column: 2;
    grid-row: 2;
  }

  /* 4 cols: 3 posts por linha (invertido) */
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-1 {
    grid-column: 1;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-2 {
    grid-column: 2;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-5 {
    grid-column: 3;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-6 {
    grid-column: 4;
    grid-row: 2;
  }

  /* 3 cols: mapping for 7-post cycle (2+3+2) */
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-2 {
    grid-column: 3;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-3 {
    grid-column: 1;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-4 {
    grid-column: 2;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-5 {
    grid-column: 3;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-6 {
    grid-column: 1;
    grid-row: 3;
  }

  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-2 {
    grid-column: 1;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-3 {
    grid-column: 1;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-4 {
    grid-column: 2;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-5 {
    grid-column: 3;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-6 {
    grid-column: 3;
    grid-row: 3;
  }

  /* Remove bottom padding from last row items in 4-col layout */
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-small-item.masonry-position-4 .post-content,
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-small-item.masonry-position-5 .post-content {
    padding-bottom: 0;
  }
}

/* Fix hero and small image aspect ratios on container for consistent grid */
.Canvas-query-builder-widget.masonry-template-template_02 .masonry-hero-item {
  height: auto;
}

.Canvas-query-builder-widget.masonry-template-template_02 .masonry-hero-item .post-thumbnail {
  height: 100%;
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-hero-item .post-thumbnail {
    aspect-ratio: 127/100;
  }
}

/* Template 02 small overlay: ensure bottom safe area for content */
.Canvas-query-builder-widget.masonry-template-template_02.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card .Canvas-query-builder-widget__post-card-overlay {
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_02.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card .Canvas-query-builder-widget__post-card-overlay {
    padding: 1.5rem;
  }
}

/* Template 02 overlay: force small card image to fill full article height (only for overlay cards) */
.Canvas-query-builder-widget.masonry-template-template_02.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card {
  position: relative;
}

.Canvas-query-builder-widget.masonry-template-template_02.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card .post-thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.Canvas-query-builder-widget.masonry-template-template_02.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure overlay small items keep intrinsic height in 3-cols variant */
.Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card {
  /* Provide height when image/content are absolutely positioned */
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card {
    aspect-ratio: 127/200; /* Match non-overlay small ratio for consistency */
  }
}

.Canvas-query-builder-widget.masonry-template-template_02 .masonry-small-item {
  height: auto;
}

.Canvas-query-builder-widget.masonry-template-template_02 .masonry-small-item .post-thumbnail {
  aspect-ratio: 16/9;
  height: auto;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-small-item .post-thumbnail {
    aspect-ratio: 127/200;
  }
}

.Canvas-query-builder-widget.masonry-template-template_02 .masonry-small-item .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Canvas-query-builder-widget.masonry-template-template_02 .masonry-small-item .post-thumbnail {
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_02 .masonry-small-item .post-thumbnail {
    aspect-ratio: 127/200;
  }
}

/* Template 04 (clone of Template 02, hero content outside) */
.Canvas-query-builder-widget.masonry-template-template_04 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Group container for each set of posts */
.Canvas-query-builder-widget.masonry-template-template_04 .masonry-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 1.5rem;
    align-items: stretch;
  }

  .Canvas-query-builder-widget.masonry-template-template_04.masonry-cols-3 .masonry-group {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }
}

@media (min-width: 1024px) {
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group {
    align-items: stretch;
  }
}

/* Hero item (featured) */
.Canvas-query-builder-widget.masonry-template-template_04 .masonry-hero-item {
  grid-column: 1;
  grid-row: 1;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group:not(.masonry-group-inverted) .masonry-hero-item.masonry-position-1 {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group:not(.masonry-group-inverted) .masonry-hero-item.masonry-position-6 {
    grid-column: 3 / 5;
    grid-row: 2;
  }

  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-1 {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-2 {
    grid-column: 3 / 5;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-3 {
    grid-column: 3 / 5;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-4 {
    grid-column: 1 / 3;
    grid-row: 2;
  }
}

/* Small items base */
.Canvas-query-builder-widget.masonry-template-template_04 .masonry-small-item {
  grid-column: 1;
}

.Canvas-query-builder-widget.masonry-template-template_04 .masonry-small-item .entry-title {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-2 {
    grid-column: 3;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-3 {
    grid-column: 4;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-4 {
    grid-column: 1;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-5 {
    grid-column: 2;
    grid-row: 2;
  }

  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-1 {
    grid-column: 1;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-2 {
    grid-column: 2;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-5 {
    grid-column: 3;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-6 {
    grid-column: 4;
    grid-row: 2;
  }

  .Canvas-query-builder-widget.masonry-template-template_04.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-2 {
    grid-column: 3;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_04.masonry-cols-3 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-3 {
    grid-column: 3;
    grid-row: 2;
  }

  .Canvas-query-builder-widget.masonry-template-template_04.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-2 {
    grid-column: 1;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_04.masonry-cols-3 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-3 {
    grid-column: 1;
    grid-row: 2;
  }

  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-small-item.masonry-position-4 .post-content,
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-small-item.masonry-position-5 .post-content {
    padding-bottom: 0;
  }
}

/* Fix hero and small image aspect ratios on container */
.Canvas-query-builder-widget.masonry-template-template_04 .masonry-hero-item {
  height: auto;
}

/* Template 04 hero: image should not fill full height to allow external content */
.Canvas-query-builder-widget.masonry-template-template_04 .masonry-hero-item .post-thumbnail {
  height: auto;
  aspect-ratio: 16/9;
}

/* Ensure hero image fills its thumbnail container */
.Canvas-query-builder-widget.masonry-template-template_04 .masonry-hero-item .post-thumbnail img {
  height: 100%;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-hero-item .post-thumbnail {
    aspect-ratio: 127/100;
  }
}

/* Template 04 small overlay (only applies to small items when overlay enabled) */
.Canvas-query-builder-widget.masonry-template-template_04.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card .Canvas-query-builder-widget__post-card-overlay {
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_04.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card .Canvas-query-builder-widget__post-card-overlay {
    padding: 1.5rem;
  }
}

.Canvas-query-builder-widget.masonry-template-template_04.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card {
  position: relative;
}

.Canvas-query-builder-widget.masonry-template-template_04.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card .post-thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.Canvas-query-builder-widget.masonry-template-template_04.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Canvas-query-builder-widget.masonry-template-template_04 .masonry-small-item {
  height: auto;
}

.Canvas-query-builder-widget.masonry-template-template_04 .masonry-small-item .post-thumbnail {
  aspect-ratio: 16/9;
  height: auto;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-small-item .post-thumbnail {
    aspect-ratio: 127/208;
  }
}

.Canvas-query-builder-widget.masonry-template-template_04 .masonry-small-item .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Canvas-query-builder-widget.masonry-template-template_04 .masonry-small-item .post-thumbnail {
  aspect-ratio: 16/9;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_04 .masonry-small-item .post-thumbnail {
    aspect-ratio: 127/208;
  }
}

/* Carousel Layout */
.Canvas-query-builder-carousel {
  position: relative;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.Canvas-query-builder-carousel.swiper-container {
  width: 100%;
  height: auto;
  min-width: 0;
}

.Canvas-query-builder-carousel .swiper-wrapper {
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.Canvas-query-builder-carousel .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  position: relative;
  transition-property: transform;
}

/* Pagination Styles */
.Canvas-query-builder-carousel .swiper-pagination {
  position: relative;
  margin-top: 2rem;
  bottom: 0;
}

.Canvas-query-builder-carousel .swiper-pagination > .swiper-pagination-bullet {
  transition: 0.25s;
  background-color: hsl(var(--neutral-0));
  --swiper-pagination-bullet-border-radius: 9999px;
  position: relative;
  overflow: hidden;
}

.swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
  opacity: var(--swiper-pagination-bullet-inactive-opacity, .3);
}

.Canvas-query-builder-carousel .swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  --swiper-pagination-bullet-width: 1.5rem;
}

.Canvas-query-builder-carousel.swiper-autoplay .swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active {
  --swiper-pagination-bullet-width: 3.5rem;
  background-color: hsl(var(--neutral-0) / var(--swiper-pagination-bullet-inactive-opacity, .2));
}

.Canvas-query-builder-carousel.swiper-autoplay .swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background-color: hsl(var(--neutral-0));
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  backface-visibility: hidden;
  animation: homeBulletProgressFill var(--swiper-autoplay-delay, 10000ms) linear forwards;
  pointer-events: none;
}

@keyframes homeBulletProgressFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Arrows Styles */
.Canvas-query-builder-carousel .swiper-button-prev,
.Canvas-query-builder-carousel .swiper-button-next {
  color: #000;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.Canvas-query-builder-carousel .swiper-button-prev:after,
.Canvas-query-builder-carousel .swiper-button-next:after {
  font-size: 18px;
  font-weight: bold;
}

.Canvas-query-builder-widget.masonry-template-template_03 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* ensure vertical spacing between groups */
}
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-group {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}

/* Group positions mapping */
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item.masonry-position-1 { grid-column: 1; grid-row: 1; }
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-hero-item.masonry-position-2 { grid-column: 2 / 4; grid-row: 1; }
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item.masonry-position-3 { grid-column: 4; grid-row: 1; }
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item.masonry-position-4 { grid-column: 1; grid-row: 2; }
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item.masonry-position-5 { grid-column: 2; grid-row: 2; }
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item.masonry-position-6 { grid-column: 3; grid-row: 2; }
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item.masonry-position-7 { grid-column: 4; grid-row: 2; }

/* Define altura uniforme para todos os posts */
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-hero-item,
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item {
  min-height: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
}

/* Thumbnail behavior - Hero */
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-hero-item .post-thumbnail {
  height: 100%;
  aspect-ratio: 16/9;
}
@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_03 .masonry-hero-item .post-thumbnail {
    aspect-ratio: 127/100;
  }
}

/* Thumbnail behavior - Small cards padrão (sem overlay) */
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item .post-thumbnail {
  flex: 1;
  min-height: 200px;
  flex-shrink: 0;
}

.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Content area para small cards sem overlay */
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item .Canvas-query-builder-widget__post-card-content {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* Ensure first-row small cards match hero height */
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item.masonry-position-1,
.Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item.masonry-position-3 {
  align-self: stretch;
}

/* Altura específica para posts da primeira linha (laterais ao hero) */
@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_03 .masonry-hero-item,
  .Canvas-query-builder-widget.masonry-template-template_03 .masonry-small-item {
    min-height: 500px;
    height: 500px;
  }
}

/* OVERLAY STYLES - Apenas quando overlay está ativado */
.Canvas-query-builder-widget.masonry-template-template_03.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card { 
  position: relative; 
}

.Canvas-query-builder-widget.masonry-template-template_03.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card .post-thumbnail {
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  aspect-ratio: auto;
}

.Canvas-query-builder-widget.masonry-template-template_03.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card .post-thumbnail img {
  width: 100%; 
  height: 100%; 
  object-fit: cover;
}

.Canvas-query-builder-widget.masonry-template-template_03.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card .Canvas-query-builder-widget__post-card-overlay {
  padding: 1.5rem;
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Override global overlay horizontal alignment to keep content on the left */
  align-items: flex-start;
}

/* Template 03 — 2 Columns mapping (clone of Template 02 — 2 Columns) */
@media (min-width: 768px) {
  /* Override heights from 4-col variant */
  .Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-2 .masonry-hero-item,
  .Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-2 .masonry-small-item {
    min-height: auto;
    height: auto;
  }

  /* Group container becomes 2 cols x 2 rows */
  .Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-2 .masonry-group {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
  }

  /* Hero spans both columns on row 2 */
  .Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-2 .masonry-group:not(.masonry-group-inverted) .masonry-hero-item.masonry-position-1 {
    grid-column: 1 / 3;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-2 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-1 {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  /* Two smalls on row 1 */
  .Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-2 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-2 {
    grid-column: 1;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-2 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-3 {
    grid-column: 2;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-2 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-2 {
    grid-column: 1;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-2 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-3 {
    grid-column: 2;
    grid-row: 1;
  }

  /* Small cards thumbnail aspect ratio to match Template 02 */
  .Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-2 .masonry-small-item .post-thumbnail {
    min-height: auto;
    aspect-ratio: 127/200;
  }
}

/* Overlay height fix for small items in Template 03 — 2 Columns */
.Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-2.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card {
  aspect-ratio: 127/200;
}



/* List Layout */
.Canvas-query-builder-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Classic Layout */
.Canvas-query-builder-classic {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  --Canvas-classic-image-width: 50%;
}

.Canvas-query-builder-classic.Canvas-query-builder-classic--divider {
  gap: 0;
}

.Canvas-query-builder-classic .Canvas-query-builder-widget__post-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .Canvas-query-builder-classic .Canvas-query-builder-widget__post-card {
    flex-direction: row;
  }
  
  .Canvas-query-builder-classic .Canvas-query-builder-widget__post-card.md\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .Canvas-query-builder-classic .Canvas-query-builder-widget__post-card .post-thumbnail {
    width: var(--Canvas-classic-image-width) !important;
    flex: 0 0 var(--Canvas-classic-image-width) !important;
    max-width: var(--Canvas-classic-image-width) !important;
  }

  .Canvas-query-builder-classic .Canvas-query-builder-widget__post-card .post-content {
    width: calc(100% - var(--Canvas-classic-image-width)) !important;
    flex: 0 0 calc(100% - var(--Canvas-classic-image-width)) !important;
    max-width: calc(100% - var(--Canvas-classic-image-width)) !important;
  }
}

/* Post Card Base Styles */
.Canvas-query-builder-widget .Canvas-query-builder-widget__post-card {
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.Canvas-query-builder-widget .Canvas-query-builder-widget__post-card:hover {
  /* Hover effects removed */
}

/* Post Thumbnail */
.Canvas-query-builder-widget .post-thumbnail {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

.Canvas-query-builder-widget .post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-out;
}

.Canvas-query-builder-widget .post-thumbnail:hover img {
  transform: scale(1.1);
}

/* Ensure zoom on hover when the whole card is hovered (works with overlay) */
.Canvas-query-builder-widget .Canvas-query-builder-widget__post-card:hover .post-thumbnail img {
  transform: scale(1.1);
}

/* Aspect Ratios */
.Canvas-query-builder-widget .aspect-16\/9 {
  aspect-ratio: 16/9;
}

.Canvas-query-builder-widget .aspect-4\/3 {
  aspect-ratio: 4/3;
}

.Canvas-query-builder-widget .aspect-3\/2 {
  aspect-ratio: 3/2;
}

.Canvas-query-builder-widget .aspect-21\/9 {
  aspect-ratio: 21/9;
}

.Canvas-query-builder-widget .aspect-3\/4 {
  aspect-ratio: 3/4;
}

.Canvas-query-builder-widget .aspect-2\/3 {
  aspect-ratio: 2/3;
}

.Canvas-query-builder-widget .aspect-1\/1 {
  aspect-ratio: 1/1;
}

/* Original aspect ratio - no fixed ratio, uses natural image dimensions */
.Canvas-query-builder-widget .aspect-original {
  aspect-ratio: auto;
}

/* Classic Layout Widths */
.Canvas-query-builder-widget .w-full {
  width: 100%;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget .md\:w-1\/2 {
    width: 50%;
  }
}

/* Post Content */

.Canvas-query-builder-classic .post-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

.Canvas-query-builder-classic.Canvas-query-builder-classic--divider .Canvas-query-builder-widget__post-card {
  padding-bottom: 2.5rem;
}

.Canvas-query-builder-classic.Canvas-query-builder-classic--divider .Canvas-query-builder-widget__post-card + .Canvas-query-builder-widget__post-card {
  border-top: 1px solid hsl(var(--border-default, 0 0% 20% / 0.2));
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  .Canvas-query-builder-classic .post-content {
    padding: 0;
  }

  .Canvas-query-builder-classic .Canvas-query-builder-widget__post-card.classic-image-left .post-content {
    padding-right: 1.5rem;
  }

  .Canvas-query-builder-classic .Canvas-query-builder-widget__post-card.classic-image-right .post-content {
    padding-left: 1.5rem;
  }
}

/* Categories */
.Canvas-query-builder-widget .post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Entry Title */
.Canvas-query-builder-widget .entry-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0;
}

.Canvas-query-builder-classic .entry-title {
  margin: 0;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget .entry-title {
    font-size: 1.5rem;
  }
}

.Canvas-query-builder-widget .entry-title a {
  color: hsl(var(--text-primary));
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.Canvas-query-builder-widget .entry-title a:hover {
  opacity: 0.8;
}

/* Entry Meta */
.Canvas-query-builder-widget .entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  color: hsl(var(--text-secondary));
  margin-bottom: 0.75rem;
}

.Canvas-query-builder-widget .entry-meta a {
  color: hsl(var(--text-secondary));
  text-decoration: none;
  transition: color 0.2s ease;
}

.Canvas-query-builder-widget .entry-meta a:hover {
  color: hsl(var(--text-primary));
}

/* Entry Content */
.Canvas-query-builder-widget .entry-content {
  font-size: 1rem;
  color: hsl(var(--text-secondary));
}

/* Read More Button */
.Canvas-query-builder-widget .read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  background-color: hsl(var(--background-brand));
  color: hsl(var(--text-on-brand));
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.Canvas-query-builder-widget .read-more-btn:hover {
  background-color: hsl(var(--background-brand-hover));
  transform: translateX(2px);
}

.Canvas-query-builder-widget .read-more-btn svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.Canvas-query-builder-widget .read-more-btn:hover svg {
  transform: translateX(0.25rem);
}

/* Overlay Layout Styles */
.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card {
  position: relative;
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card-image {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card-image::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: hsl(var(--neutral-100) / 0.30);
  transition: background-color 0.25s ease;
  z-index: 1;
  pointer-events: none;
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card:hover .Canvas-query-builder-widget__post-card-image::after {
  background-color: hsl(var(--neutral-100) / 0.35);
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__overlay-card {
  position: relative;
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__overlay-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: hsl(var(--neutral-100) / 0.30);
  transition: background-color 0.25s ease;
  z-index: 1;
  pointer-events: none;
  border-radius: 0.75rem;
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__overlay-card:hover::after {
  background-color: hsl(var(--neutral-100) / 0.35);
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__overlay-inner {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__overlay-inner a {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card-categories {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 2rem 2rem 0 2rem;
}

/* Ensure top-left image categories stay above overlay and clickable */
.Canvas-query-builder-widget.blog-overlay-layout .post-categories {
  z-index: 10;
  pointer-events: auto;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card-categories {
    padding: 3rem 3rem 0 3rem;
  }
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card-categories a {
  background-color: hsl(var(--opacity-white-32));
  color: hsl(var(--neutral-0));
  backdrop-filter: blur(8px);
}

/* Normal cards: category button colors */
.Canvas-query-builder-widget .post-content .post-categories a {
  color: hsl(var(--text-primary));
  background-color: hsl(var(--background-secondary));
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card-categories a:hover {
  background-color: hsl(var(--opacity-white-48));
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  pointer-events: none;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card-overlay {
    padding: 1rem;
  }
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card-content {
  pointer-events: auto;
  max-width: 48rem;
}

.Canvas-query-builder-widget.blog-overlay-layout .entry-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .Canvas-query-builder-widget.blog-overlay-layout .entry-title {
    font-size: 1.875rem;
  }
}

.Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__overlay-card .entry-title a {
  color: hsl(var(--neutral-0));
}

/* Reset title color for non-overlay items in Template 02 */
.Canvas-query-builder-widget.masonry-template-template_02.blog-overlay-layout .masonry-small-item:not(.Canvas-query-builder-widget__overlay-card) .entry-title a {
  color: hsl(var(--text-primary));
}

.Canvas-query-builder-widget.blog-overlay-layout .entry-content {
  color: hsl(var(--gray-300));
  opacity: 0.9;
}

.Canvas-query-builder-widget.blog-overlay-layout .entry-footer {
  margin-top: 1rem;
}

.Canvas-query-builder-widget.blog-overlay-layout .read-more-btn {
  background-color: hsl(var(--opacity-white-32));
  color: hsl(var(--neutral-0));
  backdrop-filter: blur(8px);
}

.Canvas-query-builder-widget.blog-overlay-layout .read-more-btn:hover {
  background-color: hsl(var(--opacity-white-48));
}

/* Click Hint Arrow (decorative indicator, top-right inside thumbnail) */
.Canvas-query-builder-widget .Canvas-click-hint-arrow {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--background-inverse));
  opacity: 0;
  pointer-events: auto;
}

/* Templates 01, 02, 2, 03: align arrow to match content padding (1.5rem) */
.Canvas-query-builder-widget.masonry-template-template_01.blog-overlay-layout .Canvas-click-hint-arrow,
.Canvas-query-builder-widget.masonry-template-template_02.blog-overlay-layout .Canvas-click-hint-arrow,
.Canvas-query-builder-widget.masonry-template-template_2.blog-overlay-layout .Canvas-click-hint-arrow,
.Canvas-query-builder-widget.masonry-template-template_03.blog-overlay-layout .Canvas-click-hint-arrow {
  top: 1.5rem;
  right: 1.5rem;
}

/* Templates 01, 02 with 3 columns: align arrow to match content padding (1.5rem) */
.Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-3.blog-overlay-layout .Canvas-click-hint-arrow,
.Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-3.blog-overlay-layout .Canvas-click-hint-arrow {
  top: 1.5rem;
  right: 1.5rem;
}

/* Templates 01, 02, 03, 04 with 4 columns: align arrow to match content padding (1.5rem) */
.Canvas-query-builder-widget.masonry-template-template_01.masonry-cols-4.blog-overlay-layout .Canvas-click-hint-arrow,
.Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-4.blog-overlay-layout .Canvas-click-hint-arrow,
.Canvas-query-builder-widget.masonry-template-template_03.masonry-cols-4.blog-overlay-layout .Canvas-click-hint-arrow,
.Canvas-query-builder-widget.masonry-template-template_04.masonry-cols-4.blog-overlay-layout .Canvas-click-hint-arrow {
  top: 1.5rem;
  right: 1.5rem;
}

/* Reveal on hover/focus of the card */
.Canvas-query-builder-widget .Canvas-query-builder-widget__post-card:hover .Canvas-click-hint-arrow,
.Canvas-query-builder-widget .Canvas-query-builder-widget__post-card:focus-within .Canvas-click-hint-arrow {
  opacity: 1;
}

/* Also reveal when hovering directly over the image area */
/* (removed image hover rule to revert to working state) */

/* Responsive Adjustments */
@media (max-width: 767px) {
  
  .Canvas-query-builder-widget .entry-title {
    font-size: 1.125rem;
  }
  
  .Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card-categories {
    padding: 1.5rem 1.5rem 0 1.5rem;
  }
  
  .Canvas-query-builder-widget.blog-overlay-layout .Canvas-query-builder-widget__post-card-overlay {
    padding: 1.5rem;
  }
  
  .Canvas-query-builder-widget.blog-overlay-layout .entry-title {
    font-size: 1.25rem;
  }
}


.dark .Canvas-query-builder-widget .entry-title a {
  color: hsl(var(--text-primary));
}

.dark .Canvas-query-builder-widget .entry-meta {
  color: hsl(var(--text-secondary));
}

.dark .Canvas-query-builder-widget .entry-meta a {
  color: hsl(var(--text-secondary));
}

.dark .Canvas-query-builder-widget .entry-meta a:hover {
  color: hsl(var(--text-primary));
}

/* Animation and Performance */
.Canvas-query-builder-widget * {
  will-change: auto;
}

/* Removed hover animation effects */

/* Focus States for Accessibility */
.Canvas-query-builder-widget a:focus {
  outline: 2px solid hsl(var(--border-focus));
  outline-offset: 2px;
}

.Canvas-query-builder-widget .read-more-btn:focus {
  outline: 2px solid hsl(var(--border-focus));
  outline-offset: 2px;
}

/* Print Styles */
@media print {
  .Canvas-query-builder-widget .Canvas-query-builder-widget__post-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
  
  .Canvas-query-builder-widget .read-more-btn {
    display: none;
  }
}

/* Template 02 — 2 Columns mapping (row1: 1 post; row2: 2 posts) */
@media (min-width: 768px) {
  /* Group container becomes 2 cols x 2 rows */
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-2 .masonry-group {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
  }

  /* Hero spans both columns on row 1 */
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-2 .masonry-group:not(.masonry-group-inverted) .masonry-hero-item.masonry-position-1 {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-2 .masonry-group.masonry-group-inverted .masonry-hero-item.masonry-position-1 {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  /* Two smalls on row 2 */
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-2 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-2 {
    grid-column: 1;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-2 .masonry-group:not(.masonry-group-inverted) .masonry-small-item.masonry-position-3 {
    grid-column: 2;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-2 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-2 {
    grid-column: 1;
    grid-row: 2;
  }
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-2 .masonry-group.masonry-group-inverted .masonry-small-item.masonry-position-3 {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Overlay height fix for small items in Template 02 — 2 Columns */
.Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-2.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card {
  aspect-ratio: 16/9;
}
@media (min-width: 768px) {
  .Canvas-query-builder-widget.masonry-template-template_02.masonry-cols-2.blog-overlay-layout .masonry-small-item.Canvas-query-builder-widget__overlay-card {
    aspect-ratio: 127/200;
  }
}

.Canvas-query-builder-stack {
  position: relative;
  width: 100%;
  min-width: 0;
  --Canvas-stack-gap: 24px;
  --Canvas-stack-height: 80vh;
  --Canvas-stack-top-offset: calc(80px + 1rem);
}

.Canvas-query-builder-widget.Canvas-query-builder-stack .Canvas-query-builder-widget__post-card {
  position: sticky;
  top: var(--Canvas-stack-top-offset, calc(80px + 1rem));
  z-index: 1;
  margin-bottom: var(--Canvas-stack-gap);
  transform-origin: top center;
  will-change: transform, filter;
}

.Canvas-query-builder-widget.Canvas-query-builder-stack.blog-overlay-layout .Canvas-query-builder-widget__post-card-overlay {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.Canvas-query-builder-widget.Canvas-query-builder-stack.blog-overlay-layout .Canvas-query-builder-widget__post-card-content {
  margin-left: auto;
  margin-right: auto;
}

.Canvas-query-builder-stack .Canvas-query-builder-widget__post-card:last-child {
  margin-bottom: 0;
}

.Canvas-query-builder-stack .post-thumbnail {
  height: var(--Canvas-stack-height, 80vh);
  min-height: var(--Canvas-stack-height, 80vh);
  aspect-ratio: auto;
}

.Canvas-query-builder-widget.Canvas-query-builder-stack .post-thumbnail img {
  object-fit: cover;
  object-position: center;
}

.Canvas-query-builder-widget.Canvas-query-builder-stack .post-thumbnail:hover img,
.Canvas-query-builder-widget.Canvas-query-builder-stack .Canvas-query-builder-widget__post-card:hover .post-thumbnail img {
  transform: none;
}

@media (max-width: 767px) {
  .Canvas-query-builder-widget.Canvas-query-builder-stack.Canvas-query-builder-stack--disable-mobile .Canvas-query-builder-widget__post-card {
    position: relative;
    top: auto !important;
    transform: none !important;
    filter: none !important;
  }
}