/* Uses sitepackage Bootstrap variables, Heebo, News card spacing and brand colours. */
.ems {
    --ems-primary: var(--bs-primary, #17479e);
    --ems-success: var(--bs-success, #5db897);
    --ems-dark: var(--bs-dark, #1f2328);

    min-width: 0;
}

.ems-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.ems-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1rem;
    overflow-wrap: anywhere;
}

.ems-card h3 {
    color: var(--ems-dark);
}

.ems-validity {
    position: relative;
    color: var(--ems-primary);
    font-size: 0.875rem;
    font-weight: 700;
}

.ems-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ems .ems-line {
    padding: 0.4rem 0.6rem;
    background: var(--ems-success);
    color: var(--ems-dark);
    font-size: 0.7rem;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ems-widget .swiper-slide > .ems-card {
    height: 100%;
}

.ems-empty {
    max-width: 52rem;
    margin-inline: auto;
}

.ems-empty__icon {
    width: 4rem;
    height: 4rem;
    font-size: 2rem;
}

.ems :focus-visible {
    outline: 3px solid var(--ems-primary);
    outline-offset: 3px;
}

.ems-body {
    overflow-wrap: anywhere;
}

.ems-detail h1 {
    overflow-wrap: anywhere;
}

@media (max-width: 1199.98px) {
    .ems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .ems-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Link to the other list next to the result count: flush with the count text when it wraps below. */
.ems .ems-count .ems-switch {
    padding-left: 0;
}

.ems .ems-count .ems-switch.btn-back {
    padding-left: 15px;
}

.ems .ems-count .ems-switch.btn-back::before {
    left: 0;
}

.ems .ems-count .ems-switch.btn-back:hover::before {
    left: -5px;
}