@import url('./colors.css');

:root{
  --w-muted:#a89386;
}

/* Masonry using CSS columns (no extra JS) */
.masonry{
  column-gap: 1rem;
  /* default: 1 column on very small screens */
  columns: 1;
}
@media (min-width: 576px){ .masonry{ columns: 2; } }
@media (min-width: 992px){ .masonry{ columns: 3; } }
@media (min-width: 1400px){ .masonry{ columns: 4; } }

/* Make tiles play nice with column flow */
.masonry > *{ break-inside: avoid; }

/* Optional: soften carousel corners on all images */
.object-fit-cover{ object-fit: cover; }

/* Nice heading color */
h1.display-6{ color: var(--w-muted); }

/* Dot indicators (scoped to .indicators-dots so we don't affect other carousels) */
.indicators-dots [data-bs-target]{
  width: .6rem;          /* dot size */
  height: .6rem;
  border-radius: 50%;    /* make them circles */
  background-color: rgba(255,255,255,.6);
  border: 0;             /* remove default border */
  margin: 0 .25rem;      /* spacing between dots */
  opacity: 1;            /* ignore Bootstrap's opacity change */
}

.indicators-dots .active{
  background-color: #fff;                 /* active dot filled */
  box-shadow: 0 0 0 2px rgba(0,0,0,.15);  /* subtle ring for contrast */
}

/* Optional: tint dots with your palette */
:root{ --w-muted:#a89386; }
.indicators-dots [data-bs-target]{ background-color: color-mix(in srgb, #fff 70%, var(--w-muted) 30%); }
.indicators-dots .active{ background-color: var(--w-muted); }

/* (rest of your CSS can stay as-is) */
.masonry{ column-gap:1rem; columns:1; }
@media (min-width:576px){ .masonry{ columns:2; } }
@media (min-width:992px){ .masonry{ columns:3; } }
@media (min-width:1400px){ .masonry{ columns:4; } }
.masonry > *{ break-inside: avoid; }
.object-fit-cover{ object-fit: cover; }
h1.display-6{ color: var(--w-muted); }