/**
 * MCF — Designer cards: clamped bio + "Read more"
 *
 * Pairs with mcf-public/includes/mcf-designer-bio.php (which wraps the bio of
 * every native designer card) and assets/js/mcf-designer-bio.js (which reveals
 * the button only where the bio overflows, and toggles it).
 *
 *   one long bio stretches its card    →    every card clamps to the same
 *   to 2x its neighbour's height            depth, opened by "Read more"
 *
 * Knob: --mcf-designer-clamp (lines shown before "Read more"). The default sits
 * the clamped text at about the height of the 4:5 photo beside it in the
 * 2-up kitchen carousel, so a row of cards lines up with its pictures.
 *
 * Mirrors the Services cards (ADJ-54, mcf-services.css) on purpose — the same
 * control should look and behave the same everywhere on a profile.
 */

/* -webkit-line-clamp is the only clamp that ellipsises, and the ellipsis is
   what signals there IS more to read. It counts line boxes across the
   paragraphs inside, so the bio's own paragraph spacing is left untouched —
   the text doesn't shift when it opens. */
.mcf-designer-bio.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: var(--mcf-designer-clamp, 8);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mcf-designer-more {
    /* Inline-block inside .mcf-designer-more-wrap (see mcf-designer-bio.php for
       why the wrapper exists), so the hit area is the label and it lines up
       with the bio's own text alignment. */
    display: inline-block;
    margin: 0;
    padding: 12px 0 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .9em;
    font-weight: 700;
    line-height: 1.4;
    /* Brand accent teal (Uncode color-123737) — the "DESIGN TEAM" eyebrow's
       colour, so the control reads as part of the section. */
    color: var(--mcf-designer-accent, #008ca7);
    cursor: pointer;
}
.mcf-designer-more:hover { text-decoration: underline; }
.mcf-designer-more:focus-visible {
    outline: 2px solid var(--mcf-designer-accent, #008ca7);
    outline-offset: 3px;
}
/* [hidden] loses to the display above on its own. */
.mcf-designer-more[hidden] { display: none; }