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

.mosaic-gallery.is-layout-pending .mosaic-grid,
.mosaic-gallery.is-layout-pending .mosaic-actions{
  visibility:hidden;
  animation:mosaic-layout-fail-open 0s linear 10s forwards;
}

@keyframes mosaic-layout-fail-open{
  to{ visibility:visible; }
}

/* Masonry and Mosaic use the established 3 / 2 / 1 base columns. */
.mosaic-gallery:is([data-layout-mode="masonry"],[data-layout-mode="mosaic"]) .mosaic-grid .mosaic-sizer,
.mosaic-gallery:is([data-layout-mode="masonry"],[data-layout-mode="mosaic"]) .mosaic-grid .mosaic-item{
  width: calc((100% - 2*var(--gap,12px)) / 3);
  box-sizing:border-box;
}

.mosaic-gallery[data-layout-mode="mosaic"] .mosaic-grid .mosaic-item[data-layout-span="wide"]{
  width: calc((200% - var(--gap,12px)) / 3);
}

@media (max-width:1024px){
  .mosaic-gallery:is([data-layout-mode="masonry"],[data-layout-mode="mosaic"]) .mosaic-grid .mosaic-sizer,
  .mosaic-gallery:is([data-layout-mode="masonry"],[data-layout-mode="mosaic"]) .mosaic-grid .mosaic-item{
    width: calc((100% - 1*var(--gap,12px)) / 2);
  }

  .mosaic-gallery[data-layout-mode="mosaic"] .mosaic-grid .mosaic-item[data-layout-span="wide"]{
    width:100%;
  }
}
@media (max-width:640px){
  .mosaic-gallery:is([data-layout-mode="masonry"],[data-layout-mode="mosaic"]) .mosaic-grid .mosaic-sizer,
  .mosaic-gallery:is([data-layout-mode="masonry"],[data-layout-mode="mosaic"]) .mosaic-grid .mosaic-item{
    width: 100%;
  }
}

/* Justified rows preserve image ratios; JavaScript assigns row widths from FAL dimensions. */
.mosaic-gallery[data-layout-mode="justified"] .mosaic-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap,12px);
}
.mosaic-gallery[data-layout-mode="justified"] .mosaic-sizer{
  display:none;
}
.mosaic-gallery[data-layout-mode="justified"] .mosaic-item{
  flex:0 0 auto;
  margin:0;
  max-width:100%;
}

/* Patterned Mosaic uses a fine-grained dense grid; JavaScript derives spans from intrinsic ratios. */
.mosaic-gallery[data-layout-mode="patterned"]{
  container-name:mosaic-patterned;
  container-type:inline-size;
}
.mosaic-gallery[data-layout-mode="patterned"] .mosaic-grid{
  display:grid;
  gap:var(--gap,12px);
  grid-auto-flow:dense;
  grid-auto-rows:4px;
  grid-template-columns:repeat(24,minmax(0,1fr));
}
.mosaic-gallery[data-layout-mode="patterned"] .mosaic-sizer{
  display:none;
}
.mosaic-gallery[data-layout-mode="patterned"] .mosaic-item{
  margin:0;
  min-width:0;
  overflow-wrap:anywhere;
  width:auto;
}
.mosaic-gallery[data-layout-mode="patterned"] .mosaic-item > a img{
  display:block;
  height:auto;
  width:100%;
}
.mosaic-gallery[data-layout-mode="patterned"][data-shadow="1"] .mosaic-item > a{
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.mosaic-gallery[data-layout-mode="patterned"][data-shadow="1"] .mosaic-item > a img{
  box-shadow:none;
}
.mosaic-gallery[data-layout-mode="patterned"][data-apply-bg="tiles" i] .mosaic-item > a,
.mosaic-gallery[data-layout-mode="patterned"][data-apply-bg="both" i] .mosaic-item > a{
  background:var(--bg,transparent);
}

@container mosaic-patterned (max-width:1200px){
  .mosaic-gallery[data-layout-mode="patterned"] .mosaic-grid{
    grid-template-columns:repeat(16,minmax(0,1fr));
  }
}

@container mosaic-patterned (max-width:900px){
  .mosaic-gallery[data-layout-mode="patterned"] .mosaic-grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
  }
}

@container mosaic-patterned (max-width:600px){
  .mosaic-gallery[data-layout-mode="patterned"] .mosaic-grid{
    grid-template-columns:repeat(8,minmax(0,1fr));
  }
}

@container mosaic-patterned (max-width:420px){
  .mosaic-gallery[data-layout-mode="patterned"] .mosaic-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

/* Uniform Grid is presentation-only cropping; Lightbox links still target original files. */
.mosaic-gallery[data-layout-mode="grid"] .mosaic-grid{
  display:grid;
  gap:var(--gap,12px);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.mosaic-gallery[data-layout-mode="grid"] .mosaic-sizer{
  display:none;
}
.mosaic-gallery[data-layout-mode="grid"] .mosaic-item{
  margin:0;
  min-width:0;
  width:auto;
}
.mosaic-gallery[data-layout-mode="grid"] .mosaic-item > a{
  aspect-ratio:1 / 1;
  overflow:hidden;
}
.mosaic-gallery[data-layout-mode="grid"] .mosaic-item > a img{
  height:100%;
  object-fit:cover;
  width:100%;
}
.mosaic-gallery[data-layout-mode="grid"][data-shadow="1"] .mosaic-item > a{
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.mosaic-gallery[data-layout-mode="grid"][data-shadow="1"] .mosaic-item > a img{
  box-shadow:none;
}
.mosaic-gallery[data-layout-mode="grid"][data-apply-bg="tiles" i] .mosaic-item > a,
.mosaic-gallery[data-layout-mode="grid"][data-apply-bg="both" i] .mosaic-item > a{
  background:var(--bg,transparent);
}
@media (max-width:1024px){
  .mosaic-gallery[data-layout-mode="grid"] .mosaic-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  .mosaic-gallery[data-layout-mode="grid"] .mosaic-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

.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) solid var(--frame-color,transparent);
  border-radius: var(--radius,6px);
}
.mosaic-item figcaption{
  text-align: var(--caption-align,left);
}

/* 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;
}

/* Prevent iOS scroll anchoring from shifting the gallery. */
.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;

  /* Use the same frame settings as the images. */
  border-style: solid;
  border-color: var(--frame-color, #d9c28b);
  border-width: var(--frame-width, 2px);
  border-radius: var(--radius, 0);

  /* Use soft but readable default background and text colors. */
  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);
}

/* Semantic frame engine. Composite identifiers never reach border-style. */
.mosaic-item > a {
  border: 0 solid var(--frame-color, transparent);
  border-radius: var(--radius, 0);
  box-sizing: border-box;
  display: block;
  position: relative;
}

.mosaic-item > a img {
  border: 0;
  border-radius: inherit;
}

.mosaic-gallery[data-frame-style="solid"] .mosaic-item > a,
.mosaic-gallery[data-frame-style="dashed"] .mosaic-item > a,
.mosaic-gallery[data-frame-style="dotted"] .mosaic-item > a {
  border-color: var(--frame-color, transparent);
  border-style: solid;
  border-width: var(--frame-width, 0px);
}

.mosaic-gallery[data-frame-style="dashed"] .mosaic-item > a { border-style: dashed; }
.mosaic-gallery[data-frame-style="dotted"] .mosaic-item > a { border-style: dotted; }

.mosaic-gallery[data-frame-style="double"] .mosaic-item > a,
.mosaic-gallery[data-frame-style="groove"] .mosaic-item > a,
.mosaic-gallery[data-frame-style="ridge"] .mosaic-item > a,
.mosaic-gallery[data-frame-style="triple"] .mosaic-item > a,
.mosaic-gallery[data-frame-style="doubleOuterStrong"] .mosaic-item > a,
.mosaic-gallery[data-frame-style="doubleInnerStrong"] .mosaic-item > a,
.mosaic-gallery[data-frame-style="gallery"] .mosaic-item > a {
  border-color: var(--frame-color, transparent);
  border-style: solid;
  border-width: 0;
}

.mosaic-gallery[data-frame-style="double"] .mosaic-item > a::after,
.mosaic-gallery[data-frame-style="groove"] .mosaic-item > a::after,
.mosaic-gallery[data-frame-style="ridge"] .mosaic-item > a::after,
.mosaic-gallery[data-frame-style="triple"] .mosaic-item > a::after,
.mosaic-gallery[data-frame-style="doubleOuterStrong"] .mosaic-item > a::after,
.mosaic-gallery[data-frame-style="doubleInnerStrong"] .mosaic-item > a::after,
.mosaic-gallery[data-frame-style="gallery"] .mosaic-item > a::after {
  border-radius: inherit;
  box-sizing: border-box;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.mosaic-gallery[data-frame-style="double"] .mosaic-item > a::after {
  box-shadow: inset 0 0 0 var(--frame-band-forty-five, 0px) var(--frame-accent, var(--frame-color, transparent)),
    inset 0 0 0 var(--frame-band-total, 0px) var(--frame-color, transparent);
}

.mosaic-gallery[data-frame-style="groove"] .mosaic-item > a::after {
  box-shadow: inset 0 0 0 var(--frame-band-key, 0px) color-mix(in srgb, var(--frame-color) 75%, #000),
    inset 0 0 0 var(--frame-band-sixty, 0px) var(--frame-accent, var(--frame-color, transparent)),
    inset 0 0 0 var(--frame-band-total, 0px) var(--frame-color, transparent);
}

.mosaic-gallery[data-frame-style="ridge"] .mosaic-item > a::after {
  box-shadow: inset 0 0 0 var(--frame-band-key, 0px) color-mix(in srgb, var(--frame-accent, var(--frame-color)) 65%, #fff),
    inset 0 0 0 var(--frame-band-sixty, 0px) var(--frame-color, transparent),
    inset 0 0 0 var(--frame-band-total, 0px) var(--frame-accent, var(--frame-color, transparent));
}

.mosaic-gallery[data-frame-style="triple"] .mosaic-item > a::after {
  box-shadow: inset 0 0 0 var(--frame-band-third, 0px) var(--frame-color, transparent),
    inset 0 0 0 var(--frame-band-two-thirds, 0px) var(--frame-accent, var(--frame-color, transparent)),
    inset 0 0 0 var(--frame-band-total, 0px) var(--frame-color, transparent);
}

.mosaic-gallery[data-frame-style="doubleOuterStrong"] .mosaic-item > a::after {
  box-shadow: inset 0 0 0 var(--frame-band-three-quarters, 0px) var(--frame-color, transparent),
    inset 0 0 0 var(--frame-band-total, 0px) var(--frame-accent, var(--frame-color, transparent));
}

.mosaic-gallery[data-frame-style="doubleInnerStrong"] .mosaic-item > a::after {
  box-shadow: inset 0 0 0 var(--frame-band-quarter, 0px) var(--frame-accent, var(--frame-color, transparent)),
    inset 0 0 0 var(--frame-band-total, 0px) var(--frame-color, transparent);
}

.mosaic-gallery[data-frame-style="gallery"] .mosaic-item > a::after {
  box-shadow: inset 0 0 0 var(--frame-band-key, 0px) color-mix(in srgb, var(--frame-color) 35%, var(--frame-accent, #fff)),
    inset 0 0 0 var(--frame-band-forty, 0px) var(--frame-accent, var(--frame-color, transparent)),
    inset 0 0 0 var(--frame-band-total, 0px) var(--frame-color, transparent);
}

.mosaic-item figcaption {
  color: var(--caption-color, inherit);
}

/* === 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: solid;
  border-color: var(--frame-color, #d9c28b);
  border-width: var(--frame-width, 4px);
  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);
}

/* Final semantic button interpretation keeps composite styles valid and text readable. */
.mosaic-gallery .mosaic-load-more { color: var(--caption-color, var(--frame-color, #333)); }
.mosaic-gallery[data-load-more-frame="0"] .mosaic-load-more { border-style: solid; border-width: 1px; }
.mosaic-gallery[data-load-more-frame="1"][data-frame-style="dashed"] .mosaic-load-more { border-style: dashed; }
.mosaic-gallery[data-load-more-frame="1"][data-frame-style="dotted"] .mosaic-load-more { border-style: dotted; }
.mosaic-gallery[data-load-more-frame="1"]:is(
  [data-frame-style="double"],
  [data-frame-style="groove"],
  [data-frame-style="ridge"],
  [data-frame-style="triple"],
  [data-frame-style="doubleOuterStrong"],
  [data-frame-style="doubleInnerStrong"],
  [data-frame-style="gallery"]
) .mosaic-load-more { border-color: var(--frame-color); border-style: solid; border-width: 1px; }