/* OIC Components Library — Mosaic Grid 01 (imported from Post-Sliders-1-1.html)
   Tokens-first: uses --oic-color-primary and global tokens. */

.oic-mosaic-grid{
  --_primary: var(--oic-color-primary, #006b4d);
  --_radius: var(--oic-slider-radius, var(--oic-radius-md, 12px));
  --_shadow: var(--oic-slider-shadow, 0 4px 15px rgba(0,0,0,0.10));

  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  grid-template-rows: 220px 220px;
  gap: 15px;
}

.oic-mosaic-item{
  position: relative;
  border-radius: var(--_radius);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  display: block;
  box-shadow: var(--_shadow);
}

.oic-mosaic-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oic-mosaic-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.45) 40%,
    transparent 70%
  );
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 20px;
}

.oic-mosaic-text{ display:flex; flex-direction:column; gap: 4px; }

.oic-mosaic-cat{
  background: var(--_primary);
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 4px;
  width: fit-content;
  font-weight: 800;
}

.oic-mosaic-date{
  font-size: 12px;
  opacity: .9;
}

.oic-mosaic-title{
  font-weight: 800;
  line-height: 1.3;
  margin: 0;
  font-size: 15px;
}

.oic-mosaic-title.big{ font-size: 26px; }

.oic-mosaic-desc{
  font-size: 14px;
  opacity: 0.85;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-big{ grid-area: 1 / 3 / 3 / 4; }
.item-wide{ grid-column: span 2; }

@media (max-width: 900px){
  .oic-mosaic-grid{ grid-template-columns: 1fr; grid-template-rows: auto; }
  .item-big{ grid-area: auto; height: 350px; }
  .item-small{ height: 250px; }
  .item-wide{ grid-column: auto; height: 250px; }
  .oic-mosaic-title.big{ font-size: 20px; }
}