/* v1.3 – Masonry grid + design controlled via FlexForm */
.mosaic-gallery{
  margin:0 auto;
  padding: var(--gap,12px);
  background: var(--bg,transparent);
}
.mosaic-grid{ margin: 0 auto; }

/* 3 / 2 / 1 columns layout with gutter = gap */
.mosaic-grid .mosaic-sizer,
.mosaic-grid .mosaic-item{
  width: calc((100% - 2*var(--gap,12px)) / 3);
  box-sizing:border-box;
}
@media (max-width:1024px){
  .mosaic-grid .mosaic-sizer,
  .mosaic-grid .mosaic-item{
    width: calc((100% - 1*var(--gap,12px)) / 2);
  }
}
@media (max-width:640px){
  .mosaic-grid .mosaic-sizer,
  .mosaic-grid .mosaic-item{
    width: 100%;
  }
}

.mosaic-item{
  margin: 0 0 var(--gap,12px) 0;
}
.mosaic-item img{
  display:block;
  width:100%;
  height:auto;
  box-sizing:border-box;
  border: var(--frame-width,0px) var(--frame-style,solid) var(--frame-color,transparent);
  border-radius: var(--radius,6px);
}

/* Shadow & background (case-insensitive attribute selectors) */
.mosaic-gallery[data-shadow="1"] .mosaic-item img{
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.mosaic-gallery[data-apply-bg="container" i],
.mosaic-gallery[data-apply-bg="both" i]{
  background: var(--bg,transparent);
}
.mosaic-gallery[data-apply-bg="tiles" i] .mosaic-item img,
.mosaic-gallery[data-apply-bg="both"  i] .mosaic-item img{
  background: var(--bg,transparent);
}

/* "Load more" button */
.mosaic-actions{
  text-align:center;
  margin: 8px 0 4px;
}
.mosaic-load-more{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:.5rem;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  cursor:pointer;
}
.mosaic-load-more:hover{
  background:#f7f7f7;
}

.is-hidden{
  display:none !important;
}

/* v1.2.1: iOS scroll anchoring fix */
.mosaic-gallery,
.mosaic-grid {
  overflow-anchor: none;
}

/* === Load more button: same frame as tiles ============================= */

.mosaic-actions {
  margin-top: 1.5rem;
  text-align: center;
}

.mosaic-actions .mosaic-load-more {
  display: inline-block;
  padding: 0.55rem 1.9rem;
  font-size: 0.94rem;
  line-height: 1.4;
  cursor: pointer;

  /* Ρ‚Π΅ ΠΆΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ, Ρ‡Ρ‚ΠΎ Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ */
  border-style: var(--frame-style, solid);
  border-color: var(--frame-color, #d9c28b);
  border-width: min(var(--frame-width, 2px), 12px);
  border-radius: var(--radius, 0);

  /* Ρ„ΠΎΠ½ ΠΈ тСкст ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ – мягкиС, Π½ΠΎ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹Π΅ */
  background-color: var(--bg, #f3f3ee);
  color: var(--frame-color, #333333);

  text-transform: none;
  letter-spacing: 0.02em;

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.mosaic-actions .mosaic-load-more:hover,
.mosaic-actions .mosaic-load-more:focus-visible {
  background-color: var(--frame-color, #d9c28b);
  color: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.mosaic-actions .mosaic-load-more:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* === Load more button (uses same frame variables as tiles) ============= */

.mosaic-actions {
  margin-top: 1.5rem;
  text-align: center;
}

.mosaic-actions .mosaic-load-more {
  display: inline-block;
  padding: 0.55rem 1.9rem;
  font-size: 0.94rem;
  line-height: 1.4;
  cursor: pointer;

  /* use the same frame parameters as tiles */
  border-style: var(--frame-style, solid);
  border-color: var(--frame-color, #d9c28b);
  border-width: min(var(--frame-width, 4px), 12px);
  border-radius: var(--radius, 0);

  /* background and text follow gallery theme */
  background: var(--bg, #f3f3ee);
  color: var(--frame-color, #333333);

  text-transform: none;
  letter-spacing: 0.02em;

  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.mosaic-actions .mosaic-load-more:hover,
.mosaic-actions .mosaic-load-more:focus-visible {
  background-color: var(--frame-color, #d9c28b);
  color: #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.mosaic-actions .mosaic-load-more:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}