/* pardee-agent-tile — the agent tile in a property page sidebar, on the MLS listing pages and the
   WP-entered /property/ pages alike.

   The tile fills the rail: it is a flex child of .pardee-detailrail and sets no width of its own, so
   it measures exactly as wide as the price card and the other blocks above it.

   Two shapes, both fed by the same markup:
     .pardee-atile--standard  photo with an optional intro badge, rating, name, role and licence,
                              "Known for", specialty and neighborhood chips, a client line, and the
                              two buttons;
     .pardee-atile--compact   photo left, rating, name, role, one line, one button.

   Every value is a design token. The dialog the Contact button opens reuses the showing dialog's
   chrome (.pardee-smodal), so the form is styled in one place; .pardee-amodal only adds what a
   message form needs that a showing request does not. */

/* ── the card ────────────────────────────────────────────── */
.pardee-atile {
    --atile-line: var(--line-soft, rgba(2, 37, 52, .1));
    --atile-star: #B5651D;   /* the star gold has no --pp-* token */
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    background: var(--pp-white, #fff);
    border: 1px solid var(--atile-line);
    border-radius: var(--r-md, 8px);
    overflow: hidden;
    font-family: var(--font-body, "Gotham", "Helvetica Neue", Arial, sans-serif);
    color: var(--fg, #022534);
}

.pardee-atile + .pardee-atile { margin-top: 0; }

/* ── photo ───────────────────────────────────────────────── */
.pardee-atile__media {
    position: relative;
    aspect-ratio: 5 / 4;
    background: var(--pp-sand, #e8e0d5);
    overflow: hidden;
    flex: none;
}

.pardee-atile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

.pardee-atile__initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display, Georgia, serif);
    font-size: 34px;
    letter-spacing: .04em;
    color: var(--fg-muted, #624a3e);
}

/* intro badge — a play mark and the word, over the lower left of the photo */
.pardee-atile__play {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px 10px;
    background: rgba(0, 18, 28, .68);
    color: var(--pp-cream, #fff6f0);
    border-radius: var(--r-pill, 999px);
    font-weight: var(--pardee-w-bold, 700);
    font-size: 10.5px;
    letter-spacing: .12em;
    line-height: 1.65;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background .2s ease;
}

.pardee-atile__play:hover,
.pardee-atile__play:focus { background: rgba(0, 18, 28, .84); color: var(--pp-cream, #fff6f0); text-decoration: none; }
.pardee-atile__play:focus-visible { outline: 2px solid var(--pp-cream, #fff6f0); outline-offset: 2px; }

.pardee-atile__play-icon { position: relative; display: block; width: 13px; height: 13px; flex: none; }
.pardee-atile__play-icon::before {
    content: "";
    position: absolute;
    left: 3.5px;
    top: 2.7px;
    width: 0;
    height: 0;
    border-top: 3.8px solid transparent;
    border-bottom: 3.8px solid transparent;
    border-left: 6px solid currentColor;
}

/* ── body ────────────────────────────────────────────────── */
.pardee-atile__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 20px 20px 22px;
}

/* ── rating ──────────────────────────────────────────────── */
.pardee-atile__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 12.5px;
    letter-spacing: .01em;
    color: var(--fg-muted, #624a3e);
}

.pardee-atile__rating b { color: var(--fg, #022534); font-weight: var(--pardee-w-bold, 700); font-size: 13px; }

.pardee-atile__stars { display: inline-flex; align-items: center; gap: 2px; }
.pardee-atile__star { width: 14px; height: 14px; flex: none; fill: var(--atile-star); }
.pardee-atile__star--off { fill: none; stroke: var(--atile-star); stroke-width: 1.6px; }

/* ── name, role, licence ─────────────────────────────────── */
.pardee-atile__name {
    margin: 0;
    font-family: var(--font-display, Georgia, serif);
    font-weight: var(--font-display-weight, 400);
    font-size: 25px;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--fg, #022534);
    text-transform: none;
}

.pardee-atile__name a { color: inherit; text-decoration: none; }
.pardee-atile__name a:hover { color: var(--fg, #022534); text-decoration: underline; text-underline-offset: 3px; }

.pardee-atile__role {
    margin: 8px 0 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    font-weight: var(--pardee-w-bold, 700);
    font-size: 10.5px;
    letter-spacing: .18em;
    line-height: 1.65;
    text-transform: uppercase;
    color: var(--fg-muted, #624a3e);
}

.pardee-atile__dre { opacity: .8; letter-spacing: .1em; }

/* ── the "Known for" line and the compact one-liner ──────── */
.pardee-atile__known {
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg, #022534);
}

.pardee-atile__known b {
    display: block;
    margin-bottom: 5px;
    font-weight: var(--pardee-w-bold, 700);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--fg-muted, #624a3e);
}

.pardee-atile__line {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--fg-muted, #624a3e);
}

/* ── chips ───────────────────────────────────────────────── */
.pardee-atile__tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 0; }

.pardee-atile__tag {
    padding: 5px 10px;
    border-radius: var(--r-sm, 4px);
    background: var(--pp-cream-warm, #fff5e8);
    border: 1px solid var(--atile-line);
    color: var(--fg, #022534);
    font-weight: var(--pardee-w-bold, 700);
    font-size: 10px;
    letter-spacing: .1em;
    line-height: 1.65;
    text-transform: uppercase;
}

.pardee-atile__tag--area { background: transparent; color: var(--fg-muted, #624a3e); border-color: rgba(2, 37, 52, .16); }

/* ── client line ─────────────────────────────────────────── */
.pardee-atile__quote {
    margin: 14px 0 0;
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: var(--fg-muted, #624a3e);
}

.pardee-atile__quote::before { content: "\201C"; }
.pardee-atile__quote::after { content: "\201D"; }

.pardee-atile__loved {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 12.5px;
    color: var(--fg-muted, #624a3e);
}

/* ── buttons ─────────────────────────────────────────────── */
.pardee-atile__foot {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.pardee-atile__btn {
    flex: 1 1 auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    margin: 0;
    border: 0;
    border-radius: var(--r-sm, 4px);
    background: transparent;
    font-family: inherit;
    font-weight: var(--pardee-w-bold, 700);
    font-size: 12px;
    letter-spacing: .12em;
    line-height: 1.65;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.pardee-atile__btn:focus-visible { outline: 2px solid var(--pp-terracotta, #9a4121); outline-offset: 2px; }

.pardee-atile__btn--primary { background: var(--pp-ink-mid, #022534); color: var(--pp-cream, #fff6f0); }
.pardee-atile__btn--primary:hover { background: var(--pp-ink, #001621); color: var(--pp-cream, #fff6f0); text-decoration: none; }

.pardee-atile__btn--ghost { color: var(--fg, #022534); border: 1px solid var(--pp-ink-mid, #022534); }
.pardee-atile__btn--ghost:hover { background: var(--pp-ink-mid, #022534); color: var(--pp-cream, #fff6f0); text-decoration: none; }

/* ── compact ─────────────────────────────────────────────── */
.pardee-atile--compact { flex-direction: row; align-items: stretch; }
.pardee-atile--compact .pardee-atile__media { width: 118px; aspect-ratio: 1; }
.pardee-atile--compact .pardee-atile__body { padding: 16px 18px 18px; }
.pardee-atile--compact .pardee-atile__name { font-size: 21px; }
.pardee-atile--compact .pardee-atile__foot { padding-top: 14px; }

/* ── narrow rails and phones ─────────────────────────────── */
@media (max-width: 420px) {
    .pardee-atile__body { padding: 18px 16px 20px; }
    .pardee-atile__name { font-size: 22px; }
    .pardee-atile__btn { flex: 1 1 100%; }
}

/* ── the dialog the Contact button opens ─────────────────── */
/* The panel, the close control, the title and the whole Gravity Forms chrome come from the showing
   dialog's stylesheet; these rules add only what differs. The extra class raises specificity, so the
   result does not depend on which stylesheet loads first. */
.pardee-smodal.pardee-amodal .pardee-smodal__title { margin-bottom: 18px; }

/* This form lays its own fields out in halves through Gravity's own layout classes, so the two-step
   stacking the showing request needs must not reach it. */
.pardee-smodal.pardee-amodal .pardee-smodal__panel .gform_body > .gfield { margin-bottom: 0; }
.pardee-smodal.pardee-amodal .gform_wrapper .gform_fields { grid-row-gap: 18px; }