.cev-mosaic { --cev-primary: #184341; --cev-ink-soft: #3f4257; --cev-gap: 12px; --cev-cols: 4;
  container-type: inline-size; }

/* Row height = one 4:3 column, so spans (2x2 big, 2x1 wide) always line up exactly. */
.cev-mo-grid { display: grid; grid-template-columns: repeat(var(--cev-cols), minmax(0, 1fr));
  grid-auto-rows: calc((100cqw - (var(--cev-cols) - 1) * var(--cev-gap)) / var(--cev-cols) * .75);
  grid-auto-flow: row dense; gap: var(--cev-gap); }

.cev-mo-tile { position: relative; display: block; overflow: hidden; border-radius: 12px;
  background: linear-gradient(135deg, #1c5049, #2f6f66); outline-offset: 3px; }
.cev-mo-tile[hidden] { display: none; }
.cev-mo-tile.is-big { grid-column: span 2; grid-row: span 2; }
.cev-mo-tile.is-big.is-mirror { grid-column: 3 / span 2; }
.cev-mo-tile.is-wide { grid-column: span 2; }

.cev-mo-tile img, .cev-mo-tile .cev-mo-img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.cev-mo-tile::after { content: ""; position: absolute; inset: 0; background: rgba(24, 67, 65, 0);
  transition: background .3s ease; pointer-events: none; }
.cev-mo-tile:hover img, .cev-mo-tile:focus-visible img { transform: scale(1.04); }
.cev-mo-tile:hover::after, .cev-mo-tile:focus-visible::after { background: rgba(24, 67, 65, .18); }
.cev-mo-tile:focus-visible { outline: 3px solid var(--cev-primary); }

.cev-mo-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 28px; }
.cev-mo-status { margin: 0; color: var(--cev-ink-soft); font-size: 15px; }
.cev-mo-more { appearance: none; border: 0; cursor: pointer; background: var(--cev-primary); color: #fff;
  font: inherit; font-weight: 600; font-size: 16px; padding: 14px 30px; border-radius: 999px;
  transition: background .2s ease, transform .2s ease; }
.cev-mo-more:hover { background: #1c5049; transform: translateY(-1px); }
.cev-mo-more:focus-visible { outline: 3px solid var(--cev-primary); outline-offset: 3px; }
.cev-mo-more[hidden] { display: none; }

@media (max-width: 1024px) {
  .cev-mosaic { --cev-cols: 3; }
  .cev-mo-tile.is-big.is-mirror { grid-column: 2 / span 2; }
  .cev-mo-tile.is-wide { grid-column: span 1; }
}
@media (max-width: 767px) {
  .cev-mosaic { --cev-cols: 2; --cev-gap: 8px; }
  .cev-mo-tile { border-radius: 10px; }
  .cev-mo-tile.is-big, .cev-mo-tile.is-big.is-mirror { grid-column: 1 / -1; }
  .cev-mo-tile.is-wide { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .cev-mo-tile img, .cev-mo-more { transition: none; }
  .cev-mo-tile:hover img, .cev-mo-tile:focus-visible img { transform: none; }
}