/**
 * RML — "Registered Master Landscaper" card on a single Article (ADJ-36)
 *
 * Rendered by mcf-rml-article-member.php and appended beneath the article body.
 * Photo left, name + CTA right; stacks to a single column on mobile. The whole
 * card is clickable: the CTA is the real link and its ::after overlay stretches
 * the hit area across the card.
 *
 * Colours resolve through the RML tokens defined on :root in mcf-public.css
 * (--mcf-navy #0f3d1f dark green, --mcf-accent #48833a medium green); the
 * literal fallbacks are what render if that sheet isn't present on the article
 * template, so the card is always on-brand either way.
 */

.rml-article-member {
    margin: 44px 0 8px;
    padding-top: 32px;
    border-top: 1px solid var(--mcf-line, #e4e8f0);
}

/* The card: photo left, body right. position:relative anchors the stretched
 * CTA link. */
.rml-article-member .rml-member-card {
    position: relative;
    display: flex;
    gap: 26px;
    align-items: stretch;
    padding: 22px;
    background: var(--mcf-navy-050, #eef2ea);
    border: 1px solid #dbe4d5;
    border-radius: 4px;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.rml-article-member .rml-member-card:hover,
.rml-article-member .rml-member-card:focus-within {
    border-color: var(--mcf-accent, #48833a);
    box-shadow: 0 10px 28px rgba(15, 61, 31, .14);
    transform: translateY(-2px);
}

.rml-article-member .rml-member-card-media {
    flex: 0 0 34%;
    max-width: 220px;
}

/* Square + cover, so any upload aspect normalises to one consistent shape.
 * height:auto is REQUIRED (not redundant): WordPress prints width/height attrs
 * on the <img>, which otherwise defeat aspect-ratio and keep the native ratio. */
.rml-article-member .rml-member-card-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center center;
    border-radius: 3px;
}

.rml-article-member .rml-member-card-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Text rules are scoped through .rml-article-member (0,2,0) so they outrank the
 * parent theme's `.style-light h2` (0,1,1) heading styling. */
.rml-article-member .rml-member-card-eyebrow {
    display: block;
    margin: 0 0 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mcf-accent, #48833a);
}

.rml-article-member .rml-member-card-name {
    margin: 0 0 8px;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--mcf-navy, #0f3d1f);
}

.rml-article-member .rml-member-card-excerpt {
    margin: 0 0 16px;
    color: #4a5647;
    line-height: 1.6;
    font-size: .95rem;
}

/* CTA — styled here (not via Uncode .btn classes) so it renders identically on
 * the article template without depending on theme button CSS. */
.rml-article-member .rml-member-card-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    margin-top: auto;
    padding: 11px 20px;
    background: var(--mcf-accent, #48833a);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    text-decoration: none;
    border-radius: 3px;
    transition: background .18s ease;
}

/* Keep the label white on hover (Louise, ADJ-36).
 *
 * The extra `.rml-member-card` + `a` in these selectors is load-bearing, not
 * padding: the theme's style-custom.css ships
 * `.style-light a:not(.btn-text-skin):hover { color: #0f3d1f }` — specificity
 * (0,3,1), which outranks a plain `.rml-article-member .rml-member-card-cta:hover`
 * (0,3,0) and repaints the label dark green on hover. Scoping through the card
 * class AND the type selector takes this to (0,4,1) so white wins outright,
 * without resorting to !important.
 *
 * The arrow inherits this colour, and because the CTA's ::after covers the whole
 * card, hovering anywhere on the card triggers it — which is the intent. */
.rml-article-member .rml-member-card a.rml-member-card-cta:hover,
.rml-article-member .rml-member-card a.rml-member-card-cta:focus {
    background: var(--mcf-accent-700, #356b2a);
    color: #fff;
}

.rml-article-member .rml-member-card-arrow {
    transition: transform .18s ease;
}

.rml-article-member .rml-member-card:hover .rml-member-card-arrow {
    transform: translateX(3px);
}

/* Stretch the CTA link across the whole card so any click on the card opens the
 * profile — one semantic link, full-card hit area. */
.rml-article-member .rml-member-card-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rml-article-member .rml-member-card { cursor: pointer; }

/* Keyboard focus affordance for the stretched link. */
.rml-article-member .rml-member-card-cta:focus-visible {
    outline: 2px solid var(--mcf-navy, #0f3d1f);
    outline-offset: 3px;
}

/* Tablet: keep both columns, tighten the gutter. */
@media (max-width: 900px) {
    .rml-article-member .rml-member-card { gap: 20px; }
    .rml-article-member .rml-member-card-media { flex-basis: 30%; }
    .rml-article-member .rml-member-card-name { font-size: 1.25rem; }
}

/* Mobile: photo above the text, centred and capped so it never dominates. */
@media (max-width: 600px) {
    .rml-article-member .rml-member-card {
        display: block;
        text-align: center;
        padding: 20px;
    }
    .rml-article-member .rml-member-card-media {
        max-width: 200px;
        margin: 0 auto 16px;
    }
    .rml-article-member .rml-member-card-cta { align-self: center; }
}