/* FEC Masonry Grid — Magic Nation UI (clean + overlay options) */
.fec-masonry-grid { margin: 0 auto; }

.fec-masonry-grid .fec-grid-sizer,
.fec-masonry-grid .fec-gutter-sizer {
  width: calc((100% - (var(--fec-cols) - 1) * var(--fec-gap)) / var(--fec-cols));
}
.fec-masonry-grid .fec-gutter-sizer { width: var(--fec-gap); }

.fec-card {
  width: calc((100% - (var(--fec-cols) - 1) * var(--fec-gap)) / var(--fec-cols));
  margin-bottom: var(--fec-gap);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  color: #0b1220;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
  border: 1px solid rgba(2,6,23,.06);
  transform: translateZ(0);
  transition: box-shadow .25s ease, transform .25s ease;
}
.fec-card:hover { box-shadow: 0 8px 28px rgba(15, 23, 42, .10); transform: translateY(-2px); }

.fec-card a { text-decoration: none; color: inherit; }

.fec-card-media { position: relative; display: block; overflow: hidden; background: #eef2ff; }
.fec-card-phantom { display: block; width: 100%; padding-top: var(--fec-ratio, 66.667%); }
.fec-card-image { position: absolute; inset: 0; }
.fec-card-image img, .fec-card-noimg {
  width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease;
}
.fec-card:hover .fec-card-image img { transform: scale(1.03); }

/* Overlay style */
.fec-style-overlay .fec-card-body { display: none; }
.fec-card-overlay {
  position: absolute; inset: 0; display: grid; align-content: end; padding: 14px 16px;
  background: linear-gradient(to top, rgba(2,6,23,.55) 0%, rgba(2,6,23,0) 60%);
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.fec-style-overlay .fec-card-media:hover .fec-card-overlay { opacity: 1; transform: translateY(0); }
.fec-card-overlay-title { font-weight: 800; font-size: clamp(16px, 2vw, 18px); letter-spacing: .2px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35); }

/* Clean style */
.fec-style-clean .fec-card-overlay { display: none; }
.fec-card-body { padding: 14px 20px 14px; }
.fec-card-cats { font-size: 16px; color: #3268E7; margin-bottom: 5px; font-weight: 600; }
.fec-card-title { font-size: 18px; line-height: 1.25; margin: 0 0 6px 0; font-weight: 700; }
.fec-card-meta { font-size: 14px; color: #6b7280; margin-bottom: 8px; }
.fec-card-excerpt { font-size: 14px; color: #374151; margin: 0; }

/* Actions */
.fec-masonry-actions { display: grid; place-items: center; margin-top: 12px; }
.fec-masonry-load-more { appearance: none; border: 1px solid rgba(2,6,23,.08); padding: 10px 16px; border-radius: 999px; background: #fff; color: #0b1220; font-weight: 700; cursor: pointer; transition: box-shadow .2s ease, transform .2s ease; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.fec-masonry-load-more:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(15,23,42,.1); }
.fec-masonry-spinner { width: 22px; height: 22px; border: 2px solid #94a3b8; border-top-color: transparent; border-radius: 50%; margin-top: 10px; display: none; animation: fecspin .9s linear infinite; }
.fec-masonry-actions.loading .fec-masonry-spinner { display: inline-block; }
@keyframes fecspin { to { transform: rotate(360deg); } }

/* Fade-in animation setup — SCOPED */
.fec-masonry-grid-wrap.fec-has-animation .fec-card {
  opacity: 0;
  --animate-duration: .6s;
}

.fec-masonry-grid-wrap.fec-has-animation .fec-card.animate__animated {
  opacity: 1;
}

/* Responsive columns */
@media (max-width: 1280px) { .fec-masonry-grid-wrap { --fec-cols: 4; } }
@media (max-width: 980px)  { .fec-masonry-grid-wrap { --fec-cols: 3; } }
@media (max-width: 760px)  { .fec-masonry-grid-wrap { --fec-cols: 2; } }
@media (max-width: 520px)  { .fec-masonry-grid-wrap { --fec-cols: 1; } }