/*
  Reunion stories wall — the [found_pets_feedback] shortcode (/testimonials).

  Replaces the petsitter-era .testimonial component (date top-left, "Status:"
  top-right, a fat orange/green slab under every quote, avatar hanging off the
  card). Direction C instead: a two-column wall of white quote cards on paper,
  each signed by the owner and the pet, closed by a single "and N more" panel.

  Scoped to .mlpa-stories with an explicit 16px base + em, so the petsitter
  parity 62.5% root can't rescale it.
*/

.mlpa-stories{
    --s-ink:#2a2b1f; --s-muted:#726d5f; --s-line:#e2ddca;
    --s-teal:#3f8a80; --s-teal-deep:#2f6f66;
    --s-green:#7ab02f; --s-green-deep:#5f8f22; --s-green-soft:#eaf3d9;
    --s-orange:#e89145; --s-orange-deep:#cc7a2b;
    --s-f-disp:"Darker Grotesque", system-ui, sans-serif;
    --s-f-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size:16px; font-family:var(--s-f-body); line-height:1.5; color:var(--s-ink);
    max-width:1040px; margin-inline:auto;
}
.mlpa-stories *{ box-sizing:border-box; }

/* ---- Page heading above the wall (from the page's [title] shortcode) ------ */
body.page-id-15361 .title-bordered{ margin-bottom:1.6em; }
body.page-id-15361 .title-bordered h2{
    font-family:"Darker Grotesque", system-ui, sans-serif; font-weight:900;
    font-size:44px; line-height:1; letter-spacing:-.01em; color:#2a2b1f;
    padding-bottom:0; text-transform:none;
}
body.page-id-15361 .title-bordered h2 small{
    position:static; display:block; width:auto; padding:12px 0 0;
    font-family:"Hanken Grotesk", system-ui, sans-serif; font-weight:600;
    font-size:17px; color:#726d5f; text-transform:none; letter-spacing:0;
}

/* ---- The wall ------------------------------------------------------------- */
/* Multi-column, not grid: quote lengths vary wildly (a sentence to a paragraph),
   and columns pack ragged heights without leaving holes. */
.mlpa-stories__grid{ columns:2; column-gap:1.4em; }
@media (max-width:820px){ .mlpa-stories__grid{ columns:1; } }

.mlpa-story{
    break-inside:avoid; -webkit-column-break-inside:avoid;
    display:block; margin:0 0 1.4em; padding:1.5em 1.6em 1.3em;
    background:#fff; border:1px solid var(--s-line); border-radius:16px;
    box-shadow:0 18px 34px -28px rgba(50,45,20,.5);
}

/* Owner-written text: any length, any casing, sometimes one unbroken block.
   Upright at body size — the old all-italic grey treatment was unreadable. */
.mlpa-stories .mlpa-story__quote{
    margin:0; padding:0; border:0; background:none; box-shadow:none; border-radius:0;
    font-family:var(--s-f-body); font-style:normal; font-weight:400;
    font-size:1.02em; line-height:1.65; color:#3a3a2e; overflow-wrap:anywhere;
}
/* the parity layer gives every blockquote::before an absolutely-positioned
   entypo glyph — reset it to an inline mark or it lands on the first word */
.mlpa-stories .mlpa-story__quote::before{
    content:"\f10d"; font-family:FontAwesome;
    position:static; display:inline; left:auto; top:auto;
    font-size:.9em; line-height:1; color:var(--s-green); opacity:.4; margin-right:.5em;
}

/* ---- Signature row ------------------------------------------------------- */
.mlpa-story__by{
    display:flex; align-items:center; gap:.85em; flex-wrap:wrap;
    margin-top:1.1em; padding-top:1em; border-top:1px solid var(--s-line);
}
.mlpa-stories .mlpa-story__pet{
    flex:0 0 auto; display:block; width:56px; height:56px; border-radius:50%;
    overflow:hidden; background:var(--s-green-soft); box-shadow:0 0 0 1px var(--s-line);
}
.mlpa-story__pet img{ display:block; width:100%; height:100%; object-fit:cover; }
.mlpa-story__pet-ph{ display:grid; place-items:center; width:100%; height:100%; color:rgba(95,143,34,.65); }
.mlpa-story__who{ display:flex; flex-direction:column; min-width:0; }
.mlpa-story__who strong{
    font-family:var(--s-f-disp); font-weight:900; font-size:1.3em; line-height:1;
    color:var(--s-ink);
}
.mlpa-stories .mlpa-story__petname{
    font-size:.86em; font-weight:700; color:var(--s-orange-deep); text-decoration:none;
}
.mlpa-stories .mlpa-story__petname:hover{ color:var(--s-orange); text-decoration:underline; }

.mlpa-story__chips{ display:flex; flex-wrap:wrap; gap:.4em; margin-left:auto; }
.mlpa-story__chip{
    display:inline-flex; align-items:center; gap:.4em;
    background:#f4f1e6; color:var(--s-muted);
    font-size:.78em; font-weight:700; line-height:1.4;
    padding:.42em .8em; border-radius:999px; white-space:nowrap;
}
.mlpa-story__chip--home{ background:var(--s-green-soft); color:var(--s-green-deep); }
.mlpa-story__chip i{ opacity:.85; }

/* ---- "…and N more" closer (in place of pagination) ----------------------- */
.mlpa-stories__more{
    margin-top:.4em; text-align:center;
    background:
        radial-gradient(70% 100% at 50% 0%, rgba(63,138,128,.10), transparent 60%),
        linear-gradient(180deg,#fbf8ef,#f4efe1);
    border:1px solid var(--s-line); border-radius:20px;
    padding:clamp(24px,4vw,40px) clamp(20px,4vw,36px);
}
.mlpa-stories__faces{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    padding-left:12px; margin-bottom:1.1em;
}
.mlpa-stories .mlpa-stories__face{
    flex:0 0 auto; display:block; width:46px; height:46px; margin-left:-12px;
    border:2px solid #fbf8ef; border-radius:50%; overflow:hidden;
    background:var(--s-green-soft); box-shadow:0 3px 8px -3px rgba(50,45,20,.45);
    transition:transform .15s ease;
}
.mlpa-stories__face img{ display:block; width:100%; height:100%; object-fit:cover; }
.mlpa-stories .mlpa-stories__face:hover{ position:relative; z-index:2; transform:translateY(-3px) scale(1.07); }
.mlpa-stories .mlpa-stories__face--count{
    display:grid; place-items:center; width:auto; min-width:58px; height:46px;
    margin-left:8px; position:relative; z-index:1;
    padding:0 .75em; border-radius:999px;
    background:var(--s-green-deep); color:#fff;
    font-family:var(--s-f-body); font-weight:800; font-size:.86em;
}
@media (max-width:640px){
    /* keep the face strip to one tidy row on phones */
    .mlpa-stories__face:nth-child(n+8):not(.mlpa-stories__face--count){ display:none; }
    .mlpa-stories .mlpa-stories__face{ width:40px; height:40px; margin-left:-10px; }
    .mlpa-stories .mlpa-stories__face--count{ height:40px; min-width:52px; font-size:.8em; }
}

.mlpa-stories__more h3{
    margin:0; font-family:var(--s-f-disp); font-weight:900;
    font-size:clamp(1.8em,3.8vw,2.5em); line-height:1.02; letter-spacing:-.01em;
    color:var(--s-ink);
}
.mlpa-stories__more h3 strong{ color:var(--s-green-deep); font-weight:900; }
.mlpa-stories__more-sub{
    margin:.75em auto 0; max-width:620px;
    font-size:1em; line-height:1.6; color:var(--s-muted);
}
.mlpa-stories__more-sub strong{ color:var(--s-ink); font-weight:800; }

.mlpa-stories__cta{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:1.1em; margin-top:1.5em;
}
.mlpa-stories .mlpa-stories__btn{
    display:inline-flex; align-items:center; gap:.5em;
    background:linear-gradient(180deg,var(--s-orange),var(--s-orange-deep));
    color:#fff; text-shadow:0 1px 1px rgba(90,40,0,.28); text-decoration:none;
    font-family:var(--s-f-disp); font-weight:900; font-size:1.2em;
    padding:.5em 1.25em; border-radius:10px;
    box-shadow:0 12px 22px -12px rgba(204,122,43,.7);
    transition:transform .15s ease;
}
.mlpa-stories .mlpa-stories__btn:hover{ transform:translateY(-1px); color:#fff; }
.mlpa-stories .mlpa-stories__link{
    display:inline-flex; align-items:center; gap:.45em;
    font-weight:700; color:var(--s-teal-deep); text-decoration:none;
}
.mlpa-stories .mlpa-stories__link:hover{ color:var(--s-orange-deep); }