/* =====================================================
   Maeve Resources — Front-end v1.2.2
   Horizontal card list layout matching reference design.
   Uses active theme CSS variables automatically.
===================================================== */

:root {
    --mr-blue:       var(--fg-blue,      #003F87);
    --mr-blue-dark:  var(--fg-blue-dark, #002d63);
    --mr-orange:     var(--fg-orange,    #E8611A);
    --mr-white:      var(--fg-white,     #ffffff);
    --mr-light:      var(--fg-light,     #f5f7fa);
    --mr-dark:       var(--fg-dark,      #1a1a2e);
    --mr-grey:       var(--fg-grey,      #6b7280);
    --mr-border:     var(--fg-border,    #e2e8f0);
    --mr-radius:     var(--radius-md,    12px);
    --mr-shadow:     var(--shadow-sm,    0 1px 3px rgba(0,0,0,.08));
    --mr-shadow-md:  var(--shadow-md,    0 4px 16px rgba(0,0,0,.10));
    --mr-transition: var(--transition,   0.25s ease);
    --mr-font:       var(--font-body,    'Source Sans 3','Helvetica Neue',Arial,sans-serif);
    --mr-font-sm:    var(--font-size-sm, 14px);
}

/* Page wrapper */
.mr-page-wrap {
    margin: 0;
    padding: 0;
}

/* Card list */
.mr-list {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Individual card */
.mr-card {
    display: flex;
    align-items: stretch;
    background: var(--mr-white);
    border-radius: var(--mr-radius);
    box-shadow: var(--mr-shadow);
    border: 1px solid var(--mr-border);
    overflow: hidden;
    transition: box-shadow var(--mr-transition), transform var(--mr-transition);
}
.mr-card:hover {
    box-shadow: var(--mr-shadow-md);
    transform: translateY(-2px);
}

/* Image — left column, flush, fills card height */
.mr-card__img {
    flex: 0 0 180px;
    width: 180px;
    overflow: hidden;
}
.mr-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Body — title + description */
.mr-card__body {
    flex: 1 1 auto;
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mr-card__title {
    font-family: var(--mr-font);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mr-blue);
    margin: 0 0 .6rem;
    line-height: 1.3;
}
.mr-card__desc {
    font-size: var(--mr-font-sm);
    color: var(--mr-dark);
    line-height: 1.6;
    margin: 0 0 .6rem;
}
.mr-card__more {
    font-size: var(--mr-font-sm);
    color: var(--mr-grey);
    margin: 0;
}

/* Action — button, right column */
.mr-card__action {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 1.5rem 1.75rem 1.5rem 1rem;
}
.mr-card__btn {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: .65rem 1.4rem;
    background: var(--mr-blue);
    color: var(--mr-white);
    border-radius: 24px;
    font-family: var(--mr-font);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-decoration: none;
    transition: background var(--mr-transition);
}
.mr-card__btn:hover {
    background: var(--mr-orange);
    color: var(--mr-white);
    text-decoration: none;
}

/* Empty */
.mr-empty {
    text-align: center;
    padding: 2rem;
    color: var(--mr-grey);
    font-style: italic;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 680px) {
    .mr-card { flex-direction: column; }
    .mr-card__img { flex: 0 0 200px; width: 100%; height: 200px; }
    .mr-card__action { padding: 0 1.25rem 1.25rem; justify-content: flex-end; }
    .mr-page-title h1 { font-size: 1.5rem; }
}