/* =============================================================================
   Astrolabe — Widget : Univers Listing (jxc-ul-*)
   Styles partagés (bannière, spinner, vide) → jxc-shared.css
   ============================================================================= */

/* ── Bannière — override spécifique ─────────────────────────────────────────── */

.jxc-ul-banner::before {
background-color: var(--jxc-ul-overlay, #936EE4);
opacity: 0.80;
}

.jxc-ul-banner__subtitle {
margin: 0;
font-family: var(--jxc-font);
font-size: 18px;
font-weight: 400;
color: #ffffff;
max-width: 700px;
line-height: 1.5;
}

/* ── Section grille ──────────────────────────────────────────────────────────── */

.jxc-ul-grid-section { padding: 40px 0 60px; }

.jxc-ul-grid {
display: grid;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
}

.jxc-ul-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.jxc-ul-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.jxc-ul-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Carte univers ───────────────────────────────────────────────────────────── */

.jxc-univers-card {
position: relative;
overflow: hidden;
border-radius: 6px;
}

.jxc-univers-card__link {
display: block;
text-decoration: none;
}

.jxc-univers-card__thumb-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--jxc-bg-dark);
}

.jxc-univers-card__thumb {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}

.jxc-univers-card__link:hover .jxc-univers-card__thumb {
transform: scale(1.04);
}

.jxc-univers-card__overlay {
position: absolute;
inset: 0;
background: rgba(33, 33, 33, 0.55);
display: flex;
align-items: flex-end;
padding: 20px 18px;
transition: background 0.25s ease;
}

.jxc-univers-card__link:hover .jxc-univers-card__overlay {
background: rgba(33, 33, 33, 0.72);
}

.jxc-univers-card__name {
font-family: var(--jxc-font);
font-size: 22px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #ffffff;
line-height: 1.2;
}

/* ── Loader spécifique (sentinel dans shared) ────────────────────────────────── */

.jxc-ul-loader {
text-align: center;
padding: 20px 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
.jxc-ul-grid--cols-4 {
grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 767px) {
.jxc-ul-banner__subtitle { font-size: 15px; }

.jxc-ul-grid--cols-2,
.jxc-ul-grid--cols-3,
.jxc-ul-grid--cols-4 {
grid-template-columns: repeat(2, 1fr);
}
}