/* ==========================================================================
   Styles for the elements the CMS added to the original design:
   form feedback messages, blog pagination and team profile cards.
   Loaded after lumicore.css, so it follows the same brand variables.
   ========================================================================== */

/* --- Form feedback -------------------------------------------------------- */

.lumicore-form-note {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.lumicore-form-note.success {
    color: #17794a;
}

.lumicore-form-note.error {
    color: #c62828;
}

.lumicore-field-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #c62828;
}

.lumicore-alert {
    padding: 14px 18px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.55;
}

.lumicore-alert.success {
    background: #e8f7ee;
    border: 1px solid #b8e4c9;
    color: #17794a;
}

/* --- Blog pagination ------------------------------------------------------ */

.lumicore-pagination-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.lumicore-pagination-list li a,
.lumicore-pagination-list li span {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #e5e7ee;
    border-radius: 8px;
    color: var(--color-heading-1, #1f1f25);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
}

.lumicore-pagination-list li a:hover {
    border-color: var(--color-primary, #2c5cff);
    color: var(--color-primary, #2c5cff);
}

.lumicore-pagination-list li.active span {
    background: var(--color-primary, #2c5cff);
    border-color: var(--color-primary, #2c5cff);
    color: #fff;
}

.lumicore-pagination-list li.disabled span {
    opacity: .4;
}

/* --- Team profiles -------------------------------------------------------- */

.lumicore-team-card {
    background: #fff;
    border: 1px solid #eceef4;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    transition: border-color .25s, transform .25s;
}

.lumicore-team-card:hover {
    border-color: var(--color-primary, #2c5cff);
    transform: translateY(-4px);
}

/* Portraits arrive taller than they are wide, so a 4:3 box filled by `cover`
   crops the top off every head. Same treatment as the homepage rail in
   assets/css/lumicore.css: a portrait box, the photo contained inside it so
   nothing is cut away, and the subject stood on the bottom edge so the row
   shares a floor rather than each photo floating at its own height. */
.lumicore-team-card .thumbnail {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f4f6fb;
}

.lumicore-team-card .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

/* The home rail's thumbnail is styled in assets/css/lumicore.css, beside the
   rest of .team-swiper-area. It used to be described here too, from a
   .mySwiper-team-lumicore selector of equal specificity — and because this
   file loads second, its `object-fit: cover` quietly beat the other file's
   `contain` and went on cropping heads. One owner per element instead. */

.lumicore-team-card .content {
    padding: 20px;
}

/* A name that wraps to two lines would otherwise push its position a line
   below the one-line neighbours'. Hold two lines on every card. */
.lumicore-team-card .content .title {
    margin: 0 0 4px;
    font-size: 18px;
    line-height: 1.35;
    min-height: 2.7em;
}

.lumicore-team-card .content .disc {
    margin: 0;
    font-size: 14px;
    color: var(--color-body, #5d666f);
}